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