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

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

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

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

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

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

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

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

更多留白/負(fù)空間

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

Web App 設(shè)計(jì)要點(diǎn)

1. 配色

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

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

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

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

幾乎每個(gè)人都經(jīng)歷過(guò)這樣一個(gè)事實(shí)：注冊(cè)時(shí)被要求填寫郵箱地址兩次或重復(fù)輸入密碼。但是這其實(shí)是沒有必要的。僅填寫一次，因?yàn)橛脩粢话愣加浀米约撼Ｓ玫泥]箱地址和密碼。假設(shè)哪天用戶忘記密碼了可以通過(guò)郵箱找回，再多此一舉填寫兩次反而更加容易導(dǎo)致用戶流失。

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

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

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

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

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

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

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

一致性

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

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

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

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

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

在智能手機(jī)出貨量超過(guò)PC和功能手機(jī)、用戶使用App比例超過(guò)80%以上的情況下，智能手機(jī)App絕對(duì)成為了人們生活的主角。對(duì)于PC、平板、智能手機(jī)之間的跨平臺(tái)無(wú)縫體驗(yàn)，很早之前開發(fā)者就開始關(guān)注了。比如Evernote會(huì)開發(fā)幾乎所有平臺(tái)的軟件版本，來(lái)保證用戶在使用各個(gè)平臺(tái)時(shí)可以無(wú)縫切換；另外Chrome 桌面版和手機(jī)端也可以同步數(shù)據(jù)，我在電腦上打開幾個(gè)網(wǎng)頁(yè)，換到手機(jī)上時(shí)仍能看到那幾個(gè)網(wǎng)頁(yè)。

雖然很多人都認(rèn)識(shí)到了App的重要性，但從PC到手機(jī)App，這中間仍然存在著很大的體驗(yàn)斷層。PC段到移動(dòng)端還有很多事情要做，比如接下來(lái)講的：當(dāng)大量App內(nèi)容被分享到微博、微信上之后，如何從PC或手機(jī)上的網(wǎng)頁(yè)鏈接完美切換到App。

很多iPhone應(yīng)用網(wǎng)站的UI設(shè)計(jì)都頗為精美，朋友們們不會(huì)有什么意見的?？磥?lái)那些UI設(shè)計(jì)師們都敞開胸懷迎接“蘋果style”，創(chuàng)造出干凈簡(jiǎn)約又優(yōu)雅的網(wǎng)站設(shè)計(jì)?？刹宦铮鳛橐幻逗细竦脑O(shè)計(jì)師，他們才不會(huì)隨隨便便弄個(gè)網(wǎng)站界面設(shè)計(jì)展示他們的app呢，都卯足了勁設(shè)計(jì)出新穎的版式，配上美美的圖片、大量留白和恰當(dāng)?shù)淖煮w。今天呢！藍(lán)藍(lán)設(shè)計(jì)將要帶給你的這份靈感清單就是一些絕贊的iPhone應(yīng)用網(wǎng)站設(shè)計(jì)！

dcovery

這可是規(guī)劃旅游方案的一枚利器，等你到了目的地還能靠它探索更多樂趣。

藍(lán)藍(lán)設(shè)計(jì)將分析列表在各種情境的界面設(shè)計(jì)方法，以及需要注意的事項(xiàng)。

列表常見的使用情境

1. 概觀：瀏覽較多的的信息時(shí)，列表可以提供一種概觀性的的方式來(lái)呈現(xiàn)內(nèi)容。
2. 逐一瀏覽項(xiàng)目：用戶可能逐一或隨機(jī)的的閱讀信息，就像是 Facebook 動(dòng)態(tài)信息。
3. 搜尋：用戶可能在列表上尋找他們想要的信息，就像是 Google 搜尋結(jié)果。
4. 分類與過(guò)濾：用戶可能正在分類信息或者使用一些方式（檔案大小、名稱）過(guò)濾內(nèi)容。
5. 項(xiàng)目的整理、新增、刪除與分類：用戶正在整理信息，此時(shí)很有可能需要多選、搬移的輔助功能。

模式1. 雙面版選擇器

雙面板列表是一種將列表區(qū)分為兩個(gè)區(qū)域的一種設(shè)計(jì)模式，用戶可以自由在第一個(gè)面上選擇項(xiàng)目，第二個(gè)面版上會(huì)顯示面板一選擇的項(xiàng)目?jī)?nèi)容。

優(yōu)點(diǎn)

• 操作非常的有效率，不需要來(lái)來(lái)回回的在不同列表切換。
• 減少用戶記憶與認(rèn)知的負(fù)擔(dān)，使用者不必了解內(nèi)容在列表上的位置，也不需要學(xué)習(xí)如何返回列表。

缺點(diǎn)

• 需要比較大的屏幕時(shí)才能支持。