在產(chǎn)品設(shè)計中，產(chǎn)品界面、使用情景、用戶操作等都會影響用戶對產(chǎn)品的體驗。因此我們在界面設(shè)計的過程中應(yīng)遵循一定的原則，避免UI設(shè)計者片面的根據(jù)自己主觀認識對產(chǎn)品做出抉擇。藍藍設(shè)計收集到的產(chǎn)品設(shè)計的八個原則！

原則1：用戶界面應(yīng)該是基于用戶的心里模型，而不是基于工程實現(xiàn)模型

就是把后臺本來很復(fù)雜的事情通過設(shè)計符合用戶日常生活中常用的瀏覽方式或操作方式。其實這一點是UI設(shè)計師把生活中的細節(jié)和數(shù)據(jù)結(jié)合的凝聚點，用戶的心理模型抓的越準，界面就會越優(yōu)秀。

通過與設(shè)計者進行接觸，藍藍設(shè)計興奮地了解到這項設(shè)計的 成功之處，其中四個最基本的成功要素如下：

一、首頁越長越好，絕不允許廣告出現(xiàn)

Brand42首先介紹了傳統(tǒng)的網(wǎng)站設(shè)計對顯著位置和不顯著位置的處理，以及很多新聞網(wǎng)站采取的UI設(shè)計模式。他們介紹說，Mail Online的首頁很長，甚至需要向下滾動很長才能看到全部內(nèi)容。這里采取的界面設(shè)計模式就是越多越好，也就是在首頁放置盡可能多的內(nèi)容。Brand42另一 個與眾不同的舉措就是在首頁去除所有廣告，而在網(wǎng)站其他頁面上投放加倍的廣告量。

二、就像一個沒有盡頭的迷宮

Mail Online上每篇報道的側(cè)邊欄平均有70篇報道，每個報道都配有自己的圖片。當讀者閱讀一篇報道時，側(cè)邊欄的花絮新聞就好像一個個錨將讀者吸引到另一篇 報道?！拔覀儎?chuàng)造了一種獨具特色的信息結(jié)構(gòu)，為讀者提供更多的接入口和信息渠道?！盉rand42團隊寫道。側(cè)邊欄的大小及比例通過視線追蹤技術(shù)反復(fù)測 試，使得設(shè)計團隊能夠依照讀者的平均閱讀速度設(shè)計。根據(jù)這些數(shù)據(jù)， Brand42還創(chuàng)建了追求搜索引擎最優(yōu)化的模板，借助這些模板，編輯們可以方便發(fā)布鏈接，預(yù)防死鏈接的出現(xiàn)。當前，Mail Online超過一半的頁面閱讀量并非來自主頁，但是通過網(wǎng)頁間的交叉點擊獲得。

我想每個人都會贊成，網(wǎng)站的可用性是它能否受歡迎的一個重要方面，無論你進行的是公司網(wǎng)站、在線商店還是其他，讓你的界面變得容易操控，使用時令人舒服是關(guān)鍵，近幾年已經(jīng)有很多針對網(wǎng)站界面優(yōu)化的研究，而且這些研究的成果對于提高網(wǎng)站可用性是非常有價值的?，F(xiàn)在藍藍設(shè)計這里有10個超實用的經(jīng)驗分享，相信我，這些建議會極大地提高你那個網(wǎng)站的用戶體驗，讓用戶愛上你的網(wǎng)站設(shè)計！

一、善用人物配圖，使用戶專注于你想呈現(xiàn)的

當進入你的網(wǎng)站，我們會本能地關(guān)注網(wǎng)站上人物圖片中的臉和眼睛，這倒是為我們提供了一個想法，是不是可以用人物配圖吸引小伙伴的注意力呢？當然，但這僅是第一步，我們還可以這樣做，你瞧，是不是大不相同！（見下圖）

這是第一步：

在最初的一次網(wǎng)站設(shè)計可用性測試實驗中，我遇見了一位和藹可親的老大媽，她從來沒用過鼠標。在測試過程中，她一直用手比劃著，一邊對著屏幕在空氣中比劃，一邊對著光標說著建議的話。在測試最后，我當然沒有得到任何結(jié)果，但是她堅持認為我是一個“可愛的男孩”，并且應(yīng)該認識一下她的孫女。很快地，我學(xué)習(xí)到了如何設(shè)置實驗者招募的核心標準。

如果你之前做過一個可用性測試，你就會知道這個不是看起來那么容易的。雖然這不是火箭科學(xué)，但其中也包含一些舉足輕重的復(fù)雜性。在這篇文章里，我會分享一些我學(xué)到的關(guān)于如何幫助你避免你的可用性測試者在測試時最后進入一個令人泄氣的結(jié)果的課程。

在我事業(yè)開始的第一年里有非常多我本可以學(xué)習(xí)的可貴的經(jīng)驗，并且我認為在錯誤中學(xué)習(xí)是學(xué)習(xí)的最好方法，我們并不是總有機會去失敗。這里有一些藍藍設(shè)計學(xué)習(xí)道路上的小技巧，可以幫助你快速提升可用性測試的技巧并且避免一些陷阱。

設(shè)計你的可用性測試腳本來回答具體的研究問題

當我們開始一個新的可用性測試時，不要遲疑，你所要做的就是挑選出網(wǎng)站的主要區(qū)域，然后讓用戶完成那些測試。在這個過程中你會發(fā)現(xiàn)一些有用的見解，但是也許當你呈現(xiàn)出這些發(fā)現(xiàn)時，你因為無法回答網(wǎng)站盈利者提出的問題而被圍得團團轉(zhuǎn)，你也別因此而驚訝。

作為一名UI設(shè)計師，每年都會沉浸在一些新的界面設(shè)計趨勢中興奮不已。接下來，我們將探尋2014年的設(shè)計趨勢，這絕對是意義非凡的事情。Web設(shè)計師必須洞悉所有相關(guān)領(lǐng)域的新趨勢，緊跟時尚潮流。

這些新趨勢讓設(shè)計變得妙趣橫生。但是很多專家還會倡導(dǎo)那些并非最時髦、最震撼世界的設(shè)計。當然，響應(yīng)式設(shè)計不僅去年是熱點，今年依然還會被人們重視。同樣，柵格化設(shè)計作為最基本的設(shè)計，也會被繼續(xù)延續(xù)下去。

這次，藍藍設(shè)計想探索一下那些逐漸發(fā)展起來的設(shè)計潮流。也許過去我們只是偶爾嘗試一下這些界面設(shè)計風(fēng)格，但是今年我們會真正關(guān)注它們。

更多留白/負空間

一般人對於企業(yè)產(chǎn)品的預(yù)期，可能僅停留在功能要強大，信息要安全，能夠幫助企業(yè)提高工作效率。但今時已不同往日，除此以外，人們開始更注重產(chǎn)品的用戶體驗。那么，在面對企業(yè)產(chǎn)品的界面設(shè)計上，有什么方法可以提升用戶體驗呢？接下來，藍藍設(shè)計為大家?guī)硪恍﹪鴥?nèi)外的優(yōu)秀案例以及一些設(shè)計Web App時的思考方向。

Web App 設(shè)計要點

1. 配色

顏色作為UI設(shè)計師傳達情感的主要元素之一。一個明確的品牌顏色，對信任度，認知度都會有大大的提升。顏色除了能為界面提升美感，也能作為功能上的輔助。在普遍頁面信息量大的企業(yè)產(chǎn)品中，往往一個有顏色的按鈕就很容易吸引用戶的視覺焦點。

Lovely是Dribbble大神Kerem Suer設(shè)計的Web App。橙色主，藍色輔助，淡灰色為底色。這個配色既色彩鮮明，淡淡的感覺更讓人長時間使用也不覺累。整體感覺和諧舒服，簡潔耐看。

網(wǎng)上擠滿了各種各樣的UI設(shè)計方案，事實上我們已經(jīng)有一套套的方案可遵循。但！界面設(shè)計永無止境！哪怕是一個注冊表單，也值得再細心研究。下面藍藍設(shè)計給出注冊表單設(shè)計5個小技巧：

1、別讓用戶重復(fù)填寫相同的內(nèi)容

幾乎每個人都經(jīng)歷過這樣一個事實：注冊時被要求填寫郵箱地址兩次或重復(fù)輸入密碼。但是這其實是沒有必要的。僅填寫一次，因為用戶一般都記得自己常用的郵箱地址和密碼。假設(shè)哪天用戶忘記密碼了可以通過郵箱找回，再多此一舉填寫兩次反而更加容易導(dǎo)致用戶流失。

關(guān)注人類心理學(xué)的一些研究是非常有意義的。通過對人類心理的推敲，我們討論人社會心理，這能夠幫助創(chuàng)業(yè)公司開拓市場，因 為受歡迎的內(nèi)容和大眾心理有著最直接的關(guān)系。問題的關(guān)鍵是，很多心理學(xué)對于網(wǎng)站設(shè)計者有著很強的啟發(fā)性。心理學(xué)幫助網(wǎng)站開發(fā)者看清人們的思維如何運作。今天，藍藍設(shè)計和大家分享幾條對網(wǎng)站設(shè)計師非常有益的建議。

1.太多的選擇等于沒有選擇。

根據(jù)Sheeya Iyengar教授的心理學(xué)研究，我們能夠洞察人們處理多重選擇時的心理變化?！斑x擇就是放棄”，Iyengar教授，《選擇的藝術(shù)》的作者這樣總結(jié)說。 社會心理學(xué)發(fā)現(xiàn)，當人們面多過多選擇的時候，他們的表現(xiàn)非常相似：他們不會做任何選擇。這就是所謂的“安全選擇”。

結(jié)合到網(wǎng)站設(shè)計中：

太多需要用戶去點擊的東西，會讓人覺得混亂。就拿我自己的網(wǎng)站來說，當我把兩側(cè)的工具欄撤掉一半之后，注冊的用戶大大增加。思考你的網(wǎng)站最終、最核心的目的，關(guān)注集中一點，刪掉無關(guān)緊要的點綴和內(nèi)容，直到你的內(nèi)容只剩下最本質(zhì)最重要的內(nèi)容，這樣你的用戶才愿意呆在這里。

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

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

一致性

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

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

隨著互聯(lián)網(wǎng)的高速發(fā)展，各種各樣的網(wǎng)站層出不窮。在這樣的環(huán)境下，用戶是如何在浩瀚的互聯(lián)網(wǎng)海洋中快速挑選網(wǎng)站的呢？網(wǎng)頁UI設(shè)計師又如何能讓自己的網(wǎng)站設(shè)計在用戶匆匆一瞥后就迅速吸引到他們進一步注意的呢？本文作者向用戶介紹了一種簡單的頁面布局方式——分割布局，這種布局方式試圖讓用戶初覽頁面時感受到一種友好的瀏覽體驗。

作為網(wǎng)頁設(shè)計師，我們可以參考的界面設(shè)計范例和布局原則有很多，比如說：柵格化、縱向一致性、F型布局、Z型布局、三分法則、黃金分割法等等。注重這些原則將會給你的設(shè)計帶來視覺吸引力和功能性——現(xiàn)在讓我們來看一種簡單的方式，將頁面兩等分。

雖然在一開始聽起來有點傻，但是這種基本布局確實能起到非常好的效果。當我們通覽一個頁面時，我們的視線常常會沿著一個“之”字形移動。而如果用戶的視線是沿著一條水平線移動時——就像在Z型布局里一樣，那么他/她就會很專注（或者說嘗試著專注）。但由于初來你網(wǎng)站90%的用戶都不會很仔細的去關(guān)注你的頁面，因此讓你的設(shè)計“瀏覽起來友好”肯定會獲得不錯回報哦！