恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
F型视觉模型,你真正了解多少?
0.0°
2020-09-24 原创文章 经验/观点 举报 2254 5 4 0


大家好,我是胖小魚。

本文首发于微信公众号:胖小魚设计小栈,欢迎关注

最近在上公开课中听到大神总讲到F模型,可能一些童鞋跟我一样不是太熟悉,于是我便上网搜索了一番,也结合原文翻译,将这个模型的来龙去脉做了一个梳理,加强我们更深层的理解,也希望对不了解的童鞋有帮助。

本文共1505字,需要阅读时间约4分钟~

一、F型视觉模型是什么


F型视觉模型是尼尔森于2006年通过报告形式提出的,2017年该团队在网站又更新了此模型的相关实验结果。

一听名字可能有的童鞋会觉得很高深莫测,实质上非常容易理解,是指用户第一次浏览页面的时候,视线通常会以字母F的形状观看页面内容,尤其是大面积文章的时候,如下图:

用户的关注点着重放在左边,阅读前几行时视线会形成F的第一条横,阅读第二部分视线会缩短,就形成第二条横,最后,用户会以垂直的视线浏览后面的内容,形成F左侧的竖(如图中,并非完美的F,而是整体呈F型)。


二、为什么会呈现F型


根本原因是人们的“懒”导致。Kara Pernice(尼尔森·诺曼集团的高级副总裁)在《文本扫描模式:眼动证据》中提到:在网络中,人们并不会阅读每个单词,常用习惯方式是:扫描。

尤其是文章没有主次标题或者没有吸引力的信息引导时,用户会遵循自己最省力的路径来浏览内容;他们访问网页仅仅只是找到想要的答案,而并不是研究内容,所以轻扫自然而然便取代了逐字阅读,前几行左侧内容看得多,而右侧内容和页面靠后部分便看得少,通常情况下便形成大体的F型。


三、F型模式带来的弊端,设计师如何解决?


这种习惯性模式会导致用户只关注左侧偏上方内容,许多重要的内容都会被忽视掉。

怎么解决?这就需要发挥设计师的作用,设计合理有效的样式引导用户去阅读。

1、使用主次标题,与内容做区分:

这一点与层状蛋糕(Kara Pernice提出)的观点一致,排列结构类似于千层蛋糕,一层二层三层…  据Kara Pernice研究表明,这种模式是目前扫描网页最有效的方式,用户更容易找到他们想要找的信息。

下图是夹层蛋糕模式下的眼动实验结果:

从9位研究参与者那里获得的分层蛋糕眼动图表明,小标题(和按钮)更能引起参与者的注意。

例如新闻知识类App列表页,其结构是标题+图片的瀑布流展示,主标题简要概括,字号加粗加大,用户通过扫描标题来发现感兴趣的内容,进而再去阅读相关正文。


2、页面最重要的信息要放在前面:

我认为,这一点不仅针对的是文章内容,也针对功能布局,重要的功能尽量放在整个页面上方,最次要的内容放在最下方。

3、相关内容进行分组:

就是格式塔接近原则,把功能相关的内容整合在一个模块,整体页面模块化,模块与模块之间有一定的间距,这样可以有效减少用户界面上的视觉凌乱感。如下图:


4、使用标签或者颜色区分:

例如下面的页面


5、同级信息流使用列表符号或者数字序号来展示:

如下方设计的对比

6、简明扼要:删除不必要的信息: 

总结:F型视觉模型本质上就是由于页面没有有效引导而引发,所以如果要提高用户的视觉体验,就需要我们通过优化样式去突出重点,有效引导用户去浏览哪些内容。

其实通过梳理,我们可以发现很多理论本质上都是贯连的,如F型其解决方法就是尼尔森十大交互原则中“易取和简约原则”的具体延伸,其中也贯连着格式塔原则,都是换汤不换药,最主要是看我们如何在实际工作中,知其源头,学以致用,让我们的设计有理有据!

好啦,今天分享到这里

谢谢阅读,我们共同进步~ 笔芯~

觉得有用的话就转发给更多有需要的人吧~ ,公众号【胖小魚设计小栈】,欢迎大家关注。

参考文献:

https://www.nngroup.com/articles/text-scanning-patterns-eyetracking/

https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/


Powered by Froala Editor

更新:2020-09-24

收藏

5人已收藏

  • 5

    作品

  • 11

    粉丝

  • 143

    关注

  • 关于行为上瘾-产品如何造就我们习惯的四阶段模型
  • IP设计:小团子
  • 设计理论--深度解析尼尔森十大交互设计原则
  • 设计的思考~色彩篇
相关标签

    猜你喜欢

      2020-09-24 原创文章 经验/观点 举报 2254 5 4 0

      F型视觉模型,你真正了解多少?

      0.0°

      你确定要举报F型视觉模型,你真正了解多少?

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2020年09月24日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      4
      5
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录