1. 程式人生 > >UI設計學習培訓大綱分享深度解析互動設計原則

UI設計學習培訓大綱分享深度解析互動設計原則

尼爾森(Jakob Nielsen)是一位人機互動學博士,於1995年1月1日發表了【十大可用性原則】。

1995年以來,尼爾森向成千上萬的 Web 設計師傳授 Web 易用性方面的知識,儘管他的一些觀點可能帶來爭議,至少在 Web 設計師眼中,他是 Web 易用性領域的頂尖領袖。

尼爾森十大可用性原則是產品設計與使用者體驗設計的重要參考標準,值得深入研究與運用。

目錄:

原則一:狀態可見原則;

原則二:環境貼切原則;

原則三:使用者可控原則(撤銷重做原則);

原則四:一致性原則;

原則五:防錯原則;

原則六:易取原則;

原則七:靈活高效原則;

原則八:優美且簡約原則(易掃原則);

原則九:容錯原則;

原則十:人性化幫助原則。

原則一:狀態可見原則

使用者在網頁上的任何操作,不論是單擊、滾動還是按下鍵盤,頁面應即時給出反饋。"即時"是指,頁面響應時間小於使用者能忍受的等待時間。

1、當用戶觸發了操作時,需要即時給出使用者操作的反饋,能夠讓使用者知道發生了什麼,當前操作是否成功、是否有效。操作因為網路原因或者其他一些因素導致操作失敗時,是否繼續進行請求,還是直接給出操作失敗的提示?

如果說操作成功,但是需要進行一段時間才能加載出結果,此時則需要讓使用者知道操作已經成功,比如通過進度條、旋轉的菊花,或者其他一些動畫效果來讓使用者知道正在載入。

比如今日頭條的下拉重新整理功能:剛開始下拉的時候顯示下拉推薦,下拉一段距離時顯示鬆開推薦,鬆開時顯示推薦中,重新整理完成時顯示有10條更新。

2、使用者當前所處的位置是否明顯?比如在導航欄的中間的標題會標註出來使用者當前所在的位置,而在底部的Tab中則會通過互動後的另一種樣式來讓使用者知道當前的位置。通過這些提示能夠讓使用者知道當前位於產品中的位置,防止使用者迷失。

比如左圖中iOS11的風格,把標題加大,讓使用者更清楚的知道當前位置。右圖將附近商戶標紅並加上下劃線來標註出使用者所在位置。

原則二:環境貼切原則

網頁的一切表現和表述,應該儘可能貼近使用者所在的環境(年齡、學歷、文化、時代背景),而不要使用第二世界的語言。《iPhone人機互動指南》裡提到的隱喻與擬物化是很好的實踐。此外,還應該使用易懂和約定俗成的表達。

1、所用圖示和介面表達的意思與本身意思和環境是否貼切,是否會有歧義。

比如左圖iPhone的計算器介面,與現實生活中的計算器的樣式差不多,右圖中的微信的紅包設計,根據中國人的傳統文化習俗來進行設計,與現實生活中的紙質紅包一樣,都符合環境貼切原則。

2、應用是否根據使用者定位來做相應的設計。(根據使用者人群來進行頁面風格的確定)

比如微博的國際版頁面風格會比國內版的簡潔很多,結構和互動方式都會不一樣,另外國際版介面的佈局使用的設計風格完全遵守谷歌的設計規範。

3、應用所用語言是否通俗易懂

如下面左圖中,使用者會疑惑自適應視窗和最佳比例的差別,改成有圖的自適應寬度,給予使用者通俗易懂的語言。

原則三:使用者可控原則(撤銷重做原則)

為了避免使用者的誤用和誤擊,網頁應提供撤銷和重做功能。

比如微信的聊天可以撤回,還有重做功能,這樣發現寫錯的字以後就可以直接修改,而不用去全部寫一遍了,還有些軟體裡的刪除功能是直接彈出一個toast提示已刪除,是否撤銷。

原則四:一致性原則

同一用語、功能、操作保持一致。同樣的語言,同樣的情景,操作應該出現同樣的結果。

1、結構一致性

保持一種類似的結構,新的結構變化會讓使用者思考,規則的排列順序能減輕使用者的思考負擔;

比如美團的個人中心都是卡片,支付寶的個人中心都是列表。

2、色彩一致性

產品所使用的主要色調應該是統一的,而不是換一個頁面顏色就不同;

3、操作一致性

能讓產品更新換代時仍然讓使用者保持對原產品的認知,減少學習成本;

比如QQ的訊息列表都是通過點選的操作方式進入聊天視窗。

4、反饋一致性

使用者在點選按鈕或者條目的時候,反饋效果應該是一致的;

比如QQ的訊息列表,點選郵箱提醒,服務號和訊息聊天的頁面都是由右往左滑出,點選頂部左上角的返回按鈕都是從左往右滑回。

5、文字一致性

產品中呈現給使用者閱讀文字的大小、樣式、顏色、佈局等都應該是一致的;

原則五:防錯原則

通過網頁的設計、重組或特別安排,防止使用者出錯。這裡的防錯是在錯誤發生之前進行的,用心設計來防止使用者出錯,而不是出現錯誤之後再給出提示。

1、如果某些操作不能進行,那就置灰或隱藏,不要在使用者點選後才提醒不能操作。

比如使用者未填寫資訊的時候按鈕給予置灰。

2、使用者進行不可逆操作時給出提示。

比如微信和QQ髮狀態時,點選返回按鈕出現的提示彈窗。

原則六:易取原則

儘量減少使用者對操作目標的記憶負荷,動作和選項都應該是可見的,即把需要記憶的內容擺上檯面。

1、二次確認對話框出現可以很好地減少使用者前後的記憶。

比如左圖簡書文章刪除時二次確認刪除內容,右圖天貓的付款前確認訂單內容。

2、別讓使用者去回想我剛才做了什麼選擇,讓他隨時能知道自己做了什麼選擇。

比如餓了麼篩選以後知道自己做了什麼篩選,而不用去記憶自己做了什麼篩選。

原則七:靈活高效原則

為大多數使用者設計,不要低估,也不可輕視,保持靈活高效。也就是永遠為中間使用者進行設計,同時也要注意新手使用者和專家使用者,能夠引導新手使用者成為中間使用者,同時也不要阻礙中間使用者成為專家使用者。

比如剛下載一個app的時候,特別是剛玩一款遊戲的時候,會有新手引導,這時也要允許已經會的玩家跳過引導。

比如微信首頁是給大多數使用者設計使用的,同時也有給專家使用者使用的發現頁管理,專家使用者可以用來訂製發現頁的內容。

原則八:優美且簡約原則(易掃原則)

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

比如支付寶的頁面,從上到下,重要程度遞減,並且突出了收付款等常用功能,在新版的頁面將服務提醒的功能轉移到二級頁面。

原則九:容錯原則

錯誤資訊應該用語言表達(不要用程式碼),較準確地反應問題所在,並且提出一個建設性的解決方案。

比如airbnb登入時手機號位數不對時,後面沒有打勾的標誌,並且不能點下一步的按鈕,這就準確的反應出問題所在了。

比如在簡書上,點選一個連結,偶爾會出現下圖的情形,即頁面找不到。簡書提供了詳盡的說明文字和指導方向,而非直接使用404程式碼。

原則十 人性化幫助

如果系統不使用文件是最好的,但是有必要提供幫助和文件。任何資訊應容易去搜索,專注於使用者的任務,列出具體的步驟來進行。幫助性提示最好的方式是:1、無需提示;2、一次性提示;3、常駐提示;4;幫助文件。

如新手引導頁,常駐提示,個人中心的幫助入口。

以上就是我對尼爾森的十大互動設計原則的理解,如有覺得不對的地方歡迎斧正,謝謝閱讀。