在任務(wù)流程較為復(fù)雜的時(shí)候，用戶容易迷失在流程中，從而放棄任務(wù)，導(dǎo)致轉(zhuǎn)化率不盡人意。所以我們?cè)诮换ソ缑嫔闲枰龑?dǎo)用戶。人機(jī)交互中不論是文字、圖像、色彩、動(dòng)態(tài)效果等，主要是通過(guò)視覺(jué)反饋信息，所以視覺(jué)的引導(dǎo)尤為直觀有效。

1. 形色引導(dǎo)

形狀、色彩、大小等進(jìn)行引導(dǎo)。當(dāng)人們大腦接收到一定量信息時(shí)，會(huì)對(duì)相似的的信息進(jìn)行分類(lèi)來(lái)簡(jiǎn)化信息的處理，所以我們?cè)谠O(shè)計(jì)中可以把同類(lèi)型的元素使用相同的形狀或色彩等。比如在選擇購(gòu)買(mǎi)電影票或賓館時(shí)，我們所需要篩選的信息較多，如日期、位置、影院/賓館，這時(shí)候把這些信息使用相同的樣式展示，用戶很自然的認(rèn)為這些信息是有關(guān)聯(lián)的，都是為了篩選影院/賓館所需的條件。

使用形色引導(dǎo)用戶篩選信息

在移動(dòng)也可以采用這種方式，在信息較多時(shí)建議適當(dāng)隱藏。

移動(dòng)上的應(yīng)用

2. 方向引導(dǎo)

默認(rèn)情況下，我們都習(xí)慣從左往右，從上往下的掃描信息，所以我們?cè)O(shè)計(jì)時(shí)一般也是依照這個(gè)慣例。

方向性視覺(jué)線

有時(shí)候在一個(gè)任務(wù)流中或者一個(gè)頁(yè)面中，難免會(huì)遇見(jiàn)迷惑的地方，這時(shí)候我們就要引導(dǎo)用戶通向真正的目的地。最典型的就是iOS解鎖提示。

slide to unlock

3. 運(yùn)動(dòng)引導(dǎo)

人們最容易捕捉的就是運(yùn)動(dòng)的物體，這個(gè)運(yùn)動(dòng)不是只位移，像iOS解鎖提示同時(shí)也使文字有方向閃爍來(lái)產(chǎn)生運(yùn)動(dòng)，就好像你已經(jīng)迷失在人海中，有人再向你招手一樣。比如點(diǎn)擊加入購(gòu)物車(chē)之后商品飛到了購(gòu)物車(chē)圖標(biāo)里、選好觀影座位后座位號(hào)飛到了購(gòu)票訂單處等，視覺(jué)自然的就過(guò)渡到了下一步驟。

?Mac OS 窗口最小化

移動(dòng)端同樣適用，如Path。

Path

4. 向?qū)Э丶?/h3>

如果一個(gè)任務(wù)需要多步操作跨越多個(gè)頁(yè)面，那么可以用向?qū)Э丶?lái)引導(dǎo)用戶完成多步操作。同時(shí)還可以告訴用戶完成這個(gè)任務(wù)一共需要多少步、現(xiàn)在在哪個(gè)階段、剩下多少可以完成任務(wù)等。

Amazon

豆瓣同城

End.

 

本文由 @陳正曦? 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。

收藏已收藏{{ postmeta.bookmark }} 點(diǎn)贊已贊{{ postmeta.postlike }}