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

0 評論 17158 瀏覽 185 收藏 5 分鐘

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

1. 形色引導

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

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

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

移動上的應用
jiemian3

2. 方向引導

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

方向性視覺線

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

jiemian5

slide to unlock

3. 運動引導

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

jiemian6?Mac OS 窗口最小化

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

Path

4. 向導控件

如果一個任務需要多步操作跨越多個頁面,那么可以用向導控件來引導用戶完成多步操作。同時還可以告訴用戶完成這個任務一共需要多少步、現在在哪個階段、剩下多少可以完成任務等。
jiemian8

Amazon

jiemian9
豆瓣同城

End.

 

本文由 @陳正曦? 授權發布于人人都是產品經理?,未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!