設計中關于左右滑動的思考
人人視頻在設計上有個很有意思的點。它的電影頁中有很多推薦電影片單,每個片單里有5-12部電影。礙于手機尺寸,用戶只能看到3部電影。如果你對這個片單里的電影比較感興趣,可以滑動查看更多的電影。這種橫向滑動的設計又被稱之為“泳道”。
那么問題來了,究竟向哪個方向滑動呢?或許你會覺得這是一個送分題,肯定是左滑啊。沒錯,你去查看100個APP,這種水平橫滑的泳道,99個都是左滑的。但是人人視頻就是那唯一的特例,它是左滑和右滑相互組合的。
前一個片單是左滑,后一個就是右滑;反之,前一個片單是右滑,后一個就是左滑。第一次碰到這種設計,我很奇怪:為什么要做出這種挑戰用戶固有認知的調整。后來思考了一下,開始理解他們的做法。
當用戶左滑查看電影時,瀏覽完最后一部電影,用戶的視線是停留在在屏幕右側。如果下一個片單依然采用左滑,那么用戶的視線需要先移動到屏幕左側,再移動到右側。這個路線就是Z型瀏覽模式。而人人視頻緊接著的是右滑,第一個視頻直接從右側開始,避免了用戶視線的轉移。
人人視頻的這種方案,讓我想起夸克瀏覽器。用戶在夸克瀏覽器里觀看視頻,如果點擊屏幕的位置靠左,那么菜單就會出現在左邊;如果點擊的位置靠右,菜單就會出現在右邊。這樣的處理方式,可以縮短用戶手指的移動距離。
‘
一個是縮短視線移動距離,一個是縮短手指移動距離。我無法給出一個結論,這種左右橫跳的交互方式是否合理。從我個人的角度來說,第一次使用不是很習慣,學習成本還是比較高的。
左還是右?
設計中有很多這樣“左、右”的爭論。最經典的就是:對話框的確定按鈕到底是在左邊還是右邊?這個話題被討論了無數次。那么不管是左還是右,我們到底在爭論什么?左和右代表了什么?
我們習慣的瀏覽方向是由左至右,那么左代表了用戶視線的起點。我們經常說用戶的瀏覽模式是Z型的,但是在移動端界面中,左邊為信息區,右邊為操作區。用戶在快速瀏覽頁面的模式下,根據左邊的信息區判斷自己是否對這條內容感興趣,如果感興趣才進行操作。所以更多的情況下,用戶的瀏覽模式不是Z型,而是L型的。
iOS 11與iOS 10相比,我們可以發現頁面標題、搜索框文案和內容都是改成放在左邊。
整體的視覺動線由中間改成了左邊,用戶在快速瀏覽過程中視線不需要發生偏移。
右代表著更好的易用性。因為在移動端,用戶更習慣單手握持手機進行操作。而我們大部分人都是右撇子。谷歌的MD設計中的浮動按鈕,是位于界面右側;微信的浮窗也是位于界面右側,就是為了方便用戶操作。
看到這里或許你會理解為什么“對話框的確定按鈕在左邊還是右邊?”這個話題經久不衰了吧。因為左邊和右邊背后都有理論支撐。左代表著離你的眼睛更近,右代表著離你的手更近。
我們再來設想一個場景,針對左撇子用戶,界面設計應該怎么調整。用戶的慣用手是左手,那是不是要做鏡面反轉,把操作區移動到左邊呢?讀者中肯定有左撇子用戶,你們會喜歡這種布局嗎?
流量分發
當然也會有一些設計方案在“左/右”的選擇上沒這么糾結,例如在微博、抖音這類社交產品中,其主頁的“推薦”欄目永遠在“關注”欄目的右邊。
以微博為例,“關注”和“推薦”在信息架構上是類似的,下面都有一些細分類目。“關注”里有不同的分組,“推薦”里也有不同內容類別,例如熱門、同城、榜單等。
但是“關注”用戶需要點擊下拉框才能篩選,而“推薦”里用戶直接右滑就可以切換不同的內容類別。如果把“關注”里的分組也改成滑動切換的樣式,那么必然會降低“推薦”欄目的流量。
抖音也是類似的道理,因為用戶左滑可以查看作者的主頁,如果把推薦欄目放在左邊,那么用戶左滑就會進入關注欄目。引導用戶進入已經關注的作者主頁,相對來說意義不是很大。
抖音的想法是,用戶在刷推薦視頻的時候,覺得這個視頻很好玩,對這個視頻的作者產生興趣。用戶可以直接滑動進入作者的主頁,而不是需要點擊頭像才能進入主頁。
微博和抖音的“左關注,右推薦”的模式都是為了往推薦欄目引流。社交產品追求的是用戶可以在這個產品里建立更多關系鏈,關系鏈是社交產品的護城河。既然這個人你已經關注了,說明關系鏈已經形成,那就沒有必要引流了。
從這里我們也能看出,在考慮方案的時候,不僅僅要考慮交互易用性,更要著眼于流量分配。哪個方案的流量分配更符合你的訴求,哪個就是好的方案。甚至在很多時候,當交互易用性跟流量分配相沖突時,交互易用性是被犧牲的一方。因為流量代表了產品經理的KPI。
最典型的例子就是知乎為了給答案底部的廣告引流把左右滑動切換答案改成了上下滑動。當然,我們也不能批判知乎的這種行為,畢竟要恰飯。所以下次我接廣告的時候,你們別取關好嗎?
還是回到對話框的話題,“確定按鈕到底在左邊還是右邊?”,最好的辦法就是A/B測試。如果是一個引導用戶安裝APP的對話框,你就看“確定”按鈕放在哪邊可以帶來更多的轉化率。
這個A/B測試,搜狗輸入法曾經做過。結果顯示,確定按鈕放在左邊轉化率更高,誤操作率更低,操作平均時長也更短。那么我們是否可以說,以后“確定”按鈕就放在左邊了?
當然不可以,因為這個測試是在安卓4.0時期進行的。安卓4.0之前的系統對話框的確定按鈕是在左邊的,4.0才改成右邊。用戶之前的操作習慣會影響測試結果。還有一個因素就是設備尺寸,手機尺寸現在越來越大,用戶需要雙手握持手機,那么在雙手操作的模式下,手指可以全覆蓋屏幕,那么右邊的易用性就沒那么高了。總之,同一個交互問題,在不同的設備,系統,時間和場景下,會有不同的答案。
以上就是本期分享的內容啦,希望對各位小伙伴有所幫助~
轉載聲明:本文來源于網絡,不作任何商業用途

全部評論


暫無留言,趕緊搶占沙發
熱門資訊

【UI設計】跟蘋果學如何「勾搭」用戶:除了活兒要好,你還需要有個性!...

【配色技巧】國外流行的7種不同領域配色風格...

【平面設計】菜單設計原來這么簡單!

你知道韓國的設計風格有什么不同嗎?

基本形的群化是什么?

低學歷學ui設計有沒有用?

深圳平面攝影培訓哪個比較好?

深圳交互設計師培訓機構哪家比較好?

平面設計的歷史是什么?
