文档介绍：.. ... UI 界面设计之美: 栅格系统栅格系统应用于设计领域已经至少 50 年了。栅格化让眼睛浏览信息更加愉悦。从报纸、杂志,到手机界面,栅格系统全面渗透到各种信息传达的界面当中。下面由我们 UI 设计培训老师从一个故事开始栅格系统探索之旅吧! 栅格系统的诞生 1692 年,新登基的法国国王路易十四感到法国的印刷水平强差人意,因此命令成立一个管理印刷的皇家特别委员会。他们的首要任务是设计出科学的、合理的,重视功能性的新字体。委员会由数学家尼古拉斯加宗( Nicolas Jaugeon )担任领导,他们以罗马体为基础,采用方格为设计依据, 每个字体方格分为 64 个基本方各单位, 每个方各单位再分成 36 个小格, 这样, 一个印刷版面就有 2304 个小格组成,在这个严谨的几何网格网络中设计字体的形状,版面的编排,试验传达功能的效能,这是是世界上最早对字体和版面进行科学实验的活动,也是栅格系统最早的雏形。 960 栅格化系统 960 栅格化系统是由 Nathan Smith 创造的,具体来讲,就是基于 960 像素宽度,通过划分具有规律的分割,来提高网页开发效率。 960 栅格化系统系统( 或者说适应型 css 构架) 早期主要用来进行快速原型制作, 减少重复单调的工作, 但是目前, 它在网页设计开发项目中开始扮演非常重要的角色了。它将为你的设计提供一个坚实的坐标基础。最初有两种变形: 12 栅格和 16 栅格。它们互补保证了系统的融通性。后来产生了更多的衍生。下图展示了 16 栅格到 3 栅格的案例。 BBC 和 yahoo 的门户网站就采用了栅格化体系,从而非常好的规范了网站的信息布局和疏密程度。.. ... 一些个人站点或者产品展示站点使用栅格化后更加大气, 视觉感受更加宽广。下面是一些网站的例子: .. ... .. ... .. ... .. ... 栅格系统指导页面的布局和留白, 而不影响站点的个性化需求。可以说页面布局就好比计划, 它能够事先勾勒出网站的气质。针对网站内容的容量选择合理的栅格方式。这里不深入阐述如何使用栅格系统设计网站,如果需要可以另起一篇文章。随着大尺寸屏幕的出现和普及,很多网站开始走宽屏路线,但是这并不影响栅格系统的存在,相反, 栅格系统已经成了多媒体信息排版的基础。而在移动端,随着 flipbord 应用程序的出现,借鉴杂志排版效果的信息呈现方式逐渐成为 PAD 上内容应用的主流形式。其中 3×4 网格的应用最为广泛。 3×4 网格的变化早在 1300 多年前, Bill Drenttel 和 Jessica Helfand 就将这种分割布局关系用在日本建筑领域的榻榻米中。( 榻榻米, 旧称“叠席”, 源于古代中国, 是房间里供人坐或卧的一种家俱。传至日本后演变成为其传统房间“和室”内铺设地板的材料,成为日本家庭用于睡觉的地方,即日本人的床。.. ... 3×4 格形成的矩形,可以划分出 892 中不同的单元形式。多年来,设计人员使用网格,使得内容的呈现方式不重样——书籍, 杂志, 屏幕以及其它很多领域都是这样的, 同时变化多样的布局也非常美观。 3×4 格是一种常见的例子。然而,即使在这个简单的例子,也生成令人难以想象的多种形式。 Patch Kessler 用算法生成了下面的大图表,不仅为 3×4 网格,而且对任何 n×m 的网格。在 2006 年 Drenttel 和 Helfand 获得美国专利 7124360 ——计算机屏幕布局系统模块化的一种方法。榻榻米系统针对矩形矩形, 通过 3×4 的栅格(1×1,1×2,1×3,1× 4;2×2,2×3,2× 4;3 ×3,3×4 )),可以得到 3164 种分割方式。.. ... 3×4 栅格在 PAD 上的内容应用排版中被广泛应用,这种划分不多不少,更加符合视觉留白和视觉空隙的舒适。在分栏的规律上: 纵向和横向分割都有两分栏、三分栏和四分栏。图片或者标题可以跨栏呈现。这让标题与内容的视觉层次关系更加丰富。.. ... 在组合方式上: 不仅有常规的分割, 同时还有上下两层组合的可能。比如下图右下角的界面, 上下两层分别三分栏和两分栏。阅读这样的应用程序, 你会感觉跟阅读报纸一样, 同时你也会发现, 比阅读报纸更加轻松, 每一页的排版几乎不重样,翻阅这样的杂志探索感更加强烈。界面布局的新生力量大家都知道 metro UI 了,在 windows phone 7 的主屏,应用程序的入口组成了两列色块。这种信息分割的方式与榻榻米原理基本一致。这使得扁平化的信息界面有了一种自由、个性化的组合方式。.. ... iida INFOBAR A01 手机界面设计也延续这种设计思想。在手机的演示视频中,深度定制的 Androi d 手机将首页变成了