起點課堂會員權益
職業(yè)體系課特權
線下行業(yè)大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識適合開發(fā)者的UI設計7條法則（上）
本文編譯自Medium，作者是一位UX（User Experience, 用戶體驗)設計師，他通過自己學習UI設計的過程，總結出7條實用的法則，為UI設計新手提供了寶貴的經(jīng)驗。文章分為2個部分，這里是第1部分。
序言
首先，明確一點，這篇文章并不是為所有人準備的，而是有特定的目標讀者：
- 想要在開發(fā)產(chǎn)品時設計出好看UI的開發(fā)者。
- 想要讓自己作品集更出彩的UX設計師，或者是想要做出更精美的UI和UX的設計師。
如果你是學藝術的學生或者已經(jīng)是UI設計師了，你可能覺得這篇文章很無聊，而且觀點都是錯的。沒關系，你的批評沒錯，把這個網(wǎng)頁關了，去忙別的事吧。
那么從這篇文章中到底能學到什么呢？我曾是一名不懂UI的UX設計師。我非常熱愛UX設計，但是后來我發(fā)現(xiàn)，做出精美的界面是多么的必要:
- 我以前的作品集看起來一團糟，顯得我的作品和思考過程很差勁。
- 我做UX咨詢的客戶更喜歡有能力呈現(xiàn)作品的人，而不是只會畫一堆方塊和箭頭的人。
- 我能為一些早期的創(chuàng)業(yè)公司工作嗎？還是一邊兒呆著吧。
我當然也有借口：
我沒有美術基礎，我主修工程專業(yè)，所以我做出難看的東西也無可厚非。
最終，我還是學了app設計，不斷地分析案例，厚著臉皮臨摹成功的作品。假設我在1個UI項目上花10個小時的時間，其中只有1個小時是有效的，其它9個小時都是在失敗中不斷地學習，玩命的在Google、Pinterest或者Dribble上找值得借鑒的東西。
下面這些“法則”都是我從失敗中總結出來的。所以，我需要提醒新人：我現(xiàn)在擅長UI，主要得益于我經(jīng)常分析，并不是突然開悟，理解了什么是美，什么是平衡。
這篇文章不講理論，只談應用。我不會講什么黃金分割、色彩理論，只有實站中總結出的經(jīng)驗和教訓。就好像，柔道源于日本幾個世紀以來的尚武精神和哲學理念。上柔道課時，不僅能學到打斗，還會學到很多關于能量、氣息與和諧之類的東西。而以色列格斗術（Krav Maga）則完全不同。這種格斗術是納粹壓迫下猶太人發(fā)明的。其中根本沒有“藝術”，在以色列格斗術的課堂上，你學到就是怎樣用一根筆或者本書襲擊別人的眼睛。
這篇文章就是產(chǎn)品設計領域的以色列格斗術。
以下是我要講的法則：
- 光線來自天空
- 黑白優(yōu)先
- 增加空白空間
- 學會在圖片上呈現(xiàn)文字（第２部分）
- 做好強調和淡化（第２部分）
- 只用合適的字體（第２部分）
- 善于借鑒優(yōu)秀的作品（第２部分）
我們來一起看看這些法則。
法則1：光線來自天空
陰影能夠告訴人腦我們到底在看什么樣的UI元素。
這可能是學習UI設計時，最容易忽略卻又極為重要的一點了:光線來自天空。光線總是從天空（上方）來的，從下面照上來的光看起來會非常詭異。
當光線從天上照下來的時候，物品的上端會偏亮，而下方會出現(xiàn)陰影。上半部分顏色淺一些，而下半部分深一些。
從下面打一束光到人臉上是不是看起來很滲人？UI設計也是同理。我們的屏幕是平的，但是我們可以通過一些藝術手法讓它看起來是3D的，在每個元素的下方加一些陰影。
就拿這個按鈕舉例，這是一個相對“扁平化”(flat)的按鈕，但依然可以看出一些光線變化的細節(jié):
- 沒有按下去的按鈕底部邊緣更暗，因為沒有光線照到那里。
- 沒有按下去的按鈕上半部分比下半部分稍微亮一些。這是在模仿一個略有弧度的表面（見側視圖）。
- 沒有按下去的按鈕下方有一些細微的陰影，在放大圖中看得更清楚。
- 按下去的按鈕整體顏色都更暗了，但下半部分的顏色依然比上面深。這是因為按鈕在屏幕的平面上，光線不容易照到。也有人說，在現(xiàn)實中，按下去的按鈕顏色更深，因為手遮擋住了光線。
這么一個簡單的按鈕就有4種不同的光線變化。實際上，我們可以把這種原則運用到各處。
iOS 6有點過時了，但還是學習光線不錯的案例。這張圖是iOS 6“勿擾模式”和“通知”的設置，看看上面有多少種不同的光線變化。
- 控制面板的上邊緣有一小塊陰影。
- “開啟”滑動槽上部也有陰影。
- “開啟”滑動槽的下半部分，反射了一些光線。
- 按鈕是突出的，上邊緣較亮，因為是與光源垂直的，接收了大量光線，折射到你的眼睛中。
- 因為光線角度的問題，分割線處出現(xiàn)了陰影。
通常會內(nèi)嵌的元素：
- 文字輸入框
- 按下的按鈕
- 滑動槽
- 單選框（未選擇的）
- 復選框
通常會外凸的元素
- 未按下的按鈕
- 滑動按鈕
- 下拉控件
- 卡片
- 選擇后的單選按鈕
- 彈出消息
等等，現(xiàn)在不是追求扁平化的設計嗎？
iOS 7引發(fā)了科技界對于“扁平化設計”(flat design)的追求。也就是說圖標是平的，不再模仿實物而外凸或內(nèi)凹，只有線條和單一顏色的形狀。
我很喜歡這種干凈、簡潔的風格，但是我認為這種趨勢不會長久。通過細微的變化模擬出3D的效果非常自然，不會被完全取代的。
在不久的將來，我們很可能會看到半扁平的UI（這也是我推薦你使用的設計風格）我把它稱為“flatty design”，依然非常干凈簡潔，但是也有一些陰影，有輕點、滑動、按下操作的提示。
現(xiàn)在，Google也在各個產(chǎn)品上推行他們的Material Design，提供一種統(tǒng)一的視覺設計語言。Material Design的設計指導為我們展示了它如何運用陰影表現(xiàn)不同的層次。
這也是我所認同的類型。用現(xiàn)實世界的元素來傳遞信息，關鍵在于：細微。你不能說它沒有模仿現(xiàn)實世界，但也絕不是2006年的網(wǎng)頁風格，沒有紋理，沒有梯度，更沒有光澤。
我認為“flatty”是未來的方向。扁平化？早晚會過時的。
法則2：黑白優(yōu)先
在上色前用灰度模式設計可以簡化大量的工作，讓你更加關注空間和元素布局。
UX設計師現(xiàn)在都喜歡“移動優(yōu)先”的概念，這就意味著你要先考慮好在手機上如何顯示頁面，然后才考慮在超清的Retina屏幕上的顯示效果。
這種限制非常好，能夠幫你理清思路。先解決一些棘手的問題（在小屏幕上顯示）。然后再解決簡單的問題（在大屏幕上的可用性）。
我希望你先用黑色和白色設計，先把復雜的問題解決了。在不借助顏色幫助的情況下把app做得美觀易用。最后再有目的地上色。
這種方法能保持app“干凈”、“簡潔”。加入過多的顏色很容易毀掉簡潔性?！昂诎變?yōu)先”會促使你關注空間、尺寸和布局這些更重要的問題。先來看一些經(jīng)典的用灰度模式設計的頁面。
“黑白優(yōu)先”法則并不適用于所有情況，比如運動、卡通等有著鮮明特色的設計就需要好好地運用各種顏色。不過，大部分app并沒有這樣鮮明的特點，只要保持干凈和整潔就好，絢麗的顏色被公認是很難設計的，所以，還是先用黑色和白色來吧。
第二步:如何上色
上色最簡單的方法就是只加一種顏色。
在灰色的基礎上只加一種顏色可以簡單快速的吸引眼球和注意力。
你也可以更進一步，在灰色的基礎上加兩種顏色，或者添加統(tǒng)一色調的多種顏色。
實踐中的顏色法則——什么是色調？
網(wǎng)頁主要用的是十六進制RGB表。但RGB不是個好的顏色設計框架，HSB模式會更好用，其中H(hues)表示色相，S(saturation)表示飽和度，B（brightness）表示亮度。
HSB模式是比RGB模式更適合我們看待顏色的方式。如果你對這方面不太了解，以下是一些HSB模式簡單的入門知識。
通過調整單一色相的飽和度和亮度，你可以生成各種不同的顏色——深色、淺色、背景色、強調的地方、吸引眼球的地方等，但是又不會很扎眼。
使用一種或兩種基礎色調的多種顏色是強調和淡化某些元素，而又不把設計搞得一團糟的最可靠的方法。
關于顏色的其它幾點建議
顏色是視覺設計中最復雜的。我從復雜的理論和長期的實踐中挑出了一些好的建議送給你:
小工具箱：
- 不要用純黑色：在現(xiàn)實世界中幾乎見不到絕對的黑色。調整不同的飽和度可以增加設計的豐富程度，也更接近現(xiàn)實世界。
- Adobe Color CC：尋找、調整、創(chuàng)造顏色組合的絕佳工具。
- 在Dribble通過顏色搜索：尋找某種顏色如何搭配的好方法，非常實用，如果你已經(jīng)決定了要用那種顏色，可以通過顏色搜索看看世界頂級的設計師是如何配色的。
法則3：增加空白空間
為了讓UI看起來更加有設計感，留出一些空白的空間。
在第2條法則中，我說到了黑白優(yōu)先的原則，讓設計師在考慮顏色之前先想想空間和布局，那么現(xiàn)在我們就來說說如何安排空間和布局。
HTML的默認版式是這樣的：
所有東西都堆在屏幕上，字號、行距都很小，段與段之間有一些間隔，但是也不是很大。這么布局實在是太難看了。如果你想設計出精美的UI，那就需要留出更多空白的空間。
留白空間、HTML和CSS
如果你和我以前一樣，習慣用CSS來調整布局，那你最好改掉這個壞習慣，因為CSS默認是沒有留出空間的。試著把空白當作默認狀態(tài)，在空白頁面添加各種元素。從沒有修飾過的HTML開始，先做好內(nèi)容，然后再做排版。
下圖是Piotr Kwiatkowski設計的一個音樂播放器。
請注意左側的菜單欄。字號是12px，行間距有文字的兩倍高。再看看列表的名稱，“PLAYLISTS”和下劃線之間有15px的空白，播放列表名稱之間還有25px的間距。
在頂部導航欄也有很大的空間，搜索圖標和“Search all music”占到了導航欄高度的20%。
留白的空間收到了良好的效果，不同的元素有機的組合在一起，使得這個頁面成為最好的音樂播放器UI之一。
大量的空白可以把混亂的界面做得簡潔美觀，比如這個論壇：
或者維基百科：
很多人認為在維基百科的這個新頁面上，很多功能找不到了，但是你不能否認這是學習頁面設計的一個好案例。
在行之間留出空間。
在各個元素之間留出空間。
在各組元素之間留出空間。
分析一下哪些是可行的。
好了，以上就是第1部分的內(nèi)容，感謝閱讀！
在第2部分中，我會講到剩下的4條法則：
4. 學會在圖片上呈現(xiàn)文字
5. 做好強調和淡化
6. 只用合適的字體
7. 善于借鑒優(yōu)秀的作品
來源：CocoaChina
要做出好的UI，設計出更精彩的UI ,需要不斷的努力，不斷的欣賞別人的作品，不斷觀察，不斷發(fā)現(xiàn)，不斷地分析案例，臨摹成功的作品，從中獲得經(jīng)驗，得到自己設計的提升，然后找到自己的分個，時刻保持初學者的心態(tài)，繼續(xù)前進！