设计闲话 #2: 桌面端与移动端视觉动线

桌面端网页的视觉轨迹

我们对这些来自眼动仪的监测图片不陌生，用户在浏览桌面端网页时，视觉轨迹呈字母 "F" 型。而由于移动端设备屏幕小，用户能抓取到整个页面的内容，在移动端页面下，视觉轨迹则呈字母 "L" 型，位于右上角的信息较容易忽略。这来自腾讯 CDC 实习期间导师的分享。

当用户处于一个业务/功能流程中，往往需要经历多个页面的交互操作，进行浏览、填写信息等，例如注册、预约、功能引导或购物流程。不少应用将「下一步」的 action button 放在顶部 menu bar/app bar 的右侧。如果在这些场景下，action button 放在内容尾部或页面底部，则符合移动端页面 "L" 型视觉动线。

Action button 位于顶部 menu bar/app bar 右侧的例子，左：Apple Store，中：Apple Music，右：Notify Action button 放在内容尾部或页面底部的例子，左：微众银行，中：Snapchat，右：Pinterest

对比两者，后者操作起来更流畅、一气呵成，而前者还需要稍费心神去寻找一下按钮的位置（虽然影响不大），使视觉动线大致呈 "r" 型。如果你说，我就是想用户不要太轻易触发按钮而提交内容造成误操作（这里讨论的是业务/功能流程的场景，而不是例如文章编辑页面的长时间驻留的场景），这不是按钮位置的问题而是选项/表单设计的问题，而且本身也需要考虑是否让用户能容易返回上一步或执行撤销操作。当然，还要根据实际的页面信息数量进行考虑决策。

另外，如果 action button 位于页面底部，对于 iPhone 和部分 Android Phone 还发挥了费兹法则的优势。