實(shí)用UI設(shè)計(jì)法則（上）

本文編譯自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è)部分，今天分享第一部分，來(lái)學(xué)習(xí)咯！

序言

首先，明確一點(diǎn)，這篇文章并不是為所有人準(zhǔn)備的，而是有特定的目標(biāo)讀者：

想要在開(kāi)發(fā)產(chǎn)品時(shí)設(shè)計(jì)出好看UI的開(kāi)發(fā)者。想要讓自己作品集更出彩的UX設(shè)計(jì)師，或者是想要做出更精美的UI和UX的設(shè)計(jì)師。

如果你是學(xué)藝術(shù)的學(xué)生或者已經(jīng)是UI設(shè)計(jì)師了，你可能覺(jué)得這篇文章很無(wú)聊，而且觀點(diǎn)都是錯(cuò)的。沒(méi)關(guān)系，你的批評(píng)沒(méi)錯(cuò)，把這個(gè)網(wǎng)頁(yè)關(guān)了，去忙別的事吧。

那么從這篇文章中到底能學(xué)到什么呢？我曾是一名不懂UI的UX設(shè)計(jì)師。我非常熱愛(ài)UX設(shè)計(jì)，但是后來(lái)我發(fā)現(xiàn)，做出精美的界面是多么的必要:

我以前的作品集看起來(lái)一團(tuán)糟，顯得我的作品和思考過(guò)程很差勁。我做UX咨詢的客戶更喜歡有能力呈現(xiàn)作品的人，而不是只會(huì)畫(huà)一堆方塊和箭頭的人。我能為一些早期的創(chuàng)業(yè)公司工作嗎？還是一邊兒呆著吧。

我當(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)常分析，并不是突然開(kāi)悟，理解了什么是美，什么是平衡。

這篇文章不講理論，只談應(yīng)用。我不會(huì)講什么黃金分割、色彩理論，只有實(shí)站中總結(jié)出的經(jīng)驗(yàn)和教訓(xùn)。就好像，柔道源于日本幾個(gè)世紀(jì)以來(lái)的尚武精神和哲學(xué)理念。上柔道課時(shí)，不僅能學(xué)到打斗，還會(huì)學(xué)到很多關(guān)于能量、氣息與和諧之類(lèi)的東西。而以色列格斗術(shù)（Krav Maga）則完全不同。這種格斗術(shù)是納粹壓迫下猶太人發(fā)明的。其中根本沒(méi)有“藝術(shù)”，在以色列格斗術(shù)的課堂上，你學(xué)到就是怎樣用一根筆或者本書(shū)襲擊別人的眼睛。

這篇文章就是產(chǎn)品設(shè)計(jì)領(lǐng)域的以色列格斗術(shù)。

以下是我要講的法則：

光線來(lái)自天空黑白優(yōu)先增加空白空間學(xué)會(huì)在圖片上呈現(xiàn)文字（第２部分）做好強(qiáng)調(diào)和淡化（第２部分）只用合適的字體（第２部分）善于借鑒優(yōu)秀的作品（第２部分）

我們來(lái)一起看看這些法則。

法則1：光線來(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é):

沒(méi)有按下去的按鈕底部邊緣更暗，因?yàn)闆](méi)有光線照到那里。沒(méi)有按下去的按鈕上半部分比下半部分稍微亮一些。這是在模仿一個(gè)略有弧度的表面（見(jiàn)側(cè)視圖）。沒(méi)有按下去的按鈕下方有一些細(xì)微的陰影，在放大圖中看得更清楚。按下去的按鈕整體顏色都更暗了，但下半部分的顏色依然比上面深。這是因?yàn)榘粹o在屏幕的平面上，光線不容易照到。也有人說(shuō)，在現(xiàn)實(shí)中，按下去的按鈕顏色更深，因?yàn)槭终趽踝×斯饩�。

這么一個(gè)簡(jiǎn)單的按鈕就有4種不同的光線變化。實(shí)際上，我們可以把這種原則運(yùn)用到各處。

iOS 6有點(diǎn)過(guò)時(shí)了，但還是學(xué)習(xí)光線不錯(cuò)的案例。這張圖是iOS 6“勿擾模式”和“通知”的設(shè)置，看看上面有多少種不同的光線變化。

控制面板的上邊緣有一小塊陰影。“開(kāi)啟”滑動(dòng)槽上部也有陰影。“開(kāi)啟”滑動(dòng)槽的下半部分，反射了一些光線。按鈕是突出的，上邊緣較亮，因?yàn)槭桥c光源垂直的，接收了大量光線，折射到你的眼睛中。因?yàn)楣饩�角度的問(wèn)題，分割線處出現(xiàn)了陰影。

通常會(huì)內(nèi)嵌的元素：

文字輸入框按下的按鈕滑動(dòng)槽單選框（未選擇的）復(fù)選框

通常會(huì)外凸的元素

未按下的按鈕滑動(dòng)按鈕下拉控件卡片選擇后的單選按鈕彈出消息

等等，現(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)一的視覺(jué)設(shè)計(jì)語(yǔ)言。Material Design的設(shè)計(jì)指導(dǎo)為我們展示了它如何運(yùn)用陰影表現(xiàn)不同的層次。

越來(lái)越多的設(shè)計(jì)師開(kāi)始學(xué)習(xí)Material Design，咱也不能落伍咯！

《超全面總結(jié)！深聊MATERIAL DESIGN引領(lǐng)的設(shè)計(jì)趨勢(shì)》《學(xué)霸的自學(xué)筆記！Material Design設(shè)計(jì)規(guī)范學(xué)習(xí)心得》

這也是我所認(rèn)同的類(lèi)型。用現(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í)的。