想要用好网格系统，这8个小技巧你必须知道
彩云译设计
Posted on
这是彩云的第229篇分享
Hi，我是彩云。留白和网格是任何设计的基础，一旦真正掌握并正确使用，网格将帮你设计出可靠且具有吸引力的设计解决方案。所以，今天将分享我在UI设计中掌握的网格设计技巧，文章不长，认真看完，定有收获。
什么是网格设计？
网格是设计好任何界面的基础，可以将其理解为布局的框架。这套框架有助于组织UI元素、引导用户并确定设计的各个部分。
常用术语
网格（Grid）由网格单元（Grid unit）组成。布局放在网格上，它包含一定数量的列，列的左侧和右侧都有外边距（Margin），每列之间都有内边距(Padding)，也叫水槽。
技巧1，正确地选择列数
虽然 12 列 Bootstrap 类似网格是最受欢迎的选择，但它不是强制性的。选择网格时，根据设计真正需要来确定用多少列的网格，做到不多不少。（彩云注：可以根据自己的界面主要尺寸来定义列数，常见的可以按4的倍数或者8的倍数来设置）
技巧2，了解限制条件
始终以你正在设计的设备屏幕为基准，了解目标用户的使用习惯， 利用这些限制并学习使用它们进行设计
最常见的屏幕分辨率 (px)
PC: 1440x1024 平板电脑: 768x1024 手机：320x640（这里指的是1x图）
技巧 3，间距保持一致
技巧 4 ，用好网格基线
技巧 5，利用好框架和颜色
技巧 6 ，打破网格
技巧7，动态网格
技巧8，灵活运用网格系统
一些有价值的设计资源和插件
资源
插件
原文：https://blog.prototypr.io/ui-grid-best-practices-efd6c4f9d16
作者：Buninux
译者：彩云Sky
本文翻译已获得作者的正式授权（授权截图如下）
下面这个视频彩云希望你一定不要错过，花点时间看完定有收获！
围观彩云的朋友圈，交流设计，加入专属设计交流群
最近彩云还弄了一个新公众号，会发一些这边看不到的内容，期待大家的关注订阅！
近期必读热门文章
Send to Author