当前位置:
首页> 网页设计技巧网页设计中的F式布局
网页设计技巧网页设计中的F式布局
时间: 下载该word文档
>>>>>>>>网页设计技巧:网页设计中的F式布局
网页设计技巧中的“F式布局”你知道吗?相比传统的布局方式,F式布局更加自然,更加友好,不依赖布置视觉线索,能够“控制”用户的视觉路径。本文将讲述一些F式布局的规则、原理以及设计方法。
F式布局简介
F式布局是一种很科学的布局方法,基本原理依据了大量的眼动研究。一般来说,用户浏览网页的视觉轨迹是这样的——先看看顶部,然后看看左上角,然后沿着左边缘顺势直下….而用户往往不太注意右边的信息,这是不是有点像字母F?据此,我们习惯性的把重要元素(诸如品牌Logo,导航,行为召唤控件)放在左边,而右边一般放置一些对用户无关紧要的广告信息。
我们来看一下Webdesigntuts+的眼动热点图:>>>>
>>>>>>>>
这张眼动热点图展示了用户浏览此网站的视觉轨迹,呈一个F型。热区(途中红色、黄色、橙色部分)代表用户注意力最集中的地方。总结一下用户浏览网页的一般模式:
先看看页面的左上角,了解一下这是什么网站(因此此处适合放置Logo——“知道是什么”然后扫描一下页面的顶部(导航栏,搜索栏)——“了解用法”下一步,用户的视线下移,开始阅读下一行的内容。用户进入“扫描模式”,一旦找到感兴趣的内容便会打开。将此种浏览模式以线框图的形式呈现,形状如下图。
>>>>>>>>有个规律不容忽视:阅读一般是从上到下,从左到右的。用户往往忽视右侧边的内容,大致的扫一眼而已,因此不要在右侧边下太大功夫。应该把内容栏放在用户注意力高度集中的左边。
综上所述,按照逻辑,我们得出以下结论:
品牌标志和导航应该放在页面的顶部,这是用户对网站的第一印象。在内容结构中,图片更容易获得关注
用户浏览完图片后,下一个关注点便是标题。用户会大致的浏览文本,但是往往不会通读。将F式布局应用到设计中
这里我做了一个小练习,使用线框图方法,对主要元素进行了布局。
>>>>>>>>
下图中可以看到,我把网站的主题/宗旨(MissionStatement)放在了导航栏的下面,这样用户浏览完Logo和导航,就能迅速的了解网站的宗旨.两栏布局的好处是信息层级清晰,可方便用户快速扫描内容…主要内容栏+辅助侧边栏>>>>
挺粗糙的,但是关键点都在,浏览此网页时只需几秒钟,便能获取该网站的宗旨/主题…
>>>>导航栏的作用是引导用户,让用户知道如何转至不同的页面。
顶部下方的内容栏中,将标题设置的非常醒目,用户浏览完图片后,便能迅速察觉到标题的存在…至于文本内容吧不做强求。
你们浏览这个页面的视觉路径应该是这样的吧?>>>>
效果还可以是把?完成F式布局后,我们便可以此为基础,加入一些细节性元素。还有一点值得注意的是F式布局中对行与行之间距离的控制。(图中红线部分)
>>>>>>>>
根据不同的设计需求,设计师可以适度调整。如果想要打造一种悠闲的阅读氛围,间距可以大一点;如果信息量大,可以缩小一点,打造出紧凑的阅读感。至于阅读的节奏感和一致性的保持,请翻阅优设网之前的文章,这里就不做赘述了。
如果页面无限长,老这么浏览下去,用户一定会很烦,感到枯燥,对不对?这里可以稍微做一下调整,加入一点与F式布局规则“不协调”的元素,给阅读节奏带来一些变数。
>>>>>>>>
你看,上图中那个图片栏就是“不协调”元素,它的出现有些出人意料、打破了用户的预期,这种设计适合于那种超长垂直滚动的网页,这样用户就不会感到枯燥了。