移动设备之滑动的维度

标签: 交互设计 移动设备 | 发表时间:2013-06-04 00:50 | 作者:dream
出处:http://www.boxui.com

前言

在iOS交互模型的最底层,有一个“空间”的概念(具体可见 ios空间模型),而空间最基本的属性就是三个维度。滑动依存于屏幕这个二维环境,也可以从维度这个角度去思考。最常见的滑动例如ios里删除短信息的操作,这里的滑动是最基础的,可以理解成一维的、被赋予了唯一功能的操作。但如果认为滑动就是这么简单,那可能忽略了滑动可以为设计带来的千变万化。 1

当滑动被赋予功能,并与界面(信息或控件)结合时,具有很强的可塑性,并可有效提升操作的易用性、高效性、有效性。根据滑动的维度,可以分成一维滑动、二维滑动;同时结合滑动控制界面的方式,也可以分为连续和离散。通过一些实例具体说明。

 

一维滑动

Mailbox在邮件列表对邮件进行操作时,使用了一维离散型的滑动:

1 向右滑动邮件列表中的一个邮件条目,根据滑动距离的长短先后出现已读,删除操作,release后执行。

2 向左滑动邮件列表中的一个邮件条目,根据滑动距离的长短先后出现归为待办事项、分类归档操作,release后执行。

2   (图片来自ifanr)

百度浏览器页面缩放的功能,采用了一维连续型滑动:

1 默认在界面底部的工具栏显示最常用操作,

2 在工具栏滑动时,工具栏变为页面缩放的控件;

3 通过滑动距离长短控制页面缩放大小(越右越大),同时上方页面以页面左上为缩放中心,实时反馈页面缩放效果;

4 release结束缩放操作,得到缩放后的页面。     3

二维滑动 

当滑动被赋予的功能增加,或需要更复杂控制时,一维不能解决,可以升维成二维滑动。

ios默认视频播放器的视频进退控制,采用了二维滑动:

操作:按下滑块后沿竖直方向滑动,根据滑动距离切换速度,再横向滑动进退,release后视频进度生效。

效果:下图绿线为手实际滑动距离,紫线为视频进退幅度。不同速度下水平滑动同样距离,视频进退的幅度不同,高速进退幅度最大,慢速最小。

4

如果把视频播放器的滑动操作抽象,可形成其通过二维滑动变速控制视频进度的二维空间模型,如下:竖直方向的滑动,通过离散的方式选择进退速度。水平方向的滑动,通过连续的方式控制视频进退的幅度。

5

类似的还有猛犸浏览器的页面变速滚动功能:

操作:在页面中纵向滑动时,页面以默认滑动速度滚动;如果先从屏幕右边缘横向滑动,便可选择不同滚动速度(越左速度越快),再纵向滑动以滚动页面。

效果:手向下滑动同样距离,速度快的页面滚动幅度大(下图绿线表示手实际滑动距离,紫线表示页面滚动幅度)

6

滚动功能的二维空间模型如下:

7

以上两个二维滑动的例子都是通过在一个维度改变速度去影响另一个维度对幅度的控制。Snapseed的二维滑动操作更加简单易用,在界面任意位置竖直滑动固定距离切换功能,水平滑动控制具体功能的参数大小。 如果把snapseed的滑动操作抽象,可形成其通过二维滑动实现功能切换和参数调节的二维空间模型:

8 9

由此引申一下,当两个维度都可以自由滑动时,滑动可变为拖动。这时为拖动赋予功能,去判断这个功能的标准除了上文提到的滑动距离,还可以是手或被拖动物体到达或离开的区域。例如Launcher中,按下apps后进入二级界面,手滑动到对应区域release激活操作。

10

 

总结

滑动手势诠释了“模糊的精确”的设计思想,有效提升操作可用性:

1 易于学习并形成习惯用法。

2 在移动环境下使用,适合单手操作,高效易控。

3 通过直接操作的对象或需要时出现,代替工具栏、菜单等常用控件,节省界面空间,为信息让路。

4 易成为产品的杀手级功能和传播点。

当滑动被赋予功能,并与界面(信息或控件)结合时,可以有较强的可塑性,可从以下方面为切入点,结合产品功能进行思考:

1 赋予简单功能的滑动可以是一维的;需要增加功能类别或者强度时,可以升维,形成二维滑动或者拖动。

2 为滑动赋予功能时,去判断这个功能类别或强度的标准可以是滑动的直线距离。为拖动赋予功能时,标准可以是手或被拖动物体到达或离开的区域。

3 借用人机交互学当中的对控制器的定义,滑动可以通过连续或者离散的两种方式去控制界面。

最后,在设计滑动时还要考虑:

1 滑动不是目的而是手段,先功能后交互。

2 按照交互设计从大到小的指导思想,为维度赋予功能前,先梳理功能架构和优先级,把最常用功能置前或者设置为默认生效。  如:maibox中最易触发的向右滑动的第一级,被赋予了最常用的已读功能。

11

视频播放器中,在播放进度条的区域滑动时默认为高速进退。需要精确控制时通过竖直滑动变速。

12

百度浏览器中,默认显示最常用的工具栏,滑动时才显示页面缩放控件。

13

3 在分析具体的动态交互效果时,可以参照Design interactions中对鼠标拖动操作的分析表格(如下图),创建滑动的表格帮助理清思路(X轴可为滑动的状态细分,y轴可为滑动过程中涉及的界面元素和控件)。

14 图片来自Designing web interface

4 有些复杂滑动操作有一定学习成本,可作为快捷方式,同时还需要具备通过常规点击也可实现的操作方式。

 

 

参考文献

Ios human interace guidelines

iOS Wow Factor

Designing Great iPhone Apps

Designing Web Interaces

人机交互

相关 [移动设备 维度] 推荐:

移动设备之滑动的维度

- - 盒子UI
在iOS交互模型的最底层,有一个“空间”的概念(具体可见 ios空间模型),而空间最基本的属性就是三个维度. 滑动依存于屏幕这个二维环境,也可以从维度这个角度去思考. 最常见的滑动例如ios里删除短信息的操作,这里的滑动是最基础的,可以理解成一维的、被赋予了唯一功能的操作. 但如果认为滑动就是这么简单,那可能忽略了滑动可以为设计带来的千变万化.

移动设备手势设计初探

- redhobor - 腾讯CDC
  嘿~最近在做各种移动端的产品,设计啊体验啊操作啊,用的手都起茧,工作之余也思考了“手”这种较新的交互方式,以及它与界面的关系. 本文从手势的种类,应用场景,存在的可用性问题以及如何设计四个大的部分谈起,在此抛砖引玉供大家思考和学习.   移动设备大行其道的今天,手势是一个流行词汇,那手势是什么呢.

移动设备里的硬件功能

- - 雷锋网
【编者按】本文作者 @kentzhu 如果你想猎杀一只虎你得首先搞清楚了虎的习性与弱点,不然就好比是绣花枕头的屠龙术. 同样的道理,如果你想做好移动产品的设计,你得首先搞清楚移动设备的基本属性. 知道移动设备有哪些能力才能驾驭这些能力并创造出优雅的体验. 在移动设备里,常见可以被利用的硬件包括:话筒、GPS、距离感应器、环境光感应器、影像传感器、磁阻传感器、重力感应器、方向感应器、加速感应器、三轴陀螺仪、RFID、NFC、裸眼3D、温度计、震动感应器等.

移动设备阅读体验

- - 曉生語錄
一直想对移动设备阅读体验进行较为完整的研究和学习,但内容太多,涉及到非常多的传统平面设计知识,目前仅初步地完整字体部分. 常用的栅格分割适合移动设备多分辨率复杂内容的自动排版,内容可控制时是否可以模仿杂志的复杂不规则排版方式,以达到最佳的阅读体验. 2.移动设备上最佳的字体有什么必要的设计要素. 如下图,更多的内容包括字体颜色、字间距、行间距和字体渲染等,不同的内容需要不同的字体.

[转载] 用于移动设备的各种术语的解释

- Charles - 黑莓时光
转载一篇来自 ss1271的奋斗 的文章,为我们分享并解释了一些和移动设备相关的各种术语,有兴趣的朋友可以来看看,能学到不少东西呢. 以下图文均来自 ss1271的奋斗 的文章,同样建议大家跳转详细阅读. 作为信息黄埔毕业生的译者&编者按——. 当你在使用各式各样的Android或者iPhone、iPod Touch、iPad、Apple TV神马的时候,有没有想过那些包装盒上标明的数据和网络制式都是神马意思.

在这个移动设备泛滥的时代里

- sy - Engadget 中国版
Pollitico.com漫画. 移动设备是否已经改变了你的生活方式. 引用来源 | 此文章网址 | 转寄此文章 | 回应.

争夺移动设备端的注意力

- David - 所有文章 - UCD大社区
依然记得很多年之前在《读者》上看到“注意力经济”这个新名词时,它带给我的惊奇和震撼. 注意力经济似乎预示着一个新的时代的到来,从有限的物品时代到无限信息时代. 在这个过程中,人的注意力越来越弥足珍贵. 人,作为选择和使用的主体,变得越来越重要. 注意力经济是产生于特定的互联网时代的. 只有在互联网时代到来的时候,注意力的重要性才历史性地被提上了日程.

为移动设备一致体验做设计

- Estella - 所有文章 - UCD大社区
原文designing for the future web: http://www.smashingmagazine.com/2011/03/29/designing-for-the-future-web/. 这里只了提些主干出来,强烈推荐原文,尤其技术方面的很多tips有深入的讲解. 本文推崇的是“因为现代人越来越生活net依存状态,ipad,3g等等,各种情况下人时时刻刻都在online状态中.