本文編譯自Medium，作者是一位UX（User Experience，用戶體驗）設計師，他通過自己學習UI設計的過程，總結出7條實用的法則，為UI設計新手提供了珍貴的經驗。文章分為2個部分，今天稟享部分，來學習咯！

序言

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

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

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

那么從這篇文章中到底能學到什么呢？我曾是一名不懂UI的UX設計師。我特別很是熱愛UX設計，后來我發現，做出優美的界面是多么的需要:

我以前的作品集看起來一團糟，顯得我的作品和思考過程很差勁。 我做UX咨詢的客戶更喜好有能力呈現作品的人，而不是只會畫一堆方塊和箭頭的人。 我能為一些早期的創業公司工作嗎？照舊一邊兒呆著吧。

我當然也有托言：

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

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

下面這些“法則”都是我從失敗中總結出來的。所以，我需要提醒新人：我現在擅長UI，主要得益于我經常分析，并不是倏忽開悟，理解了什么是美，什么是平衡。

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

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

以下是我要講的法則：

光線來自天空 詬誶優先 增添空白空間 學會在圖片上呈現文字（第２部分）

做好強調和淡化（第２部分）

只用合適的字體（第２部分）

善于借鑒優異的作品（第２部分）

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

法則1：光線來自天空

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

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

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

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

就拿這個按鈕舉例，這是一個相對“扁平化”（flat）的按鈕，但依然可以看出一些光線轉變的細節:

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

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

iOS 6有點過時了，但照舊學習光線不錯的案例。這張圖是iOS 6“勿擾模式”和“通知”的設置，看看上面有多少種不同的光線轉變。

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

通常會內嵌的元素：

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

通常會外凸的元素

未按下的按鈕 滑動按鈕 下拉控件 卡片 選擇后的單選按鈕 彈出新聞

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

iOS 7引發了科技界對于“扁平化設計”（flat design）的追求。也就是說圖標是平的，不再模擬實物而外凸或內凹，只有線條和單一顏色的外形。

我很喜好這種干凈、簡潔的風格，但是我認為這種趨勢不會長久。通細致微的轉變模擬出3D的效果特別很是天然，不會被完全庖代的。

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

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

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

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