基于滑动维度的交互设计变化

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

当滑动被赋予功能，并与界面（信息或控件）结合时，具有很强的可塑性，并可有效提升操作的易用性、高效性、有效性。

根据滑动的维度，可以分成一维滑动和二维滑动；同时结合滑动控制界面的方式，也可以分为连续和离散。下面，马海祥就通过一些实例来为大家具体解说一下。

一、一维滑动

对于一维滑动，我们又可以分为一维离散型滑动和一维连续型滑动来讲：

1、一维离散型滑动

比如：Mailbox在邮件列表对邮件进行操作时，就使用了一维离散型的滑动，如下图所示：

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

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

2、一维连续型滑动

比如：百度浏览器页面缩放的功能，采用了一维连续型滑动，如下图所示：

（1）、默认在界面底部的工具栏显示最常用操作。

（2）、在工具栏滑动时，工具栏变为页面缩放的控件。

（3）、通过滑动距离长短控制页面缩放大小（越右越大），同时上方页面以页面左上为缩放中心，实时反馈页面缩放效果。

（4）、release结束缩放操作，得到缩放后的页面。

二、二维滑动

当滑动被赋予的功能增加，或需要更复杂控制时，一维不能解决时，马海祥建议你可以升维成二维滑动。     

比如：ios默认视频播放器的视频进退控制，就是采用了二维滑动，如下图所示：

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

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

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

类似的还有猛犸浏览器的页面变速滚动功能，如以下截图所示：

操作：在页面中纵向滑动时，页面以默认滑动速度滚动；如果先从屏幕右边缘横向滑动，便可选择不同滚动速度（越左速度越快），再纵向滑动以滚动页面。

效果：手向下滑动同样距离，速度快的页面滚动幅度大（下图绿线表示手实际滑动距离，紫线表示页面滚动幅度）

由此，马海祥也就可以判定滚动功能的二维空间模型如下：

以上两个二维滑动的例子都是通过在一个维度改变速度去影响另一个维度对幅度的控制。

Snapseed的二维滑动操作更加简单易用，在界面任意位置竖直滑动固定距离切换功能，水平滑动控制具体功能的参数大小，不过也要注意一下防呆的设计（具体可查看马海祥博客的《基于交互体验的防呆设计应用与策略》相关介绍）。

如果把snapseed的滑动操作抽象，可形成其通过二维滑动实现功能切换和参数调节的二维空间模型：

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

三、滑动设计的优势

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

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

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

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

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

四、滑动的切入点思考

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

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

2、为滑动赋予功能时，去判断这个功能类别或强度的标准可以是滑动的直线距离。

3、为拖动赋予功能时，标准可以是手或被拖动物体到达或离开的区域。

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

五、设计滑动时的注意事项

不过，在设计滑动时我们还要考虑以下几点事项：

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

2、按照交互设计从大到小的指导思想，为维度赋予功能前，先梳理功能架构和优先级，把最常用功能置前或者设置为默认生效（对于交互设计的初学者可以看下马海祥博客的《交互设计师必须知道的五大交互设计流程》相关介绍）。如：maibox中最易触发的向右滑动的第一级，被赋予了最常用的已读功能。

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

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

马海祥博客点评：

内容滑块是导航的一种型式，可用于显示各种信息，如各种图片，热门新闻，社会信息和产品特点，有些具有自动幻灯片的功能，并有按钮滚动左右或上下的内容，其中最具特色的过渡效果是幻灯片。

所以，我们也可以试着将滑块这一设计理念运用到我们的网站和博客上，以便快速吸引游客的视觉，形成视觉的中心。