响应式网页设计、开放源代码、永久使用、不限域名、不限使用次数

2024年F版型网页设计(必备3篇)

F版型网页设计 第1篇

报告指出用户第一次浏览页面的时候,视线通常会以字母F的形状观看页面内容,尤其是大面积文章的时候,如下图:

有时这是一个相当缓慢和系统的扫描,在眼动追踪热图上显示为实心条纹。其他时候用户移动得更快,创建一个眼动热图,最后一个元素构成了“F”左边竖。

使用F模式可以确保页面上有一个高效的视觉层次结构这样用户就可以快速浏览内容并快速找到相应问题的解决方案。

适用场景:内容比较多,用户通常会用扫描的页面。

F版型网页设计 第2篇

用到我们常见的“表格顶栏”上的一行操作区来说,从左到右操作优先级依次为“高—中—高(中高)”,1 号位置所在地放置操作类行为是这一行【最高】的;其次是2号位置,最后是中间的 3-4号位置。

根据尼尔森F模型,我们可以得出几个心理暗示:

F型浏览模式将能帮助你创建一个具有良好视觉层级结构的设计,这样的设计,人们就能很舒服地浏览啦。

F型布局方式能遵循人的从上至下、从左至右的阅读习惯。

三、F型浏览模式的应用

F型浏览模式适用于以文字为主的网站布局,如果有非常多的内容,尤其是大量文本内容,用户会对依照自然扫描格式(也就是上边说的F型布局模式)的设计布局会有更正向的反应,那么如何使用F型模型:

1. 确定你的内容的优先级

在你布局页面元素之前,先区分元素优先级和重要度。你希望用户看到什么,那么就将最重要的内容放置在接近页面上部的位置,以便尽可能快地传达给用户网站/页面的目标。

用户通常横向读取页面头部,所以这块区域是放置导航栏的好位置。

2. 为扫描而设计,而非为阅读设计

当我们应用F型浏览模型去思考用户行为方式的时候,可以将用户最感兴趣的内容沿着F型浏览模型去布局:

3. 利用侧边栏

侧边栏的存在能让用户有更深层次的参与感,因此使用侧边栏来推动用户的参与感:

F版型网页设计 第3篇

Z模式的浏览模式在于网页内容主要不是文字的页面。不论是否因为这里有个菜单栏,还是就仅仅因为从左到右自上而下的阅读习惯,用户首先关注的页头水平方向上的内容。当视线抵达底部时,又遵循着从左到右的习惯模式,重复再水平扫视页尾的最底部的内容。

Z模式几乎可以适用到任何的网页交互,Z模式的优点就是简单。如果你的网站内容很多并且很复杂的话,那么用这个模式,效果就会稍差。当然,这些都不是绝对的。当Z模式简化布局,就可以增加转化率,下面这些是可以去简化的地方:

预测用户的视线将会占有极大的优势。在布局你的页面元素时前,你就可以知道优先的该摆放在什么位置。一旦你知道你想要用户先看到什么,你就能可以通过视线的规律,将你的重点内容放在用户的“热点”里。

你可以在整个页面不断重复Z模式的规律,就像你在下图中看到的那样,一开始这个页面就有一个注册按钮,通过水平位置的浏览,用户已经获悉了这一信息,下拉会出现产品的卖点,这些卖点的展示就是遵循重复着Z模式的最佳例子,直到最下方的支付选项就抵达了Z模式的最尾部那个水平线。

后记:

在设计中,我们所思考的总是比我们呈现出来的更多。不管怎样,这两种模式只是一个小结,实际创作过程全是花样百出,绝不是两种模式就能轻松完成的。但是,在规律面前,多多益善总不会错。灵活运用规律才是关键。

猜你喜欢