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

相关推荐

  • 案例分析|社交网络产品LOGO设计系统

    在SNG(腾讯社交网络事业群)品牌系统语言里,LOGO系统承载品牌视觉的最核心容器,是整个品牌视觉系统的灵魂,是品牌的精神文化理念、信誉、服务等特点的浓缩表现,直接影响着社交网络品牌的发展。本文核心剖析社交网络产品LOGO设计系统。

    2017-05-09
  • 怎么免费学习 UI/UX 设计?

    一些资料是英文的,需要一点基础,如果看不太懂可以使用谷歌翻译之类的工具辅助一下,有的图书也有中文版,自己在亚马逊上搜索英文名即可。 我从来没有去一所设计学校。但我只是喜欢做的事情。 3年前,我开始了我自…

    2016-06-09
  • 总结|服务设计的基础概念和案例

    在这里,本文作者和大家分享一些我总结的服务设计的基础概念和案例,希望对大家快速入门服务设计有所帮助。

    2017-05-06
  • Welcome to the Gutenberg Editor

    The goal of this new editor is to make adding rich content to WordPress simple and enjoyable. This whole post is composed of pieces of content—somewhat similar to LEGO bricks—that you can move around…

    2023-03-03
  • 分享两个交互设计作品

    今天跟大家分享的是二两童靴的两个交互设计作品,第一个是平安保险产品配置后台交互设计,第二个是台州银行客户经理移动办公App交互设计,希望大家多多交流。如果你也有好的作品想在我是UE网上展示,可以加学习群15…

    2015-07-02
  • Material design 这20个大牌应用已经用上了!

    自从去年google在android新版本Lollipop提出的material design概念后,在世界各地疯狂地掀起一阵material design热。Material design不仅看起来令人惊叹,也是一个前所未有的设计理念。不仅对设计师的影响深大,对…

    交互设计 2015-08-26
  • 4个关键词总结,如何把用户体验做到极致?

    作者:@烧包鹿全文共 4530 字 6 图,阅读需要 10 分钟———— / BEGIN / ————上周五约了朋友吃晚饭,提前约的顺风车。由于堵车,司机到了办公区的北门。经过沟通,我从定位地点过去找他。四扇车窗都是开的,他坐在驾驶位,烟刚抽了三分之二,后视镜旁还有未散尽的烟雾。他回头看见了我,我朝他微笑示意。确认了眼神,我是他的乘客。他马上把烟灭了,左手在空中挥了挥,右手向左转了一下空调按钮,抬起头在空中胡乱吹了几口气。隔着车窗看见副...

    2018-04-30
  • 从第三代锁屏,看移动端交互设计的未来趋势

    每年的梅花网传播业大展都是传播业界的一大盛事,我们不仅能看到过去一年整个市场和行业的进步与创新;也会看到互联网、移动互联网催生的一系列产品,它们共同预示着未来的发展方向。今年的梅花网传播业大展上,我…

    2017-08-01
  • 五个技巧,设计优质的新用户引导流程

    新用户引导绝对是个瓶颈。花费时间设计和开发,找了用户测试调研,最后上线了,依然拦不住汹涌的用户流失潮。很多时候,也许只是新用户引导没做好而已。今天的文章,我们来聊聊新用户引导的设计~新用户不去注册是因为他们乐于了解你的产品的UI是如何工作的。他们注册是因为他们认可你的产品所呈现出来的价值。好的空状态设计,能够化腐朽为神奇。

    2017-05-09
  • 用体验设计方法论,结合商业诉求对APP进行改版设计

    这个产品是做什么的?
    这个平台安全吗?
    购买哪个比较好?
    怎么购买理财,外汇,股票类的产品?
    收益如何?
    ……有什么新活动?
    是否能继续提升自己利益?
    以前买过的产品有什么新变化?
    ……

    2017-05-19