2014-11-26 藍(lán)藍(lán)設(shè)計(jì)的小編
藍(lán)藍(lán)設(shè)計(jì)( www.alimai.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)
來(lái)源：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ì)覺得這篇入門文章無(wú)聊、錯(cuò)漏百出，令人惱火。這沒關(guān)系，你所有的看法都是對(duì)的，那么就請(qǐng)點(diǎn)擊上方的“關(guān)閉頁(yè)面”吧。
讓我來(lái)告訴你你會(huì)在這篇文章中了解什么吧。
首先，我是一個(gè)沒有用戶界面設(shè)計(jì)技能的體驗(yàn)設(shè)計(jì)師。我熱愛我的職業(yè)，但是我并沒有很多工作經(jīng)驗(yàn)，因?yàn)槲乙郧安恢烂烙^界面的意義：
我有自己的理由：我不了解垃圾美學(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é)到的。
給菜鳥的良言：如果你在UI設(shè)計(jì)上不夠好，那是因?yàn)槟愀朴诜治?，而不是在美和平衡上沒有天賦。
這篇文章不是理論，而是實(shí)踐。這里沒有黃金分割，也沒有配色寶典，只有我的一些經(jīng)驗(yàn)教訓(xùn)和一直以來(lái)的練習(xí)。
舉例來(lái)說(shuō)，柔道因?yàn)槿毡旧形涞膫鹘y(tǒng)思想一直延續(xù)到現(xiàn)在。可是學(xué)習(xí)柔道的時(shí)候，除了演練，你也會(huì)聽到關(guān)于力量、流派以及和睦這類的東西。
上個(gè)世紀(jì)三十年代，在（前）捷克斯洛伐克，一些同納粹斗爭(zhēng)的猶太人發(fā)明了近身格斗術(shù)。在這種不優(yōu)雅的格斗術(shù)課上，你會(huì)學(xué)到如何用一支鋼筆或者一本書來(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ì)覺得非常別扭。
當(dāng)光從天空中射下來(lái)，會(huì)照亮最上面的事物，并且向下投射出它們的影子。所以頂部最亮，而底部最暗。
你平常不會(huì)看到下眼瞼陰影很重的人，所以如果有人在臉的下方打光，然后站在你的門前，你肯定會(huì)被嚇個(gè)半死。
沒錯(cuò)，這對(duì)UI來(lái)說(shuō)也是一樣。在用戶界面中，所有的元素都有陰影和所有的元素都沒有陰影效果其實(shí)是一樣的。我們的屏幕是二維的，但是我們給元素加入了很多效果，讓它們看起來(lái)像是三維的。
我最喜歡這個(gè)按鈕被圈出來(lái)的右下方的部分
拿按鈕來(lái)說(shuō)，就算是這種扁平化的按鈕也會(huì)有一些光影細(xì)節(jié)。
1.沒有按下去的按鈕（第一個(gè)），底邊有深色的投影。
2.第一個(gè)按鈕會(huì)有一個(gè)從上到下，從淺到深的漸變，這是因?yàn)樗谀７挛⑼沟男Ч?。就像你照鏡子的時(shí)候會(huì)把鏡子稍稍傾斜來(lái)采光，按鈕也是如此，表面的微凸會(huì)增加光澤質(zhì)感。
3.第一個(gè)按鈕的投影非常精致，放大看會(huì)更明顯。
4.按下狀態(tài)的按鈕雖然仍舊有從上到下，從淺到深的漸變，但是整體明度較低。這是因?yàn)楣庖话愫茈y到達(dá)向下凹陷的面。在現(xiàn)實(shí)生活中也是如此，因?yàn)槲覀冊(cè)诎聪掳粹o時(shí)手會(huì)擋住光。
這僅僅是一個(gè)按鈕，但是仍然會(huì)有四種光的微效果。我們可以通過下面這個(gè)例子來(lái)了解一下。
雖然iOS6的風(fēng)格已經(jīng)有點(diǎn)過時(shí)了，但是它在光的質(zhì)感表現(xiàn)方面做的非常好。
這是一對(duì)iOS6的設(shè)置按鈕——“請(qǐng)勿打擾”和“通知”。你是不是覺得這沒什么特別的？那我們現(xiàn)在來(lái)看看這兩個(gè)按鈕上有多少光影效果吧。
是一個(gè)分界線的細(xì)節(jié)圖，來(lái)自于我很早以前的“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ì)感，只是用了線條、形狀和純色塊來(lái)進(jìn)行設(shè)計(jì)。
盡管我非常喜歡簡(jiǎn)潔風(fēng)，但是我并不認(rèn)為這種風(fēng)格能一直流行。反而在界面設(shè)計(jì)中，那種看起來(lái)很逼真的擬物化風(fēng)格是我們無(wú)法完全拋棄的。
更有可能的是，半扁平化的界面設(shè)計(jì)可能會(huì)在未來(lái)更受歡迎，與君共勉，希望你能在以后熟練掌握這種風(fēng)格。雖說(shuō)要保持簡(jiǎn)潔，但是你還是得應(yīng)用光影來(lái)增加用戶觸摸，滑動(dòng)，點(diǎn)擊的交互欲望。
優(yōu)雅的蘋果系統(tǒng)，半扁平化的風(fēng)格。
我寫這篇經(jīng)驗(yàn)分享的時(shí)候，谷歌已經(jīng)推出應(yīng)用了他們的新設(shè)計(jì)語(yǔ)言——Material Design。這種新語(yǔ)言給人統(tǒng)一的視覺感受，它旨在模仿現(xiàn)實(shí)世界的物理規(guī)律。
這里有一個(gè)官方Material Design使用指導(dǎo)手冊(cè)里的例子，它可以告訴我們?nèi)绾卫貌煌年幱皝?lái)表現(xiàn)元素不同的深度。
這是我關(guān)注的最久的一個(gè)例子。
它用很輕的陰影來(lái)傳遞信息。關(guān)鍵詞：輕。
你不能說(shuō)它不逼真，但是它也不是2006年的網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格，它沒有質(zhì)感，沒有漸變，沒有光澤。
我認(rèn)為半扁平化風(fēng)格就是未來(lái)的趨勢(shì)，而扁平化已經(jīng)是過去式了。
這種扁平化風(fēng)格現(xiàn)在非常熱門
在最初的設(shè)計(jì)階段，只用黑白兩種顏色可以簡(jiǎn)化復(fù)雜的視覺元素，讓你的注意力集中在留白和元素的安排上。
用戶體驗(yàn)設(shè)計(jì)師們目前遵循“移動(dòng)端優(yōu)先”的設(shè)計(jì)理念，這意味著我們得思考如何在高分辨率屏幕上設(shè)計(jì)頁(yè)面互動(dòng)。
適當(dāng)?shù)囊?guī)則有助于簡(jiǎn)化思維。你面臨著棘手的問題（小屏App用戶），然后尋找方法來(lái)簡(jiǎn)化問題（大屏App用戶）。
現(xiàn)在有另外一個(gè)相似的規(guī)則：優(yōu)先考慮層次。一開始就考慮如何讓App變得美觀好用是很困難的，但是先考慮層次會(huì)讓問題變得簡(jiǎn)單。先考慮層次，最后添加顏色。
Haraldur Thorleifsson的灰度線框圖看起來(lái)和一些設(shè)計(jì)師的最終的網(wǎng)站效果圖一樣好。
這是讓你的App看起來(lái)簡(jiǎn)潔的既簡(jiǎn)單可操作性又強(qiáng)的方法。顏色太多，分散太廣只會(huì)讓你的頁(yè)面變得一團(tuán)糟。
讓頁(yè)面只有黑白兩色可以迫使你去關(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ì)，做起來(lái)很難。
最后剩下的，只有黑白。
最簡(jiǎn)單的就是只添加一種顏色
在灰度圖里增加一種顏色會(huì)非常抓人眼球。
你也可以在一開始就這樣做：給單一色調(diào)的灰度圖再加一種顏色甚至多種顏色。
配色寶典——首先，什么是色調(diào)？
眾所周知，網(wǎng)頁(yè)上使用的色彩遵循的是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)色（色相不變）的飽和度和明度，你可以得到豐富的配色方案——暗部、亮部、背景、主色——但是它不能充滿你的頁(yè)面。
如果你想要讓你的元素得到強(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ì)你來(lái)說(shuō)在實(shí)際的工作過程中都沒什么太大用處，所以我把自己曾經(jīng)看到過的確實(shí)有用的素材和資料在這里與你分享。
一些小軟件：
Never Use Black（Ian Storm Taylor）：關(guān)于如何讓現(xiàn)實(shí)生活中不常見的灰色扁平，以及如何讓你的陰影變得豐富（尤其是你的深色投影），增加作品視覺豐富性。此外，它最有用的是能幫你豐富灰色，使之看起來(lái)更加真實(shí)。
Adobe Color CC：一個(gè)在尋找、豐富和創(chuàng)造配色方案方面最好用的工具。
Dribbble search-by-color：另外一個(gè)非常棒提取的特殊顏色工具。談到特殊，如果你已經(jīng)明確的使用一種顏色，那么來(lái)看看全球最棒的設(shè)計(jì)師們是怎樣呀使用這個(gè)顏色的吧。
增加一些留白會(huì)讓界面看起來(lái)是用心設(shè)計(jì)過的。
在第二條中，我曾經(jīng)說(shuō)過黑白會(huì)迫使設(shè)計(jì)師在配色之前充分考慮留白和布局，以優(yōu)化自己的設(shè)計(jì)。那么現(xiàn)在，是該談?wù)劻舭缀筒季值臅r(shí)候了。
如果你從頭編寫頁(yè)面的HTML，那么你會(huì)很熟悉這個(gè)HTML。這是一份設(shè)計(jì)稿沒有修飾的布局：
基本上，所有的元素在首屏上都是凌亂的。字體也很小，而且行與行之間完全沒有留白，雖然段落之間有空隙，但是完全不夠。這個(gè)頁(yè)面只是把信息擺在了上面，根本沒有設(shè)計(jì)感。
從美學(xué)上來(lái)說(shuō)，這個(gè)設(shè)計(jì)非常糟糕。如果你想讓你的用戶界面看起來(lái)有設(shè)計(jì)感，你需要增加一些留白。
有時(shí)可能這一個(gè)荒謬的數(shù)值。
留白，HTML，CSS
如果你像我一樣習(xí)慣使用默認(rèn)的CSS——沒有留白，那么是時(shí)候改變一下這糟糕的習(xí)慣了。添加頁(yè)面元素的時(shí)候強(qiáng)迫自己關(guān)注留白，直到你可以下意識(shí)留白。
聽起來(lái)很難？我想這可能是因?yàn)槟氵€沒有完全理解。
從空白頁(yè)面開始的意思是不要添加任何內(nèi)容。開始的時(shí)候你可能下意識(shí)的就會(huì)考慮到邊界和右側(cè)留白，但其實(shí)你頁(yè)面里所有的元素都應(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)航欄有更多的空白。“Search all music”和旁邊的圖標(biāo)高度是導(dǎo)航欄的百分之二十。
左邊的側(cè)導(dǎo)航欄已經(jīng)向我們展示了文字與文字，菜單與菜單，文字與菜單之間的大幅留白。
Piotr在這里留了更多地空白，頗見成效。雖然在這個(gè)概念里他這樣安排只是因?yàn)橛腥ぃ▊€(gè)人觀點(diǎn)），但是，在界面美觀方面，它已經(jīng)足夠與最棒的音樂播放器界面媲美。
是的，大面積留白可以讓亂糟糟的界面看起來(lái)易于使用，就像forums。
Matt Sisto的概念設(shè)計(jì)——Forum
還有Wikipedia
Aurelien Salomon的概念設(shè)計(jì)——Wikipedia
你可以在這里發(fā)現(xiàn)充足的證據(jù)，看，Wikipedia的再設(shè)計(jì)省去了這個(gè)網(wǎng)站的關(guān)鍵功能，但是你不能說(shuō)這不是一個(gè)好的學(xué)習(xí)方法。
在行與行之間增加空白
在元素之間增加空白
在組與組之間增加空白
分清主次
好了，圓滿完成這次的第一部分了，謝謝你們的閱讀。
在第二部分里，我將聊到剩下的4條規(guī)則：
4.學(xué)習(xí)圖文堆疊
5.使用多種文本樣式
6.選擇適合的字體
7.像藝術(shù)家一樣尋找靈感
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.alimai.net