守望者

橫滑or豎滑?

守望者 APP設計 426瀏覽

摘:體驗設計中選擇什么形式,是橫滑還是豎滑,大致分為3個層次:目標、效率、然后是易用。我們設計產品時考慮是否滿足了這3個層級后,再考慮什么交互方式更好就會明確了。

設計說很酷,產品說No

去年,我們在一個??ǖ捻椖可?,因為產品數量的增加,需要在原來資源位增加展示多個產品,我們給出的優化方案是通過橫滑交互操作展示3~5個的理財產品,結果產品經理說不行,他說用戶只能看到一個產品,后面的幾個產品可見性太低,他們希望用戶能同時看到更多產品的展示,這樣增加提升轉化的機會,用戶可能對第一個不感興趣,但可能會對第2 個、第3個產品感興趣。

 

橫滑or豎滑?

那究竟該如何選擇呢?什么情況下用橫滑?什么情況下豎滑呢?

橫滑:以為水平方向為軸,通過左右移動形式展示內容,這種交互方式用于在同一緯度下的多內容展示。

豎滑:以縱向為軸,通過上下移動形式展現內容,對用戶來說只要不斷往下滑動屏幕,就能加載展示更多的內容。

 

橫滑豎滑兩者之間的優缺點

優點:

(1)橫滑,交互形式很酷,層級關系簡單,視覺上比較突出,這幾點是設計師喜歡用這樣形式的原因。

(2)豎滑,是業務方喜歡用的方式,因為屏效展示率好,在有限的區域可展現內容更多,用戶操作起來簡單方便。

 

缺點:

(1)橫滑:

① 內容可見性差,通常越往后,后面的內容點擊量就越低。

② 用戶習慣:用戶對橫滑的操作具有一定的學習成本,需要通過識別一些信號來操作,而豎滑就不同了,用戶無意識的操作手機的習慣。

(2)豎滑:

① 增加用戶操作頻率,內容過多容易分散用戶注意力。

 

如何合理使用這兩個交互形式呢?

1、以內容維度為切入點

同一維度內容展示適合“左右橫滑”,比如一個專題下的不同內容。尤其是曝光率不高,信息重要程度不那么高的內容。

 

多維度的內容適合縱向滑動,尤其對于首頁多種通常業務的內容聚合,通常會采用大標題進行不同模塊的內容區分,

 

2、從數量判斷

一般來說,橫滑展示5-8個內容為佳,過少會導致一滑就見底,過多還不如引導用戶去下一級更多主題頁面,看到更多內容。

 

在重要的區域或流量地方未來展示更多內容,比如feed流適合用縱滑方式展現。

 

3、展示可見性效率

自動展示:banner 一般在頭部,用戶橫滑的操作帶來不夠便捷,通常會在幾秒后自動橫切過來,這個自動展示的效果就提升了內容可見性。

 

部分隱藏:通過露出遮擋部分文字和圖片,來提升后面更多內容。

 

引導箭頭、底部加載:當滑動到卡片最后一張時才露出“查看全部”,為那些看到最后還意猶未盡的用戶一個出口。

 

4、 內容主次

縱向和橫向優先級常常導致主次判斷失誤,在首頁聚合頁中,頭部位置很少建議用橫滑卡片,會干饒下一層內容重要性,一般,在頁面底部不重要的內容,卡片采用橫滑展示會比較合適。

 

小結

最后,體驗設計中選擇什么形式,是橫滑還是豎滑,大致分為3個層次:目標、效率、然后是易用。

我們設計產品時考慮是否滿足了這3個層級后,再考慮什么交互方式更好就會明確了。

總的來說,橫滑看起來很酷,但需要慎用,過多使用導致可見效率不高,其次,交互操作一橫一縱導致用戶操作路線亂。

 

原文地址:詠舍(公眾號)
作者:詠舍

轉載請注明:學UI網 » 橫滑or豎滑?

登錄收藏
 
你可能喜歡的:
界面布局| 移動端常見8種界面布局的分析與運用界面布局| 移動端常見8種界面布局的分析與運用
砂之船奧萊數字化零售項目砂之船奧萊數字化零售項目
Material Design Shape and motion 形狀與動效Material Design Shape and motion 形狀與動效
Material Design Shape as expression 形狀表達Material Design Shape as expression 形狀表達
細說控件| Button按鈕的不同樣式與狀態細說控件| Button按鈕的不同樣式與狀態
Material Design Shape and hierarchy 形狀與層級Material Design Shape and hierarchy 形狀與層級
聊聊加載等待的那些事之“進度指示器”(原則篇)聊聊加載等待的那些事之“進度指示器”(原則篇)
Material Design About shape 形狀指南Material Design About shape 形狀指南
產品體驗設計-交互篇(三)產品體驗設計-交互篇(三)
下拉菜單設計的7個技巧下拉菜單設計的7個技巧
?
京东方a股票