经典案例推广高端H5电商设计公司了解价格
QQ联系
微信联系
手机联系
QQ联系
微信联系
手机联系

如何利用F型浏览模式设计网站页面?

发布时间:2019-06-13
发布者:eidea
浏览次数:316
大多数情况下浏览者都不由自主的以“F”形状的模式阅读网页,这种基本恒定的阅读习惯决定了网页呈现F形的关注热度。研究者用了几种不同的页面做眼动仪测试,得到了3张热度图,用颜色来表示浏览者眼光聚集的热度,分为最热(红色)、较热(黄色)、不热(蓝色)和基本不关注(灰色)4种。其中搜索结果页因SERP中网站标题、网页摘要较宽,第二条线会随之加长,但仍然是F形状。那么如何运用F型浏览模式来设计网站页面呢?



通常来说,设计师会把导航条放在顶部,从左上角到右上角,方便用户点击及搜索关键词,设计师们对导航条的设计也各有不同:轻细的导航条会让用户进一步浏览下方的其他内容,厚重的导航则会让用户更多的关注到导航条本身,而不是下方的内容。

第一行之后,用户就会来到下一个关键节点并做同样的动作。理论上,用户会继续往下浏览,直到他们找到感兴趣的内容。但实际情况是,他们很可能在几秒后就走人了,除非你能继续吸引住他们。

因此,为了打破页面的单调,专家们建议设计师在第二行或第三行(即“F”的第二横或“E的第三横)之后,借助一些“突兀的”元素来“破坏”整体布局的连续性。利用一些设计上的变化来保持视觉刺激。常用的做法是,在每过1000像素的版块后方就来一些不一样的布局设计。

F 模型不仅仅适用于文本,要展示多样化的内容,免不了对内容进行组织整理。F 模型仅仅遵循了人眼(运动)的共同趋势,因此,你可以根据自己的布局做不同的优化处理。它只是一个指南,而不是一个模板,不用完全照搬。哪怕你只是想添加一个按钮来强化顶部导航栏,小调整也可能带来大不同。

网站案例欣赏

新大陆支付

响应式企业官网

BVLGARI香水

化妆品H5创意设计品牌官网

Royals Blue定制珠宝

品牌营销网站