B2B网站内容设计:页面设计要满足用户需求和习惯

对于B2B行业网站的页面设计，大家可能更多考虑页面用色、导航条、按钮、标题栏的设计，内容设计可能常常被大家忽略。但是如果内容设计的不好，可能会让你的所有设计被毁于一旦。比如如何让内容有主次之分、层次感，使内容看起来不会太乱、太多，使用户不愿意继续阅读下去，很快离开网站，不能留住用户继续访问。

在本研究报告前面章节我讲过，永远要记得用户在没有明确的阅读内容前是扫描而不是阅读，在导航页面，用户很乐于扫视一句一句的内容，对于大面积没有重点的内容，没有耐心，我们必须在网页上提供既简短又有一定视觉焦点的内容。这种焦点可以吸引用户的注意力，让他们在看到喜欢内容的时候，采取进一步的行动，点击链接浏览详细信息，或看其他更多内容，让用户留下来，如果我们不区分重点，就很难让用户很快发现他想找的焦点内容，尤其是对于新用户，第一印象很重要。

了解到用户浏览页面时的需求和行为后，在页面设计时就要满足用户的需求和习惯，有那些办法可以突出焦点内容呢？一般常用：文字加粗、文字配图片、文字变颜色、加导读、文字变大、重点突出的部分四周多一点空白、增加小图标或按钮等方法，都能突出焦点内容。下面来简要讲解。

1 标题及重点突出内容设计一般标准

浏览者来到网站，会试图找出他们需要的东西。再次重复，用户并不一定是来阅读的，他们是来做他们想做的事情，每个人的目的不一定相同，网站要节省他们的时间并且突出优质内容来吸引每个用户的注意力，从而让他们更加便于在几秒钟内扫描整个页面。用户只有在这几秒内扫描并发现他们想要的东西，才会继续在你的网站上停留更长的时间。所以对于B2B行业网站的首页、一级栏目首页等导航页面来讲，焦点内容就是推荐内容标题，信息分类名称，信息图片等几个方面。使焦点内容更突出的方法有很多，下面来详细讲解。

（1） 文字加粗

无论什么内容，只要我们将少部分的内容加粗，将大部分不加粗，那么加粗的内容肯定就会非常突出，这个是常用的制造焦点内容的方法。在一个页面上我们会见到很多加粗的文字，这些加粗的文字就会是焦点内容的一个部分，推荐的链接内容标题、主要分类名称等经常使用。这个是页面设计时创造焦点内容的主要方法。

（2） 字号变大

这个方法与文字加粗一样，属于设计焦点内容的常用方法，对于最重点的内容，通常都是既加粗，字号又变大。同样是推荐链接内容标题、主要分类名称等经常使用的。

（3） 文字变颜色

一般字号变大、字体加粗，也会与变颜色同时出现，更加突出，但是变颜色也会出现在一些次突出内容上出现，只变颜色，不加粗，不变大字体。

图（69） 阿里巴巴产品列表页截图

如图（69）所示，首先产品名称，是最重要的，用户将通过名称看是否是自己感兴趣的产品，所以阿里的设计师采用了最突出的做法，既变颜色，又增大字体，还加粗。公司名字是第二个需要突出的，在这里只采用了变颜色，如果又加粗的话，就会使页面看起来很累，突出的内容太多了，就没有突出了。同时标题下面为产品的导读，将产品的参数表示出来，当访问者通过扫描对某个产品感兴趣了，就可能进一步看产品的介绍，属于扫描到感兴趣内容后的第二步动作，所以在页面上，要弱化，设计师采用了灰色，以及地区、起订量等都是灰色。搜索出来的产品都很类似，价格的比较就变的很重要，所以价格采用了浏览者眼球最关注的颜色：红色。正如我在之前文章里讲的，要研究电子商务网站的设计，阿里巴巴是最重要的研究对象。

（4） 文字配图片

为了突出某个内容，我们常常配个图片，吸引用户的眼球，当然有时是这个内容本身就包含图片，但是更多的时候我们会配个图标、按钮、小图片，为了突出这个内容，与周围的内容区别开来。

（5） 四周留空白

为了突出某个内容，我们常采用把这个内容的四周留白，这也是突出这个内容的方法，这种方法常常与加粗、字体变大、变颜色等一起使用。

（6） 为内容加导读

加导读的方法，除了让用户增加对突出内容有更多的了解，吸引用户点击，还从视觉上让用户觉得这个内容相比其他信息占的空间更多，习惯上认为这个信息更加重要，突出这个部分的内容。

2 内容链接设计一般标准

网站内容链接要遵守用户习惯，让用户看着就像一个链接，想去点击。链接设计也是网站设计与平面设计最大的区别之一。一般的设计师对链接都能处理好，但是仍然有一些网站在这方面经常犯一些错误，也许各位读者觉得这些错误太低级，但是据我看过的一些做的不好的网站，他们在链接设计上存在如下的问题。

（1）重要链接放图片上

网站大部分的链接都应该使用文字，尤其是内容的链接，尽量减少对图片做链接，不仅对搜索引擎优化不利，而且用户使用时更习惯点文字链接。

（2）鼠标放链接上时文字颜色无变化

鼠标放链接上时文字颜色变化是一个习惯用法，几乎所有主流网站，当鼠标经过链接时，都会变颜色，目的是让用户更清楚的知道，他准备点击的是那个具体的内容。如果链接显示的时候没有加下划线，鼠标放上去后必须要加下划线。

（3）链接文字之间行距太小，看起来很累

链接与链接之间，要有一定的行距，一般字号在12PX-13PX之间，行距在25-30象素之间，行距太高，太粗糙，行距太低，看起来太累，这些都一定要符合标准，常用的行距是：150%。

（4）链接的背景颜色很深

一般导航页面链接背景都是白色，为了使看起来不累或美观，可以用浅灰色的背景，或很浅的其他颜色作为背景，背景颜色不能对阅读链接内容造成视觉噪声，干扰用户的视线。

3 网站内容图片设计一般标准

在网站导航页面里，图片分为两种情况，正如在《B2B行业门户网站设计开发实战研究报告》里所讲的，一种情况是图片作为文字的点缀，让文字内容更突出，更具有可读性；另一种情况是图片就是内容，产品图片、新闻图片、人物头像等。这两种情况对图片设计的要求是不一样的。

（1）作为点缀或类似按钮的小图片

这类图片重要的一点就是要精致，使用的颜色一定要符合最新的设计潮流，要更多使用渐变颜色，可以参考很多大门户网站的小图片，可以直接抄过来使用，或者在一些专门的小图标收集网站去找，然后修改下，就可以使用。

（2）产品图片、新闻图片及人物头像

在设计时，我们常常会涉及内容图片，这类图片尺寸不能太大，否则显得太粗糙，也不能太小，太小就不显眼，图片周围有文字说明，不能只有图片，没有文字说明。

（3）图片清晰、不变形是最基本的要求，也是必须的

我们设计时使用的所有的图片、图标，一定要清晰，见过很多设计太差的网站，按钮是变形的，有的图标也是变形的，用户上传的产品图片有的也是变形的，这个在网站设计中是绝对不允许出现的。图片尺寸要符合图片本身的特点，比如服装款式图片、人的头像，高度就一定要比宽度大，见过很多网站设计的人物头像，居然宽度比高度长。

4 导航页辅助内容设计一般标准

比如资讯导航页面重点推荐内容的导读，产品列表页面产品导读、产品参数等，在本研究报告，我都归纳为辅助内容。这些内容设计时要用灰色，字要更小一些，行距要低一些，主要就是不能影响重点内容，使页面看起来更有层次感，主次分明。用户也是在扫描整个页面，找到重要内容的时候，再去阅读辅助内容。

关于B2B行业网站的内容设计标准，就讲到这里，其实这个标准，也与一般的商业门户网站大同小异，但是与企业网站的区别很大。