提升產(chǎn)品體驗(yàn)及畫好交互圖的4個(gè)技巧
在互聯(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é)效果。
本文由 @Ada冰 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可,禁止轉(zhuǎn)載
題圖來(lái)自Unsplash,基于CC0協(xié)議
該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)
- 目前還沒(méi)評(píng)論,等你發(fā)揮!