浅议基于系统规范的设计创新（二）

【业务知识】浅议基于系统规范的设计创新（二）

----by samson

自定义手势

触摸手势如今成为了移动设备的一种标志性交互方式。Iphone通过触摸手势给用户带来了“直接操作”的体验概念——人们发现可以像在现实物理世界中操作物体那样去操控软件，这也是手势交互被大众广泛接受的原因。良好的触摸手势，能让用户自动映射到日常生活中的交互行为，让用户感觉亲切、自然，这些动作发自本能，一学即会。反之，一些动作不是来自熟知的物理世界或非系统既有，那就没那么容易发现并易于使用了。

 

手势的创新大抵可以分为两种，一种是对系统标准手势的功能扩展，即手势动作是系统既有的，但其对应的功能或响应的反馈做了改变；另一种则是完全自定义手势，譬如iphone平台上的多点触控（超过两点）。一般而言，前者的学习成本低，易于发现，发现之后又易于记忆掌握。在一些优秀app中，这种手势扩展方式已经运用的非常娴熟了。

关于手势有太多的话题，这里我们只聚焦于原生系统与那些优秀创新的app在手势操作设计上的相通之处。生硬的模仿往往是蹩脚的，但有时当我们想创意地解决一些问题时，灵感常常从经典中来。

 

iphone常用标准手势[1]

 

 

Pull-to-refresh

Pull-to-refresh(拉动刷新)如今几乎已是业界的一种标准交互设计模式。最先发明这种手势触发刷新模式的是Twiiter的设计师。但这个设计并非是一蹴而就的，在第一个版本中，加载按钮被塞到了列表顶部，当用户滚动（Scroll）屏幕至顶部时，很自然地就会看到这个按钮，比起单纯把刷新放在工具栏上，这已是一个不小的创新进步了。接下来，Twiiter的设计师又进一步地改良了这个手势操作：滚动至页面顶部，会出现一条隐藏的文字信息：“pull down to refresh”（下拉刷新），当下拉了足够距离后，又显示“release to refresh”（松手吧）。整个交互过程是一种对标准滚动操作的一种功能扩展，非常容易发现、学习、使用。

twiiter的pull-to-refresh[2]

 

回到Twiiter第一版的设计，当初Twiiter设计师是如何走出第一步，福至心灵，把加载按钮隐藏在页面顶部的呢？我们来看一看系统的信息应用，在短信列表界面，同样把搜索栏藏在了列表顶部，当用户滚动短信列表时，搜索栏会很自然地出现。我们可以发现，两者的设计模式是如此相似。

信息应用中滚屏显示搜索栏

 

 

Clear——将标准手势发扬光大了一遍

Clear是一款全手势操作的任务管理应用。它绕过了通用的控件，让一些通常作为快捷方式的手势来作为唯一的交互方式，配合动态、积极的反馈，使得整个交互流程酷炫无比。可观察这些眼花缭乱的手势后，我们可以发现clear采用的全是常用的系统标准手势。

Clear的每个界面都是列表视图，向左滑动（swipe）列表项可删除任务。这也是iOS中一种删除信息的快捷手势操作。但是clear对其进行了“加工改造”，它省去了二次确认的步骤，在交互流程中，加入了直观的动效反馈和细腻的UI变化，这样一来用户对这个手势仍然熟悉，但对整个设计的感觉却是耳目一新。接下来仿佛是水到渠成般地，clear按照对称法则加入了向右滑动的手势，功能也是与“删除”所相对应的功能——“完成”。

 

 

 

Clear另一个出彩的手势是双指缩放（Pinch&Spread），在iphone中该手势用于缩放图片内容。Clear巧妙地利用这个手势完成类似的目的——把一堆任务条目归到一起或分开；这与现实世界中的操作体验也是非常一致的。唯一遗憾的是两指捏合这个手势在手机屏幕上使用起来并不是非常舒适高效，如果是在ipad上，5指的缩放可更大有可为。

Pinch手势归拢信息条目

 

结语

在标准手势的基础上进行扩展设计，可以大大降低用户发现手势操作的门槛和学习的成本。另外，从传统中衍变往往会比平地建新楼更让人感到功力和底蕴。

 

待续……

【1】       图片来自来自http://gesturecons.com/

【2】       图片截自《Tapworthy.Desiging Great Iphone Apps》，作者 Josh Clark

本文原创自无线技术运营空间： http://wireless.qzone.qq.com 及 http://blog.youkuaiyun.com/wireless_tech （专注无线技术运营——无线技术(操作系统/数据库/WEB前端/负载均衡/系统容灾/系统安全/短信接入/WAP接入/3G等)、无线业务运营、无线开放平台、统计分析(用户行为分析/数据挖掘)、CP合作，联系我们：1780551083@qq.com）