作者是一位UX(UserExperience,

用戶體驗(yàn))設(shè)計(jì)師，他通過(guò)自己學(xué)習(xí)UI設(shè)計(jì)的過(guò)程，總結(jié)出7條實(shí)用的法則，為UI設(shè)計(jì)新手提供了寶貴的經(jīng)驗(yàn)。

本文篇幅較長(zhǎng)，請(qǐng)耐心查看

序言

首先，明確一點(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ì)畫一堆方塊和箭頭的人。

我能為一些早期的創(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)于能量、氣息與和諧之類的東西。而以色列格斗術(shù)(Krav

Maga)則完全不同。

這種格斗術(shù)是納粹壓迫下猶太人發(fā)明的。其中根本沒(méi)有“藝術(shù)”，在以色列格斗術(shù)的課堂上，你學(xué)到就是怎樣用一根筆或者本書襲擊別人的眼睛。

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

以下是我要講的法則：

光線來(lái)自天空

黑白優(yōu)先

增加空白空間

學(xué)會(huì)在圖片上呈現(xiàn)文字

做好強(qiáng)調(diào)和淡化

只用合適的字體

像藝術(shù)家一樣偷師

我們來(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)用到各處。

iOS6有點(diǎn)過(guò)時(shí)了，但還是學(xué)習(xí)光線不錯(cuò)的案例。這張圖是iOS6“勿擾模式”和“通知”的設(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ì)嗎?

iOS7引發(fā)了科技界對(duì)于“扁平化設(shè)計(jì)”(flatdesign)

的追求。也就是說(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)品上推行他們的MaterialDesign，提供一種統(tǒng)一的視覺(jué)設(shè)計(jì)語(yǔ)言。MaterialDesign

的設(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í)的。

法則2：黑白優(yōu)先

在上色前用灰度模式設(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)題解決了。在不借助顏色幫助的情況下把a(bǔ)pp做得美觀易用。最后再有目的地上色。

這種方法能保持

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)建議

顏色是視覺(jué)設(shè)計(jì)中最復(fù)雜的。我從復(fù)雜的理論和長(zhǎng)期的實(shí)踐中挑出了一些好的建議送給你:

小工具箱：

不要用純黑色：在現(xiàn)實(shí)世界中幾乎見(jiàn)不到絕對(duì)的黑色。調(diào)整不同的飽和度可以增加設(shè)計(jì)的豐富程度，也更接近現(xiàn)實(shí)世界。

AdobeColorCC：尋找、調(diào)整、創(chuàng)造顏色組合的不錯(cuò)工具。

在Dribble通過(guò)顏色搜索：尋找某種顏色如何搭配的好方法，非常實(shí)用，如果你已經(jīng)決定了要用那種顏色，可以通過(guò)顏色搜索看看世界頂級(jí)的設(shè)計(jì)師是如何配色的。

法則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，那就需要留出更多空白的空間。

留白空間、HTML和CSS

如果你和我以前一樣，習(xí)慣用CSS來(lái)調(diào)整布局，那你最好改掉這個(gè)壞習(xí)慣，因?yàn)镃SS

默認(rèn)是沒(méi)有留出空間的。試著把空白當(dāng)作默認(rèn)狀態(tài)，在空白頁(yè)面添加各種元素。從沒(méi)有修飾過(guò)的HTML開(kāi)始，先做好內(nèi)容，然后再做排版。

下圖是PiotrKwiatkowski設(shè)計(jì)的一個(gè)音樂(lè)播放器。

請(qǐng)注意左側(cè)的菜單欄。字號(hào)是12px，行間距有文字的兩倍高。再看看列表的名稱，“PLAYLISTS”和下劃線之間有15px

的空白，播放列表名稱之間還有25px的間距。

在頂部導(dǎo)航欄也有很大的空間，搜索圖標(biāo)和“Searchallmusic”占到了導(dǎo)航欄高度的20%。

留白的空間收到了良好的效果，不同的元素有機(jī)的組合在一起，使得這個(gè)頁(yè)面成為最好的音樂(lè)播放器UI之一。

大量的空白可以把混亂的界面做得簡(jiǎn)潔美觀，比如這個(gè)論壇：

或者維基百科：

很多人認(rèn)為在維基百科的這個(gè)新頁(yè)面上，很多功能找不到了，但是你不能否認(rèn)這是學(xué)習(xí)頁(yè)面設(shè)計(jì)的一個(gè)好案例。

在行之間留出空間。

在各個(gè)元素之間留出空間。

在各組元素之間留出空間。

分析一下哪些是可行的。

法則4：學(xué)會(huì)在圖片上呈現(xiàn)文字

在圖片上優(yōu)雅地呈現(xiàn)文字并不容易，這里給出6種方法。

如果你想要成為好的UI

設(shè)計(jì)師，你必須學(xué)會(huì)在圖片上美觀地呈現(xiàn)文字。優(yōu)秀的設(shè)計(jì)師在這方面做得都不錯(cuò)，而水平較低的設(shè)計(jì)師往往在這方面也比較差，甚至完全不會(huì)。在學(xué)習(xí)了這部分以后，相信你會(huì)有很大的提升。

方法0：直接在圖片上放文字

我很猶豫要不要講這種方法，因?yàn)閼?yīng)用起來(lái)十分困難。不過(guò)直接在圖片上放文字從技術(shù)上來(lái)說(shuō)也是可行的，下面這個(gè)網(wǎng)站的首頁(yè)就很不錯(cuò)，所以說(shuō)說(shuō)也無(wú)妨。

直接在圖片上放文字時(shí)，有幾點(diǎn)需要非常注意：

圖片應(yīng)該比較暗，而且顏色不能有太大的反差。

文字必須是白色的，我知道你也能找到用其它顏色的案例。但是我覺(jué)得，你最好還是用白色。

在不同屏幕，不同尺寸的窗口調(diào)試頁(yè)面，確保各種情況下文字都是清晰、易于辨識(shí)的。

上面這3個(gè)方面調(diào)整好就OK了，不要再做其它處理。

我自己從來(lái)沒(méi)有在任何專業(yè)的項(xiàng)目上直接把文字放在圖片上，這種方法是可行的，也能做出酷炫的效果，但還是小心點(diǎn)。

方法1：暗化整張圖片

可能在圖片上放文字最簡(jiǎn)單的方法就是暗化整張圖片，如果原圖顏色不夠深，你可以用半透明的黑色在上面覆蓋一層，比如下面這個(gè)案例就加了一層不透明度35%

的黑色。

如果你直接放原圖，底色太亮，和文字的反差不夠明顯，看不清文字。

類似的方法同樣適用于小圖。

加一層黑色是最簡(jiǎn)單、普適性最強(qiáng)的。當(dāng)然你也可以用其它合適的顏色，比如這樣：

方法2：給文字加個(gè)框

這是一種簡(jiǎn)單有效的方法。在白色文字下方加上一個(gè)略透明的黑色方塊，就可以放在各種各樣的圖片上了，而且顯示效果非常清晰。

當(dāng)然，你也可以放別的顏色，只是需要小心謹(jǐn)慎。

方法3：虛化圖片

虛化圖片是增加文字易讀性的好方法，把文字下方的圖片虛化了，同時(shí)把虛化部分亮度調(diào)低。

iOS7用毛玻璃的效果虛化了背景，而WindowsVista也使用了這種虛化效果。

虛化圖片的方法也有局限性，你需要確保在不同屏幕上圖片尺寸調(diào)整后，文字依然是在虛化的區(qū)域上的。

看看下面這個(gè)例子，你能看清小標(biāo)題嗎?真不知道這樣的設(shè)計(jì)是怎么通過(guò)審核上線的。

方法4：底部褪色

所謂底部褪色是將圖片的下邊緣變暗一些，然后在放上白色的文字。這是一種非常有獨(dú)創(chuàng)性的方法，我不知道在Medium之前有沒(méi)有人用過(guò)，但我是先在

Medium上看到的。

乍一看，你可能覺(jué)得這就是把文字放在了圖片上。其實(shí)不然，圖片上有一些非常細(xì)微的變化，中間完全沒(méi)有黑色覆蓋，而底部有不透明度大約20%

的黑色覆蓋在上面。

這樣的變化很難看出來(lái)，但確實(shí)存在，而且確實(shí)提高了文字的可辨認(rèn)性。

此外，Medium還給文集圖片上的文字加了些許陰影，進(jìn)一步提高了文字的易讀性。最終的效果就是Medium

可以把任何文字放在任何圖片上，閱讀體驗(yàn)非常好。

有人可能會(huì)問(wèn)了，為什么是把圖片的底部變暗呢?為什么不能是圖片的其它區(qū)域?要回答這個(gè)問(wèn)題，請(qǐng)看法則1：光線來(lái)自天空。光線從上面照下來(lái)，圖片的上方亮一些，而底部較暗，看起來(lái)更自然。

此外，你還可以把虛化和底部褪色結(jié)合起來(lái)，做出底部虛化的效果，比如下面這張圖的效果：

方法5：把圖片部分區(qū)域的光線變得更柔和

Elastica的博客的題圖并不是太暗，而且對(duì)比都較強(qiáng)。為什么文字的辨識(shí)度還這么高呢，就像下面兩張圖顯示的這樣：

這里實(shí)際上是把圖片局部區(qū)域的光線變得更柔和，突出了文字。如果我們?cè)跒g覽器上縮小Elastica博客，會(huì)看出到底發(fā)生了什么。

在圖片左下角有一塊陰影區(qū)域，文字置于其上，就很容易辨認(rèn)了。

這可能是在圖片優(yōu)雅呈現(xiàn)文字最細(xì)微的一種方法。我還沒(méi)在別處見(jiàn)過(guò)，保存下來(lái)，說(shuō)不定將來(lái)什么時(shí)候就用到了。

法則5：做好強(qiáng)調(diào)與弱化

把文字設(shè)計(jì)得又美觀又得體通常就是通過(guò)放大或縮小文字，做出反差的效果。

我認(rèn)為，UI設(shè)計(jì)最困難的地方就在于文字的裝飾，因?yàn)樵O(shè)計(jì)文字時(shí)需要考慮的因素太多了：

字號(hào)

顏色

字體粗細(xì)

大小寫

斜體

字母間距

頁(yè)邊空白(準(zhǔn)確的說(shuō)不是文字的一部分，但是容易影響閱讀時(shí)的注意力，所以也算在這個(gè)列表里了)

還有其它一些方法調(diào)整文字吸引讀者的注意力，但是不常用，也不推薦你使用。

下劃線。下劃線現(xiàn)在基本上等同于超鏈接了，我覺(jué)得你還是不要挑戰(zhàn)人們的常識(shí)比較好。

文字背景色。這個(gè)有時(shí)候也被當(dāng)作超鏈接，只不過(guò)不是那么常見(jiàn)。

刪除線。一邊待著去吧，你這個(gè)怪人。

就我個(gè)人經(jīng)驗(yàn)來(lái)說(shuō)，當(dāng)我覺(jué)得一段文字設(shè)計(jì)的不好時(shí)，通常不是因?yàn)橛昧舜髮懽帜?，或者顏色太重，而是因?yàn)楦鞣N要素的搭配出了問(wèn)題。

強(qiáng)調(diào)和弱化

你可以把所有的文字樣式分成兩類：

增強(qiáng)可讀性的樣式：大字號(hào)、粗體、大寫等;

減弱可讀性的樣式：小字號(hào)、與背景對(duì)比不明顯、空白較少等。

上圖“MaterialDesign”這個(gè)標(biāo)題就很突出：字號(hào)大、反襯明顯、字體較粗

上圖頁(yè)腳的字就是弱化處理的，字號(hào)孝反襯不明顯、字體較細(xì)

我認(rèn)為文字設(shè)計(jì)的核心在于：

標(biāo)題是唯一需要全部強(qiáng)調(diào)的元素，其它的部分則應(yīng)該將強(qiáng)調(diào)與弱化結(jié)合使用。

如果網(wǎng)頁(yè)上某個(gè)元素需要強(qiáng)調(diào)，把強(qiáng)調(diào)和弱化結(jié)合在一起，可以避免整個(gè)頁(yè)面看起來(lái)太有壓迫感，同時(shí)又讓各個(gè)元素的呈現(xiàn)效果恰到好處。

下面這張BluHomes的首頁(yè)堪稱是這方面的典范：上方文字較大，突出顯示，但是用了小寫字母。沒(méi)有給人強(qiáng)烈的壓迫感。

網(wǎng)頁(yè)上的數(shù)字字號(hào)較大，是網(wǎng)頁(yè)上的重要信息。但是請(qǐng)注意，數(shù)字的字體很細(xì)，與背景色對(duì)比也不明顯;而數(shù)字下方的單位雖然寫得很小，卻全部加粗，用大寫字母。

這就是設(shè)計(jì)中的平衡。

上面這張圖是ContentsMagazine的網(wǎng)站，也是學(xué)習(xí)強(qiáng)調(diào)和弱化的一個(gè)好案例。

文章標(biāo)題是唯一沒(méi)有用斜體的部分，而且還做了加粗處理，更容易吸引讀者的關(guān)注。

作者姓名寫在文章標(biāo)題下方，字體加粗，與沒(méi)有加粗的”by“區(qū)分開(kāi)來(lái)。

“ALREADY

OUT”獨(dú)立出來(lái)，字號(hào)很小，與背景區(qū)分不明顯，但是用了大寫字母，字間距很大，文字外圍空白較多，當(dāng)你想要找它的時(shí)候一眼就能看見(jiàn)。

鼠標(biāo)懸停或選中時(shí)的樣式

設(shè)計(jì)鼠標(biāo)懸?；蜻x中時(shí)的樣式也是同樣的道理，只不過(guò)更難一些。

通常情況下，改變字體大孝大小寫、粗細(xì)時(shí)會(huì)改變文字所占空間的大小，讓人們理解鼠標(biāo)正懸停在這里。

此外，下面這些要素也能夠影響人們的感受：

文字顏色

背景色

陰影

下劃線

細(xì)小的動(dòng)畫——上升、下降等

這里再推薦一個(gè)比較普適的方法：給白色的元素上色;或者當(dāng)背景顏色較深時(shí)，把有顏色的內(nèi)容變成白色。

裝飾文字是非常難的，但是每當(dāng)我感到“這些文字不可能再變好看時(shí)”，我的判斷都是錯(cuò)的。我需要做的就是不斷優(yōu)化，不斷嘗試。

所以想開(kāi)點(diǎn)吧，如果你設(shè)計(jì)出來(lái)的文字不好看，不要擔(dān)心，你需要不斷地提升自己的能力，讓自己變得更好。

法則6：只用合適的字體

有些字體很不錯(cuò)，就用它們吧。

注意:這一部分沒(méi)有太多知識(shí)要學(xué)，我只是給你推薦一些好用的免費(fèi)字體給你。

有的網(wǎng)站很有個(gè)性，會(huì)用到比較特別的字體。但是，大多數(shù)產(chǎn)品的UI設(shè)計(jì)只要保持干凈、簡(jiǎn)潔就可以了。所以，把那些太花哨的字體放到一邊吧。

我在這里推薦一些免費(fèi)的字體。因?yàn)檫@篇文章是為初學(xué)UI設(shè)計(jì)的人所寫，這些免費(fèi)的字體完全夠用了。

我希望你把這些字體下載下來(lái)，在你開(kāi)始項(xiàng)目設(shè)計(jì)之前，瀏覽一下它們。

以下是我推薦的字體：

Ubuntu(上圖)——字體偏粗，對(duì)于有些app來(lái)說(shuō)太張揚(yáng)了，但是對(duì)于大多數(shù)app來(lái)說(shuō)還是不錯(cuò)的。在GoogleFonts

上可以找到。

OpenSans——非常易于辯讀，是一款很流行的字體，用在正文非常合適，在GoogleFonts上也能找到。

BebasNeue——適合作標(biāo)題，都是大寫字母，在Fontfabric上能找到，這個(gè)網(wǎng)站上還有一些BebasNeue的應(yīng)用實(shí)例。

Montserrat——只有兩種粗細(xì)，但也足夠了。是Gotham和ProximateNova最好的免費(fèi)代替品，但不如那兩種好。在

GoogleFonts上能找到。

Raleway——適合作標(biāo)題，但不適合用于正文。有一個(gè)極細(xì)的版本(上圖沒(méi)有展現(xiàn))，在GoogleFonts可以找到。

Cabin——在GoogleFonts可以找到。

Lato——在GoogleFonts可以找到。

PTSans——在GoogleFonts可以找到。

EntypoSocial——一個(gè)社交網(wǎng)絡(luò)圖標(biāo)集，在Entypo上能找到。

這里還有其它一些資源：

BeautifulGooglewebfonts——有GoogleFonts的運(yùn)用實(shí)例，我經(jīng)常在這里找靈感。

FontSquiirrel——收集了不少可以免費(fèi)商用的好字體。

Typekit——如果你用AdobeCreative

Cloud(也就是用Photoshop或Illustrator等)，你就可以從Typekit中獲得包括ProximateNova在內(nèi)的大量字體。

法則7：像藝術(shù)家一樣偷師

我第一次坐下來(lái)試著設(shè)計(jì)按鈕、圖標(biāo)、彈窗等各個(gè)app元素時(shí)，我感到我對(duì)于什么是“好”知之甚少。但是我也很幸運(yùn)，我并不需要完全設(shè)計(jì)全新的

UI，因?yàn)橛泻芏鄡?yōu)秀的作品可以借鑒。

下面列出一些資源，肯定會(huì)對(duì)你的設(shè)計(jì)非常有用(按照重要性從高到低排列)

1.Dribbble

這個(gè)專為設(shè)計(jì)師而做的網(wǎng)站集合了網(wǎng)上最好的UI設(shè)計(jì)作品，在Dribbble上你能找到幾乎各種類型的案例。

你可以關(guān)注一下我的Dribbble作品集。下面是其他一些推薦給你關(guān)注的人：

VictorErixon——有著非常明顯的個(gè)人風(fēng)格，非常厲害。他的作品很漂亮、簡(jiǎn)潔，扁平設(shè)計(jì)。他做UI設(shè)計(jì)師已經(jīng)3

年了，是這方面數(shù)一數(shù)二的人才。

FocusLab——這些人是Dribbble中的名人，他們的作品非常多樣化，絕對(duì)是一流的。

CosminCapitanu——他是個(gè)通才，做出來(lái)的東西很瘋狂，有未來(lái)感，但又不太花哨。他用色非常棒，但并不只專注做UX設(shè)計(jì)的。

2.FlatUIPinboard

這里面有一些特別棒的手機(jī)UI設(shè)計(jì)，你能找到很多精美的UI設(shè)計(jì)實(shí)例。

3.Pttrns

這里面有大量app截屏，它的一大好處在于，它是按照UX模式分類的，因此，你在搜索你手頭正在做的這一類作品時(shí)非常方便。

我堅(jiān)定地認(rèn)為每個(gè)藝術(shù)家初期都該像鸚鵡一樣，不斷的模仿和學(xué)習(xí)，直到能把頂尖的作品模仿得惟妙惟肖，然后再開(kāi)始找到自己的風(fēng)格，引領(lǐng)新的潮流。

所以，像個(gè)藝術(shù)家一樣偷師吧!

總結(jié)

我之所以寫這篇文章，是因?yàn)槲液苓z憾自己當(dāng)初在學(xué)UI設(shè)計(jì)時(shí)，沒(méi)有這樣的教程。我希望這篇文章能幫到你。如果你是一名UX

設(shè)計(jì)師，在畫好框架和線框圖之后，做出個(gè)漂亮的實(shí)物模型吧。如果你是一名開(kāi)發(fā)者，把你下一個(gè)項(xiàng)目做得更美觀一些吧。

UI設(shè)計(jì)的學(xué)習(xí)不可能一蹴而就，而是需要不斷地觀察、模仿并且和他人交流。以上是到目前為止我所學(xué)到的，我也會(huì)保持著初學(xué)者的心態(tài)，繼續(xù)前進(jìn)。