QQ登录

只需一步,快速开始

手机号码,快捷登录

手机号码,快捷登录

查看: 3499|回复: 108
收起左侧

[活动] 移动app交互设计的“手势流”强大体验

  [复制链接]
发表于 2015-11-20 15:59:31 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?注册加入

×
小编:用户在使用app中,是不是可以说好的体验是手指头的体验呢?是不是越多的手势就会有更好的体验呢?
今天的ui设计培训内容分享让你体验一下“手势流”的强大功效。



                               
登录/注册后可看大图

  设计师在设计app的时候,在界面设计上添加的按钮只需考虑跳转到哪里,图标怎样去表达跳转的意图等等,而手势需要考虑的则是,怎样的一个动作才适合用户当前掌握手机的方便运动,怎样的一个动作配合好用户操作之后看到的视觉设计效果,简单的来说就是用户想到的那个手势动作是否是操作之后他想要的结果;第三点还需要考虑手指的落脚点。交互设计师在这三个方面需要想得很清楚,趣达学院的交互设计培训课程有更多这方面的介绍。


                               
登录/注册后可看大图


  手势的设计能让界面设计看起来更炫,因为一系列动作都潜藏在界面内部。手势减少了用户操作的繁琐度,同时可以和不同规格的设备自由交互。
  基于此,我们来一起看一些现在很流行的app中都应用了哪些“手势流”。
  常用手势引导
  手势操作是用户通过手部运动,在界面内控制设备的操作过程。就像UXPin发布的2015-2016移动设计趋势中描述的那样,手势操作是手部运动,但也包括摇晃、倾斜设备等操作。


                               
登录/注册后可看大图


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


                               
登录/注册后可看大图


  这些是用户最常用的姿势
  单击:轻碰界面
  双击:两次快速点击界面
  拖:手不离屏幕保持移动
  变形:手不离屏幕用两个手指改变界面大小
  滑动:快速移动
  弹开:快速卷动
 
 每个动作都需要在用户可操作的范围内。现在也没必要担心手势会有什么问题,因为随着大屏手机销量越来越大,人机互动会越来越普遍。不过在交互设计中要注意的一点就是,拇指的位置,这里被叫做“拇指区”。很多时候我们单手拿手机时都会用拇指滑动屏幕,拇指是操作手机时最常见的手指。所以,拇指能在手机上碰到多大区域也要考虑清楚。图标的规格也很重要。每个图标都需要设计足够大,以保证多大手指的人都可以在界面上自由操作。
  基于该原则,图标最好设计成宽高44点。屏幕更大时,图标扩大至70点,这样可以使手指更容易点击。
  
      关联手势和动画效果
  移动设计中,手势和动画一定是息息相关的。动画是用户在完成整个动作之前,与app交互最直接的信号。
  动画的5个最基本的功能:
  动画通知
  信息披露
  突出内容
  折叠形式和菜单
  卷动
  回想一下每天你在操作手机过程中会遇到多少这样的动画。以Dark Sky天气app为例。


                               
登录/注册后可看大图


  除了预报天气冷暖,Dark Sky在整个app设计中都用到手势和动画,让用户在操作中有更好的用户体验。
  动画和手势操作是密不可分的。没有动画,用户就不能判定自己是否完成指令。最好把手势作为整个操作中的一环,而非单独设计。
  有了这些,我们从手势操作中获得的反馈会不太一样。

  苹果和3D Touch
  手势操作对手机来说是非常重要的平台,像苹果和Andriod 的研发者都在尝试创新。
  2015年最新手机iPhone 6s 引入新技术,3D Touch。从3D Touch开始,手势操控升至新级别。设备会辨别屏幕所受的压力,然后发起相应的指令。这种触控的不同点在于分层接口。在你进入下一层之前,压力会提示预览动作。


                               
登录/注册后可看大图


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

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

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

  材料设计改进的手势操作
  当苹果从不同的角度提示我们如何触控手机时,谷歌开始玩起概念游戏。操作和运动有何不同?在不断发展的材料设计文档中,谷歌精准描绘出这些动作如何工作。
  为简化用法,使用指南创造出一系列的运动规则。手势共有的缺点在于一个动作可能引起多重反应。本文介绍了如何把手势当做触发器以使你可以做很多事。



                               
登录/注册后可看大图


  当提到手势操作时,材料设计一般包括拖、刷、摇。
  拖是一个控制力更强的手势,与触摸目标结合使用
  刷是一个快速的手势,不需要触摸目标

  摇动并不需要触碰
  这些动作口令都是将速度看做唯一准则,凭借速度的优势,这些动作可能更容易被用户使用。
  它是这样打破的:
  拖仍然是和某个元素保持接触,但是改变手势方向后,可以撤回
  快速移动删除,防止被撤销

  在结束速度的基础上,滑动变成了一个手指的一个动作,该元素是否越过了一个动作可以被撤消
  复杂手势
  越来越多手势开始打破“一次动作一次反馈”的旧模式,多个手势一起。结果就是复杂的手势。这个技术是在游戏中最常见的,而且已开始扩展到其他app中。



                               
登录/注册后可看大图


  复杂手势需要三级动作完成任务。
  开始:最开始的接触,例如点、压
  延续:在一个特定的序列中应用多个手势,如次在屏幕上使用拖拽操作看看会发生什么
  终止:结束与屏幕接触的手势结束

  试想一下最流行的游戏,例如愤怒的小鸟。在用小鸟摧毁目标的过程中,你必须完成如下动作:
  点击,抓住并在屏幕上沿着正确的轨迹,发射小鸟
  松手,小鸟飞向目标
  聪明的触控不仅仅是动作


                               
登录/注册后可看大图


  动作缩略图
  聪明的触控不仅仅完成一个任务或者动作,正如交互设计最佳体验里写到的,他们应该让用户开心,也可以做一个教学工具。
  最好的手势交互需要考虑用户如何与设备接触

  高举一只手
  高举两只手
  双手水平
  根本不用手(……)
  你知道那些用户使用你的app时如何操作吗?需要进行用户教育吗?这听起来非常重要,有时同一个动作在不同app会有不同反应。
  对比一下Soundcloud和Clear。二者使用同样的手势操作,但是app反馈大相径庭。


                               
登录/注册后可看大图

                               
登录/注册后可看大图


  Soundcloud里,点击一下就能打开歌单或者播放歌曲;而在Clear,点击后是从任务列表中找到你想听的歌。
  在完成动作时用到的点击和刷新动作的范畴是一致的,但是特殊触控就会有不同而含义。

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

  最后,切记手势操作不要承担太多意义。
  下一步怎么样?
  其实,手势操作还可以触及到更本质的东西。大多数的手势操作是以指尖为基础,如果加上身体的使用,触控的定义会涉及更广。大多数的触控都是停留在静态设计层面,随着视频和动画的不断使用,手势操作也可用到更多动画。


                               
登录/注册后可看大图


  以Haze天气app为例。随着温度变化,app会显示不同的图层颜色,效果非常震撼。
  手势操作也可以让不同app之间连接。例如,不同应用程序之间的拖放操作。


                               
登录/注册后可看大图


  Workflow是一款iOS系统的app,可以在不同应用程序之间拖放。这种自动化工具很聪明,完全植根于动画程序。
  当提到和衣物的交互时,触控将扩大到物理事件的范畴。比如摆动手臂发送文本或摇动手腕就能给语音信箱留言。脑洞大开……
 
   总结
  现在设计一款不用手势操作的手机app有点自寻死路的即视感。手势操作这一小步,是手机设计进程中迈出的一大步。也会对日后设计者和用户产生更大的影响。
  当然,这个秘密与任何其他设计方案的思路是一样。新的手势操作一定是用户凭直觉就能接受的,或者稍有提示用户就能明白,而非复杂繁琐。如果做得好,新的即将被大众接受的app就会很快出现。

更多的ui设计培训文章--设计app引导页的三大技巧
每天都一点点ui培训,每天多一点点经验。
找在线ui设计培训机构,就找趣达ui培训学院
原文来自:雷锋网



欢迎来到【天府同城大成都】-天府四川的吃喝玩乐—生活消费媒体网站!请记住我们的域名www.fqtc.com
发表于 2015-11-20 16:38:48 | 显示全部楼层
警告啊
欢迎来到【天府同城大成都】-天府四川的吃喝玩乐—生活消费媒体网站!请记住我们的域名www.fqtc.com
回复 支持 反对

使用道具 举报

发表于 2015-11-21 09:56:54 | 显示全部楼层
呵呵 没事怎么有点被讽刺的味道啊
欢迎来到【天府同城大成都】-天府四川的吃喝玩乐—生活消费媒体网站!请记住我们的域名www.fqtc.com
回复 支持 反对

使用道具 举报

发表于 2015-11-21 12:17:59 | 显示全部楼层
呵呵 没事怎么有点被讽刺的味道啊
欢迎来到【天府同城大成都】-天府四川的吃喝玩乐—生活消费媒体网站!请记住我们的域名www.fqtc.com
回复 支持 反对

使用道具 举报

发表于 2015-11-21 13:17:08 | 显示全部楼层
不早了 各位晚安~~~~
欢迎来到【天府同城大成都】-天府四川的吃喝玩乐—生活消费媒体网站!请记住我们的域名www.fqtc.com
回复 支持 反对

使用道具 举报

发表于 2015-11-21 15:55:24 | 显示全部楼层
不早了 各位晚安~~~~
欢迎来到【天府同城大成都】-天府四川的吃喝玩乐—生活消费媒体网站!请记住我们的域名www.fqtc.com
回复 支持 反对

使用道具 举报

发表于 2015-11-21 16:57:55 | 显示全部楼层
那个家 让它沉下去吧! 不要啦
欢迎来到【天府同城大成都】-天府四川的吃喝玩乐—生活消费媒体网站!请记住我们的域名www.fqtc.com
回复 支持 反对

使用道具 举报

发表于 2015-11-21 17:20:20 | 显示全部楼层
我在大成都热情的回复楼主的帖子
欢迎来到【天府同城大成都】-天府四川的吃喝玩乐—生活消费媒体网站!请记住我们的域名www.fqtc.com
回复 支持 反对

使用道具 举报

发表于 2015-11-21 19:59:45 | 显示全部楼层
我在大成都热情的回复楼主的帖子
欢迎来到【天府同城大成都】-天府四川的吃喝玩乐—生活消费媒体网站!请记住我们的域名www.fqtc.com
回复 支持 反对

使用道具 举报

发表于 2015-11-21 21:28:00 | 显示全部楼层
我也不知道了~~你把我问蒙了 呵呵
欢迎来到【天府同城大成都】-天府四川的吃喝玩乐—生活消费媒体网站!请记住我们的域名www.fqtc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册加入

本版积分规则

×本站发帖友情提示
1、注册用户在本站发表/转载的任何作品仅代表其个人观点,不代表本站立场。
2、如果存在违反国家相关法律、法规、条例的行为,我们有权在不经作者准许的情况下删除其在本站所发表的文章。
3、所有网友不要盗用有明确版权要求的作品,转贴请注明来源,否则文责自负。如有侵犯您的权益请联系我们及时删除。
4、本站保护注册用户个人资料,但是在自身原因导致个人资料泄露、丢失、被盗或篡改,本站概不负责,也不承担相应法律责任。

关闭

站长推荐上一条 /1 下一条

客服热线
400-1234-888 周一至周日:09:00 - 21:00
公司地址:北京市朝阳区科技路88号现代城5号楼

天府生活网(www.fqtc.com)四川生活网为你提供房产、招聘、黄页、团购、交友、二手、宠物、车辆、周边游、本地生活、供求信息等海量分类信息,是专业,免费,高效的本地生活信息服务平台。

Powered by Discuz! X3.5 © 2001-2013 Comsenz Inc.

QQ|广告报价|小黑屋|Archiver|手机版|免责声明|大成都 ( 蜀ICP备19006310号-4 )

GMT+8, 2024-11-23 03:50 , Processed in 0.112954 second(s), 20 queries .

快速回复 返回顶部 返回列表