設(shè)計(jì)不是美工，想成為優(yōu)秀的設(shè)計(jì)師怎么能不懂點(diǎn)心理學(xué)？文章從認(rèn)知心理學(xué)角度下手，分析了在交互設(shè)計(jì)過(guò)程中時(shí)常會(huì)犯得幾種錯(cuò)誤，一些平時(shí)稀松見(jiàn)慣的設(shè)計(jì)方式也都在這兒找到了比較理性的依據(jù)。設(shè)計(jì)是門(mén)科學(xué)，我們需要掌握一些方法論，以不變應(yīng)萬(wàn)變。

作者介紹了認(rèn)知超載和工作記憶這兩個(gè)心理學(xué)概念在交互設(shè)計(jì)中的重要作用，并列舉了在設(shè)計(jì)過(guò)程中因?yàn)楹鲆暳擞脩?hù)的認(rèn)知特點(diǎn)可能會(huì)犯得錯(cuò)誤，并給出了相應(yīng)的解決方案。因?yàn)樵睦锓磸?fù)提到了上面兩個(gè)概念，所以我先簡(jiǎn)單解釋一下二者的含義，也方便大家更好的理解文章的內(nèi)容。

認(rèn)知超載：

認(rèn)知負(fù)荷指在工作記憶中腦力使用的總量。當(dāng)外界信息量超出大腦接收處理的閾值時(shí)，就會(huì)出現(xiàn)認(rèn)知超載的情況。通俗來(lái)說(shuō)，人腦跟電腦一樣，處理信息的能力是有極限的，如果超過(guò)了一定數(shù)量，就會(huì)變慢，最后死機(jī)，這就是認(rèn)知超載。

工作記憶：

工作記憶指的是一個(gè)容量有限的系統(tǒng)，運(yùn)用聽(tīng)覺(jué)、視覺(jué)系統(tǒng)來(lái)暫時(shí)保持和存儲(chǔ)外界信息，也叫短期記憶，是外界信息和長(zhǎng)期記憶之間的接口。簡(jiǎn)單來(lái)說(shuō)，工作記憶是長(zhǎng)期記憶的先遣小分隊(duì)。

下面一張圖來(lái)直觀表達(dá)外部信息/認(rèn)知超載/工作記憶三者之間剪不斷理還亂的孽緣：

搞清楚認(rèn)知超載和工作記憶的概念后就可以正式進(jìn)入正文了~~~

正文

所謂最好的用戶(hù)體驗(yàn)就是能讓用戶(hù)毫無(wú)察覺(jué)，在界面上的操作如行云流水般順暢。用戶(hù)們?cè)缴偃ニ伎冀缑娌季?，他們就?huì)越多得將關(guān)注點(diǎn)放在要完成的目標(biāo)上。而作為設(shè)計(jì)師，你的工作就是幫助用戶(hù)全神貫注的完成任務(wù)而不被多余的因素打擾。

復(fù)雜的界面會(huì)迫使用戶(hù)去解決那些無(wú)足輕重的問(wèn)題。用戶(hù)在填寫(xiě)選項(xiàng)、界面和導(dǎo)航等地方感覺(jué)到困惑時(shí)就會(huì)中斷他們思考的過(guò)程，將他們的注意力從網(wǎng)絡(luò)情境拖拽回現(xiàn)實(shí)情境。這種過(guò)度的思考就被稱(chēng)為認(rèn)知超載。

認(rèn)知負(fù)荷的科學(xué)根源：

1980年，澳大利亞教育心理學(xué)家John Sweller將認(rèn)知負(fù)荷應(yīng)用到了教學(xué)設(shè)計(jì)中。他旨在尋找對(duì)于各類(lèi)學(xué)生來(lái)說(shuō)最好的知識(shí)記憶方式。雖然這些理論最初是應(yīng)用在教育領(lǐng)域的，但它們也同樣適用于交互設(shè)計(jì)中。接下來(lái)我會(huì)解釋這個(gè)技術(shù)如何用來(lái)減少用戶(hù)的煩惱。

設(shè)計(jì)中的應(yīng)用：

著名作家Steve Krug就是將認(rèn)知負(fù)荷理論最廣泛的運(yùn)用到了網(wǎng)頁(yè)設(shè)計(jì)當(dāng)中。他的書(shū)“Don’t Make Me Think”被許多設(shè)計(jì)師當(dāng)做業(yè)界圣經(jīng)。

在他書(shū)里提到的觀點(diǎn)中，以下我非常贊同的：

• 每一個(gè)頁(yè)面都要清晰明了，因?yàn)橛脩?hù)從網(wǎng)站其他頁(yè)面進(jìn)入網(wǎng)站的可能性和從首頁(yè)進(jìn)入網(wǎng)站的可能性一樣大。
• 用戶(hù)很有可能放棄——也就是說(shuō)，比起最好的解決方案，采取能夠最早解決問(wèn)題的方案。
• 當(dāng)一個(gè)具有一般互聯(lián)網(wǎng)經(jīng)驗(yàn)的用戶(hù)可以用這套系統(tǒng)來(lái)完成他們的目標(biāo)之時(shí)，系統(tǒng)達(dá)到可用性就可以了。
• 用戶(hù)通常會(huì)采用一個(gè)心態(tài)：“要么快要么就saygoodbye”。
• 即便從未使用過(guò)，屏幕上一個(gè)可以看見(jiàn)的home鍵將會(huì)給用戶(hù)帶來(lái)安慰。

綜合來(lái)講，每當(dāng)用戶(hù)瀏覽網(wǎng)站必須停下來(lái)進(jìn)行思考時(shí)，即使一瞬間，他們的工作記憶也是超負(fù)荷的。問(wèn)題類(lèi)似于： “這個(gè)可以點(diǎn)么？” “Home鍵在哪兒” “我改怎么保存？”，這些都會(huì)毀了用戶(hù)的體驗(yàn)。

認(rèn)知過(guò)載的最主要的幾個(gè)原因

有很多設(shè)計(jì)元素都對(duì)用戶(hù)大腦施加了潛在的負(fù)荷，與此同時(shí)，外界環(huán)境中會(huì)有更多的因素超出設(shè)計(jì)師們的控制范圍。比方一個(gè)用戶(hù)瀏覽網(wǎng)站的同時(shí)會(huì)擔(dān)心第二天的工作報(bào)告，或者被窗戶(hù)外裝修的噪音所打擾——這些都會(huì)消耗他們的工作記憶。

同時(shí)，每個(gè)用戶(hù)因?yàn)閭€(gè)體差異，會(huì)有著不同的工作記憶能力。比起細(xì)心謹(jǐn)慎的用戶(hù)來(lái)說(shuō)，不拘小節(jié)的用戶(hù)會(huì)比較容易地將精力集中在你的網(wǎng)站上，而不經(jīng)常上網(wǎng)的用戶(hù)會(huì)比經(jīng)常上網(wǎng)的用戶(hù)思考的要多。即便我們不能量化認(rèn)知負(fù)荷，我們依舊可以歸納出那些經(jīng)常在設(shè)計(jì)中出現(xiàn)的錯(cuò)誤。下面，我將對(duì)最常見(jiàn)的幾種錯(cuò)誤分類(lèi)說(shuō)明并給出解決方案。

1.多余的動(dòng)作

用戶(hù)所進(jìn)行的每一個(gè)步驟都會(huì)增加到他們的認(rèn)知負(fù)荷中。過(guò)多不必要的動(dòng)作會(huì)破壞用戶(hù)的思路，甚至有可能激怒他們。因?yàn)樗麄兊墓ぷ饔洃浂技性谕瓿商囟ǖ哪繕?biāo)上，多余的動(dòng)作會(huì)迫使他們投入更多的精力，這就會(huì)增加工作記憶的負(fù)擔(dān)。最終就會(huì)耗盡用戶(hù)的耐性，掀桌子走人。

為了使認(rèn)知負(fù)荷最小化，速度和步驟是需要注意的基本事項(xiàng)。用戶(hù)希望在一種輕快活潑且有目的性的節(jié)奏中完成他們的任務(wù)，所以撇開(kāi)一切拖后腿的廢物吧！

用戶(hù)希望知道在他們提交郵箱地址之前他們要進(jìn)入的是什么網(wǎng)站，但Touch of Modern不告訴用戶(hù)任何信息卻要求他們?cè)诘谝粫r(shí)間進(jìn)行注冊(cè)！這個(gè)強(qiáng)制且多余的動(dòng)作將會(huì)嚇跑許多潛在用戶(hù)。

解決方案：

這里有個(gè)找出多余步驟的方法：列出用戶(hù)必須要完成的每一步任務(wù)。舉個(gè)發(fā)郵件的栗子吧：

1. 點(diǎn)擊“郵件”圖標(biāo)
2. 點(diǎn)擊到“發(fā)送給”的輸入框
3. 填寫(xiě)郵箱地址
4. 點(diǎn)擊“主題”輸入框
5. 等等吧啦吧啦吧…….

點(diǎn)擊“郵件”圖標(biāo) 點(diǎn)擊到“發(fā)送給”的輸入框 填寫(xiě)郵箱地址 點(diǎn)擊“主題”輸入框 等等吧啦吧啦吧…….現(xiàn)在，我們回頭來(lái)看這些步驟并找出多余的動(dòng)作。第二步完全可以刪除，因?yàn)槟憧梢宰尮鈽?biāo)自動(dòng)停在“發(fā)送給”這一欄而不用讓用戶(hù)自己動(dòng)手點(diǎn)擊。

這會(huì)為他們減去不必要的麻煩，雖然看起來(lái)微不足道，但你所刪減的每一步都是勝利。（這和最近非常流行的微交互設(shè)計(jì)概念有些不謀而合，微小而不引人注意，并為用戶(hù)提供平滑、自然的感覺(jué)。）

讓我們來(lái)看看谷歌的首頁(yè)。光標(biāo)一開(kāi)始就出現(xiàn)在搜索欄里面，所以用戶(hù)們需要做的就是打字。這些細(xì)小的交互行為可以為整體的體驗(yàn)加分，所以不要忘記它們。

2.過(guò)度的刺激

凌亂冗雜的界面會(huì)分散用戶(hù)注意力，增加工作記憶的負(fù)荷從而會(huì)妨礙他們?nèi)?shí)現(xiàn)目標(biāo)。就像當(dāng)很多人同時(shí)跟你講話時(shí)一樣，你會(huì)很難集中精力，當(dāng)網(wǎng)頁(yè)上充斥著許多照片，動(dòng)畫(huà)，圖標(biāo)，廣告，字體和刺眼的亮色時(shí)，你同樣也很難集中注意力。每一種多余的元素，特別是視覺(jué)上的搶眼，都會(huì)分散用戶(hù)的注意力。

要記住的是：在用戶(hù)實(shí)現(xiàn)目標(biāo)之前，工作記憶都需要將額外的刺激進(jìn)行歸類(lèi)處理，注意力的每一次分散，都會(huì)占用用戶(hù)的一份工作記憶。

LINGsCARS就是個(gè)極端的例子，你可以看到對(duì)比強(qiáng)烈的顏色和動(dòng)效沖擊著人們的感官。在電腦屏幕上，即便處于兩個(gè)不同位置但卻同時(shí)進(jìn)行的動(dòng)效依舊會(huì)對(duì)用戶(hù)造成過(guò)度刺激，產(chǎn)生威脅。

解決方案：

首先，避免一切不必要的元素。我們僅需保留通常情況下必要的元素，來(lái)減少加載時(shí)間并簡(jiǎn)化交互體驗(yàn)。一項(xiàng)關(guān)于“美學(xué)是如何影響用戶(hù)對(duì)網(wǎng)站第一印象”的研究發(fā)現(xiàn)，比起視覺(jué)復(fù)雜的網(wǎng)站，用戶(hù)更傾向于視覺(jué)簡(jiǎn)易的網(wǎng)站。

同樣，你也可以進(jìn)行內(nèi)容區(qū)分從而達(dá)到平衡的效果。過(guò)多的同質(zhì)化內(nèi)容（只有照片或只有文本）會(huì)讓用戶(hù)感到煩躁。所以，將視覺(jué)信息加以綜合——圖片，視頻，信息圖表綜合到一起從而達(dá)到頁(yè)面的和諧，使它便于用戶(hù)理解。

影視網(wǎng)站IMDb本可以在很大程度上輕松地只依靠圖片進(jìn)行排版，但它反而運(yùn)用同量的文字內(nèi)容來(lái)平衡網(wǎng)站頁(yè)面。

當(dāng)你總結(jié)出一個(gè)頁(yè)面的必要元素，將這些元素以便于用戶(hù)快速理解的方式組織起來(lái)。運(yùn)用對(duì)稱(chēng)式或非對(duì)稱(chēng)式布局來(lái)展示信息以便于用戶(hù)更快速的理解，也就是說(shuō)，讓大腦少費(fèi)勁兒。對(duì)稱(chēng)式布局或有趣的非對(duì)稱(chēng)布局不僅能帶來(lái)視覺(jué)享受，而且它們的結(jié)構(gòu)可以使界面易于交互。

下面來(lái)看看Groupon是如何將它的垂直菜單（中間偏左）和描述凍酸奶的文字（中間偏右）進(jìn)行布局的吧。大圖居中被文字包圍著，這樣就打造了一個(gè)舒適自然的沙漏形狀。

(Image: Groupon)

對(duì)稱(chēng)式并不僅僅是將相同的布局放在兩側(cè)，它是用來(lái)平衡視覺(jué)重量和視覺(jué)方向。從這點(diǎn)來(lái)講，非對(duì)稱(chēng)性布局依舊可以表現(xiàn)的具有組織性，就像OTHR所做的那樣。

(Image: OTHR)

減少頁(yè)面多余的元素僅僅只勝利了一半，革命尚未成功，大家不要忘了，還要將這些元素以簡(jiǎn)潔明了的布局方式呈現(xiàn)出來(lái)。

3.過(guò)多的選擇

自相矛盾的是：用戶(hù)希望擁有更多的選擇，但往往過(guò)多的選擇會(huì)給他們的大腦帶來(lái)負(fù)荷。

席克定律（選擇困難癥）為我們揭示出了一種現(xiàn)象：用戶(hù)所擁有的選擇越多，他需要作出選擇的時(shí)間則會(huì)越長(zhǎng)。從設(shè)計(jì)的角度來(lái)看：人機(jī)交互中界面中選項(xiàng)越多，意味著用戶(hù)做出決定的時(shí)間越長(zhǎng)。席克定律多應(yīng)用于軟件/網(wǎng)站界面的菜單及子菜單的設(shè)計(jì)中，在移動(dòng)設(shè)備中也比較適用。

(Image: Rakuten)

即便是知名網(wǎng)站，比如說(shuō)樂(lè)天，也會(huì)犯類(lèi)似的錯(cuò)誤。因?yàn)樗麄儧](méi)有很好的理解這個(gè)設(shè)計(jì)準(zhǔn)則。給用戶(hù)需要的而不是給他們認(rèn)為他們需要的。

解決方案：

你可以將多項(xiàng)選項(xiàng)方進(jìn)一個(gè)集合里面。在很多購(gòu)物網(wǎng)站里你都可以看到類(lèi)似的組合方式。完全沒(méi)必要一次性展示出多種選項(xiàng)。如果可以將他們放在隱藏菜單中，那么就比較理想了。這些隱藏的大型菜單依舊會(huì)給用戶(hù)很多選擇，同時(shí)這樣也不會(huì)給他們帶來(lái)負(fù)擔(dān)。

(Image: Amazon)

然而，隱藏式的導(dǎo)航欄不利于發(fā)現(xiàn)，所以電子商務(wù)和新聞?lì)I(lǐng)域的設(shè)計(jì)師應(yīng)該注意。你可以通過(guò)放置其他類(lèi)似產(chǎn)品的鏈接使缺點(diǎn)最小化（比方說(shuō)亞馬遜的“相關(guān)購(gòu)買(mǎi)”）或者你可以歸納導(dǎo)航菜單的類(lèi)別，將它們精簡(jiǎn)為單行導(dǎo)航（就像蘋(píng)果和CNN那樣）。

許多與席克定律有關(guān)的問(wèn)題可以通過(guò)信息架構(gòu)的管理來(lái)控制，這也是我們接下來(lái)要討論的部分“不易找到的頁(yè)面和產(chǎn)品”。

4.過(guò)多的內(nèi)容和產(chǎn)品

和過(guò)度的刺激與過(guò)多的選擇問(wèn)題一樣，內(nèi)容過(guò)多會(huì)讓用戶(hù)的工作記憶分散到不同的岔道。很明顯，你希望展現(xiàn)的僅僅是重要的內(nèi)容，但對(duì)于一些放蕩不羈愛(ài)自由的網(wǎng)站來(lái)說(shuō)，所有內(nèi)容都很重要。如果你的網(wǎng)站也有非常多的內(nèi)容，為了避免對(duì)用戶(hù)造成困擾，你必須學(xué)會(huì)怎么去合理的組織他們。

(Image: Arngren)

Arngren的問(wèn)題并不是它展現(xiàn)了很多的產(chǎn)品，而是同一時(shí)間內(nèi)展示出了很多產(chǎn)品。在組織架構(gòu)上的調(diào)整將會(huì)給網(wǎng)站帶來(lái)好的觀感。

解決方法：

George Miller的解決策略是“組塊”，它將需要展示的大量?jī)?nèi)容以可管理的方式組合起來(lái)，這是非常有效的。這也是數(shù)字組合的記憶方法。一組電話可以分為國(guó)家編號(hào)，地區(qū)編號(hào)等將它們組合成一組三個(gè)數(shù)字和兩組四個(gè)數(shù)字便于記憶，而一連串的11個(gè)數(shù)字會(huì)很難被記住。

你想將許多產(chǎn)品的圖片都放在主頁(yè)上么？比起將它們?nèi)苛_列出來(lái)，不如通過(guò)他們的類(lèi)型將他們分組羅列。Etsy通過(guò)根據(jù)不同的店鋪將產(chǎn)品進(jìn)行分組展示。

(Image: Etsy)

說(shuō)完了圖片組塊還有文本組塊，文本的組塊包括簡(jiǎn)短的自然段，恰當(dāng)?shù)倪\(yùn)用標(biāo)題和副標(biāo)題以及足夠的留白。

長(zhǎng)的信息填寫(xiě)表單是非常嚇人的，有時(shí)甚至?xí)挥脩?hù)所遺棄，那么試試一種多步驟的表單吧。你可以將表單的信息分在不同的頁(yè)面里。記得一定要有一個(gè)進(jìn)度標(biāo)記來(lái)讓用戶(hù)知道還剩下多少頁(yè)。

(Image: Virgin Atlantic)

買(mǎi)機(jī)票通常需要填寫(xiě)大量的信息，通常沒(méi)有一項(xiàng)信息是多余的。Virgin Atlantic將原本乏味的信息填寫(xiě)項(xiàng)目分配在單獨(dú)的頁(yè)面上：選擇航班，填寫(xiě)旅客信息，進(jìn)入付款詳情等等。將所有的信息放在一個(gè)頁(yè)面上會(huì)對(duì)用戶(hù)造成負(fù)擔(dān)，因而很有可能被他們放棄。

5.模棱兩可的界面

認(rèn)知過(guò)載的最大敵人是混淆不清的用戶(hù)界面。用戶(hù)從來(lái)都不該花費(fèi)大量的時(shí)間來(lái)弄清楚如何來(lái)完成他們的動(dòng)作，也不應(yīng)該浪費(fèi)腦力去破譯一個(gè)圖標(biāo)。

(Image: SpeedCrunch)

并非所有的用戶(hù)都是技術(shù)咖從而能夠理解SpeedCrunch這種含義模糊的圖標(biāo)。即使他們能夠識(shí)別上面的代表Windows系統(tǒng)和Mac OS X系統(tǒng)的符號(hào)，那么位于右下角的那兩個(gè)圖標(biāo)即使是圖靈他老人家來(lái)了也且得看一會(huì)兒呢。

解決方案：

不要費(fèi)力不討好：你可以用那些已被用戶(hù)從其他網(wǎng)站上所了解的視覺(jué)提示。用戶(hù)通常會(huì)用他所熟悉的符號(hào)來(lái)進(jìn)行操作。如果覺(jué)著這樣做沒(méi)有新意，你可以將品牌特質(zhì)巧妙的轉(zhuǎn)化為用戶(hù)所熟識(shí)的形式。Home Depot雖然運(yùn)用了較為普遍的圖標(biāo)，但同時(shí)也賦予了他們品牌獨(dú)有的橙色。

(Image: Home Depot)

比起非傳統(tǒng)標(biāo)簽例如“姓名”和“去”,像“聯(lián)系人”和“提交”這類(lèi)標(biāo)準(zhǔn)的標(biāo)簽更容易被識(shí)別出來(lái)。能被普遍識(shí)別的標(biāo)記可以增強(qiáng)用戶(hù)的瀏覽體驗(yàn)，而非普遍的標(biāo)識(shí)會(huì)讓用戶(hù)停下來(lái)去想這個(gè)按鈕是用來(lái)做什么的。不要為了個(gè)性來(lái)犧牲簡(jiǎn)明。

另外，如果真的需要放個(gè)以前從未見(jiàn)過(guò)的標(biāo)識(shí)該怎么辦？如果那樣，運(yùn)用真實(shí)的生活場(chǎng)景展示來(lái)讓其進(jìn)行自我解釋。這叫做：借殼。它是連接現(xiàn)實(shí)和虛擬的橋梁。比方說(shuō)，早起的互聯(lián)網(wǎng)奠基人選擇信封來(lái)代表郵件就是因?yàn)樾欧馐青]政系統(tǒng)的象征。

同時(shí)，要避免含義模糊的符號(hào)，特別是它們可能還會(huì)被誤認(rèn)為其他東西的代表。就像下列Issuu的圖標(biāo)，有些是為人所知的，但另外一些卻不是。如果用戶(hù)必須通過(guò)點(diǎn)擊這個(gè)圖標(biāo)來(lái)發(fā)現(xiàn)它的功能，這就會(huì)中斷他們的操作進(jìn)程。

任何一個(gè)不能清晰表意的圖標(biāo)都應(yīng)附帶說(shuō)明來(lái)告訴用戶(hù)它是如何工作的。新的并且不常見(jiàn)的用戶(hù)界面，需要手把手的教程。比方說(shuō)，Slack就給出了一個(gè)全套的視頻指導(dǎo)來(lái)說(shuō)明界面的操作流程。

(Image: Slack)

6.不易尋找到的頁(yè)面

即便用戶(hù)已經(jīng)擁有了他們所需要的一切東西，他們可能依舊不知道如何去尋找它們。結(jié)果是他們會(huì)費(fèi)盡腦力去尋找他們所需要的。作為每個(gè)用戶(hù)體驗(yàn)都不可或缺的元素，導(dǎo)航條應(yīng)該放在顯眼的地方，從而給用戶(hù)信心去任意瀏覽網(wǎng)站而不用去擔(dān)心會(huì)迷路。這時(shí)就需要信息架構(gòu)發(fā)揮作用了。

(Image: Mojo Yogurt)

如果你認(rèn)為漢堡圖標(biāo)非常糟糕的話，Mojo Yogurt則會(huì)讓你見(jiàn)識(shí)見(jiàn)識(shí)什么是山外有山，你需要將鼠標(biāo)滑過(guò)左上角的圖標(biāo)來(lái)顯示出導(dǎo)航菜單。雖然圍繞著Logo有個(gè)小的動(dòng)效，但就整個(gè)屏幕的顏色和動(dòng)效來(lái)說(shuō)，它并不夠明顯。

(Image: Mojo Yogurt)

解決方法：

根據(jù)用戶(hù)的喜好來(lái)理清你的信息架構(gòu)。你的目標(biāo)用戶(hù)群可能并不認(rèn)可你的做法，所以要從他們那里學(xué)習(xí)如何來(lái)組織網(wǎng)站?？ㄆ诸?lèi)試驗(yàn)會(huì)告訴你你的用戶(hù)將會(huì)如何對(duì)頁(yè)面和話題進(jìn)行分類(lèi)。

1.索引卡片上的內(nèi)容? ??2.預(yù)先設(shè)定的分類(lèi) ??3.將索引卡片放置在相應(yīng)的分類(lèi)中。

(Image: Rosenfeld Media)

要了解信息架構(gòu)更多的知識(shí)，閱讀Dan Brown的“信息架構(gòu)八準(zhǔn)則”。在這僅有的五頁(yè)里，他概要闡述了每個(gè)設(shè)計(jì)師都應(yīng)該知道的八項(xiàng)信息架構(gòu)準(zhǔn)則。比如說(shuō)多項(xiàng)劃分的準(zhǔn)則（例：運(yùn)用一些不同的分類(lèi)方法來(lái)適應(yīng)不同用戶(hù)的思維模式）。

除了有效的信息架構(gòu)外，如果你還想通過(guò)組合頁(yè)面和菜單項(xiàng)來(lái)避免冗余該怎么辦？設(shè)計(jì)工作室Waaark通過(guò)把工作室的簡(jiǎn)介，團(tuán)隊(duì)成員和聯(lián)系信息這三個(gè)頁(yè)面合并到一個(gè)頁(yè)面來(lái)簡(jiǎn)化他們的導(dǎo)航。

(Image: Waaark)

如果確實(shí)有比其他功能重要的功能時(shí)，運(yùn)用視覺(jué)技術(shù)來(lái)吸引他們的注意力。比如增加尺寸，添加動(dòng)效或運(yùn)用亮色以及對(duì)比色來(lái)吸引用戶(hù)眼球。

比起新客戶(hù)來(lái)講，Paypal更關(guān)注老用戶(hù)，并通過(guò)將登陸鍵設(shè)置在最吸引眼球的白色背景上。

或者可以用小說(shuō)式架構(gòu)（下圖解釋什么是小說(shuō)式架構(gòu)）來(lái)展示信息，特別是用一個(gè)相應(yīng)的圖形，但前提是，所有的這些元素都是易于理解的。

（右上圖即為小說(shuō)式架構(gòu)，它就像是在給用戶(hù)講故事而不是干巴巴的列出各個(gè)項(xiàng)目）

7.內(nèi)部的不連貫性

假如一個(gè)網(wǎng)站的首頁(yè)用藍(lán)色文本+下劃線代表鏈接，而其他的頁(yè)面僅僅只用藍(lán)色文本卻并沒(méi)有加下劃線。當(dāng)用戶(hù)瀏覽其他頁(yè)面時(shí)就會(huì)停下來(lái)去想，“它沒(méi)有下劃線，這還是個(gè)鏈接么？”他們甚至可能不會(huì)再去關(guān)心鏈接，而會(huì)被其他頁(yè)的不統(tǒng)一性分散注意力從而影響整體的用戶(hù)體驗(yàn)。

排版錯(cuò)誤和語(yǔ)法錯(cuò)誤是一樣的。請(qǐng)你記住，最棒的用戶(hù)體驗(yàn)就是不被用戶(hù)所注意到，而像上面的錯(cuò)誤通常都會(huì)被注意到。一個(gè)元素是否與網(wǎng)站其他元素具有內(nèi)在連貫性，是否與其他網(wǎng)站元素具有連貫性（比方說(shuō)圖標(biāo)）都是至關(guān)重要的。在這些例子中，用戶(hù)都必須花費(fèi)一些時(shí)間來(lái)進(jìn)行思考和處理，因而它們占用了用戶(hù)的工作記憶。

SIPhawaii到處都是大寫(xiě)，包括字體大小和數(shù)字價(jià)格。你甚至都想不到去點(diǎn)擊漢堡圖標(biāo)，因?yàn)樗推渌W(wǎng)站上的漢堡圖標(biāo)都不一樣。（鹿：加了矩形和陰影跟少先隊(duì)三道杠一樣）

解決方案：

保持統(tǒng)一的一種風(fēng)格來(lái)貫穿整個(gè)網(wǎng)站，但說(shuō)來(lái)容易做來(lái)難，因?yàn)檫@種錯(cuò)誤往往是無(wú)意的。一個(gè)風(fēng)格指南將會(huì)大有用處。它收集了全球所有的設(shè)計(jì)決策，當(dāng)設(shè)計(jì)師需要它們的時(shí)候，就能被輕松的找到。因?yàn)轭?lèi)似于背景色、圖片尺寸和標(biāo)題排版這種細(xì)節(jié)容易被忽略，所以參考現(xiàn)成的會(huì)對(duì)設(shè)計(jì)有所幫助。

(Image: Lonely Planet)

在視覺(jué)和功能上都具有一致性的一個(gè)極好的例子就是Pinterest。不論你想要什么風(fēng)格的照片，它們的格式都是一致的。標(biāo)題、描述、作者、網(wǎng)站、收集和活動(dòng)都使用了相同的字體和排版并且在每張卡片的同一個(gè)位置所展示出來(lái)。錯(cuò)落有致的排版給了用戶(hù)更多的視覺(jué)吸引力。如果你理解其中的一張卡片，那么你就能明白他們所有的卡片。

附言：

Steve Krug說(shuō)“不要讓我思考”，或多或少表達(dá)出了用戶(hù)們的心聲。交互設(shè)計(jì)就像航行，路上所有的氣流顛簸——比如說(shuō)認(rèn)知過(guò)載——都會(huì)影響航行的狀態(tài)。設(shè)計(jì)師務(wù)必要利用一切機(jī)會(huì)去迎合用戶(hù)，所以不要讓他們想的太多。

原文作者：Danny Halarewich

翻譯：Iris_Uu

譯文地址：http://www.ui.cn/detail/200862.html

版權(quán)：人人都是產(chǎn)品經(jīng)理遵循行業(yè)規(guī)范，任何轉(zhuǎn)載的稿件都會(huì)明確標(biāo)注作者和來(lái)源，若標(biāo)注有誤，請(qǐng)聯(lián)系主編QQ：419297645