您的位置: 设计资讯 > 网站设计

网页设计中的F式布局

www.shejinet.com 2019-08-26 16:04 yzc262,yzc262亚洲城|www.yzc262.com【澳门最新百家乐】 浏览(2172)

摘 要:F式布局是一种很科学的布局方法,基本原理依据了大量的眼动研究。一般来说,用户浏览网页的视觉轨迹是这样的——先看看顶部,然后看看左上角,然后沿着左边缘顺势直下….而用户往往不太注意右边的信息,这是不是有点像字母F?
F式布局是一种很科学的布局方法,基本原理依据了大量的眼动研究。一般来说,用户浏览网页的视觉轨迹是这样的——先看看顶部,然后看看左上角,然后沿着左边缘顺势直下….而用户往往不太注意右边的信息,这是不是有点像字母F?据此,我们习惯性的把重要元素(诸如品牌Logo,导航,行为召唤控件)放在左边,而右边一般放置一些对用户无关紧要的广告信息。

我们来看一下Webdesigntuts+的眼动热点图:

640.jpg

这张眼动热点图展示了用户浏览此网站的视觉轨迹,呈一个F型。热区(途中红色、黄色、橙色部分)代表用户注意力最集中的地方。
总结一下用户浏览网页的一般模式:

先看看页面的左上角,了解一下这是什么网站(因此此处适合放置Logo)——“知道是什么”

然后扫描一下页面的顶部(导航栏,搜索栏)——“了解用法”
下一步,用户的视线下移,开始阅读下一行的内容。
用户进入“扫描模式”,一旦找到感兴趣的内容便会打开。

将此种浏览模式以线框图的形式呈现,形状如下图。

640.jpg

有个规律不容忽视:阅读一般是从上到下,从左到右的。用户往往忽视右侧边的内容,大致的扫一眼而已,因此不要在右侧边下太大功夫。应该把内容栏放在用户注意力高度集中的左边。

综上所述,按照逻辑,我们得出以下结论:

品牌标志和导航应该放在页面的顶部,这是用户对网站的第一印象。
在内容结构中,图片更容易获得关注
用户浏览完图片后,下一个关注点便是标题。
用户会大致的浏览文本,但是往往不会通读。

将F式布局应用到设计中
这里我做了一个小练习,使用线框图方法,对主要元素进行了布局。

640.jpg

下图中可以看到,我把网站的主题/宗旨(Mission Statement)放在了导航栏的下面,这样用户浏览完Logo和导航,就能迅速的了解网站的宗旨.两栏布局的好处是信息层级清晰,可方便用户快速扫描内容…主要内容栏+辅助侧边栏

640.jpg

挺粗糙的,但是关键点都在,浏览此网页时只需几秒钟,便能获取该网站的宗旨/主题…

导航栏的作用是引导用户,让用户知道如何转至不同的页面。

顶部下方的内容栏中,将标题设置的非常醒目,用户浏览完图片后,便能迅速察觉到标题的存在…至于文本内容吧不做强求。


数据正在读取中...

[优秀设计师] DESIGNERS

  • 红蚂蚁文化
    地区:天津 • 天津
    QQ:2284475163
    电话:qq2284475163
    邮箱:2284475163@qq.com
  • 博文
    地区:广东 • 深圳
    QQ:705434715
    电话:17875048743
    邮箱:705434715@qq.com
  • 久形设计
    地区:广东 • 佛山
    QQ:2926679497
    电话:18927776245
    邮箱:2926679497@qq.com
  • 蜂鸟创意
    地区:河北 • 石家庄
    QQ:2950464750
    电话:15930133486
    邮箱:2950464750@qq.com
  • 泉榕工作室
    地区:福建 • 福州
    QQ:5758429588
    电话:15980203576
    邮箱:5758429588@qq.com
  • 大巢设计
    地区:山西 • 晋中
    QQ:845183776
    电话:15536393968
    邮箱:845183776@qq.com
  • 邹剑
    地区:广东 • 广州
    QQ:810199288
    电话:18379067575
    邮箱:810199288@qq.com
  • 知鱼工作室
    地区:辽宁 • 沈阳
    QQ:1660150137
    电话:
    邮箱:1660150137@qq.com
  • 创龙轩设计
    地区:广东 • 广州
    QQ:1219427856
    电话:13790850808
    邮箱:1219427856@qq.com

[优秀设计公司] COMPANYS

联系我们| 免责声明| 设计师| 设计公司| 手机版| 设计知识