Office 2010：视觉效果和品牌形象

大家好，Microsoft Office 设计小组 (ODG) 的用户体验设计师想与大家分享一下 Office 2010 的视觉效果和品牌集成背后的故事。我将介绍指导我们当前设计理念的幕后原理。

原理

Office 2010 并不是完全意义上的创新，而是在视觉效果上进行了更新，美化了界面并删除了不必要的视觉元素，以便用户将注意力集中在内容上，而不是集中在确定窗口内容部分框架的边框和小部件（此框架也称为“镶边”）上。为了实现这一目标，我们减少了边框、框和水平条带数，这样做为内容区域节省出了另外 6 像素的垂直空间。通过增加更多空白区域以及合理放置视觉元素，我们努力使创建的界面自然、清晰，并为使用界面的用户留出更多表现自我的空间。

对于 Office 2007，功能区是一个新的 UI 范例，它突出了视觉样式以展示功能、显示控件之间的关系并展示掩藏在菜单和对话框中的功能。每个控件和功能区组周围的框和边框充当“视觉提示”，指导用户执行操作。Office 2007 功能区使用异常光鲜、亮丽的界面，该界面可以与 Windows Vista 的艺术元素相媲美，并为新界面平添了一份惊艳感觉。

 
Office 2007 和 Office 2010 功能区的对比

在 Office 2010 中，我们感觉 UI 设计合理且外观更加精美，并且没有影响功能区的整体结构及其功能。Office 2010 视觉效果的一个重要变化是默认主题不再是蓝色。我们选择了一种非彩色调色板以最大程度地降低创建文档时带给用户的华而不实感，我们还取消了浮华表面。功能区仍然是最醒目的 UI 部分，并为所有后续元素设定了基调。功能区下的用户界面更加柔和。采用柔和渐变以及光线和色彩是为了让用户关注特定区域。空白区域和一些对比强烈的元素（如用于指示所选内容的 Office 品牌橙色和“文件”(File) 选项卡中的各个产品颜色）定义了视觉节奏。

我们延续了提供三种 UI 主题（银、蓝和黑）的传统。银色主题中的所有文本现在与背景的对比度（一种颜色被另一种颜色环绕时所产生的色差）都为 5:1。这是弱视用户经常提出的要求，其实我们发现大多数用户同样可以从增强的可读性和改进功能中受益。

通过单击“文件”(File) 选项卡 >“选项”(Options) >“常规”(General) >“配色方案”(Color Scheme)，您将发现用于切换主题的控件。

跨平台的一致性

跨 Office 应用程序、SharePoint 和 Web 应用程序从整体视觉样式上实现一致性是此版本的主要目标。我们希望从一种产品切换到另一种产品时用户的感觉既熟悉又一致。SharePoint 中的非彩色调色板提供了一个平台，通过该平台只需很少的操作即可突出单个公司品牌。将非彩色调色板集成到 Web Apps 中可以与各种主机镶边完美搭配，并使用户获得与功能完备的 Office 应用程序完全相同的体验。

 

符合品牌策略

Office 设计小组与 Microsoft 的品牌团队密切协作，以评估、改进并确定在产品内展示品牌的机会。这一合作确保了在产品中以相关的独特方式展示品牌。

对于 Office 2010，我们推出了一个新的 Office 品牌系统。其中，徽标发生了演变，从表示 Word、Excel、PowerPoint 和 Outlook 的原始四色改变为完全接受 Office 橙色品牌的标记。徽标还从 Office XP 以及更早版本中采用的拼图演变为传达精神、产生影响和建立联系的标记。

为了发布 Office 2010，应用程序图标也已经过重新设计。我们通过调查得知，与使用抽象的设计相比，用户使用字母和颜色可以更轻松地联想到图标。为此，我们设计了新图标。我们采用了符号系统，以在各种 Office 系列产品中使用更加统一的方法。

我们已经选择在此版本中采用不同的应用程序颜色，并更新了色谱以使用色彩更加鲜明、纯正的调色板。我们在“文件”(File) 选项卡中增加了产品颜色并在 Backstage 视图中增加了一些精选元素，以便可以更轻松地快速确定所使用的 Office 应用程序。观察颜色随应用程序改变的“文件”(File) 选项卡，即可联想到 Backstage 视图的效果。

新增的 Microsoft Office 品牌标记和更新的橙色调色板在具有动画效果的初始屏幕中显示。这种动画效果为产品启动体验增添了活力、表现力和美感元素。

 

不仅仅是外观精美
设计并实现 Microsoft Office 的视觉效果已不仅仅局限于图标和早期简单的“外观精美” 要求，而是要消除熟悉与未知之间的鸿沟、传达并构建品牌意识以及帮助用户轻松完成日常工作。希望我们的简要介绍可以帮助您更好地了解 Microsoft Office 2010 中的视觉效果更新。

本文出自 “为IT专业人士服务” 博客，转载请与作者联系！