中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

作者介紹了認(rèn)知超載和工作記憶這兩個心理學(xué)概念在交互設(shè)計中的重要作用，并列舉了在設(shè)計過程中因為忽視了用戶的認(rèn)知特點可能會犯得錯誤，并給出了相應(yīng)的解決方案。因為原文里反復(fù)提到了上面兩個概念，所以我先簡單解釋一下二者的含義，也方便大家更好的理解文章的內(nèi)容。

認(rèn)知超載：

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

工作記憶：

工作記憶指的是一個容量有限的系統(tǒng)，運(yùn)用聽覺、視覺系統(tǒng)來暫時保持和存儲外界信息，也叫短期記憶，是外界信息和長期記憶之間的接口。簡單來說，工作記憶是長期記憶的先遣小分隊。

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

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

正文

所謂最好的用戶體驗就是能讓用戶毫無察覺，在界面上的操作如行云流水般順暢。用戶們越少去思考界面布局，他們就會越多得將關(guān)注點放在要完成的目標(biāo)上。而作為設(shè)計師，你的工作就是幫助用戶全神貫注的完成任務(wù)而不被多余的因素打擾。

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

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

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

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

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

在他書里提到的觀點中，以下我非常贊同的：

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

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

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

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

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

1.多余的動作

用戶所進(jìn)行的每一個步驟都會增加到他們的認(rèn)知負(fù)荷中。過多不必要的動作會破壞用戶的思路，甚至有可能激怒他們。因為他們的工作記憶都集中在完成特定的目標(biāo)上，多余的動作會迫使他們投入更多的精力，這就會增加工作記憶的負(fù)擔(dān)。最終就會耗盡用戶的耐性，掀桌子走人。

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

用戶希望知道在他們提交郵箱地址之前他們要進(jìn)入的是什么網(wǎng)站，但Touch of Modern不告訴用戶任何信息卻要求他們在第一時間進(jìn)行注冊！這個強(qiáng)制且多余的動作將會嚇跑許多潛在用戶。

解決方案：

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

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

點擊“郵件”圖標(biāo) 點擊到“發(fā)送給”的輸入框 填寫郵箱地址 點擊“主題”輸入框 等等吧啦吧啦吧…….現(xiàn)在，我們回頭來看這些步驟并找出多余的動作。第二步完全可以刪除，因為你可以讓光標(biāo)自動停在“發(fā)送給”這一欄而不用讓用戶自己動手點擊。

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

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

2.過度的刺激

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

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

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

解決方案：

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

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

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

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

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

(Image: Groupon)

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

(Image: OTHR)

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

3.過多的選擇

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

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

(Image: Rakuten)

即便是知名網(wǎng)站，比如說樂天，也會犯類似的錯誤。因為他們沒有很好的理解這個設(shè)計準(zhǔn)則。給用戶需要的而不是給他們認(rèn)為他們需要的。

解決方案：

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

(Image: Amazon)

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

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

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

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

(Image: Arngren)

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

解決方法：

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

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

(Image: Etsy)

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

長的信息填寫表單是非常嚇人的，有時甚至?xí)挥脩羲z棄，那么試試一種多步驟的表單吧。你可以將表單的信息分在不同的頁面里。記得一定要有一個進(jìn)度標(biāo)記來讓用戶知道還剩下多少頁。

(Image: Virgin Atlantic)

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

5.模棱兩可的界面

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

(Image: SpeedCrunch)

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

解決方案：

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

(Image: Home Depot)

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

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

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

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

(Image: Slack)

6.不易尋找到的頁面

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

(Image: Mojo Yogurt)

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

(Image: Mojo Yogurt)

解決方法：

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

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

(Image: Rosenfeld Media)

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

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

(Image: Waaark)

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

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

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

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

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

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

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

SIPhawaii到處都是大寫，包括字體大小和數(shù)字價格。你甚至都想不到去點擊漢堡圖標(biāo)，因為它和其他網(wǎng)站上的漢堡圖標(biāo)都不一樣。（鹿：加了矩形和陰影跟少先隊三道杠一樣）

解決方案：

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

(Image: Lonely Planet)

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

附言：

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

原文作者：Danny Halarewich

翻譯：Iris_Uu

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

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