你有沒有經(jīng)歷過看到一個(gè)頁面的時(shí)候馬上就被它的界面設(shè)計(jì)吸引并且留下了深刻的印象呢？然后你進(jìn)一步細(xì)看這個(gè)頁面發(fā)現(xiàn)真正使這個(gè)頁面變得神奇的是一些小細(xì)節(jié)，在藍(lán)藍(lán)設(shè)計(jì)這篇文章中我們將看到幾種把細(xì)節(jié)設(shè)計(jì)做到完美的頁面。

完美的像素線

Image Spark 的UI設(shè)計(jì)師用一個(gè)像素的線條來分割頂部導(dǎo)航，搜索輸入框，導(dǎo)航底欄。任何時(shí)候一個(gè)較淺的顏色緊挨著一個(gè)較深的顏色會使人出現(xiàn)有一個(gè)凸起的邊緣的錯(cuò)覺。請注意這種線條只能比背景色稍微淺一點(diǎn)點(diǎn)。如果使用一條白線那將失去這種效果。

我們都知道，好的界面設(shè)計(jì)需要UI設(shè)計(jì)師技巧高超、創(chuàng)意與眾不同。在任何設(shè)計(jì)中，設(shè)計(jì)技巧，也就是設(shè)計(jì)基本功是排在第一位的，然而還有很多其他技巧性的東西也不容忽視，比如說細(xì)節(jié)。對于設(shè)計(jì)師來說，細(xì)節(jié)太致命了，設(shè)計(jì)師必須高度關(guān)注細(xì)節(jié)，仔細(xì)推敲，盡可能的追求完美。
 
在這里，”對細(xì)節(jié)的把握”（關(guān)注細(xì)節(jié)）也是設(shè)計(jì)上的一種能力和技巧。盡管不是每個(gè)用戶都是一絲不茍、認(rèn)真檢查設(shè)計(jì)中的細(xì)節(jié)，但UI設(shè)計(jì)師必須認(rèn)真對待每一個(gè)環(huán)節(jié)。無論是前期準(zhǔn)備，還是界面設(shè)計(jì)流程，以及后期的客戶交流，這些方面都要高度留心細(xì)節(jié)。有心的設(shè)計(jì)師會留意客戶說的每一句話，會分析出客戶真正的需求，會從中找到指引和線索，這樣在設(shè)計(jì)時(shí)，就很少出錯(cuò)。因此，細(xì)節(jié)不僅僅是在設(shè)計(jì)上的，要面面俱到。

一、何為”關(guān)注細(xì)節(jié)的設(shè)計(jì)技巧”?

你瀏覽一款網(wǎng)站時(shí)，一般會迅速的對網(wǎng)站設(shè)計(jì)的外觀和使用感受做個(gè)評判，整體的界面設(shè)計(jì)風(fēng)格是第一印象，能否引導(dǎo)用戶繼續(xù)閱讀取決于此。

金玉其外敗絮其中必然無法長久，功能性也是重要考量。推薦您也好好學(xué)習(xí)《網(wǎng)站用戶體驗(yàn)的76個(gè)要點(diǎn)》
好的用戶體驗(yàn)不僅僅關(guān)乎到功能性和設(shè)計(jì)美學(xué)，還需要考慮很多因素，和藍(lán)藍(lán)設(shè)計(jì)一起來看一下吧。

一致性

最重要的交互元素一定要友好，并且風(fēng)格一致。

盡管在設(shè)計(jì)一款網(wǎng)站時(shí)，我們可以融入很多創(chuàng)新點(diǎn)和美學(xué)風(fēng)格，但是一些經(jīng)常使用、且重要的元素，風(fēng)格一定要一致，比如按鈕、鏈接、導(dǎo)航欄、表單等等。我建議可以多瀏覽一些電商網(wǎng)站，他們在這一點(diǎn)上做的就很棒，他們通常有很多的產(chǎn)品頁面，但是整體體驗(yàn)卻相差不大，我們可以看看優(yōu)衣庫的網(wǎng)站。

texture在界面設(shè)計(jì)中應(yīng)用已經(jīng)越發(fā)完善了。它將形成一種趨勢，簡單而有效的為web頁面設(shè)計(jì)添加幾分深度感。 充分發(fā)揮texture的威力是一份偉大的職責(zé)。它不僅能夠很好增強(qiáng)web設(shè)計(jì)的表現(xiàn)效果，對于設(shè)計(jì)師來說還是一個(gè)質(zhì)量上乘的好工具。它的美妙作用是可以引導(dǎo)瀏覽者的視線，強(qiáng)調(diào)關(guān)鍵元素的重要性。

然而，長期以往texture似乎總和“臟亂”或者“低劣”UI設(shè)計(jì)為伍，它的濫用處處可見，像樂隊(duì)的website等，對于設(shè)計(jì)師來說，它遺留下來的滋味可不怎么樣！。 也正是由于以前的濫用，texture的優(yōu)勢長期被人們所忽略。texture可以讓web設(shè)計(jì)更具整體感，但是前提是不要讓它滿屏皆是。

Texture（紋理）VS. Patterns（圖案）

在我們深入了解texture之前，先弄懂texture和pattern之間的區(qū)別。這兩個(gè)詞經(jīng)常被誤認(rèn)為同義的。pattern通常是小的、重復(fù)的圖片元素，而texture更趨向于大一點(diǎn)的不重復(fù)的圖片。你可以想象兩個(gè)集合，左邊是pattern，右邊是texture，這兩個(gè)集合有一部分交集，也就是說在某些時(shí)候texture也是pattern。去tileabl這個(gè)網(wǎng)站逛一圈，也許你會有更清晰的印象。

有很多學(xué)習(xí)UI設(shè)計(jì)的同學(xué)下載了紋理后知道如何平鋪使用，并且都分類羅列一目了然，可是在制作網(wǎng)站的時(shí)候卻不知道怎么用，總感覺利用不起來。

那么今天藍(lán)藍(lán)設(shè)計(jì)推薦30個(gè)運(yùn)用紋理界面設(shè)計(jì)出眾的網(wǎng)站設(shè)計(jì)，希望對你有一定的啟發(fā):)

Hollister Co.

藍(lán)藍(lán)設(shè)計(jì)這個(gè)教程中我們將使用Photoshop CS6設(shè)計(jì)一個(gè)簡單、干凈、三列的作品集時(shí)間軸。在這個(gè)過程中，我們將著眼于自定義網(wǎng)格，排版樣式，并利用不同的顏色和對比度實(shí)現(xiàn)我們想要的美感。

同學(xué)們可以從這個(gè)教程學(xué)習(xí)如何在一個(gè)頁面平衡不同的元素，使整個(gè)界面設(shè)計(jì)富有韻律感與呼吸感。快畢業(yè)的童鞋們可以嘗試這樣展示你的作品集喲。

上效果圖：

藍(lán)藍(lán)設(shè)計(jì)與你分享一位優(yōu)秀的交互設(shè)計(jì)師的成長過程與想法。

1. 交互設(shè)計(jì)師應(yīng)當(dāng)具備的能力

如果我們簡單的將用戶體驗(yàn)領(lǐng)域涉及到的技能分為：用戶研究、產(chǎn)品（概念/功能）設(shè)計(jì)、交互設(shè)計(jì)、視覺設(shè)計(jì)、工程技術(shù)，我認(rèn)為任何一個(gè)交互設(shè)計(jì)師和視覺設(shè)計(jì)師等等，都應(yīng)該具有整體的復(fù)合技能，只是哪部分更多哪部分更少的問題。

1) 用戶研究：對于交互設(shè)計(jì)師，不具備基本的用戶研究能力，無法吸收來自用戶的「信息營養(yǎng)」，如何做出真正以用戶為重心的設(shè)計(jì)呢？觀察法、訪談法、問卷法、可用性測試、行為數(shù)據(jù)分析等等，這些基本的方法應(yīng)該要有所掌握。

2) 產(chǎn)品（概念/功能）設(shè)計(jì)和交互設(shè)計(jì)：這方面不必多說，交互設(shè)計(jì)師必須有大局觀，能夠真正的理解產(chǎn)品的思路和方向，從交互的角度實(shí)現(xiàn)產(chǎn)品層面的意圖。這也是很多交互設(shè)計(jì)師轉(zhuǎn)向產(chǎn)品設(shè)計(jì)師、產(chǎn)品經(jīng)理的原因，在很多方面有交叉。

每當(dāng)談到網(wǎng)頁設(shè)計(jì)這個(gè)話題時(shí)，我總會想到這些年我見過的一些常見的錯(cuò)誤，尤其是發(fā)生在年輕UI設(shè)計(jì)師身上的。所以今天藍(lán)藍(lán)設(shè)計(jì)整理了一些資料，算是我這些年總結(jié)的經(jīng)驗(yàn)吧，主要是教大家怎樣做好網(wǎng)頁界面設(shè)計(jì)。我認(rèn)為每一個(gè)網(wǎng)頁設(shè)計(jì)新手在開始一個(gè)項(xiàng)目之前都應(yīng)該了解這些知識，在項(xiàng)目開展中也應(yīng)該注意。

這些概念不僅僅是網(wǎng)頁設(shè)計(jì)方面的，還包括現(xiàn)實(shí)中的工作流問題，它可以幫你更好的完成工作。如果你能將這些知識融會貫通，假以時(shí)日，做一個(gè)專業(yè)的網(wǎng)站界面設(shè)計(jì)布局就不是問題啦~

01.將你的想法先在紙上畫出來

對話框（Dialog）是個(gè)好用又方便的工具，通常用來再三確認(rèn)使用者的操作動作與決策，以避免一時(shí)的手誤或誤會操作動作的意思，常用于重要動作的確認(rèn)，例如：「你確定要刪除這個(gè)聯(lián)絡(luò)人嗎？」，但若對話框搭配了不適當(dāng)?shù)幕貞?yīng)選項(xiàng)文字，反而可能會造成使用者的困擾與誤解，有時(shí)還可能做了錯(cuò)誤的決定。

對話框界面設(shè)計(jì)最常見的不當(dāng)UI設(shè)計(jì)就是選項(xiàng)上的文字出現(xiàn)：「是（YES）與否（NO）」，回想在學(xué)生時(shí)期考試的時(shí)候，O與X在是非題中是唯二的兩個(gè)答案，而出題者會透過文字?jǐn)⑹錾险吹恼`導(dǎo)，來測驗(yàn)學(xué)生是否真的清楚了解，先不論這樣的測驗(yàn)方式到底對學(xué)習(xí)以及知識的建立到底有沒有明顯的幫助，使用者可不想在開心的使用你的程式或服務(wù)時(shí)，還要小心翼翼的了解你對話框的內(nèi)容。

我們當(dāng)然可以細(xì)心的UI設(shè)計(jì)對話框中的文字，讓使用者清楚明了對話框的訊息，但是在大部分的情況下，我們幾乎根本不會逐字去閱讀訊息的內(nèi)容。你必須要假設(shè)使用者除了對話框上的按鈕外，不會閱讀任何其他訊息（對話框的標(biāo)題或是訊息內(nèi)容）。 – John Gruber of Daring Fireball

毋庸置疑，造成用戶跳出率高的真正殺手是網(wǎng)站設(shè)計(jì)元素的雜亂和干擾。 總而言之，網(wǎng)站上任何惱人的元素都有可能造成用戶蜻蜓點(diǎn)水般離去，這些干擾可能是任何不和諧因素，包括過多的動畫效果、過于雜亂的配色設(shè)計(jì)。只有層次分明、清晰明了的網(wǎng)站設(shè)計(jì)才能讓用戶把視線聚集在網(wǎng)站內(nèi)容的價(jià)值上，從而達(dá)到網(wǎng)站建設(shè)的目的。而用戶的煩惱就在于網(wǎng)站不合時(shí)宜的排版、不恰當(dāng)?shù)膶?dǎo)航以及錯(cuò)誤的信息把用戶統(tǒng)統(tǒng)拒之門外。

優(yōu)秀的網(wǎng)站設(shè)計(jì)是能最大化降低用戶跳出率，并提供良好的用戶體驗(yàn)和有價(jià)值的信息。為了避免界面設(shè)計(jì)的悲劇，藍(lán)藍(lán)設(shè)計(jì)總結(jié)了六大要素試圖降低網(wǎng)站跳出率：

1. 良好的用戶界面