前言:Jakob Nielsen(雅各布·尼爾森)的十大交互設(shè)計(jì)原則。它們被稱(chēng)為“啟發(fā)式”,因?yàn)樗鼈兪菑V泛的經(jīng)驗(yàn)法則,而不是特定的可用性指導(dǎo)原則。因此,我們不能把它上升為一種標(biāo)準(zhǔn),而是應(yīng)該當(dāng)做一種經(jīng)驗(yàn)來(lái)學(xué)習(xí),然后跟現(xiàn)實(shí)中的設(shè)計(jì)結(jié)合來(lái)使用。接下來(lái),作者通過(guò)一些具體的實(shí)例來(lái)跟大家深度解析尼爾森十大交互設(shè)計(jì)原則在設(shè)計(jì)中的用法。
一、雅各布·尼爾森(Jakob Nielsen)簡(jiǎn)介:
雅各布·尼爾森(Jakob Nielsen)是畢業(yè)于哥本哈根的丹麥技術(shù)大學(xué)的人機(jī)交互博士 , 他擁有79項(xiàng)美國(guó)專(zhuān)利,專(zhuān)利主要涉及讓互聯(lián)網(wǎng)更容易使用的方法。尼爾森在2000年6月,入選了斯堪的納維亞互動(dòng)媒體名人堂,2006年4月,并被納入美國(guó)計(jì)算機(jī)學(xué)會(huì)人機(jī)交互學(xué)院,被賦予人機(jī)交互實(shí)踐的終身成就獎(jiǎng) 。他還被紐約時(shí)報(bào)稱(chēng)為“Web 易用性大師”,被 Internet Magazine 稱(chēng)為 “易用之王”。
二、尼爾森十大交互設(shè)計(jì)原則深度解析:
原則一:狀態(tài)可見(jiàn)原則(Visibility of system status )
系統(tǒng)應(yīng)該讓用戶時(shí)刻清楚當(dāng)前發(fā)生了什么事情,也就是快速的讓用戶了解自己處于何種狀態(tài)、對(duì)過(guò)去發(fā)生、當(dāng)前目標(biāo)、以及對(duì)未來(lái)去向有所了解,一般的方法是在合適的時(shí)間給用戶適當(dāng)?shù)姆答仯乐褂脩羰褂贸霈F(xiàn)錯(cuò)誤。
案例一:比如今日頭條的下拉刷新功能:頭條頁(yè)面的刷新功能使用的是下拉刷新的交互方式,當(dāng)用戶下拉頁(yè)面時(shí),頁(yè)面狀態(tài)欄跟內(nèi)容區(qū)中間會(huì)出現(xiàn)“新年快樂(lè)”的提示,當(dāng)我松開(kāi)頁(yè)面中間會(huì)出現(xiàn)“推薦中”的動(dòng)態(tài)提示,加載完畢之后中間出現(xiàn)一條“今日頭條推薦引擎有8條更新”的文字提示;這一系列的提示就是我們所說(shuō)的動(dòng)態(tài)可見(jiàn)原則,如下圖:
案例二:比如安心記加班中關(guān)注和取消圈子功能:當(dāng)用戶點(diǎn)擊關(guān)注按鈕之后,頁(yè)面中間會(huì)出現(xiàn)一個(gè)“關(guān)注成功”的提示,停留2S之后消失;類(lèi)似這種,操作之后的提示也是狀態(tài)可見(jiàn)原則的一中,如下圖:
原則二:環(huán)境貼切原則(Match between system and the real world)
軟件系統(tǒng)應(yīng)該使用用戶熟悉的語(yǔ)言、文字、語(yǔ)句,或者其他用戶熟悉的概念,而非系統(tǒng)語(yǔ)言。軟件中的信息應(yīng)該盡量貼近真實(shí)世界,讓信息更自然,邏輯上也更容易被用戶理解。
案例一:比如計(jì)算機(jī)的軟件界面設(shè)計(jì):現(xiàn)在我們手機(jī)中的計(jì)算器軟件設(shè)計(jì)界面,基本上跟我們現(xiàn)實(shí)中使用的計(jì)算器的樣式差不多,下圖左一是我們現(xiàn)實(shí)中是使用的計(jì)算器,左二、三依次為錘子手機(jī)和蘋(píng)果X自帶計(jì)算器軟件的界面,真的是很相似,這樣設(shè)計(jì)能讓用戶很快上手,易于操作,因?yàn)楝F(xiàn)實(shí)生活中用戶已經(jīng)很熟悉計(jì)算器的使用方法了,這就是環(huán)境貼切原則:
案例二:比如新浪微博安卓的中文版和國(guó)際版:微博的中文版和國(guó)際版的logo和內(nèi)部頁(yè)面風(fēng)格、語(yǔ)言、結(jié)構(gòu)布局包括交互方式也不一樣;考慮到國(guó)外用戶的使用,軟件的語(yǔ)言默認(rèn)為英文,當(dāng)然還支持各種語(yǔ)言版本,可以根據(jù)所需在設(shè)置中調(diào)整,另外國(guó)際版界面的布局使用的設(shè)計(jì)風(fēng)格完全遵守谷歌的設(shè)計(jì)規(guī)范,這就是環(huán)境貼切原則,具體看下圖:
原則三:用戶可控原則(User control and freedom)
用戶常常會(huì)誤觸到某些功能,我們應(yīng)該讓用戶可以方便的退出。這種情況下,我們應(yīng)該把“緊急出口”按鈕做的明顯一點(diǎn),而且不要在退出時(shí)彈出額外的對(duì)話框。很多用戶發(fā)送一條消息、總會(huì)有他忽然意識(shí)到自己不對(duì)的地方,這個(gè)叫做臨界效應(yīng);所以最好支持撤銷(xiāo)/重做功能。
案例一:比如微信聊天中的撤回功能:兩個(gè)人在微信中聊天的時(shí)候,我發(fā)了一條消息或者表情,突然覺(jué)得不合適,我可以在長(zhǎng)按這條消息或者表情,在出現(xiàn)的選擇框中選擇撤回,然后重新編輯發(fā)送,來(lái)避免一時(shí)沒(méi)想好而錯(cuò)發(fā)消息可能給對(duì)方或者自己造成困擾,這就是用戶可控原則,具體看下圖:
案例二:比如谷歌相冊(cè)刪除照片之后的撤銷(xiāo)功能:在使用谷歌相冊(cè)的時(shí)候,我們會(huì)對(duì)照片做一些操作,比如照片的刪除,當(dāng)我在谷歌相冊(cè)中刪除一張照片的時(shí)候,它會(huì)在底部出現(xiàn)一條提示框,框內(nèi)后邊就會(huì)出現(xiàn)撤銷(xiāo)的提示,這也是用戶可控原則的體現(xiàn),具體看下圖:
原則四:一致性原則(Consistency and standards)
對(duì)于用戶來(lái)說(shuō),同樣的文字、狀態(tài)、按鈕,都應(yīng)該觸發(fā)相同的事情,遵從通用的平臺(tái)慣例;也就是,同一用語(yǔ)、功能、操作保持一致。軟件產(chǎn)品的一致性包括以下五個(gè)方面:
結(jié)構(gòu)一致性:保持一種類(lèi)似的結(jié)構(gòu),新的結(jié)構(gòu)變化會(huì)讓用戶思考,規(guī)則的排列順序能減輕用戶的思考負(fù)擔(dān);
案例:例如微信每個(gè)模塊的條目布局:微信中每個(gè)模塊的條目都有統(tǒng)一的“圖標(biāo)+文字信息”的結(jié)構(gòu)樣式,能讓用戶快速了解朋友圈、掃一掃、搖一搖、看一看、搜一搜、附近的人、漂流瓶、購(gòu)物、游戲及小程序等功能都是作什么的,這就是結(jié)構(gòu)一致性的體現(xiàn),如下圖:
色彩一致性:產(chǎn)品所使用的主要色調(diào)應(yīng)該是統(tǒng)一的,而不是換一個(gè)頁(yè)面顏色就不同;
案例:例如網(wǎng)易云音樂(lè)的顏色:網(wǎng)易云音樂(lè)的圖標(biāo)顏色與界面的主色均為紅色,也包括其中一些標(biāo)簽和強(qiáng)調(diào)的文字顏色都是紅色,整個(gè)界面除了圖片的有效信息外,都通過(guò)灰、白、紅色來(lái)呈現(xiàn),界面保持了很好的一致性,這就是色彩一致性原則,如下圖:
操作一致性:能讓產(chǎn)品更新?lián)Q代時(shí)仍然讓用戶保持對(duì)原產(chǎn)品的認(rèn)知,減小用戶的學(xué)習(xí)成本;
案例:比如安卓版微信、支付寶和釘釘APP中左上角的返回操作:它們?nèi)齻(gè)安卓版的應(yīng)用內(nèi)返回上一級(jí)操作,都是通過(guò)頂部左側(cè)的返回按鈕進(jìn)行的,當(dāng)然也可以通過(guò)安卓的物理返回鍵,這就是操作一致性的體現(xiàn),如下圖:
反饋一致性:用戶在操作按鈕或者條目的時(shí)候,點(diǎn)擊的反饋效果應(yīng)該是一致的;
案例:比如安卓版手機(jī)QQ信息列表的打開(kāi)方式:它的信息都是列表式結(jié)構(gòu),不管你點(diǎn)擊那一行條目,下一級(jí)界面都是由右往左滑出,點(diǎn)擊頂部左上角的返回按鈕會(huì)從左往右滑回,體驗(yàn)相當(dāng)一致;這就是反饋一致性的體現(xiàn),如下動(dòng)圖:
文字一致性:產(chǎn)品中呈現(xiàn)給用戶閱讀的文字大小、樣式、顏色、布局等都應(yīng)該是一致的;
案例:例如微信幾個(gè)關(guān)鍵界面的字體:下圖我用紅色框框起來(lái)的條目部分的文字,三個(gè)主界面不盡相同,但是,字體大小、顏色、布局的樣式都一樣,這樣讓整個(gè)APP視覺(jué)上看起來(lái)很舒服,這就是字體一致性,因此,我們?cè)谧鲆曈X(jué)設(shè)計(jì)的時(shí)候盡量使用同意風(fēng)格的文字。