界面設(shè)計(jì)包括哪些細(xì)節(jié)、如何深入？
我們常說“細(xì)節(jié)決定成敗”，有些界面設(shè)計(jì)會(huì)讓人覺得不精致，缺細(xì)節(jié)，而這些細(xì)節(jié)又包括哪些呢？如何去深入呢？那么藍(lán)藍(lán)設(shè)計(jì)和朋友們分享一些界面設(shè)計(jì)中需要注意的小細(xì)節(jié)，希望對(duì)UI設(shè)計(jì)師有所幫助！

• 界面元素的對(duì)齊，我見過很多同學(xué)對(duì)齊是永遠(yuǎn)靠眼睛的。確實(shí)在布局的時(shí)候經(jīng)常需要做到視覺上的對(duì)齊，而不是機(jī)械的對(duì)齊，但這不是界面元素可以隨意擺放的借口，該對(duì)齊的內(nèi)容需要對(duì)齊，有時(shí)候只是舉手之勞，養(yǎng)成好習(xí)慣很重要，有點(diǎn)強(qiáng)迫癥也不是壞事情。
• 像素，雖然現(xiàn)在的分辨率越來越高，但是很多圖標(biāo)、按鈕的邊緣還是最好都檢查一遍保證垂直和水平邊緣不會(huì)被虛化。
• 界面光源的一致性，一致性是個(gè)很大的課題，應(yīng)該能寫一篇論文那么長，細(xì)節(jié)方面的一致性應(yīng)該包括界面元素、文字陰影、圖標(biāo)等的光源。假設(shè)深色的標(biāo)題文字用了向下的淡色投影表現(xiàn)內(nèi)凹效果，那正文就應(yīng)該避免用深色的文字向上投深色的陰影
• 圖標(biāo)面積的一致性，這也是一個(gè)一直難以避免的問題，而且有很多主觀成分，最好的方法是設(shè)計(jì)的時(shí)候放到實(shí)際屏幕上以較遠(yuǎn)的距離查看，是不是有哪些會(huì)特別輕或特別重，然后再去調(diào)整尺寸
• 文案，雖然這不是直接的界面設(shè)計(jì)元素，但是嚴(yán)謹(jǐn)、完整的文案也是給所有設(shè)計(jì)加分的。常見的問題有中文錯(cuò)別字、英文該大寫的沒大寫、拼寫錯(cuò)誤等等
• 別直接使用 Windows 自帶宋體 / 黑體里的英文?。?！這個(gè)不解釋
• 謹(jǐn)慎地使用高飽和度顏色、大差別漸變，我們 GUI設(shè)計(jì)師總喜歡把自己當(dāng)做藝術(shù)家，即使 GUI真算藝術(shù)那也是限制最大的一門藝術(shù)（天朝的電影、電視劇不算。。。），大家大部分情況下遇到的設(shè)計(jì)場(chǎng)景沒有非常大的顏色空間去發(fā)揮，所以一些醒目出跳的顏 色和漸變使用起來要比較小心，否則很容易產(chǎn)生“俗氣”的感覺

UI（用戶界面設(shè)計(jì)）與UX（用戶體驗(yàn)）是密切聯(lián)系的，優(yōu)秀的UI界面設(shè)計(jì)首先就能從視覺上給用戶極好的體驗(yàn)，今天藍(lán)藍(lán)設(shè)計(jì)從Drrible和Behance上挑選了20套用戶體驗(yàn)超棒的UI界面設(shè)計(jì)，包括了睡眠APP、天氣APP等等，還有對(duì)Facebook、Instagram、Ebay等應(yīng)用的扁平化再設(shè)計(jì)，都非常棒呦！如果你正在設(shè)計(jì)UI界面，那么可得好好借鑒學(xué)習(xí)一下，希望能給你帶來靈感 : ）

1. Graph screen

　　時(shí)光飛逝，轉(zhuǎn)眼到了2014年，那么在2014年界面設(shè)計(jì)將會(huì)有怎樣的發(fā)展與變革呢？我試圖預(yù)測(cè)一下。交互/界面設(shè)計(jì)伴隨移動(dòng)互聯(lián)網(wǎng)一直保持著告訴的發(fā)展，每一年，都有新的東西出現(xiàn)，真令人振奮。

用戶界面設(shè)計(jì)元素是現(xiàn)在的熱門焦點(diǎn)，我們很多設(shè)計(jì)師的工作已經(jīng)和它息息相關(guān)。那么，如何提高UI設(shè)計(jì)水平呢？提高ui設(shè)計(jì)服務(wù)能力？這也是一個(gè)永恒的話題，值得探索、值得鉆研。而今天要和您聊聊的是在用戶界面組件中，存在與網(wǎng)站和移動(dòng)應(yīng)用程序的切換開關(guān)ui設(shè)計(jì)，是不是很有價(jià)值的話題呢？設(shè)計(jì)師通常試圖優(yōu)雅或吸引力的去設(shè)計(jì)各種形狀、尺寸和主題來詮釋自己對(duì)切換開關(guān)ui設(shè)計(jì)的理解。今天藍(lán)藍(lán)設(shè)計(jì)展示在下面的圖片，都是附帶psd源文件的，戳鏈接即可。這意味著，這些文件是完全可編輯的。你可以自由修改顏色或二次創(chuàng)新這些開關(guān)，直到在你的設(shè)計(jì)里看上去漂亮和諧。
這里有28個(gè)免費(fèi)的PSD切換開關(guān)下載，就讓這些切換開關(guān)替代那些過時(shí)的、無聊的復(fù)選框吧。你還在等什么呢？開始啟程吧：）

Toggle Switch PSD

作為一款足夠吸引人的app，驚艷的UI和優(yōu)秀的功能是基本條件，但若有獨(dú)特的動(dòng)畫與轉(zhuǎn)場(chǎng)效果，則可以大大的增加用戶使用的粘性，稱霸整個(gè)應(yīng)用平臺(tái)。具備了良好體驗(yàn)效果的同時(shí)，有這樣一個(gè)意料之外的效果，不但會(huì)給用戶帶來驚喜，更會(huì)讓人情不自禁的愛上它。

2012年我們看到有不斷的熱門app得到細(xì)化，而一些大公司也最終意識(shí)到良好的UI對(duì)于一個(gè)app的重要性。在過去的一年里，Android應(yīng)用程序已經(jīng)得到了很大的改善，iOS則把設(shè)計(jì)范圍越推越廣。這里是一些beautifulpixels.com認(rèn)為在2012年中一些脫穎而出的UI動(dòng)畫。雖然視頻演示提供了大致的預(yù)覽，但相信如果你在手機(jī)中親自體驗(yàn)更能發(fā)現(xiàn)它們的魅力之處。

Google+ Animation

當(dāng)Google+開始公測(cè)時(shí)，每個(gè)人都想第一個(gè)嘗鮮。然而，在Android系統(tǒng)和其他移動(dòng)應(yīng)用平臺(tái)上因缺少一個(gè)良好的app，而使得很多人因此望而卻步。Google努力優(yōu)化他們?cè)趇OS平臺(tái)推出的游戲，值得一提的是它們最近發(fā)布的app也讓人眼前一亮。

而這款Google+iOS應(yīng)用程序也顛覆了以往的設(shè)計(jì)，或許會(huì)讓你愛不釋手。其中有很多獨(dú)特的動(dòng)畫設(shè)計(jì)，比如，下拉刷新（pull to refresh）。當(dāng)用戶下拉時(shí)，會(huì)出現(xiàn)4個(gè)不同顏色的彩帶從左至右，有節(jié)奏的從暗變亮，并拉長。同樣有趣的是，當(dāng)你滾動(dòng)到底部時(shí)，載入的新內(nèi)容同樣會(huì)出現(xiàn)。從這樣的小細(xì)節(jié)中，我們看到Google的確在app的設(shè)計(jì)上注入了很多精力。就為了它的動(dòng)畫，你就值得在iOS系統(tǒng)的設(shè)備上下載Google+這個(gè)程序！

「Loading」是經(jīng)常在APP以及游戲中見到的，因?yàn)樾枰脩舻却?，為了避免用戶在等待的過程中退出，通常輔以進(jìn)度條告知用戶大概還有多久，但等待總是讓人不耐煩的，所以一些設(shè)計(jì)師試圖用更人性化的方式來表現(xiàn)進(jìn)度，他們將進(jìn)度條設(shè)計(jì)成各種極具創(chuàng)意與美觀的形態(tài)，讓人們更樂意欣賞進(jìn)度條的滾動(dòng)。花瓣網(wǎng)設(shè)計(jì)師漢斯戴爾收集了上百張進(jìn)度條設(shè)計(jì)圖，我們從中精選了10種進(jìn)度條設(shè)計(jì)。