轉(zhuǎn)自：王M爭(zhēng)

作者：王M爭(zhēng)

鼠標(biāo)和鍵盤是個(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)提升用戶體驗(yàn)根灯。其實(shí)大部分手勢(shì)非常的簡(jiǎn)單易懂径缅，一旦用戶學(xué)會(huì)了就不會(huì)忘記。但是有些手勢(shì)用戶很難發(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í)用戶對(duì)于界面中可點(diǎn)擊的元素都有了一定的認(rèn)識(shí)。比如谬以，他們知道按鈕是可以點(diǎn)擊的强饮，置灰的按鈕不可點(diǎn)擊，文字帶有配色是可以點(diǎn)擊的（一般是藍(lán)色或者企業(yè)色）为黎；圖標(biāo)也是可以點(diǎn)擊的邮丰。用戶可以發(fā)現(xiàn)大部分的點(diǎn)擊手勢(shì)行您。

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

其實(shí)手勢(shì)相同的功能在不同的產(chǎn)品中會(huì)有不同的展示形式泉沾。以簽到功能為例捞蚂，閱讀類應(yīng)用一般來(lái)說(shuō)功能結(jié)構(gòu)比較簡(jiǎn)單，作為行為召喚元素的簽到按鈕在這里可以做的稍微寫實(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)給用戶一個(gè)手勢(shì)的指引。但是有些次要的功能彤悔，或者我們不希望用戶使用的功能嘉抓，在設(shè)計(jì)的時(shí)候我們要進(jìn)行弱化。

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

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

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

文字的力量

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

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

滑動(dòng)

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

一些用戶可能需要用了微信很久以后才發(fā)現(xiàn)原來(lái)每一個(gè)對(duì)話框都是可以滑動(dòng)的爬虱。而且我們?cè)谑褂靡豢钚碌膽?yīng)用時(shí)隶债，我們會(huì)習(xí)慣在界面上點(diǎn)來(lái)點(diǎn)去去熟悉這個(gè)應(yīng)用，很少有用戶會(huì)嘗試去滑動(dòng)跑筝。

給用戶展示滑動(dòng)手勢(shì)最常見(jiàn)的方法有兩種死讹。一是在添加滑動(dòng)進(jìn)度條的樣式，一般是由圓形和圓角矩形這類比較簡(jiǎn)單的基本幾何形狀構(gòu)成曲梗。

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

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

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

總結(jié)

其實(shí)一款產(chǎn)品中有很多的功能引颈，大部分用戶是不會(huì)用到的耕皮，同樣的功能在不同的產(chǎn)品的產(chǎn)品會(huì)有不同的展示境蜕。展示方式的不同也會(huì)造成手勢(shì)模型的差異蝙场。以上就是我對(duì)手勢(shì)和功能的一些總結(jié)，希望大家看完會(huì)有所收獲粱年。