实战：移动app交互设计如何把“手势流”装进手机.pdf

实战：移动app交互设计 如何把 “手势流”装进手机 论文类别：计算机 - 互联网研究 上传时间：2015/11/19 18:12:00 论文作者：未知 (中讯)现在每次打开手机里的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更好。因为相同的 手势对旧版手机来说可能就无效了。 材料设计改进的手势操作 当苹果从不同的角度提示我们如何触控手机时，谷歌开始玩起概念游戏。操 作和运动有何不同?在不断发展的材料设计文档中，谷歌精准描绘出这些动作如 何工作。 为简化用法，使用指南创造出一系列的运动规则。手势共有的缺点在于一个 动作可能引起多重反应。本文介绍了如何把手势当做触发器以使你可以做很多 事。 当提到手势操作时，材料设计一般包括拖、刷、摇。 拖是一个控制力更强的手势，