网格系统的前世今生

4.添加点缀

内容编排好后，就可以把页码、栏题、优先级不是特别高的信息以点缀的形式依次编排到画面中，版面就编排完成了。

不要让网格系统限制了你的设计

网格系统是提供秩序性的工具，它为设计者提供了版面骨架，使得编排过程变得更加简单，为版面中元素添加了连贯性和精确度。但网格的规划并没有固定规则，还是需要根据实际内容决定的，要学会灵活应对，而不是限制你的设计。

如果感觉你的灵感被束缚在这些条条框框里面了，建议你从网格系统中跳出来，用自己的创意去设计，按照自己的经验来排布元素，然后再切出网格系统，稍做调整即可。如果网格系统和你的原创设计出入过大，不能有效协调，那么建议换一个网格试试，或者自己设计一个网格。是先做设计还是先建立网格，这就像先有鸡还是先有蛋的问题，本没有标准答案。

网格系统与 Web UI

现如今，网格已经几乎是所有网页设计的基础。相继出现的诸多 CSS 网格框架，几乎成了网页设计的标准。由于网页内容复杂，分类繁多，再加上诸多控件，网格的参考线一般也比较复杂和多样，它更像是版式设计中的重叠网格。这些隐形的线条帮你确定元素要怎么放置，帮你确保不同的控件在页面上堆叠而不会显得突兀不协调，有助于保持页面的组织性，创造出空间的节奏感和视觉的流畅感。

科普一下960px网格系（http://960.gs/）, 也称 960 栅格布局, 数年来作为网页设计人员的最爱, 被用来搭建网站和设计网页布局。960 网格系统可能是现在最受欢迎的网格系统, 并已经在很多网站和设计模板上使用。如新浪、网易、搜狐等。

但网格系统不意味着循规蹈矩，一味按照网格线来进行布局。网格系统一般都很灵活，这样就可以在需要时自由调整。就拿响应式设计来说，灵活性是其最大的特点。网页设计感兴趣的同学可以自行拓展阅读了解一下，再此就不展开讲述了。

网格系统与 App UI

人们常常是以很近的距离查看手机屏幕的，移动设备的屏幕分辨率越来越高以满足人们对高清画面的需求。 为了确保所有元素在用户设备上显得清晰明了，这就要求你创建的每个UI元素都应与像素网格对齐。除了对齐像素，还要遵循一些排版原则和格式塔原理将界面元素有序整合到手机屏幕中，让界面更具有节奏感，让信息层级更明晰。

一些平台的设计指南专门针对 4 或 8 点的网格进行调用，从而使该系统成为一个自然的契合点。尤其是谷歌的 Material Design 问世之后，8 点网格被越来越多得用在移动UI设计中。 

为什么是 8 点网格？

8 点网格规则是一个 以 8dp 为单位，利用 8 的倍数来规定页面中元素（按钮、输入框、图片等）的尺寸及各自间距的一种通用的栅格规则。栅格系统的最小单位是 8dp，一切距离、尺寸都应该是 8dp 的整数倍。

为什么用 8 而不是 5 或 7 呢？

Android系统有 1.5 倍大小的设备，如果图片尺寸为奇数，则会出现半像素和虚边的问题。比如将一个 5px 的方格缩放到1.5倍，就会产生 0.5px 的边缘。用8这样的偶数就让缩放变得很简单，并且能够适用于大部分的情况。

为什么用 8 而不是 6 或 10 呢？

因为目前主流的屏幕尺寸大部分都是 8 的整数倍。即使某些屏幕边长像素不是 8 的倍数，在设计中仍然可以尽量做到自定义元素的长、宽、margin 以及 padding 都是 8 的整倍数来维持设计的一致性。

Material Design 中的 8 点网格

以下是一些常见的尺寸与距离：

另外注意 56dp 这个数字，许多尺寸可变的控件，比如对话框、菜单等，宽度都可以按 56 的整数倍来设计。