介紹

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

開發(fā)者：想為自己的作品設(shè)計優(yōu)質(zhì)界面卻不得法

用戶體驗設(shè)計師：想讓自己的作品比大師級PPT更加美觀。或者是已經(jīng)發(fā)現(xiàn)熱銷產(chǎn)品的界面和體驗總是好結(jié)合的設(shè)計師。

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

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

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

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

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

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

這些“規(guī)則”就是從那十個小時里學(xué)到的。

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

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

舉例來說，柔道因為日本尚武的傳統(tǒng)思想一向延續(xù)到現(xiàn)在。可是學(xué)習(xí)柔道的時候，除了演練，你也會聽到關(guān)于力量、流派以及友善這類的東西。

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

UI是顯示屏上的近身格斗術(shù)。

下面來介紹設(shè)計優(yōu)雅UI的幾條準則：

1.讓光影天然

2.條理優(yōu)先

3.充分留白

4.學(xué)習(xí)圖文堆疊

5.使用多種文本樣式

6.選擇適合的字體

7.像藝術(shù)家一樣尋找靈感

條：讓光影天然

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

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

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

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

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

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

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

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

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

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

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

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

雖然iOS6的風(fēng)格已經(jīng)有點過時了，但是它在光的質(zhì)感體現(xiàn)方面做的特別很是好。

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

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

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