2014-11-26 藍(lán)藍(lán)設(shè)計的小編
藍(lán)藍(lán)設(shè)計( yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供有效的 UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
來源：http://www.ui.cn/project.php?id=32954
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
事先聲明，這篇入門文章不是為所有人準(zhǔn)備的，適用人員如下：
開發(fā)者：想為自己的作品設(shè)計優(yōu)質(zhì)界面卻不得法
用戶體驗設(shè)計師：想讓自己的作品比大師級PPT更加美觀。或者是已經(jīng)發(fā)現(xiàn)熱銷產(chǎn)品的界面和體驗總是完美結(jié)合的設(shè)計師。
如果你是一個藝術(shù)學(xué)校畢業(yè)生或者是一個成熟界面設(shè)計師，那么你很可能會覺得這篇入門文章無聊、錯漏百出，令人惱火。這沒關(guān)系，你所有的看法都是對的，那么就請點擊上方的“關(guān)閉頁面”吧。
讓我來告訴你你會在這篇文章中了解什么吧。
首先，我是一個沒有用戶界面設(shè)計技能的體驗設(shè)計師。我熱愛我的職業(yè)，但是我并沒有很多工作經(jīng)驗，因為我以前不知道美觀界面的意義：
我有自己的理由：我不了解垃圾美學(xué)，因為我專攻于工程學(xué)——難看的設(shè)計幾乎是它成功的標(biāo)志。
后來我同樣研究了一些看起來好看的APP，我從中得到了一些創(chuàng)造性的發(fā)現(xiàn)：完全的、理性的分析。然后不好意思的借鑒了一下。我曾經(jīng)在一個UI項目上花費(fèi)了十個小時，其中九個小時在瘋狂的學(xué)習(xí)，一個小時在制作——絕望的在谷歌、圖釘和追波上找到了可以借鑒的作品。
這些“規(guī)則”就是從那十個小時里學(xué)到的。
給菜鳥的良言：如果你在UI設(shè)計上不夠好，那是因為你更善于分析，而不是在美和平衡上沒有天賦。
這篇文章不是理論，而是實踐。這里沒有黃金分割，也沒有配色寶典，只有我的一些經(jīng)驗教訓(xùn)和一直以來的練習(xí)。
舉例來說，柔道因為日本尚武的傳統(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)則。因為光總是天上射下來，所以一旦它反著從下而上，我們就會覺得非常別扭。
當(dāng)光從天空中射下來，會照亮最上面的事物，并且向下投射出它們的影子。所以頂部最亮，而底部最暗。
你平常不會看到下眼瞼陰影很重的人，所以如果有人在臉的下方打光，然后站在你的門前，你肯定會被嚇個半死。
沒錯，這對UI來說也是一樣。在用戶界面中，所有的元素都有陰影和所有的元素都沒有陰影效果其實是一樣的。我們的屏幕是二維的，但是我們給元素加入了很多效果，讓它們看起來像是三維的。
我最喜歡這個按鈕被圈出來的右下方的部分
拿按鈕來說，就算是這種扁平化的按鈕也會有一些光影細(xì)節(jié)。
1.沒有按下去的按鈕（第一個），底邊有深色的投影。
2.第一個按鈕會有一個從上到下，從淺到深的漸變，這是因為它在模仿微凸的效果。就像你照鏡子的時候會把鏡子稍稍傾斜來采光，按鈕也是如此，表面的微凸會增加光澤質(zhì)感。
3.第一個按鈕的投影非常精致，放大看會更明顯。
4.按下狀態(tài)的按鈕雖然仍舊有從上到下，從淺到深的漸變，但是整體明度較低。這是因為光一般很難到達(dá)向下凹陷的面。在現(xiàn)實生活中也是如此，因為我們在按下按鈕時手會擋住光。
這僅僅是一個按鈕，但是仍然會有四種光的微效果。我們可以通過下面這個例子來了解一下。
雖然iOS6的風(fēng)格已經(jīng)有點過時了，但是它在光的質(zhì)感表現(xiàn)方面做的非常好。
這是一對iOS6的設(shè)置按鈕——“請勿打擾”和“通知”。你是不是覺得這沒什么特別的？那我們現(xiàn)在來看看這兩個按鈕上有多少光影效果吧。
是一個分界線的細(xì)節(jié)圖，來自于我很早以前的“Hubster”概念。
大多數(shù)凹面感覺的元素：
文本輸入?yún)^(qū)域
下壓的按鈕
滑塊軌道
單選按鈕（不可恢復(fù)得）
復(fù)選框
大多數(shù)凸面感覺的元素：
按鈕（自然狀態(tài)）
滑塊按鈕
下拉控制菜單
選項卡
部分單選按鈕
彈出窗口
現(xiàn)在你了解了，以后就可以全面的賞析光影效果了?；镉媯?，不用太感謝我。
等等，扁平化設(shè)計的光影效果又是怎樣的呢？
iOS7因為“扁平化設(shè)計”轟動一時，正如其名，它的設(shè)計風(fēng)格就是“扁平”。它形狀沒有擬物化，也沒有刻意追求材料質(zhì)感，只是用了線條、形狀和純色塊來進(jìn)行設(shè)計。
盡管我非常喜歡簡潔風(fēng)，但是我并不認(rèn)為這種風(fēng)格能一直流行。反而在界面設(shè)計中，那種看起來很逼真的擬物化風(fēng)格是我們無法完全拋棄的。
更有可能的是，半扁平化的界面設(shè)計可能會在未來更受歡迎，與君共勉，希望你能在以后熟練掌握這種風(fēng)格。雖說要保持簡潔，但是你還是得應(yīng)用光影來增加用戶觸摸，滑動，點擊的交互欲望。
優(yōu)雅的蘋果系統(tǒng)，半扁平化的風(fēng)格。
我寫這篇經(jīng)驗分享的時候，谷歌已經(jīng)推出應(yīng)用了他們的新設(shè)計語言——Material Design。這種新語言給人統(tǒng)一的視覺感受，它旨在模仿現(xiàn)實世界的物理規(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ù)雜的視覺元素，讓你的注意力集中在留白和元素的安排上。
用戶體驗設(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)，但是有時忽略它是有益的，因為RGB不是一個好的顏色設(shè)計標(biāo)準(zhǔn)。更有用的是HSB顏色標(biāo)準(zhǔn)（也稱作HSV或者HSL標(biāo)準(zhǔn)）。
HSB之所以優(yōu)于RGB是因為它更接近我們對于自然的顏色的定義，而且你可以預(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ù)雜的部分。因為現(xiàn)在很多關(guān)于顏色的素材和資料對你來說在實際的工作過程中都沒什么太大用處，所以我把自己曾經(jīng)看到過的確實有用的素材和資料在這里與你分享。
一些小軟件：
Never Use Black（Ian Storm Taylor）：關(guān)于如何讓現(xiàn)實生活中不常見的灰色扁平，以及如何讓你的陰影變得豐富（尤其是你的深色投影），增加作品視覺豐富性。此外，它最有用的是能幫你豐富灰色，使之看起來更加真實。
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)注留白，直到你可以下意識留白。
聽起來很難？我想這可能是因為你還沒有完全理解。
從空白頁面開始的意思是不要添加任何內(nèi)容。開始的時候你可能下意識的就會考慮到邊界和右側(cè)留白，但其實你頁面里所有的元素都應(yīng)該是經(jīng)過仔細(xì)考慮所以才存在的。
使用一些沒有樣式的HTML就像在使用目錄。留白是事后產(chǎn)生的想法，這點必須明確。
Piotr Kwiatkowski設(shè)計的概念音樂播放器就是一個很好的例子。
關(guān)注一下左邊的菜單欄
菜單選項卡的行高是文本高度的兩倍，上下的填充和字體都是12像素。
再看一下它的列表樣式?！癙LAYLISTS”和它的下滑線之間有15像素的空白，這比它的大寫字母“P”還要高，而且它和上面的列表之間有25像素的空白。
頂部的導(dǎo)航欄有更多的空白?！癝earch all music”和旁邊的圖標(biāo)高度是導(dǎo)航欄的百分之二十。
左邊的側(cè)導(dǎo)航欄已經(jīng)向我們展示了文字與文字，菜單與菜單，文字與菜單之間的大幅留白。
Piotr在這里留了更多地空白，頗見成效。雖然在這個概念里他這樣安排只是因為有趣（個人觀點），但是，在界面美觀方面，它已經(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://yvirxh.cn