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