app交互设计:手势流

在智能交互中,手势已成为新的“点击”。现在每次打开手机里的app、游戏时,都需要用到点击、拖、拉等动作。单看点击的话,设计师与开发者只需要考虑用户点击屏幕哪里体验更好。但是手势不同,手势操作还需考虑什么动作,屏幕落点在哪里,用户能否直观地看到并使用。

 

手势的设计能让界面看起来更炫,因为一系列动作都潜藏在界面内部。手势减少了用户操作的繁琐度,同时可以和不同规格的设备自由交互。

基于此,我们来一起看一些现在很流行的app中都应用了哪些“手势流”。

常用手势引导

手势操作是用户通过手部运动,在界面内控制设备的操作过程。就像UXPin发布的2015-2016移动设计趋势中描述的那样,手势操作是手部运动,但也包括摇晃、倾斜设备等操作。

app交互设计:手势流

由 Craig Villamor等人设计的手势的特定含义详细地描述了十几个动作,并说明它们是如何运作的。这些手势是由执行特定任务和常用移动设备的用户行为设置出来。

app交互设计:手势流

这些是用户最常用的姿势

  • 单击:轻碰界面
  • 双击:两次快速点击界面
  • 拖:手不离屏幕保持移动
  • 变形:手不离屏幕用两个手指改变界面大小
  • 滑动:快速移动
  • 弹开:快速卷动

每个动作都需要在用户可操作的范围内。现在也没必要担心手势会有什么问题,因为随着大屏手机销量越来越大,人机互动会越来越普遍。不过在设计中要注意的一点就是,拇指的位置,这里被叫做“拇指区”。很多时候我们单手拿手机时都会用拇指滑动屏幕,拇指是操作手机时最常见的手指。所以,拇指能在手机上碰到多大区域也要考虑清楚。图标的规格也很重要。每个图标都需要设计足够大,以保证多大手指的人都可以在界面上自由操作。

基于该原则,图标最好设计成宽高44点。屏幕更大时,图标扩大至70点,这样可以使手指更容易点击。

关联手势和动画效果

在移动设计中,手势和动画一定是息息相关的。动画是用户在完成整个动作之前,与app交互最直接的信号。

动画的5个最基本的功能:

1动画通知

2信息披露

3突出内容

4折叠形式和菜单

5卷动

回想一下每天你在操作手机过程中会遇到多少这样的动画。以Dark Sky天气app为例。

app交互设计:手势流

除了预报天气冷暖,Dark Sky在整个app的设计中都用到手势和动画,让用户在操作中有更好的用户体验。

动画和手势操作是密不可分的。没有动画,用户就不能判定自己是否完成指令。最好把手势作为整个操作中的一环,而非单独设计。

有了这些,我们从手势操作中获得的反馈会不太一样。

苹果和3D Touch

手势操作对手机来说是非常重要的平台,像苹果和Andriod 的研发者都在尝试创新。

2015年最新手机iPhone 6s 引入新技术,3D Touch。从3D Touch开始,手势操控升至新级别。设备会辨别屏幕所受的压力,然后发起相应的指令。这种触控的不同点在于分层接口。在你进入下一层之前,压力会提示预览动作。

 

地图界面

在上图苹果手机的例子可见,有人通过短信发给你一个地址,轻轻点击连接地址就弹出来了。当你把手移开时,弹框就消失了。如果你更用力的话,地图上所有地点链接都会打开,时甚至有被撞了一下的反应。这是一个关于在单一的触控页面下,元素在跨应用程序上如何实现无缝对接。

此外,在苹果的用户界面设计准则上,介绍了一些触控并且如何使用。

  • 避免将不同的动作和标准的手势联系在一起
  • 避免创建自定义的手势,调用相同的动作作为标准手势
  • 使用多种手势作为快捷方式加快完成任务,而非唯一方式
  • 避免定义新的手势,除非你的应用程序是一个游戏
  • 在正常环境中,考虑使用多手指操作

这会改变我们与iPhone手机的交互方式,当然用户肯定需要一定的调整期。所以当设计3DTouch时最好考虑到这点,何时应用3DTouch更好。因为相同的手势对旧版手机来说可能就无效了。

材料设计改进的手势操作

当苹果从不同的角度提示我们如何触控手机时,谷歌开始玩起概念游戏。操作和运动有何不同?在不断发展的材料设计文档中,谷歌精准描绘出这些动作如何工作。

为简化用法,使用指南创造出一系列的运动规则。手势共有的缺点在于一个动作可能引起多重反应。本文介绍了如何把手势当做触发器以使你可以做很多事。

app交互设计:手势流

当提到手势操作时,材料设计一般包括拖、刷、摇。

  • 拖是一个控制力更强的手势,与触摸目标结合使用
  • 刷是一个快速的手势,不需要触摸目标
  • 摇动并不需要触碰

这些动作口令都是将速度看做唯一准则,凭借速度的优势,这些动作可能更容易被用户使用。

它是这样打破的:

拖仍然是和某个元素保持接触,但是改变手势方向后,可以撤回

快速移动删除,防止被撤销

在结束速度的基础上,滑动变成了一个手指的一个动作,该元素是否越过了一个动作可以被撤消

复杂手势

越来越多手势开始打破“一次动作一次反馈”的旧模式,多个手势一起。结果就是复杂的手势。这个技术是在游戏中最常见的,而且已开始扩展到其他app中。

app交互设计:手势流

复杂手势需要三级动作完成任务。

开始:最开始的接触,例如点、压

延续:在一个特定的序列中应用多个手势,如次在屏幕上使用拖拽操作看看会发生什么

终止:结束与屏幕接触的手势结束

试想一下最流行的游戏,例如愤怒的小鸟。在用小鸟摧毁目标的过程中,你必须完成如下动作:

  • 点击,抓住并在屏幕上沿着正确的轨迹,发射小鸟
  • 松手,小鸟飞向目标

聪明的触控不仅仅是动作

app交互设计:手势流

动作缩略图

聪明的触控不仅仅完成一个任务或者动作,正如交互设计最佳体验里写到的,他们应该让用户开心,也可以做一个教学工具。

最好的手势交互需要考虑用户如何与设备接触

  • 高举一只手
  • 高举两只手
  • 双手水平
  • 根本不用手(……)

你知道那些用户使用你的app时如何操作吗?需要进行用户教育吗?这听起来非常重要,有时同一个动作在不同app会有不同反应。

对比一下Soundcloud和Clear。二者使用同样的手势操作,但是app反馈大相径庭。

app交互设计:手势流

app交互设计:手势流

Soundcloud里,点击一下就能打开歌单或者播放歌曲;而在Clear,点击后是从任务列表中找到你想听的歌。

在完成动作时用到的点击和刷新动作的范畴是一致的,但是特殊触控就会有不同而含义。

最关键的是,用户发生的行为因为简单的视觉艺术便可无缝对接。多亏了它的普及,基于接口的Soundcloud一经出现就很容易被接受,因此也不需向用户解释点击和滑动的区别。Clear的非常规矩形的模块化设计,暗示每个矩形在刷的时候好像一张纸。

最后,切记手势操作不要承担太多意义。

下一步怎么样?

其实,手势操作还可以触及到更本质的东西。大多数的手势操作是以指尖为基础,如果加上身体的使用,触控的定义会涉及更广。大多数的触控都是停留在静态设计层面,随着视频和动画的不断使用,手势操作也可用到更多动画。

app交互设计:手势流

以Haze天气app为例。随着温度变化,app会显示不同的图层颜色,效果非常震撼。

手势操作也可以让不同app之间连接。例如,不同应用程序之间的拖放操作。

 

Workflow是一款iOS系统的app,可以在不同应用程序之间拖放。这种自动化工具很聪明,完全植根于动画程序。

当提到和衣物的交互时,触控将扩大到物理事件的范畴。比如摆动手臂发送文本或摇动手腕就能给语音信箱留言。脑洞大开……

总结

现在设计一款不用手势操作的手机app有点自寻死路的即视感。手势操作这一小步,是手机设计进程中迈出的一大步。也会对日后设计者和用户产生更大的影响。

当然,这个秘密与任何其他设计方案的思路是一样。新的手势操作一定是用户凭直觉就能接受的,或者稍有提示用户就能明白,而非复杂繁琐。如果做得好,新的即将被大众接受的app就会很快出现。

原文:http://www.yidonghua.com/post/24873.html

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/10852/

(0)
iouedioued
上一篇 2015-11-17
下一篇 2015-11-17

相关推荐

  • 谈谈用户体验与风控的平衡性

    先翻翻旧文从反反鸡汤谈过犹不及从受众目标,再谈过犹不及其实今天是这两篇的引申。之前我说过很多创业者容易犯的错误,过度理想主义,把用户当作好人,我说过一个关键词,不能说坏用户一定很多,可能坏用户真的只有1%,但很可能一个坏用户的破坏,可以抵销一百个好用户的创造,这是很常见的创业的困境,因为很小的疏忽,导致极大的损失。所以,一些毫无经验的创业者,要有这方面的意识,至少思想上要有风控这个概念,要知道如何规避和防范坏的事情,不要过于理想主义。但...

    微信热点 2018-05-04
  • 如何完美碾压用户体验职位面试 【UXRen译#152】

    作者: Patrick Neeman |  翻译:Shea ,校审:Ariel   当你成功进入了电话面试或者面对面面试的阶段,这就意味着你已经通过了最艰难的考验:你已经具备了在该公司工作的技能。现在要被评估是否具备软实力以及能否…

    交互专题 2017-08-07
  • 众多新闻客户端,评论交互哪家强?

    上一篇文章《众多新闻客户端,评论功能哪家强?》中,我通过抽样的方法对网易新闻、腾讯新闻、今日头条评论功能的数量和质量进行了对比分析。本文将继续对这三款产品评论功能的交互设计进行对比分析。我的结论是并非某款产品明显优于其他,而是各自都有特色和优点,值得对手借鉴。

    2017-04-29
  • 从逻辑层、感官层与知觉层,讲述体验设计的表和里

    什么是合格靠谱的体验设计?在逻辑层讲一个通顺的故事。什么是触动人心的体验设计?在感官层唤起人的体感记忆。什么是经典不衰的体验设计?在知觉层建立起认同和反思。你的设计逻辑性和方法运用很强大,很擅长做工具型的产品设计,但在设计的创新性和情感体验上还需要进一步加强。任何游戏化的设计都必须认识到:外在奖励会显著降低玩家的内在动机。游戏化的经验很简单:不要盲目地将外在动机附着在内在动机上。

    2017-05-13
  • 3种基本方法,引导用户正确操作

    作为一名产品经理,当人们使用你的产品的时候,需要尽可能避免他们犯错误。我们应该留心用户可能犯错误的地方,在合适的地方给他们一个温和的推动,以确保一切都能正常进行。(不要让用户认为自己被指使着做什么事,至少不要用被认为是“粗鲁”和“侵扰式”的)

    2017-05-31
  • 抽屉式导航怎么用?这4种场景教你正确的设计姿势

    …上图的 APP 将选项卡(tab row)变成抽屉式导航菜单(drawer menu),用户在相应功能间的切换率急剧下降。…很多用户还没有建立起相应的心理模型(尤其是抽屉式或者汉堡包菜单)尽量将 APP 的核心功能放在用户可以看得到地方。
    ——能露出来, 就别藏着触摸操作中,手势永远要比点击优先级低。现代触摸操作习惯毕竟只流行了几年,然而传统PC上的操作习惯已经实行了将近20年。所以通过滑动来切换Tab不会比点击切换来的直观。
    ——石头们

    2017-05-30
  • 浅谈如何从零学习成优秀的交互设计师

    浅谈如何从零学习成优秀的交互设计师 本文全系列满满干货,是从众多交互设计前辈们分享的宝贵经验里挑选出的最实用的方法,不仅能让你彻底了解交互设计,还能帮有志在这个领域发展,却苦于没有老师的童鞋,从零开始…

    2014-12-23
  • 这些走心的用户体验应该多学学

    不仅仅局限于互联网的设计,可能还有服务,线下的设计等。先问一下自己,到底什么是好的用户体验?我认为有以下三点:第一,无需思考,符合本能的设计。(反例,各种需要用户大量动脑的设计)第二,不打扰用户,让用户沉浸的设计。(反例,各种不必要的弹窗提示)第三,温暖的设计,细节打动人心,超出用户的心理预期。(反例,各种冰冷的缺省页面)1.网易云音乐分享提示最近发现了网易云音乐的一个小彩蛋,那就是在播放页当你点了某一首音乐喜欢后,会给你跳出来一个可爱...

    2018-02-01
  • 你的网站用户体验为什么比竞争对手差

    网站SEO优化用户体验,又是用户体验!总是有一些站长弄不明白他的网站到底哪里做的不好,明明也做了蛮多的网站优化工作,但是与竞争对手的网站相比的时候,优化数据始终差一截。总是有窗口自动弹出不管是广告窗口,还是在线咨询窗口,如果不是用户主动点开,就自动频繁的弹出来,用户关掉一遍两遍,还是弹出来,那么这种设置明显是在撵用户离开你的网站。存在死链或错误链接第一种情况是用户通过搜索目标关键词找到你的网站,想点击进入却发现是无法打开的;第二种情况是...

    2018-02-16
  • 转行学设计?新手必读的五大误区+三大秘籍

    经常看到一些讲如何学习设计的文章,坦白讲感觉有些千篇一律、且不痛不痒,都说要看点书、学点画、练软件、多观察……唉,练软件这事还要说么,难道你还需要告诉一个人学开发是需要学习编程语言的?

    2017-06-03