文章總結(jié)了關(guān)于優(yōu)秀UI設(shè)計(jì)的7條準(zhǔn)則，希望對(duì)你有所啟發(fā)。

首先聲明，這篇指南并不適用于所有人，那么它適用于哪些人呢？

• 那些在必要時(shí)需要做出好看的UI設(shè)計(jì)的前端工程師們；
• 那些希望自己的產(chǎn)品結(jié)構(gòu)演示比五角樓風(fēng)格幻燈片更好看的，或那些明確知道自己的一套很棒的用戶體驗(yàn)，如果有更好的UI設(shè)計(jì)包裝，那么會(huì)賣得更好的UX設(shè)計(jì)師和產(chǎn)品經(jīng)理們。

如果你曾經(jīng)上過(guò)藝術(shù)學(xué)校，或者已經(jīng)是一位資深UI設(shè)計(jì)師了，那么你看這篇指南，收獲可能不會(huì)很大，因?yàn)檫@些對(duì)于你來(lái)講應(yīng)該是基本功了。

那么，在這篇文章（指南）中，你會(huì)獲得什么呢？

我是一名不懂任何UI技術(shù)的UX設(shè)計(jì)師，我很喜歡UX設(shè)計(jì)，但是在意識(shí)到我應(yīng)該去學(xué)習(xí)怎樣把產(chǎn)品交互界面做得很漂亮之前，并沒(méi)有想過(guò)以下這些事：

• 我的產(chǎn)品結(jié)構(gòu)糟糕得仿若車禍現(xiàn)場(chǎng)，這反應(yīng)出我的工作和思考過(guò)程情況不佳；
• 當(dāng)UX設(shè)計(jì)師的技能不僅僅是做一些可以拖拽、跳轉(zhuǎn)的草圖、方框和箭頭時(shí)，客戶會(huì)更加買賬。（也就是說(shuō)，UX設(shè)計(jì)師只是做一套簡(jiǎn)單的線框原型已經(jīng)無(wú)法滿足客戶了。）
• 我愿意為一個(gè)初創(chuàng)公司服務(wù)嗎？

其實(shí)這里面有我自己的原因，我對(duì)于美學(xué)了解甚少，我的專業(yè)是工程學(xué)——好像這個(gè)專業(yè)十分擅長(zhǎng)做出一些很難看的東西來(lái)。

最后，我像學(xué)習(xí)其他創(chuàng)造性的東西一樣去學(xué)習(xí)應(yīng)用程序的美學(xué)：非常冷硬地去分析……和非常無(wú)恥地去抄襲別人的作品。我經(jīng)常花十個(gè)小時(shí)在項(xiàng)目的UI設(shè)計(jì)上，用其中1個(gè)小時(shí)制作完成，其余9個(gè)小時(shí)則是用來(lái)野蠻、生硬地學(xué)習(xí)——在Google、Pinterest、Dribbble上拼命地搜索、尋找可以借鑒的東西。

而這篇文章中的“準(zhǔn)則”就是我從這大量的“搜索”時(shí)間中總結(jié)出來(lái)的。

因此，我必須提前說(shuō)明：如果說(shuō)我現(xiàn)在對(duì)UI設(shè)計(jì)方面比較擅長(zhǎng)了，那是因?yàn)榻?jīng)過(guò)了長(zhǎng)時(shí)間的分析，我總結(jié)出一套規(guī)律來(lái)，并不是因?yàn)槲冶旧韺?duì)美觀、平衡感這些美學(xué)類的東西有直觀的理解。

這篇文章不是理論，它是純粹的實(shí)踐經(jīng)驗(yàn)。你在這里不會(huì)看到任何關(guān)于黃金比例之類的東西，我也不會(huì)強(qiáng)調(diào)什么色彩理論。你只能看到那些我從失敗的設(shè)計(jì)中學(xué)到的教訓(xùn)和我經(jīng)過(guò)長(zhǎng)時(shí)間刻苦實(shí)踐得來(lái)的經(jīng)驗(yàn)。

你可以這樣去想：柔道是基于日本幾個(gè)世紀(jì)以來(lái)的武學(xué)和傳統(tǒng)哲學(xué)發(fā)展而來(lái)的。你學(xué)習(xí)柔道，那么除了戰(zhàn)斗，你還需要學(xué)習(xí)很多關(guān)于精神、能量流轉(zhuǎn)、和諧這些的東西。

而與之相反，Krav Maga（近身格斗的一種）是由那些30世紀(jì)居于捷克斯洛伐克街道上的猶太人，為了抵抗納粹而發(fā)明的。這里面沒(méi)有藝術(shù)，在Krav Maga的課程中，你要學(xué)的就是如何用一支筆迅速刺傷敵人的眼睛并盡快逃離。

這篇文章，就像Krav Maga的課程一樣，沒(méi)有太多理論的東西，只講實(shí)踐中有用的那部分。

目錄：

1. 光來(lái)自天空
2. 黑色和白色優(yōu)先
3. 雙倍的空白區(qū)域
4. 學(xué)習(xí)將文案覆在圖片上的方法
5. 使你的文案看起來(lái)很潮
6. 使用好看的字體
7. 像藝術(shù)家一樣“偷竊”

好了，我們進(jìn)入正文

準(zhǔn)則1：光來(lái)自天空

陰影對(duì)于告訴人們大腦，我們看到的用戶界面元素是什么有著莫大的作用。

這大概是我們學(xué)習(xí)UI設(shè)計(jì)時(shí)最不顯眼卻十分重要的部分了：光來(lái)自天空。光源自上而下是比較常態(tài)且持續(xù)的，一旦光源是自下而上的，那么看起來(lái)就很古怪。

當(dāng)光源從上方照射下來(lái)，被照射的物體頂部會(huì)變亮，且在它身后會(huì)投射出陰影。因此，頂部顏色會(huì)比較淺，底部顏色會(huì)比較深。

你從不會(huì)覺(jué)得人的下眼瞼是什么特殊的形狀，但是一旦被自下而上的光照亮，一瞬間出現(xiàn)在你的門前，你會(huì)被嚇一跳……

?同理適用于UI設(shè)計(jì)，我們產(chǎn)品基礎(chǔ)頁(yè)面是沒(méi)有陰影的，而那些帶陰影的基本上都是UI元素。我們的屏幕是平面的，但是我們會(huì)為這些產(chǎn)品UI元素添加各種藝術(shù)加持，讓它們看起來(lái)像3D的。

拿按鈕舉例，這個(gè)看上去很平的按鈕，也是有一套陰影細(xì)節(jié)需要注意的：

1. 未按下去的按鈕（圖上方的那個(gè)）會(huì)有深色的側(cè)邊邊緣，因?yàn)楣馐钦詹坏侥抢锏摹?/li>
2. 未按下去的按鈕的中心頂部會(huì)比邊緣處稍微淺，因?yàn)樗谀７乱粋€(gè)有著細(xì)微弧度的表面，光從頂部投射下來(lái)，頂部會(huì)比邊緣更亮。
3. 未按下去的按鈕會(huì)投射出非常淺的灰色陰影，在放大的情況下更容易識(shí)別。
4. 按下去的按鈕頂部依舊比邊緣處顏色淺，但是整個(gè)按鈕的色調(diào)都會(huì)變暗，這是因?yàn)樵谀M這個(gè)按鈕被按下去，和屏幕平行，光照與之前比無(wú)法完全照射下來(lái)；另一種說(shuō)法是，現(xiàn)實(shí)中我們按下一個(gè)按鈕也會(huì)變暗，是因?yàn)槲覀兊氖謸踝×斯庠础?/li>

這只是一個(gè)小小的按鈕，就有4條陰影細(xì)節(jié)影響它的表現(xiàn)效果。這就是我們總結(jié)出來(lái)的經(jīng)驗(yàn)，可以應(yīng)用到更多的場(chǎng)景中。

?iOS 6有點(diǎn)過(guò)時(shí)了，卻是學(xué)習(xí)光影行為的好素材

這是一對(duì)兒iOS 6的設(shè)置按鈕——“請(qǐng)勿打擾”和“通知”，看上去沒(méi)什么大不了的，對(duì)嗎？但是你仔細(xì)看看，它們有多少陰影表現(xiàn)？

• ①? 設(shè)置欄上邊框投射出小的陰影。
• ②? “ON”的滑塊軌道也在滑軌里投射出陰影。
• ③? “ON”的滑塊軌道是凹面的，里面的按鈕能反射出更多的光（更亮）。
• ④? 左側(cè)圖標(biāo)看著比較立體（凸出來(lái)像玻璃一樣），看到它們上半部那條有點(diǎn)亮線了嗎？這條線垂直于光源，因此接收到更多的光，并把這些光反射到你的眼睛里（更亮更淺）。
• ⑤ 兩欄中間的分割線也做了陰影處理，被光照到的角落亮一些，反之暗一些。

邊欄分割線特寫

通常表現(xiàn)出來(lái)是嵌在屏幕里的元素：

• 文字填寫區(qū)域
• 按下的按鈕
• 滑塊軌道
• 單選按鈕（還未被選擇）
• 復(fù)選框

通常表現(xiàn)出來(lái)是從屏幕里凸出來(lái)的元素：

• 未按下的按鈕
• 滑塊軌道上的滑塊
• 下拉控件
• 卡片
• 單選按鈕（已經(jīng)選中狀態(tài)）
• 彈窗

現(xiàn)在你知道了，你需要注意方方面面。

等等，那么扁平化設(shè)計(jì)呢？

iOS 7用“扁平化設(shè)計(jì)”震撼了科技交流界。它說(shuō)它的設(shè)計(jì)完全是平面化的——不用模擬任何凸起或者凹痕，只有純色的線條和圖形。

?我非常喜歡簡(jiǎn)潔風(fēng)，但我并不認(rèn)為完全扁平化是一個(gè)長(zhǎng)期的趨勢(shì)。擬物3D風(fēng)格在我們的交互體系里看上去很自然地完全被放棄了。

可是我認(rèn)為現(xiàn)在正悄悄崛起另一種設(shè)計(jì)風(fēng)格——半扁平化的UI設(shè)計(jì)。依舊干凈、簡(jiǎn)單，但是在一些元素上要做陰影處理，用來(lái)提示用戶交互動(dòng)作——按下/點(diǎn)擊/滑動(dòng)等。

OS X Yosemite——半扁平UI設(shè)計(jì)

在我寫這篇文章的時(shí)候，Google正通過(guò)他們的產(chǎn)品推出“Material Design”。這種視覺(jué)語(yǔ)言的核心就是模擬真實(shí)的物理世界。

下面這張圖就是“Material Design”指南中的一部分，講解的就是如何用陰影來(lái)表現(xiàn)不同的深度。

這是我認(rèn)為會(huì)延續(xù)發(fā)展下去的東西。它使用很細(xì)微的真實(shí)世界元素來(lái)傳達(dá)信息，請(qǐng)注意關(guān)鍵詞：細(xì)微。

你不能說(shuō)它沒(méi)有模仿真實(shí)的世界，但它也不是2006年風(fēng)格的網(wǎng)頁(yè)。它沒(méi)有紋理、沒(méi)有梯度、不油膩。

我認(rèn)為半扁平化是未來(lái)的發(fā)展趨勢(shì)，至于扁平化設(shè)計(jì)，我覺(jué)得它已然過(guò)時(shí)了。

準(zhǔn)則2：黑色和白色優(yōu)先

在添加色彩之前，使用灰色可以簡(jiǎn)化大多數(shù)復(fù)雜的視覺(jué)設(shè)計(jì)元素，有助于我們將精力集中于元素的排版上。

現(xiàn)在的UX設(shè)計(jì)都會(huì)遵循“移動(dòng)先行”（mobile-first）的策略，這意味著你需要先考慮產(chǎn)品在手機(jī)上的頁(yè)面呈現(xiàn)和交互設(shè)置，然后再去拓展到像素更精密的顯示屏上（Retina monitor）。

這種方式很贊，可以讓你的思考更加清晰。你首先需要解決比較困難的問(wèn)題（在一塊非常小的屏幕上設(shè)計(jì)一個(gè)可行的app），然后參考其解決方案去解決比較簡(jiǎn)單的問(wèn)題（在一塊大屏幕上設(shè)計(jì)一個(gè)可行的app）。

同理：在設(shè)計(jì)中，黑色和白色優(yōu)先。

首先解決比較困難的問(wèn)題——在沒(méi)有其他顏色的加持下，想辦法把頁(yè)面設(shè)計(jì)得好看又實(shí)用。最后再添加顏色，錦上添花，如虎添翼。

Haraldur Thorleifsson灰色的網(wǎng)頁(yè)線框圖（比一部分設(shè)計(jì)成品還好看）

這種方式可以讓app清爽又簡(jiǎn)潔。在很多地方用太多色彩很容易把這種簡(jiǎn)潔破壞掉。黑白色優(yōu)先有助你集中精力在間距、大小、布局這些地方，這些是簡(jiǎn)潔的設(shè)計(jì)最基本的內(nèi)容。

優(yōu)雅的灰色

?當(dāng)然，也有很多的app并不適用于“黑白優(yōu)先”的原則。因?yàn)檫@些app需要表達(dá)一種特定的態(tài)度，比如“運(yùn)動(dòng)”“浮夸”“卡通”等風(fēng)格，這需要設(shè)計(jì)對(duì)色彩的運(yùn)用十分老練。但是大部分的app并沒(méi)有這種需要表現(xiàn)的特殊的態(tài)度，只需要簡(jiǎn)單干凈就行了。不可否認(rèn)，前者設(shè)計(jì)起來(lái)難度會(huì)更高。

色彩張揚(yáng)的網(wǎng)頁(yè)，看著簡(jiǎn)單，設(shè)計(jì)起來(lái)很有難度

除了有特別需求的情況，我們都可以使用“黑白優(yōu)先原則”。

接下來(lái)，我們需要了解：怎么去添加顏色。

最簡(jiǎn)單的方法是，只添加一種顏色。

在灰色風(fēng)格的網(wǎng)頁(yè)上添加一種顏色猶如畫龍點(diǎn)睛，非常亮眼且有效。

也可以在此基礎(chǔ)上進(jìn)行延展：灰度+兩種顏色；灰度+同一色調(diào)的多種顏色；

在實(shí)踐中的色彩代碼

什么是色調(diào)呢？

通常來(lái)講，我們說(shuō)到的色彩是RGB十六進(jìn)制代碼。這一點(diǎn)很重要，但經(jīng)常被忽略。對(duì)于框架設(shè)計(jì)來(lái)講，RGB并不是最好的選擇，HSB比較實(shí)用。（HSB又被稱為HSV，和HSL相似。）

HSB比RGB好，是因?yàn)樗匀?，你可以預(yù)測(cè)當(dāng)你改變一個(gè)HSB色值后，你看到的顏色會(huì)有什么改變。

如果你是第一次知道HSB，這里有一篇HSB入門推薦給你：《The HSB Color System: A Practitioner’s Primer》

純色調(diào)-金色系

純色調(diào)-藍(lán)色系

?通過(guò)修改純色的飽和度和亮度，你可以得到豐富的色彩——深的、淺的、適合做背景的、色澤濃郁的、引人注目的——而且，這些豐富的色彩還不會(huì)讓人眼花。

使用從同一個(gè)或兩個(gè)基礎(chǔ)色調(diào)中提煉出來(lái)的多種色彩，可以突出和中和產(chǎn)品中的各個(gè)元素，而且不會(huì)讓你的設(shè)計(jì)看上去混亂。

Kerem Suer設(shè)計(jì)的倒數(shù)計(jì)時(shí)器

準(zhǔn)則 3：雙倍空白區(qū)域

如果想讓你的UI有設(shè)計(jì)感，那么就多給頁(yè)面一些呼吸空間。

在準(zhǔn)則2中，我提到“黑白優(yōu)先”可以迫使你在考慮色彩前關(guān)注間距和布局?，F(xiàn)在我們來(lái)講講關(guān)于間距和布局的一些事情。

如果你從一開始就去填充HTML內(nèi)容，那么你的頁(yè)面可能會(huì)自然而然地形成這個(gè)樣子。

所有內(nèi)容密密麻麻地?cái)D滿了整個(gè)屏幕。字號(hào)特別小，行之間也沒(méi)有間距，段落之間也只有那么一點(diǎn)點(diǎn)空隙，無(wú)論是100xp還是10000xp的頁(yè)面，都會(huì)被這些內(nèi)容填充得滿滿登登。

從審美角度來(lái)看，這太可怕了，如果想讓頁(yè)面有設(shè)計(jì)感，我們需要在元素中間留出更多的空白，甚至這些空白的數(shù)值也許聽起來(lái)有些匪夷所思。

空白，HTML，CSS

如果你像我一樣使用CSS編寫格式，基本上習(xí)慣了不留什么空白，那么現(xiàn)在開始要改變這種習(xí)慣了。從編寫開始，一直到結(jié)束，要在腦中將“留空白”概念貫穿整個(gè)過(guò)程中。

頁(yè)面中每一個(gè)元素的布局都要有留白的意識(shí)；如果是內(nèi)容組布局，那么先考慮每一塊內(nèi)容組之間的留白，然后再考慮組內(nèi)元素之間的留白設(shè)置。

下面拿Piotr Kwiatkowski設(shè)計(jì)的陰影播放器頁(yè)面來(lái)舉例：

?看左邊的菜單欄。

兩個(gè)大標(biāo)題之間的垂直距離是中間文本本身高度的兩倍。

中間文本都是12px，行間距也是12px。

再看這個(gè)菜單的標(biāo)題，“PLAYLISTS”和它的下劃線之間有15px的空白。這個(gè)數(shù)值比字母本身的高度還要大。更不要說(shuō)菜單里每個(gè)單獨(dú)列表之間25px的空白了。

?左側(cè)側(cè)邊欄展示的是文本間行距白。

Piotr（設(shè)計(jì)師）在這個(gè)設(shè)計(jì)中非常注重留白設(shè)計(jì)，作品也呈現(xiàn)出很好的效果。雖然這只是一個(gè)概念作品，但是我覺(jué)得它很不錯(cuò)，配得上最好的音樂(lè)播放器。

?搜索欄留下了足夠的空間。文本“Search all music”的高度占工具欄高度20％，搜索圖標(biāo)也是相似的比例。

適度的、足夠大的空白空間，可以將內(nèi)容冗雜的頁(yè)面變得簡(jiǎn)潔、好看——比如更簡(jiǎn)潔干凈的論壇。

Matt Sisto設(shè)計(jì)的論壇（概念）

亦或者更加整潔的維基百科。

?Aurélien Salomon重新設(shè)計(jì)的維基百科（概念）

當(dāng)然，對(duì)于這個(gè)概念設(shè)計(jì)，大家又很多的爭(zhēng)論，很多人說(shuō)這個(gè)設(shè)計(jì)沒(méi)有突出維基的核心功能，但是我們不能否認(rèn)，我們可以從中學(xué)到很多設(shè)計(jì)點(diǎn)：

• 在行之間留白。
• 在每個(gè)元素中間留白。
• 在元素組之間留白。

分析每一處留白產(chǎn)生的作用。

準(zhǔn)則4：學(xué)習(xí)將文案覆在圖片上的方法

我總結(jié)了一些能使覆加在圖片上的文字排版看上去很漂亮的可靠方法，一共5條，另外加一個(gè)小彩蛋技巧。

如果你想成為一名優(yōu)秀的UI設(shè)計(jì)師，那么你肯定得學(xué)會(huì)如何把文案融合在圖片里，同時(shí)又讓文案很吸引人。讀完這部分內(nèi)容，在這方面一定會(huì)幫你得到很大的提升。

（0）直接把文字加在圖片上

我很猶豫要不要把這條加進(jìn)來(lái)，但是如何讓直接加在圖片上的文字看上去好看又顯眼是十分需要技巧的。

“Otter Surfboards”官網(wǎng)，比較難以閱讀

使用這種方法，我們需要注意以下幾點(diǎn)：

• 這張圖片需要是深色的，并且里面沒(méi)有太多明暗對(duì)比強(qiáng)烈的邊緣線。
• 文案使用白色。
• 記得測(cè)試每一種屏幕和窗口，確定它是易讀的。

我想表達(dá)的并不是說(shuō)，每一個(gè)專業(yè)的項(xiàng)目里都需要把文字放在一張圖片的頂部，我只是強(qiáng)調(diào)一些可控的注意點(diǎn)。將文案直接放在圖片上，其實(shí)是可以做出非常炫酷的效果的。

Aquatilis網(wǎng)站，非常值得一看

?（1）覆蓋整張圖片

將文案覆加在圖片上，最簡(jiǎn)單的方法就是覆蓋整張圖片，圖片顏色不夠深怎么辦？沒(méi)關(guān)系，給整張圖片加一個(gè)半透明的黑色蒙層即可。

“Upstart websit”使用35％黑色蒙層

?這種方法同樣適用于縮略圖和小的圖片。

“charity：water”的縮略

黑色蒙層，白色文字是最簡(jiǎn)單也是最常用的，當(dāng)然你也可以使用其他適合的顏色來(lái)做蒙層。

?

（2）給文案加底色方塊

這種方法簡(jiǎn)單實(shí)用。畫一個(gè)黑色的矩形，上面加上白色的文字，放在任何圖片上都不影響它的易讀性。

你也可以用其他顏色來(lái)做底色，不過(guò)顏色選擇要慎重。

（3）把圖片變模糊

還有一種能讓文案易讀性更強(qiáng)的方法，就是把底層圖片的一部分模糊化。

注意模糊區(qū)域也做了變暗處理

?iOS 7便很好地運(yùn)用了將背景模糊化，Vista也用這種方法做出了很好的效果。

你也可以將照片的非焦點(diǎn)區(qū)域做模糊化處理。但是需要注意的是這種方法比較適用于非動(dòng)態(tài)圖片，如果你的背景是圖片輪換，那么便要確保文字下方一定模糊化區(qū)域。

沒(méi)明白我的意思？看看下圖中的標(biāo)題下方的文字……

作為全世界公認(rèn)的好產(chǎn)品，這種設(shè)計(jì)如何通過(guò)的？

（4）地板褪色

所謂“地板褪色”方式，就是你有一張從上而下顏色漸深的圖片，這樣可以將文字加在圖片的底部。這是一種非常巧妙的方式，我不知道之前誰(shuí)這么做過(guò)，我第一次發(fā)現(xiàn)這種方式還是在“Medium”上。

?在很多漫不經(jīng)心的旁觀者眼中，Medium的列表展現(xiàn)形式僅僅是在圖片上加了白色的文字而已，我得說(shuō)，這種說(shuō)法大錯(cuò)特錯(cuò)了。事實(shí)上，它每一張圖片從中部到底部有一個(gè)梯度（黑色不透明度從0％到大致20％）。

雖然很難辨識(shí)，但是它的確是這樣的，極大提高了文案的易讀性。

并且，我還注意到Medium的縮略圖上的文字都帶有輕微的陰影，更加深化了文字的易讀性，真實(shí)太精秒了！

這兩種方式使得Medium可以使用任意一張圖片，在上面加任意文字，并且還能有良好的易讀性。

另外，為什么是自上而下逐步變深呢？請(qǐng)參看原則一：光來(lái)自天空。光源是自上而下的，就像我們看現(xiàn)實(shí)中的任何東西一樣，底部色彩是最深的。

進(jìn)階版：融合了“模糊處理”和“地板褪色”兩種方法，就叫它“模糊地板”吧

額外的方法：

為什么“Elastica blog”頂部的標(biāo)題總是很顯眼呢？

它使用的圖片：

• 顏色不是很深；
• 明暗對(duì)比較強(qiáng)烈。

貌似很難解釋，為什么它的文字易讀性還是很高，我們來(lái)一起看一下：

答案是：Scrim（紗罩）

在攝影中，攝影師會(huì)用紗罩（棉麻布）來(lái)吸收光線，使照片的光線變得柔和?，F(xiàn)在它成為一種視覺(jué)設(shè)計(jì)技術(shù)，吸收?qǐng)D片的光線，使得圖片上的文字能夠凸顯出來(lái)。

如果我們把“Elastica blog”網(wǎng)頁(yè)縮小一些，可以清楚地看到：

?在“145,000 Salesforce Users Come out to Celebrate…”這段話下方有一個(gè)漸變不透明的矩形方塊。將文字放在這樣一個(gè)藍(lán)色的非透明背景上的確比直接放在照片上辨識(shí)度高多了。

這可能是將文字添加在圖片上最精妙的方式了，我沒(méi)在其他地方見(jiàn)過(guò)，把這種方法記下來(lái)，今后你會(huì)用到的。

準(zhǔn)則5：使你的文案很潮（且適合）

想讓文字看起來(lái)漂亮又顯眼，一般情況下，我們喜歡用對(duì)比的形式，比如：更大一點(diǎn)，更亮一點(diǎn)。

在我看來(lái)，創(chuàng)建一套UI規(guī)范，設(shè)定字體規(guī)范是難點(diǎn)之一。如果你是科班出身，你可能會(huì)用各種方式來(lái)讓你的文案引人注目：

• 字號(hào)（大一點(diǎn)或小一點(diǎn)）；
• 顏色（使用更強(qiáng)的對(duì)比色；或用明亮的顏色畫龍點(diǎn)睛）；
• 字體粗細(xì)
• 拼寫（字母小寫、字母大寫、標(biāo)題大寫）
• 斜體
• 字符間距
• 邊距（嚴(yán)格意義上講，這個(gè)并不屬于文本本身屬性，但是對(duì)于吸引人注意也有一定的作用，所以也加上了這一條。）

還有一些其他可以吸引人矚目的方法，但是不特別建議使用：

• 下劃線：一般來(lái)講，現(xiàn)在文字下方加下劃線大家會(huì)默認(rèn)是一條鏈接，我們最好還是不要再賦予它其他含義。
• 文本背景顏色:這種情況不常見(jiàn)，但是曾有一段時(shí)間37signals會(huì)用這種樣式來(lái)作為鏈接。
• 刪除線：90年代的CSS用法。

根據(jù)我的經(jīng)驗(yàn)，當(dāng)發(fā)現(xiàn)一個(gè)文本的樣式怎么看都不對(duì)勁的時(shí)候，不是因?yàn)檫吘鄦?wèn)題或者是顏色不夠深，而是沒(méi)有給它正確地設(shè)置幾組矛盾的屬性組合。

你可以把文本樣式分成兩組：（突出，或者不突出）

• 增強(qiáng)文字可視性的：加大、加粗、大寫等。
• 降低文字可視性的：小一點(diǎn)、少一些對(duì)比元素、小寫等。

案例：hugeinc.com

?“Material Design”這個(gè)大標(biāo)題非常突出，它很大，對(duì)比強(qiáng)，也很粗。

?頁(yè)腳部分的文字便不需要那么突出了，字體小，對(duì)比低，比較細(xì)。

重點(diǎn)來(lái)了：

一個(gè)網(wǎng)站只有大標(biāo)題需要完全突出，其他地方需要“突出”與“不突出”相結(jié)合。

這樣一方面防止了元素過(guò)于突兀，同時(shí)又能張弛有度地把應(yīng)該突出的重點(diǎn)凸顯出來(lái)，。

設(shè)計(jì)視覺(jué)平衡

Blu Homes網(wǎng)站設(shè)計(jì)很完美，它的大標(biāo)題很長(zhǎng)，是需要突出強(qiáng)調(diào)的， 卻使用了小寫——太多的突出設(shè)計(jì)會(huì)讓標(biāo)題給用戶的視覺(jué)壓力過(guò)大。

Blu Homes中間的數(shù)字用它的字號(hào)、顏色和布局吸引用戶的注意力——請(qǐng)注意，它的字體很細(xì)，同時(shí)也沒(méi)有用對(duì)比很強(qiáng)的深色，而是用了對(duì)比很淺的淺藍(lán)色。

而數(shù)字下面的小標(biāo)簽，雖然用了淺灰色且十分小，卻使用了大寫字母，并加粗。

所有的元素組合起來(lái)非常平衡。

contentsmagazine.com

Contents Magazine也是一個(gè)很好的學(xué)習(xí)案例：

• 文章標(biāo)題是這個(gè)頁(yè)面上唯一沒(méi)有用斜體的元素。在這個(gè)案例里，不用斜體反而更醒目，更何況還加粗了。
• 作者的名稱在署名行，也加粗了，卻用正常粗細(xì)的“by”做反襯，讓它顯眼起來(lái)。
• 在頁(yè)面中間的那個(gè)小小的、淺淺的“ALREADY OUT”，由于它是大寫，字符間距大、邊距也大，因此也很容易找到。

被選中或者鼠標(biāo)停留處的文字

設(shè)計(jì)被選中或者鼠標(biāo)停留處的文字會(huì)更難。一般來(lái)講，改變字體大小、外形、粗細(xì)都會(huì)改變字體占用的空間，這樣很容易就辨識(shí)出鼠標(biāo)懸停狀態(tài)。

你可以利用哪些元素呢？

• 字體顏色
• 背景顏色
• 陰影
• 下劃線
• 細(xì)小的動(dòng)效——上升、下降，等等。

還可以這樣做：可以把白色的字體變成彩色的，或者彩色的字體換成白色的，當(dāng)然同時(shí)也要把文字背景換成深色的。

被選中的標(biāo)簽文字變成了白色的，但是文字背景變深，和頁(yè)面背景色對(duì)比度非常高。

不得不說(shuō)：優(yōu)化文字是個(gè)苦差事。

每一次我覺(jué)得“這些文字不可能變好看”的時(shí)候，都會(huì)被證明我錯(cuò)了。為了把它們變得更好看，我需要不斷地嘗試。

所以，如果在經(jīng)過(guò)一番努力后，你的文本展現(xiàn)還是不夠好，不要著急，如果你自己有所提高，你的文本一定會(huì)更好看的。所以，不要放棄，加油努力提升自己，不停嘗試！

準(zhǔn)則6：使用好看的字體

一些字體是非常棒的，學(xué)會(huì)使用它們。

小貼士：在這部分里，沒(méi)什么戰(zhàn)略和技術(shù)性的東西，我只是挑選了一些好看且免費(fèi)的字體供大家下載使用。

（由于本文作者推薦下載的都是一些英文字體，并且大部分需要翻墻下載，因此這部分就略過(guò)了。）

準(zhǔn)則7：像藝術(shù)家一樣“偷竊”

當(dāng)我第一次坐下來(lái)去設(shè)計(jì)一些app元素時(shí)——一個(gè)按鈕、一個(gè)表、一個(gè)彈出等等——也是我第一次覺(jué)得自己知道的太少了，根本不知道該如何讓這些元素看起來(lái)好看，用起來(lái)方便。

不過(guò)幸運(yùn)的是，我不需要去發(fā)明新的UI元素，我可以去看其他優(yōu)秀的UI設(shè)計(jì)師是如何做的，然后去借鑒最優(yōu)秀的元素。

那么有哪些靈感來(lái)源的網(wǎng)站呢？這里我推薦幾個(gè)常用的網(wǎng)站，綜合評(píng)分從高到低排序：

1.Dribbble

這個(gè)邀請(qǐng)注冊(cè)的網(wǎng)站，是設(shè)計(jì)師的垂直內(nèi)容平臺(tái)，擁有海量高質(zhì)量的UI作品。無(wú)論是哪個(gè)方面，你都可以在這里找到非常棒的靈感素材。

在這里，推薦幾位值得關(guān)注的UI設(shè)計(jì)師給你：

· Victor Erixon

擁有非常獨(dú)特的設(shè)計(jì)風(fēng)，十分漂亮干凈的扁平化設(shè)計(jì)。他雖然只做了三年的設(shè)計(jì)師，但是水平已經(jīng)是頂級(jí)的了。

· Focus Lab

這些人都是Dribbble的名人，作品都在水準(zhǔn)之上，且風(fēng)格多樣。

· Cosmin Capitanu

一位可怕的全能型選手。他的作品風(fēng)格夸張卻不花哨，非常善于運(yùn)用色彩。盡管他并不注重UX。

2. Flat UI Pinboard

我不知道“warmar”是誰(shuí)，但是通過(guò)他的Phone UI Pinboard 我總是能找到對(duì)我有用的UI設(shè)計(jì)案例。

3.?Pttrns

一個(gè)移動(dòng)app截屏匯總的網(wǎng)站，這個(gè)網(wǎng)站的好處就是一切都是基于UX模式系統(tǒng)組織的，這就意味著你可以快速搜索到你想要的頁(yè)面：登錄界面、用戶檔案、搜索界面等等。

大多數(shù)藝術(shù)家最開始都是從“模仿”起家的，從最優(yōu)秀的作品中得到啟示，直到自己的設(shè)計(jì)水平達(dá)到超高水平，這時(shí)候便可以慢慢衍生出自己的風(fēng)格，引領(lǐng)新的設(shè)計(jì)流行趨勢(shì)了。

總結(jié)：

我寫這篇文章的原因是，曾有一段時(shí)間我很喜歡看這類型的文章。而我希望你從能這篇文章中得到幫助：如果你是一位UX設(shè)計(jì)師，在你勾勒出線框需求后可以做出漂亮的原型；如果你是一位開發(fā)者，可以把下一個(gè)項(xiàng)目做得好看點(diǎn)兒。我不希望UI設(shè)計(jì)只有專業(yè)的UI設(shè)計(jì)師才能做好?，F(xiàn)在的你，可以去觀察、去模仿、去告訴你的朋友在UI設(shè)計(jì)中哪些元素在起著作用。

不管怎樣，我們的學(xué)習(xí)之路還是很長(zhǎng)，努力吧！

原文作者：Erik D. Kennedy

原文鏈接：《7 Rules for Creating Gorgeous UI》

翻譯：藍(lán)湖，微信公號(hào)：藍(lán)湖產(chǎn)品設(shè)計(jì)協(xié)作

本文由 @藍(lán)湖 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自PEXELS，基于CC0協(xié)議