为什么我需要一个网格系统？

960栅格系统和其他类似的工具提供了快速简便的方法来用CSS创建基于网格的布局。它们提供经过跨浏览器测试后的优化的预设列宽来给你放进内容。

在CSS3之前，要想不通过冗长的数学运算就把页面分好栏，几乎不可能。

例如，如果你有一个1000像素宽的容器，你想分成三列，那每栏就是333又1/3像素（不是个舒服的整数）。此外，这样分出来的列会彼此撞上，因此又需要每边加上外边距。如果每列设定一个10px的外边距，就必须把每列的宽度各减少20px。这样就是3列，每列313px，加上每边10px的外边距。即便如此，整个的宽度也只有999px，而不是1000px.

3栏下面又想分个4列，那你就得从新算过。从1000px里减去外边距的80px，再把剩下的920px除以4，得到每列宽度230px.

最后，如果你想给页面加上一个占页宽1/3的侧边栏，你需要给你的内容区留下750px，侧边栏250px，减去外边距40px，得到一个730px的内容区和230px的侧边栏。

晕了么？

别的设计师也这样晕过。当然这不是什么复杂的火箭科学，但你一定不会想在接手每个项目后一遍遍重复这个过程。

解决方案？找别人来搞定这些疯狂的列宽，把它们全丢进CSS文件里，你只需要免费下载就行了。（这个人正是Nathan Smith，960栅格系统的创建者）

960栅格系统

960栅格系统，简单来讲，就是用960宽度的网格来布置网站的方法。

使用960宽度的原因在于，考虑进列宽和外边距的因素后，以960来分，可以得到多种干净的整数列宽。而且，它在大多数屏幕上有不错的现实效果。

960栅格系统有两种主要变体：12列格和16列格（24列格也同样包含在内，以便万一有额外的需要）。

在12列的版本中，最窄的列宽为60px，之后每列增加80px.

因此，可用列宽为60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860和940.

同样的，在16列的版本中，最窄的列宽为40px，之后每列增加60px.

可用列宽为：40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700, 760, 820, 880和940.

（待续。。。）

最近在学习栅格系统（网格系统），找到这篇文章，挺有帮助，打算分成几次翻译过来。

——————————————————————————————————–

译自Jacob Gube的The 960 Grid System Made Easy

第一次发现960栅格系统这个东东时，我很兴奋，觉得用它可以轻松地实现各种复杂的布局。

但因为我当时是刚接触网页设计，当我下载完栅格系统的文件，很快就被它吓到了，因为它看上去真的挺复杂。

这么多的代码，要创建一个页面怎么可能简单呢？

这篇文章给那些对栅格系统感兴趣但又对它无从下手的设计师和前端开发人员。

这里主要探讨960栅格系统，但我相信，读完这篇文章，你会发现其他类型的栅格系统也都是相似的，基本原理都是相通的。

栅格化设计

在我们进入具体的960栅格系统之前，先让我们简单讨论下栅格化设计。其实栅格化设计的概念并非起源于网页，它源于一个古老的非常基础的设计原则：对齐。

我们的大脑喜欢把事情简单化，使他们容易理解的。这就是为什么我们试图给混乱强加上一定的规律，就像看月球上环形山时我们会说看到一张脸。

我们附加的规律越简单，大脑就可以越快辨别出模式从而快速理解。 网格是如此有组织，有秩序，他们几乎不需要我们的大脑去做思考和解释。

比较下面两种页面布局：

虽然这两个布局都是简单的矩形集，但上面那个根本上要优于下面那个。我们可以立即识别模式，接受它，然后继续前进。

下面那个布局，相比而言就要混乱很多。没有明显的模式，规律，或目标，看上去就像一堆随机的形状集合。

我们的眼睛有一种倾向，一边疯狂寻找瞬间片段，一边又要试图找出一种趋势，这增加了接收整个场景的时间。

值得注意的是，随机也可以美丽。在自然界，艺术甚至设计中，随机或者说无序都有它的一席之地，但要合乎逻辑地组织信息，随机显然就不适用了。

重点在于，网格是创建页面秩序最简单最强的方法之一。他们可能看起来有些冷酷和僵硬，但要记住，它们都是非常快捷有效的，甚至可以很灵活，只要你不要让自己的想象力陷在这些必要的框框里了。

今天看到这两个图，真的是非常形象：

先是官方设计流程：

然后是实际感受到的流程：

原文链接 作者：Brandon Schauer

1. 你可以影响你的用户，但不能控制他们。

* 从管理的角度，你无法控制除你之外的任何人。但你可以影响任何人
* 网络公司应该放弃一种想法，那就是在网站和应用上控制自己用户的体验
* 在网络上，完成就是点一下鼠标那么简单，当用户需要的时候，他们会自然而然地使用后退键
* 别再试图控制一种用户体验，应该把重心放到通过为用户创造价值，通过满足用户需求同时实现商业目标的活动来影响人们的行为

2. 网络应用是数字产品。把它们当成数字产品去思考和设计

* 网络的第一次浪潮是实体公司和机构的数字化代表。因此占主导的行为是移动：从一个地方到另一个地方
* 在第二次浪潮中，购物车在各处出现，使实物商品的在线数字化操作成为可能
* 现在商品本身就是数字化的了。网络应用成为公司营销的产品
* 作为数字产品，他们需要包装，需要设计第一次体验，需要考虑消费者的生活周期等更多的因素

3. 谁能最好地描绘出问题所在，谁就最有可能解决问题

* 在今天的数字化世界里，某种程度上，搞清楚机构或用户面临的问题比找到解决方案更有价值
* 然而一心想着提供解决方案的人却比试着搞清楚问题所在的人要多得多
* 通常，一群聪明人长时间陷入死胡同，并非因为他们的解决方案不好，而是因为他们没有找到问题的要害
* 最重要的是，一个描述清楚而又令人兴奋的问题（以及相关的限制条件）是推动设计进行的催化剂

4. 在一个屏幕上有许多种摆弄像素的方法，但并非所有都是设计

* 决策用户界面，方法不只一种
* 设计：决策评估的标准是看能在多大程度上体现整合的“以人为本”的体验。这是大多数设计师都渴求的一种评估模型，因为这能衡量他们理解用户和整体思考两方面的能力。设计聚焦于理解一项应用的根本意图，然后以用户可以理解和使用的形式把它实现出来。在这样一种模型中，对用户而言“说得通，能理解”的体验成为了标准。这种方法常见于新产品的开发中。
* 优化：决策建立在明确测试引发特定行为的孤立变量上。设计师做出同一控件的多种版本，经过系统性地评估，测试表现最佳的元素成为用户界面的一部分。在这一模型中，性能是决策的标准。成熟的产品（特别是现金牛类产品）经常采用优化模型，团队里的设计师大部分时间会花在产品关键元素的迭代上。
* 管理：通过讨论或辩论达成决策。在这一模型中，设计师将团队的集体决定体现在产品中，这些决定是项目团队全体通过的。一致性和认同是评判成功的标准。
* 需要指出的是每种模型的过程都可以作为其他模型的参考来源。比如，明确的测试有利于形成整体性的设计，健康有益的辩论能形成供测试的多种版本，从而优化产品。区别各种模型的关键在于最后决策评估的标准：全局性的客户体验，还是最佳性能，或者是一致的意见。

5. 什么形成用户体验?

* 信息架构定义了信息的结构（可以以多种形式存在）
* 交互设计使人们能够操作或创造或完善你希望传达的信息
* 视觉设计向用户传达这种交互的可能性，吸引用户的注意，激发用户进行交互。
* 用户体验就是这些因素的总和
* 有些人可能认为“信息”这个说法在这些定义里有点窄，我也同意。所以如果你想要表达更宽的概念，可以用“东西”来简单代替

6. 不要只想着你自己网站的用户使用情境，想想整个网络的使用情境

* 在今天社会化的，分布式的，搜索驱动的网络中，用户访问网络内容的途径越来越多，方式也越来越不同，体验也因此变得多样化
* 然而当人们在访问大多数网页时，他们的体验并非是预设情境中最优化的。
* 大多数内容性网页都更多关心本身的使用情境，较少关心用户的使用情境：用户从哪儿来，要到哪儿去？

7. 视觉设计不仅仅是把东西变得好看

* 虽然很少有人表面上只要求设计团队把东西变得好看，但长久以来都有种潜在的论调，认为视觉设计就是蛋糕上的装饰物。
* 大概这种理论源于工业时代大众对设计的理解。在那时，产品开始形成前所未有的风格，而像Raymond Lowey这样的工业设计师也得到了巨大的荣誉，因为他们能将过去无趣呆板的产品变得具有审美趣味。
* 视觉设计固然有美化产品的能力，但它所具有的同用户进行交流的潜能才是比好看的外表更核心的东西。
* 通过对页面元素的视觉化组织，设计师可以向用户传达关键的信息，回答用户的疑问：这是什么；我该怎么用；我为什么要用
* 回答这些问题是效用和可用性至关重要的部分，特别是对于交互产品
* 所以在设计网页时，记住视觉设计最初的功能角色非常重要。页面的视觉设计应该通过向用户传达设计所包含的信息来建立最初的期望值；提供能够快速获取信息的方法以帮助用户定位有价值的部分

8. 组织，交互和表现方式是任何网页设计或者应用设计最关键的考虑事项

* 组织就是通过结构化处理以形成一项应用。交互是应用对用户行为的反应——关系到如何在一个应用中利用各种元素。表现方式则是关于所有这一切如何传达给用户。
* 在这样的模型中，不难看出，表现层需要成为交互设计和信息架构的代言。它需要传达产品的可能性和局限性，但同时视觉设计还有另外一种（更本能的）角色。
* 对颜色、字体、图片、样式等等深思熟虑的选择，能引发情绪反应以强化特定品牌的形象。换一句话说，它能给予一项产品恰当的个性——有趣，安全，关怀或者其他。

9. 成为敏捷的一环

* 在19世纪的手工业经济中，地方市场充斥着铁匠、陶工这样的个人或者家庭手工艺人。这些行业需要创造力，规模很小，或者说根本算不上规模，也不需要太多协同劳动来生产产品。
* 20世纪的工业经济，小型工匠让位于大型工厂。对产品进行严密控制的需求也随着工厂规模的提升而增加。为了生产整齐划一的产品，需要许多协同劳动，发达国家因此出现了大规模的装配线。结果，只需要少数人有创造力，大多数工人在系统中都有固定的角色，稳定和可靠胜过别的一切。
* 21世纪的经济中，创造力重新成为价值的关键驱动，因为命令和结构控制再也无法应付全球化背景下所有的信息和决策需求。这就产生了企业中对于“敏捷环节”的需求， 这一环节能合作性地领导业务的各个方面。这一领导地位通过获取大量数据和技术得以确立。要利用这些信息和工具来实现企业的目标，需要创造力。
* 创造性思考的重要性和企业中对“敏捷环节”的需要正好有助于发挥一些设计师的强项，这些设计师对于识别样式，整合信息，通过各种视觉方法传达信息了熟于心。

10. 设计能为战略决策提供独特价值

* 以下技能是设计师在战略工作中所能发挥的独有技能：
* 模式识别：让我们能辨明信息之间的关系（数据能力）
* 讲故事的能力：通过关注大的概念和辅助性的信息把零散的数据组织成对用户而言有意义的东西（整合能力）
* 视觉层级：把故事讲得有效（方法 the means）
* 移情：把故事讲得难忘，讲得有影响力（意义 meaning）

本文收录在 “101 Things I Learned in Business School”（商业学校教会我的101件事）中，英文原文地址：http://www.lukew.com/ff/entry.asp?1133

在费城的Web App Masters Tour上，PA Mark Trammell介绍了Twitter让新用户变成忠实回头客的方法。其间谈到了产品服务的三种层次，分别以磁铁，钩子和胶水来形容。

磁铁：吸引人们去使用某种产品，但无法留住他们。以Twitter为例，名人就是Twitter吸引人们来访的一个强力磁铁，但人们往往不会因此就选择留下

钩子：会把离开的人重新钩回来。家庭成员之间的联系和各领域的专家让人们真正迷上了Twitter

胶水：混合着新闻与消息来源，名人，亲朋好友和本地化商业信息的胶水，只要混合比例适当，才能最终真正粘住用户。

有点意思，摘记下来。