原文：7 Rules for Creating Gorgeous UI (Part 1)

翻譯：David Lee

簡介

各位涧至，友情提醒先腹躁。這篇指導并不適用于所有人，那么化借，對誰才有用呢潜慎？

開發(fā)者--在必要的時候，希望自己能夠設計出漂亮UI的開發(fā)工程師

用戶體驗（UX）設計師--他們希望自己的作品集比呆板的PPT更好看蓖康，或者铐炫，想通過絢麗的UI包裝傳達更極致的用戶體驗，也同樣適用蒜焊。

如果你讀過藝術院械剐牛或者你認為自己已經(jīng)成為一個視覺設計師了，那你很有可能發(fā)現(xiàn)這篇文章中充斥著：

a 無聊 b 錯誤?還有 c 讓人惱怒的內(nèi)容泳梆。

我不會介意的鳖悠，你們所有的批評都是對的。關了這個优妙，去讀點別的吧乘综。

或者，還是我告訴你你到底能在這篇文章中學到什么吧套硼。

首先卡辰，我曾是一名完全不懂視覺設計的用戶體驗設計師。我真心熱愛用戶體驗設計邪意，但當我意識到九妈，我可以找到一大堆理由來支持自己去學習——如何設計一個看上去不錯的界面的時候，就放棄了單純的UX設計：

我的作品集就是個垃圾雾鬼，完全沒能展現(xiàn)出我工作和思考的過程

如果能提供更多專業(yè)的意見萌朱，而不僅僅是畫幾個方框和箭頭這么簡單，我的咨詢客戶肯定更愿意為此買單策菜。

說不準某天我會考慮加入一個早期的創(chuàng)業(yè)項目晶疼？最好能成為工作中的全能王酒贬。

理由是找到了，但我真的不懂美學這玩意兒冒晰。畢竟我只是個工程學的學士–最值得驕傲的地方同衣，大概就是能把某個東西設計的奇丑無比。

“我只是個工程學的學士–最值得驕傲的地方大概就是能把某個東西制造的奇丑無比壶运。?”

最終耐齐，APP的設計美學還是被我搞懂了，用的是我一貫的方法：冷酷蒋情，扎實的分析埠况。而且只要能用的上，我不以“抄襲”為恥棵癣。我會花10小時來搞定一個設計項目辕翰，但實際的設計工作只有1小時。其余9小時都在被痛苦的學習過程折磨著狈谊。幾乎絕望的在google喜命，pinterest和dribbble上面找一些能借鑒的設計素材。

下面的“規(guī)則”就是從這些時光里歸納出來的河劝。

送給那些書呆子：現(xiàn)在我的UI設計算是做的不錯壁榕，那是因為我分析研究了很多東西——并不是因為我突然開竅憑著直覺就理解了美和平衡。

這篇文章講的不是理論赎瞎，純粹是實用性的內(nèi)容牌里。你不會在文章里看到黃金比例。我甚至不會提及配色法則务甥。我從失敗的設計中學到的就是牡辽，這事兒只能憑靠堅持不懈的練習才能達成。

試著這么想一下：柔道的建立源自于幾個世紀以來日本的物質(zhì)文化和哲學傳統(tǒng)敞临。你去報個柔道班态辛，除了打斗外，你還會聽到很多關于能量挺尿，氣流和協(xié)調(diào)的說辭奏黑。大概我要講的也是這類東西。

馬伽術票髓，簡單介紹一下攀涵，1930年的捷克铣耘，某個彪悍的猶太人對付納粹時發(fā)明的格斗術洽沟。這玩意一點兒都不藝術。在馬伽術的課程里蜗细，你會學到如何用一支鋼筆或者書來挖掉對方的眼睛裆操。

我要講的就是界面版的馬伽術怒详。

規(guī)則

如下：

光來自于天空

先用黑白來檢驗設計

留白的地方放大兩倍

學習文字置于圖上的方法（Part 2）

讓文字看上去很時尚— 或者不時尚（Part 2）

只用好看的字體（Part 2）

像藝術家一樣去剽竊（Part 2）

我們開始學習吧。

規(guī)則1:光來自于天空

大腦在理解我們看到的界面時踪区，影子是至關重要的因素昆烁。

這也許是學習UI設計時最重要卻又不明顯的一個理念：光是來自于天空的。.光從天而降缎岗，這事兒太稀疏平常了静尼，而且一直如此，以至于從下方打出的光看上去真的很詭異传泊。

呃……

光源來自于上方時鼠渺，它會照亮物體的頂部并在下方制造陰影。物體的頂部就會更亮眷细，下方就會更暗拦盹。

你不會希望人們的下眼瞼都特別的黑吧，所以溪椎，如果我們在這些惡魔般的眼睛上面多加一些光亮普舆，突然間他們就變成了你家門前的魔鬼女郎。

是的校读，這個真理同樣適用于UI沼侣。就好像在我們的面部特征中總能看到陰影處于下方，當你看遍那些UI元素地熄，你會發(fā)現(xiàn)他們的下方同樣有陰影存在华临。屏幕雖然是平的，但我們花了大量心血端考，造就了平面上也可以顯現(xiàn)三維效果的藝術雅潭。

我最喜歡的部分是圖片下方靠右的那個手指圖標。

比如這個按鈕却特，即使是近乎“扁平”的按鈕扶供，也有著很多與光線相關的細節(jié)：

未點擊的按鈕有一個黑色的底邊，少年你懂的裂明，太陽是照不到那里的……

按鈕在未點擊狀態(tài)下椿浓，頂部會比底部更亮一些。這是因為按鈕上有一個細微的曲面闽晦。比如扳碍，你需要把一面鏡子在你面前向上翹起才能在鏡中看到陽光，所以向上翹起的平面總會對你反射更多的光仙蛉。

未點擊的按鈕會投射一些稀薄地陰影?——?可能在放大的截圖中能看的更清楚笋敞。

點擊后的按鈕，底部依然比頂部還要暗一些荠瘪，并且整個按鈕全都更暗……這是因為它與屏幕本身處于同一個平面夯巷，光線就不能輕易的照到它了赛惩。也有人提出現(xiàn)實世界中的按鈕，點擊之后也會變暗趁餐，是因為我們的手擋住了光線喷兼。

這只是個按鈕而已，就已經(jīng)呈現(xiàn)了4個細微的光線效果后雷。學習暫告一階段季惯，我們現(xiàn)在要把光線理論用在所有地方。

iOS 6有一點過時了臀突，但是如果你想了解光線的特征星瘾，它可以做為一個很好的案例來進行研究。

這是一對iOS 6設置按鈕?—?“勿擾模式”?和?“提醒”惧辈。這沒什么了不起的琳状，對吧？但是我們仔細看看有多少光線效果在其中起了作用盒齿。

嵌入式的控制器頂部邊緣投射了一個很微小的陰影

滑動按鈕“打開”的邊緣也有一些陰影

滑動按鈕“打開”的表面是凹陷的念逞，底部會反射更多光線

小圖標有一點點凸起。你看到它上半部分的亮光了嗎边翁？這說明它的表面和光源是有些垂直的翎承，因此它能接受到很多光線，同樣它也能把很多管線反射到你的眼睛里符匾。

分欄凹槽的陰影處有一點兒彎曲的感覺叨咖，這是因為陽光來自上方，如果光線反過來啊胶，那么陰影也會隨之變化甸各。

又一個分欄凹槽的樣式，來自于我曾經(jīng)設計的Hubster焰坪。

常見向內(nèi)凹陷的視覺元素：

文字輸入?yún)^(qū)域

點擊后的按鈕

滑動軌跡

Radio按鈕?(未選中時)

勾選框

常見向外突出的視覺元素：

按鈕?(未點擊時)

滑動的按鈕

下拉控制面板

卡片

已被選中的radio按鈕（其中的按鈕部分）

彈出框

現(xiàn)在你懂了吧趣倾，你會在很多地方看到他們。歡迎入門某饰，少年儒恋。

等等，那扁平的設計呢?

iOS7的“扁平設計”曾經(jīng)在各大科技論壇掀起了轟動黔漂。正如它的名字所說诫尽，它真心是扁平的。沒有任何模擬現(xiàn)實的突出或者凹痕——只有線炬守，形狀和單色牧嫉。

我跟你們一樣，真心喜歡干凈簡潔的設計劳较，但是實話實說驹止，我不認為這會是個持久的趨勢。那些在細微處模仿3D空間的界面設計真的讓人感覺很自然观蜗，似乎我們很難將這種做法完全放棄臊恋。

更有可能的是，我們會在不遠的將來看到更多半扁平化的設計墓捻。(這也是我建議你盡快掌握的設計風格）抖仅。?我會稱這種風格為?“扁平化設計”。依然干凈砖第，依然簡潔撤卢，但是當你敲擊，滑動梧兼，點擊的時候放吩，還是能看到陰影和曲線?。

OS X Yosemite—?扁平化羽杰，但不扁平渡紫。

就在我寫這篇文章的時候，Google基于旗下不同產(chǎn)品推出了他們的“Material Design”語言考赛。這是獨樹一幟的視覺語言惕澎，它的精髓就在于，追求模仿物理世界颜骤。

這是Material Design上面的一個圖示唧喉，示意如何通過不同的陰影來表示不同的深度。

這才是我身邊最常出現(xiàn)的事物忍抽。

它使用了真實世界一些細微的元素來傳遞信息八孝。這一點至關重要，只是細微的鸠项。

也不能說它完全沒有模擬真實世界唆阿，但是這不同于2006年的網(wǎng)頁設計風格。并沒有使用材質(zhì)锈锤，漸變和光澤的情況出現(xiàn)驯鳖。

我認為，扁平化就是未來之路久免，至于扁平的浅辙？估計很快就要成為過眼云煙。

扁平設計現(xiàn)在看起來可真火把掷选记舆！

規(guī)則 2: 以黑白效果起步

顏色是最為復雜的設計元素，在增加顏色之前呼巴，設計只是灰度的泽腮，這更容易讓你關注元素之間的空間和布局御蒲。

用戶體驗設計師最近真的很關注“移動優(yōu)先”。這意味著你得想象頁面上的交互在一個手機上是否行得通诊赊，即使你面對的是一臺超高分辨率的Retina顯示器厚满。

這種預設的限制條件非常好，它能讓思路更明晰碧磅。你從一個較難的問題起步（在小屏幕上構建一個可用的應用）碘箍，然后再讓方案適應更容易解決的問題（大屏幕上的可用應用）。

這個限制條件的情況跟上面類似：從黑白效果開始設計鲸郊。從更難的問題出發(fā)丰榴，先讓應用無論在任何情況下都漂亮和好用，唯獨缺少顏色秆撮。最后再加入顏色四濒，同時要保證，顏色的加入都有目的性职辨。

Haraldur Thorleifsson的灰度線框看上去要比少數(shù)設計師最終的網(wǎng)頁設計作品還好

這就是讓應用看上去“干凈”“整潔”的最靠譜方法峻黍。如果你在每個地方都使用了很多顏色，那會讓設計看上去很糟糕拨匆。黑白效果會強迫你優(yōu)先專注于空間姆涩，大小和布局，而這才是讓頁面看起來干凈簡潔的更深層次的原因惭每。

經(jīng)典灰度設計骨饿。

有些情況下，黑白效果就沒什么用了台腥。比如為了這幾個明確的目標進行設計的時候——“動感的”宏赘，“炫目的”，“卡通風格的”等等黎侈，這需要設計師支配顏色的能力異常強大察署。但是大多數(shù)應用并不需要如此明確的設計目標，只要做到干凈和簡潔就夠了峻汉。而對于設計來說贴汪，這正是公認更難做到的事情。

炫目且充滿活力的設計休吠，由Julien Renvoye(左側(cè)）和Cosmin Capitanu(右側(cè))所設計扳埂。這些設計要比看起來難得多。

黑白效果瘤礁，無處不在阳懂。

步驟2:?如何增加顏色

最簡單的顏色使用方法就是添加單色。

為一個灰度的網(wǎng)頁設計增加單色能夠輕易高效的吸引眼球。

你也可以更進一步岩调∠镌铮灰度＋兩種顏色，或者灰度＋同一色調(diào)下的多種顏色号枕。

顏色密碼實戰(zhàn)——等等缰揪，什么是色調(diào)？

大多數(shù)情況下網(wǎng)頁中的顏色都是使用RGB16進制代碼來實現(xiàn)的堕澄。因為RGB的使用幾乎成為常識，所以我們往往忽略了這樣一個事實霉咨，RGB并非在設計中實現(xiàn)顏色的最優(yōu)框架蛙紫。而比它更好的框架是HSB（H代表色調(diào)，S代表飽和度途戒，B代表亮度）

HSB比RGB更好是因為它更符合我們認知顏色的方式坑傅，而且你能夠預料到當你改變HSB數(shù)值時會對顏色產(chǎn)生怎樣的影響。

如果這對你來說還是個新聞喷斋，那你可以讀讀這篇文章唁毒，高級的HSB顏色框架。

單色調(diào)金色主題?來自Smashing Magazine.

單色調(diào)藍色主題?來自Smashing Magazine.

通過修改一個色調(diào)的飽和度和亮度星爪，你可以創(chuàng)建多種顏色——暗色浆西，亮色，背景色顽腾，強調(diào)色近零，搶眼——但是又不至于讓眼睛無法承受。

在設計中強調(diào)或者中和某種元素時抄肖，最靠譜的方法是使用基于統(tǒng)一色調(diào)（或兩種色調(diào)）的多種顏色久信，這能避免將整個設計搞得亂七八糟。

由Kerem Suer所做的倒數(shù)計時器漓摩，顏色的使用很有亮點

在視覺設計領域裙士，顏色是最為復雜的。所以當你開始手頭的設計工作時管毙，很多關于顏色的工具都低效或者并不實用腿椎，但我要介紹幾個真心給力的好工具。

小工具合集:

永不使用黑色(Ian Storm Taylor).?這個網(wǎng)站上秉持的觀點是純粹的灰色在真實世界里幾乎沒有出現(xiàn)過夭咬，還有色調(diào)是如何影響陰影的灰度?－?尤其是陰影的暗部?－?這能為你的設計增添更多視覺豐富感酥诽。另外，帶有色調(diào)的灰度色更加接近對真實世界的模擬皱埠，這是個固有的優(yōu)點肮帐。

Adobe Color CC用來查找顏色，修改顏色和創(chuàng)建顏色組合的超酷工具。

Dribbble按顏色查找這是另一個技巧训枢，你可以按特定顏色查找設計作品的托修。讓顏色的運用有據(jù)可查，一旦你已經(jīng)確定了需要實用的顏色恒界，就來這里看看世界上最優(yōu)秀的設計師在他們的設計上如何使用同樣的顏色睦刃。

規(guī)則3:?讓留白擴大兩倍

為了讓UI看上去更有設計感，可以留出更多通透的空間十酣。

在規(guī)則2里涩拙，我們提過黑白效果會強迫設計師在考慮顏色之前先去思考頁面空間和布局，并且這種思考模式非常好耸采。好吧兴泥，接下來的時間我們好好聊聊空間和布局。

如果你寫過HTML代碼虾宇，你可能很熟悉HTML代碼以這種最原始的樣子展示在頁面上搓彻。

基本上，所有東西都被打散放置到屏幕上嘱朽，字體很行癖帷；行與行之間基本沒有空間搪泳。段落之間有一點點空間稀轨，但是遠遠不夠。段落的直接延伸到頁面的另一端岸军，無論頁面寬度是100px還是10000px靶端，這顯然也不夠好。

從美學角度說凛膏，這簡直糟透了杨名。如果你希望你所做的UI看起來是設計過的，你需要在設計中增加更多透氣的空間猖毫。

有時候需要增加的空間多到近乎荒謬台谍。

空白區(qū)塊，HTML和CSS

如果你跟我一樣吁断，習慣于使用CSS來控制頁面的布局趁蕊，并且默認狀況下不會使用空白區(qū)塊，那現(xiàn)在是時候來改變自己的壞習慣了仔役。在一開始就把空白區(qū)塊當作頁面默認的樣子——一切都從空白區(qū)塊開始掷伙，知道你用別的頁面元素來替代這個位置。

聽起來很有禪意又兵？我覺得這正是大多數(shù)人直接忽略這件事的原因所在任柜。

以空白的表格來搭建你的頁面卒废，這需要你只使用空白區(qū)來開始設計。你會在最初就考慮到邊距和空間宙地。無論你在頁面上面畫些什么東西摔认，都會慎重考慮其對空白區(qū)域的影響。

從一堆沒有樣式的HTML開始布局宅粥，也意味著你會更關注頁面和內(nèi)容的關系参袱。空間和留白是后續(xù)考慮的事情秽梅，這一點必須明確坦喘。

這是一個音樂播放界面的概念設計挺智，來自Piotr Kwiatkowski.

特別注意一下左邊的菜單捅暴。

左側(cè)菜單

菜單項之間的垂直空間高度正好是文字高度的兩倍妻率。你所看到的12px字體上下正好有同樣高度的留白洪规。

或者也可以注意一下列表中的標題违崇。標題“播放列表”和它下面的下劃線之間有15px的距離土辩。這比字體本身的高度還要高一些遭赂。更不用說每個列表之間的距離有25px那么遠潜索。

頂部的導航條有更多的空間臭增。文字“搜索音樂”占了整個導航條高度的20%。圖標也使用了類似的高度竹习。

左邊欄的文字之間留出了比較充裕的空間誊抛，甚至更多。

Piotr在留白這件事上真是做到了仁至義盡整陌，而且結果顯而易見拗窃。這雖然是他自娛自樂做的概念設計，但因為在美感上下足了功夫泌辫，能夠和市面上最好的音樂播放器UI界面相提并論随夸。

好吧，充分的留白可以讓最亂的界面看上去簡潔和誘人——像Forum一樣震放。

Forum的概念設計宾毒，來自Matt Sisto

活著Wikipedia.

Wikipedia概念設計，來自Aurélien Salomon

你會發(fā)現(xiàn)對此有很多爭論殿遂，比如诈铛，有人指出Wikipedia的再設計從理念上完全忽略了使用網(wǎng)站時的功能性。但是我們也不能說這不是個好設計墨礁，完全不值得學習幢竹！

在行之間留出空間。

在元素之間留出空間恩静。

在元素構成的組之間留出空間焕毫。

分析怎么樣才是最有效的。

好吧，這就是第一部分的內(nèi)容咬荷。謝謝你的持續(xù)關注冠句。