每個人對交互設計下的定義都不一樣，交互設計的對象是行為，我理解的交互設計是指在交互系統(tǒng)中，用戶使用產(chǎn)品的操作行為，用戶行為可能是主動的也可能是被動的，也就是交互設計師、產(chǎn)品經(jīng)理、設計師等，都需要懂得并熟練運用交互知識在產(chǎn)品設計上，不僅要讓產(chǎn)品達到好用、易用、想用的目標，同時也要通過對用戶行為的引導來提高頁面的轉(zhuǎn)化率。下面，藍橙互動就給大家分享一下H5交互設計應該怎么做。

一、交互設計流程

H5項目制作流程通常是：產(chǎn)品需求 → 交互設計 → 視覺設計 → 開發(fā)。其中交互設計包含：架構(gòu)圖、流程圖、界面原型、demo(動態(tài)原型)。交互設計的核心要素是用戶、場景及任務。通俗的講就是人在什么時間？什么地點、什么環(huán)境、什么心理下會使用我們這款產(chǎn)品？那使用產(chǎn)品的目的是什么？要通過什么行為才能達到這個目的？如何高效的引導用戶達成目標？……這些過程都需要我們思考。

二、交互設計的作用

目前市面上已經(jīng)有很多產(chǎn)品，我們看一下平時在一些H5案例或APP使用過程中，有沒有遇到過以下這些糟糕的情況：

是不是遇到這些情況就不想用這款產(chǎn)品了，更別說轉(zhuǎn)化了。這就是為什么我們要做好交互設計。

三、交互的十大可用性原則

1、狀態(tài)可見

狀態(tài)可見是讓用戶知道現(xiàn)在的狀態(tài)，對過去發(fā)生、當前目標、以及對未來去向有所了解，不致于在產(chǎn)品中迷路。比如用戶在進行刷新，點擊，評論，點贊，輸入等動作時系統(tǒng)應該即時反饋讓用戶知道自己的操作是有效的，知道自己現(xiàn)在自己所處的狀態(tài)和位置。

①過程中反饋-進度條

當用戶進行一些不會馬上完成的任務時，系統(tǒng)需要有一個加載、校驗、查詢或計算的過程。在這個過程中，我們必須讓用戶的操作得到恰當?shù)姆答?，能讓用戶能感知到現(xiàn)在的進程是否成功或者進度是什么樣的。比如進度、內(nèi)容加載時，增加用戶掌控感,消除用戶的焦慮感。常見的場景有：上傳、下載、更新……

②操作結(jié)果反饋

系統(tǒng)適當反饋是用戶界面設計的最基本準則。當用戶通過點擊按鈕、填寫表格等一系列行為并完成最終任務時，設計師需要明確的告知用戶任務的結(jié)果：失敗還是成功，后續(xù)需要做什么。常用場景有：提交、增加、保存、收藏、點贊……

③位置可見

告訴用戶處在系統(tǒng)的什么位置，特別是對于新用戶，需要提供必要的信息，否則容易迷惑。比如：導航菜單、面包屑、標簽頁、步驟條、分頁器等等。

2、環(huán)境貼切現(xiàn)實

字面解釋就是系統(tǒng)的信息要與現(xiàn)實環(huán)境表現(xiàn)一致。使用的語言、文字等，需要是用戶熟悉的、能理解、不會有歧義的。減少用戶的學習成本，不要認為用戶能記住你設計新穎的信息。

3、用戶可控

用戶擁有控制權(quán)。用戶可以自由的控制返回和去到的地方。

4、一致性原則

對于用戶來說，同樣的文字、狀態(tài)、按鈕，都應該觸發(fā)相同的事情，遵從通用的平臺慣例；也就是，同一用語、功能、操作保持一致。輕量級反饋統(tǒng)一用toast反饋，重級反饋統(tǒng)一用模態(tài)彈框展示。

5、防錯原則

在錯誤發(fā)生之前就避免它。可以幫助用戶排除一些容易出錯的情況，或在用戶提交之前給他一個確認的選項。

①重要操作提供二次確認

對于一些不可逆或很重要的操作，系統(tǒng)大部分會提供二次確認提示，如此可以使用戶避免因誤操作而給自己帶來損失。

②預判錯誤并告知

給予用戶必要的預判性錯誤提示——告訴用戶，這樣走可能會錯

③合理設計

屏蔽會引起歧義的設計、本身不合理的設計，不讓用戶因為產(chǎn)品的設計缺陷而導致用戶犯錯。讓用戶頻繁碰壁、產(chǎn)生挫折感的設計，其原因不是用戶的愚蠢、而是設計的愚蠢。

④給予正確引導

把簡單留給用戶，把復雜留給自己：通過系統(tǒng)的優(yōu)良設計約束和指引用戶的操作，把出現(xiàn)錯誤的可能降到最低。

⑤引起用戶注意

利用一些視覺元素引起用戶注意 ，提供警示作用，如下圖。

6、易取原則

好記性不如爛筆頭。盡可能減少用戶回憶負擔，把需要記憶的內(nèi)容擺上臺面

①智能獲取

通過智能讀取用戶之前填寫過的信息，或者智能識別等形式，減少用戶記憶負擔與操作負擔。

②讓用戶選擇而不是填寫

比起讓用戶輸入，讓用戶選擇更能降低用戶的記憶成本，更好地輔助用戶做決策。如果，有很多的信息或者選項是用戶高頻率會選擇的，不妨給用戶提前做好選擇，提供默認選項，如下圖：

③草稿箱或歷史記錄

作為用戶，你不記得的操作，系統(tǒng)可以幫你記錄。為用戶提供歷史記錄，文本創(chuàng)作的過程中自動保存草稿，讓用戶方便查詢自己的進程，這就是信息易取原則的設計。保留歷史，最為常見的就是為用戶保留歷史搜索和歷史瀏覽、儲存賬號和密碼。視頻APP會詳細記錄用戶的觀看記錄，當用戶沒有看完某部電影時，下次進入直接從斷點續(xù)播上次播放的位置，無需用戶記憶上次看到哪里了。

④跳轉(zhuǎn)明確

提供用戶明確的跳轉(zhuǎn)入口，不需要用戶記憶操作路徑

⑤行為輸入代替字符輸入

這一點其實也非常好理解，一個簡單的動作，比打字要輕松得多，常見的就是在設備解鎖的時候，用手勢解鎖替代密碼解鎖。隨著技術(shù)發(fā)展，有了更多的行為代替輸入的方式，比如指紋識別和面部識別，用簡單的操作，就可以達到進入系統(tǒng)的目的，這就避免了用戶需要較多的操作和密碼的記憶。

⑥可視化

將選擇的對象，動作，選項可視化，讓用戶一看就懂。注意圖標符號化能讓人理解，避免引起誤解。

7、靈活高效

一些快捷操作的功能，雖然會被專家用戶忽略，但可能為新手用戶所使用，并幫助提升其使用效率，因此，系統(tǒng)需要同時滿足新手用戶和專家用戶的需求。

①提供定制化服務

讓用戶靈活定制，最典型的例子是各類軟件和App的配置功能，基本上所有軟件都會提供定化功能，從快捷鍵設置，到頁面布局，再到自定義參數(shù)，軟件系統(tǒng)會盡量提供全面的個性化置功能，來滿足不同用戶的使用訴求和習慣，提升用戶的使用效率和體驗。

還有一種是系統(tǒng)根據(jù)用戶常用自動整理歸納，以提升使用效率，減少用戶多余操作。

②“跳過”按鈕

通過用戶快捷跳過的入口，比如常見的：引導頁、操作手冊、還是開屏廣告，有“跳過”或者”立即進入“按鈕真的很貼心。

③允許用戶重復操作

對于用戶頻繁使用的部分，提供快捷的重復使用操作，比如：外賣app，用戶可以快捷地再來一單，同時保存上一次操作記錄。

8、審美和簡約設計

內(nèi)容框中不應包含無關(guān)或很少用到的信息。在內(nèi)容框中每增加一個信息，就意味著降低了主要信息的相對可見性。此原則根本目標是讓用戶快速找到界面的重要信息，引導用戶的視線及操作行為。

①對重要信息突出顯示

用戶注意力資源有限，應該保持信息精煉，突出重要信息，弱化次要信息。

②視覺統(tǒng)一

好的原型是黑白灰的，很多產(chǎn)品經(jīng)理喜歡用圖片原件、用各種顏色塊去“讓自己的原型變的美觀”，沒必要。那我的原型中會出現(xiàn)不同級別的內(nèi)容和文字，怎么體現(xiàn)呢？黑和灰都有不同的色度，顏色飽和度的高低可以直接讓用戶知道內(nèi)容的優(yōu)先級。

9、容錯原則

容錯原則是指幫助用戶從錯誤中恢復，將損失降到最低。如果無法自動挽回，則提供詳盡的說明文字和指導方向。

①提供撒銷/修改功能

部分系統(tǒng)可提供撤銷操作來幫助用戶減少因自己的沖動而進 行操作帶來的后果。

②減少錯誤代價

防錯原則有一個非常重要的點“發(fā)現(xiàn)錯誤，及時反饋”，當用戶已經(jīng)操作錯誤的時候，系統(tǒng)需要及時提醒用戶當前操作錯誤，可通過文字說明和顏色輔助的方式提醒，而不是等到用戶全部操作完了之后再提醒，這樣會影響用戶體驗。

③提供解決方案

在出錯界面給出解決方案，可以是文字提醒或者按鈕跳轉(zhuǎn)等形式，幫助用戶解決問題。比如缺省頁的設計除了配置插圖還會有提示文案與操作按鈕，引導用戶去操作，去進一步解決問題。

10、人性化幫助

人性化幫助原則的根本目標是用戶在使用產(chǎn)品的過程中有所依循，因為產(chǎn)品已經(jīng)貼心地為他們準備好了幫助方式，或者即時提示和反饋，或者客服。幫助性提示最好的方式是：

①常駐提示

常駐提示需要一直固定在某個位置實時幫助用戶。紅點、數(shù)字或文字，一般出現(xiàn)在通知圖標或頭像的右上角，用于顯示需要處理的消息條數(shù)，通過醒目視覺形式吸引用戶處理。

②幫助文檔

最后就是幫助文檔了，一般用于解釋規(guī)則或者熱點問題，通常以超鏈接的形式存在于頁面中，或者以集合形式位于設置頁中，此時需要注意要易于檢索。

總的來說，尼爾森十大可用性原則可靈活運用于各個地方，可以是交互設計，也可以是界面設計，深入了解該設計原則，可以找到更好的解決方案，提高用戶的使用體驗。要注意的是，這10項原則是啟發(fā)式（heuristics）的、廣泛的經(jīng)驗法則，而不是具體的規(guī)定。