前言：
1.文章適用對象
首先聲明，這篇指南并不適用于所有人，那么它適用于哪些人呢？
① 需要做出好看UI設(shè)計(jì)的工程師們；
② 希望自己的產(chǎn)品結(jié)構(gòu)演示比五角樓風(fēng)格幻燈片更好看的，以及明確知道自己產(chǎn)品的用戶體驗(yàn)很棒，如果有更好的UI設(shè)計(jì)包裝，會賣得更好的UX設(shè)計(jì)師們；
③想要快速掌握UI設(shè)計(jì)實(shí)踐那部分的UI設(shè)計(jì)師。
2.在這篇文章（指南）中，你會獲得什么呢？
我是一名不懂任何UI技術(shù)的UX設(shè)計(jì)師，我熱愛UX設(shè)計(jì)，但是在意識到我應(yīng)該去學(xué)習(xí)怎樣把產(chǎn)品交互界面做得很漂亮之前，并沒有想過以下這些事：
1. 我的產(chǎn)品結(jié)構(gòu)糟糕得像車禍現(xiàn)場，這反應(yīng)出我的工作和思考過程情況不佳；
2. 當(dāng)UX設(shè)計(jì)師的技能不僅僅是做一些可以拖拽、跳轉(zhuǎn)的草圖、方框和箭頭時，客戶會更加買賬。（也就是說，UX設(shè)計(jì)師只做一套簡單的線框原型已經(jīng)無法滿足客戶了。）
3. 我愿意為一個初創(chuàng)公司服務(wù)嗎？
這里面有我自己的原因，我的專業(yè)是工程學(xué)，所以對于美學(xué)我的了解不多。因此，我像學(xué)習(xí)其他創(chuàng)造性的東西一樣去學(xué)習(xí)應(yīng)用程序的美學(xué)：非常冷硬地去分析，非常無恥地抄襲別人的作品。
我經(jīng)?；ㄊ畟€小時在項(xiàng)目的UI設(shè)計(jì)上，用其中1個小時制作完成，其余9個小時則是用來野蠻、生硬地學(xué)習(xí)——在Google、Pinterest、Dribbble上拼命地搜索、尋找可以借鑒的東西。
而這篇文章中的“準(zhǔn)則”就是我從這大量的“搜索”中總結(jié)出來的，并不是因?yàn)槲冶旧韺γ馈⑵胶飧羞@些美學(xué)的東西有學(xué)術(shù)的理解。
這篇文章不是理論，它是純粹的實(shí)踐經(jīng)驗(yàn)。你在這里不會看到任何關(guān)于黃金比例之類的東西，也沒有去強(qiáng)調(diào)色彩理論。你能看到的是那些我從失敗的設(shè)計(jì)中總結(jié)的教訓(xùn)和我經(jīng)過長時間刻苦實(shí)踐得來的經(jīng)驗(yàn)。
你可以這樣去想：柔道是基于日本幾個世紀(jì)以來的武學(xué)和傳統(tǒng)哲學(xué)發(fā)展而來的。你學(xué)習(xí)柔道，那么除了戰(zhàn)斗，你還需要學(xué)習(xí)很多關(guān)于精神、能量流轉(zhuǎn)、和諧之類的東西。
而與之相反，Krav Maga（近身格斗的一種）是由那些30世紀(jì)居于捷克斯洛伐克街道上的猶太人，為了抵抗納粹而發(fā)明的。這里面沒有藝術(shù)，在Krav Maga的課程中，你要學(xué)的就是如何用一支筆迅速刺傷敵人的眼睛并盡快逃離。
這篇文章，就像Krav Maga的課程一樣，沒有太多理論的東西，只講實(shí)踐中有用的那部分。
目錄：
1.光來自天空（上篇）
2.黑色和白色優(yōu)先（上篇）
3.雙倍的空白區(qū)域（中篇）
4.學(xué)習(xí)將文案覆在圖片上的方法（中篇）
5.使你的文案看起來很潮（下篇）
6.使用好看的字體（下篇）
7.像藝術(shù)家一樣“偷竊”（下篇）
準(zhǔn)則1：光來自天空
1.光影在UI設(shè)計(jì)中重要性
秤砣雖小壓千斤，光影是我們學(xué)習(xí)UI設(shè)計(jì)時十分重要的部分，它告訴大腦，我們看到的用戶界面有什么元素。
光來自天空。光源一般都是自上而下的，一旦光源是自下而上，畫面看起來就會很古怪。
當(dāng)光源從上方照射下來，被照射的物體頂部會變亮，且它身后會投射出陰影。因此，頂部顏色會比較淺，底部顏色會比較深。
你一般不會思考人的下眼瞼是形狀，但是下眼瞼一旦被自下而上的光照亮，一瞬間出現(xiàn)在你的門前，你一定會嚇一跳……
同理，在UI設(shè)計(jì)中，產(chǎn)品的基礎(chǔ)頁面下方是沒有陰影的，帶陰影的基本上都是UI元素。我們的屏幕是平面的，但是我們會為產(chǎn)品的UI元素添加各種藝術(shù)效果，讓它們看起來更立體。
2.實(shí)踐
拿按鈕舉例，看上去很平的按鈕，也是有需要注意的陰影細(xì)節(jié)的：
① 未按下去的按鈕（圖上方的那個）會有深色的側(cè)邊邊緣，因?yàn)楣馐钦詹坏侥抢锏摹?/span>
② 未按下去的按鈕的中心頂部會比邊緣處稍微淺，因?yàn)樗谀７乱粋€有著細(xì)微弧度的表面，光從頂部投射下來，頂部會比邊緣更亮。
③ 未按下去的按鈕會投射出非常淺的灰色陰影，在放大的情況下更容易識別。
④ 按下去的按鈕頂部依舊比邊緣處顏色淺，但是整個按鈕的色調(diào)都會變暗，這是因?yàn)樵谀M這個按鈕被按下去，和屏幕平行，光照與之前相比沒有完全照射下來；另一種說法是，現(xiàn)實(shí)中我們按下一個按鈕也會變暗，是因?yàn)槲覀兊氖謸踝×斯庠础?/span>
這只是一個小小的按鈕，就有4條陰影細(xì)節(jié)影響它的表現(xiàn)效果。這個經(jīng)驗(yàn)，可以應(yīng)用到更多的場景中。
【iOS 6雖然有點(diǎn)過時，但依然是學(xué)習(xí)光影的好素材】
這一對iOS 6的設(shè)置按鈕——“請勿打擾”和“通知”，看上去沒什么大不了的，但是你仔細(xì)看看，它們有多少陰影細(xì)節(jié)表現(xiàn)？
① 設(shè)置欄上邊框投射出小的陰影。
② “ON”的滑塊軌道也在滑軌里投射出陰影。
③“ON”的滑塊軌道是凹面的，里面的按鈕能反射出更多的光（更亮）。
④ 左側(cè)圖標(biāo)看著比較立體（凸出來像玻璃一樣），看到它們上半部那條有點(diǎn)亮線了嗎？這條線垂直于光源，因此接收到更多的光，并把這些光反射到你的眼睛里（更亮更淺）。
⑤ 兩欄中間的分割線也做了陰影處理，被光照到的角落亮一些，反之暗一些。
【邊欄分割線特寫】
通常表現(xiàn)出來是嵌在屏幕里的元素：
· 文字填寫區(qū)域
· 按下的按鈕
· 滑塊軌道
· 單選按鈕（還未被選擇）
· 復(fù)選框
通常表現(xiàn)出來是從屏幕里凸出來的元素：
· 未按下的按鈕
· 滑塊軌道上的滑塊
· 下拉控件
· 卡片
· 單選按鈕（已經(jīng)選中狀態(tài)）
· 彈窗
現(xiàn)在你知道了，你需要注意方方面面。
3.扁平化設(shè)計(jì)
iOS 7用“扁平化設(shè)計(jì)”震撼了科技交流界。它說自己的設(shè)計(jì)完全是扁平的——不用模擬任何凸起或者凹痕，只有純色的線條和圖形。
我非常喜歡簡潔的扁平化風(fēng)格，盡管擬物3D風(fēng)格在我們的交互體系里好像被放棄了，但我并不認(rèn)為這是一個長期的趨勢。
現(xiàn)在正悄悄崛起新的設(shè)計(jì)風(fēng)格——半扁平化的UI設(shè)計(jì)。依舊干凈、簡約，但是在一些元素上要做陰影處理，用來提示用戶交互動作——按下/點(diǎn)擊/滑動等。
【OS X Yosemite——半扁平UI設(shè)計(jì)】
在我寫這篇文章的時候，Google正通過他們的產(chǎn)品推出“Material Design”。這種視覺語言的核心就是模擬真實(shí)的物理世界。
下面這張圖就是“Material Design”指南中的一部分，講解的就是如何用陰影來表現(xiàn)不同的深度。
這是我認(rèn)為會持續(xù)發(fā)展下去的東西。它使用來自真實(shí)世界的細(xì)微元素來傳達(dá)信息，請注意關(guān)鍵詞：細(xì)微。
它模仿了真實(shí)世界的小細(xì)節(jié)，但它也不是2006年的風(fēng)格。它沒有紋理、沒有梯度、不油膩。
半扁平化是未來的發(fā)展趨勢，至于扁平化設(shè)計(jì)，我覺得它已然過時了。
準(zhǔn)則2：黑色和白色優(yōu)先
1.“黑白優(yōu)先”原則
在添加色彩之前，使用灰色可以簡化復(fù)雜的視覺設(shè)計(jì)元素，有助于我們將精力集中于元素的排版上。
現(xiàn)在的UX設(shè)計(jì)都會遵循“移動先行”（mobile-first）的策略，這意味著你需要先考慮產(chǎn)品在手機(jī)上的頁面呈現(xiàn)和交互設(shè)置，然后再拓展到像素更精密的顯示屏（Retina monitor）。
這種可以讓你的思考更加清晰。你首先需要解決比較困難的問題（在一塊非常小的屏幕上設(shè)計(jì)一個可行的app），然后參考其解決方案去解決比較簡單的問題（在一塊大屏幕上設(shè)計(jì)一個可行的app）。
同理：在設(shè)計(jì)中，黑色和白色優(yōu)先。首先解決比較困難的問題——在沒有其他顏色的加持下，想辦法把頁面設(shè)計(jì)得好看又實(shí)用。最后再添加顏色，錦上添花，如虎添翼。
【Haraldur Thorleifsson灰色的網(wǎng)頁線框圖（比某些設(shè)計(jì)成品還好看）】
這種方式可以讓app清爽又簡潔。用太多色彩很容易把這種簡潔破壞掉。黑白色優(yōu)先有助你集中精力在間距、大小、布局這些地方，這些是簡潔設(shè)計(jì)最基本的內(nèi)容。
【優(yōu)雅的灰色】
當(dāng)然，也有很多的app并不適用“黑白優(yōu)先”的原則。因?yàn)檫@些app需要表達(dá)一種特定的態(tài)度，比如“運(yùn)動”“浮夸”“卡通”等風(fēng)格，這需要設(shè)計(jì)對色彩的運(yùn)用十分老練。但是大部分的app并沒有需要這種特殊表現(xiàn)，只需要簡單干凈就行了。不可否認(rèn)，前者設(shè)計(jì)起來難度會更高。
【色彩張揚(yáng)的網(wǎng)頁，看著簡單，設(shè)計(jì)起來很有難度】
除了有特別需求的情況，我們都可以使用“黑白優(yōu)先原則”。
2.怎么去添加顏色。
最簡單的方法是，只添加一種顏色。
【在灰色風(fēng)格的網(wǎng)頁上添加一種顏色猶如畫龍點(diǎn)睛，非常亮眼且有效?！?/span>
也可以在此基礎(chǔ)上進(jìn)行延展：灰度+兩種顏色；灰度+同一色調(diào)的多種顏色；
3.實(shí)踐中的色彩代碼
什么是色調(diào)？
通常來講，我們說到的色彩是RGB十六進(jìn)制代碼。這一點(diǎn)很重要，但經(jīng)常被忽略。對于框架設(shè)計(jì)來講，RGB并不是最好的選擇，HSB比較實(shí)用。（HSB又被稱為HSV，和HSL相似。）
HSB比RGB好，是因?yàn)樗匀唬憧梢灶A(yù)測當(dāng)你改變一個HSB色值后，你看到的顏色會有什么改變。
如果你是第一次知道HSB，這里有一篇HSB入門推薦給你：《The HSB Color System: A Practitioner's Primer》
【純色調(diào)-金色系】
【純色調(diào)-藍(lán)色系】
通過修改純色的飽和度和亮度，你可以得到豐富的色彩——深的、淺的、適合做背景的、色澤濃郁的、引人注目的——而且，這些豐富的色彩還不會讓人眼花。
使用從同一個或兩個基礎(chǔ)色調(diào)中提煉出來的多種色彩，可以突出和中和產(chǎn)品中的各個元素，而且不會讓你的設(shè)計(jì)看上去混亂。
來源： 原文作者：Erik D.Kennedy 譯 者：藍(lán)湖 成都軟件開發(fā)，成都APP開發(fā)
