介紹

事先聲明，這篇入門文章不是為所有人預備的，適用人員如下：

開發者：想為自己的作品設計優質界面卻不得法

用戶體驗設計師：想讓自己的作品比大師級PPT更加美觀。或者是已經發現熱銷產品的界面和體驗總是好結合的設計師。

假如你是一個藝術黌舍卒業生或者是一個成熟界面設計師，那么你很可能會覺得這篇入門文章無聊、錯漏百出，令人惱火。這沒關系，你所有的看法都是對的，那么就請點擊上方的“關閉頁面”吧。

讓我來告訴你你會在這篇文章中了解什么吧。

首先，我是一個沒有效戶界面設計技能的體驗設計師。我熱愛我的職業，但是我并沒有許多工作經驗，因為我以前不知道美觀界面的意義：

當時作品沒水平，反響不好，急需改進。 我的潛在客戶更愿意去用一些不僅僅只會畫交互原型圖的設計師的作品。 難道我想一向當一個菜鳥嗎？當然是想成為中流砥柱了。

我有自己的理由：我不了解垃圾美學，因為我專攻于工程學——難看的設計幾乎是它成功的標志。

后來我同樣研究了一些看起來悅目的APP，我從中得到了一些創造性的發現：完全的、理性的分析。然后不好意思的借鑒了一下。我曾經在一個UI項目上花費了十個小時，其中九個小時在瘋狂的學習，一個小時在制作——絕望的在谷歌、圖釘和追波上找到了可以借鑒的作品。

這些“規則”就是從那十個小時里學到的。

給菜鳥的良言：假如你在UI設計上不夠好，那是因為你更善于分析，而不是在美和平衡上沒有先天。

這篇文章不是理論，而是實踐。這里沒有黃金分割，也沒有配色寶典，只有我的一些經驗教訓和一向以來的演習。

舉例來說，柔道因為日本尚武的傳統思想一向延續到現在。可是學習柔道的時候，除了演練，你也會聽到關于力量、流派以及友善這類的東西。

上個世紀三十年代，在（前）捷克斯洛伐克，一些同納粹斗爭的猶太人發明了近身格斗術。在這種不優雅的格斗術課上，你會學到如何用一支鋼筆或者一本書來刺瞎敵人的眼睛。

UI是顯示屏上的近身格斗術。

下面來介紹設計優雅UI的幾條準則：

1.讓光影天然

2.條理優先

3.充分留白

4.學習圖文堆疊

5.使用多種文本樣式

6.選擇適合的字體

7.像藝術家一樣尋找靈感

條：讓光影天然

陰影是好天然的暗示，它可以凸起我們想讓用戶注重到的界面元素。

“讓光影天然”——這可能是學習UI設計好主要卻好容易忽視的準則。因為光總是天上射下來，所以一旦它反著從下而上，我們就會覺得特別很是別扭。

當光從天空中射下來，會照亮好上面的事物，并且向下投射出它們的影子。所以頂部好亮，而底部好暗。

你平常不會看到下眼瞼陰影很重的人，所以假如有人在臉的下方打光，然后站在你的門前，你一定會被嚇個半死。

沒錯，這對UI來說也是一樣。在用戶界面中，所有的元素都有陰影和所有的元素都沒有陰影效果其實是一樣的。我們的屏幕是二維的，但是我們給元素加入了許多效果，讓它們看起來像是三維的。

我好喜好這個按鈕被圈出來的右下方的部分：

拿按鈕來說，就算是這種扁平化的按鈕也會有一些光影細節。

1.沒有按下去的按鈕（個），底邊有深色的投影。

2.個按鈕會有一個從上到下，從淺到深的漸變，這是因為它在模擬微凸的效果。就像你照鏡子的時候會把鏡子稍稍傾斜來采光，按鈕也是如此，外觀的微凸會增添光澤質感。

3.個按鈕的投影特別很是細膩，放大看會更顯明。

4.按下狀況的按鈕雖然依舊有從上到下，從淺到深的漸變，但是整體明度較低。這是因為光一般很難到達向下凹陷的面。在現實生活中也是如此，因為我們在按下按鈕時手會擋住光。

這僅僅是一個按鈕，但是仍然會有四種光的微效果。我們可以通過下面這個例子來了解一下。

雖然iOS6的風格已經有點過時了，但是它在光的質感體現方面做的特別很是好。

這是一對iOS6的設置按鈕——“請勿打攪”和“通知”。你是不是覺得這沒什么特殊的？那我們現在來看看這兩個按鈕上有多少光影效果吧。

“請勿打攪”所在的控制面板有微弱的投影。 “ON”的滑塊軌道有微凹感。 “ON”的滑塊軌道的凹面的底部有反光。圖標是微微向外凸起的，有看到他們上邊的高光嗎？他們的光是從上方垂直投射下來的，所以你可以看到很大塊的高光。 離邊角越遠，光的條理越雄厚，反之則越單一。

是一個分界線的細節圖，來自于我很早以前的“Hubster”概念。