界面設(shè)計(jì)中,交互方式是選擇滑動還是點(diǎn)擊呢?

5 評論 14327 瀏覽 56 收藏 10 分鐘

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

前幾天在朋友圈看到一條關(guān)于新版知乎(iOS端)的吐槽:原來的版本中用戶可以左右滑動切換答案,但是在新版本中,改成上下滑動切換答案。

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

參考了朋友圈底下的評論,大家的看法大致可以分為以下三種:

  1. 增加頁面底部廣告和評論的曝光度,在提升廣告收入的同時,增加用戶互動;
  2. 提升答案閱讀完成率;
  3. iOS端左右滑動會和返回手勢相混淆,安卓用戶依然可以左右滑動切換答案。

可能會有人說不一定非要滑動到界面底部啊,不是有“下一個回答”的按鈕嗎,你可以直接點(diǎn)擊按鈕切換答案啊。

這是一個非常好的問題,其實(shí)點(diǎn)擊按鈕切換答案和滑動切換答案代表了兩種不同的手勢:點(diǎn)擊滑動

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

終端

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

  • 一個PC網(wǎng)頁可以承載多個層級,多個維度的信息,內(nèi)容越多,對操作準(zhǔn)確性的要求就越高,鼠標(biāo)點(diǎn)擊可以幫助用戶完成精準(zhǔn)快速的操作。
  • 而移動端礙于尺寸原因一個界面展示不了多少信息,展示的信息太多用戶要滑動才可以看到。因此移動端設(shè)計(jì)要求界面與內(nèi)容簡單直接,遵循“一個界面,一個任務(wù)”的原則。

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

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

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

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

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

易感知

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

點(diǎn)擊手勢相對來說要簡單點(diǎn),因?yàn)樽畛R姷陌粹o就可以觸發(fā)點(diǎn)擊事件。而讓用戶感知到滑動手勢的存在是很難的,我是2016年3月份才發(fā)現(xiàn)原來可以滑動可以刪除微信群記錄。難固然難,但是辦法還是有的。

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

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

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

例如:在QQ閱讀中,夜間模式的開啟/關(guān)閉是通過滑動一根燈繩。對于大部門用戶來說,一看到這個燈繩肯定知道這是可以滑動(拉動)的。

場景

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

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

點(diǎn)擊手勢用的比較多,我挑幾個有意思的說一下。

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

這種交互上的小改動可以增加互動,拉來更多新用戶。

說完好的,再說一個反面案例。在酷我音樂中,如果當(dāng)前歌曲是合唱,用戶點(diǎn)擊歌手會出現(xiàn)兩種情況:

  • 《不得不愛》,點(diǎn)擊歌手進(jìn)入的是潘瑋柏和弦子搜索頁;
  • 《涼涼》,點(diǎn)擊歌手進(jìn)入的是張碧晨的主頁,完全沒有楊宗緯什么事。

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

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

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

總結(jié)

以上就是我對滑動手勢的一個簡單的分析和總結(jié),如果你有不同的觀點(diǎn)或者看法,歡迎留言~

#專欄作家#

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

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

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 當(dāng)用戶撤銷一個很重要功能的時候,進(jìn)行二次確認(rèn),不是很正常的事情嗎? 這個跟刪除一個東西 要二次確認(rèn)的邏輯是不是一樣的,是這樣么

    來自浙江 回復(fù)
  2. 我覺得,知乎切換的方式改變是設(shè)計(jì)師可以為之的。上下滑動的交互成本明顯低于左右滑動,用戶在每篇文章上停留的時間就會比較短。改為上下滑動,一方面,切換成本提升,停留時間增加;另一方面,上下滑動會看到文章更多的內(nèi)容。所以知乎為了產(chǎn)品的業(yè)務(wù)犧牲了用戶體驗(yàn)。

    來自北京 回復(fù)
  3. 知乎Android版本,也已經(jīng)改成上下滑動切換問題了,不允許左右滑動。

    來自上海 回復(fù)
    1. 對的

      回復(fù)
  4. 有些挽留的操作如果真的有相當(dāng)價(jià)值,可以考慮,但不能濫用。

    來自北京 回復(fù)