情诗网 >高端情话 > 正文

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

来源:情诗网    2020-11-15    分类:高端情话

桌面端网页的视觉轨迹

我们对这些来自眼动仪的监测图片不陌生,用户在浏览桌面端网页时,视觉轨迹呈字母 "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 还发挥了费兹法则的优势。

热门文章