引導性交互界面怎么設計才能直觀有效?

0 評論 17367 瀏覽 186 收藏 5 分鐘

在任務流程較為復雜的時候,用戶容易迷失在流程中,從而放棄任務,導致轉(zhuǎn)化率不盡人意。所以我們在交互界面上需要引導用戶。人機交互中不論是文字、圖像、色彩、動態(tài)效果等,主要是通過視覺反饋信息,所以視覺的引導尤為直觀有效。

1. 形色引導

形狀、色彩、大小等進行引導。當人們大腦接收到一定量信息時,會對相似的的信息進行分類來簡化信息的處理,所以我們在設計中可以把同類型的元素使用相同的形狀或色彩等。比如在選擇購買電影票或賓館時,我們所需要篩選的信息較多,如日期、位置、影院/賓館,這時候把這些信息使用相同的樣式展示,用戶很自然的認為這些信息是有關聯(lián)的,都是為了篩選影院/賓館所需的條件。
jiemian1

使用形色引導用戶篩選信息

在移動也可以采用這種方式,在信息較多時建議適當隱藏。
jiemian2

移動上的應用
jiemian3

2. 方向引導

默認情況下,我們都習慣從左往右,從上往下的掃描信息,所以我們設計時一般也是依照這個慣例。
jiemian4

方向性視覺線

有時候在一個任務流中或者一個頁面中,難免會遇見迷惑的地方,這時候我們就要引導用戶通向真正的目的地。最典型的就是iOS解鎖提示。

jiemian5

slide to unlock

3. 運動引導

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

jiemian6?Mac OS 窗口最小化

移動端同樣適用,如Path。
jiemian7

Path

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

如果一個任務需要多步操作跨越多個頁面,那么可以用向?qū)Э丶硪龑в脩敉瓿啥嗖讲僮?。同時還可以告訴用戶完成這個任務一共需要多少步、現(xiàn)在在哪個階段、剩下多少可以完成任務等。
jiemian8

Amazon

jiemian9
豆瓣同城

End.

 

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

更多精彩內(nèi)容,請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!