本文編譯自Medium，作者是一位UX（User Experience, 用戶體驗(yàn))設(shè)計(jì)師，他通過(guò)自己學(xué)習(xí)UI設(shè)計(jì)的過(guò)程，總結(jié)出7條實(shí)用的法則，為UI設(shè)計(jì)新手提供了寶貴的經(jīng)驗(yàn)。文章分為2個(gè)部分，這里是第1部分。
首先，明確一點(diǎn)，這篇文章并不是為所有人準(zhǔn)備的，而是有特定的目標(biāo)讀者：
如果你是學(xué)藝術(shù)的學(xué)生或者已經(jīng)是 UI 設(shè)計(jì)師了，你可能覺得這篇文章很無(wú)聊，而且觀點(diǎn)都是錯(cuò)的。沒(méi)關(guān)系，你的批評(píng)沒(méi)錯(cuò)，把這個(gè)網(wǎng)頁(yè)關(guān)了，去忙別的事吧。
那么從這篇文章中到底能學(xué)到什么呢？我曾是一名不懂 UI 的 UX 設(shè)計(jì)師。我非常熱愛 UX 設(shè)計(jì)，但是后來(lái)我發(fā)現(xiàn)，做出精美的界面是多么的必要:
我當(dāng)然也有借口：
我沒(méi)有美術(shù)基礎(chǔ)，我主修工程專業(yè)，所以我做出難看的東西也無(wú)可厚非。
最終，我還是學(xué)了 app 設(shè)計(jì)，不斷地分析案例，厚著臉皮臨摹成功的作品。假設(shè)我在 1 個(gè) UI 項(xiàng)目上花 10 個(gè)小時(shí)的時(shí)間，其中只有 1 個(gè)小時(shí)是有效的，其它 9 個(gè)小時(shí)都是在失敗中不斷地學(xué)習(xí)，玩命的在 Google、Pinterest 或者 Dribble 上找值得借鑒的東西。
下面這些“法則”都是我從失敗中總結(jié)出來(lái)的。所以，我需要提醒新人：我現(xiàn)在擅長(zhǎng)UI，主要得益于我經(jīng)常分析，并不是突然開悟，理解了什么是美，什么是平衡。
這篇文章不講理論，只談應(yīng)用。我不會(huì)講什么黃金分割、色彩理論，只有實(shí)站中總結(jié)出的經(jīng)驗(yàn)和教訓(xùn)。就好像，柔道源于日本幾個(gè)世紀(jì)以來(lái)的尚武精神和哲學(xué)理念。上柔道課時(shí)，不僅能學(xué)到打斗，還會(huì)學(xué)到很多關(guān)于能量、氣息與和諧之類的東西。而以色列格斗術(shù)（Krav Maga）則完全不同。這種格斗術(shù)是納粹壓迫下猶太人發(fā)明的。其中根本沒(méi)有“藝術(shù)”，在以色列格斗術(shù)的課堂上，你學(xué)到就是怎樣用一根筆或者本書襲擊別人的眼睛。
這篇文章就是產(chǎn)品設(shè)計(jì)領(lǐng)域的以色列格斗術(shù)。
以下是我要講的法則：
我們來(lái)一起看看這些法則。
陰影能夠告訴人腦我們到底在看什么樣的UI元素。
這可能是學(xué)習(xí) UI 設(shè)計(jì)時(shí)，最容易忽略卻又極為重要的一點(diǎn)了: 光線來(lái)自天空。光線總是從天空（上方）來(lái)的，從下面照上來(lái)的光看起來(lái)會(huì)非常詭異。
當(dāng)光線從天上照下來(lái)的時(shí)候，物品的上端會(huì)偏亮，而下方會(huì)出現(xiàn)陰影。上半部分顏色淺一些，而下半部分深一些。
從下面打一束光到人臉上是不是看起來(lái)很滲人？UI 設(shè)計(jì)也是同理。我們的屏幕是平的，但是我們可以通過(guò)一些藝術(shù)手法讓它看起來(lái)是 3D 的，在每個(gè)元素的下方加一些陰影。
就拿這個(gè)按鈕舉例，這是一個(gè)相對(duì)“扁平化”(flat) 的按鈕，但依然可以看出一些光線變化的細(xì)節(jié):
這么一個(gè)簡(jiǎn)單的按鈕就有 4 種不同的光線變化。實(shí)際上，我們可以把這種原則運(yùn)用到各處。
iOS 6 有點(diǎn)過(guò)時(shí)了，但還是學(xué)習(xí)光線不錯(cuò)的案例。這張圖是 iOS 6“勿擾模式”和“通知”的設(shè)置，看看上面有多少種不同的光線變化。
通常會(huì)內(nèi)嵌的元素：
通常會(huì)外凸的元素
等等，現(xiàn)在不是追求扁平化的設(shè)計(jì)嗎？
iOS 7 引發(fā)了科技界對(duì)于“扁平化設(shè)計(jì)”(flat design) 的追求。也就是說(shuō)圖標(biāo)是平的，不再模仿實(shí)物而外凸或內(nèi)凹，只有線條和單一顏色的形狀。
我很喜歡這種干凈、簡(jiǎn)潔的風(fēng)格，但是我認(rèn)為這種趨勢(shì)不會(huì)長(zhǎng)久。通過(guò)細(xì)微的變化模擬出 3D 的效果非常自然，不會(huì)被完全取代的。
在不久的將來(lái)，我們很可能會(huì)看到半扁平的 UI（這也是我推薦你使用的設(shè)計(jì)風(fēng)格）我把它稱為“flatty design”，依然非常干凈簡(jiǎn)潔，但是也有一些陰影，有輕點(diǎn)、滑動(dòng)、按下操作的提示。
現(xiàn)在，Google 也在各個(gè)產(chǎn)品上推行他們的Material Design，提供一種統(tǒng)一的視覺設(shè)計(jì)語(yǔ)言。Material Design 的設(shè)計(jì)指導(dǎo)為我們展示了它如何運(yùn)用陰影表現(xiàn)不同的層次。
這也是我所認(rèn)同的類型。用現(xiàn)實(shí)世界的元素來(lái)傳遞信息，關(guān)鍵在于:細(xì)微。你不能說(shuō)它沒(méi)有模仿現(xiàn)實(shí)世界，但也絕不是 2006 年的網(wǎng)頁(yè)風(fēng)格，沒(méi)有紋理，沒(méi)有梯度，更沒(méi)有光澤。
我認(rèn)為“flatty”是未來(lái)的方向。扁平化？早晚會(huì)過(guò)時(shí)的。
在上色前用灰度模式設(shè)計(jì)可以簡(jiǎn)化大量的工作，讓你更加關(guān)注空間和元素布局。
UX 設(shè)計(jì)師現(xiàn)在都喜歡“移動(dòng)優(yōu)先”的概念，這就意味著你要先考慮好在手機(jī)上如何顯示頁(yè)面，然后才考慮在超清的 Retina 屏幕上的顯示效果。
這種限制非常好，能夠幫你理清思路。先解決一些棘手的問(wèn)題（在小屏幕上顯示）。然后再解決簡(jiǎn)單的問(wèn)題（在大屏幕上的可用性）。
我希望你先用黑色和白色設(shè)計(jì)，先把復(fù)雜的問(wèn)題解決了。在不借助顏色幫助的情況下把 app 做得美觀易用。最后再有目的地上色。
這種方法能保持 app“干凈”、“簡(jiǎn)潔”。加入過(guò)多的顏色很容易毀掉簡(jiǎn)潔性。“黑白優(yōu)先”會(huì)促使你關(guān)注空間、尺寸和布局這些更重要的問(wèn)題。先來(lái)看一些經(jīng)典的用灰度模式設(shè)計(jì)的頁(yè)面。
“黑白優(yōu)先”法則并不適用于所有情況，比如運(yùn)動(dòng)、卡通等有著鮮明特色的設(shè)計(jì)就需要好好地運(yùn)用各種顏色。不過(guò)，大部分app并沒(méi)有這樣鮮明的特點(diǎn)，只要保持干凈和整潔就好，絢麗的顏色被公認(rèn)是很難設(shè)計(jì)的，所以，還是先用黑色和白色來(lái)吧。
第二步:如何上色
上色最簡(jiǎn)單的方法就是只加一種顏色。
在灰色的基礎(chǔ)上只加一種顏色可以簡(jiǎn)單快速的吸引眼球和注意力。
你也可以更進(jìn)一步，在灰色的基礎(chǔ)上加兩種顏色，或者添加統(tǒng)一色調(diào)的多種顏色。
實(shí)踐中的顏色法則——什么是色調(diào)？
網(wǎng)頁(yè)主要用的是十六進(jìn)制 RGB 表。但 RGB 不是個(gè)好的顏色設(shè)計(jì)框架，HSB 模式會(huì)更好用，其中 H(hues) 表示色相，S(saturation) 表示飽和度，B（brightness）表示亮度。
HSB 模式是比 RGB 模式更適合我們看待顏色的方式。如果你對(duì)這方面不太了解，以下是一些 HSB 模式簡(jiǎn)單的入門知識(shí)。
通過(guò)調(diào)整單一色相的飽和度和亮度，你可以生成各種不同的顏色——深色、淺色、背景色、強(qiáng)調(diào)的地方、吸引眼球的地方等，但是又不會(huì)很扎眼。
使用一種或兩種基礎(chǔ)色調(diào)的多種顏色是強(qiáng)調(diào)和淡化某些元素，而又不把設(shè)計(jì)搞得一團(tuán)糟的最可靠的方法。
關(guān)于顏色的其它幾點(diǎn)建議
顏色是視覺設(shè)計(jì)中最復(fù)雜的。我從復(fù)雜的理論和長(zhǎng)期的實(shí)踐中挑出了一些好的建議送給你:
小工具箱：
法則3：增加空白空間
為了讓UI看起來(lái)更加有設(shè)計(jì)感，留出一些空白的空間。
在第 2 條法則中，我說(shuō)到了黑白優(yōu)先的原則，讓設(shè)計(jì)師在考慮顏色之前先想想空間和布局，那么現(xiàn)在我們就來(lái)說(shuō)說(shuō)如何安排空間和布局。
HTML 的默認(rèn)版式是這樣的：
所有東西都堆在屏幕上，字號(hào)、行距都很小，段與段之間有一些間隔，但是也不是很大。這么布局實(shí)在是太難看了。如果你想設(shè)計(jì)出精美的UI，那就需要留出更多空白的空間。
如果你和我以前一樣，習(xí)慣用 CSS 來(lái)調(diào)整布局，那你最好改掉這個(gè)壞習(xí)慣，因?yàn)?CSS 默認(rèn)是沒(méi)有留出空間的。試著把空白當(dāng)作默認(rèn)狀態(tài)，在空白頁(yè)面添加各種元素。從沒(méi)有修飾過(guò)的 HTML 開始，先做好內(nèi)容，然后再做排版。
下圖是 Piotr Kwiatkowski 設(shè)計(jì)的一個(gè)音樂(lè)播放器。
請(qǐng)注意左側(cè)的菜單欄。字號(hào)是 12px，行間距有文字的兩倍高。再看看列表的名稱，“PLAYLISTS”和下劃線之間有 15px 的空白，播放列表名稱之間還有 25px 的間距。
在頂部導(dǎo)航欄也有很大的空間，搜索圖標(biāo)和“Search all music”占到了導(dǎo)航欄高度的 20%。
留白的空間收到了良好的效果，不同的元素有機(jī)的組合在一起，使得這個(gè)頁(yè)面成為最好的音樂(lè)播放器 UI 之一。
大量的空白可以把混亂的界面做得簡(jiǎn)潔美觀，比如這個(gè)論壇：
或者維基百科：
很多人認(rèn)為在維基百科的這個(gè)新頁(yè)面上，很多功能找不到了，但是你不能否認(rèn)這是學(xué)習(xí)頁(yè)面設(shè)計(jì)的一個(gè)好案例。
在行之間留出空間。
在各個(gè)元素之間留出空間。
在各組元素之間留出空間。
分析一下哪些是可行的。
好了，以上就是第 1 部分的內(nèi)容，感謝閱讀！
在第 2 部分中，我會(huì)講到剩下的 4 條法則：
4. 學(xué)會(huì)在圖片上呈現(xiàn)文字
5. 做好強(qiáng)調(diào)和淡化
6. 只用合適的字體
7. 善于借鑒優(yōu)秀的作品
