隐藏手势设计总结

转自:王M争

作者:王M争

鼠标和键盘是个人电脑上最主要的输入工具。然而对于移动端产品来说,与产品进行交互主要靠的是我们的手,或者说手势。手势成为了一种强大的交互模式,可以说一款产品在移动端能否取得成功很大程度上取决于你所构建的手势体系是否好用。

目前来说常见的手势有:触摸,滑动,拖曳,轻击,按住不放和多点触控等。手势的应用可以通过减少操作流程中的步骤来提升用户体验。其实大部分手势非常的简单易懂,一旦用户学会了就不会忘记。但是有些手势用户很难发现,你可能都不知道其存在性,更谈不到去学了。这让我想起经常在朋友圈看到一些文章《XXX的这些功能,99%的人都不知道》。其实手势跟功能是无法相互剥离来说的,因为手势是为了功能而服务的,所以在下面我会把手势跟功能融合在一起说。

点击

首先来说,最常见的点击。其实用户对于界面中可点击的元素都有了一定的认识。比如,他们知道按钮是可以点击的,置灰的按钮不可点击,文字带有配色是可以点击的(一般是蓝色或者企业色);图标也是可以点击的。用户可以发现大部分的点击手势。

但是也有例外,以QQ的好友互动标为例。从我个人角度来说,最开始我以为是那个好友改呢称了,因为现在也有很多人的昵称中带有表情。我没有意识到那个是互动图标,更谈不到点击了。

其实手势相同的功能在不同的产品中会有不同的展示形式。以签到功能为例,阅读类应用一般来说功能结构比较简单,作为行为召唤元素的签到按钮在这里可以做的稍微写实一点来凸显出来。

但是在功能比较多且结构复杂的产品中这样做就不太现实了,飞猪的签到页面有太多的内容,有太多需要展示的信息。如果这里的签到按钮使用了阴影,高光的样式来进行凸显,那么考虑到设计的一致性其他地方的按钮是否也要用相同的样式?那么整个页面就会显得特别乱。

强弱化处理

就像我在上面说的,功能和手势是不能相互剥离的。有的功能比较重要,所以我必须以清楚明确的视觉设计来给用户一个手势的指引。但是有些次要的功能,或者我们不希望用户使用的功能,在设计的时候我们要进行弱化。

以微信为例,其对“退出登录”按钮进行了弱化,微信中的按钮样式是填充了绿色的圆角矩形。其实这种弱化也很容易理解,微信肯定不希望用户退出当前的账号。

同样的道理,在同是鹅厂旗下的QQ中“添加或者注册账号”我表示欢迎,退出当前账号你就慢慢找吧。

接下来再说一个反面例子,一些用户为了在理财时简化操作流程会选择开通短信免验证功能,这样子就不用购买一次理财就要输入一次短信验证码。开通成功的结果页面中“取消免验证”按钮没有进行弱化,一些心急的用户可能以为是“返回”按钮就点击了下去。这样又要重新验证一次了。

文字的力量

有的时候为了提高点击率,我们会给元素添加一些文字。

例如:支付宝中我的快递,月账单,我的健康等这些模块的下方都有立即查看的“按钮”。其实这些“按钮”没有多大的实际操作意义,因为用户不用非要点击到那个按钮,只要点击到了这个模块的任何区域都可以完成跳转。这里的“按钮”是作为一种行为召唤元素来吸引用户注意力,告诉用户这个是可以点击的。

滑动

相比于点击来说,给滑动手势设计引导就更难了。首先你不给提示的话,用户很难自己知道原来这里可以滑动。

一些用户可能需要用了微信很久以后才发现原来每一个对话框都是可以滑动的。而且我们在使用一款新的应用时,我们会习惯在界面上点来点去去熟悉这个应用,很少有用户会尝试去滑动。

给用户展示滑动手势最常见的方法有两种。一是在添加滑动进度条的样式,一般是由圆形和圆角矩形这类比较简单的基本几何形状构成。

二是对于隐藏内容的部分展示,这属于给用户提供了一个暗示,表明了操作的可能性。往右边滑动或许能看到更多的信息。例如天气应用中对于15时的天气状态展示了一点,让用户了解滑动可以看到更多的信息。

动效的应用

当然会存在一些手势很难给用户说清楚,我们可以使用动效来用户最直观的展示。

总结

其实一款产品中有很多的功能,大部分用户是不会用到的,同样的功能在不同的产品的产品会有不同的展示。展示方式的不同也会造成手势模型的差异。以上就是我对手势和功能的一些总结,希望大家看完会有所收获。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,386评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,142评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,704评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,702评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,716评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,573评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,314评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,230评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,680评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,873评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,991评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,706评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,329评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,910评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,038评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,158评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,941评论 2 355

推荐阅读更多精彩内容