交互設計原則

尼爾森十大交互設計原則

一、狀態可見原則（Visibility of system status ）

系統應該讓用戶時刻清楚當前發生了什麼事情，也就是快速的讓用戶瞭解本身處於何種狀態、對過去發生、當前目標、以及對將來去向有所瞭解，通常的方法是在合適的時間給用戶適當的反饋，防止用戶使用出現錯誤。

實例分析1： 好比微博的下拉刷新功能：微博頁面的刷新功能使用的是下拉刷新的交互方式，當用戶下拉頁面時，頁面狀態欄跟內容區中間會出現「下拉刷新/釋放更新」的提示，當我鬆開頁面中間會出現「加載中」的動態提示，加載完畢以後中間出現一條「更新了XX條微博」的文字提示；這一系列的提示就是咱們所說的動態可見原則，以下圖：

實例分析2： 好比房天下房源詳情頁的收藏子功能：當用戶點擊收藏按鈕以後，頁面中間會出現一個「收藏成功」的彈窗，而且彈窗底部爲以後須要前往的頁面進行方向性的指引，操做以後的提示也是狀態可見原則的一中，當用戶取消收藏以後，頁面中間會出現一個「已取消收藏」的提示，停留3S以後消失，以下圖：

2：環境貼切原則（Match between system and the real world）

軟件系統應該使用用戶熟悉的語言、文字、語句，或者其餘用戶熟悉的概念，而非系統語言。軟件中的信息應該儘可能貼近真實世界，讓信息更天然，邏輯上也更容易被用戶理解。

實例分析1： 網易雲音樂的播放界面，仿照黑膠唱片的樣式，播放暫停也是仿照唱片的針杆，這就是環境貼切原則：

實例分析2： 好比新浪微博的中文版和國際版：微博的中文版和國際版的logo和內部頁面風格、語言、結構佈局包括交互方式也不同；考慮到國外用戶的使用，軟件的語言默認爲英文，固然還支持各類語言版本，能夠根據所需在設置中調整，另外國際版界面的佈局使用的設計風格徹底遵照谷歌的設計規範，這就是環境貼切原則，以下圖：

三、用戶可控原則（User control and freedom）

用戶經常會誤觸到某些功能，咱們應該讓用戶能夠方便的退出。這種狀況下，咱們應該把「緊急出口」按鈕作的明顯一點，並且不要在退出時彈出額外的對話框。不少用戶發送一條消息、總會有他突然意識到本身不對的地方，這個叫作臨界效應；因此最好支持撤銷/重作功能。 實例分析1： 郵箱的信息撤回功能，通常來講，相同系統內（好比網易郵箱、QQ郵箱）的郵件撤回，只要對方沒有打開，發出去的郵件都是能夠撤回的，並無時間限制，用戶也可以依此判斷髮出的信息是否已被對方閱讀。

實例分析2： 谷歌日曆內容的保存和刪除也都帶有撤回功能。

四、一致性原則（Consistency and standards）

對於用戶來講，一樣的文字、狀態、按鈕，都應該觸發相同的事情，聽從通用的平臺慣例；也就是，同一用語、功能、操做保持一致。軟件產品的一致性包括如下五個方面：

①結構一致性：保持一種相似的結構，新的結構變化會讓用戶思考，規則的排列順序能減輕用戶的思考負擔；

實例： 例如釘釘微信等聊天軟件每一個模塊的條目佈局：釘釘中每一個模塊的條目都有統一的「圖標+文字信息」的結構樣式，能讓用戶快速瞭解軟件功能都是做什麼的，這就是結構一致性的體現，以下圖：

②色彩一致性：產品所使用的主要色調應該是統一的，而不是換一個頁面顏色就不一樣；

實例： 例如QQ音樂的顏色：QQ音樂的圖標顏色與界面的主色均爲綠色，也包括其中一些標籤和強調的文字顏色都是綠色，整個界面除了圖片的有效信息外，都經過灰、白、綠色來呈現，界面保持了很好的一致性，這就是色彩一致性原則，以下圖：

③操做一致性：能讓產品更新換代時仍然讓用戶保持對原產品的認知，減少用戶的學習成本；

實例： 好比微信、支付寶、qq和淘寶等APP中左上角的返回操做：它們應用內返回上一級操做，都是經過頂部左側的返回按鈕進行的，這就是操做一致性的體現，以下圖：

④反饋一致性：用戶在操做按鈕或者條目的時候，點擊的反饋效果應該是一致的；

實例： 好比安卓版手機QQ信息列表的打開方式：它的信息都是列表式結構，無論你點擊那一行條目，下一級界面都是由右往左滑出，點擊頂部左上角的返回按鈕會從左往右滑回，體驗至關一致；這就是反饋一致性的體現，以下動圖：

⑤文字一致性：產品中呈現給用戶閱讀的文字大小、樣式、顏色、佈局等都應該是一致的；

實例： 例如手機QQ幾個關鍵界面的字體：下圖紅色框框起來的條目部分的文字，三個主界面不盡相同，可是，字體大小、顏色、佈局的樣式都同樣，這樣讓整個APP視覺上看起來很舒服，這就是字體一致性，所以，咱們在作視覺設計的時候儘可能使用贊成風格的文字。

五、防錯原則（Error prevention）

比一個優秀錯誤提醒彈窗更好的設計方式，是在這個錯誤發生以前就避免它。能夠幫助用戶排除一些容易出錯的狀況，或在用戶提交以前給他一個確認的選項。在此，特別要注意在用戶操做具備毀滅性效果的功能時要有提示，防止用戶犯不可挽回的錯誤。

實例分析1： 當用戶登陸時，在沒有填寫完手機號碼和驗證碼前，底部的登陸按鈕是置灰不可點擊的，只有兩項都填寫完整底部的登陸按鈕纔會變爲可點擊狀態，也就是變成綠色的，這就是爲了防止用戶犯更多錯誤，也是防錯原則的一種體現，以下圖：

實例分析2： 微信發朋圈動態時，點擊返回按鈕出現的提示彈窗：彈出框方式會增長不可逆操做的難度，當用戶發一條動態一半的時候，由於誤操做或者其它退出當前狀態的時候，使用彈窗是個不錯的選擇，由於用戶這個操做會讓以前辛苦編輯的內容刪除找不回，想要再發只能從頭開始，對用戶形成損失比較大；這就是防錯原則的另一種體現，以下圖：

六、易取原則（Recognition rather than recall）

經過把組件、按鈕及選項可見化，來下降用戶的記憶負荷。用戶不須要記住各個對話框中的信息。軟件的使用指南應該是可見的，且在合適的時候能夠再次查看。

實例： 好記性不如爛筆頭。儘量減小用戶回憶負擔，把須要記憶的內容擺上檯面。動做和選項應該是可見的，不該該讓用戶記住操做路徑和目標位置。

七、靈活高效原則（Flexibility and efficiency of use）

這個原則就是告訴咱們每一個產品針對的用戶不多是全部用戶，都會有本身的適用人羣，咱們須要針對主要的用戶去設計，而不能僅僅爲了一小部分用戶進行極端設計，知足大部分用戶的使用需求才是最重要。中級用戶的數量遠高於初級和高級用戶數。爲大多數用戶設計，不要低估，也不可輕視，保持靈活高效，爲大多數用戶設計，兼容少部分特殊用戶。汽車油門—新手用戶經常看不見，並且對於高手來講能夠經過它快速與汽車互動。這樣的系統能夠同時知足有經驗和無經驗的用戶。容許用戶定製經常使用功能。

實例： 最多見的應用就是手機界面的編輯應用功能，能夠根據自身喜愛自定義的，包括經常使用應用分組、排序、刪除、命名等等；這樣用戶能夠根據本身的我的興趣定製本身適合的應用分佈方式，這就叫作用戶定製經常使用功能，也就是靈活高效原則的一種體現。還有QQ裏會出現最近用的表情做爲快捷回覆，搜狗輸入法裏會優先顯示你常打的關鍵詞等。

八、優美且簡約原則（Aesthetic and minimalist design）

對話中的內容應該去除不相關的信息或幾乎不須要的信息。任何不相關的信息都會讓本來重要的信息更難被用戶察覺。

實例： 互聯網用戶瀏覽網頁的動做不是讀，不是看，而是掃。易掃，意味着突出重點，弱化和剔除無關信息。

九、容錯原則（Help users recognize, diagnose, and recover from errors）

錯誤信息應該使用簡潔的文字（不要用代碼），指出錯誤是什麼，並給出解決建議。也就是在用戶出錯時如何爲出錯的用戶提供及時正確的幫助？即要幫助用戶識別出錯誤，分析出錯誤的緣由再幫助用戶回到正確的道路上。若是真的不能幫助用戶從錯誤中恢復，也要儘可能爲用戶提供幫助讓用戶損失降到最低。

實例： 好比表單填寫，當用戶輸入正確的時候，輸入框後邊會有綠色的對勾圓圈，提示用戶輸入正確，能夠進入下一步操做了，而當用戶輸入錯誤的時候，輸入框會變爲紅色而且在輸入框右側出現紅色字的錯誤提示，這樣讓用戶很清楚的知道用戶輸入錯誤以及錯誤的緣由，這樣用戶就知道怎麼修改了，這也是容錯原則的一種體現，以下圖：

十、人性化幫助原則（Help and documentation）

幫助性提示最好的方式是：一、無需提示；二、一次性提示；三、常駐提示；4；幫助文檔。

實例分析1： 對用戶容易產生困惑的敏感信息進行提醒。

實例分析2： 即便系統不適用幫助文檔是最好的，但咱們也應該提供一份幫助文檔。任何幫助信息都應該能夠方便地搜索到，以用戶的任務爲核心，列出相應的步驟，但文字不要太多。好比一些經常使用的大型軟件：在頂部狀態欄上都有有一個「幫助」的入口，也體現了幫助文檔的必要性，因此，無論是什麼樣的產品都要給用戶提供一個幫助的入口，用來解決用戶操做過程當中遇到的問題，以下圖：