本文作者對(duì)手勢(shì)和功能進(jìn)行了一些總結(jié)，enjoy~

鼠標(biāo)和鍵盤(pán)是個(gè)人電腦上最主要的輸入工具。然而對(duì)于移動(dòng)端產(chǎn)品來(lái)說(shuō)，與產(chǎn)品進(jìn)行交互主要靠的是我們的手，或者說(shuō)手勢(shì)。手勢(shì)成為了一種強(qiáng)大的交互模式，可以說(shuō)一款產(chǎn)品在移動(dòng)端能否取得成功很大程度上取決于你所構(gòu)建的手勢(shì)體系是否好用。

目前來(lái)說(shuō)常見(jiàn)的手勢(shì)有：觸摸，滑動(dòng)，拖曳，輕擊，按住不放和多點(diǎn)觸控等。手勢(shì)的應(yīng)用可以通過(guò)減少操作流程中的步驟來(lái)提升用戶(hù)體驗(yàn)。其實(shí)大部分手勢(shì)非常的簡(jiǎn)單易懂，一旦用戶(hù)學(xué)會(huì)了就不會(huì)忘記。但是有些手勢(shì)用戶(hù)很難發(fā)現(xiàn)，你可能都不知道其存在性，更談不到去學(xué)了。這讓我想起經(jīng)常在朋友圈看到一些文章《? ?XXX的這些功能，99%的人都不知道》。其實(shí)手勢(shì)跟功能是無(wú)法相互剝離來(lái)說(shuō)的，因?yàn)槭謩?shì)是為了功能而服務(wù)的，所以在下面我會(huì)把手勢(shì)跟功能融合在一起說(shuō)。

點(diǎn)擊

首先來(lái)說(shuō)，最常見(jiàn)的點(diǎn)擊。其實(shí)用戶(hù)對(duì)于界面中可點(diǎn)擊的元素都有了一定的認(rèn)識(shí)。比如，他們知道按鈕是可以點(diǎn)擊的，置灰的按鈕不可點(diǎn)擊，文字帶有配色是可以點(diǎn)擊的（一般是藍(lán)色或者企業(yè)色）；圖標(biāo)也是可以點(diǎn)擊的。用戶(hù)可以發(fā)現(xiàn)大部分的點(diǎn)擊手勢(shì)。

但是也有例外，以QQ的好友互動(dòng)標(biāo)為例。從我個(gè)人角度來(lái)說(shuō)，最開(kāi)始我以為是那個(gè)好友改呢稱(chēng)了，因?yàn)楝F(xiàn)在也有很多人的昵稱(chēng)中帶有表情。我沒(méi)有意識(shí)到那個(gè)是互動(dòng)圖標(biāo)，更談不到點(diǎn)擊了。

其實(shí)手勢(shì)相同的功能在不同的產(chǎn)品中會(huì)有不同的展示形式。以簽到功能為例，閱讀類(lèi)應(yīng)用一般來(lái)說(shuō)功能結(jié)構(gòu)比較簡(jiǎn)單，作為行為召喚元素的簽到按鈕在這里可以做的稍微寫(xiě)實(shí)一點(diǎn)來(lái)凸顯出來(lái)。但是在功能比較多且結(jié)構(gòu)復(fù)雜的產(chǎn)品中這樣做就不太現(xiàn)實(shí)了，飛豬的簽到頁(yè)面有太多的內(nèi)容，有太多需要展示的信息。如果這里的簽到按鈕使用了陰影，高光的樣式來(lái)進(jìn)行凸顯，那么考慮到設(shè)計(jì)的一致性其他地方的按鈕是否也要用相同的樣式？那么整個(gè)頁(yè)面就會(huì)顯得特別亂。

強(qiáng)弱化處理

就像我在上面說(shuō)的，功能和手勢(shì)是不能相互剝離的。有的功能比較重要，所以我必須以清楚明確的視覺(jué)設(shè)計(jì)來(lái)給用戶(hù)一個(gè)手勢(shì)的指引。但是有些次要的功能，或者我們不希望用戶(hù)使用的功能，在設(shè)計(jì)的時(shí)候我們要進(jìn)行弱化。

以微信為例，其對(duì)“退出登錄”按鈕進(jìn)行了弱化，微信中的按鈕樣式是填充了綠色的圓角矩形。其實(shí)這種弱化也很容易理解，微信肯定不希望用戶(hù)退出當(dāng)前的賬號(hào)。

同樣的道理，在同是鵝廠(chǎng)旗下的QQ中“添加或者注冊(cè)賬號(hào)”我表示歡迎，退出當(dāng)前賬號(hào)你就慢慢找吧。

接下來(lái)再說(shuō)一個(gè)反面例子，一些用戶(hù)為了在理財(cái)時(shí)簡(jiǎn)化操作流程會(huì)選擇開(kāi)通短信免驗(yàn)證功能，這樣子就不用購(gòu)買(mǎi)一次理財(cái)就要輸入一次短信驗(yàn)證碼。開(kāi)通成功的結(jié)果頁(yè)面中“取消免驗(yàn)證”按鈕沒(méi)有進(jìn)行弱化，一些心急的用戶(hù)可能以為是“返回”按鈕就點(diǎn)擊了下去。這樣又要重新驗(yàn)證一次了。

文字的力量

有的時(shí)候?yàn)榱颂岣唿c(diǎn)擊率，我們會(huì)給元素添加一些文字。

例如：支付寶中我的快遞，月賬單，我的健康等這些模塊的下方都有立即查看的“按鈕”。其實(shí)這些“按鈕”沒(méi)有多大的實(shí)際操作意義，因?yàn)橛脩?hù)不用非要點(diǎn)擊到那個(gè)按鈕，只要點(diǎn)擊到了這個(gè)模塊的任何區(qū)域都可以完成跳轉(zhuǎn)。這里的“按鈕”是作為一種行為召喚元素來(lái)吸引用戶(hù)注意力，告訴用戶(hù)這個(gè)是可以點(diǎn)擊的。

滑動(dòng)

相比于點(diǎn)擊來(lái)說(shuō)，給滑動(dòng)手勢(shì)設(shè)計(jì)引導(dǎo)就更難了。首先你不給提示的話(huà)，用戶(hù)很難自己知道原來(lái)這里可以滑動(dòng)。

一些用戶(hù) 可能需要用了微信很久以后才發(fā)現(xiàn)原來(lái)每一個(gè)對(duì)話(huà)框都是可以滑動(dòng)的。而且我們?cè)谑褂靡豢钚碌膽?yīng)用時(shí)，我們會(huì)習(xí)慣在界面上點(diǎn)來(lái)點(diǎn)去去熟悉這個(gè)應(yīng)用，很少有用戶(hù)會(huì)嘗試去滑動(dòng)。給用戶(hù)展示滑動(dòng)手勢(shì)最常見(jiàn)的方法有兩種。一是在添加滑動(dòng)進(jìn)度條的樣式，一般是由圓形和圓角矩形這類(lèi)比較簡(jiǎn)單的基本幾何形狀構(gòu)成。

二是對(duì)于隱藏內(nèi)容的部分展示，這屬于給用戶(hù)提供了一個(gè)暗示，表明了操作的可能性。往右邊滑動(dòng)或許能看到更多的信息。例如天氣應(yīng)用中對(duì)于15時(shí)的天氣狀態(tài)展示了一點(diǎn)，讓用戶(hù)了解滑動(dòng)可以看到更多的信息。

動(dòng)效的應(yīng)用

當(dāng)然會(huì)存在一些手勢(shì)很難給用戶(hù)說(shuō)清楚，我們可以使用動(dòng)效來(lái)用戶(hù)最直觀(guān)的展示。

總結(jié)

其實(shí)一款產(chǎn)品中有很多的功能，大部分用戶(hù)是不會(huì)用到的，同樣的功能在不同的產(chǎn)品的產(chǎn)品會(huì)有不同的展示。展示方式的不同也會(huì)造成手勢(shì)模型的差異。

以上就是我對(duì)手勢(shì)和功能的一些總結(jié)，希望大家看完會(huì)有所收獲。

#專(zhuān)欄作家#

王M爭(zhēng)，人人都是經(jīng)理專(zhuān)欄作家，資深互聯(lián)網(wǎng)人。

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

題圖來(lái)自 Pexels，基于 CC0 協(xié)議