网站首页 网站建设 推广运营 关于我们 联系我们 建站知识 新闻动态 帮助文档 客户案例

网页设计怎样利用“F 型扫视”习惯?

2018年07月16日

阅读量:


         今天这篇文章,主要介绍「F 型扫视」。读完后,你会明白我们到底如何浏览网页,也知道网页应该如何设计,才能带来更好的体验。


一、什么是「F 型扫视」?
         「F 型扫视」是界面阅读最常见的一种扫视模式,在有很多内容板块的界面上非常实用。「F」也可以被理解为「Fast」。大多数人阅读界面内容时,都采用了「F 型扫视」模式——只需要几秒,就可以快速将页面扫完。「F 型扫视」最早是由尼尔森诺曼集团(NNGroup)通过眼球追踪实验提出的,该项实验记录了 200 多名用户阅读上千个网页的数据。实验结果发现,用户的阅读习惯相当一致,即便是在不同站点和不同阅读任务的前提下。实验对象的阅读轨迹看似像字母「F」,并包括以下 3 个部分:

         首先,人们会横向阅读,通常扫视范围仅停留在页面顶端部分。这一轨迹形成了字母「F」的第一横。
         然后,我们会顺着页面左端纵向阅读。我们的阅读重点仅停留在段首其感兴趣的部分。发现感兴趣的内容后,我们会再次横向阅读,不过这次横向阅读的范围通常较第一次小。这一轨迹形成了字母「F」的第二横。
         最后,我们会再次顺着页面左端纵向阅读。

二、为什么用「F 型扫视」?
         通过「F 型扫视」模式,更容易体现出良好的视觉层次,从而方便用户了解界面内容。对大多数西方用户来讲,「F 型扫视」模式是非常舒适的,因为他们的阅读习惯一直以来都是从上到下、从左至右的。

三、什么时候用「F 型扫视」最舒服?
         针对有大量文本的网站,比如博客或新闻站点,「F 型扫视」模式是再好不过的选择;在内容过多(特别是文本过多)的情况下,若页面布局是根据自然扫视模式(即「F 型扫视」)来设计的,用户反馈会更好。


四、网页应该怎样用「F 型扫视」?


1. 按重要性对内容排序
         在设计规划页面元素时,一定要按重要性对各项内容进行排序。通过排序,你可以清楚地知道你最想让用户阅读的内容。这样一来,你只需要将这些内容放在页面的「热点」区域即可。

2. 设置预定期望
         整个页面最开始的一两段是非常重要的。尽可能将重要内容放置在页面顶端,从而可以在短时间内让人们知道网站(或页面)是用来做什么的。根据「F 型扫视」模式,我们通常会横向阅读页面顶端。因此,在顶端区域设计一个导航栏是个不错的选择。用户扫视页面最重要的内容只需要几秒钟。

3. 设计要方便扫读,而不是阅读
         设计页面布局时,要从用户角度出发。顺着「F 型扫视」的阅读轨迹,将人们最感兴趣的内容按重要性放置于相应区域:段首用词一定要足够吸引用户眼球。用户首先会阅读最突出的内容(即最具视觉重量的内容)。因此,一定要凸显重要内容的视觉重量。可以通过字体排版来体现文本的重要性,比如高亮文本关键词;也可以通过各种颜色突显某些按钮。每个段落只覆盖一个观点,并尽可能多地使用项目符号(即本条左边的小黑圆点)。将最重要的内容(比如行为召唤相关的内容)放置在页面左右两端,这也是用户横向扫视的起始两端。当他们继续往下扫视至下一横向内容时,刚好有几秒时间,可以让他们稍作思考。

4. 好好利用工具栏
         工具栏可以让人们进一步参与交互,好好利用工具栏,可以进一步提高用户参与度。让希望用户点击的任何元素显得更有特色,尽管它可能和页面主要内容「迥然不同」,比如广告,相关文章列表,社交媒体小组件等等。把它定义为用户寻找特定内容(比如目录列表,标签群,热门文章小组件等等)的工具。


5. 避免视觉疲劳
         「F 型扫视」模式最大的缺点,是可能存在的视觉疲劳。要让用户觉得无聊,其实并不难,比如在页面加入重复和相似的内容。如果用户真觉得无聊了,那你也不会得到什么好处。所以,不妨试试在人们扫视范围内加入「出人意料」的元素,从而保持用户的参与度。此外,将页面拆分为左右两栏——左栏为主要信息,右栏为辅助信息(工具栏),可以进一步保持用户的参与度。整个界面布局设计简单,但核心元素都体现了出来。人们打开页面,能够清晰了解页面主要功能,工具栏中也有目录列表导航,用户也可以直观地看到相关内容。通过页面左端方形卡片和引人注目的标题,可以吸引用户关注。尽管用户可能对这些内容不感兴趣,但至少发现有趣内容的机会是存在的。顺着字母「F」的第二横,再加入一些「出人意料」的元素,比如图片或行为召唤相关的内容,从而进一步保持用户的参与度。

         「F 型扫视」模式是人眼阅读的自然轨迹。设计页面时,结合该模式可以进一步优化页面设计。但值得注意的是,最好不要死板地运用这个模式,毕竟它只能算作设计的指导原则,而非设计模板。它是死的,而人是活的。


文章均为奇迹mu私服专注网站建设青岛网站建设青岛网站建设公司原创,转载请注明来自
http://www.dasouit.com/faq/606.html

填写服务需求或选择下列套餐服务。

 PC端网站建设 600 手机网站建设 600 PC+手机网站建设 1000 响应式网站建设 1000 外贸网站建设 800

* 服务套餐价格会不定时变化,请认真填写需求信息,我们会在24小时内与您取得联系。

网站建设套餐

PC端600元

网站类型
前台模板
后台管理系统
建站所需时间
推广运营
企业PC端网站建设
HTML5+DIV+CSS布局
帝国CMS(安全稳定开源)
1-3个工作日
保证百度收录,不包排名
服务内容
1.栏目添加删除
2.模板微调
3.产品文章添加(20个内)
4.网站数据定时备份
5.SEO关键词设置
6.客服、分享、统计插件
7.7X24技术支持
赠送内容
1.COM/NET/CN域名1个
2.万网或海外1G虚拟空间
3.网站备案
4.免费维护1年
5.简单LOGO设计
6.三张广告图制作

网站建设套餐

手机端600元

网站类型
前台模板
后台管理系统
建站所需时间
推广运营
企业手机端网站建设
HTML5+DIV+CSS布局
帝国CMS(安全稳定开源)
1-3个工作日
保证百度收录,不包排名
服务内容
1.栏目添加删除
2.模板微调
3.产品文章添加(20个内)
4.网站数据定时备份
5.SEO关键词设置
6.客服、分享、统计插件
7.7X24技术支持
赠送内容
1.COM/NET/CN域名1个
2.万网或海外1G虚拟空间
3.网站备案
4.免费维护1年
5.简单LOGO设计
6.三张广告图制作

网站建设套餐

PC+手机端1000元

网站类型
前台模板
后台管理系统
建站所需时间
推广运营
PC+手机端同步数据
HTML5+DIV+CSS布局
帝国CMS(安全稳定开源)
1-3个工作日
保证百度收录,不包排名
服务内容
1.栏目添加删除
2.模板微调
3.产品文章添加(20个内)
4.网站数据定时备份
5.SEO关键词设置
6.客服、分享、统计插件
7.7X24技术支持
赠送内容
1.COM/NET/CN域名1个
2.万网或海外2G虚拟空间
3.网站备案
4.免费维护1年
5.简单LOGO设计
6.三张广告图制作

网站建设套餐

响应式1000元

网站类型
前台模板
后台管理系统
建站所需时间
推广运营
企业响应式网站建设
HTML5+DIV+CSS布局
帝国CMS(安全稳定开源)
1-3个工作日
保证百度收录,不包排名
服务内容
1.栏目添加删除
2.模板微调
3.产品文章添加(20个内)
4.网站数据定时备份
5.SEO关键词设置
6.客服、分享、统计插件
7.7X24技术支持
赠送内容
1.COM/NET/CN域名1个
2.万网或海外2G虚拟空间
3.网站备案
4.免费维护1年
5.简单LOGO设计
6.三张广告图制作

网站建设套餐

英文外贸800元

网站类型
前台模板
后台管理系统
建站所需时间
推广运营
英文外贸网站建设
HTML5+DIV+CSS布局
帝国CMS(安全稳定开源)
1-3个工作日
保证百度收录,不包排名
服务内容
1.栏目添加删除
2.模板微调
3.产品文章添加(20个内)
4.网站数据定时备份
5.SEO关键词设置
6.客服、分享、统计插件
7.7X24技术支持
赠送内容
1.COM/NET/CN域名1个
2.香港或美国1G虚拟空间
3.免费维护1年
4.简单LOGO设计
5.三张广告图制作
线上服务咨询15906391238填写需求索取报价