青岛网站建设
网站首页 联系我们

资讯中心

联系方式
  • 地址:青岛市李沧区金水路772号
  • 电话:0532-87606070
  • 手机:13969865210
  • 邮箱:web@toorain.net

网站设计制作
网页设计中的F式布局及设计方法
时间:2013-12-30 18:59:57  来源:青岛网站建设  点击:1608

    网页设计中的F式布局相信大家都了解,那么今天我们青岛网站建设来重点介绍网页设计中的F式布局吧。因为传统的布局方式,依赖布置视觉线索而且“控制”用户的视觉路径。那么相较之下,F式布局更加自然,更加友好。本文将讲述一些F式布局的规则、原理以及设计方法。希望大家一起来交流一下吧:

    首先F式布局是一种很科学的布局方法,基本原理依据了大量的眼动研究。一般来说,用户浏览网页的视觉轨迹是这样的--先看看顶部,然后看看左上角,然后沿着左边缘顺势直下….而用户往往不太注意右边的信息,这是不是有点像字母F?据此,我们习惯性的把重要元素放在左边,而右边一般放置一些对用户无关紧要的广告信息。F式布局符合用户的浏览习惯,更自然。符合“从上到下,从左到右”的阅读模式。

    下面先看看用户浏览网页的一般模式吧:

1、先看看页面的左上角,了解一下这是什么网站(因此此处适合放置Logo)--“知道是什么”
2、扫描一下页面的顶部(导航栏,搜索栏)--“了解用法”
3、用户的视线下移,开始阅读下一行的内容。
4、用户进入“扫描模式”,一旦找到感兴趣的内容便会打开。

    将此种浏览模式以线框图的形式呈现,规律是:阅读一般是从上到下,从左到右的。用户往往忽视右侧边的内容,大致的扫一眼而已,因此不要在右侧边下太大功夫。应该把内容栏放在用户注意力高度集中的左边。

    按照逻辑,以及上文的分析我们得出以下结论:

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

    然后我们需要将F式布局应用到设计中,把网站的主题/宗旨放在了导航栏的下面,这样用户浏览完Logo和导航,就能迅速的了解网站的宗旨.两栏布局的好处是信息层级清晰,可方便用户快速扫描内容…主要内容栏+辅助侧边栏。

    根据不同的设计需求,设计师可以适度调整。如果想要打造一种悠闲的阅读氛围,间距可以大一点;如果信息量大,可以缩小一点,打造出紧凑的阅读感。如果页面无限长,老这么浏览下去,用户一定会很烦,感到枯燥,对不对?这里可以稍微做一下调整,加入一点与F式布局规则“不协调”的元素,给阅读节奏带来一些变数。

    F式布局阅读模式有利也有弊,他的缺点是:最有价值的内容只能放置在页面顶部,有些显得俗套。而且文本内容无法有效的引起用户注意,用户甚至连摘要都懒得读,看看标题就“过”。网页过分注重对“标题”和“图像”的包装,无疑不符合内容至上的原则。还有就是在采用F式布局进行设计师,很多设计师感觉自己不像是设计师,而想是制造噱头的“广告商”。网页设计太具备功利性,只追求一时的浏览量,不遵循“内容为王”的原则,很多用户第一次可能感觉不错,但是看了内容后大呼上当,可能下一次他们就不会再次访问该网页了。因此,设计师要协调好内容与布局之间的关系。

    下面再来看看右面的侧边栏要怎么设计?这里青岛网站建设公司给出两点建议:

1.呈递相关内容。比如和网站主题相关的链接、广告,相关阅读推荐,社交媒体微件等等。
2.可以放置一些内容检索工具,比如过标签、文章检索、最热文章等等。

    这里青岛网站建设公司特别要提醒的是千万不要为了牟利而放置些低俗的、和内容不相干的广告。其实不管设计趋势怎么变,F式布局暗藏的原理不会过时,因为这是用户长期的习惯。或者说,F式布局只是一个引子,吸引人的图像、具有噱头的标题仅仅是花招,内容才是王道,如何结合,如何两者兼而有之,设计师需要走得更远。本文的目的是为了强化大家对用户长期阅读习惯的理解即“从上到下,从左到右”,尽管这有点老生长谈,但是经过本文形象化的剖析,你是否也有所感悟了呢?对于节奏的切分,你又产生了什么新的看法?青岛网络公司认为布局不仅仅是一种方法,可以融入一些用户体验设计元素。不管什么方法,尝试一下,让你的设计不断“升级”。只有这样我们才可以看的更远!