什么是Ribbon UI？

Ribbon UI，是新的 Microsoft Office Fluent 用户界面 (UI) 的一部分。在仪表板设计器中，功能区包含一些用于创建、编辑和导出仪表板及其元素的上下文工具。它是一个收藏了命令按钮和图示的面板。它把命令组织成一组”标签”，每一组包含了相关的命令。每一个应用程序都有一个不同的标签组，展示了程序所提供的功能。在每个标签里，各种的相关的选项被组在一起。Windows Ribbon是一个Windows（Windows Vista/Windows 7）自带的GUI构架，外形更加华丽，但也存在一部分使用者不适应，抱怨无法找到想要的功能的情形。

根据微软公司的调查统计，虽然Windows Explorer提供了近200种的功能，但调查结果显示，最常用的10个功能的使用时间，竟占了全功能使用时间的81.8%，其中前五位的功能分别是粘贴（19%），属性(11%)，拷贝(11%)，删除(10%)以及更改文件名(8%)。鉴于这种现状，Windows 8开发团队决定在Windows Explorer中导入Ribbon UI，以帮助用户更有效率的执行各种常用的文件操作。

Windows8消费者预览版发布之后，针对“Ribbon”界面这一设计反馈如何呢？微软官方做了一个有趣的调查，看看用户对Win8消费者预览版中的“Ribbon”界面究竟是何评价。

微软去年八月份就曾撰文介绍Windows8中资源管理器的“Ribbon”界面，可以提供更多功能；鉴于“Ribbon”界面屡占窗口空间，并给人以“头重脚轻”的感觉，Win8默认将“Ribbon”界面隐藏起来；但同时也有用户喜欢这一设计，可以便于获取更多的功能和快速操作。调查结果显示，有22.5%的用户在Win8消费者预览版中将“Ribbon”界面设置为展开状态（默认隐藏），并一直保持为展开。

Ribbon是可一键折叠的。点击右上角的箭头图标，就会收缩成如下形状：

选中磁盘后：以前需要右键->属性->磁盘清理，现在只需要点击[Disk Tool]中的[Clean Up]。

在Microsoft office应用程序中，Ribbon用户界面(UI)功能替代了当前系统的层级菜单、工具栏和任务窗格，使得系统界面更简单，更易找到命令，使用更有效率。Ribbon可扩展性(RibbonX)引入了一个创新的模型，可以增强用户体验。使用可扩展标识语言(XML)和几种传统的编程语言之一来操作组成RibbonUI的组件。

跟传统的菜单式用户界面相比较，Ribbon UI界面的优势主要体现在如下几个方面：

所有功能有组织地集中存放，不再需要查找级联菜单、工具栏等等 ；

更好地在每个应用程序中组织命令；

提供足够显示更多命令的空间；

丰富的命令布局可以帮助用户更容易地找到重要的，常用的功能；

可以显示图示，对命令的效果进行预览，例如改变文本的格式等；

更加适合触摸屏操作；

虽然从菜单式界面到Ribbon界面有一个漫长的熟悉的过程，但是一个不争的事实是，Ribbon界面正在被越来越多的人接受，相应的，越来越多的软件开发商开始抛弃传统的菜单式界面，转而采用Ribbon界面。

Ribbon UI 分析：

Ribbon的菜单和按钮主要集中在程序最上方，以tab和分类的形式展现，功能的布局很有条理。某些按钮平时是隐藏的，只有需要用时才会自动出来。此外，据微软称，Ribbon专门为1024X768的分辨率做过优化。之前的ALT+F组合键打开程序菜单的方法依然有效。

Office Ribbon功能区：

Microsoft Word从Word2007升级到Word2010，其最显著的变化就是使用“文件”按钮代替了Word2007中的Office按钮，使用户更容易从Word2003和Word2000等旧版本中转移。另外，Word2010同样取消了传统的菜单操作方式，而代之于各种功能区。在Word2010窗口上方看起来像菜单的名称其实是功能区的名称，当单击这些名称时并不会打开菜单，而是切换到与之相对应的功能区面板。每个功能区根据功能的不同又分为若干个组。

1．“开始”功能区

“开始”功能区中包括剪贴板、字体、段落、样式和编辑五个组，对应Word2003的“编辑”和“段落”菜单部分命令。该功能区主要用于帮助用户对Word2010文档进行文字编辑和格式设置，是用户最常用的功能区。

2．“插入”功能区

“插入”功能区包括页、表格、插图、链接、页眉和页脚、文本、符号和特殊符号几个组，对应Word2003中“插入”菜单的部分命令，主要用于在Word2010文档中插入各种元素。

3．“页面布局”功能区

“页面布局”功能区包括主题、页面设置、稿纸、页面背景、段落、排列几个组，对应Word2003的“页面设置”菜单命令和“段落”菜单中的部分命令，用于帮助用户设置Word2010文档页面样式。

4．“引用”功能区

“引用”功能区包括目录、脚注、引文与书目、题注、索引和引文目录几个组，用于实现在Word2010文档中插入目录等比较高级的功能。

5．“邮件”功能区

“邮件”功能区包括创建、开始邮件合并、编写和插入域、预览结果和完成几个组，该功能区的作用比较专一，专门用于在Word2010文档中进行邮件合并方面的操作。

6．“审阅”功能区

“审阅”功能区包括校对、语言、中文简繁转换、批注、修订、更改、比较和保护几个组，主要用于对Word2010文档进行校对和修订等操作，适用于多人协作处理Word2010长文档。

7．“视图”功能区

“视图”功能区包括文档视图、显示、显示比例、窗口和宏几个组，主要用于帮助用户设置Word2010操作窗口的视图类型，以方便操作。

8．“加载项”功能区

“加载项”功能区包括菜单命令一个分组，加载项是可以为Word2010安装的附加属性，如自定义的工具栏或其它命令扩展。“加载项”功能区则可以在Word2010中添加或删除加载项。

Ribbon UI的历史

Ribbon主要来自于此前的Office组件。当时由于原有的界面已经过时，并且用户抱怨经常找不到要用的功能。因此微软寻求各种方法用于代替传统的基于菜单和工具栏的界面。在进行了大量的测试之后，微软的程序员找到了如今我们熟悉的Ribbon界面。

Metro是由微软公司开发的内部名称为“typography-based design language”（基于排版的设计语言）。最早出现在微软电子百科全书95，后来的产品如：windows媒体中心、Zune播放器都有用到这项技术。该技术已于2010年初（美国）获得Metro UI专利批准（USPTO）如今该技术被引入到微软最新开发的Windows Phone操作系统和已经发布的Windows 8预览版以及Office15中。

Metro UI是一种界面展示技术，和苹果的iOS、谷歌的Android界面最大的区别在于：后两种都是以应用为主要呈现对象，而Metro界面强调的是信息本身，而不是冗余的界面元素。显示下一个界面的部分元素的功能上的作用主要是提示用户“这儿有更多信息”。同时在视觉效果方面，这有助于形成一种身临其境的感觉。

Metro设计的起源：

Metro基于瑞士平面设计的设计原则，本设计原则在Windows XP的Windows Media Center中有体现，这有利于以文字为主的界面导航。2006年，Zune开始使用类似Metro的设计风格。微软的设计师计划重新设计现有用户界面、更清爽的排版和较少的重点以便于用户使用。Zune的电脑端配套程序也使用了不同于以往Portable Media Center用户界面的清爽排版和设计。

Metro的设计意念来源于交通局巴士站站牌机场和地铁的指示牌给了微软设计团队灵感，设计团队说Metro是来源于美国华盛顿州金县都会交通局（King County Metro）的标识设计，其风格大量采用大字体，能吸引受众之注意力。微软认为Metro设计主题应该是：“光滑、快、现代”。Metro的图标设计也会不同于Android和iOS。

Metro UI设计具备以下五点原则：

1. 干净、轻量、开放、快速
2. 要内容，而不是质感
3. 整合软硬件
4. 世界级的动画
5. 生动，有灵魂

Metro瑞士平面设计风格概述:

20世纪50年代期间，一种崭新的平面设计风格终于在联邦德国与瑞士形成，被称为“瑞士平面设计风格”，由于这种风格简单明确，传达功能准确，因此很流行与全世界，成为二战后影响最大，国际最流行的设计风格，因此被称为“国际主义平面设计风格”。瑞士平面设计风格稳健，四平八稳的传达设计，给人印象深刻。不少人认为瑞士风格是一个统一的、单一的风格，瑞士设计家大部分不同意这种看法，他们往往强调瑞士国家虽然小，但是设计风格变化多端，极为丰富。

Windows 8看Metro风格IE 10视频

微软IE10浏览器，在开发过程中使用了最新的HTML5和JavaScript改进。etro是微软内部代码的一种名称，主要用于界面设计。这种俗称为“方块和文字（tile and text）”用户界面，对于其他产品微软也将采取类似的做法。

Metro UI界面：

Metro现状：

Metro是微软在Windows Phone中正式引入的一种界面设计语言，也是Windows 8的主要界面显示风格。在Windows Phone之前，微软已经在Zune Player和XBox 360主机中尝试采用过类似的界面风格，并得到了用户的广泛认可。于是，微软在新发布的Windows Phone、已经发布的Windows 8预览版以及Office 15、Xbox live中也采用了Metro设计，今后的微软产品中将更多的能看到Metro的影子，而更少的看到传统的Windows视窗界面。

“Windows8”推出的一个专为触摸而设计的最新Metro风格界面，能向用户显示重要信息，这个界面同时支持鼠标和键盘，并应用于平板设备。Metro风格界面设计风格优雅，可以令用户获取一个美观、快捷流畅的 Metro 风格的界面和大量可供使用的新应用程序。这些应用程序拥有远远超出图形设计范畴的新特性（一个平台）。正如微软所展示的那样，通过出色的触控体验，同时又可以使用鼠标、触控板和键盘工作。如果用户希望永远沉浸在Metro界面中，那么将永远不会看到桌面，除非刻意选择，否则系统甚至不会加载它，这样的Windows 将焕然一新。将在Windows8中开放的Windows应用程序市场（类似于iOS里面的App Store）也使用并推荐采用Metro风格界面的应用程序。

2012年10月随着WP8与Win8的发布，微软在提及Windows8全新开始屏幕（Start Screen）时开始使用 “Metro(新Windows UI)”设计一词。

Metro风格的应用是针对你的用户需求而设计的全屏幕应用程序。他针对其所运行的设备所设计，针对触摸屏幕及Windows用户界面优化。Windows帮助你与你的用户进行交互，从而使用户与你的应用产生互动。

针对你的用户所设计的应用

当用户使用Metro应用时，他应该能体验到：

沉浸式：你的Metro应用应该是全屏幕的，让用户沉浸在你所创建的体验之中。在这种全屏体验中，用户能极力享受到他所喜爱的内容。为了充分展示你的内容，我们移除了不是必须的操作系统的边框。你的应用程序就是Windows的核心体验。请充分利用屏幕的空间来设计你的应用程序，但不要让他过于杂乱。让用户专注于他需要专注的任务之中。

增进与活跃：你的Metro应用能帮助用户找到他们关注的信息。Live tiles的更新帮助用户在第一时间找到有用的兴趣，并引导用户进入你的应用程序。

活动方格设计：在Metro界面中，应用都以可以翻转的方形图标的形式呈现在主界面中。他们就好似是多宝格中的 “收藏品”一样，每一个应用都会给用户爱不释手的感觉。可翻转的图标，同时又印证了多宝格精致的机关设计，给人以一种不断幻化的新奇感。让人忍不住去探索 Metro UI中的各种内容。

开始画面帮助展示你应用最好的一面。App tiles上呈载了实时的状态与更新，来鼓励用户进入你的应用。当我们设计tiles，我们应当：

1、突出你的品牌。app tile能帮助你视觉化你的品牌。应当设计得有足够吸引力以及与其它应用的差异化。

2、在app tile上尽可能的展现用户关注的信息以及更新。你会寄希望于用户经常来查看你的tile，查看最新的应用中的更新。你寄希望于这些更新能吸引你的用户点击使用你的应用。考虑周全的信息设计能充分增进你的用户与应用的联系。

Hotmail Metro官方配色：

为多任务而设计:

当应用程序全屏幕运行时，Windows同时也能支持多任务操作。

1、Snapped View。用户喜欢同时做多件事情。他们希望使用你的应用时同时还能聊天、上网、看视频或其它，所以请让你的snap view能满足用户的需求，同时在Snap以及非Snap状态时能流畅的切换。

2、Filled View。用户可能将其它应用作为Snap View而把你的应用作为Filled View。注意考虑到水平方向减少面积时你的应用如何更好的适应。

Win8启动界面

配合Firefox OS智能手机2013年初将巴西上市。最近几个月的Firefox OS测试版的实际体验，已经和当初设计基本接近了，而且设计稿也不再是秘密。现在又有15张新的实体概念设计图被Mozilla分享出来。让我们来看一看Firefox OS在细节上的调整和更新吧：

中兴firefox原型机演示视频。

Firefox OS精致图标

Firefox OS待机界面浏览器打开页

Firefox OS锁屏和时钟

Firefox OS音乐列表和播放器

Firefox OS图库和FM收音机

Firefox OS概念设计UI界面高清大图>>>

用户活跃度是检验产品成功与否的重要指标之一，传统行业的商家极为重视门面的装潢，因为一个好的门面可以聚集人气，招揽更多的顾客。古时候的大户人家院子门口的石狮子或其他的摆件的摆放极为讲究，有一定的风水学说道理，更能彰显主人家的身份地位.由此可见，“门面’就如人的脸面之于人的形象一样重要，而WEB的登录页面就相当传统的“门面”。

现在越来越多的大型网站把登录和首页放在一起设计，由此可见登录页面的重要性，一个出彩的登录界面，将提升产品的品质，赋予产品独特的气质，登录界面也是一个发挥情感化设计，提升用户体验，拉近与用户之间距离的兵家必争之地，本文不谈趋势，不讲交互大道理，不涉及技术，就侃侃用户登录页面的一些设计表现形式。希望这些设计表现手法能给大家带来一些启发和灵感。

优雅大方

如果说iPad是介于传统电脑和手机之间的产品，那么tumblr则是介于blog和twitter之间的服务。相比twitter，它的功能更复杂、内容展示性更强、更加重视多媒体的应用。Tumblr做为轻博客的鼻祖，带来一种全新的视觉体验， 安东尼·德·圣-埃克苏佩里曾说过，“完美就是多一点则太多，少一点则太少。” Tumblr的登录页面没有过多的视觉干扰，优雅大方，一切元素的存在都是为了用户更好的登录，登录过程非常流畅。

精致的质感表现

iCloud是苹果公司所提供的云端同步服务，用户有5GB的免费存储空间。 负责Macintosh用户界面设计的柯戴尔·瑞茨拉夫回忆说：“乔布斯会一个像素一个像素地检查屏幕上的每个细节，确保相关的图像准确对齐。他非常重视细节，细致程度居然达到了像素的层面。如果发现问题，乔布斯就会立即冲着某个工程师大吼起来。”iCloud登录页面的设计继承了苹果公司对细节的苛求, 细致的纹理，微妙的阴影，精致的质感，完美的细节，金属光泽可以随着鼠标指针移动，底部的图标可以随着分辨率的大小自适应，改变排列方式，确保用户的浏览体验。

iCloud给我们上了很好的一课，有句大家都听过却未必做到的话——细节决定成败，丰富的细节可以提升设计的价值，也是判断一个设计高下的一条很重要的标准之一，精致舒适的质感纹理，给用户一种沉浸式，充满惊喜的登录体验，是一种很棒的表现方式。

小清新的插图

在网页设计中，插图非常具有表现力，它与绘画艺术关系密切。所以大部分设计职位，对手绘能力出众者格外青睐，许多表现技法都是借鉴了绘画艺术的表现技法。插画艺术与网页设计的的结合，具有独特的艺术魅力，从而更具表现力。越来越多的设计师，将插画运用到网页设计中来，生动有趣温情的清新插图，能迅速的抓住用户的眼球，让登录界面的更加具有亲和力，

163邮箱的登录页面就采用了大幅的插图,小邮差很快唤醒了80后等待来信的记忆，有故事的插图与用户建立情感的联系，唤起用户的心灵共鸣，让用户更有归属感。

Vimeo是一家提供高清视频存放服务的网站，在这里可以找到很多来自世界各地非常有创意的设计师。相信登录过Vimeo的朋友都对Vimeo的登陆页面记忆深刻。

人文关怀的品牌传达

设计以人为本，以人为本的设计不仅能提高产品的品质，还能提高设计的艺术水平，而登录页面是体现人文关怀，传播品牌理念的绝佳位置。

QQ邮箱登陆页面每一次刷新都能看到不同的内容，或用海子的诗，或用迈克尔.杰克逊的歌词，唤起用户的共鸣，设计手法简洁，主体信息突出，引导清晰，并没有多余的元素，界面中最重要的操作“登录”按钮使用了交通中通行的绿色，而没有使用常用的蓝色，细节设计非常考究，对每个细节都注入人文的关怀。

新浪微博将登录框设计成一条围脖的样式，用户的每一次登录都是一次品牌传达的过程，切合新浪力推的围脖品牌理念，织围脖的概念深入人心。

越来越大的登录框

越来越大的输入框设计，让用户输入起来感到心情舒畅，登录过程非常愉悦，在显示器越来越大的今天，mailchimp大输入框显的霸气十足，并且一反常态的可以看到自己的密码，第一次在WEB登录框里见到这种设计，非常贴心.正是这种不拘一格的设计，让mailchimp从一个内部项目蜕变成一个该公司最成功的商业产品。

简约而不简单

WEB设计的风格越来越趋向于简洁，登录页面大量地使用留白可以让登录框更加突出。最大程度的减少用户分心，从视觉的角度来看，简约的设计是平静的，砍掉了多余的元素，颜色，形状和纹理，不能使用让人眼前一亮的设计元素，只能靠空白去做视觉吸引力。布局的权衡及简化设计做的不到位的话很容易变的单调乏味，wordpress后台登陆页面采用适当的投影，灰色的巧妙运用，以及出错的抖动提示，让整个登录页面简约而不简单.堪称典范。

随着互联网的高速发展，移动互联网的到来，WEB设计越来越呈现多元化。尽管一个好的设计并代表产品就一定会成功，但却能为产品加分，为产品注入设计DNA，创造独特的风格和视觉感受。

[来源：腾讯CDC]

iPhone客户端腾讯QQmusic界面设计，作者：CDCer 。

1. 写在前面

经过android QQmusic的洗礼后，我们将战场转到了iOS平台，这是一个更加封闭、竞争更加激烈、要求更为严格的战场。国际版图上，spodify、last.fm、pandora已酣战多时，大陆战场更有摸手、九天、豆瓣fm、虾米早早加入。姗姗来迟的iPhone QQmusic如何后来居上？这是我们继android后在iOS平台上的又一次尝试，我们总结了中间跌跌撞撞、折腾不息的过程，并希望以此积蓄经验和力量。

2. 调整产品定义

“一个可以不断自我完善的解决方案才能真正改善状况并得以更有效地执行。”从android QQmusic开始，我们就已经尝试引入“产品定义描述”（Application definiation statement），鼓励设计团队更早地切入整个产品设计过程。同样是解决移动场景的听歌问题，不同的生态系统会给产品定位与目标受众带来差异，一端是开放的android，一端是封闭的iOS，习惯了磁盘管理思维的中国用户在iTunes中难以适从。“丢掉那根可恶的数据线！”——这是我们整个团队对产品的再一次共鸣。

3. 深入场景 狠抓用户痛点

“细节决定成败。”除了更深入地理解一般性的“听歌”场景，我们还会更多地关注细微的用户痛点，分析用户在iTunes使用过程中遇到的不便：

（1） 家里和公司，iTunes列表难以统一管理；

（2） 追加少量歌曲不得不启动“牛刀“——iTunes；

（3） …

4. iPhone用户使用场景调查

5. iPhone 用户人群分布调查　

对用户痛点的精准把握以及行之有效的解决方案，使得这款app在需求层面就切合了用户真实的需要。

6. 餐巾纸式快速原型

“画几笔画比说一千句有效得多。”

经过前面对产品定位的讨论和需求分析，下一步应该是把“想法”表现出来。很多设计师喜欢马上打开各种原型工具，并“单打独斗”地画起图来，其实，要将一个想法转变为实际的产品形态，一支笔和一张白纸（或白板）就足够了。我们鼓励让产品经理一起参与绘制线框图，并即时表达各自的想法。在彼此碰撞中，我们会发现设计对产品的细微影响，这种逐渐培养起来的全局视野能帮助设计师更好地理解产品，当然，产品经理也得以更好地理解设计。

7. 视觉风格提案

交互定稿后正式进入视觉设计阶段。经过几番讨论后我们决定以蓝天白云为主题，打造一个温馨、轻松氛围的界面。

8. 视觉终稿界面展示

根据对于目标用户，属性特征，使用习惯，使用场景，使用时间，使用时的情感诉求，抽象情感的画面化等方面着手分析的两千多份有效问卷中表明：目标用户的教育程度和收入会比较好，爱好音乐的人们在精神上较之会比较感性。用户们在用iphone听歌的时候，80％是在使用耳机，主要使用场景是在路上或是睡前。用音乐作为陪伴，营造出一个自我的空间，在音乐里畅游，从中得获得心灵和情感上的抚慰与放松。因此我们希望，当早上您启动QQ music 的时候，金色阳光洒向云海，就像虽然我不在您身边，但依然在对您说：“ good morning，加油！又是美好一天的开始！”

动态的播放界面，深夜，带您到星辰中去漫步。也可以与您一起去深海里畅游。当悲伤的音乐响起，雨水打在玻璃上，让世界模糊起来。 我们无法触及您所有的感情，但期待与您的感情相会时刹那的交流与感动。（我们对给自己勾勒出的蓝图，也感觉到责任和压力的重大，但我们不畏惧奋起努力。最后做的还不够的地方还请海涵。）

9. 启动ICON

ICON为保持QQMusic一直的视觉识别采用了QQMusic的LOGO为主体配以界面的主色调蓝色。

10. 后记

在整个设计流程中，我们引入了一些细小的变化，成效不错。iPhone QQmusic在上架9个小时后就登上了免费app第一位，评分达到了史无前例的4.5颗星。成绩固然令人欣喜，不过问题同样存在，我们的性能还不够完美，体验还不够流畅，中间还因为对框架缺少深入的理解，导致了一次较大的调整，我们愿以此为鉴，继续前行。

[来源：腾讯CDC设计中心]