提高介面互動體驗的“葵花寶典”

千千小助手發表於2018-09-05

本次分享的是在介面設計中最長實用也最容易被忽略的十個原則,就是尼爾森十大可用性設計原則,這是十分基礎且重要的原則。原則是死的,如何正確的結合到實際運用中才是關鍵。接下來我會通過對每一個原則的理解和現在移動端產品和結合進行分析,希望可以更深入的記住他們。


什麼是尼爾森

尼爾森(Jakob Nielsen)是一位人機互動學博士,於1995年1月1日發表了「十大可用性原則」。1995年以來,他通過自己的 Alertbox 郵件列表以及useit.com 網站,向成千上萬的 Web 設計師傳授 Web 易用性方面的知識,儘管他的一些觀點可能帶來爭議,至少在 Web 設計師眼中,他是 Web 易用性領域的頂尖領袖。


十大原則解析與案例

一、狀態可見原則

使用者在手機上的任何操作,上下滑動重新整理,點選跳轉,頁面都應該即時給出饋。“即時”是指,頁面響應時間小於使用者能忍受的等待的間。


案例1_改變顏色狀態:

如下圖微信中點讚的樣式,手指觸碰到按鈕時,顏色加深,通過改變顏色告知使用者目前按鈕的狀態已被啟用。

Image title

案例2_形狀改變:

如下圖網易雲音樂中,當我們點選新增關注時,介面會中關注標籤的狀態會及時更新為“對號”展示給使用者,通過點選後的形狀的改變告知使用者操作已完成。這種狀態可見性可以清晰的讓使用者感受到頁面即時給出的反饋。

Image title

案例3_新增動效:

如下圖,當我們下拉介面重新整理時,介面上方會出現動畫載入的效果。這種狀態可見性是最明顯的,可以清晰的讓使用者感受到頁面即時給出的反饋。

Image title

上面是關於狀態可見性原則在產品中的常見案例,當然除了這三個還有很多,例如點選列表時,介面橫滑時等。我們在設計實際介面中,一定要謹記設計出對應的可見狀態,避免使用者使用時以為操作無效。


二、環境貼切原則

簡單的說就是產品設計符合真實世界中使用者的使用習慣和思考邏輯,儘可能貼近使用者所在的環境(年齡、學歷、文化、時代背景),而不要使用第二世界的語言,應該使用易懂和約定俗成的表達。


案例1_產品風格定位:

如下圖DaDaBaby和TutorABC同是學英語的產品,由於產品所對應使用者的年齡,學歷,文化不同,介面的風格也會發生改變。DaDaBaby是針對幼兒學英語,所以介面風格活潑可愛,顏色鮮豔;而TutorABC是針對成年人學英語,介面簡潔,嚴肅。這就是產品風格的環境貼切。

Image title

案例2_產品換膚:

如下圖優酷為視訊類產品和餓了麼為外賣類產品,雖然他們的定位不同,但是在世界盃期間,都替換了介面的皮膚,例如優酷底部標籤欄的圖示,餓了麼中間分類入口的圖示。這就是環境貼切原則的體現。在特殊的時間裡我們也可以通過改變介面的皮膚增加產品與當下環境的貼切性。

Image title

上面是關於環境貼切原則的案例,我們在設計介面時必須知道產品的使用人群,產品的型別,例如商務類產品和娛樂類產設計出來就會截然不同。這是產品風格的環境貼切。除了產品大方向要貼切,我們也可通過一些特殊的節日改變產品的皮膚,讓使用者在短時間內加強和產品的共通性。


三、撤銷重做原則

給使用者更多自主操作權,當使用者在使用產品過程中產生錯誤的操作時,應提供使用者更多的解決方案,比如撤銷或重做等功能。


案例:

如下圖微信中我們需要考慮到使用者的出錯的情況,例如在用微信拍照時,如果效果不夠理想就可選擇左側的撤銷按鈕,在未傳送情況下進行重新拍照;另外一種情況就是傳送後也可以通過長按當前傳送的圖片,在出現的功能選單中選擇撤回。

Image title

上面是撤回重做原則的案例,我們在做介面時要根據不同階段以及產品給使用者新增該功能,如果是一次性考試型別的產品就不適合加入該功能,需要使用者填寫時更加小心謹慎。


四、一致性原則

產品的功能操作、模組樣式、頁面佈局、資訊提示、顏色運用的一致性,避免使用者突然跳轉後感覺在另一個產品中的錯覺,影響使用者對產品的整體體驗。


案例1:主色調一致

如下圖鯊魚記賬,從產品的LOGO到閃屏介面再到裡面的主頁介面、圖示、按鈕等顏色都用的是統一的黃色作為主色,加深使用者對品牌色的記憶。

Image title

案例2:互動一致

產品或者系統內部的互動方式應該一致,這會讓使用者對產品產生信賴感和控制感。例如下圖微信會遵循在不同系統中的互動方式,iOS系統中刪除列表的互動方式是向左滑動。而在Android系統中則是長按需要刪除的列表。這就是遵照已有的系統互動方式互動的一致性。

Image title

一致性原則除了上面說的還有語言的統一,功能的統一等等。對於我們來說,設計上的統一是必須要做的,但是往往我們在追求視覺效果的時候卻忽略了這些細節的問題。


五、防錯原則

比出現錯誤資訊提示更好的是更用心的設計防止這類問題發生。在使用者選擇動作發生之前,就要防止使用者容易混淆或者錯誤的選擇。對產品進行不同的操作、重組或特別安排,防止使用者出錯。


案例:

如下圖馬蜂窩的選擇日期功能,為了防止使用者錯誤的選擇錯誤,把當天日期之前的日期都設定為不可選擇。再比如很多表單頁,當內容資訊未填寫完時,按鈕為灰色不可點選的樣式。避免使用者在未填寫完之前就點選提交按鈕。

Image title

六、易取原則

儘量減少使用者對操作目標的記憶負荷,動作和選項都應該是可見的。使用者不必記住一個頁面到另一個頁面的資訊。系統的使用說明應該是可見的或者是容易獲取的。


案例:

為了讓大家更好的理解什麼是易取原則,我更改了京東的彈窗介面,(如下圖)京東到家為發現新版本的彈窗提示,在彈窗描述中告知使用者需要通過去App Store進行操作更新,點選確定後返回首頁。導致使用者需要記住路徑和方法,然後再去操作,如果流程複雜,使用者需要反覆切換確認。

Image title

接下來我們在看看正確的姿勢是什麼。(如下圖)當選擇立即下載時會自己跳到App Store的更新介面,只要點選更新即可,不需要使用者記錄整個過程。當更新完成後,App Store中的更新按鈕變成開啟按鈕,可以直接開啟京東到家的首頁,這個流程不需要使用者提取任何記憶。

Image title

七、靈活高效原則

中級使用者的數量遠高於初級和高階使用者數。為大多數使用者設計,不要低估,也不可輕視,保持靈活高效。


案例:

這個原則就是告訴我們每個產品針對的使用者不可能是所有使用者,都會有自己的適用人群,我們需要針對主要的使用者去設計,而不能僅僅為了一小部分使用者進行極端設計,滿足大部分使用者的使用需求才是最重要。

Image title

八、易掃原則

網際網路使用者瀏覽的動作不是讀,不是看,而是掃。易掃,意味著突出重點,弱化和剔除無關資訊。


案例:

如下圖網易新聞的詳情頁,很多設計師對於這類純文字的介面總是不削一顧,感覺沒有什麼難度,也不需要什麼設計,那麼我在左側放置了一篇無設計,只是文字排列的一個介面。右側則是網易新聞的設計介面,可以明顯看出,左側的介面找不到重點內容和標題,沒有主次。而右側的介面通過文字變化,段與段的間距等設計手段讓使用者在讀文時可以很容易的掃視通篇的主要內容。

Image title

九、容錯原則

幫助使用者從錯誤中恢復,將損失降到最低。如果無法自動挽回,則提供詳盡的說明文字和指導方向,而非程式碼,比如404。


案例:

為了避免造成使用者的損失,我們需要在重要事件中給出合理的文字說明和指導,比如有道雲筆記中告訴使用者“檔案刪除後將無法恢復”,就給使用者一次思考的時間,避免一時誤刪,造成損失。iPhone自帶的備忘錄給使用者的容錯空間更大,刪除後可以在30天內找回。另外,對於容錯程度的大小還是取決於產品使用者群的需要,並不是越大越好。

Image title

十、人性化幫助原則

幫助性提示最好的方式是:1、無需提示;2、一次性提示;3、常駐提示;4;幫助文件。


案例:

如下圖對於初次使用產品的使用者來說,可能不知道表單裡面需要填寫什麼,如果沒有幫助性文件的提示,很容易出現錯誤。因此我們可以增加一些填寫前的文件幫助,如每日優鮮的截圖。還有在我們剛下次一款產品時,如DaDaBaby的截圖,會提供幫助介面,幫使用者在最短的時間內瞭解產品的主要功能及用法。

Image title

如果在使用產品時存在一些使使用者困惑的敏感資訊時,我們需要對其進行提醒說明,甚至要做出教學類的介面進行輔助。


總結

十大原則很容易記住,但我們的目的絕對不是簡單地記住它,我們要在實際設計中有效的運用才是關鍵,無論是產品、互動還是設計,在設計產品方面如果拿捏不準都可以回想一下這是個原則,也許會有很大的幫助。


來源:UI中國


相關文章