隱藏手勢設計總結

9 評論 9962 瀏覽 62 收藏 9 分鐘

本文作者對手勢和功能進行了一些總結,enjoy~

鼠標和鍵盤是個人電腦上最主要的輸入工具。然而對于移動端產品來說,與產品進行交互主要靠的是我們的手,或者說手勢。手勢成為了一種強大的交互模式,可以說一款產品在移動端能否取得成功很大程度上取決于你所構建的手勢體系是否好用。

目前來說常見的手勢有:觸摸,滑動,拖曳,輕擊,按住不放和多點觸控等。手勢的應用可以通過減少操作流程中的步驟來提升用戶體驗。其實大部分手勢非常的簡單易懂,一旦用戶學會了就不會忘記。但是有些手勢用戶很難發現,你可能都不知道其存在性,更談不到去學了。這讓我想起經常在朋友圈看到一些文章《? ?XXX的這些功能,99%的人都不知道》。其實手勢跟功能是無法相互剝離來說的,因為手勢是為了功能而服務的,所以在下面我會把手勢跟功能融合在一起說。

點擊

首先來說,最常見的點擊。其實用戶對于界面中可點擊的元素都有了一定的認識。比如,他們知道按鈕是可以點擊的,置灰的按鈕不可點擊,文字帶有配色是可以點擊的(一般是藍色或者企業色);圖標也是可以點擊的。用戶可以發現大部分的點擊手勢。

但是也有例外,以QQ的好友互動標為例。從我個人角度來說,最開始我以為是那個好友改呢稱了,因為現在也有很多人的昵稱中帶有表情。我沒有意識到那個是互動圖標,更談不到點擊了。

其實手勢相同的功能在不同的產品中會有不同的展示形式。以簽到功能為例,閱讀類應用一般來說功能結構比較簡單,作為行為召喚元素的簽到按鈕在這里可以做的稍微寫實一點來凸顯出來。但是在功能比較多且結構復雜的產品中這樣做就不太現實了,飛豬的簽到頁面有太多的內容,有太多需要展示的信息。如果這里的簽到按鈕使用了陰影,高光的樣式來進行凸顯,那么考慮到設計的一致性其他地方的按鈕是否也要用相同的樣式?那么整個頁面就會顯得特別亂。

強弱化處理

就像我在上面說的,功能和手勢是不能相互剝離的。有的功能比較重要,所以我必須以清楚明確的視覺設計來給用戶一個手勢的指引。但是有些次要的功能,或者我們不希望用戶使用的功能,在設計的時候我們要進行弱化。

以微信為例,其對“退出登錄”按鈕進行了弱化,微信中的按鈕樣式是填充了綠色的圓角矩形。其實這種弱化也很容易理解,微信肯定不希望用戶退出當前的賬號。

同樣的道理,在同是鵝廠旗下的QQ中“添加或者注冊賬號”我表示歡迎,退出當前賬號你就慢慢找吧。

接下來再說一個反面例子,一些用戶為了在理財時簡化操作流程會選擇開通短信免驗證功能,這樣子就不用購買一次理財就要輸入一次短信驗證碼。開通成功的結果頁面中“取消免驗證”按鈕沒有進行弱化,一些心急的用戶可能以為是“返回”按鈕就點擊了下去。這樣又要重新驗證一次了。

文字的力量

有的時候為了提高點擊率,我們會給元素添加一些文字。

例如:支付寶中我的快遞,月賬單,我的健康等這些模塊的下方都有立即查看的“按鈕”。其實這些“按鈕”沒有多大的實際操作意義,因為用戶不用非要點擊到那個按鈕,只要點擊到了這個模塊的任何區域都可以完成跳轉。這里的“按鈕”是作為一種行為召喚元素來吸引用戶注意力,告訴用戶這個是可以點擊的。

滑動

相比于點擊來說,給滑動手勢設計引導就更難了。首先你不給提示的話,用戶很難自己知道原來這里可以滑動。

一些用戶 可能需要用了微信很久以后才發現原來每一個對話框都是可以滑動的。而且我們在使用一款新的應用時,我們會習慣在界面上點來點去去熟悉這個應用,很少有用戶會嘗試去滑動。給用戶展示滑動手勢最常見的方法有兩種。一是在添加滑動進度條的樣式,一般是由圓形和圓角矩形這類比較簡單的基本幾何形狀構成。

二是對于隱藏內容的部分展示,這屬于給用戶提供了一個暗示,表明了操作的可能性。往右邊滑動或許能看到更多的信息。例如天氣應用中對于15時的天氣狀態展示了一點,讓用戶了解滑動可以看到更多的信息。

動效的應用

當然會存在一些手勢很難給用戶說清楚,我們可以使用動效來用戶最直觀的展示。

總結

其實一款產品中有很多的功能,大部分用戶是不會用到的,同樣的功能在不同的產品的產品會有不同的展示。展示方式的不同也會造成手勢模型的差異。

以上就是我對手勢和功能的一些總結,希望大家看完會有所收獲。

#專欄作家#

王M爭,人人都是經理專欄作家,資深互聯網人。

本文原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自 Pexels,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 可以轉載嗎

    來自北京 回復
    1. 轉載到哪

      來自浙江 回復
    2. 我自己空間,收藏用

      來自北京 回復
    3. imhailong.com

      來自北京 回復
    4. 可以

      來自浙江 回復
    5. 謝謝

      來自北京 回復
  2. 是還沒寫完嗎

    來自臺灣 回復
    1. 會有第二篇

      來自浙江 回復
    2. 加油 :mrgreen:

      來自臺灣 回復