設計中關于“左”和“右”的思考

1 評論 6490 瀏覽 12 收藏 12 分鐘

編輯導語:由于手機尺寸的限制,我們在進行內(nèi)容瀏覽時會進行一些滑動操作,不同類型的內(nèi)容操作也各不相同,比如圖片會選擇左右滑動操作,文字會選擇上下滑動;本文就介紹了在設計中的“左”和“右”的操作,我們一起來看一下。

一、左右橫跳的泳道

最近經(jīng)常在人人視頻上看電視劇,發(fā)現(xiàn)人人視頻在設計上有個很有意思的點。

它的電影頁中有很多推薦電影片單,每個片單里有5-12部電影;礙于手機尺寸,用戶只能看到3部電影;如果你對這個片單里的電影比較感興趣,可以滑動查看更多的電影——這種橫向滑動的設計又被稱之為“泳道”。

設計中關于“左”和“右”的思考

那么問題來了,究竟向哪個方向滑動呢?

或許你會覺得這是一個送分題,肯定是左滑??;沒錯,你去查看100個APP,這種水平橫滑的泳道,99個都是左滑的;但是人人視頻就是那唯一的特例,它是左滑和右滑相互組合的。

設計中關于“左”和“右”的思考

前一個片單是左滑,后一個就是右滑;反之,前一個片單是右滑,后一個就是左滑。

第一次碰到這種設計,我很奇怪:為什么要做出這種挑戰(zhàn)用戶固有認知的調整?后來思考了一下,開始理解他們的做法。

當用戶左滑查看電影時,瀏覽完最后一部電影,用戶的視線是停留在在屏幕右側;如果下一個片單依然采用左滑,那么用戶的視線需要先移動到屏幕左側,再移動到右側——這個路線就是Z型瀏覽模式;而人人視頻緊接著的是右滑,第一個視頻直接從右側開始,避免了用戶視線的轉移。

設計中關于“左”和“右”的思考

人人視頻的這種方案,讓我想起夸克瀏覽器——用戶在夸克瀏覽器里觀看視頻,如果點擊屏幕的位置靠左,那么菜單就會出現(xiàn)在左邊;如果點擊的位置靠右,菜單就會出現(xiàn)在右邊;這樣的處理方式,可以縮短用戶手指的移動距離。

設計中關于“左”和“右”的思考

一個是縮短視線移動距離,一個是縮短手指移動距離。

我無法給出一個結論,這種左右橫跳的交互方式是否合理;從我個人的角度來說,第一次使用不是很習慣,學習成本還是比較高的。

二、左還是右?

設計中有很多這樣“左、右”的爭論。最經(jīng)典的就是:對話框的確定按鈕到底是在左邊還是右邊?這個話題被討論了無數(shù)次。

那么不管是左還是右,我們到底在爭論什么?左和右代表了什么?

我們習慣的瀏覽方向是由左至右,那么左代表了用戶視線的起點。

我們經(jīng)常說用戶的瀏覽模式是Z型的,但是在移動端界面中,左邊為信息區(qū),右邊為操作區(qū)。

用戶在快速瀏覽頁面的模式下,根據(jù)左邊的信息區(qū)判斷自己是否對這條內(nèi)容感興趣,如果感興趣才進行操作;所以更多的情況下,用戶的瀏覽模式不是Z型,而是L型的。

設計中關于“左”和“右”的思考

iOS 11與iOS 10相比,我們可以發(fā)現(xiàn)頁面標題、搜索框文案和內(nèi)容都是改成放在左邊。

設計中關于“左”和“右”的思考

整體的視覺動線由中間改成了左邊,用戶在快速瀏覽過程中視線不需要發(fā)生偏移。

設計中關于“左”和“右”的思考

右代表著更好的易用性。因為在移動端,用戶更習慣單手握持手機進行操作;而我們大部分人都是右撇子。

谷歌的MD設計中的浮動按鈕,是位于界面右側;微信的浮窗也是位于界面右側,就是為了方便用戶操作。

看到這里或許你會理解為什么“對話框的確定按鈕在左邊還是右邊?”這個話題經(jīng)久不衰了吧。

因為左邊和右邊背后都有理論支撐——左代表著離你的眼睛更近,右代表著離你的手更近。

我們再來設想一個場景,針對左撇子用戶,界面設計應該怎么調整;用戶的慣用手是左手,那是不是要做鏡面反轉,把操作區(qū)移動到左邊呢?讀者中肯定有左撇子用戶,你們會喜歡這種布局嗎?

設計中關于“左”和“右”的思考

三、流量分發(fā)

當然也會有一些設計方案在“左/右”的選擇上沒這么糾結,例如在微博、抖音這類社交產(chǎn)品中,其主頁的“推薦”欄目永遠在“關注”欄目的左邊。

設計中關于“左”和“右”的思考

以微博為例,“關注”和“推薦”在信息架構上是類似的,下面都有一些細分類目:“關注”里有不同的分組,“推薦”里也有不同內(nèi)容類別,例如熱門、同城、榜單等。

但是“關注”用戶需要點擊下拉框才能篩選,而“推薦”里用戶直接右滑就可以切換不同的內(nèi)容類別;如果把“關注”里的分組也改成滑動切換的樣式,那么必然會降低“推薦”欄目的流量。

設計中關于“左”和“右”的思考

抖音也是類似的道理,因為用戶左滑可以查看作者的主頁,如果把推薦欄目放在左邊,那么用戶左滑就會進入關注欄目。

引導用戶進入已經(jīng)關注的作者主頁,相對來說意義不是很大;抖音的想法是——用戶在刷推薦視頻的時候,覺得這個視頻很好玩,對這個視頻的作者產(chǎn)生興趣;用戶可以直接滑動進入作者的主頁,而不是需要點擊頭像才能進入主頁。

設計中關于“左”和“右”的思考

微博和抖音的“左關注,右推薦”的模式都是為了往推薦欄目引流。

社交產(chǎn)品追求的是用戶可以在這個產(chǎn)品里建立更多關系鏈,關系鏈是社交產(chǎn)品的護城河;既然這個人你已經(jīng)關注了,說明關系鏈已經(jīng)形成,那就沒有必要引流了。

從這里我們也能看出,在考慮方案的時候,不僅僅要考慮交互易用性,更要著眼于流量分配——哪個方案的流量分配更符合你的訴求,哪個就是好的方案。

甚至在很多時候,當交互易用性跟流量分配相沖突時,交互易用性是被犧牲的一方,因為流量代表了產(chǎn)品經(jīng)理的KPI。

最典型的例子就是知乎為了給答案底部的廣告引流把左右滑動切換答案改成了上下滑動;當然,我們也不能批判知乎的這種行為。

還是回到對話框的話題,“確定按鈕到底在左邊還是右邊?”,最好的辦法就是A/B測試;如果是一個引導用戶安裝APP的對話框,你就看“確定”按鈕放在哪邊可以帶來更多的轉化率。

設計中關于“左”和“右”的思考

這個A/B測試,搜狗輸入法曾經(jīng)做過,結果顯示:確定按鈕放在左邊轉化率更高,誤操作率更低,操作平均時長也更短;那么我們是否可以說,以后“確定”按鈕就放在左邊了?

當然不可以,因為這個測試是在安卓4.0時期進行的;安卓4.0之前的系統(tǒng)對話框的確定按鈕是在左邊的,4.0才改成右邊——用戶之前的操作習慣會影響測試結果。

還有一個因素就是設備尺寸,手機尺寸現(xiàn)在越來越大,用戶需要雙手握持手機;那么在雙手操作的模式下,手指可以全覆蓋屏幕,那么右邊的易用性就沒那么高了。

總之,同一個交互問題,在不同的設備,系統(tǒng),時間和場景下,會有不同的答案。

#專欄作家#

王M爭(微信公眾號:王M爭),人人都是經(jīng)理專欄作家,資深互聯(lián)網(wǎng)人,B站賬號:王M爭

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉載

題圖來自 unsplash,基于 CC0 協(xié)議

更多精彩內(nèi)容,請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 左撇子表示對于上面第二點的問題其實覺得沒有意義,因為左撇子也是接受了這個世界從左往右的默認順序規(guī)則,我們讀書從左往右,寫字也是從左往右,所以即使我們是左撇子,但當我們已經(jīng)養(yǎng)成了這種習慣之后,其實那種布局不管左撇子右撇子都不會喜歡的,但設想一個人從小接受的是從右往左的習慣呢?我覺得一個交互能滿足大部分用戶習慣就是好交互,用戶習慣培養(yǎng)起來之后再去改正他們,他們心里就會不舒服。我就拿這個做過一個小實驗,想看看確認按鈕在左邊和在右邊那個更加好,最后發(fā)現(xiàn)用戶習慣了不要改最好

    來自廣東 回復