藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供有效的 UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來源：http://www.ui.cn/project.php?id=32954

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

介紹：

事先聲明，這篇入門文章不是為所有人準(zhǔn)備的，適用人員如下：

開發(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ù)學(xué)校畢業(yè)生或者是一個(gè)成熟界面設(shè)計(jì)師，那么你很可能會(huì)覺得這篇入門文章無聊、錯(cuò)漏百出，令人惱火。這沒關(guān)系，你所有的看法都是對(duì)的，那么就請(qǐng)點(diǎn)擊上方的“關(guān)閉頁面”吧。

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

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

1. 當(dāng)時(shí)作品沒水平，反響不好，急需改進(jìn)。
2. 我的潛在客戶更愿意去用一些不僅僅只會(huì)畫交互原型圖的設(shè)計(jì)師的作品。
3. 難道我想一直當(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)在?？墒菍W(xué)習(xí)柔道的時(shí)候，除了演練，你也會(huì)聽到關(guān)于力量、流派以及和睦這類的東西。

上個(gè)世紀(jì)三十年代，在（前）捷克斯洛伐克，一些同納粹斗爭(zhēng)的猶太人發(fā)明了近身格斗術(shù)。在這種不優(yōu)雅的格斗術(shù)課上，你會(huì)學(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)楣饪偸翘焐仙湎聛?，所以一旦它反著從下而上，我們就?huì)覺得非常別扭。

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

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

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

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

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

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

2.第一個(gè)按鈕會(huì)有一個(gè)從上到下，從淺到深的漸變，這是因?yàn)樗谀７挛⑼沟男Ч?。就像你照鏡子的時(shí)候會(huì)把鏡子稍稍傾斜來采光，按鈕也是如此，表面的微凸會(huì)增加光澤質(zhì)感。

3.第一個(gè)按鈕的投影非常精致，放大看會(huì)更明顯。

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

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

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

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

1. “請(qǐng)勿打擾”所在的控制面板有微弱的投影。
2. “ON”的滑塊軌道有微凹感。
3. “ON”的滑塊軌道的凹面的底部有反光。圖標(biāo)是微微向外突出的，有看到他們上邊的高光嗎？他們的光是從上方垂直投射下來的，所以你可以看到很大塊的高光。
4. 離邊角越遠(yuǎn)，光的層次越豐富，反之則越單一。

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

大多數(shù)凹面感覺的元素：

文本輸入?yún)^(qū)域

下壓的按鈕

滑塊軌道

單選按鈕（不可恢復(fù)得）

復(fù)選框

大多數(shù)凸面感覺的元素：

按鈕（自然狀態(tài)）

滑塊按鈕

下拉控制菜單

選項(xiàng)卡

部分單選按鈕

彈出窗口

現(xiàn)在你了解了，以后就可以全面的賞析光影效果了?；镉?jì)們，不用太感謝我。

等等，扁平化設(shè)計(jì)的光影效果又是怎樣的呢？

iOS7因?yàn)椤氨馄交O(shè)計(jì)”轟動(dòng)一時(shí)，正如其名，它的設(shè)計(jì)風(fēng)格就是“扁平”。它形狀沒有擬物化，也沒有刻意追求材料質(zhì)感，只是用了線條、形狀和純色塊來進(jìn)行設(shè)計(jì)。

盡管我非常喜歡簡(jiǎn)潔風(fēng)，但是我并不認(rèn)為這種風(fēng)格能一直流行。反而在界面設(shè)計(jì)中，那種看起來很逼真的擬物化風(fēng)格是我們無法完全拋棄的。

更有可能的是，半扁平化的界面設(shè)計(jì)可能會(huì)在未來更受歡迎，與君共勉，希望你能在以后熟練掌握這種風(fēng)格。雖說要保持簡(jiǎn)潔，但是你還是得應(yīng)用光影來增加用戶觸摸，滑動(dòng)，點(diǎn)擊的交互欲望。

優(yōu)雅的蘋果系統(tǒng)，半扁平化的風(fēng)格。

我寫這篇經(jīng)驗(yàn)分享的時(shí)候，谷歌已經(jīng)推出應(yīng)用了他們的新設(shè)計(jì)語言——Material Design。這種新語言給人統(tǒng)一的視覺感受，它旨在模仿現(xiàn)實(shí)世界的物理規(guī)律。

這里有一個(gè)官方Material Design使用指導(dǎo)手冊(cè)里的例子，它可以告訴我們?nèi)绾卫貌煌年幱皝肀憩F(xiàn)元素不同的深度。

這是我關(guān)注的最久的一個(gè)例子。

它用很輕的陰影來傳遞信息。關(guān)鍵詞：輕。

你不能說它不逼真，但是它也不是2006年的網(wǎng)頁設(shè)計(jì)風(fēng)格，它沒有質(zhì)感，沒有漸變，沒有光澤。

我認(rèn)為半扁平化風(fēng)格就是未來的趨勢(shì)，而扁平化已經(jīng)是過去式了。

這種扁平化風(fēng)格現(xiàn)在非常熱門

第二條：層次優(yōu)先

在最初的設(shè)計(jì)階段，只用黑白兩種顏色可以簡(jiǎn)化復(fù)雜的視覺元素，讓你的注意力集中在留白和元素的安排上。

用戶體驗(yàn)設(shè)計(jì)師們目前遵循“移動(dòng)端優(yōu)先”的設(shè)計(jì)理念，這意味著我們得思考如何在高分辨率屏幕上設(shè)計(jì)頁面互動(dòng)。

適當(dāng)?shù)囊?guī)則有助于簡(jiǎn)化思維。你面臨著棘手的問題（小屏App用戶），然后尋找方法來簡(jiǎn)化問題（大屏App用戶）。

現(xiàn)在有另外一個(gè)相似的規(guī)則：優(yōu)先考慮層次。一開始就考慮如何讓App變得美觀好用是很困難的，但是先考慮層次會(huì)讓問題變得簡(jiǎn)單。先考慮層次，最后添加顏色。

Haraldur Thorleifsson的灰度線框圖看起來和一些設(shè)計(jì)師的最終的網(wǎng)站效果圖一樣好。

這是讓你的App看起來簡(jiǎn)潔的既簡(jiǎn)單可操作性又強(qiáng)的方法。顏色太多，分散太廣只會(huì)讓你的頁面變得一團(tuán)糟。

讓頁面只有黑白兩色可以迫使你去關(guān)注你的留白、字體大小和布局，這些都是一個(gè)簡(jiǎn)潔的設(shè)計(jì)最起碼要考慮的。

這里有一些充分利用黑白關(guān)系的例子，它們的設(shè)計(jì)都有很明顯的風(fēng)格——運(yùn)動(dòng)、炫目、卡通，這都需要很深的配色功底。但是多數(shù)App只是簡(jiǎn)潔，沒有這些鮮明的特色。可毋庸置疑，這是很難達(dá)到的。

Julien Renvoye（下）和Cosmin Capitanu（上）炫目和生動(dòng)的設(shè)計(jì)，做起來很難。

最后剩下的，只有黑白。

第二步：添加顏色

最簡(jiǎn)單的就是只添加一種顏色

在灰度圖里增加一種顏色會(huì)非常抓人眼球。

你也可以在一開始就這樣做：給單一色調(diào)的灰度圖再加一種顏色甚至多種顏色。

配色寶典——首先，什么是色調(diào)？

眾所周知，網(wǎng)頁上使用的色彩遵循的是RGB顏色標(biāo)準(zhǔn)，但是有時(shí)忽略它是有益的，因?yàn)镽GB不是一個(gè)好的顏色設(shè)計(jì)標(biāo)準(zhǔn)。更有用的是HSB顏色標(biāo)準(zhǔn)（也稱作HSV或者HSL標(biāo)準(zhǔn)）。

HSB之所以優(yōu)于RGB是因?yàn)樗咏覀儗?duì)于自然的顏色的定義，而且你可以預(yù)測(cè)到HSB標(biāo)準(zhǔn)會(huì)對(duì)顏色有怎樣的影響。

如果你并不了解HSB，那么下面這個(gè)例子可以幫助你認(rèn)識(shí)它。

Smashing Magazine的金色（同一色相）主題

Smashing Magazine的藍(lán)色（同一色相）主題

通過改變藍(lán)色（色相不變）的飽和度和明度，你可以得到豐富的配色方案——暗部、亮部、背景、主色——但是它不能充滿你的頁面。

如果你想要讓你的元素得到強(qiáng)調(diào)和中立，同時(shí)不讓畫面變得凌亂，那么通過一到兩個(gè)基礎(chǔ)色相得到豐富的顏色是可行性最高的方法。

Julien Renvoye設(shè)計(jì)的定時(shí)器

一些關(guān)于顏色的小貼士

顏色是視覺設(shè)計(jì)里最復(fù)雜的部分。因?yàn)楝F(xiàn)在很多關(guān)于顏色的素材和資料對(duì)你來說在實(shí)際的工作過程中都沒什么太大用處，所以我把自己曾經(jīng)看到過的確實(shí)有用的素材和資料在這里與你分享。

一些小軟件：

Never Use Black（Ian Storm Taylor）：關(guān)于如何讓現(xiàn)實(shí)生活中不常見的灰色扁平，以及如何讓你的陰影變得豐富（尤其是你的深色投影），增加作品視覺豐富性。此外，它最有用的是能幫你豐富灰色，使之看起來更加真實(shí)。

Adobe Color CC：一個(gè)在尋找、豐富和創(chuàng)造配色方案方面最好用的工具。

Dribbble search-by-color：另外一個(gè)非常棒提取的特殊顏色工具。談到特殊，如果你已經(jīng)明確的使用一種顏色，那么來看看全球最棒的設(shè)計(jì)師們是怎樣呀使用這個(gè)顏色的吧。

第三條：充分留白

增加一些留白會(huì)讓界面看起來是用心設(shè)計(jì)過的。

在第二條中，我曾經(jīng)說過黑白會(huì)迫使設(shè)計(jì)師在配色之前充分考慮留白和布局，以優(yōu)化自己的設(shè)計(jì)。那么現(xiàn)在，是該談?wù)劻舭缀筒季值臅r(shí)候了。

如果你從頭編寫頁面的HTML，那么你會(huì)很熟悉這個(gè)HTML。這是一份設(shè)計(jì)稿沒有修飾的布局：

基本上，所有的元素在首屏上都是凌亂的。字體也很小，而且行與行之間完全沒有留白，雖然段落之間有空隙，但是完全不夠。這個(gè)頁面只是把信息擺在了上面，根本沒有設(shè)計(jì)感。

從美學(xué)上來說，這個(gè)設(shè)計(jì)非常糟糕。如果你想讓你的用戶界面看起來有設(shè)計(jì)感，你需要增加一些留白。

有時(shí)可能這一個(gè)荒謬的數(shù)值。

留白，HTML，CSS

如果你像我一樣習(xí)慣使用默認(rèn)的CSS——沒有留白，那么是時(shí)候改變一下這糟糕的習(xí)慣了。添加頁面元素的時(shí)候強(qiáng)迫自己關(guān)注留白，直到你可以下意識(shí)留白。

聽起來很難？我想這可能是因?yàn)槟氵€沒有完全理解。

從空白頁面開始的意思是不要添加任何內(nèi)容。開始的時(shí)候你可能下意識(shí)的就會(huì)考慮到邊界和右側(cè)留白，但其實(shí)你頁面里所有的元素都應(yīng)該是經(jīng)過仔細(xì)考慮所以才存在的。

使用一些沒有樣式的HTML就像在使用目錄。留白是事后產(chǎn)生的想法，這點(diǎn)必須明確。

Piotr Kwiatkowski設(shè)計(jì)的概念音樂播放器就是一個(gè)很好的例子。

關(guān)注一下左邊的菜單欄

菜單選項(xiàng)卡的行高是文本高度的兩倍，上下的填充和字體都是12像素。

再看一下它的列表樣式?！癙LAYLISTS”和它的下滑線之間有15像素的空白，這比它的大寫字母“P”還要高，而且它和上面的列表之間有25像素的空白。

頂部的導(dǎo)航欄有更多的空白?！癝earch all music”和旁邊的圖標(biāo)高度是導(dǎo)航欄的百分之二十。

左邊的側(cè)導(dǎo)航欄已經(jīng)向我們展示了文字與文字，菜單與菜單，文字與菜單之間的大幅留白。

Piotr在這里留了更多地空白，頗見成效。雖然在這個(gè)概念里他這樣安排只是因?yàn)橛腥ぃ▊€(gè)人觀點(diǎn)），但是，在界面美觀方面，它已經(jīng)足夠與最棒的音樂播放器界面媲美。

是的，大面積留白可以讓亂糟糟的界面看起來易于使用，就像forums。

Matt Sisto的概念設(shè)計(jì)——Forum

還有Wikipedia

Aurelien Salomon的概念設(shè)計(jì)——Wikipedia

你可以在這里發(fā)現(xiàn)充足的證據(jù)，看，Wikipedia的再設(shè)計(jì)省去了這個(gè)網(wǎng)站的關(guān)鍵功能，但是你不能說這不是一個(gè)好的學(xué)習(xí)方法。

在行與行之間增加空白

在元素之間增加空白

在組與組之間增加空白

分清主次

好了，圓滿完成這次的第一部分了，謝謝你們的閱讀。

在第二部分里，我將聊到剩下的4條規(guī)則：

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

5.使用多種文本樣式

6.選擇適合的字體

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