ui设计稿和成品界面差异大？多半是网格系统没弄好！-利来国际登录

网格系统是一门知识面比较广的学科，这里专门针对web设计中的一些方式、方法来对网格的知识做一个简洁的提炼，以便大家在界面设计和前端开发时，有一个比较理想化的参考。

网格这一概念已经沿用了许多世纪。它不仅仅适用于web设计，也可以运用于其他领域，如平面设计、广告创意、app设计等，图为web 设计的网格示意图。

结合web自身的特点和前端开发的特点，网格可以从以下几个方面去理解网格的概念。 这里说到了前端开发，它和网格有什么必要的联系呢？在前端开发过程中，开发者需要对网站的安全宽度、各设备的响应式宽度，以及对不同模块之间及图片文字之间的对齐负责，这些参数需要和设计师的设计稿相符，才能够高度还原设计稿。设计稿和成品网站经常会有特别大的差异，一定程度是由于协作之间产生了很多问题，无法协作设计规范，导致设计与代码的相融性太差。所以我们在设计时，要做好网格标注。在开发过程中，一个像素的误差就可能造成模块间的错位，所以我们需要重视网格系统。

在开始绘制一个网格之前，有许多因素需要考虑。比如，网站面向的用户是谁？界面想要传达的思想和意图是什么？使用什么尺寸的字体？界面模块的尺寸是多少？如何使设计的内容可读性强，易于用户理解？界面布局大概需要几行几列？思考这些问题，以更好地利用网格这个工具，你的设计会更上一层楼。

熟练掌握基本设计原则，能够帮助你成为更好的设计师。使用网格也是基本的设计原则之一。掌握网格是一项由来已久的基本功，需要我们学习了解一些常出现的概念，如网格结构。

首先分开来说，“网格”是由垂直和水平线组成的，“结构”指元素之间的组织与排列。那么通俗一点儿说网格结构就是通过沟槽、行和列、模块、空白、参考线等构件来给页面的文本、图片、信息或图表等元素做一个灵活的结构布局，它能够处理复杂的信息结构，能够更好地帮助设计师完成主要和次要信息的规划，如图所示。