介紹

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

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

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

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

讓我來(lái)告訴你你會(huì)在這篇文章中了解什么吧。

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

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

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

后來(lái)我同樣研究了一些看起來(lái)悅目的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é)到的。

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

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

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

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

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

下面來(lái)介紹設(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)楣饪偸翘焐仙湎聛?lái)，所以一旦它反著從下而上，我們就會(huì)覺(jué)得特別很是別扭。

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

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

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

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

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

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

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

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

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

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

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

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

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

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