怎么提高自己的网页设计的排版设计？

时间：2024-02-14 13:00:02 | 来源：网站运营

时间：2024-02-14 13:00:02 来源：网站运营

怎么提高自己的网页设计的排版设计？：

我来给大家分享：两本书，1篇文章，1个视频，1套教程，帮你夯实网页设计排版的基本功。

一、正确的创作思路

1、打草稿是必须的

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

2、在软件中完善视觉

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

3、灵感的来源

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

二、版式设计的辅助工具

1、善用栅格系统，控制全局版面

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

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

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

https://www.zhihu.com/video/988028739158151168

2、善用网格系统

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

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

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

3、善用四大经典原则，创建富有节奏的版面设计

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

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

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

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

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

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

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

三、通过练习，提高版式设计水平

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

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

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

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

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

关于我

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

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