移动端设计中的手势交互:指尖上的UI设计:

转载 通过点击、滑动、滚动和键盘快捷键来交互的日子吗?它们不再是唯一的交互方式,一起来了解一下~


还记得浏览网页时,只能通过点击、滑动、滚动和键盘快捷键来交互的日子吗?而现在,它们不再是唯一的交互方式,当苹果推出第一款iPhone时,多点触控技术成为了主流,用户们了解到,他们不仅可以在界面上指向、轻点还可以捏合、展开和滑动。手势成为新的操作方式。



一、UI中手势的力量

手势非常自然和直观,他们与真实世界反应类似。

对于使用手势,这里有三个主要的理由:


● 干扰少

App内,手势控制使用地越多,在屏幕上出现的按钮就越少,这样可以留出更多空间给更有价值的内容。这使得app以内容为重点,并让用户在没有障碍,或者在分心的情况下也能进行最重要的操作。

● 使用简单

一个手势一旦被用户发现和学习使用就会让用户在体验感到愉悦,而且手势可以减少步骤,来达到提高交互体验的目的。例如,当你需要删除一些项目时,用“一次点击删除一个”的方式的很浪费时间的,但是如果使用“滑动一下,删除一个”的滑动手势,就更简单快速,让用户更加愉悦。

● 无缝交互

虽然按钮看起来对于触发响应更加有用,但手势具有更大的潜力,使内容的交互更加直观。

二、手势的缺点

但同时,手势也存在难规范、易混淆等缺点。


● 增加用户负担

大多数手势学起来或者记起来不自然也不简单。举个例子,在大多数APP,一个手指的手势就对应一件事,用两个手指做一个同样的手势意味着另外一件事,其他对应事件的手势还有很多。

● 缺乏反馈

在大多数情况下,手势不会留下任何路径记录。这意味着,如果做一个手势但没有得到反应或者得到错的反应,这样就只能获得很少的信息或者不能获得有帮助的信息去解释为什么这么做。

● 缺乏一致性

大多数手势在app中还不是标准统一的。他们对于用户不总是显而易见的。甚至一个简单的滑动手势,在众多邮箱app内的邮件项目中也有着不同的工作方式。例如,在Apple Mail 中,删除一个未读项目,你应该向左滑动这个没有打开的邮件,然后界面会出现选项来删除这个项目。在Gmail里,向左滑动可以把邮件标记为未读状态。

三、手势成为移动端UI成功的关键

1.如何选择好的手势

如果你的界面里要使用手势,那你就必须要去了解你所在的市场以及你的目标用户会去使用的app。要尝试在你的app里使用和它们相同类型的手势。这样,你不仅基于你的目标市场的用户的行为优化了你的界面,还让用户从一开始就能舒适的使用你的app。



2.手势教学

虽然每个移动端app都必定会用到手势,但是要让用户很自然的就能知道如何操作(使用什么手势可以干什么)却一个挑战。可触摸的界面提供了很多条件来使用自然的手势,例如轻点、滑动和捏合来完成任务,但是不同于图形界面的操作,手势的交互用户往往是看不到的。

因此,要让用户能发现手势是很重要的。你需要确保你提供了正确的线索----通过视觉引导来帮助用户更容易的发现如何与界面进行交互。



3.如何在情境中教育用户

教程和演示的做法相当流行。在许多app中加入教程意味着要想用户显示一些说明内容来介绍界面。然而,UI教程不是介绍app的核心功能的最优雅的式。

良好执行的UI手势总是可以在易于实现视觉提示和渐进式披露的游戏中找到。这显而易见,最好的游戏可以使人们随着时间的推移来学习到技巧,而不是靠指导他们。例如,PuddingMonster 的游戏机器完全基于手势,但是他们允许用户得到基础的信息,他们不需要做很多的猜测。他们可以展示动画场景,让用户马上知道要做什么。


四、使用动效来传达手势

手势总是与移动app中的动效相关联。动效在维护用户体验中起着非常重要的作用。作为设计师,你可以利用动效来传达出用户可以进行某个操作。当动效与手势一致时,用户就会意识到自己与该物体正在相互作用。

动效在向用户提供视觉反馈上是非常重要的。没有动效,用户就不能获得足够的信息反馈,不能确定他们是不是成功地完成了手势动作。



这里有三种流行的基于动效来帮助用户学习手势。

第一种:动效视觉提示

显示一个在执行某个操作时如何和某一个界面元素进行交互的预览。它的目的是在手势和操作之间建立联系。例如下图中的这个游戏app是完全基于手势操作的,这个app让用户不用去猜测就能知道该如何操作。用动画来传达功能信息能立即让用户清晰的知道该怎么做。


第二种:内容的梳理

内容梳理是通过微妙的视觉线索来暗示用户进行手势操作。例如下图中卡片的展示,它表明这张卡的背后还存在着其他的卡片,这清晰的表明了可以滑动卡片。



第三种:功能可见性

你可以让你界面里的某些元素具有很明显的可供性来让用户知道这个是可以进行某种操作的。例如下图中点击相机icon后锁屏就会从下往上弹起,展示出在下面的相机功能。


五、总结

手势是一种强大的互动模式。移动设备已经从砖块发展到由我们手指驱动的复杂计算器。触摸和手势交互在使移动体验更加简便有趣方面,有很大的潜力。

设计一款移动端的app一定要思考手势设计。手势应该起到协调和节约时间的作用。为了设计一个有意义的手势,你应该规定一个动作以及与其配套的一个手势。提供反馈意见也非常重要,对于可能要进行的行动要有明确提示,并进行手势的引导。

​​​​​

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,980评论 25 707
  • 1 UI设计基础 1.1 为iOS而设计 1.1.1 iOS包含以下3条设计原则: 遵从,UI应该有助于人们理解内...
    Willry阅读 3,564评论 1 48
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,081评论 4 62
  • 这部分可以说是java的灵魂。它的实现原理其实不是很复杂:动态绑定。但在java中有一套强大多态运用的体系,其中涵...
    xzt阅读 349评论 0 0
  • 02-1-27 伍晓敏 从幼儿园开始,大宝参加学校的讲故事比赛,然后在家不时带着弟弟读故事书,读着读着,大宝好像也...
    家家阅读吧阅读 204评论 0 0