栅格系统在设计中的应用

       

       首先，我们要知道什么是栅格，栅格就是：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。

栅格可以应用到所有的设计中，比如Phone栅格、PC栅格以及画册海报版面的栅格，它们本质上没有区别，一样的计算方式，无外乎尺寸大小的差别，但这尺寸大小，就有很多细节需要结合实际情况来判断和取舍。我们来看下常用的栅格计算公式：

       举例：比如你要做1920，如果用常用的n=12分栏，得到每一等分的宽度就是1920除12等于A=160，我们就可以定列宽为a=120，间隙i=40（列宽：间隙=3：1），然后页面左右安全边距等于40除2等于20。

 

       对于设计师来说，栅格系统的使用，能让信息呈现的更加美观，更加易读，亦更具可用性。而对于开发人员来说，也将更加的灵活与规范。下面我分享下在不同设计领域的知识点：

 

在网页中的应用

       当下960栅格系统，仍然还是很多设计师在使用，除了考虑到显示设备的分辨率，还依赖于960 的灵活性。如果是考虑到宽屏的设计（需要舍弃一部分分辨率不高的用户），可以把栅格化系统的宽度建为980、1180、1200甚至以上。注意的是：这里说的960是含边距部分，换句话说，在psd文档中，内容部分是950px。常用栏数：6、12、16、24.常用的间隙是10、20。

      栅格元素在网站起到一种承上启下的作用，网页设计中让网站其他元素整体和有组织的排列在一起，这种从左到右，从上到下排列布局，让网站整体看起来有更加紧凑。让网页其他元素保持一致性，元素与元素之间间距一致，使整个网页整洁性更加协调。

 

在APP中的应用

      在移动端UI设计中栅格系统更为重要，当今屏幕尺寸和分辨率种类层出不穷。使得设计师对“维护适配性”的难度越来越大。这个时候就更需要我们对页面进行栅格化设计，一个是可以提高适配性，二个也能更好地做规范让多名设计师配合时更顺畅。

 

       App栅格中，我们通常会分为12、24栏；间距一般为4的倍数，这将使得我们可以适配不同的尺寸，更容易对元素进行不失真的缩放。 而点击区域一般的为88px，间距为20或22px。

       对于APP而言，用户的屏幕空间是有限的，栅格视图创造了更长的页面，同时推动用户以滚动的方式浏览更多的内容。这里要注意的是：在视图初始滚动的位置要避免栅格内容沿视图边缘水平对齐，因为这种放置不能有效地传达出下面还有更多的内容。

在图文排版中的应用

       我们在做图文排版时同样需要用到栅格系统，很多人在图文排版时只是拉了“安全边距”的辅助线，这样不能利用栅格系统来为我们的设计服务。在图文排版中我们同样需要把画册栅格成多个等分。比如A4页面中我们常用的3、4栏，需要细致点可以是8、10栏。

      

       在图文排版时，栅格系统可以为我们提供了版面的骨架，这会让我们的编排过程变得更加简单。为版面中的元素添加了连贯性和精确度。

 

       文字排版中一般66个文字为最佳阅读长度，所以A4排版时以阅读为主的版面一般为会分为两栏或者三栏为最佳。同时我们需要为版面“留空”，所以在做栅格系统之后，我们可以更为直观合理地知道什么地方的格子需要“留空”。

 

       最后，栅格存在的目的是帮我们创造好的设计，当我们开始逐渐适应栅格的存在，千万不要被它束缚住。你并没有必要100%地受限于栅格，偶尔打破栅格的设计可能会让你的设计更加抓人眼球。不过，想要打破栅格又保持页面的协调，是有技巧的，并非任何“破格”的设计都是好的。这就需要我们在设计中进行摸索偿试了。