栅格系统延续美学

标签: 栅格 系统 美学 | 发表时间:2011-11-16 00:55 | 作者:blueui goochin
出处:http://ucdchina.com/rss/all
栅格系统应用于设计领域已经至少50年了。栅格化让眼睛浏览信息更加愉悦。从报纸、杂志,到手机界面,栅格系统全面渗透到各种信息传达的界面当中。我们从一个故事开始栅格系统探索之旅吧!
栅格系统的诞生
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就将这种分割布局关系用在日本建筑领域的榻榻米中。(榻榻米,旧称“叠席”,源于古代中国,是房间里供人坐或卧的一种家俱。传至日本后演变成为其传统房间“和室”内铺设地板的材料,成为日本家庭用于睡觉的地方,即日本人的床。http://baike.baidu.com/view/286931.htm)

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手机界面设计也延续这种设计思想。在手机的演示视频中,深度定制的Android手机将首页变成了应用模块的拼图。

有些应用区域带有实时信息,但你并不会觉得界面杂乱。

在图片浏览环节,这种分隔创造了更加自然有层次的展现方式。视频查看http://v.youku.com/v_show/id_XMjY3ODgyMjEy.html
后记:
对于一个UI界面来说,布局是设计的第一步,决定了设计方案的气质等等。而栅格系统经过五十多年的发展已经深入在UI设计领域的方方面面,并被证明拥有最合理的布局原理。希望这篇文章能够给你一个简单的启示。
参考资料:
http://www.cameronmcefee.com/guideguide/
http://thomasgaskin.com/1097344/3-x-4-Grid-Poster
http://www.robbiemanson.com/resources/960px-grid-templates/
http://www.thegridsystem.org/
http://www.dubberly.com/wp-content/uploads/2011/03/3×4variations-poster.pdf
http://www.mechanicaldust.com/Documents/Partitions_05.pdf
出自”百度MUX” By Blueui

相关话题:栅格设计 源地址:http://www.blueui.net/blog/?p=481

相关 [栅格 系统 美学] 推荐:

栅格系统延续美学

- goochin - 所有文章 - UCD大社区
栅格系统应用于设计领域已经至少50年了. 从报纸、杂志,到手机界面,栅格系统全面渗透到各种信息传达的界面当中. 我们从一个故事开始栅格系统探索之旅吧. 1692年,新登基的法国国王路易十四感到法国的印刷水平强差人意,因此命令成立一个管理印刷的皇家特别委员会. 他们的首要任务是设计出科学的、合理的,重视功能性的新字体.

壳系统

- Vernsu - It Talks-魏武挥的blog
经常有人被我问到“你用什么浏览器”时的答案是:傲游啦360啦,但事实上,这些都不是真正的浏览器,从技术角度讲,充其量只是在IE浏览器上加一个壳罢了. 在国外,壳浏览器是以“皮肤”的形式存在,纯属为了美化浏览器而用. 但在中国,壳浏览器成了一门生意. 奇虎的主要收入来源并非来自那个由于一场商战而赫赫有名的安全卫士,而是来自于360浏览器(它有两个版本,分别以IE和Chrome为内核).

秒杀系统

- - 开源软件 - ITeye博客
秒杀系统架构分析与实战. (反馈非常好的文章,推荐). (1)查询商品;(2)创建订单;(3)扣减库存;(4)更新订单;(5)付款;(6)卖家发货. (1)低廉价格;(2)大幅推广;(3)瞬时售空;(4)一般是定时上架;(5)时间短、瞬时并发量高;. 假设某网站秒杀活动只推出一件商品,预计会吸引1万人参加活动,也就说最大并发请求数是10000,秒杀系统需要面对的技术挑战有:.

Ext文件系统

- Haides - 博客园-首页原创精华区
  虽然从Ext2到Ext4,找数据的方式发生了变化,但是,磁盘的布局还是非常相似的. 其实这个东西也不需要变化,因为现在也没什么特别巧妙的方式,而且磁盘的吞吐量、效率的瓶颈也不在这里. 当然,这里排除那些根据自身文件特点设计的数据库,毕竟还是为了支持通用文件.   Boot在第一个块,放的应该是引导程序,超级块就放在了第二个块上,如果不是可以在mount的时候通过参数sb来设置.

HBase 系统架构

- - 博客园_首页
HBase是Apache Hadoop的数据库,能够对大型数据提供随机、实时的读写访问. HBase的目标是存储并处理大型的数据. HBase是一个开源的,分布式的,多版本的,面向列的存储模型. 5 可在廉价PC Server搭建大规模结构化存储集群. HBase是Google BigTable的开源实现,其相互对应如下:.

Linux系统监控

- - CSDN博客系统运维推荐文章
查看所有的进程和端口使用情况:. 查看nginx并发(连接数)进程数:. 查看当网络连接状态中,已建立连接的数量:. 查看系统tcp连接中各个状态的连接数. 输出每个ip的连接数,以及总的各个状态的连接数. df -hl 查看磁盘使用情况 . df -hl 查看磁盘剩余空间. df -h 查看每个根路径的分区大小.

mysql 权限系统

- - 数据库 - ITeye博客
mysql 权限系统控制一个用户是否能进行连接,以及连接后能够针对那些对象进行什么操作. mysql权限控制包含两个阶段. 2:检查用户是否具有所执行动作的权限. 本文实例,运行于 MySQL 5.0 及以上版本. MySQL 赋予用户权限命令的简单格式可概括为:. 一、grant 普通数据用户,查询、插入、更新、删除 数据库中所有表数据的权利.

银行核心系统-贷款系统【信贷系统】

- - ITeye博客
一、         贷款业务. 贷款按期限分为短期、中期与长期贷款,短期贷款是指期限在1年以内的贷款,中期贷款是指期限在1年(含1年)至3年(含3年)之间的贷款,长期贷款是指期限超过3年的贷款. 贷款的种类目前有个人助学贷款和个人住房贷款:. l     个人助学贷款:须提供两位担保人,无须质押物,贷款额度不超过人民币10万元.

理解Linux系统负荷

- Adam - 阮一峰的网络日志
如果你的电脑很慢,你或许想查看一下,它的工作量是否太大了. 在Linux系统中,我们一般使用uptime命令查看(w命令和top命令也行). (另外,它们在苹果公司的Mac电脑上也适用. 你在终端窗口键入uptime,系统会返回一行信息. 这行信息的后半部分,显示"load average",它的意思是"系统的平均负荷",里面有三个数字,我们可以从中判断系统负荷是大还是小.

iPhone通知系统改进

- armgod - 月光博客
  不管是对比 Android 还是 WebOS ,iOS 的通知系统都只能用低能来形容,也是最让用户不满意的地方之一. 简单列举一些iOS的通知系统不足的地方. 你必须记得是哪个程序通知的你,不记得的话就只能在满屏的 app 中找到上一条或者上几条通知,实在是一件痛苦的事情. 不管你现在做什么都会被打断,只要来了通知就弹出,并且置顶获取焦点,比如你正在玩切水果,刚要破记录了,来一个短信,游戏暂停,短信置顶,节奏都被打乱了.