成为设计师的五项技能！第二招~~创优翼

感谢大家继续留意本系列文章，今天创优翼小编教给大家的，是成为UI界野区小王子的第二个技能~~网络！

技能二   ——  网格

    草绘是最基础的页面设计技能，而对网格（或栅格系统）的使用更是被很多设计师忽视。同样作为平面设计重要的工具之一，早在1629年，法王路易十四命令成立一个管理印刷的皇家特别委员会，由数学家尼古拉斯·加宗（Nicolas Jaugeon）担任领导。委员会提出了新字体设计建议：以罗马体为基础，采用方格为设计依据，每个字体方格分为64个基本方格单位，每个方格单位再分成36小格，这样，一个印刷版面就由2304个小格组成。这是世上最早对字体和版面进行科学实验的活动。也是栅格系统的雏形（下图）。

草绘是最基础的页面设计技能，而对网格（或栅格系统）的使用更是被很多设计师忽视。同样作为平面设计重要的工具之一，早在1629年，法王路易十四命令成立一个管理印刷的皇家特别委员会，由数学家尼古拉斯·加宗（Nicolas Jaugeon）担任领导。委员会提出了新字体设计建议：以罗马体为基础，采用方格为设计依据，每个字体方格分为64个基本方格单位，每个方格单位再分成36小格，这样，一个印刷版面就由2304个小格组成。这是世上最早对字体和版面进行科学实验的活动。也是栅格系统的雏形（下图）。

 

另一个是大家更熟悉的纵向网格，也叫做Grid System（如下图），因为960.gs等前端框架的流行，Grid System目前较为普遍，大部分设计师都懂得使用纵向的栅格规划页面结构。

而真正规范的页面设计同样要考虑纵向页面栅格和纵向节奏，无论你使用Photoshop还是Sketch都可以较为方便地生成横向和纵向两个方向的辅助线，以Photoshop CC 2014为例，使用插件GuideGuide可以快速生成自定义的页面网格系统，如下图：

当我们看细节，每个页面元素的左边缘都和纵向辅助线对齐，同时观察元素高度、字体的行高、元素间的空隙、段落间距，都由横向网格进行规范，保证高度都是8的整数倍，以及纵向居中，以及如下图：

值得提醒的一点是，使用这样大规模的网格系统，一个页面做下来眼睛不残废也要半瞎，我特别贴心（这么贴心是不是让你特别想与我工作呢？）地告诉大家在全局设置里可以更改网格的颜色，默认的Cyan蓝基本坑人，再将画板背景颜色改成浅灰色：

最后的操作界面看起来就舒服多了，多么的贴心

当然，最重要的快捷键是cmd+H，它帮助你快速切换是否显示网格。

使用网格是一种习惯，它的基本逻辑是：美也许还需要一些天赋和感觉，但是对齐这件事，是可以通过后天努力和细心以及一些工具完成的。 

好了，今天的第二个技能就介绍到这里，创优翼期待与你一起进步。我们下次再接着谈剩下的技能。

http://blog.sina.com.cn/s/blog_b44225550102w84y.html

转载于:https://my.oschina.net/u/2379883/blog/469715