当前位置:首页 > 冰箱 > 文章正文

从首因效应说起谈谈Web界面的三种构造

编辑:[db:作者] 时间:2024-08-25 05:19:05

社会心理学中有个观点:首因效应。
阐明为个体在社会认知过程中,通过“第一印象”最先输入的信息对客体往后的认知产生影响,即我们常说的,第一印象决定终极印象。
在人和人的交往中,首因效应起到了主要浸染,在用户与网站或者其它互联网产品的交互中,首因效应同样影响巨大。

从首因效应说起谈谈Web界面的三种构造

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

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

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

一栏式布局

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

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

优点:

构造大略,页面清楚,不会给用户过多的视觉压力,用户视觉流清晰;信息展示集中,页面的重点突出,用户能够迅速找到网页的重点内容。

缺陷:

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

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

企业网站首页

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

一栏式布局运用在企业首页上时,要把稳两点:

须要利用大幅的精美图片或者视频等,造成强烈的视觉冲击力,给用户留下深刻印象,提升品牌效应,留住用户进一步浏览;由于一栏式可展示的信息量有限,以是应在首页添加导航或者主要链接的入口,勾引用户深度浏览,起到入口和信息分流的浸染。

搜索引擎首页

用户利用搜索引擎的需求明确且单一,只是搜索目标词的干系内容,因此搜索引擎首页要为用户供应便捷、迅速的入口,只管即便减少非搜索干系成分对用户的影响。
故常见的搜索引擎首页,在设计上以大略、清爽为主,没有大幅图片或者繁芜设计,而且突出搜索框和按钮。
如百度、Google首页以及一些网站的站内搜索页。

表单填写页

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

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

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

两栏式布局

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

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

左窄右宽式

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

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

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

左宽右窄式

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

旁边均等式

在设计上,旁边两侧均为信息展示区,在尺寸上,两侧的比例相差较小,乃至完备同等,常见于一些不涌现内容主次的网站。

这种设计办法较极度,在这类网页中,用户不易创造重点内容,视觉流也不足清晰。
猫扑采取的是这种布局办法,其将页面旁边两侧分别设计为独立的分区,不同分区可以分别进行滚动、浏览等操作。

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

三栏式布局

三栏式布局是最为繁芜的界面布局办法。

优点:

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

缺陷:

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

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

中间宽、两边窄

这种布局办法中,中间栏的宽度较大,在视觉比例上相对突出,更随意马虎捉住眼球,因此用户默认中间为重点信息,两边的内容为次要信息或者广告;这种布局办法,勾引用户的视觉流聚焦于中间,然后向两侧移动。
这种界面布局的范例运用便是新浪微博。

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

两栏宽、一栏窄

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

稠浊式布局

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

末了还要解释的是,不论哪种Web界面布局办法,其都是为信息展示做事的。
无论是导航勾引还是内容勾引,无论是一栏还是多栏,终极的落脚点,都是帮助用户尽快地看到最希望看到的内容。
说到底还是那句话:设计是为用户做事的,而不是为设计本身。

本文由 @李小新 原创发布于大家都是产品经理。
未经容许,禁止转载。

本站所发布的文字与图片素材为非商业目的改编或整理,版权归原作者所有,如侵权或涉及违法,请联系我们删除,如需转载请保留原文地址:http://www.baanla.com/bx/137864.html

XML地图 | 自定链接

Copyright 2005-20203 www.baidu.com 版权所有 | 琼ICP备2023011765号-4 | 统计代码

声明:本站所有内容均只可用于学习参考,信息与图片素材来源于互联网,如内容侵权与违规,请与本站联系,将在三个工作日内处理,联系邮箱:123456789@qq.com