产品设计

    今日:38| 主题:15750
收藏本版 (1)
软件产品、PC、移动、网站、平台的开发、策划等内容。

[其他] 为什么喜欢运用F型浏览模式来设计网站界面?

[复制链接]
生死相随 发表于 2016-10-17 20:31:14
123 1

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
F型浏览模型是内容网站的首选布局模型,比如新闻网站、博客或着陆页。当我们解释完它的作用和原因时,你就会开始注意到,大量知名网站都在这样做。
   
为什么喜欢运用F型浏览模式来设计网站界面?-1 (纽约时报,设计网站,界面设计,课题研究,尼尔森)

  什么是F模型?

  F型是用户浏览内容版块时最常用的扫描浏览模式。
  它是指,读者会首先从左往右以水平线方向浏览,这种浏览习惯是很容易理解的,然后,用户会从屏幕最左边垂直往下浏览,从段首句或小标题中寻求自己感兴趣的关键词或内容。找到后,他们又会开始从左到右正常阅读,形成(“F”的第二条)水平线。最终就形成了一个字母 F 或 E的形状。
  如《2014 Web UI模式》中所述,CNN和纽约时报都使用了F型。
  尼尔森·诺曼集团的 Jakob Nielson 曾做过一项基于 232 名用户浏览上千个网站的可读性研究,并详细阐述了 F 模型的实际意义:
  
       
  • 用户很少会阅读文本中的每一个字(实际上,平均只有20%的人会全部阅读)   
  • 前两个章节最重要,是保证留存的关键   
  • 一段话只表达一个观点   
  • 开启新段落或新章节时,使用吸引眼球的关键词  
  这将如何影响你的网站的界面设计?且往下看。
  如何运用F型

  下图来自 Brandon Jones 的课题研究,F型可视化的样子。

为什么喜欢运用F型浏览模式来设计网站界面?-2 (纽约时报,设计网站,界面设计,课题研究,尼尔森)

  显然,你要把最优质、最能吸引人的内容放在最上方,而左上角(见图中点 1)就像一个整体锚点,一定会被关注到。这也是为什么许多公司的 Logo 会放在这里。
  通常来说,设计师会把导航条放在顶部,从左上角(见图中点 1)到右上角(见图中点 2),方便用户点击及搜索关键词,设计师们对导航条的设计也各有不同:轻细的导航条会让用户进一步浏览下方的其他内容,厚重的导航则会让用户更多的关注到导航条本身,而不是下方的内容。
  第一行之后,用户就会来到下一个关键节点(见图中点 3)并做同样的动作(到图中点 4)。理论上,用户会继续往下浏览,直到他们找到感兴趣的内容。但实际情况是,他们很可能在几秒后就走人了,除非你能继续吸引住他们。
  因此,为了打破页面的单调,专家们建议设计师在第二行或第三行(即“F”的第二横或“E的第三横)之后,借助一些“突兀的”元素来“破坏”整体布局的连续性。利用一些设计上的变化来保持视觉刺激。常用的做法是,在每过1000像素的版块后方就来一些不一样的布局设计。
  比如下面的例子:
1234下一页
友荐云推荐




上一篇:The designer's guide to software
下一篇:资料下载 | QQ音乐高级产品经理:我们如何做个性化推荐?
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

元柳 发表于 2016-11-8 06:51:57
年轻的时候,我们常常冲着镜子做鬼脸;年老的时候,镜子算是扯平了.
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表