UI交互设计师需要掌握的网格设计小技巧

　　其实完成一个交互设计的 UI界面，说到底就是在纸上作画的过程。但作为学习交互设计的萌新小白，很难不遇到无从下手的境地。一张空空荡荡的画布，到底要如何下手?标题放在哪里?按钮放在哪里?都是很让新手头疼的问题。好不容易凑出一张界面图来，就又觉得哪里怪怪的。

　　发生这种现象的原因很正常，就是因为大家还不能完全掌握界面设计的规范法则而导致的。今天，我们就来介绍一个可以帮助大家快速掌握界面排布窍门的好工具——网格，帮助你成功驾驭ui界面设计。

　　网格是一种对齐工具，它由一些横向和纵向的线组成。在界面设计当中，网格可以帮助设计师对齐图形，文字以及图片，建立这些内容的秩序和规则，最终保证设计一致性。可以说，网格就是ui设计的骨骼框架。有了这个框架，你就不会再纠结，标题、文本、图片这些信息该放在哪里了。

　　当然，除了帮助规划内容和保持页面一致性这两个好处之外，网格还可以帮助设计师规划页面的留白，留出足够的负空间，使得页面具有呼吸感，用户在看到页面时，就不会觉得压抑。

　　既然网格是这么实用的工具，那么网格都有哪些类型?该怎么使用各种不同的网格呢?我们将常见的网格结构给大家总结一下，大家可以在自己的设计实践当中进行尝试。

　　*1基线网格

　　基线网格，看起来十分简单，几道横线组成的网格。我们通常会使用辅助线来

　　进行定位，这和基线网格就有些相似之处，只不过基线网格里的线，距离是相等的。基线网格看起来非常简单，运用起来却十分讲究技术。基线网格适用于对文本信息的位置进行定义。每一行文字集之间的距离都恰到好处，会给人一种赏心悦目的感觉。

　　举个例子来讲，在一个网站或者应用程序的引导页面上，如果你使用了基线网格对文字进行排版，合适的间距会迅速影响到这个用户最初接触这个交互系统时信息的可读性，这可是用户对于这个产品的第一印象啊!不想让用户被密密麻麻的信息“劝退”，放弃使用你的交互产品，那就一定要学会用基线网格来增强文字阅读观感吧!

　　*2手稿型网格

　　如果说基线网格还不具备“网格”的特征，那么手稿型的网格就是最简单最基本的网格了，它的本质就是一个大型的矩形框，大块的内容占据了页面的主要空间。

　　传统视觉设计，通常会将手稿型网格，应用到书籍和报刊的排版当中，但对于数字交互设计，这个同样也很实用的。偏向于大量阅读的页面，比如新闻网站的页面，就很适用于手稿型网格。大片的文字，大张的图片，可以很轻松的放在上面了。

　　*3列网格

　　我们可以将手稿型网格看作是一个大列，如果将这个列的数目增加，就会形成现在我们要介绍的列网格。列网格的列数是没有特定限制的，2—12列是设计师们常用的列数，当然你如果需要，你还可以创造更多的列数。你创造的列数越多，网格就

　　会更加灵活。对于信息很复杂的页面，使用列网格实在是好用极了，大大小小的内容，可以更加准确地排入你的页面当中。

　　目前绝大多数的交互界面，无论是app端还是网页端，很多都是在运用列网格。所以说，这一定是你要学习的网格形式!

　　*4模块化网格

　　把你的页面像切豆腐一样，切成一块一块儿的，就形成了模块化网格。它是由网格垂直和纵向拆分成多个模块的网格，形成井字形模块，每一个小模块形成一个单元格。

　　对比列网格，模块化网格又增加了横向的约束线，当我们需要面对更加复杂的页面布局时，模块化网格为页面的布局规范创造了更多的助力。

　　模块化网格也是可以灵活改变的，当你的页面上信息元素有了不同的轻重等级之后，你可以改变一些模块的高度和宽度，来增加这些元素在视觉上的重要程度。这种网格又可以被称为分层级网格。

　　分层级的网格通常适用于网页设计之上，比如新闻网站需要给他们的头版头条留出最显眼醒目的位置，吸引读者来关注某些文章信息，那么使用分层级网格就可以帮助设计师把最好的位置留出来。比如《纽约时报》这个界面的设计，就是应用了这种网格形式。

　　有了这些基本信息之后，相信各位一定对网格有了基本的了解。如果想要彻底掌握网格的使用规则，大家还是要在自己的作品当中进行实践。希望网格这个工具能给大家的设计带来帮助!