王M爭(zhēng)：在界面設(shè)計(jì)中，我們?nèi)绾未_定目標(biāo)元素的交互方式是滑動(dòng)還是點(diǎn)擊呢？

前幾天在朋友圈看到一條關(guān)于新版知乎（iOS端）的吐槽：原來(lái)的版本中用戶(hù)可以左右滑動(dòng)切換答案，但是在新版本中，改成上下滑動(dòng)切換答案。

這個(gè)改動(dòng)引發(fā)了一個(gè)問(wèn)題，用戶(hù)想查看下一條答案，要滑動(dòng)到頁(yè)面底部。如果當(dāng)前的答案字?jǐn)?shù)很多或者配上了圖片，那么用戶(hù)就要滑動(dòng)好幾次才可以切換答案，這對(duì)用戶(hù)體驗(yàn)來(lái)說(shuō)無(wú)疑是一種傷害。因?yàn)樽约寒吘共皇侵鮾?nèi)部的員工，不知道這次改動(dòng)的具體依據(jù)是什么。

參考了朋友圈底下的評(píng)論，大家的看法大致可以分為以下三種：

• 增加頁(yè)面底部廣告和評(píng)論的曝光度，在提升廣告收入的同時(shí)，增加用戶(hù)互動(dòng)；

• 提升答案閱讀完成率；

• iOS端左右滑動(dòng)會(huì)和返回手勢(shì)相混淆，安卓用戶(hù)依然可以左右滑動(dòng)切換答案。

可能會(huì)有人說(shuō)不一定非要滑動(dòng)到界面底部啊，不是有「下一個(gè)回答」的按鈕嗎，你可以直接點(diǎn)擊按鈕切換答案啊。

這是一個(gè)非常好的問(wèn)題，其實(shí)點(diǎn)擊按鈕切換答案和滑動(dòng)切換答案代表了兩種不同的手勢(shì)：點(diǎn)擊與滑動(dòng)。

那么在界面設(shè)計(jì)中，我們?nèi)绾未_定目標(biāo)元素的交互方式是滑動(dòng)還是點(diǎn)擊呢？

一、終端

滑動(dòng)還是點(diǎn)擊，不同的終端選擇的標(biāo)準(zhǔn)是不一樣的。我們?cè)诿嬖囘^(guò)程中，經(jīng)常會(huì)被問(wèn)到 PC端和移動(dòng)端界面設(shè)計(jì)的區(qū)別在哪里。其實(shí)在我看來(lái)這兩者最本質(zhì)的區(qū)別在于——內(nèi)容承載量的不同。

• 一個(gè) PC 網(wǎng)頁(yè)可以承載多個(gè)層級(jí)，多個(gè)維度的信息，內(nèi)容越多，對(duì)操作準(zhǔn)確性的要求就越高，鼠標(biāo)點(diǎn)擊可以幫助用戶(hù)完成精準(zhǔn)快速的操作。

• 而移動(dòng)端礙于尺寸原因一個(gè)界面展示不了多少信息，展示的信息太多用戶(hù)要滑動(dòng)才可以看到。因此移動(dòng)端設(shè)計(jì)要求界面與內(nèi)容簡(jiǎn)單直接，遵循「一個(gè)界面，一個(gè)任務(wù)」的原則。

那么在這種前提下，如何提升移動(dòng)端產(chǎn)品的易用性呢？我們可以更多的引入滑動(dòng)手勢(shì)，為什么？

因?yàn)橄啾扔邳c(diǎn)擊，滑動(dòng)對(duì)于準(zhǔn)確性要求不是很高。

例如：在蝦米音樂(lè)的歌曲播放界面中，如果用戶(hù)想返回上一界面，點(diǎn)擊屏幕任何區(qū)域上滑就可以了。當(dāng)然你也可以點(diǎn)擊界面左上角的返回/收起按鈕，但是明顯費(fèi)力的很多。而且大屏手機(jī)是趨勢(shì)，對(duì)于習(xí)慣右手握持手機(jī)的用戶(hù)來(lái)說(shuō)，拇指能不能夠得著左上角的按鈕都是一個(gè)問(wèn)題。

當(dāng)然并不是所有的滑動(dòng)手勢(shì)都是全屏操作的，在網(wǎng)易云音樂(lè)中，如果你手指的落點(diǎn)位于唱片的外部，右滑會(huì)返回上一界面。如果落點(diǎn)在唱片的內(nèi)部，右滑會(huì)切換歌曲，這就是剛才提到的 iOS端左右滑動(dòng)會(huì)和返回手勢(shì)相混淆。

以上面提到的知乎為例，其實(shí)安卓用戶(hù)依然可以左右滑動(dòng)切換答案，因?yàn)榘沧康撞坑形锢矸祷劓I，不會(huì)發(fā)生手勢(shì)混淆的情況。

二、易感知

引入點(diǎn)擊/滑動(dòng)手勢(shì)首先要解決的問(wèn)題就是——如何讓用戶(hù)感知到這個(gè)玩意是可以點(diǎn)擊/滑動(dòng)的。

點(diǎn)擊手勢(shì)相對(duì)來(lái)說(shuō)要簡(jiǎn)單點(diǎn)，因?yàn)樽畛Ｒ?jiàn)的按鈕就可以觸發(fā)點(diǎn)擊事件。而讓用戶(hù)感知到滑動(dòng)手勢(shì)的存在是很難的，我是 2016 年 3 月份才發(fā)現(xiàn)原來(lái)滑動(dòng)可以刪除微信群記錄。難固然難，但是辦法還是有的。

1. 對(duì)隱藏內(nèi)容進(jìn)行適當(dāng)展示

以知乎為例，適當(dāng)?shù)穆冻鱿乱粭l答案，不然用戶(hù)不知道原來(lái)滑動(dòng)還可以切換答案。

2. 引入現(xiàn)實(shí)生活中的隱喻

例如：在 QQ閱讀中，夜間模式的開(kāi)啟/關(guān)閉是通過(guò)滑動(dòng)一根燈繩。對(duì)于大部分用戶(hù)來(lái)說(shuō)，一看到這個(gè)燈繩肯定知道這是可以滑動(dòng)（拉動(dòng)）的。

三、場(chǎng)景

接下來(lái)我們主要說(shuō)一下點(diǎn)擊和滑動(dòng)手勢(shì)的使用場(chǎng)景，這里我選取了幾款我們常用的音樂(lè)類(lèi)應(yīng)用。對(duì)于一首正在播放的歌曲來(lái)說(shuō)，用戶(hù)常見(jiàn)的操作有：暫停/播放、調(diào)整歌曲進(jìn)度/音量、切換歌曲、查看歌詞、查看歌曲/專(zhuān)輯/歌手詳情、下載、收藏/喜歡和分享等。

其中大部分的場(chǎng)景都是由點(diǎn)擊手勢(shì)來(lái)完成，用到滑動(dòng)手勢(shì)的場(chǎng)景只有調(diào)整歌曲進(jìn)度/音量、切換歌曲。其中 QQ音樂(lè)、酷我音樂(lè)和蝦米音樂(lè)都可以通過(guò)向上滑動(dòng)返回上一界面，有意思的是酷我音樂(lè)依然保留 iOS 的返回手勢(shì)，也就是說(shuō)用戶(hù)向左/上滑動(dòng)都可以返回到上一界面。

點(diǎn)擊手勢(shì)用的比較多，我挑幾個(gè)有意思的說(shuō)一下。

在蝦米音樂(lè)中，當(dāng)你點(diǎn)贊一首歌曲的時(shí)候，并不會(huì)出現(xiàn)預(yù)期的「點(diǎn)贊成功」toast，而是一個(gè)「喜歡就去分享」的浮層。既然你點(diǎn)贊了，必然你很喜歡這首歌，那么為什么不分享給更多人呢？

這種交互上的小改動(dòng)可以增加互動(dòng)，拉來(lái)更多新用戶(hù)。

說(shuō)完好的，再說(shuō)一個(gè)反面案例。在酷我音樂(lè)中，如果當(dāng)前歌曲是合唱，用戶(hù)點(diǎn)擊歌手會(huì)出現(xiàn)兩種情況：

• 《不得不愛(ài)》，點(diǎn)擊歌手進(jìn)入的是潘瑋柏和弦子搜索頁(yè)；

• 《涼涼》，點(diǎn)擊歌手進(jìn)入的是張碧晨的主頁(yè)，完全沒(méi)有楊宗緯什么事。

這兩種篩選機(jī)制中任何一種都是不合理，而且就算是不合理你好歹也統(tǒng)一一下啊，連一致性都沒(méi)有考慮到實(shí)在是不應(yīng)該。

最后再給大家舉一個(gè)例子，支付寶和京東金融都有指紋支付功能。開(kāi)通流程都是一樣的，點(diǎn)擊開(kāi)通按鈕，輸入支付密碼驗(yàn)證身份。但是在關(guān)閉指紋支付功能的時(shí)候，支付寶會(huì)彈出一個(gè)彈框挽留一下用戶(hù)，而京東金融沒(méi)有彈框二次確認(rèn)。

支付寶的操作很像知乎的這次改版，挽留用戶(hù)屬于產(chǎn)品的業(yè)務(wù)目標(biāo)，但是挽留用戶(hù)無(wú)形中會(huì)傷害用戶(hù)體驗(yàn)——增加了用戶(hù)操作步驟。但是當(dāng)業(yè)務(wù)目標(biāo)和用戶(hù)體驗(yàn)相沖突的時(shí)候，讓步的往往都是用戶(hù)體驗(yàn)，很無(wú)奈。

總結(jié)

以上就是我對(duì)滑動(dòng)手勢(shì)的一個(gè)簡(jiǎn)單的分析和總結(jié)，如果你有不同的觀點(diǎn)或者看法，歡迎留言。