當(dāng)設(shè)計總監(jiān)說你的作品太膚淺時，UI小白該如何改進？

如何使任何食物變得更美味？只要加糖就可以了，食品行業(yè)巨頭用這個伎倆把一切都變得如此簡單。如今，糖無處不在，漢堡，軟飲料，脫脂牛奶，蛋黃醬，甚至是嬰兒食品。

1822年，美國人平均每五天消耗約45克糖，如今達到756g。

我們的大腦不斷地渴望糖，所以我們沉迷于含有它的食物（腦部掃描顯示糖像可卡因一樣上癮）。糖沒有營養(yǎng)價值，這只會給食品生產(chǎn)商帶來更高的利潤，并造成消費者的健康問題。有一個輝煌的紀(jì)錄片《Fed Up》講述的就是這個。（譯者注：Fed Up是由Stephanie Soechtig指導(dǎo)，撰寫和制作的2014年美國紀(jì)錄片。這部電影重點在于關(guān)注美國人肥胖的原因，大量的數(shù)據(jù)顯示，加工食品中大量的糖是人們忽視的根源。）

如何使你的設(shè)計變得更好？只要加糖就可以了——視覺糖。

 

什么是視覺糖？

視覺糖是任何視覺裝飾元素。最常見的視覺糖類型是圖標(biāo)、漸變、陰影、紋理、動效等。

有時候，設(shè)計師會以無意義或過度的方式使用它們，使他們的設(shè)計更好，這里的關(guān)鍵是「無意義」。這些本身沒有任何問題，只是它們被用來甜化原本無味和無意義的設(shè)計。

為什么會這樣呢？那么，我們假設(shè)在這樣的情境下：你在設(shè)計時感覺有點平淡。你會怎么做？添加一些圖標(biāo)，或漸變和陰影？看起來使你的設(shè)計變得更好了，但實際上你只是將一個膚淺的設(shè)計偽裝起來。

有些設(shè)計甚至徹頭徹尾是個糖衣炮彈（以壞的方式）。大量的糖分卻毫無營養(yǎng)價值。我們看看來自Dribbble的典型的儀表板：

?濃重的陰影

?過量的圖標(biāo)

?漸變

?意思

 

到底多少糖分算多？

根據(jù)美國心臟協(xié)會的數(shù)據(jù)，男性每天攝入的添加糖分最多為37.5克（9茶匙），而女性最多為25克（6茶匙）。

產(chǎn)品設(shè)計呢？在產(chǎn)品設(shè)計中可以使用多少視覺糖？Edward Tufte在他的書《Visual Display of Quantitative Information》中有完美的答案。

當(dāng)視覺圖表被雜亂的裝飾形式取代，當(dāng)數(shù)據(jù)量度和結(jié)構(gòu)變成可見的設(shè)計元素，當(dāng)視覺樣式由整體設(shè)計決定而非定量數(shù)據(jù)，那你就可以稱此「視覺設(shè)計」為「鴨形商店」。（譯者注：大鴨子商店是位于美國長島的一個建筑，外形是個寫實派的鴨子造型，而其主要功能就是賣鴨子和鴨蛋。）

對于這個建筑，整個結(jié)構(gòu)本身就是裝飾，就像鴨子數(shù)據(jù)圖形一樣。在拉斯維加斯的學(xué)習(xí)中，Robert Venturi，Denise Scott Brown和StevenIzenour撰寫了關(guān)于現(xiàn)代建筑的鴨子，他們的想法也與數(shù)據(jù)圖形的設(shè)計有關(guān)。

當(dāng)代建筑師自以為是地「擯棄」建筑外部的裝飾，卻無意中設(shè)計出了一個本身就是純粹裝飾品的建筑。在推動空間與藝術(shù)方面的象征意義和裝飾，他們把整個建筑變成了鴨子。他們?nèi)〈藗鹘y(tǒng)的棚用裝飾的天真和廉價的實踐，這是一種非常憤世嫉俗，昂貴的程序和結(jié)構(gòu)的扭曲來促進鴨子的發(fā)展?，F(xiàn)在是時候重新評估John Ruskin曾經(jīng)令人震驚的聲明了，建筑風(fēng)格是建筑物的裝飾，但我們應(yīng)該附上Pugin的警告：裝飾建筑是可以的，但不要建造裝飾品。

 

如何減少視覺糖？

在設(shè)計工作時，牢記五種方法，確保你的設(shè)計不會變成視覺的垃圾食品。

1. 始終記住產(chǎn)品需求的層級

在開始考慮形式前，先把產(chǎn)品的功能性定位清楚。一旦你理清了設(shè)計目的，并將信息結(jié)構(gòu)牢記于心，每個設(shè)計元素就能變得恰到好處。如果一開始就建立在產(chǎn)品視覺外觀和感覺的基礎(chǔ)上，金字塔將會倒塌。

△ Devin Hunt的設(shè)計檢查表

 

iA.net還有一個很好的建議：

不能因為你的設(shè)計感覺無意義、冷淡或者沒有你預(yù)期的那樣好，就成為你尋找使用圖標(biāo)的理由。圖標(biāo)不會修復(fù)結(jié)構(gòu)有問題的設(shè)計。在設(shè)計過程的最后添加圖標(biāo)，在使用線框時不要使用圖標(biāo)。圖片可以表達1000個不同的意思，強大的信息架構(gòu)會幫助你找到正確的概念并將它們放在正確的語境中。在訴諸情感之前，先弄清楚你的理論基礎(chǔ)。

2. 你設(shè)計中的每個元素都應(yīng)該有目的

例如，Google的Material Design設(shè)計語言中，動效用于增加額外的意義，而不僅僅是讓設(shè)計看起來更好。

動效的作用不僅僅是使設(shè)計過渡自然，應(yīng)該首先是幫助引導(dǎo)用戶，在正確的時間提供正確的信息。動效應(yīng)該有助于解決復(fù)雜的問題，并清楚地向用戶傳達一個元素的阻力、動態(tài)和路徑。

——來自Sharon Correa和John Schlemmer「Making Motion Meaningful」

 

3. 在沒有必要的地方去除視覺糖

Dropbox在重新設(shè)計之前，左側(cè)導(dǎo)航面板中的每個菜單項旁邊都有圖標(biāo)。他們看起來不錯，但幾乎沒有任何實際意義。如果你隱藏每個圖標(biāo)旁邊的文字，用戶不會記得它的意思。在新設(shè)計中，所有的圖標(biāo)都不見了，現(xiàn)在導(dǎo)航不僅視覺上更干凈，而且更容易理解。

△ 由Dropbox Design團隊提供

4. 不要跟隨趨勢

當(dāng)Dieter Rams開始研究他的第一個設(shè)計時，黑膠碟播放機的時尚設(shè)計就像這樣。

△ Fairchild 411H

這是他設(shè)計的：

△ Braun PC-3


 

5. 記住好的設(shè)計不需要過甜

Frank Chimero用香草冰淇淋比喻好的設(shè)計。