吹牛还要打草稿，更何况你是做设计。在准备上机制作之前，你最好先在草稿纸上，勾勒一下网页的大致框架，以及交互结构的线框图，不然谁都是懵懂的。

打开了软件，就意味着你已胸有成竹，接下来，需要在软件中去完善自己的想法。而不是打开软件，等着灵感从天而降。这也是很多初学者，在刚开始学设计时，会踩到的坑。

你得脑暴此次设计项目的关键词，以及行业关键词，然后带着关键词，去搜索借鉴同行、同类型的网页设计的排版，或者视觉形式。然后，结合自身的业务、以及网页内容，规划版面，完成交互线框稿的制作。

一般的网页，「主体内容区域」的宽度，通常都是固定的；而在竖向上，可以无限延伸。所以，我们就把网页的「主体内容区域」平分为多个栅格，主体区域内的容器模块，就以一个栅格为最小单位，这样，我们对整个版面的控制就会变得更加轻松。

△画布宽度：1920px，主体内容区域宽度：1200px，共分为了12个栅格，一个栅格单位为：A。此时，我们在拖拽视觉元素（矩形容器，文字、图片等）时，就以A的为单位，在栅系统的约束下，我们就可以很好的规整版面，使其简洁而富有理性之美。

另外，我在网上找了一个利用栅格系统排版的网页设计实例，大家请看视频：

栅格或网格系统，其实都是一个回事，英文翻译Grid。但我个人更倾向于，把上面的这种竖向分割的形式叫做栅格系统，因为，它们和这和公路、花园变身的栅栏很相似。

接下来我要说的网格系统，则主要在应用在印刷类平面设计里，因为印刷物料版面的长与宽比例，或尺寸，通常都是固定的，所以划分为网格的形式更适用，这种与高速公路的防护网很相似。

之前，我写了一篇更为详细的文章，里面详细总结了如何利用网格系统来编排内容，以及如何利用Photoshop快速生成网格，感兴趣的朋友可以阅读这篇文章。

一个好的版式设计，一定是疏密有致，有大小对比，以及重复、对齐的关系蕴含其中，这样才能做到版面结构的层次分明，给清晰而不紊乱的视觉影响，读者才会有性质阅读下去。

1.亲密原则：让同一组信息相互亲密，不同组的内容相互疏远，这样版面才会疏密有致。

2.对比原则：标题与正文，要一大一小形成对比，这样画面才有节奏感可言。

3.对齐原则：多个视觉元素，要有一致的对齐参考线，这样版面才不会凌乱。

4.重复原则：类似的视觉元素，可用重复套用一个的模板，让版面有统一规律可循。

比如下面这张图片，就完全运用到了以上几点，而且版面看起来非常规整，而不会凌乱。

排版设计，就是归纳梳理信息的过程，在《写给大家看的设计书》一书中，对以上四点做了更为详细的阐述，推荐设计初学者，可去阅读参考。

掌握了上述的3套方法，相信大家在理论层面会有一个质的突破。不过：实践才是检验真理的唯一标准，接下来，可通过一定的强化练习，来提高排版设计的实践能力。

当然，也不要局限于网页设计，包括：名片、画册、海报类型的项目都可以涉猎，以此来掌握不同物料、尺寸大小的版式设计，这样才能做到更全面的提高。

这里呢，就给大家推荐一个版式设计实例视频教程，课程地址：http://t.cn/RNoULkC

你在设计中，常常遇到的“没有灵感”和“不知从何下手”的问题，在这套课程中，你将找到想要的解决办法。授课老师为：文成武，CCTV品牌服务设计师，GDC平面设计在中国西安站十佳设计师，朝宇创意设计总顾问，陕西省印刷协会会员。

望以上内容，对大家有所帮助。

@酷coo豆，平面设计学习日记网站长，对自学设计有着深刻的见解。乐于分享自学平面设计的相关书籍、教程、经验等资源参考，希望和你一起进步，欢迎订阅我的专栏。

设计师必备收藏：100本人气设计书单，重塑你对设计的认知。