移动应用中的流设计

目光和手指的循迹

      

移动情景

作为应用的设计者，我们常常以应用自身的逻辑为线索进行设计，一头沉浸在页面与原型的制作中。 而大部分的应用在使用过程中，用户的目光和触摸是与应用共舞的主要参与者，如人-机-环中用户的输入输出，以视觉输入、触摸输出为主要的交互通道。为了提升用户在感知层面的体验，我们可以顺着用户的目光出发，关注用户在界面中注意力焦点转移的过程，同时循着用户手指的痕迹来发现用户直接操作的轨迹，以此设计我们的应用。

这里将提出一个流系统的框架，并讲述如何在这个框架中提升用户的感知体验。

目光和手指循环而成的流系统

在 用户与应用通过目光和手指进行交互的过程中，存在着如上图所示的一个流系统——用户的视觉通道接收着界面的绝大部分信息，视觉焦点（注视点）是用户信息加 工的载体，用户持续关注内容后会留下一连串的视觉焦点，在界面中这些视觉焦点的流向，我们称为视线流。用户通过视觉获得了输入信息，并通过应用界面进行反 应操作，用户在界面中的操作的接触点会形成触点。在一个任务中，连续的触点会形成一条操作的轨迹，我们称为操作流。用户通过触点对应用进行输入，应用界面 做出相应的反馈，用户通过视觉焦点接收信息，并决定下一步的触点操作。这是流系统的循环过程，大部分交互都是由这些视觉焦点，触点以及之间的流构成。

 

构成	种类	目标
节点	视觉焦点	明确信息和功能
触点
流	视觉→视觉	毫不费心，毫不费眼 毫不费力，自然直觉
操作→操作
视觉→操作
操作→视觉

流系统中的视觉焦点包含了应用突出呈现给用户信息，它抓住了用户的视觉注意力，触点则是承担了用户对应用的输入接口，是移动应用的直接操作的体现。

一个好的应用设计应该每次都能及时把最核心的内容突显出来，且视觉焦点的转移很流畅，不需要用户多次来回扫视；操作触点也不需要用户往复地转动、伸缩手指。视觉焦点和触点间的流轨迹都很流畅，交互的阻力更少，用户不用思考。那我们应该怎么设计才能使两个轨迹更流畅呢？

接下来将对视觉焦点、触点，以及之间的流进行阐述，力求在应用的细节设计上提供一些不一样的思路。

把握用户的视觉焦点

视线流的形成来源于视觉注意力的转移机制。除了主动的注意外，视觉注意很容易被动的转移。如下表是造成视觉注意转移的各种因素，对比越大，越容易转移。通过这些不同维度的差异对比，可以让用户轻松转移视觉焦点，这也是界面引导的设计基础。

      视觉焦点需要运用在信息的聚焦点。如何让用户更清楚地看到用户想看的，或是产品希望用户看到的内容，交互设计师们需要考虑清楚这个焦点是什么，而非仅仅是 逻辑结构的铺叙。如下图左图，传统的设计风格会通过标题的底色和字体的加粗，让用户的视觉焦点优先集中在标题上，因为这样似乎逻辑更清晰。但是在倡导内容 优先的情况下，如果更愿意让用户关注内容，而非标题，可以通过下图右图中区别内容和其他内容在空间上的前后关系来突显内容。 如果是类目搜寻则更适合前者，因为用户需要聚焦于标题才能快速定位到自身所需要的信息。

手指的触点区域

      触点是移动应用直接操控特性的体现，在移动设备的触摸屏上，没有了物理按键的区块感和触觉反馈，引导操作和操作反馈大部分都由视觉承担。对许多用户的研究表明，下图浅橙色区域是右手拇指的热区，而视觉点击区域不宜小于44px，由于存在视差的关系，实际操作区域会比视觉区域略大并靠下。

 

      上图是一个数独游戏的设计，刻意地将视觉焦点和触点进行分离，为触摸设计出亲和的圆形区域，并减少了视觉焦点被手指遮挡的问题，显得贴心而周到。

      点击的触点其实延续了PC 的交互方式，但缺少了PC 端的hover 态。为了确保用户得到点击结果的信息，可以拆分为两次点击。比如iOS 市场的应用下载，首先显示价格，点击价格后，按钮变化为下载，通过增加一次点击完成信息的确认。为了防止误点，更好的方式是改换为滑动手势的触点，一般滑动需要有一定的距离才被视为执行操作。比如iPhone的解锁方式，只有从左滑到右才能解开锁屏的状态，误点等是无法完成这样的操作的。同时用户在滑动的过程中，通过滑块的控制感，对操作结果就有了足够的心理预期，就能够带来流畅的体验。

 

 

本文节选自《移动设计》一书

傅小贞胡甲超郑元拢著

电子工业出版社出版