这个术语来源于手风琴这种乐器，因为其风箱的每个部分可以向外拉伸。

手风琴面板同选项卡式界面相关，后者是水平排放的一列项目，其中只有一个项目的内容展开呈现在窗口中。

In a graphical user interface, an accordion is a vertically stacked list of items (e.g. labels or thumbnails). Each item can be “expanded” or “stretched” to reveal the content associated with that item. There can be zero or more items expanded at a time, depending on the configuration.

The term stems from the musical accordion in which sections of the bellows can be expanded by pulling outward.

An accordion is related to a tabbed interface, a horizontal list of items where exactly one item is expanded into a window

——–Wikipedia

手风琴面板的设计目的：

• 使互相关联的窗口统一起来
  
• 一次只呈现一个窗口，避免信息过载
  
• 未呈现的项目以标签形式/被遮盖形式显示，方便用户快速切换
  
• 所有窗口堆叠在一起，使空间得到有效利用
  

下面是几种常见的手风琴面板形式：

形式一：左侧箭头。由向右和向下的箭头组成。向右表示折叠状态，向下表示展开状态。根据结构的不同，可同时展开0至多个面板。在下面的例子中，例1可同时展开0-1个面板；例2中，可同时展开0-多个面板

形式二：左侧加减符号。加号表示收起状态，减号表示展开状态。根据结构的不同，可同时展开0至多个面板。

形式三：无箭头指示，但鼠标会有触发行为。在下面的例子中，例1是鼠标直接滑过触发展开收拢面板；例2鼠标滑过会使面板变色，点击后触发展开收拢。同时展开1个面板

形式四：右侧箭头。以上下箭头表示收起展开状态。向上箭头表示展开状态（可收起），向下箭头表示收起状态（可展开），不过也有相反的，如下图例3，上下箭头分别表示收起和展开状态

大会上午半场主要是UI AWARD2010总决选暨中国用户体验设计高峰论坛，下午是2010首届移动娱乐应用大赛。名字都很长，很难记，体验不好，呵呵。本来以为今天会宣布获奖名单，后来才知道最终获奖名单会在将来台湾的一场大会上宣布。

现场使用QQ影音播放器播放各参选作品视频，却频繁出现格式不支持，无法打开之类的错误，很多选手的作品都没能得到充分展示，不过主办方承诺会后所有提名作品视频都会重新整理后放到土豆上。主屏幕右侧的小屏幕上是特意为现场会议准备的新浪微博展示，鼓励大家现场发微博参加抽奖活动，只可惜微博延迟比较严重。大概因为是第一届，经验不足，会议准备还是不够，不过UIRSS的Hiboo徐海波真的是忙前忙后，挺辛苦的。

不管怎样，有幸在现场听到移动，腾讯CDC，盛大，搜狐，EICO等等设计团队的演讲，还是挺受益的。

坐在我前面的两位成都朋友也都入选了个人组提名，只可惜两人的作品视频QQ影音都播不出来，先在这儿给来自家乡的选手加油，预祝他们最后能胜出。

简单放几张照片，更多入选作品请自行前往UI AWARD2010官网或者UIRSS查看

大会现场

主屏幕右边的微博屏，时不时出现一点不和谐内容。左边腾讯CDC主管正在讲着，右边屏幕上出现这么一条：腾讯最近出了个葫芦娃大战群妖的Webgame，很山寨啊！哈哈

来自台湾的智慧型互动更衣室，这个更衣室能记录你的喜好和过去的购买或者试穿历史，还能根据你的需求自动变换更衣室环境和音乐，很概念化的一个设计。这回台湾的作品都挺出彩的，一个是交互的概念更多延伸到了日常环境，比如商场，比如家居，另外还有个动画短片《神画》也赢得了大家的赞许，点击去这里观看

Fluid 960 Grid System

The 1KB CSS Grid

一个非常轻量级的栅格系统，简单易懂。可定制，但默认宽度只能是960px.

Variable Grid System

基于960栅格系统的一个简单灵活的CSS栅格生成器。

Grid-Based Design Gallery

如果你对960栅格系统仍持怀疑态度，或者想知道栅格化设计能够给作为网页设计师的你带来什么，那推荐你看看这个设计集。正如你所看到的那样，只需要一点点想象力和独创性，没有什么不可能。

Typogridphy

一个方便网页设计师和前端工程师快速建立适合印刷的栅格布局的CSS架构

Tiny Fluid Grid

这是上面提到的那个1KB CSS Grid的栅格生成器

格子之外

无可否认，即使960GS有再多的可能性和灵活性，你也会发现它的局限性。没人要求所有网站必须建立在栅格之上，这会导致普遍的创造力缺失和页面布局的单一。

当你尝试使用960GS，你会发现有许多种打破布局的方法，这会促使你重新思考你的设计。

960栅格系统同其他任何相似的系统一样，它们只是提供了一种强大的根基，很多时候你会发现建立一个网站，你不需要打破那些基础的模型也能创新，而你需要的是更清晰更有逻辑地传达信息，以一种广大用户更熟悉的方式。

类都简单根据它们的大小来命名，grid_1是最窄的，grid_12是最宽的（16栏中grid_16是最宽的）。

重新再来看上面那两张图，不过这次不要考虑宽度，想想它们各自所代表的CSS类。

这样的命名系统使它能在短时间内搞定复杂的布局。要填充一个页面的宽度，只需要记住类的数字加起来等于12（12栏）或者16（16栏）就行了。

比如说，使用12栏的版本，如果需要3个并排的文字分区形成3栏式布局，只需要为每一个分区赋予grid_4的类使它们加起来等于12.

相同的，如果采用16栏版本，想要4列并排的布局，那也是每列赋予grid_4的类，加起来等于16.

为了确保调用正确，记得把你放12栏元素的div加一个名为container_12的类，同样为16栏元素的div加一个名为container_16的类。

如果你从来没有用过960栅格系统，我相信你现在一定已经明白原来使用栅格系统快速建立布局是如此简单的事。

左右移动

通过push和pull CSS class，可以实现横向的移动每一个栅格系统里的元素。

以下面两个布局为例，前一个是标准的使用grid_3 class的4栏布局，后一个则是分别对第一列使用了push对最后一列使用了pull的效果。

你可以随心所欲定义移动的长度，如果想向右移动2列，那就是push_2,以此类推。

push/pull的设定对用html来呈现页面也有很大的影响。

举个例子，在下面这个布局中，想像logo处是网站的logo，它是整个页面上的第一个元素。作为页面上最重要的元素，你希望在html里把它放在首位。但视觉上，你又希望它呈现在页面的顶部中间。

在使用push/pull之前，

如果要使logo在视觉上居中，你需要这样写：

<div class=”grid_6 push_3″>
<p>logo</p>
</div>

<div class=”grid_3 pull_6″>
<p>text column</p>
</div>

<div class=”grid_3″>
<p>text column</p>
</div>

<div class=”grid_12″>
<p>big box</p>
</div>

然后你就得到了这样的布局：

既保证了logo在html中居首位，又保证了视觉上logo居中。

大片空白区域

你会发现你经常希望创建一些空白区域，这时候你可以使用prefix和suffix的class，使用方式和push/pull相同。

比如你想在一个元素前留下一列宽的空白区，就用prefix_1的class，如果空白在后面，就用suffix_1.

上面是用了suffix_3在grid_6之后创建了一个宽度为3列的空白区。

开始和结尾

最后一点，你可能会用到alpha和omega类，表明栅格中的子栅格，alpha是第一个子栅格，omega则是最后一个。本质上，这些类提供了合适的外边距，方便在栅格之间再构建栅格单元。

回顾一下

学完上面这些内容，你现在可以称之为一个960栅格系统专家了。

有5个概念你需要记住：

1.  12格使用container_12的类,16格使用containeer_16的类。

2.  使用class grid_1,grid_2,grid_3…来设定你的列宽，如果想横向填满页面，确保数字加起来等于12或16.

3.  使用push/pull来单独移动每个栅格，不会影响到html里写入的位置。

4.  使用profix/suffix来创建空白区域。

5.  使用alpha/omega为嵌入的栅格设定外边距。

960栅格系统里同样包含一份CSS Reset，它是基于更为流行的Eric Meyer CSS reset创建的，如果你喜欢就留着，不喜欢就扔了吧。

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

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

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

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

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

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

有点意思，摘记下来。