隱藏手勢設計總結

轉自:王M爭

作者:王M爭

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

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

點擊

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

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

其實手勢相同的功能在不同的產品中會有不同的展示形式。以簽到功能為例,閱讀類應用一般來說功能結構比較簡單,作為行為召喚元素的簽到按鈕在這里可以做的稍微寫實一點來凸顯出來。

但是在功能比較多且結構復雜的產品中這樣做就不太現實了,飛豬的簽到頁面有太多的內容,有太多需要展示的信息。如果這里的簽到按鈕使用了陰影,高光的樣式來進行凸顯,那么考慮到設計的一致性其他地方的按鈕是否也要用相同的樣式?那么整個頁面就會顯得特別亂。

強弱化處理

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

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

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

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

文字的力量

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

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

滑動

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

一些用戶可能需要用了微信很久以后才發現原來每一個對話框都是可以滑動的。而且我們在使用一款新的應用時,我們會習慣在界面上點來點去去熟悉這個應用,很少有用戶會嘗試去滑動。

給用戶展示滑動手勢最常見的方法有兩種。一是在添加滑動進度條的樣式,一般是由圓形和圓角矩形這類比較簡單的基本幾何形狀構成。

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

動效的應用

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

總結

其實一款產品中有很多的功能,大部分用戶是不會用到的,同樣的功能在不同的產品的產品會有不同的展示。展示方式的不同也會造成手勢模型的差異。以上就是我對手勢和功能的一些總結,希望大家看完會有所收獲。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,363評論 6 532
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,497評論 3 416
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 176,305評論 0 374
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,962評論 1 311
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,727評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,193評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,257評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,411評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,945評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,777評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,978評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,519評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,216評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,642評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,878評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,657評論 3 391
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,960評論 2 373

推薦閱讀更多精彩內容