編輯導(dǎo)語(yǔ)：由于手機(jī)尺寸的限制，我們?cè)谶M(jìn)行內(nèi)容瀏覽時(shí)會(huì)進(jìn)行一些滑動(dòng)操作，不同類型的內(nèi)容操作也各不相同，比如圖片會(huì)選擇左右滑動(dòng)操作，文字會(huì)選擇上下滑動(dòng)；本文就介紹了在設(shè)計(jì)中的“左”和“右”的操作，我們一起來(lái)看一下。

一、左右橫跳的泳道

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

它的電影頁(yè)中有很多推薦電影片單，每個(gè)片單里有5-12部電影；礙于手機(jī)尺寸，用戶只能看到3部電影；如果你對(duì)這個(gè)片單里的電影比較感興趣，可以滑動(dòng)查看更多的電影——這種橫向滑動(dòng)的設(shè)計(jì)又被稱之為“泳道”。

那么問(wèn)題來(lái)了，究竟向哪個(gè)方向滑動(dòng)呢？

或許你會(huì)覺(jué)得這是一個(gè)送分題，肯定是左滑??；沒(méi)錯(cuò)，你去查看100個(gè)APP，這種水平橫滑的泳道，99個(gè)都是左滑的；但是人人視頻就是那唯一的特例，它是左滑和右滑相互組合的。

前一個(gè)片單是左滑，后一個(gè)就是右滑；反之，前一個(gè)片單是右滑，后一個(gè)就是左滑。

第一次碰到這種設(shè)計(jì)，我很奇怪：為什么要做出這種挑戰(zhàn)用戶固有認(rèn)知的調(diào)整？后來(lái)思考了一下，開始理解他們的做法。

當(dāng)用戶左滑查看電影時(shí)，瀏覽完最后一部電影，用戶的視線是停留在在屏幕右側(cè)；如果下一個(gè)片單依然采用左滑，那么用戶的視線需要先移動(dòng)到屏幕左側(cè)，再移動(dòng)到右側(cè)——這個(gè)路線就是Z型瀏覽模式；而人人視頻緊接著的是右滑，第一個(gè)視頻直接從右側(cè)開始，避免了用戶視線的轉(zhuǎn)移。

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

一個(gè)是縮短視線移動(dòng)距離，一個(gè)是縮短手指移動(dòng)距離。

我無(wú)法給出一個(gè)結(jié)論，這種左右橫跳的交互方式是否合理；從我個(gè)人的角度來(lái)說(shuō)，第一次使用不是很習(xí)慣，學(xué)習(xí)成本還是比較高的。

二、左還是右？

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

那么不管是左還是右，我們到底在爭(zhēng)論什么？左和右代表了什么？

我們習(xí)慣的瀏覽方向是由左至右，那么左代表了用戶視線的起點(diǎn)。

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

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

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

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

右代表著更好的易用性。因?yàn)樵谝苿?dòng)端，用戶更習(xí)慣單手握持手機(jī)進(jìn)行操作；而我們大部分人都是右撇子。

谷歌的MD設(shè)計(jì)中的浮動(dòng)按鈕，是位于界面右側(cè)；微信的浮窗也是位于界面右側(cè)，就是為了方便用戶操作。

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

因?yàn)樽筮吅陀疫叡澈蠖加欣碚撝巍蟠碇x你的眼睛更近，右代表著離你的手更近。

我們?cè)賮?lái)設(shè)想一個(gè)場(chǎng)景，針對(duì)左撇子用戶，界面設(shè)計(jì)應(yīng)該怎么調(diào)整；用戶的慣用手是左手，那是不是要做鏡面反轉(zhuǎn)，把操作區(qū)移動(dòng)到左邊呢？讀者中肯定有左撇子用戶，你們會(huì)喜歡這種布局嗎？

三、流量分發(fā)

當(dāng)然也會(huì)有一些設(shè)計(jì)方案在“左/右”的選擇上沒(méi)這么糾結(jié)，例如在微博、抖音這類社交產(chǎn)品中，其主頁(yè)的“推薦”欄目永遠(yuǎn)在“關(guān)注”欄目的左邊。

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

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

抖音也是類似的道理，因?yàn)橛脩糇蠡梢圆榭醋髡叩闹黜?yè)，如果把推薦欄目放在左邊，那么用戶左滑就會(huì)進(jìn)入關(guān)注欄目。

引導(dǎo)用戶進(jìn)入已經(jīng)關(guān)注的作者主頁(yè)，相對(duì)來(lái)說(shuō)意義不是很大；抖音的想法是——用戶在刷推薦視頻的時(shí)候，覺(jué)得這個(gè)視頻很好玩，對(duì)這個(gè)視頻的作者產(chǎn)生興趣；用戶可以直接滑動(dòng)進(jìn)入作者的主頁(yè)，而不是需要點(diǎn)擊頭像才能進(jìn)入主頁(yè)。

微博和抖音的“左關(guān)注，右推薦”的模式都是為了往推薦欄目引流。

社交產(chǎn)品追求的是用戶可以在這個(gè)產(chǎn)品里建立更多關(guān)系鏈，關(guān)系鏈?zhǔn)巧缃划a(chǎn)品的護(hù)城河；既然這個(gè)人你已經(jīng)關(guān)注了，說(shuō)明關(guān)系鏈已經(jīng)形成，那就沒(méi)有必要引流了。

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

甚至在很多時(shí)候，當(dāng)交互易用性跟流量分配相沖突時(shí)，交互易用性是被犧牲的一方，因?yàn)榱髁看砹水a(chǎn)品經(jīng)理的KPI。

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

還是回到對(duì)話框的話題，“確定按鈕到底在左邊還是右邊？”，最好的辦法就是A/B測(cè)試；如果是一個(gè)引導(dǎo)用戶安裝APP的對(duì)話框，你就看“確定”按鈕放在哪邊可以帶來(lái)更多的轉(zhuǎn)化率。

這個(gè)A/B測(cè)試，搜狗輸入法曾經(jīng)做過(guò)，結(jié)果顯示：確定按鈕放在左邊轉(zhuǎn)化率更高，誤操作率更低，操作平均時(shí)長(zhǎng)也更短；那么我們是否可以說(shuō)，以后“確定”按鈕就放在左邊了？

當(dāng)然不可以，因?yàn)檫@個(gè)測(cè)試是在安卓4.0時(shí)期進(jìn)行的；安卓4.0之前的系統(tǒng)對(duì)話框的確定按鈕是在左邊的，4.0才改成右邊——用戶之前的操作習(xí)慣會(huì)影響測(cè)試結(jié)果。

還有一個(gè)因素就是設(shè)備尺寸，手機(jī)尺寸現(xiàn)在越來(lái)越大，用戶需要雙手握持手機(jī)；那么在雙手操作的模式下，手指可以全覆蓋屏幕，那么右邊的易用性就沒(méi)那么高了。

總之，同一個(gè)交互問(wèn)題，在不同的設(shè)備，系統(tǒng)，時(shí)間和場(chǎng)景下，會(huì)有不同的答案。

#專欄作家#

王M爭(zhēng)（微信公眾號(hào)：王M爭(zhēng)），人人都是經(jīng)理專欄作家，資深互聯(lián)網(wǎng)人，B站賬號(hào)：王M爭(zhēng)

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

題圖來(lái)自 unsplash，基于 CC0 協(xié)議