介紹

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

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

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

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

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

首先，我是一個(gè)沒有效戶界面設(shè)計(jì)技能的體驗(yàn)設(shè)計(jì)師。我熱愛我的職業(yè)，但是我并沒有許多工作經(jīng)驗(yàn)，因?yàn)槲乙郧安恢�道美觀界面的意義：

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

我有自己的理由：我不了解垃圾美學(xué)，因?yàn)槲覍９ビ诠こ虒W(xué)——難看的設(shè)計(jì)幾乎是它成功的標(biāo)志。

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

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

給菜鳥的良言：假如你在UI設(shè)計(jì)上不夠好，那是因?yàn)槟愀�善于分析，而不是在美和平衡上沒有先天。

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

舉例來說，柔道因?yàn)槿毡旧形涞膫鹘y(tǒng)思想一向延續(xù)到現(xiàn)在。可是學(xué)習(xí)柔道的時(shí)候，除了演練，你也會聽到關(guān)于力量、流派以及友善這類的東西。

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

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

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

1.讓光影天然

2.條理優(yōu)先

3.充分留白

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

5.使用多種文本樣式

6.選擇適合的字體

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

條：讓光影天然

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

“讓光影天然”——這可能是學(xué)習(xí)UI設(shè)計(jì)好主要卻好容易忽視的準(zhǔn)則。因?yàn)楣饪偸翘焐仙湎聛恚�所以一旦它反著從下而上，我們就會覺得特別很是別扭。

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

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

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

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

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

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

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

3.個(gè)按鈕的投影特別很是細(xì)膩，放大看會更顯明。

4.按下狀況的按鈕雖然依舊有從上到下，從淺到深的漸變，但是整體明度較低。這是因?yàn)楣庖话愫茈y到達(dá)向下凹陷的面。在現(xiàn)實(shí)生活中也是如此，因?yàn)槲覀冊诎聪掳粹o時(shí)手會擋住光。

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

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

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

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

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