原文：7 Rules for Creating Gorgeous UI (Part 1)
翻譯：David Lee
簡介
各位，友情提醒先。這篇指導(dǎo)并不適用于所有人，那么，對誰才有用呢？
開發(fā)者--在必要的時候，希望自己能夠設(shè)計出漂亮UI的開發(fā)工程師
用戶體驗（UX）設(shè)計師--他們希望自己的作品集比呆板的PPT更好看，或者，想通過絢麗的UI包裝傳達(dá)更極致的用戶體驗，也同樣適用。
如果你讀過藝術(shù)院校或者你認(rèn)為自己已經(jīng)成為一個視覺設(shè)計師了，那你很有可能發(fā)現(xiàn)這篇文章中充斥著：
a 無聊 b 錯誤?還有 c 讓人惱怒的內(nèi)容。
我不會介意的，你們所有的批評都是對的。關(guān)了這個，去讀點別的吧。
或者，還是我告訴你你到底能在這篇文章中學(xué)到什么吧。
首先，我曾是一名完全不懂視覺設(shè)計的用戶體驗設(shè)計師。我真心熱愛用戶體驗設(shè)計，但當(dāng)我意識到，我可以找到一大堆理由來支持自己去學(xué)習(xí)——如何設(shè)計一個看上去不錯的界面的時候，就放棄了單純的UX設(shè)計：
我的作品集就是個垃圾，完全沒能展現(xiàn)出我工作和思考的過程
如果能提供更多專業(yè)的意見，而不僅僅是畫幾個方框和箭頭這么簡單，我的咨詢客戶肯定更愿意為此買單。
說不準(zhǔn)某天我會考慮加入一個早期的創(chuàng)業(yè)項目？最好能成為工作中的全能王。
理由是找到了，但我真的不懂美學(xué)這玩意兒。畢竟我只是個工程學(xué)的學(xué)士–最值得驕傲的地方，大概就是能把某個東西設(shè)計的奇丑無比。
“我只是個工程學(xué)的學(xué)士–最值得驕傲的地方大概就是能把某個東西制造的奇丑無比。?”
最終，APP的設(shè)計美學(xué)還是被我搞懂了，用的是我一貫的方法：冷酷，扎實的分析。而且只要能用的上，我不以“抄襲”為恥。我會花10小時來搞定一個設(shè)計項目，但實際的設(shè)計工作只有1小時。其余9小時都在被痛苦的學(xué)習(xí)過程折磨著。幾乎絕望的在google，pinterest和dribbble上面找一些能借鑒的設(shè)計素材。
下面的“規(guī)則”就是從這些時光里歸納出來的。
送給那些書呆子：現(xiàn)在我的UI設(shè)計算是做的不錯，那是因為我分析研究了很多東西——并不是因為我突然開竅憑著直覺就理解了美和平衡。
這篇文章講的不是理論，純粹是實用性的內(nèi)容。你不會在文章里看到黃金比例。我甚至不會提及配色法則。我從失敗的設(shè)計中學(xué)到的就是，這事兒只能憑靠堅持不懈的練習(xí)才能達(dá)成。
試著這么想一下：柔道的建立源自于幾個世紀(jì)以來日本的物質(zhì)文化和哲學(xué)傳統(tǒng)。你去報個柔道班，除了打斗外，你還會聽到很多關(guān)于能量，氣流和協(xié)調(diào)的說辭。大概我要講的也是這類東西。
馬伽術(shù)，簡單介紹一下，1930年的捷克，某個彪悍的猶太人對付納粹時發(fā)明的格斗術(shù)。這玩意一點兒都不藝術(shù)。在馬伽術(shù)的課程里，你會學(xué)到如何用一支鋼筆或者書來挖掉對方的眼睛。
我要講的就是界面版的馬伽術(shù)。
規(guī)則
如下：
光來自于天空
先用黑白來檢驗設(shè)計
留白的地方放大兩倍
學(xué)習(xí)文字置于圖上的方法（Part 2）
讓文字看上去很時尚— 或者不時尚（Part 2）
只用好看的字體（Part 2）
像藝術(shù)家一樣去剽竊（Part 2）
我們開始學(xué)習(xí)吧。
規(guī)則1:光來自于天空
大腦在理解我們看到的界面時，影子是至關(guān)重要的因素。
這也許是學(xué)習(xí)UI設(shè)計時最重要卻又不明顯的一個理念：光是來自于天空的。.光從天而降，這事兒太稀疏平常了，而且一直如此，以至于從下方打出的光看上去真的很詭異。
光源來自于上方時，它會照亮物體的頂部并在下方制造陰影。物體的頂部就會更亮，下方就會更暗。
你不會希望人們的下眼瞼都特別的黑吧，所以，如果我們在這些惡魔般的眼睛上面多加一些光亮，突然間他們就變成了你家門前的魔鬼女郎。
是的，這個真理同樣適用于UI。就好像在我們的面部特征中總能看到陰影處于下方，當(dāng)你看遍那些UI元素，你會發(fā)現(xiàn)他們的下方同樣有陰影存在。屏幕雖然是平的，但我們花了大量心血，造就了平面上也可以顯現(xiàn)三維效果的藝術(shù)。
我最喜歡的部分是圖片下方靠右的那個手指圖標(biāo)。
比如這個按鈕，即使是近乎“扁平”的按鈕，也有著很多與光線相關(guān)的細(xì)節(jié)：
未點擊的按鈕有一個黑色的底邊，少年你懂的，太陽是照不到那里的……
按鈕在未點擊狀態(tài)下，頂部會比底部更亮一些。這是因為按鈕上有一個細(xì)微的曲面。比如，你需要把一面鏡子在你面前向上翹起才能在鏡中看到陽光，所以向上翹起的平面總會對你反射更多的光。
未點擊的按鈕會投射一些稀薄地陰影?——?可能在放大的截圖中能看的更清楚。
點擊后的按鈕，底部依然比頂部還要暗一些，并且整個按鈕全都更暗……這是因為它與屏幕本身處于同一個平面，光線就不能輕易的照到它了。也有人提出現(xiàn)實世界中的按鈕，點擊之后也會變暗，是因為我們的手擋住了光線。
這只是個按鈕而已，就已經(jīng)呈現(xiàn)了4個細(xì)微的光線效果。學(xué)習(xí)暫告一階段，我們現(xiàn)在要把光線理論用在所有地方。
iOS 6有一點過時了，但是如果你想了解光線的特征，它可以做為一個很好的案例來進行研究。
這是一對iOS 6設(shè)置按鈕?—?“勿擾模式”?和?“提醒”。這沒什么了不起的，對吧？但是我們仔細(xì)看看有多少光線效果在其中起了作用。
嵌入式的控制器頂部邊緣投射了一個很微小的陰影
滑動按鈕“打開”的邊緣也有一些陰影
滑動按鈕“打開”的表面是凹陷的，底部會反射更多光線
小圖標(biāo)有一點點凸起。你看到它上半部分的亮光了嗎？這說明它的表面和光源是有些垂直的，因此它能接受到很多光線，同樣它也能把很多管線反射到你的眼睛里。
分欄凹槽的陰影處有一點兒彎曲的感覺，這是因為陽光來自上方，如果光線反過來，那么陰影也會隨之變化。
又一個分欄凹槽的樣式，來自于我曾經(jīng)設(shè)計的Hubster。
常見向內(nèi)凹陷的視覺元素：
文字輸入?yún)^(qū)域
點擊后的按鈕
滑動軌跡
Radio按鈕?(未選中時)
勾選框
常見向外突出的視覺元素：
按鈕?(未點擊時)
滑動的按鈕
下拉控制面板
卡片
已被選中的radio按鈕（其中的按鈕部分）
彈出框
現(xiàn)在你懂了吧，你會在很多地方看到他們。歡迎入門，少年。
等等，那扁平的設(shè)計呢?
iOS7的“扁平設(shè)計”曾經(jīng)在各大科技論壇掀起了轟動。正如它的名字所說，它真心是扁平的。沒有任何模擬現(xiàn)實的突出或者凹痕——只有線，形狀和單色。
我跟你們一樣，真心喜歡干凈簡潔的設(shè)計，但是實話實說，我不認(rèn)為這會是個持久的趨勢。那些在細(xì)微處模仿3D空間的界面設(shè)計真的讓人感覺很自然，似乎我們很難將這種做法完全放棄。
更有可能的是，我們會在不遠(yuǎn)的將來看到更多半扁平化的設(shè)計。(這也是我建議你盡快掌握的設(shè)計風(fēng)格）。?我會稱這種風(fēng)格為?“扁平化設(shè)計”。依然干凈，依然簡潔，但是當(dāng)你敲擊，滑動，點擊的時候，還是能看到陰影和曲線?。
OS X Yosemite—?扁平化，但不扁平。
就在我寫這篇文章的時候，Google基于旗下不同產(chǎn)品推出了他們的“Material Design”語言。這是獨樹一幟的視覺語言，它的精髓就在于，追求模仿物理世界。
這是Material Design上面的一個圖示，示意如何通過不同的陰影來表示不同的深度。
這才是我身邊最常出現(xiàn)的事物。
它使用了真實世界一些細(xì)微的元素來傳遞信息。這一點至關(guān)重要，只是細(xì)微的。
也不能說它完全沒有模擬真實世界，但是這不同于2006年的網(wǎng)頁設(shè)計風(fēng)格。并沒有使用材質(zhì)，漸變和光澤的情況出現(xiàn)。
我認(rèn)為，扁平化就是未來之路，至于扁平的？估計很快就要成為過眼云煙。
扁平設(shè)計現(xiàn)在看起來可真火?。?/p>
規(guī)則 2: 以黑白效果起步
顏色是最為復(fù)雜的設(shè)計元素，在增加顏色之前，設(shè)計只是灰度的，這更容易讓你關(guān)注元素之間的空間和布局。
用戶體驗設(shè)計師最近真的很關(guān)注“移動優(yōu)先”。這意味著你得想象頁面上的交互在一個手機上是否行得通，即使你面對的是一臺超高分辨率的Retina顯示器。
這種預(yù)設(shè)的限制條件非常好，它能讓思路更明晰。你從一個較難的問題起步（在小屏幕上構(gòu)建一個可用的應(yīng)用），然后再讓方案適應(yīng)更容易解決的問題（大屏幕上的可用應(yīng)用）。
這個限制條件的情況跟上面類似：從黑白效果開始設(shè)計。從更難的問題出發(fā)，先讓應(yīng)用無論在任何情況下都漂亮和好用，唯獨缺少顏色。最后再加入顏色，同時要保證，顏色的加入都有目的性。
Haraldur Thorleifsson的灰度線框看上去要比少數(shù)設(shè)計師最終的網(wǎng)頁設(shè)計作品還好
這就是讓應(yīng)用看上去“干凈”“整潔”的最靠譜方法。如果你在每個地方都使用了很多顏色，那會讓設(shè)計看上去很糟糕。黑白效果會強迫你優(yōu)先專注于空間，大小和布局，而這才是讓頁面看起來干凈簡潔的更深層次的原因。
經(jīng)典灰度設(shè)計。
有些情況下，黑白效果就沒什么用了。比如為了這幾個明確的目標(biāo)進行設(shè)計的時候——“動感的”，“炫目的”，“卡通風(fēng)格的”等等，這需要設(shè)計師支配顏色的能力異常強大。但是大多數(shù)應(yīng)用并不需要如此明確的設(shè)計目標(biāo)，只要做到干凈和簡潔就夠了。而對于設(shè)計來說，這正是公認(rèn)更難做到的事情。
炫目且充滿活力的設(shè)計，由Julien Renvoye(左側(cè)）和Cosmin Capitanu(右側(cè))所設(shè)計。這些設(shè)計要比看起來難得多。
黑白效果，無處不在。
步驟2:?如何增加顏色
最簡單的顏色使用方法就是添加單色。
為一個灰度的網(wǎng)頁設(shè)計增加單色能夠輕易高效的吸引眼球。
你也可以更進一步。灰度＋兩種顏色，或者灰度＋同一色調(diào)下的多種顏色。
顏色密碼實戰(zhàn)——等等，什么是色調(diào)？
大多數(shù)情況下網(wǎng)頁中的顏色都是使用RGB16進制代碼來實現(xiàn)的。因為RGB的使用幾乎成為常識，所以我們往往忽略了這樣一個事實，RGB并非在設(shè)計中實現(xiàn)顏色的最優(yōu)框架。而比它更好的框架是HSB（H代表色調(diào)，S代表飽和度，B代表亮度）
HSB比RGB更好是因為它更符合我們認(rèn)知顏色的方式，而且你能夠預(yù)料到當(dāng)你改變HSB數(shù)值時會對顏色產(chǎn)生怎樣的影響。
如果這對你來說還是個新聞，那你可以讀讀這篇文章，高級的HSB顏色框架。
單色調(diào)金色主題?來自Smashing Magazine.
單色調(diào)藍(lán)色主題?來自Smashing Magazine.
通過修改一個色調(diào)的飽和度和亮度，你可以創(chuàng)建多種顏色——暗色，亮色，背景色，強調(diào)色，搶眼——但是又不至于讓眼睛無法承受。
在設(shè)計中強調(diào)或者中和某種元素時，最靠譜的方法是使用基于統(tǒng)一色調(diào)（或兩種色調(diào)）的多種顏色，這能避免將整個設(shè)計搞得亂七八糟。
由Kerem Suer所做的倒數(shù)計時器，顏色的使用很有亮點
在視覺設(shè)計領(lǐng)域，顏色是最為復(fù)雜的。所以當(dāng)你開始手頭的設(shè)計工作時，很多關(guān)于顏色的工具都低效或者并不實用，但我要介紹幾個真心給力的好工具。
小工具合集:
永不使用黑色(Ian Storm Taylor).?這個網(wǎng)站上秉持的觀點是純粹的灰色在真實世界里幾乎沒有出現(xiàn)過，還有色調(diào)是如何影響陰影的灰度?－?尤其是陰影的暗部?－?這能為你的設(shè)計增添更多視覺豐富感。另外，帶有色調(diào)的灰度色更加接近對真實世界的模擬，這是個固有的優(yōu)點。
Adobe Color CC用來查找顏色，修改顏色和創(chuàng)建顏色組合的超酷工具。
Dribbble按顏色查找這是另一個技巧，你可以按特定顏色查找設(shè)計作品的。讓顏色的運用有據(jù)可查，一旦你已經(jīng)確定了需要實用的顏色，就來這里看看世界上最優(yōu)秀的設(shè)計師在他們的設(shè)計上如何使用同樣的顏色。
規(guī)則3:?讓留白擴大兩倍
為了讓UI看上去更有設(shè)計感，可以留出更多通透的空間。
在規(guī)則2里，我們提過黑白效果會強迫設(shè)計師在考慮顏色之前先去思考頁面空間和布局，并且這種思考模式非常好。好吧，接下來的時間我們好好聊聊空間和布局。
如果你寫過HTML代碼，你可能很熟悉HTML代碼以這種最原始的樣子展示在頁面上。
基本上，所有東西都被打散放置到屏幕上，字體很??；行與行之間基本沒有空間。段落之間有一點點空間，但是遠(yuǎn)遠(yuǎn)不夠。段落的直接延伸到頁面的另一端，無論頁面寬度是100px還是10000px，這顯然也不夠好。
從美學(xué)角度說，這簡直糟透了。如果你希望你所做的UI看起來是設(shè)計過的，你需要在設(shè)計中增加更多透氣的空間。
有時候需要增加的空間多到近乎荒謬。
空白區(qū)塊，HTML和CSS
如果你跟我一樣，習(xí)慣于使用CSS來控制頁面的布局，并且默認(rèn)狀況下不會使用空白區(qū)塊，那現(xiàn)在是時候來改變自己的壞習(xí)慣了。在一開始就把空白區(qū)塊當(dāng)作頁面默認(rèn)的樣子——一切都從空白區(qū)塊開始，知道你用別的頁面元素來替代這個位置。
聽起來很有禪意？我覺得這正是大多數(shù)人直接忽略這件事的原因所在。
以空白的表格來搭建你的頁面，這需要你只使用空白區(qū)來開始設(shè)計。你會在最初就考慮到邊距和空間。無論你在頁面上面畫些什么東西，都會慎重考慮其對空白區(qū)域的影響。
從一堆沒有樣式的HTML開始布局，也意味著你會更關(guān)注頁面和內(nèi)容的關(guān)系?？臻g和留白是后續(xù)考慮的事情，這一點必須明確。
這是一個音樂播放界面的概念設(shè)計，來自Piotr Kwiatkowski.
特別注意一下左邊的菜單。
左側(cè)菜單
菜單項之間的垂直空間高度正好是文字高度的兩倍。你所看到的12px字體上下正好有同樣高度的留白。
或者也可以注意一下列表中的標(biāo)題。標(biāo)題“播放列表”和它下面的下劃線之間有15px的距離。這比字體本身的高度還要高一些。更不用說每個列表之間的距離有25px那么遠(yuǎn)。
頂部的導(dǎo)航條有更多的空間。文字“搜索音樂”占了整個導(dǎo)航條高度的20%。圖標(biāo)也使用了類似的高度。
左邊欄的文字之間留出了比較充裕的空間，甚至更多。
Piotr在留白這件事上真是做到了仁至義盡，而且結(jié)果顯而易見。這雖然是他自娛自樂做的概念設(shè)計，但因為在美感上下足了功夫，能夠和市面上最好的音樂播放器UI界面相提并論。
好吧，充分的留白可以讓最亂的界面看上去簡潔和誘人——像Forum一樣。
Forum的概念設(shè)計，來自Matt Sisto
活著Wikipedia.
Wikipedia概念設(shè)計，來自Aurélien Salomon
你會發(fā)現(xiàn)對此有很多爭論，比如，有人指出Wikipedia的再設(shè)計從理念上完全忽略了使用網(wǎng)站時的功能性。但是我們也不能說這不是個好設(shè)計，完全不值得學(xué)習(xí)！
在行之間留出空間。
在元素之間留出空間。
在元素構(gòu)成的組之間留出空間。
分析怎么樣才是最有效的。
好吧，這就是第一部分的內(nèi)容。謝謝你的持續(xù)關(guān)注。
