在图形界面设计中，手风琴面板是垂直堆放的一列项目。每个项目可以”展开”显示其中的内容。根据结构的不同，同一状态下可以有零个至多个项目被展开。

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

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

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，上下箭头分别表示收起和展开状态

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

英文原文链接：http://pewresearch.org/pubs/1602/new-media-review-differences-from-traditional-press

新闻在今天已经越来越多地成为一种分享的，社会化的体验。尽管大多原始报道还是来自于传统新闻记者，但技术使大众行为决定新闻的总体影响力成为可能。对一些成功的新媒体内容的研究或许可以告诉我们，在网络时代，媒体用户到底喜欢什么样的内容，什么内容是他们不太感兴趣的？不同新媒体平台的相互作用是什么样的？新媒体的内容和主流媒体有什么差异？

美国皮尤研究中心分析了一年来博客和社会化媒体页面上最热门的新闻数据，7个月twitter数据，以及youtube一年以来新闻相关的最热视频。

以下是主要结论：

1. 社会化媒体和主流媒体在内容上有明显区别。在研究的49周内，博客和传统媒体的头条新闻只有13周内容相同；Twitter更少，只有4周相同；Youtube为8周。

2. 社会化媒体的新闻往往在首发报道的一小时内引起用户关注，同样关注流失也很快。Twitter上，只有5%的前5条热门新闻能维持到下周的热门榜上；这个比例在博客上是13%，在Youtube上是9%. 而在主流媒体中，50%的前5条头条新闻一周后仍然是热门。

3. 政治新闻在博客和Youtube上找到了立足之地。在博客上，一周中有17%的前5条热门新闻是关于美国政府或者政治的，通常这些新闻都包含强语气的个人分析或者评价。这些话题在Youtube上更加流行,占到了所有新闻内容的21%. 然而在Twitter上，科技新闻比任何其他新闻都更多地被引用，占到了一周中前5条热门新闻的43%，以及整个热门事件的41%；相比之下，传统主流媒体中，科技新闻只占到了1%

4. 尽管社会化媒体同主流媒体的内容有明显差异，博客内容仍然严重依赖于传统媒体，而且本质上信息来源都是那么几个。超过99%的博客新闻都来自于报纸或者广播网络，而这当中，BBC, CNN, 纽约时报和华盛顿邮报这四者就占了来源的80%

5. 相比而言Twitter同传统媒体的联系就没有那么紧密。50%的twitter链接链向传统媒体；40%链至Mashable和CNET这类网络独有的新闻来源；剩下10%是网上的专线报道或博客等非新闻资源，比如一个叫”Green Briefs“的博客，在6月期间每天发布伊朗示威的最新进展

6. Youtube上最热门的新闻视频具有国际化的倾向。26%的最热新闻视频是国际事件，特别是那些具有强视觉冲击力的新闻，这可能是因为视频本身比起单纯的文字可以在一定程度上跨越语言的障碍。名人视频和媒体焦点视频同样也受到很强的关注。

一些数据：

不同媒体平台的热点新闻主题

新闻主题覆盖：博客 vs. 传统媒体

博客新闻来源

很好的一份PPT，记下。

The best video I’ve seen this month. “Hi,” created for design and technology event, Multitouch Barcelona. Filmed at hangar, and music by Lullatone. The concept is just well-thoughout, original, and a joy to watch on video.

信息来源：scene360