在互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中，提升用戶體驗(yàn)和繪制高質(zhì)量的交互圖是確保產(chǎn)品成功的關(guān)鍵環(huán)節(jié)。本文將為你提供一些實(shí)用的技巧，幫助你更好地優(yōu)化產(chǎn)品體驗(yàn)，并掌握繪制交互圖的要點(diǎn)。

【如何提升互聯(lián)網(wǎng)產(chǎn)品體驗(yàn)設(shè)計(jì)】

1、把用戶假設(shè)成一個(gè)聰明但是很忙的人，不要指望讓用戶記住任何操作流程，而是隨時(shí)提供清晰的指引和盡可能自由的頁(yè)面跳轉(zhuǎn)入口。

2、用戶的高頻操作，應(yīng)盡量減少操作步驟，而低頻操作，則無(wú)需刻意關(guān)注步驟數(shù)，更應(yīng)該關(guān)注的是每一步的操作難度和界面信息是否易于理解。應(yīng)盡量降低選擇難度，別讓用戶花時(shí)間去理解。

3、一個(gè)頁(yè)面只突出一個(gè)重點(diǎn)，用大小，顏色，形狀來(lái)做分類，讓用戶一眼可分辨到重要信息。

4、扁平化和漸進(jìn)披露相結(jié)合，視場(chǎng)景而定，而不是機(jī)械地執(zhí)行扁平化。流程扁平化的好處是，可以讓用戶提前感知流程，頁(yè)面跳轉(zhuǎn)的成本也比較低，但是比較考驗(yàn)對(duì)頁(yè)面信息的整合處理，漸進(jìn)披露是預(yù)先把次要信息隱藏，當(dāng)用戶觸發(fā)了對(duì)應(yīng)操作，進(jìn)入對(duì)應(yīng)流程，才給出相應(yīng)反饋或指引，好處是讓用戶更專注，減少理解成本。

5、頁(yè)面一致性也是這個(gè)道理，就我理解，一致性的是為了讓用戶形成習(xí)慣，進(jìn)而減少理解成本。比如，確定操作永遠(yuǎn)在右側(cè)，選中狀態(tài)永遠(yuǎn)高亮，紅色代表嚴(yán)重警告等等。當(dāng)用戶已經(jīng)形成統(tǒng)一認(rèn)知，則會(huì)大大降低每一次操作的理解成本。但有時(shí)候設(shè)計(jì)師會(huì)過(guò)于信仰一致性，導(dǎo)致失去個(gè)性，我建議在不影響習(xí)慣的前提下，可適時(shí)打破所謂一致性的束縛，讓設(shè)計(jì)更加出彩。

6、讓用戶有反悔機(jī)會(huì)。誤操作后，可恢復(fù)，且重要操作需二次確認(rèn)，并強(qiáng)化感知嚴(yán)重性。

7、避免依賴文字說(shuō)明，多用圖形化的方式讓用戶直接感知，而不是通過(guò)理解文字來(lái)感知。且文案使用的格式、主語(yǔ)建議統(tǒng)一，這有助于營(yíng)造整體調(diào)性。另外一點(diǎn)，即按鈕文案的使用，建議明確告訴用戶該頁(yè)面的目的和功能，同時(shí)引導(dǎo)行為，而不是陳述性文案。用動(dòng)詞+賓語(yǔ)的格式來(lái)引導(dǎo)用戶操作，如：“去購(gòu)買”比“商城”更清楚，“去玩牌”比“游戲”更清楚。

8、需同時(shí)考慮多平臺(tái)的用戶操作習(xí)慣，如ios系統(tǒng)上的應(yīng)用，頁(yè)面需提供返回按鈕，而安卓上的應(yīng)用，按鈕應(yīng)避免過(guò)于靠近手機(jī)底部操作欄，以防誤操作。

【畫好交互圖的4個(gè)技巧】

開(kāi)始說(shuō)之前，先附上一張筆者原創(chuàng)的交互圖（已脫敏）

一、完整的主干閉環(huán)+可能出現(xiàn)異常反饋

1、確定一個(gè)目標(biāo)，例如：新用戶注冊(cè)，從第一步開(kāi)始，按用戶頁(yè)面跳轉(zhuǎn)順序擺放界面。

2、針對(duì)新用戶注冊(cè)這個(gè)功能，完整的功能交互流程圖，必須包含：新用戶開(kāi)啟APP，觸發(fā)注冊(cè)，注冊(cè)流程，完成注冊(cè)，進(jìn)入游戲這幾個(gè)關(guān)鍵步驟的完整閉環(huán)。

3、在關(guān)鍵步驟的主干閉環(huán)之外，需要將所有的異常提示展示出來(lái)，如：手機(jī)號(hào)無(wú)效，手機(jī)號(hào)已注冊(cè)，網(wǎng)絡(luò)超時(shí)等主干流程中可能遇到的異常提示，以及對(duì)應(yīng)處理反饋。

二、按鈕點(diǎn)擊效果+頁(yè)面跳轉(zhuǎn)邏輯

1、主干流程的按鈕，均要描述點(diǎn)擊后的處理，以及可能出現(xiàn)的異常反饋。

2、觸發(fā)頁(yè)面跳轉(zhuǎn)后，需要用箭頭標(biāo)注跳轉(zhuǎn)邏輯，兩條流程線之間，盡量不要有十字交疊。

三、標(biāo)題和注解

1、交互流程圖中，主要包含四類注解：模塊標(biāo)題、界面標(biāo)題、界面注解、流程箭頭注解。

2、模塊標(biāo)題：一般是主干流程的功能名稱，如新用戶注冊(cè)流程、充值流程等。

3、界面標(biāo)題：即每個(gè)界面的名稱，如啟動(dòng)頁(yè)、登錄頁(yè)等，可展示在每個(gè)界面上方，并附帶編號(hào)。

4、界面注解：是交互圖中最重要的文字內(nèi)容，一般展示在對(duì)應(yīng)界面下方，可包含頁(yè)面動(dòng)態(tài)描述，頁(yè)面異常情況描述，頁(yè)面簡(jiǎn)要邏輯描述等。

5、流程箭頭注解：一般是展示在箭頭線上的，對(duì)于頁(yè)面跳轉(zhuǎn)的描述，如：點(diǎn)擊注冊(cè)跳轉(zhuǎn)。

四、視覺(jué)相關(guān)要素

1、視覺(jué)焦點(diǎn)：一個(gè)界面，盡量只展示一個(gè)重點(diǎn)信息，并且使其成為視覺(jué)焦點(diǎn)，從面積，放置位置，顏色，字號(hào)等元素，都做強(qiáng)化，其他非焦點(diǎn)信息，則弱化。

2、圖像：在交互圖中，每個(gè)模塊盡可能用塊狀底色區(qū)分，避免使用過(guò)多線框，否則容易使交互圖變得復(fù)雜，加重視覺(jué)負(fù)擔(dān)。

3、配色：建議交互圖中，使用一種基準(zhǔn)色，如藍(lán)色或灰色，疊放層級(jí)靠后的模塊，用深藍(lán)色，靠前的模塊，用淺藍(lán)色。同時(shí)，按鈕可單獨(dú)使用一種顏色，如綠色。部分需重點(diǎn)突出的元素可用提醒色，如橘色。箭頭可用半透明的黃色等。

4、擺放：所有界面上下對(duì)齊，間隔一致，保證工整的視覺(jué)效果。