在過去十年中高品質的網頁可用性一直是業內討論的核心，因為它對用戶來說越來越重要。好的可用性也可以幫助建立品牌知名度，從而提升用戶對一個網站設計或者是一家公司的評價。今天人們依然高度關注可用性，是因為大大小小的公司已經證明了好的可用性策略是多么重要。

在過去幾年中，良好的可用性成為那些成功的初創公司的核心。多數情況下，簡單的想法最具創造性，可用性主要是指：使一個功能或者產品易于使用，但同時也要保持產品質量維持在高水平上。

如今，很多文章會談到普遍意義。在對該話題年復一年的討論之后，似乎UI設計者們仍然很難去理解它。可用性早已不再是一個玩笑，下面藍藍設計這些建議應當被打印出來并粘到你桌子對面的墻上。

鏈接的顏色

我經常發現自己在瀏覽網頁時，有些頁面上的鏈接沒有以某種形式高亮顯示。這是我見過的最愚蠢的錯誤。我愿意訪問那些鏈接使用默認藍色的頁面，而不是鏈接和 普通文字一個顏色的頁面。用戶需要知道如何在頁面之間導航、在哪兒能點擊鏈接。你不能指望他們把鼠標一行行的掠過所有文字去找鏈接，直到發現鼠標箭頭變成 “小手兒”。

你有沒有經歷過看到一個頁面的時候馬上就被它的界面設計吸引并且留下了深刻的印象呢？然后你進一步細看這個頁面發現真正使這個頁面變得神奇的是一些小細節，在藍藍設計這篇文章中我們將看到幾種把細節設計做到完美的頁面。

完美的像素線

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

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

一、何為”關注細節的設計技巧”?

你瀏覽一款網站時，一般會迅速的對網站設計的外觀和使用感受做個評判，整體的界面設計風格是第一印象，能否引導用戶繼續閱讀取決于此。

金玉其外敗絮其中必然無法長久，功能性也是重要考量。推薦您也好好學習《網站用戶體驗的76個要點》
好的用戶體驗不僅僅關乎到功能性和設計美學，還需要考慮很多因素，和藍藍設計一起來看一下吧。

一致性

最重要的交互元素一定要友好，并且風格一致。

盡管在設計一款網站時，我們可以融入很多創新點和美學風格，但是一些經常使用、且重要的元素，風格一定要一致，比如按鈕、鏈接、導航欄、表單等等。我建議可以多瀏覽一些電商網站，他們在這一點上做的就很棒，他們通常有很多的產品頁面，但是整體體驗卻相差不大，我們可以看看優衣庫的網站。

texture在界面設計中應用已經越發完善了。它將形成一種趨勢，簡單而有效的為web頁面設計添加幾分深度感。 充分發揮texture的威力是一份偉大的職責。它不僅能夠很好增強web設計的表現效果，對于設計師來說還是一個質量上乘的好工具。它的美妙作用是可以引導瀏覽者的視線，強調關鍵元素的重要性。

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

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

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

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

那么今天藍藍設計推薦30個運用紋理界面設計出眾的網站設計，希望對你有一定的啟發:)

Hollister Co.

藍藍設計這個教程中我們將使用Photoshop CS6設計一個簡單、干凈、三列的作品集時間軸。在這個過程中，我們將著眼于自定義網格，排版樣式，并利用不同的顏色和對比度實現我們想要的美感。

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

上效果圖：

藍藍設計與你分享一位優秀的交互設計師的成長過程與想法。

1. 交互設計師應當具備的能力

如果我們簡單的將用戶體驗領域涉及到的技能分為：用戶研究、產品（概念/功能）設計、交互設計、視覺設計、工程技術，我認為任何一個交互設計師和視覺設計師等等，都應該具有整體的復合技能，只是哪部分更多哪部分更少的問題。

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

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

每當談到網頁設計這個話題時，我總會想到這些年我見過的一些常見的錯誤，尤其是發生在年輕UI設計師身上的。所以今天藍藍設計整理了一些資料，算是我這些年總結的經驗吧，主要是教大家怎樣做好網頁界面設計。我認為每一個網頁設計新手在開始一個項目之前都應該了解這些知識，在項目開展中也應該注意。

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

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

對話框（Dialog）是個好用又方便的工具，通常用來再三確認使用者的操作動作與決策，以避免一時的手誤或誤會操作動作的意思，常用于重要動作的確認，例如：「你確定要刪除這個聯絡人嗎？」，但若對話框搭配了不適當的回應選項文字，反而可能會造成使用者的困擾與誤解，有時還可能做了錯誤的決定。

對話框界面設計最常見的不當UI設計就是選項上的文字出現：「是（YES）與否（NO）」，回想在學生時期考試的時候，O與X在是非題中是唯二的兩個答案，而出題者會透過文字敘述上正反的誤導，來測驗學生是否真的清楚了解，先不論這樣的測驗方式到底對學習以及知識的建立到底有沒有明顯的幫助，使用者可不想在開心的使用你的程式或服務時，還要小心翼翼的了解你對話框的內容。

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