原文网址：https://medium.com/codeart-mk/law-and-order-in-ui-design-grids-894a267d7868
开始一个新项目会令人兴奋,但是这也意味着要从一个令人害怕的空白页面着手。今常会遇到“如何开始？”、“首先应该做什么？”这样的问题，其实没有正确答案，不如先行动起来。
在纸、画布、画板上排列基础参考线或布局，会给对完成设计作品一个有力地支撑。
在网站设计、登陆页面设计、网站应用等设计逐渐相互影响时，设计基础布局中应该使用网格系统。网格系统会帮助设计师在空间中安排合适的元素和空间，使视觉看起来结构紧凑、合理。
什么是栅格
栅格是由水平线和垂直线追寻一定规律所组成的结构线，他像骨架一样将所有元素组织到一起，支撑着画面上的所有设计内容。
栅格并不意味着对设计的限制，而是让画面中的所有设计元素更统一、有序、整体，这使你的设计内容更易被使用，让用户更好地理解你的设计意图。
使用栅格的目的是什么？
·使设计过程更快更简单
使用栅格可以让一切设计快速推进，帮助将所有元素放在合适的位置，并且在水平线与垂直线上测量适当的距离。当建立起可以将所有元素紧密结合在一起的结构后，可以帮助你设计出更多完美的作品。
·聚集与统一
将所有元素放入栅格系统可以使画面产生结构和韵律，更容易识别，与看起来凌乱涣散的碎片比起来，用户更喜欢和谐、统一的设计。栅格可以帮助在屏幕合理的位置摆放设计元素，同时保证所有元素是有序的状态。
·响应式设计
在现代设计中，界面设计指可以在各种设备、屏幕体验到的数字产品，小到手机的屏幕，大到电视屏幕。在所有的应用场景中，像素清晰、界面简练、易懂、流畅。在固定的屏幕大小，网格系统可以帮助重新组织设计元素，同时能保持所有元素看起来是有序的构成。
·设计师与开发者更好的协作
当我们拿出设计文件与开发沟通时，会希望每件事情都按照我们的希望方向去发展.如果我们的设计稿中包含网格系统，那么开发者会很快的理解怎样界定边界与填充内容，在没有确定规范的情况下，网格可以同时帮助设计师与开发者得到理想的结果，减少不必要的麻烦和混乱。
网格系统术语
·栏，像是网格系统的建筑模块，从页面顶部到底部的垂直面相同，并且规定了每一行的宽度。台式机设计一般采用12栏的网格系统，平板电脑采用8栏网格系统，移动端采用2栏或4栏网格系统（公司手机端是4栏），一般一栏的宽度在60-80px,具体取决于我们最终应用场景的尺寸。
·行，是指从页面左端到右端尺寸相同的水平模块，很少和栏一起使用，因为设计元素的高度通常是由内容量来决定的。
·栏间距，是在栏或行之间的空白尺寸，留有一定的呼吸空间，帮助在水平或垂直空间找到合适的距离，这个宽度经常在10-30px之间。
·页边距，指在页面左右两端空白的面积，在网格栏的外面。留给设计元素空白的呼吸空间，使屏幕上的元素在遇到下一部分前足够的紧凑。台式机和平板电脑的页边距要参照网格系统栏的大小来设置，手机端页边距大小在10-20px范围之间。
为什么要用12栏的网格系统？
这是最著名的网格系统，并且用数学的方式合理的解释了为什么，12很容易被1、2、3、4、6、12整除，给设计元素带来更多的灵活操作空间。所以开发者经常使用这种网格结构作为辅助系统，通过12栏网格在开发者和设计师之间建立共生的设计沟通系统。尽管有像8栏、不设计栏数等网格系统，但是今天我们聚焦于12栏网格系统的案例和设计规范。
规范与案例
·将设计元素放在栏内，用栏间距作为一个平衡的呼吸空间置入在设计中，不要让设计元素扩大到栏间距上。
·水平空间元素也要保持视觉上的联系，尤其是相互呼应的元素。
·像卡片、图片这种方形的素材放入比较容易放入网格系统中，如果是不规则或开放的图形使用网格系统有时不会那么容易。
·在母图形的小元素不需要遵循网格系统，只要是母图形被放在恰当的位置，那么它内部的小元素会有自己的构图。
·对于确定的排版部分不需要一味的遵循12栏。如果没有足够的空间划分12栏或者视觉上看起来很好，同样也可以使用8栏或10栏。特别适用于文字排版，因为栏数过多会导致文字反复折行，用户阅读体验被打断，并且很难快速理解文字的大体内容。
·自适应
自适应经常在12栏的大屏电脑、8栏的笔记本电脑、4栏的平板电脑、2栏的手机资料，切换。当大屏切换到小屏时一定要注意，因为在小屏的显示栏间距可能会小于大屏，如果大屏的栏间距设置为30px，10至15px可以满足自动端的使用需求。
打破规则
时不时的“去网格化”被视为明智之举。确定一切都在网格系统内排列后，不要担心部分元素跳出网格，因为可以让设计变得更有趣，突出部分视觉焦点。
举例说明如何打破网格进行设计
·标题标题跳出网格视觉上更突出，但是要注意不要将标题（标志或菜单）放在太靠近页面边缘的位置，距离两端的距离至少各保留50px。
·特点部分
当其他所有元素排版到适当位置，通过打破节奏使超出规则的部分更加引人注意，而仍然保持在网格内部的部分依旧收到规则的影响。
·装饰元素
在页面的任何位置，图形和表格都可以增加设计的趣味性和装饰性，有些在网格之外，有些与网格相邻，而有些则在元素之间或在元素的后面，这样做不是为了破坏网格参考线，而是为了让设计看起来更有趣。
·打破网格的图片
没有合适的矩形空间去放置一张图片或者一些元素位置超出了图片的范围在设计中是很常见的事情，元素脱颖而出在视觉上看起来更吸引人，也适用于图片和文字各占一半的排版方式。
·其他设计
当你真的理解了网格系统并且感觉很好用，那么恭喜你，打开了新世界的大门。当你开始打破规则的使用网格系统时你的设计视觉上仍然使统一、平衡的。当你坚持使用或者想让某些元素表现突出，认真的彻底学习网格系统会给你带来一定的指导。
学会使用网格系统、准寻规则需要一定的时间，它可以让设计变得更出彩、更有意义。目前为止、网格系统是我在设计学习过程中遇到的最好用的东西，它给我们提供了一个可以让设计师与开发者互相理解、相互协作的桥梁和准则。
（完）
网友评论