減輕用戶思考-網(wǎng)頁(yè)交互設(shè)計(jì)別讓用戶自己猜

網(wǎng)頁(yè)上每項(xiàng)多余內(nèi)容都有可能迫使我們停下來，進(jìn)行不必要的思考。當(dāng)我們?cè)L問Web的時(shí)候，每個(gè)網(wǎng)頁(yè)設(shè)計(jì)上 的加重用戶認(rèn)知負(fù)擔(dān)，都是非常至命的。這樣會(huì)把用育的注意力從他想要完成的任務(wù)上拉開。這種干擾也許很輕微，但它們會(huì)累積起來， 有時(shí)候這樣的干擾不用太多，就足以讓我們抓狂。試想這樣的網(wǎng)頁(yè)，你還有下一次訪問的欲望嗎？所以減少網(wǎng)頁(yè)設(shè)計(jì)中的“思考項(xiàng)”是網(wǎng)頁(yè)設(shè)計(jì)師們必要的必修課。

以 前經(jīng)常吃公司旁邊的食堂，人多，排隊(duì)。夏天的時(shí)候，我們總要找一個(gè)靠窗口通風(fēng)好的地方坐，沒有空調(diào)只有風(fēng)扇，風(fēng)扇很多，開關(guān)都集中在一個(gè)地方，應(yīng)該是方便 操作人員統(tǒng)一管理，有時(shí)自己頭上的風(fēng)扇沒開，當(dāng)我要去開這個(gè)風(fēng)扇時(shí)，麻煩來了，很多排的風(fēng)扇開關(guān)，到底哪個(gè)是我頭上的呢？

生活中有很多總讓我們感覺莫名其妙，或者停下來需要思考的情況，有時(shí)不得不求助，到了互聯(lián)網(wǎng)上，可能很多情況發(fā)生了也沒什么求助的方法，只能自己猜，不猜了就只好關(guān)掉。

網(wǎng)頁(yè)上每項(xiàng)內(nèi)容都有可能迫使我們停下來，進(jìn)行不必要的思考。比如內(nèi)容信息看不懂，操作功能不明確。例如，文案。常見的罪魁禍?zhǔn)资悄切┖芸峄蛘咦砸詾楹苈斆鞯拿?、帶有營(yíng)銷傾向的名字、和具體公司有關(guān)的名字以及生僻的技術(shù)名詞。

當(dāng) 我們?cè)L問Web的時(shí)候，每個(gè)問號(hào)（讓用戶不明白的地方）都會(huì)加重我們的認(rèn)知負(fù)擔(dān)，把我們的注意力從要完成的任務(wù)上拉開。這種干擾也許很輕微，但它們會(huì)累積 起來， 有時(shí)候這樣的干擾不用太多，就足以讓我們抓狂。況且，人們通常不喜歡苦苦思索背后的原理。建造網(wǎng)站的人沒有讓它們明白易懂（而且容易使用）會(huì)讓我們對(duì)這個(gè) 網(wǎng)站以及網(wǎng)站的發(fā)布者失去信心。

按用戶心智模型去設(shè)計(jì)產(chǎn)品，下面列出一大堆訪問者在訪問網(wǎng)站時(shí)不應(yīng)該花時(shí)間思考的事，例如：

• 我在什么位置？

• 我該從哪里開始？

• 他們把××放在什么地方了？

• 這個(gè)頁(yè)面上最重要的是什么？

• 為什么他們給它取這個(gè)名字？

不讓用戶思考過多，原則上就是設(shè)計(jì)符合用戶心智模型。大致可以從下面幾個(gè)方面來講：

1文案：需要讓人容易理解，快速記憶。根據(jù)不同產(chǎn)品定位，找到恰當(dāng)?shù)那腥朦c(diǎn)，文案過長(zhǎng)或者使用用戶不理解的情景，如技術(shù)用詞，營(yíng)銷用詞等，都會(huì)使人不知所云。

省略多余的文案，比如過分修飾，歡迎語(yǔ)，多余指示性語(yǔ)句，這些羅嗦的詞語(yǔ)會(huì)影響用戶對(duì)關(guān)鍵信息的閱讀理解和判斷，必須干掉。

2圖形：好的圖形表達(dá)是優(yōu)于文字的，但是圖形沒有把內(nèi)容表示明確，反而適得其反，給用戶造成理解上的困擾。

很多情況下，我們好像都很喜歡做一些很炫的icon來表達(dá)某些內(nèi)容，這些是會(huì)起到吸引性，但要記住一點(diǎn)，你的圖形是不是很好的闡釋了內(nèi)容，如果做不到，那就去掉吧。不如放大標(biāo)題來的更好。

每個(gè)網(wǎng)站需要有它的獨(dú)特性來吸引用戶，但表達(dá)這些獨(dú)特性的元素，例如圖形，一定不能對(duì)用戶理解內(nèi)容產(chǎn)生干擾。很重要的一點(diǎn)，我們?cè)O(shè)計(jì)是要表達(dá)什么，為了什么，怎樣更好的幫助用戶來理解這些表達(dá)，是我們一定要做到的。

網(wǎng)站不是炫技場(chǎng)，設(shè)計(jì)要為內(nèi)容服務(wù)。

3信息：信息其實(shí)是文案、圖形等形式的混合體。信息之間，是否建立了相應(yīng)的關(guān)聯(lián)度，不相關(guān)聯(lián)的信息之間是否產(chǎn)生了干擾。

大量的信息是否進(jìn)行了合理的分類，以減輕用戶的尋找時(shí)間。信息分類處理上，有個(gè)深廣度問題，廣度站點(diǎn)因?yàn)閷蛹?jí)少，可以讓用戶不需要點(diǎn)擊過多就可以到達(dá)底層；深度站點(diǎn)需要點(diǎn)擊更多次，但它在每一層次上可以做到讓人的思考最小化。

所以，有效合理的信息分類可以幫助用戶快速準(zhǔn)確瀏覽和完成任務(wù)。

4引導(dǎo)：通過菜單，導(dǎo)航，面包屑等手段有效引導(dǎo)用戶行為路徑，讓用戶方便去他想去的地方，回他想回的地方。

在 路邊，我們希望有路牌指示；在雜志上，我們希望前面有目錄，在每頁(yè)我們還希望有頁(yè)碼，在網(wǎng)站設(shè)計(jì)中，我們引導(dǎo)好用戶需要瀏覽的內(nèi)容；在用戶需要的時(shí)候給予 網(wǎng)站工具來方便完成任務(wù)，在這點(diǎn)上，很多時(shí)候我們總是希望上新功能，把功能做的突出，殊不知用戶是不是也這樣想，他到底在這里需要什么。

5操作方式：充分順應(yīng)用戶的心理思維，來設(shè)計(jì)功能的操作，可以使用戶快速上手。

汽車方向盤往左打，汽車就往左開；插排電源按下去燈亮；相關(guān)內(nèi)容旁邊放置相關(guān)操作，操作尖頭朝下說明有下拉內(nèi)容，等等。這些操作方式都是要符合用戶心智模型的。

6一致性：設(shè)計(jì)在同產(chǎn)品（甚至同類產(chǎn)品）中保持一致性，可以大大降低用戶理解成本，使用戶快速上手，增加用戶的使用率。

這 里的一致性包括顏色，形狀，內(nèi)容，操作方式。比如紅綠燈如果各地都不一樣，外地人來了豈不會(huì)導(dǎo)致交通混亂。同一個(gè)網(wǎng)站也應(yīng)該有這樣的一致性，有些都可以保 持行業(yè)的一致性，比如頁(yè)面上使用一樣的翻頁(yè)等，既可以降低制作成本，又對(duì)用戶的使用有良好的認(rèn)知幫助。到一定程度，也會(huì)提升一個(gè)品牌的認(rèn)知，比如阿迪達(dá)斯 到處使用的三道杠。

下面看個(gè)例子：這個(gè)是某期寶貝傳奇的宣傳頁(yè)面，進(jìn)來以后甚是讓人看不懂！沒有很好的根據(jù)用戶心里預(yù)知和相關(guān)內(nèi)容的合理放置來設(shè)計(jì)。這只是一個(gè)活動(dòng)，如果是一個(gè)長(zhǎng)期產(chǎn)品，用戶接受程度可想而知。

我 們都知道別讓我思考最經(jīng)典的頁(yè)面是google首頁(yè)：logo起到網(wǎng)站認(rèn)知作用，搜索框緊跟logo并最大化使其最容易被使用，其他信息按歸類放置，并根 據(jù)等級(jí)高低依次減弱。雖然大多產(chǎn)品都有其他商業(yè)性需求考慮，但設(shè)計(jì)師不能被這些沖昏頭腦，機(jī)械性的表現(xiàn)內(nèi)容。多花心思把繁雜信息理清楚，要知道，設(shè)計(jì)師都 不是很清楚信息的關(guān)系，用戶就更不會(huì)明白。