q1

引言

作为一名互联网产品经理，为自己的产品策划一个最恰当的网站／网页总是必不可少的。

网页设计，产品经理做什么？产品经理需要做以下工作：1.定位设计网页的目标；2.策划网页的内容；3.制作网页的原型；4.与设计进行沟通；5.设计人员制作出网页；6.重构人员对页面进行重构；7.交由开发人员进行开发。

那么，怎样的页面设计最适合于我们的产品？在页面设计过程中，有哪些需要注意的坑？整个过程中，产品经理应该最关注哪些点？笔者结合实战经验，与大家分享6个经验。

2

网站策划技巧之——清楚页面设计的目的

在设计网页之前，最重要的是——搞清楚这次设计的目的是什么。网页的设计，绝不只是为了好看。如果只是为了好看，可以直接上高清大图。网页的设计，也绝不只是一味的模仿，别人的设计并不一定最适合自己。

所以，把自己设计网页的目的搞清楚了，才能够有的放矢。

网页设计的目的有哪些？我们为什么设计网页？

网站策划的目的有很多种，但最常见的就是就只有几种，具体请参考作者文章《产品必修课：网页设计目的有哪些？》。

设计，让生活更美好

3

网站策划技巧之——首屏最重要！

一个网页再完美，用户第一眼看到的也是首屏。最吸引用户的也是首屏。用户在看完首屏内容之后，在往下拖动页面看后面内容的注意力、耐心、用的时间都会明显减少，甚至几乎不看后面的内容。

因此，所有网页的设计重中之重都是首屏。整个页面的最核心内容的关键点，都需要在首屏展现出来。让用户看到这个页面立即能get到你要表达的点。

滴滴：首屏的三个模块

在实战中，我们来看滴滴的官网首页的首屏，一目了然，可以看到首屏可以被划分为三个模块。

模块1:顶部的菜单栏。供用户选择网站的其他内容，这是网页的标配。模块2:大大的Banner，用于宣传产品特色／主题等。模块3:用来宣传产品子功能。

我们可以看到，尤其，模块3，恰好采用横栏的方式在首屏中除去Banner之后仅存的区域放下。可以说，滴滴的首屏位置用的恰到好处。这一定是经过产品经理用心设计的。

4

网站策划技巧之——页面布局，需要保证稳定性与平衡性

稳定与平衡，关乎用户阅读网页时候的体验，一般而言，需要保证左右平衡。如果某些地方需要配部分图片，导致失重，那么我们也需要在接下来的部分，将图片陪在另一侧，将重心移动到另一侧，来保证整个页面的平衡性。

以滴滴为例：

为了保持平衡性，3个元素、4个元素、2个元素时候的排版方式，可以分别采用下面的方式：

滴滴：3个元素的排版方式 滴滴：4个元素的排版方式 滴滴：2个元素的排版方式

此外，在一个模块的重心偏向一侧之后，需要马上在另一个模块中把重心移动到另一侧，以达到平衡效果。

滴滴：重心在右侧 滴滴：接下来，马上把重心移到左侧

5

网站策划技巧之——整个网站的风格需要统一

在设计风格上，可以充分利用布局和字体的视觉原理。例如，我们想要网页设计的高贵／逼格高，可以采用细的字体，等技巧。再比如，如果使用的文字过多，则显得没有那么高贵、大气。

推荐阅读：知乎-中文字体排版如何做到高格调？

ROLEX：高格调设计

6

网站策划技巧之——整理好逻辑顺序

网页一般会比较长，大概有3～4个屏幕的长度。那么用户从上看到下。产品经理就需要充分研究并理解用户的整个心里过程，按照用户的理解顺序（或者说我们希望用户的理解顺序）进行排版布局。

以wetest的客户端性能测试产品介绍页面为例，我们来看各模块之间的顺序关系：

第一，用Banner来描述标题和介绍；第二，接下来马上介绍产品的特色，吸引用户使用自己的产品；第三，在用户觉得产品很有特色，有尝试的想法时，马上在第三个模块告诉用户使用只需要这几个步骤，步骤简单，方便易用；第四，方便地使用之后，用户可以得到什么结果，在第四个模块马上告诉用户我们的产品报告模版方便易懂；用户经过上面的描述之后，已经觉得产品很有特色，简单易用！

接下来，再告诉用户，我们的合作客户都是王者荣耀、CF这样的用户量过千万的游戏，使用我们的产品，您们将会得到和他们一样的服务！用户自然喜欢。既然，用户已经决定用了，那么我们把详细的文档和使用Button放在后面就是自然而然的事情了。

可以看出，整个流程非常流畅，从用户的心里体验角度，层层递进，直指人心！

模块1: 大 Banner 模块2: 产品功能全，有特色！ 模块3: 测试步骤很简单！ 模块4: 报告简单易读！ 模块5: 用户将得到和王者荣耀一样的服务！ 模块6:使用帮助 模块7:开始使用吧！

7

网站策划技巧之——留出“出气孔”，避免“心塞感”

为保证用户阅读网页时候的愉悦度，我们不能强行把所有内容都堆积到网页之中，而是需要在设计中，考虑网页布局。让网页拥有出气孔，让用户读的畅快，避免有心塞的感觉。例如下面的网页：

模块与模块之间的空隙：这就是出气孔

同样，出气孔的原理与中国绘画息息相通，例如：

我们看山水画大师李可染先生的画作，尽管整个画面用色很重，排版很密，但是中间的河流，就是整个画面的出气孔，让我们感觉到整个画面并不是那么堵，反而觉得曲径通幽，别有一番韵味。

李可染画作

我们再来看画家李承钧先生的下面一副画作，同样，尽管画面排版较密集，但是画面右侧的河流确绵延布局，与后侧的群山相连，让整个画面一下子活了起来。可谓，与李可染先生的画作有异曲同工之处。

李承钧画作

经过上面分析，可以看出，艺术之间是相通的。对于产品经理而言，在日常工作之外，增加艺术修养十分有必要。

8

总结

如果产品经理在网站策划过程中，能够把我上面的即可原则，策划出的网页就不会有太大的缺陷了。不过，要想将网站策划水平提高到更高的境界，则需要更多的学习与历练。

xander/2017/06