从首因效应说起 谈谈Web界面的三种布局

唯一设计提供法拉盛地区大小商家:印刷,网站设计,网站开发,广告设计,网站推广,一系列服务,欢迎合作!

一栏式布局

Jesse James Garrett在《用户体验要素》中说,成功的界面设计时那些能让用户一眼就看到的“最重要的东西”的界面设计。一栏式布局显然是最容易让用户关注到重要东西的布局方式。

一栏式布局,顾名思义,就是整个页面都为信息展示区,其优点和缺点都很突出。

优点:

结构简单,页面清楚,不会给用户过多的视觉压力,用户视觉流清晰;

信息展示集中,页面的重点突出,用户能够迅速找到网页的重点内容。

缺点:

排版方式受到局限,页面可承载的信息量小。

由于这种布局方式收到排版和信息量的限制,因此适用于信息量小、目的单一的网站,主要用于企业网站的首页、搜索引擎首页、表单填写页面。

企业网站首页

企业网站的目的是介绍、宣传企业产品与企业文化。一栏式首页通过大篇幅的图片、Flash或者宣传视频,能够迅速抓取用户眼球,吸引用户注意,更好地起到企业宣传的作用,比如宝马首页。

一栏式布局应用在企业首页上时,要注意两点:

需要利用大幅的精美图片或者视频等,造成强烈的视觉冲击力,给用户留下深刻印象,提升品牌效应,留住用户进一步浏览;

由于一栏式可展示的信息量有限,所以应在首页添加导航或者重要链接的入口,引导用户深度浏览,起到入口和信息分流的作用。

搜索引擎首页

用户使用搜索引擎的需求明确且单一,只是搜索目标词的相关内容,因此搜索引擎首页要为用户提供便捷、迅速的入口,尽量减少非搜索相关因素对用户的影响。故常见的搜索引擎首页,在设计上以简单、清爽为主,没有大幅图片或者复杂设计,而且突出搜索框和按钮。如百度、Google首页以及一些网站的站内搜索页。

表单填写页

在表单页,用户的需求同样明确且单一,且用户需要尽快地填写完成表单,不让操作本身占据过多时间,因此表单填写页和搜索引擎页对设计的要求基本相同,以简单、整洁为主。下图为京东的注册页。

这里要说一下知乎的网页设计,对于未登录用户,知乎的首页即为注册/登录页。这样设计的好处之一是引导用户注册,好处之二是首页显得清爽、专业。但是这样设计的同时,就意味着未登录用户无法以游客的身份浏览内容,给用户造成了一定的压力。然而换句话说,这样也对用户进行了筛选,提高了使用壁垒,便于营造社区气氛。所以这个首页和注册/登录合为一体的设计,有利有弊,值得借鉴与学习。

首页即为注册/登录页的设计在一些存在用户准入门槛的网站中,较为常见,典型例子为pt类网站。

两栏式布局

两栏式布局综合了一栏式和三栏式的优缺点,是一种折中的界面布局方式。相比于一栏式,其可以容纳更多内容,但是不具备视觉冲击力 ;相比于三栏式,其信息不至于过度拥挤和凌乱,但不具备超大内容量的优点。

两栏式布局可分为左窄右宽式、左宽右窄式和左右均等式,每种方式的页面重点和视觉流都有所不同,其所适用的页面类型也不尽相同。

左窄右宽式

在设计上,左侧较窄,放置导航信息或者其他次要信息,右边较宽,为信息展示区,放置主要内容。因此网页应利用左侧的导航信息引导用户浏览网页,用户的视觉流也相应地从导航开始,进而浏览页面内容。

这种设计方式,适合于内容丰富、导航清楚的网页,拉勾网的首页和163邮箱的界面设计即为此种。

此外,对于左窄右宽式布局,左侧也可能放置推荐式导航和其他次要信息,比如京东的商品详情页。

左宽右窄式

在设计上,左侧较宽,放置主要内容,右边较窄,放置次要内容,大多为辅助导航或者广告信息。这种布局方式更突出用户当前浏览的内容,引导用户将视线聚焦于当前内容上。这种界面布局方式,常见于一些以内容为主导的网站,比如百度的搜索结果页,知乎的几乎全部页面。

左右均等式

在设计上,左右两侧均为信息展示区,在尺寸上,两侧的比例相差较小,甚至完全一致,常见于一些不出现内容主次的网站。

这种设计方式较极端,在这类网页中,用户不易发现重点内容,视觉流也不够清晰。猫扑采用的是这种布局方式,其将页面左右两侧分别设计为独立的分区,不同分区可以分别进行滚动、浏览等操作。

综上,两栏式布局具有折中、没有鲜明缺点的特点,也是目前最常用的布局方式。总结三种两栏式布局的特点和视觉流,如下:

s90rxpkJBiGfwKMq11B2

三栏式布局

三栏式布局是最为复杂的界面布局方式。

优点:

可以尽量多地显示出信息内容,尽可能地增加信息的密集度。

缺点:

会造成页面上信息的拥挤,增加用户找到目标信息的时间成本,降低网站内容的可控性。

三栏式布局主要分为中间宽、两边窄,和两栏宽、一栏窄。即使选择某一种, 在设计上,三栏的宽度也并不是一成不变的,应根据导航与内容的比重调整宽度比例。

中间宽、两边窄

这种布局方式中,中间栏的宽度较大,在视觉比例上相对突出,更容易抓住眼球,因此用户默认中间为重点信息,两边的内容为次要信息或者广告;这种布局方式,引导用户的视觉流聚焦于中间,然后向两侧移动。这种界面布局的典型应用就是新浪微博。

QOSwqKMFAK4TjQ4jFL3Y

由于新浪微博内容庞杂且细分的类目极多,故其首页有两个导航区,左侧为主导航区,应用Tab导航,右侧为辅助导航区,应用推荐位导航。

两栏宽、一栏窄

相比于中间宽、两边窄的布局方式,这种方式有着能够展示更多的重点内容,提高页面利用率的优点,但同时,也不如上一种方式突出和集中,用户视觉流易分散。这种界面布局方式常见于信息量巨大的门户网站的首页设计上,比如腾讯首页