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

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

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

文章插图
通常来说 , 设计师会把导航条放在顶部,从左上角到右上角,方便用户点击及搜索关键词,设计师们对导航条的设计也各有不同:轻细的导航条会让用户进一步浏览下方的其他内容,厚重的导航则会让用户更多的关注到导航条本身,而不是下方的内容 。
第一行之后 , 用户就会来到下一个关键节点并做同样的动作 。理论上 , 用户会继续往下浏览,直到他们找到感兴趣的内容 。但实际情况是,他们很可能在几秒后就走人了 , 除非你能继续吸引住他们 。
因此,为了打破页面的单调,专家们建议设计师在第二行或第三行(即“F”的第二横或“E的第三横)之后,借助一些“突兀的”元素来“破坏”整体布局的连续性 。利用一些设计上的变化来保持视觉刺激 。常用的做法是,在每过1000像素的版块后方就来一些不一样的布局设计 。
F 模型不仅仅适用于文本如何设计好网页,要展示多样化的内容 , 免不了对内容进行组织整理 。F 模型仅仅遵循了人眼(运动)的共同趋势,因此 , 你可以根据自己的布局做不同的优化处理 。它只是一个指南,而不是一个模板,不用完全照搬 。哪怕你只是想添加一个按钮来强化顶部导航栏,小调整也可能带来大不同 。
本文到此结束,希望对大家有所帮助!

猜你喜欢