[Design] 不談設計理論，給 UI 設計初心者的七條速成守則（上）－Foxbrush

From: http://buzzorange.com/techorange/2014/12/01/7-rules-for-creating-gorgeous-ui-part/

--------------------------------------------------------------------------------

序言

首先，明確一點，這篇文章並不是為所有人準備的，而是有特定的目標讀者：

想要在開發產品時設計出好看 UI 的開發者。
想要讓自己作品集更出彩的 UX 設計師，或者是想要做出更精美的 UI 和 UX 的設計師。

如果你是學藝術的學生或者已經是 UI 設計師了，你可能覺得這篇文章很無聊，而且觀點都是錯的。沒關係，你的批評沒錯，把這個網頁關了，去忙別的事吧。

那麼從這篇文章中到底能學到什麼呢？我曾是一名不懂 UI 的 UX 設計師。我非常熱愛 UX 設計，但是後來我發現，做出精美的界面是多麼的必要:

我以前的作品集看起來一團糟，顯得我的作品和思考過程很差勁。
我做 UX 諮詢的客戶更喜歡有能力呈現作品的人，而不是只會畫一堆方塊和箭頭的人。
我能為一些新創公司工作嗎？先，不要。

我當然也有藉口：

我沒有美術基礎，我主修工程專業，所以我做出難看的東西也無可厚非。

最終，我還是學了 App 設計，不斷地分析案例，厚著臉皮臨摹成功的作品。假設我在 1 個 UI 項目上花 10 個小時的時間，其中只有 1 個小時是有效的，其它 9 個小時都是在失敗中不斷地學習，玩命的在 Google、Pinterest 或者 Dribble 上找值得借鑒的東西。

下面這些「法則」都是我從失敗中總結出來的。所以，我需要提醒新人：我現在擅長 UI，主要得益於我經常分析，並不是突然開悟，理解了什麼是美，什麼是平衡。

這篇文章不講理論，只談應用。我不會講什麼黃金分割、色彩理論，只有實戰中總結出的經驗和教訓。就好像，柔道源於日本幾個世紀以來的尚武精神和哲學理念。上柔道課時，不僅能學到打鬥，還會學到很多關於能量、氣息與和諧之類的東西。而以色列格鬥術（Krav Maga）則完全不同。這種格鬥術是納粹壓迫下猶太人發明的。其中根本沒有「藝術」，在以色列格鬥術的課堂上，你學到就是怎樣用一根筆或者本書襲擊別人的眼睛。

這篇文章就是產品設計領域的以色列格鬥術。

以下是我要講的法則：

1. 光線來自天空
2. 黑白優先
3. 增加空白空間
4. 學會在圖片上呈現文字
5. 做好強調和淡化
6. 只用合適的字體
7. 善於借鑒優秀的作品

我們來一起看看這些法則。

法則 1：光線來自天空

陰影能夠告訴人腦我們到底在看什麼樣的 UI 元素。

這可能是學習 UI 設計時，最容易忽略卻又極為重要的一點了: 光線來自天空。光線總是從天空（上方）來的，從下面照上來的光看起來會非常詭異。

當光線從天上照下來的時候，物品的上端會偏亮，而下方會出現陰影。上半部分顏色淺一些，而下半部分深一些。

從下面打一束光到人臉上是不是看起來很恐怖？UI 設計也是同理。我們的螢幕是平的，但是我們可以通過一些藝術手法讓它看起來是 3D 的，在每個元素的下方加一些陰影。

就拿這個按鈕舉例，這是一個相對「扁平化」(flat) 的按鈕，但依然可以看出一些光線變化的細節:

1. 沒有按下去的按鈕底部邊緣更暗，因為沒有光線照到那裡。
2. 沒有按下去的按鈕上半部分比下半部分稍微亮一些。這是在模仿一個略有弧度的表面（見側視圖）。
3. 沒有按下去的按鈕下方有一些細微的陰影，在放大圖中看得更清楚。
4. 按下去的按鈕整體顏色都更暗了，但下半部分的顏色依然比上面深。這是因為按鈕在螢幕的平面上，光線不容易照到。也有人說，在現實中，按下去的按鈕顏色更深，因為手遮擋住了光線。

這麼一個簡單的按鈕就有 4 種不同的光線變化。實際上，我們可以把這種原則運用到各處。

iOS 6 有點過時了，但還是學習光線不錯的案例。這張圖是 iOS 6「忙碌模式」和「通知」的設置，看看上面有多少種不同的光線變化。

控制面板的上邊緣有一小塊陰影。
「開啟」滑動槽上半部也有陰影。
「開啟」滑動槽的下半部，反射了一些光線。
按鈕是突出的，上邊緣較亮，因為是與光源垂直的，接收了大量光線，折射到你的眼睛中。
因為光線角度的問題，分割線處出現了陰影。

通常會內嵌的元素：

文字輸入框
按下的按鈕
滑動槽
單選框（未選擇的）
複選框

通常會外凸的元素

未按下的按鈕
滑動按鈕
下拉控件
卡片
選擇後的單選按鈕
彈出消息

等等，現在不是追求扁平化的設計嗎？

iOS 7 引發了科技界對於「扁平化設計」(flat design) 的追求。也就是說圖標是平的，不再模仿實物而外凸或內凹，只有線條和單一顏色的形狀。

我很喜歡這種乾淨、簡潔的風格，但是我認為這種趨勢不會長久。通過細微的變化模擬出 3D 的效果非常自然，不會被完全取代的。

在不久的將來，我們很可能會看到半扁平的 UI（這也是我推薦你使用的設計風格）我把它稱為“flatty design”，依然非常乾淨簡潔，但是也有一些陰影，有輕點、滑動、按下操作的提示。

現在，Google 也在各個產品上推行他們的 Material Design，提供一種統一的視覺設計語言。Material Design 的設計指導為我們展示了它如何運用陰影表現不同的層次。

這也是我所認同的類型。用現實世界的元素來傳遞信息，關鍵在於: 細微。你不能說它沒有模仿現實世界，但也絕不是 2006 年的網頁風格，沒有紋理，沒有梯度，更沒有光澤。

我認為「flatty」是未來的方向。扁平化？早晚會過時的。

法則 2：黑白優先

在上色前用灰度模式設計可以簡化大量的工作，讓你更加關注空間和元素佈局。

UX 設計師現在都喜歡「移動優先」的概念，這就意味著你要先考慮好在手機上如何顯示頁面，然後才考慮在超清的 Retina 螢幕上的顯示效果。

這種限制非常好，能夠幫你理清思路。先解決一些棘手的問題（在小螢幕上顯示）。然後再解決簡單的問題（在大螢幕上的可用性）。

我希望你先用黑色和白色設計，先把複雜的問題解決了。在不借助顏色幫助的情況下把 app 做得美觀易用。最後再有目的地上色。

這種方法能保持 app「乾淨」、「簡潔」。加入過多的顏色很容易毀掉簡潔性。「黑白優先」會促使你關注空間、尺寸和佈局這些更重要的問題。先來看一些經典的用灰度模式設計的頁面。

「黑白優先」法則並不適用於所有情況，比如運動、卡通等有著鮮明特色的設計就需要好好地運用各種顏色。不過，大部分 app 並沒有這樣鮮明的特點，只要保持乾淨和整潔就好，絢麗的顏色被公認是很難設計的，所以，還是先用黑色和白色來吧。

第二步：如何上色

上色最簡單的方法就是只加一種顏色。

在灰色的基礎上只加一種顏色可以簡單快速的吸引眼球和注意力。

你也可以更進一步，在灰色的基礎上加兩種顏色，或者添加統一色調的多種顏色。

實踐中的顏色法則——什麼是色調？

網頁主要用的是十六進制 RGB 表。但 RGB 不是個好的顏色設計框架，HSB 模式會更好用，其中 H（hues）表示色相，S（saturation）表示飽和度，B（brightness）表示亮度。

HSB 模式是比 RGB 模式更適合我們看待顏色的方式。如果你對這方面不太了解，以下是一些 HSB 模式簡單的入門知識。

通過調整單一色相的飽和度和亮度，你可以生成各種不同的顏色——深色、淺色、背景色、強調的地方、吸引眼球的地方等，但是又不會很刺眼。

使用一種或兩種基礎色調的多種顏色是強調和淡化某些元素，而又不把設計搞得一團糟的最可靠的方法。

關於顏色的其它幾點建議

顏色是視覺設計中最複雜的。我從複雜的理論和長期的實踐中挑出了一些好的建議送給你:

小工具箱：

不要用純黑色：在現實世界中幾乎見不到絕對的黑色。調整不同的飽和度可以增加設計的豐富程度，也更接近現實世界。
Adobe Color CC：尋找、調整、創造顏色組合的絕佳工具。
在 Dribble 通過顏色搜索：尋找某種顏色如何搭配的好方法，非常實用，如果你已經決定了要用那種顏色，可以通過顏色搜索看看世界頂級的設計師是如何配色的。