桌面端网页的视觉轨迹

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

本站以现代、古代情诗为主,情诗网创办于2013年,以原创爱情诗歌、经典情诗、现代情诗、古代情诗、英文情诗、情诗绝句为主并收集古诗、古诗词、诗歌大全、诗词名句的文学门户。方便您下次继续阅读;可以放在浏览器的收藏夹中(快捷键Ctrl+D);或者看到喜欢或者有趣的诗词可以通过分享按钮给你的好友分享;情诗网是目前最全情诗大全网站之一。并欢迎广大诗歌爱好者阅览投稿!喜欢本站的话请大家把本站告诉给你朋友哦!地址是 www.qingshiwang.com !