守望者

只談實操過的真實案例,不談道聽途說的點子。

 

如何在移動端有限的屏幕內向用戶有效的展示傳達更多的信息內容,是UI/UE設計師們的重點研究方向。在實際工作與生活中,我們見到了太多左右橫向滑動交互設計,基本上第一感覺都是“哇,好酷!交互方式多樣性好靈活!”然后紛紛相仿,卻很少去考慮這種交互設計的科學性與實用性。

設計是理性的科學,而非感性的藝術。

用戶行為和用戶喜好是可以通過用戶行為數據進行推演。能客觀,絕不主觀;能簡單,絕不過于復雜;能理性,絕不過于表達感性。

 

常見的內容拓展方式

在有限的屏幕內將大量的資訊內容進行合理的依次展示,我們稱之為內容拓展設計。常見的內容拓展樣式有X軸橫向滑動、Y軸縱向滑動、Z軸的垂直長按交互三種。

 

1、X軸橫向滑動

即在X軸水平方向擴展內容,英文名叫“Horizontal Scrolling Lists”,直譯為水平滾動列表。這種交互方式適用于單頁多維度內容聚合的展示。

如上圖淘票票案例,將 Banner、熱映影片、即將上映等不同維度的內容整合在一個頁面,每個維度單獨占一個卡片并列展現內容。

 

2、Y軸縱向滑動

即我們最常見的傳統的下滑式List,英文名叫“Vertically?Scrolling Lists”,直譯為垂直滾動列表。只需要不斷往下滑動屏幕,就能加載展示更多的內容,用戶學習成本幾乎為0。主要適用于單維度內容,如抖音、知乎、朋友圈、微博等,【刷】是個重復上下滑動的動作,即所謂的【刷】抖音、【刷】知乎、【刷】朋友圈,【刷】微博,刷的都是同屬性內容。

 

3、Z軸方向的內容拓展設計

即我們說的長按操作,如iOS系統的3D Touch,根據不同力度反饋和不同時長反饋來判斷具體的交互內容。Z軸交互方式較為隱蔽,有一定學習成本,主要適用于以下場景:1.方便用戶快速打開某個高頻次功能;2.對于入口較深的功能可以用3Dtouch來作為快捷入口;3.針對某些涉及到個人隱私的產品或功能可以用3Dtouch實現入口替代。

本篇文章主要講橫滑和豎滑的優缺點以及項目中如何抉擇的問題。

 

X軸滑動優缺點分析

如果一個app全是縱滑或全是橫滑,是沒有什么問題的,用戶只要習慣一種交互方式即可,如漫畫軟件與閱讀軟件,通常都會提供橫滑與豎滑兩種交互方式??拥氖菣M滑豎滑兩種交互穿插在一起,這就有些不夠優雅了。

前面說過,X軸橫滑交互適用于一個頁面有多種維度信息的場景,Y軸適用于一個頁面都是單維度信息的場景。

如上圖所示,無論是小米應用商店還是淘票票,頁面的核心內容都是由一個個的“泳道”構成,豎滑切換泳道(不同維度的內容),橫滑切換同一泳道的不同內容。而微博、朋友圈、抖音、快手等國民級應用,都是通過豎滑在一條泳道上一滑到底。

 

1、如何劃分泳道

這么多的泳道怎么區分不同內容呢?標題。所以我們會看到上圖所示的小米應用商店、淘票票、Tumblr,都給不同的泳道的左上角設置了一個大大的標題,通過標題文字來直接傳達給用戶不同泳道的內容概要。早些年間還有給泳道做氛圍圖的方式,即下圖的圖片+文字方式,這樣處理有利有弊,好處是圖搭配的到位可以更好的強調主題,缺點則是浪費空間和展示效率。

左圖是應用匯15年的版本效果圖,用的是底圖強調分氛圍的方式。右圖為現行版本改版后類似模塊的處理方式,取消了氛圍圖,增加了可見展位,原來一行只能展示出兩個應用,改版后一行可展示4個。

 

2、如何強化泳道可見性

X軸的交互設計還需要做額外的引導來強化可見性,常見的引導方式有指示器、部分遮擋兩種。

尤其是Banner位和金剛區,如果沒有指示器,大多數小白用戶根本不知道該頁面是可以滑動的。同樣,部分遮擋也是較為常用的有效方式,通過遮擋部分文字和圖片,來強化【后面還有內容哦,來滑滑看】的效果。

但實際效果中,指示器的作用幾乎微乎其微,用戶主動觸發率很低。因為絕大部分用戶只在乎眼前能看到的內容,至于隱藏起來的內容,用戶去主動發現的意愿很弱。而部分遮擋的設計方式,則存在一個轉化遞減的問題,即越往后,CTR(點擊率)和CVR(轉化率)越低,所以絕大多數應用一行最多也就放8-12個內容,太少的話一滑到底,不符合預期,太多滑不到頭,用戶很快就會厭倦,排后面的內容就完全不會有曝光機會。

 

3、位置對轉化率的影響

圖為某app單個推薦模塊的點擊率與轉化率曲線圖。從曲線可以看到,位置越靠后,點擊與轉化效果越差,幾乎是遞減的趨勢。至于0號位和1號位為什么不如2號位3號位的點擊高呢?這個跟0號位和1號位推薦的產品也有一定的關系,同樣的曝光率,優質的產品點擊率自然更高。這也從側面說明一個問題,X軸橫向的排列資源位,無法適用于競價排位。對于盈利性的軟件來講,資源位很重要,是對接商戶的籌碼,有效的資源位才能讓金主爸爸掏錢掏的干脆痛快啊。

對于Y軸垂直的交互方式來說,一個位置一個價碼,明碼標價童叟無欺,畢竟排位非常明確的有先后順序,先看到誰后看到誰完全可以預期。而X軸橫向交互呢?到底哪個才是第一資源位呢?是0號位?1號位?還是第一排顯露出來的都是?優先級很混亂,通常連商務都難以合理給橫向位置定價,因為橫向交互的觸發率太低了。

 

最后,橫滑or豎滑?怎么選?

·橫滑

1.橫滑很酷,滑動過程中會有一種特殊的縱深感。

2.適用于多維度的信息整合,即專題歸納展示,一個專題卡片相當于多個信息也的合集。

3.固定的空間內可展示更多的商品。

4.有一定學習成本,優先級不清晰,曝光率與轉化率整體呈遞減趨勢,不適合用在競價排位的場景下。

 

·豎滑

1. 幾乎沒有學習成本,優先級明確,適合用于競價排位的場景。

2. 適合單維度信息展示,最常見的形式是feed流的信息展示。

 

會選了嗎?

如有疑問或不同見解,歡迎各位朋友在評論區留言討論哦~

 

原文地址:站酷

作者:MoeDesigner

 

轉載請注明:學UI網 » 橫滑or豎滑?教你如何選擇正確的交互方式

登錄收藏
 
你可能喜歡的:
體驗設計的容錯性體驗設計的容錯性
兒童產品中的色彩使用(下)兒童產品中的色彩使用(下)
iOS13 的設計趨勢及思考分享iOS13 的設計趨勢及思考分享
聽說你們設計稿里的控件總是亂糟糟的?聽說你們設計稿里的控件總是亂糟糟的?
電商活動卡片式設計思考電商活動卡片式設計思考
看起來很美的數據在騙人看起來很美的數據在騙人
「設計思考」做B端的一種思考方式「設計思考」做B端的一種思考方式
小公司沒人帶如何提升自己,我是這樣做的!小公司沒人帶如何提升自己,我是這樣做的!
【項目分享】一刻相冊-從0-1設計背后的故事【項目分享】一刻相冊-從0-1設計背后的故事
適配深色模式,你還沒用變量庫?適配深色模式,你還沒用變量庫?
?
类似钱咖的高额赚钱