由于手機(jī)尺寸的限制,我們在進(jìn)行內(nèi)容瀏覽時會進(jìn)行一些滑動操作,不同類型的內(nèi)容操作也各不相同,比如圖片會選擇左右滑動操作,文字會選擇上下滑動;本文就介紹了在設(shè)計(jì)中的“左”和“右”的操作,我們一起來看一下。
最近經(jīng)常在人人視頻上看電視劇,發(fā)現(xiàn)人人視頻在設(shè)計(jì)上有個很有意思的點(diǎn)。
它的電影頁中有很多推薦電影片單,每個片單里有5-12部電影;礙于手機(jī)尺寸,用戶只能看到3部電影;如果你對這個片單里的電影比較感興趣,可以滑動查看更多的電影——這種橫向滑動的設(shè)計(jì)又被稱之為“泳道”。
那么問題來了,究竟向哪個方向滑動呢?
或許你會覺得這是一個送分題,肯定是左滑;沒錯,你去查看100個APP,這種水平橫滑的泳道,99個都是左滑的;但是人人視頻就是那唯一的特例,它是左滑和右滑相互組合的。
前一個片單是左滑,后一個就是右滑;反之,前一個片單是右滑,后一個就是左滑。
第一次碰到這種設(shè)計(jì),我很奇怪:為什么要做出這種挑戰(zhàn)用戶固有認(rèn)知的調(diào)整?后來思考了一下,開始理解他們的做法。
當(dāng)用戶左滑查看電影時,瀏覽完最后一部電影,用戶的視線是停留在在屏幕右側(cè);如果下一個片單依然采用左滑,那么用戶的視線需要先移動到屏幕左側(cè),再移動到右側(cè)——這個路線就是Z型瀏覽模式;而人人視頻緊接著的是右滑,第一個視頻直接從右側(cè)開始,避免了用戶視線的轉(zhuǎn)移。
人人視頻的這種方案,讓我想起夸克瀏覽器——用戶在夸克瀏覽器里觀看視頻,如果點(diǎn)擊屏幕的位置靠左,那么菜單就會出現(xiàn)在左邊;如果點(diǎn)擊的位置靠右,菜單就會出現(xiàn)在右邊;這樣的處理方式,可以縮短用戶手指的移動距離。
一個是縮短視線移動距離,一個是縮短手指移動距離。
我無法給出一個結(jié)論,這種左右橫跳的交互方式是否合理;從我個人的角度來說,第一次使用不是很習(xí)慣,學(xué)習(xí)成本還是比較高的。
設(shè)計(jì)中有很多這樣“左、右”的爭論。最經(jīng)典的就是:對話框的確定按鈕到底是在左邊還是右邊?這個話題被討論了無數(shù)次。
那么不管是左還是右,我們到底在爭論什么?左和右代表了什么?
我們習(xí)慣的瀏覽方向是由左至右,那么左代表了用戶視線的起點(diǎn)。
我們經(jīng)常說用戶的瀏覽模式是Z型的,但是在移動端界面中,左邊為信息區(qū),右邊為操作區(qū)。
用戶在快速瀏覽頁面的模式下,根據(jù)左邊的信息區(qū)判斷自己是否對這條內(nèi)容感興趣,如果感興趣才進(jìn)行操作;所以更多的情況下,用戶的瀏覽模式不是Z型,而是L型的。
iOS 11與iOS 10相比,我們可以發(fā)現(xiàn)頁面標(biāo)題、搜索框文案和內(nèi)容都是改成放在左邊。
整體的視覺動線由中間改成了左邊,用戶在快速瀏覽過程中視線不需要發(fā)生偏移。
右代表著更好的易用性。因?yàn)樵谝苿佣,用戶更?xí)慣單手握持手機(jī)進(jìn)行操作;而我們大部分人都是右撇子。
谷歌的MD設(shè)計(jì)中的浮動按鈕,是位于界面右側(cè);微信的浮窗也是位于界面右側(cè),就是為了方便用戶操作。
看到這里或許你會理解為什么“對話框的確定按鈕在左邊還是右邊?”這個話題經(jīng)久不衰了吧。
因?yàn)樽筮吅陀疫叡澈蠖加欣碚撝巍蟠碇x你的眼睛更近,右代表著離你的手更近。
我們再來設(shè)想一個場景,針對左撇子用戶,界面設(shè)計(jì)應(yīng)該怎么調(diào)整;用戶的慣用手是左手,那是不是要做鏡面反轉(zhuǎn),把操作區(qū)移動到左邊呢?讀者中肯定有左撇子用戶,你們會喜歡這種布局嗎?
當(dāng)然也會有一些設(shè)計(jì)方案在“左/右”的選擇上沒這么糾結(jié),例如在微博、抖音這類社交產(chǎn)品中,其主頁的“推薦”欄目永遠(yuǎn)在“關(guān)注”欄目的左邊。
以微博為例,“關(guān)注”和“推薦”在信息架構(gòu)上是類似的,下面都有一些細(xì)分類目:“關(guān)注”里有不同的分組,“推薦”里也有不同內(nèi)容類別,例如熱門、同城、榜單等。
但是“關(guān)注”用戶需要點(diǎn)擊下拉框才能篩選,而“推薦”里用戶直接右滑就可以切換不同的內(nèi)容類別;如果把“關(guān)注”里的分組也改成滑動切換的樣式,那么必然會降低“推薦”欄目的流量。
抖音也是類似的道理,因?yàn)橛脩糇蠡梢圆榭醋髡叩闹黜摚绻淹扑]欄目放在左邊,那么用戶左滑就會進(jìn)入關(guān)注欄目。
引導(dǎo)用戶進(jìn)入已經(jīng)關(guān)注的作者主頁,相對來說意義不是很大;抖音的想法是——用戶在刷推薦視頻的時候,覺得這個視頻很好玩,對這個視頻的作者產(chǎn)生興趣;用戶可以直接滑動進(jìn)入作者的主頁,而不是需要點(diǎn)擊頭像才能進(jìn)入主頁。
微博和抖音的“左關(guān)注,右推薦”的模式都是為了往推薦欄目引流。
社交產(chǎn)品追求的是用戶可以在這個產(chǎn)品里建立更多關(guān)系鏈,關(guān)系鏈?zhǔn)巧缃划a(chǎn)品的護(hù)城河;既然這個人你已經(jīng)關(guān)注了,說明關(guān)系鏈已經(jīng)形成,那就沒有必要引流了。
從這里我們也能看出,在考慮方案的時候,不僅僅要考慮交互易用性,更要著眼于流量分配——哪個方案的流量分配更符合你的訴求,哪個就是好的方案。
甚至在很多時候,當(dāng)交互易用性跟流量分配相沖突時,交互易用性是被犧牲的一方,因?yàn)榱髁看砹水a(chǎn)品經(jīng)理的KPI。
最典型的例子就是知乎為了給答案底部的廣告引流把左右滑動切換答案改成了上下滑動;當(dāng)然,我們也不能批判知乎的這種行為。
還是回到對話框的話題,“確定按鈕到底在左邊還是右邊?”,最好的辦法就是A/B測試;如果是一個引導(dǎo)用戶安裝APP的對話框,你就看“確定”按鈕放在哪邊可以帶來更多的轉(zhuǎn)化率。
這個A/B測試,搜狗輸入法曾經(jīng)做過,結(jié)果顯示:確定按鈕放在左邊轉(zhuǎn)化率更高,誤操作率更低,操作平均時長也更短;那么我們是否可以說,以后“確定”按鈕就放在左邊了?
當(dāng)然不可以,因?yàn)檫@個測試是在安卓4.0時期進(jìn)行的;安卓4.0之前的系統(tǒng)對話框的確定按鈕是在左邊的,4.0才改成右邊——用戶之前的操作習(xí)慣會影響測試結(jié)果。
還有一個因素就是設(shè)備尺寸,手機(jī)尺寸現(xiàn)在越來越大,用戶需要雙手握持手機(jī);那么在雙手操作的模式下,手指可以全覆蓋屏幕,那么右邊的易用性就沒那么高了。
總之,同一個交互問題,在不同的設(shè)備,系統(tǒng),時間和場景下,會有不同的答案。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。