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