2014-11-26 藍(lán)藍(lán)設(shè)計的小編
藍(lán)藍(lán)設(shè)計( m.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供有效的 UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
來源：http://www.ui.cn/project.php?id=32954
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里
事先聲明，這篇入門文章不是為所有人準(zhǔn)備的，適用人員如下：
開發(fā)者：想為自己的作品設(shè)計優(yōu)質(zhì)界面卻不得法
用戶體驗(yàn)設(shè)計師：想讓自己的作品比大師級PPT更加美觀。或者是已經(jīng)發(fā)現(xiàn)熱銷產(chǎn)品的界面和體驗(yàn)總是完美結(jié)合的設(shè)計師。
如果你是一個藝術(shù)學(xué)校畢業(yè)生或者是一個成熟界面設(shè)計師，那么你很可能會覺得這篇入門文章無聊、錯漏百出，令人惱火。這沒關(guān)系，你所有的看法都是對的，那么就請點(diǎn)擊上方的“關(guān)閉頁面”吧。
讓我來告訴你你會在這篇文章中了解什么吧。
首先，我是一個沒有用戶界面設(shè)計技能的體驗(yàn)設(shè)計師。我熱愛我的職業(yè)，但是我并沒有很多工作經(jīng)驗(yàn)，因?yàn)槲乙郧安恢烂烙^界面的意義：
我有自己的理由：我不了解垃圾美學(xué)，因?yàn)槲覍９ビ诠こ虒W(xué)——難看的設(shè)計幾乎是它成功的標(biāo)志。
后來我同樣研究了一些看起來好看的APP，我從中得到了一些創(chuàng)造性的發(fā)現(xiàn)：完全的、理性的分析。然后不好意思的借鑒了一下。我曾經(jīng)在一個UI項(xiàng)目上花費(fèi)了十個小時，其中九個小時在瘋狂的學(xué)習(xí)，一個小時在制作——絕望的在谷歌、圖釘和追波上找到了可以借鑒的作品。
這些“規(guī)則”就是從那十個小時里學(xué)到的。
給菜鳥的良言：如果你在UI設(shè)計上不夠好，那是因?yàn)槟愀朴诜治觯皇窃诿篮推胶馍蠜]有天賦。
這篇文章不是理論，而是實(shí)踐。這里沒有黃金分割，也沒有配色寶典，只有我的一些經(jīng)驗(yàn)教訓(xùn)和一直以來的練習(xí)。
舉例來說，柔道因?yàn)槿毡旧形涞膫鹘y(tǒng)思想一直延續(xù)到現(xiàn)在?？墒菍W(xué)習(xí)柔道的時候，除了演練，你也會聽到關(guān)于力量、流派以及和睦這類的東西。
上個世紀(jì)三十年代，在（前）捷克斯洛伐克，一些同納粹斗爭的猶太人發(fā)明了近身格斗術(shù)。在這種不優(yōu)雅的格斗術(shù)課上，你會學(xué)到如何用一支鋼筆或者一本書來刺瞎敵人的眼睛。
UI是顯示屏上的近身格斗術(shù)。
下面來介紹設(shè)計優(yōu)雅UI的幾條準(zhǔn)則：
1.讓光影自然
2.層次優(yōu)先
3.充分留白
4.學(xué)習(xí)圖文堆疊
5.使用多種文本樣式
6.選擇適合的字體
7.像藝術(shù)家一樣尋找靈感
陰影是最自然的暗示，它可以突出我們想讓用戶注意到的界面元素。
“讓光影自然”——這可能是學(xué)習(xí)UI設(shè)計最重要卻最容易忽視的準(zhǔn)則。因?yàn)楣饪偸翘焐仙湎聛?，所以一旦它反著從下而上，我們就會覺得非常別扭。
當(dāng)光從天空中射下來，會照亮最上面的事物，并且向下投射出它們的影子。所以頂部最亮，而底部最暗。
你平常不會看到下眼瞼陰影很重的人，所以如果有人在臉的下方打光，然后站在你的門前，你肯定會被嚇個半死。
沒錯，這對UI來說也是一樣。在用戶界面中，所有的元素都有陰影和所有的元素都沒有陰影效果其實(shí)是一樣的。我們的屏幕是二維的，但是我們給元素加入了很多效果，讓它們看起來像是三維的。
我最喜歡這個按鈕被圈出來的右下方的部分
拿按鈕來說，就算是這種扁平化的按鈕也會有一些光影細(xì)節(jié)。
1.沒有按下去的按鈕（第一個），底邊有深色的投影。
2.第一個按鈕會有一個從上到下，從淺到深的漸變，這是因?yàn)樗谀７挛⑼沟男Ч?。就像你照鏡子的時候會把鏡子稍稍傾斜來采光，按鈕也是如此，表面的微凸會增加光澤質(zhì)感。
3.第一個按鈕的投影非常精致，放大看會更明顯。
4.按下狀態(tài)的按鈕雖然仍舊有從上到下，從淺到深的漸變，但是整體明度較低。這是因?yàn)楣庖话愫茈y到達(dá)向下凹陷的面。在現(xiàn)實(shí)生活中也是如此，因?yàn)槲覀冊诎聪掳粹o時手會擋住光。
這僅僅是一個按鈕，但是仍然會有四種光的微效果。我們可以通過下面這個例子來了解一下。
雖然iOS6的風(fēng)格已經(jīng)有點(diǎn)過時了，但是它在光的質(zhì)感表現(xiàn)方面做的非常好。
這是一對iOS6的設(shè)置按鈕——“請勿打擾”和“通知”。你是不是覺得這沒什么特別的？那我們現(xiàn)在來看看這兩個按鈕上有多少光影效果吧。
是一個分界線的細(xì)節(jié)圖，來自于我很早以前的“Hubster”概念。
大多數(shù)凹面感覺的元素：
文本輸入?yún)^(qū)域
下壓的按鈕
滑塊軌道
單選按鈕（不可恢復(fù)得）
復(fù)選框
大多數(shù)凸面感覺的元素：
按鈕（自然狀態(tài)）
滑塊按鈕
下拉控制菜單
選項(xiàng)卡
部分單選按鈕
彈出窗口
現(xiàn)在你了解了，以后就可以全面的賞析光影效果了?；镉媯?，不用太感謝我。
等等，扁平化設(shè)計的光影效果又是怎樣的呢？
iOS7因?yàn)椤氨馄交O(shè)計”轟動一時，正如其名，它的設(shè)計風(fēng)格就是“扁平”。它形狀沒有擬物化，也沒有刻意追求材料質(zhì)感，只是用了線條、形狀和純色塊來進(jìn)行設(shè)計。
盡管我非常喜歡簡潔風(fēng)，但是我并不認(rèn)為這種風(fēng)格能一直流行。反而在界面設(shè)計中，那種看起來很逼真的擬物化風(fēng)格是我們無法完全拋棄的。
更有可能的是，半扁平化的界面設(shè)計可能會在未來更受歡迎，與君共勉，希望你能在以后熟練掌握這種風(fēng)格。雖說要保持簡潔，但是你還是得應(yīng)用光影來增加用戶觸摸，滑動，點(diǎn)擊的交互欲望。
優(yōu)雅的蘋果系統(tǒng)，半扁平化的風(fēng)格。
我寫這篇經(jīng)驗(yàn)分享的時候，谷歌已經(jīng)推出應(yīng)用了他們的新設(shè)計語言——Material Design。這種新語言給人統(tǒng)一的視覺感受，它旨在模仿現(xiàn)實(shí)世界的物理規(guī)律。
這里有一個官方Material Design使用指導(dǎo)手冊里的例子，它可以告訴我們?nèi)绾卫貌煌年幱皝肀憩F(xiàn)元素不同的深度。
這是我關(guān)注的最久的一個例子。
它用很輕的陰影來傳遞信息。關(guān)鍵詞：輕。
你不能說它不逼真，但是它也不是2006年的網(wǎng)頁設(shè)計風(fēng)格，它沒有質(zhì)感，沒有漸變，沒有光澤。
我認(rèn)為半扁平化風(fēng)格就是未來的趨勢，而扁平化已經(jīng)是過去式了。
這種扁平化風(fēng)格現(xiàn)在非常熱門
在最初的設(shè)計階段，只用黑白兩種顏色可以簡化復(fù)雜的視覺元素，讓你的注意力集中在留白和元素的安排上。
用戶體驗(yàn)設(shè)計師們目前遵循“移動端優(yōu)先”的設(shè)計理念，這意味著我們得思考如何在高分辨率屏幕上設(shè)計頁面互動。
適當(dāng)?shù)囊?guī)則有助于簡化思維。你面臨著棘手的問題（小屏App用戶），然后尋找方法來簡化問題（大屏App用戶）。
現(xiàn)在有另外一個相似的規(guī)則：優(yōu)先考慮層次。一開始就考慮如何讓App變得美觀好用是很困難的，但是先考慮層次會讓問題變得簡單。先考慮層次，最后添加顏色。
Haraldur Thorleifsson的灰度線框圖看起來和一些設(shè)計師的最終的網(wǎng)站效果圖一樣好。
這是讓你的App看起來簡潔的既簡單可操作性又強(qiáng)的方法。顏色太多，分散太廣只會讓你的頁面變得一團(tuán)糟。
讓頁面只有黑白兩色可以迫使你去關(guān)注你的留白、字體大小和布局，這些都是一個簡潔的設(shè)計最起碼要考慮的。
這里有一些充分利用黑白關(guān)系的例子，它們的設(shè)計都有很明顯的風(fēng)格——運(yùn)動、炫目、卡通，這都需要很深的配色功底。但是多數(shù)App只是簡潔，沒有這些鮮明的特色。可毋庸置疑，這是很難達(dá)到的。
Julien Renvoye（下）和Cosmin Capitanu（上）炫目和生動的設(shè)計，做起來很難。
最后剩下的，只有黑白。
最簡單的就是只添加一種顏色
在灰度圖里增加一種顏色會非常抓人眼球。
你也可以在一開始就這樣做：給單一色調(diào)的灰度圖再加一種顏色甚至多種顏色。
配色寶典——首先，什么是色調(diào)？
眾所周知，網(wǎng)頁上使用的色彩遵循的是RGB顏色標(biāo)準(zhǔn)，但是有時忽略它是有益的，因?yàn)镽GB不是一個好的顏色設(shè)計標(biāo)準(zhǔn)。更有用的是HSB顏色標(biāo)準(zhǔn)（也稱作HSV或者HSL標(biāo)準(zhǔn)）。
HSB之所以優(yōu)于RGB是因?yàn)樗咏覀儗τ谧匀坏念伾亩x，而且你可以預(yù)測到HSB標(biāo)準(zhǔn)會對顏色有怎樣的影響。
如果你并不了解HSB，那么下面這個例子可以幫助你認(rèn)識它。
Smashing Magazine的金色（同一色相）主題
Smashing Magazine的藍(lán)色（同一色相）主題
通過改變藍(lán)色（色相不變）的飽和度和明度，你可以得到豐富的配色方案——暗部、亮部、背景、主色——但是它不能充滿你的頁面。
如果你想要讓你的元素得到強(qiáng)調(diào)和中立，同時不讓畫面變得凌亂，那么通過一到兩個基礎(chǔ)色相得到豐富的顏色是可行性最高的方法。
Julien Renvoye設(shè)計的定時器
一些關(guān)于顏色的小貼士
顏色是視覺設(shè)計里最復(fù)雜的部分。因?yàn)楝F(xiàn)在很多關(guān)于顏色的素材和資料對你來說在實(shí)際的工作過程中都沒什么太大用處，所以我把自己曾經(jīng)看到過的確實(shí)有用的素材和資料在這里與你分享。
一些小軟件：
Never Use Black（Ian Storm Taylor）：關(guān)于如何讓現(xiàn)實(shí)生活中不常見的灰色扁平，以及如何讓你的陰影變得豐富（尤其是你的深色投影），增加作品視覺豐富性。此外，它最有用的是能幫你豐富灰色，使之看起來更加真實(shí)。
Adobe Color CC：一個在尋找、豐富和創(chuàng)造配色方案方面最好用的工具。
Dribbble search-by-color：另外一個非常棒提取的特殊顏色工具。談到特殊，如果你已經(jīng)明確的使用一種顏色，那么來看看全球最棒的設(shè)計師們是怎樣呀使用這個顏色的吧。
增加一些留白會讓界面看起來是用心設(shè)計過的。
在第二條中，我曾經(jīng)說過黑白會迫使設(shè)計師在配色之前充分考慮留白和布局，以優(yōu)化自己的設(shè)計。那么現(xiàn)在，是該談?wù)劻舭缀筒季值臅r候了。
如果你從頭編寫頁面的HTML，那么你會很熟悉這個HTML。這是一份設(shè)計稿沒有修飾的布局：
基本上，所有的元素在首屏上都是凌亂的。字體也很小，而且行與行之間完全沒有留白，雖然段落之間有空隙，但是完全不夠。這個頁面只是把信息擺在了上面，根本沒有設(shè)計感。
從美學(xué)上來說，這個設(shè)計非常糟糕。如果你想讓你的用戶界面看起來有設(shè)計感，你需要增加一些留白。
有時可能這一個荒謬的數(shù)值。
留白，HTML，CSS
如果你像我一樣習(xí)慣使用默認(rèn)的CSS——沒有留白，那么是時候改變一下這糟糕的習(xí)慣了。添加頁面元素的時候強(qiáng)迫自己關(guān)注留白，直到你可以下意識留白。
聽起來很難？我想這可能是因?yàn)槟氵€沒有完全理解。
從空白頁面開始的意思是不要添加任何內(nèi)容。開始的時候你可能下意識的就會考慮到邊界和右側(cè)留白，但其實(shí)你頁面里所有的元素都應(yīng)該是經(jīng)過仔細(xì)考慮所以才存在的。
使用一些沒有樣式的HTML就像在使用目錄。留白是事后產(chǎn)生的想法，這點(diǎn)必須明確。
Piotr Kwiatkowski設(shè)計的概念音樂播放器就是一個很好的例子。
關(guān)注一下左邊的菜單欄
菜單選項(xiàng)卡的行高是文本高度的兩倍，上下的填充和字體都是12像素。
再看一下它的列表樣式?！癙LAYLISTS”和它的下滑線之間有15像素的空白，這比它的大寫字母“P”還要高，而且它和上面的列表之間有25像素的空白。
頂部的導(dǎo)航欄有更多的空白?！癝earch all music”和旁邊的圖標(biāo)高度是導(dǎo)航欄的百分之二十。
左邊的側(cè)導(dǎo)航欄已經(jīng)向我們展示了文字與文字，菜單與菜單，文字與菜單之間的大幅留白。
Piotr在這里留了更多地空白，頗見成效。雖然在這個概念里他這樣安排只是因?yàn)橛腥ぃ▊€人觀點(diǎn)），但是，在界面美觀方面，它已經(jīng)足夠與最棒的音樂播放器界面媲美。
是的，大面積留白可以讓亂糟糟的界面看起來易于使用，就像forums。
Matt Sisto的概念設(shè)計——Forum
還有Wikipedia
Aurelien Salomon的概念設(shè)計——Wikipedia
你可以在這里發(fā)現(xiàn)充足的證據(jù)，看，Wikipedia的再設(shè)計省去了這個網(wǎng)站的關(guān)鍵功能，但是你不能說這不是一個好的學(xué)習(xí)方法。
在行與行之間增加空白
在元素之間增加空白
在組與組之間增加空白
分清主次
好了，圓滿完成這次的第一部分了，謝謝你們的閱讀。
在第二部分里，我將聊到剩下的4條規(guī)則：
4.學(xué)習(xí)圖文堆疊
5.使用多種文本樣式
6.選擇適合的字體
7.像藝術(shù)家一樣尋找靈感
藍(lán)藍(lán)設(shè)計的小編 http://m.bouu.cn