南通青鸟IT教育

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

上课时段: 详见内容

课程价格: 请咨询

优惠价格: 请咨询

授课学校: 南通青鸟IT教育

课程详情2017-05-11 10:01
从首因效应说起,谈谈Web界面的三种布局

导读:设计是为用户服务的,而不是为设计本身。

正文

社会心理学中有个概念:首因效应。解释为个体在社会认知过程中,通过“*印象”*输入的信息对客体以后的认知产生影响,即我们常说的,*印象决定最终印象。在人和人的交往中,首因效应起到了重要作用,在用户与网站或者其它互联网产品的交互中,首因效应同样影响巨大。

以Web端为例,对于初次浏览的网站,如果界面排列有序,颜色搭配得当,页面的重要、次要内容清晰可见,那么用户至少不会产生厌恶感,也有更大的意愿继续浏览,进而进行深入阅读、注册等操作;反之,如果整个页面混乱不堪,毫无重点,如同二手市场,那么用户*反应就是这个网站有些low,顿时厌烦感爆棚,即使网站的内容质量再高,恐怕用户也不愿继续浏览,用户甚至不会关心网站的内容和信息,只想趁早离开。网站内容的优劣,PM们无法把控,但如果是因为界面布局和颜色搭配的问题,让用户没能留下来,那我们就要好好反思了。

因此我们应该更好地利用首因效应,重视起能够给用户留下“*印象”的界面布局,设计出符合用户使用和视觉习惯的界面,给用户提供尽可能无压力的、舒适的使用环境。

Web界面布局就是指网页的整体结构分布。界面布局的目标是提高用户兴趣、方便用户阅读。过于花哨的页面可能会提高用户兴趣,但是也会影响用户浏览网站的视觉流,甚至成为用户使用产品的阻碍,因此要在视觉美观和页面内容中找到一个平衡点。按照分栏方式的不同,可以将网站的界面布局分为一栏式、两栏式和三栏式。

一栏式布局

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

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

优点:

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

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

缺点:

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

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

两栏式布局

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

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

左窄右宽式

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

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

三栏式布局

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

优点:

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

缺点:

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

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

中间宽、两边窄

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

两栏宽、一栏窄

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

混合式布局

现在很多信息极丰富的大型网站,尤其是电商网站,其界面布局方式已经不单是以上中的某一种,而是几种布局方式的结合,以京东首页为例,进入页面时,主界面为三栏式,从左至右依次为:列表导航区、信息展示区和推荐位导航区,而下面的商品展示和广告位,则采用一栏式的界面布局方式。这种多布局方式结合的页面设计,既利用导航引导了用户的视觉流、又利用精美图片吸引用户注意,而且保证了页面空间的充分利用,可以说是比较合理、高效的界面设计。

*还要说明的是,不论哪种Web界面布局方式,其都是为信息展示服务的。无论是导航引导还是内容引导,无论是一栏还是多栏,最终的落脚点,都是帮助用户尽快地看到最希望看到的内容。说到底还是那句话:设计是为用户服务的,而不是为设计本身。南通青鸟IT教育UI培训班感谢您的关注!

相关课程

温馨提示:提交留言后老师会第一时间与您联系! 热线电话:400-850-8622