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

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

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

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

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

　　一栏式布局

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

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

　　优点：

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

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

　　缺点：

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

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

　　企业网站首页

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

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

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

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

　　搜索引擎首页

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

　　表单填写页

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

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

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

　　两栏式布局

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

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

　　左窄右宽式

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

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

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

　　左宽右窄式

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

　　左右均等式

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

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

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

　　三栏式布局

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

　　优点：

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

　　缺点：

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

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

　　中间宽、两边窄

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

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

　　两栏宽、一栏窄

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

　　混合式布局

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

　　最后还要说明的是，不论哪种Web界面布局方式，其都是为信息展示服务的。无论是导航引导还是内容引导，无论是一栏还是多栏，最终的落脚点，都是帮助用户尽快地看到最希望看到的内容。说到底还是那句话：设计是为用户服务的，而不是为设计本身。

　　本文由 @李小新 原创发布于人人都是产品经理。未经许可，禁止转载。

*请认真填写需求信息，我们会在24小时内与您取得联系。