UI交互设计教程分享：提高界面交互体验的“葵花宝典”
?本次分享的是在界面設計中最長實用也最容易被忽略的十個原則，就是尼爾森十大可用性設計原則，這是十分基礎且重要的原則。原則是死的，如何正確的結合到實際運用中才是關鍵。接下來我會通過對每一個原則的理解和現在移動端產品和結合進行分析，希望可以更深入的記住他們。
?
什么是尼爾森
尼爾森（Jakob Nielsen）是一位人機交互學博士，于1995年1月1日發表了「十大可用性原則」。1995年以來，他通過自己的 Alertbox 郵件列表以及useit.com 網站，向成千上萬的 Web 設計師傳授 Web 易用性方面的知識，盡管他的一些觀點可能帶來爭議，至少在 Web 設計師眼中，他是 Web 易用性領域的頂尖領袖。
?
十大原則解析與案例
一、狀態可見原則
用戶在手機上的任何操作，上下滑動刷新，點擊跳轉，頁面都應該即時給出饋。“即時”是指，頁面響應時間小于用戶能忍受的等待的間。
?
案例1_改變顏色狀態：
如下圖微信中點贊的樣式，手指觸碰到按鈕時，顏色加深，通過改變顏色告知用戶目前按鈕的狀態已被激活。
案例2_形狀改變：
如下圖網易云音樂中，當我們點擊添加關注時，界面會中關注標簽的狀態會及時更新為“對號”展示給用戶，通過點擊后的形狀的改變告知用戶操作已完成。這種狀態可見性可以清晰的讓用戶感受到頁面即時給出的反饋。
案例3_添加動效：
如下圖，當我們下拉界面刷新時，界面上方會出現動畫加載的效果。這種狀態可見性是最明顯的，可以清晰的讓用戶感受到頁面即時給出的反饋。
上面是關于狀態可見性原則在產品中的常見案例，當然除了這三個還有很多，例如點擊列表時，界面橫滑時等。我們在設計實際界面中，一定要謹記設計出對應的可見狀態，避免用戶使用時以為操作無效。
?
二、環境貼切原則
簡單的說就是產品設計符合真實世界中用戶的使用習慣和思考邏輯，盡可能貼近用戶所在的環境(年齡、學歷、文化、時代背景)，而不要使用第二世界的語言，應該使用易懂和約定俗成的表達。
?
案例1_產品風格定位：
如下圖DaDaBaby和TutorABC同是學英語的產品，由于產品所對應用戶的年齡，學歷，文化不同，界面的風格也會發生改變。DaDaBaby是針對幼兒學英語，所以界面風格活潑可愛，顏色鮮艷；而TutorABC是針對成年人學英語，界面簡潔，嚴肅。這就是產品風格的環境貼切。
案例2_產品換膚：
如下圖優酷為視頻類產品和餓了么為外賣類產品，雖然他們的定位不同，但是在世界杯期間，都替換了界面的皮膚，例如優酷底部標簽欄的圖標，餓了么中間分類入口的圖標。這就是環境貼切原則的體現。在特殊的時間里我們也可以通過改變界面的皮膚增加產品與當下環境的貼切性。
上面是關于環境貼切原則的案例，我們在設計界面時必須知道產品的使用人群，產品的類型，例如商務類產品和娛樂類產設計出來就會截然不同。這是產品風格的環境貼切。除了產品大方向要貼切，我們也可通過一些特殊的節日改變產品的皮膚，讓用戶在短時間內加強和產品的共通性。
?
三、撤銷重做原則
給用戶更多自主操作權，當用戶在使用產品過程中產生錯誤的操作時，應提供用戶更多的解決方案，比如撤銷或重做等功能。
?
案例：
如下圖微信中我們需要考慮到用戶的出錯的情況，例如在用微信拍照時，如果效果不夠理想就可選擇左側的撤銷按鈕，在未發送情況下進行重新拍照；另外一種情況就是發送后也可以通過長按當前發送的圖片，在出現的功能菜單中選擇撤回。
上面是撤回重做原則的案例，我們在做界面時要根據不同階段以及產品給用戶添加該功能，如果是一次性考試類型的產品就不適合加入該功能，需要用戶填寫時更加小心謹慎。
?
四、一致性原則
產品的功能操作、模塊樣式、頁面布局、信息提示、顏色運用的一致性，避免用戶突然跳轉后感覺在另一個產品中的錯覺，影響用戶對產品的整體體驗。
?
案例1：主色調一致
如下圖鯊魚記賬，從產品的LOGO到閃屏界面再到里面的主頁界面、圖標、按鈕等顏色都用的是統一的黃色作為主色，加深用戶對品牌色的記憶。
案例2：交互一致
產品或者系統內部的交互方式應該一致，這會讓用戶對產品產生信賴感和控制感。例如下圖微信會遵循在不同系統中的交互方式，iOS系統中刪除列表的交互方式是向左滑動。而在Android系統中則是長按需要刪除的列表。這就是遵照已有的系統交互方式交互的一致性。
一致性原則除了上面說的還有語言的統一，功能的統一等等。對于我們來說，設計上的統一是必須要做的，但是往往我們在追求視覺效果的時候卻忽略了這些細節的問題。
?
五、防錯原則
比出現錯誤信息提示更好的是更用心的設計防止這類問題發生。在用戶選擇動作發生之前，就要防止用戶容易混淆或者錯誤的選擇。對產品進行不同的操作、重組或特別安排，防止用戶出錯。
?
案例：
如下圖馬蜂窩的選擇日期功能，為了防止用戶錯誤的選擇錯誤，把當天日期之前的日期都設定為不可選擇。再比如很多表單頁，當內容信息未填寫完時，按鈕為灰色不可點擊的樣式。避免用戶在未填寫完之前就點擊提交按鈕。
六、易取原則
盡量減少用戶對操作目標的記憶負荷，動作和選項都應該是可見的。用戶不必記住一個頁面到另一個頁面的信息。系統的使用說明應該是可見的或者是容易獲取的。?
?
案例：
為了讓大家更好的理解什么是易取原則，我更改了京東的彈窗界面，（如下圖）京東到家為發現新版本的彈窗提示，在彈窗描述中告知用戶需要通過去App Store進行操作更新，點擊確定后返回首頁。導致用戶需要記住路徑和方法，然后再去操作，如果流程復雜，用戶需要反復切換確認。?
接下來我們在看看正確的姿勢是什么。（如下圖）當選擇立即下載時會自己跳到App Store的更新界面，只要點擊更新即可，不需要用戶記錄整個過程。當更新完成后，App Store中的更新按鈕變成打開按鈕，可以直接打開京東到家的首頁，這個流程不需要用戶提取任何記憶。
?
七、靈活高效原則
中級用戶的數量遠高于初級和高級用戶數。為大多數用戶設計，不要低估，也不可輕視，保持靈活高效。
?
案例：
這個原則就是告訴我們每個產品針對的用戶不可能是所有用戶，都會有自己的適用人群，我們需要針對主要的用戶去設計，而不能僅僅為了一小部分用戶進行極端設計，滿足大部分用戶的使用需求才是最重要。
八、易掃原則
互聯網用戶瀏覽的動作不是讀，不是看，而是掃。易掃，意味著突出重點，弱化和剔除無關信息。
?
案例：
如下圖網易新聞的詳情頁，很多設計師對于這類純文字的界面總是不削一顧，感覺沒有什么難度，也不需要什么設計，那么我在左側放置了一篇無設計，只是文字排列的一個界面。右側則是網易新聞的設計界面，可以明顯看出，左側的界面找不到重點內容和標題，沒有主次。而右側的界面通過文字變化，段與段的間距等設計手段讓用戶在讀文時可以很容易的掃視通篇的主要內容。
九、容錯原則
幫助用戶從錯誤中恢復，將損失降到最低。如果無法自動挽回，則提供詳盡的說明文字和指導方向，而非代碼，比如404。
?
案例：
為了避免造成用戶的損失，我們需要在重要事件中給出合理的文字說明和指導，比如有道云筆記中告訴用戶“文件刪除后將無法恢復”，就給用戶一次思考的時間，避免一時誤刪，造成損失。iPhone自帶的備忘錄給用戶的容錯空間更大，刪除后可以在30天內找回。另外，對于容錯程度的大小還是取決于產品用戶群的需要，并不是越大越好。
十、人性化幫助原則
幫助性提示最好的方式是：1、無需提示；2、一次性提示；3、常駐提示；4；幫助文檔。
?
案例：
如下圖對于初次使用產品的用戶來說，可能不知道表單里面需要填寫什么，如果沒有幫助性文檔的提示，很容易出現錯誤。因此我們可以增加一些填寫前的文檔幫助，如每日優鮮的截圖。還有在我們剛下次一款產品時，如DaDaBaby的截圖，會提供幫助界面，幫用戶在最短的時間內了解產品的主要功能及用法。
如果在使用產品時存在一些使用戶困惑的敏感信息時，我們需要對其進行提醒說明，甚至要做出教學類的界面進行輔助。
?
總結
十大原則很容易記住，但我們的目的絕對不是簡單地記住它，我們要在實際設計中有效的運用才是關鍵，無論是產品、交互還是設計，在設計產品方面如果拿捏不準都可以回想一下這是個原則，也許會有很大的幫助。
?
編輯：千鋒UI設計
來源：UI中國
轉載于:https://www.cnblogs.com/leolei/p/9591220.html
總結
以上是生活随笔為你收集整理的UI交互设计教程分享：提高界面交互体验的“葵花宝典”的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JAVA高并发编程
- 下一篇： android快牙原理,快牙的使用原理是