将你的应用品牌化

让我们来关注下某些创意可能,应用设计人员和开发人员可以使用这些创意可能将品牌推广合并到 Windows 应用商店应用中。

为什么要将你的品牌融入到你的应用中?

品牌定义企业希望以之闻名的特质。设计你的 Windows 应用商店应用时,你需要进行周到的决策以确保你的应用合并你的品牌的精髓。就像一个品牌定义一个企业那样,在你的 Windows 应用商店应用中表现你的品牌可将其与所有其他应用区分开来。让我们来看一个示例。

以下是在品牌推广之前的 Windows 应用商店应用的一个示例:

Contoso Bakery 在进行品牌推广之前的 Windows 应用商店应用示例。
Contoso Bakery 示例说明了一个面包店的应用坚持 Microsoft 设计原则时可能的样子。此示例很巧妙地将内容放置在前方和中央位置,但没有非常有效地宣传面包店的品牌。

 

以下是进行品牌推广之后的相同示例应用:

Contoso Bakery 在进行品牌推广之后的 Windows 应用商店应用示例。
在此版本的 Contoso Bakery 应用中,某些明显的更改使得此应用感觉更引人注目。通过合并更多的面包店品牌,应用的内容以一种更有说服力的方式呈现出来,且该应用的整体感觉使人联想到面包店的精髓。

 

如何结合你的品牌

品牌的表述是通过一组可视元素实现的。例如,将独特的调色板、图形、布局和摄影风格汇聚在一起工作,可在各种媒体(如广播、印刷、Web 和 Windows 应用商店应用)上创建可重复的、可识别的品牌。

将这些可视元素当作旋钮和拨号盘,你通过代码操纵它们以在你的 Windows 应用商店应用中创建独特的外观。

可视元素说明
颜色

颜色是展现品牌的关键属性。通过告知人们此应用来自你的企业的方式,应用与你的品牌关联的主要颜色。

图形

通过将字符添加到内容的演示中,使用图形来增强你的品牌。但是过多的图形可妨碍你的内容的流畅性,并且看上去仅仅起到装饰效果或者可能会分散注意力。

图像

插图和摄影也可反映你的品牌。重复使用来自你的公司的其他沟通方式或网站中的相同影像和风格。

网格

Windows 应用商店应用网格系统帮助统一你的应用演示的视觉元素。该网格将调整你的品牌化应用的 UI 以使用 Windows 的其余部分。

布局

所有页面的视觉元素的布局安排都应与你的品牌相关。你还应尽力在页面和内容类型间实现一致性。

徽标

使用你的徽标以帮助人们快速识别你的应用和你的品牌。

版式

字样是 Windows 应用商店应用的一个关键部分。正确的选择可以像颜色、徽标或布局一样对你的品牌具有影响力,因此请考虑你要使用的版式。

 

示例业务线应用

无论从零售还是从企业方面来看,对你的业务线 (LOB) 应用进行品牌打造都很重要。 此示例演示了如何将品牌融入到一个快递服务公司的企业零售应用中。

企业品牌元素

Fabrikam Worldwide Logistics 在全球范围内提供三种等级的快递服务。 其目标客户是希望轻松简便地创建并管理发货业务的小企业主。 可靠的全球发货和无摩擦交易是传递给客户的核心理念。

品牌元素说明

示例 Fabrikam Worldwide Logistics Windows 应用商店应用的主品牌

主品牌通过使用图形元素(例如此处的地图和条带)重点传达的是提供可靠的全球服务。

示例 Fabrikam Worldwide Logistics Windows 应用商店应用的徽标

由主品牌引出,每个服务的徽标传达的则是三种等级的服务。

示例 Fabrikam Worldwide Logistics Windows 应用商店应用的品牌元素

包装上的品牌元素(如虚线和地图)也在应用中再次使用,从而创建一个紧密相关的品牌故事。

 

创建发货业务

小企业客户登录到他的帐户以重新开始一笔发货业务。

示例 Fabrikam Worldwide Logistics Windows 应用商店应用的登录页面,包括页眉品牌
页眉和页面中始终贯穿着颜色、图形和徽标等品牌元素。

 

在帐户页面,颜色、图形(条带和虚线)以及字体传达的是主品牌信息。客户的身份也在页眉中作为联合品牌显示。

示例 Fabrikam Worldwide Logistics Windows 应用商店应用的 Coho Craftsman 页面,显示联合品牌
客户联合品牌从主品牌的字体中获取灵感,在标题中使用 serif 字体 Constantia,在应用的其他各处则使用 sans-serif 字体 Corbel。

 

交易页面使用一种平面导航模式。用户可以在各区域之间平移以快速查看和修改信息。

示例 Fabrikam Worldwide Logistics Windows 应用商店应用的平面导航模式,显示跨页面的水平平移

示例 Fabrikam Worldwide Logistics Windows 应用商店应用的平面导航模式,显示页面左侧的水平平移

示例 Fabrikam Worldwide Logistics Windows 应用商店应用的平面导航模式,显示页面中间的水平平移

示例 Fabrikam Worldwide Logistics Windows 应用商店应用的平面导航模式,显示页面右侧的水平平移

用户可以从交易页面快速导航至语义式缩放视图,以查看所有交易的历史纪录与汇总信息。

示例 Fabrikam Worldwide Logistics Windows 应用商店应用的平面导航模式,显示缩小视图的语义式缩放

示例 Fabrikam Worldwide Logistics Windows 应用商店应用的平面导航模式,显示跨缩小的视图平移的语义式缩放
颜色、图形、服务徽标和字体等品牌元素的使用具有一致性,以体现企业的本色。

 

用户可以使用导航栏导航到其他类别。

示例 Fabrikam Worldwide Logistics Windows 应用商店应用的品导航栏

交付发货业务

司机使用此应用将货物交付给客户。使用两栏式设计在左侧显示货物清单,右侧显示具体信息,这样司机就能很容易地浏览发货的详细信息。 条带和通用控件等品牌元素在应用中的使用也很一致。

示例 Fabrikam Worldwide Logistics Windows 应用商店应用的两栏页面,显示清单和地图

当司机到达时,右栏会在一个垂直滚动的列表中显示详细信息。货物清单和详细信息都向同一个方向滚动。

示例 Fabrikam Worldwide Logistics Windows 应用商店应用的两栏页面,显示清单列表和详细信息
帮助司机定位卡车中货物的信息图片跟应用的其他部分一样,也采用了相同的品牌颜色。

 

当司机请客户签名时,此应用会以纵向视图显示签名页面,并显露具有品牌信息的导航栏。纵向视图更方便司机将设备递给客户。

示例 Fabrikam Worldwide Logistics Windows 应用商店应用的签名页面,纵向
请求签名时是一个非常重要的品牌打造的时机。用户会接触到企业应用和品牌。

 

当司机拿到签名时,应用会显示剩余的项目和进度图表。

示例 Fabrikam Worldwide Logistics Windows 应用商店应用的清单列表页面,纵向

对你的应用进行联合品牌打造

两个或多个品牌之间的关联称为联合品牌打造。对于需要纳入多个品牌的应用,请在设计时考虑以下问题:

  • 哪个品牌在推广中居于主导地位?
  • 次要品牌在推广中扮演什么角色?

不能成功解答这些问题的 Windows 应用商店应用会有风险,使客户感到困惑并淡化品牌打造的效果。

示例 Fabrikam Worldwide Logistics Windows 应用商店应用的联合品牌

Fabrikam 示例展示了通过始终如一的视觉元素的实现来强化其品牌,从而达到联合品牌打造的效果。例如,Fabrikam 品牌颜色、图片、布局和字体贯穿在整个应用中,并始终遵循着一组有限的风格变化。应用的每个页面都清晰地传达出该应用是由 Fabrikam 推出。

为了传达出 Coho Craftsman 是主品牌之后的次要品牌,Coho Craftsman 徽标、字体和图像都是插入到 Fabrikam 布局中。举例来说,你可以想象,Fabrikam 的另一个小企业合作伙伴怎样能够恰当地放入目前由 Coho Craftsman 占据的区域。

示例 Fabrikam Worldwide Logistics Windows 应用商店应用的联合品牌

此示例中也出现了其他品牌。此页面左侧的信用卡公司是作为更低级别的品牌出现,这在一定程度上体现为他们的尺寸较小、放置的位置与特定内容相关以及颜色受限。在页面右侧,服装产品制造商的品牌显示在只有一种颜色的徽标中且尺寸被缩小,并遵循着主品牌的设计风格。无论在哪种情况下,对视觉元素的编辑一直遵循着这一原则:次要品牌保持清晰明了,但又不会像主品牌那样夺人眼球。

让人联想到独特的品牌的示例

以下是一些示例,这些示例显示每个视觉元素如何帮助唤起不同的情绪和情感。 对每个视觉元素的描述都提供了详细信息,介绍该布局是如何创建的以及它为什么很重要。

Contoso Downtown Café

Contoso Downtown Café 的一个 Windows 应用商店应用的示例,显示如何通过颜色、网格、布局和版式表现品牌。
Contoso Downtown Café 是一个以正宗而闻名的品牌。它拥有手工制作的主菜和家庭自酿的特色饮料。在此示例中,颜色、网格、布局和版式是主要用于让人联想到该品牌的可视元素。

 

用于对 Windows 应用商店应用进行品牌推广的调色板示例。颜色  温暖的暗灰色、米色和铜色为此设计提供一种丰富的感觉。温暖的调色板使人联想到你会在家庭制作的面包皮、汤或点心中发现的某些同样的颜色。
用于对 Windows 应用商店应用进行品牌推广的网格示例。网格  在此示例中,内容将有意“破坏”网格。菜单内容是此品牌的关键,因此将减少上边距来为菜单提供更多空间。会调整左边距,以使公司名称、介绍文字和位置信息感觉更加居中,从而给内容留出空间。所有这些偏差已一致地进行应用,并在此应用中的所有其他页面中实施。
用于对 Windows 应用商店应用进行品牌推广的布局示例。布局  该设计旨在感觉像一个菜单,因为是菜单将人们重新带回到此咖啡店。就像其三明治及其他菜单项一样,布局旨在让人感觉手工制作的意味更浓。米色背景色是让人联想到纸张,色调引人注目,内容有序,具有垂直分隔符规则和强大的左对齐文本。
用于对 Windows 应用商店应用进行品牌推广的版式示例。版式  Copperplate Gothic Bold 是在此设计中使用的主要字样,这使公司名称的外观很独特,类似于手工雕刻的木标志。Script MT Bold 和 Segoe UI 是陪衬字样。在菜单中有节制地使用了脚本字体,让人联想到手写样式。Segoe UI 用作正文字体,提高了菜单选项的易读性。

 

Contoso French Bakery 品牌

Contoso Downtown Café 的一个 Windows 应用商店应用的示例,显示如何通过颜色、网格和摄影表现品牌。
Contoso French Bakery 是一个以纵情享受而闻名的品牌。对于许多客户而言,它就是人们到处搜寻享受甜食的圣地,感受着带有负罪感的快乐。 在此示例中,颜色、图像和布局是用于让人联想到该品牌的视觉元素。

 

用于对 Windows 应用商店应用进行品牌推广的调色板示例。颜色  仅有两种颜色(棕色和粉红色)的调色板足以使客户想到面包店。棕色是主要颜色,棕色使人联想到巧克力的图像,而粉红色是个性色,粉红色使人联想到磨砂饼干和糕点。不管与这两种颜色相关联的风味,这两种颜色对于该品牌也是有针对性的。棕色是中性的,足以为要突出的全彩色摄影提供丰富的背景,而粉红色很明亮,足以突出显示特定的内容片段。
用于对 Windows 应用商店应用进行品牌推广的图像示例。图像  摄影是此设计的重点。很清楚,时间和专业技能致力于确保每个图像看起来足够好吃。因此,面包店商品的图像阐明了此品牌的含义。另外,图像用于定义内容的类别。
用于对 Windows 应用商店应用进行品牌推广的布局示例。布局  与标准 Windows 应用商店应用设计相比,此示例有一种不同的感觉。最独特的区别是缺少方形磁贴。磁贴和网格仍存在,但已经对图像进行了风格化来模仿可能在面包店中发现的商品,例如,圆形和扇形形状的蛋糕锡。

 

Contoso Sandwich Truck 品牌

Contoso Sandwich Truck 的一个 Windows 应用商店应用的示例,显示如何通过图形、网格和徽标表现品牌。
Contoso Sandwich Truck 是一个以城市、社交和位置感知闻名的品牌。这个品牌受到了一群出色的厨师和卡车车队的支持,一切主要面向在路途中的人们。在此示例中,图形、网格和徽标是用于让人联想到该品牌的可视元素。

 

用于对 Windows 应用商店应用进行品牌推广的图形示例。图形   菜单选项仍然是重点,不会因过度使用图形而变得凌乱。但是,图形在建立此品牌方面仍起了重要作用。例如,“星形”意味着客户评分系统,颜色和形状使人联想到城市街道标志,而基于位置的信息则由一个黑框来凸显,该黑框采用了粗砂沥青道路的图形。
用于对 Windows 应用商店应用进行品牌推广的网格示例。网格  标准网格将此设计的所有方面固定住,并模仿类似于你会在城市街道地图的顶视图中所看到的情景的结构。为了挑战此有序的演示,全出血和重叠内容和图形使此示例与众不同。内容的总体演示是大胆和直接的,作为吸引处于路途中并需要快速做出决策的人们的一种方式。
用于对 Windows 应用商店应用进行品牌推广的徵标示例。徵标  在此示例中没有使用公司微标。公司名称显示在文本中,而在此示例中应该出现微标的位置,我们首先看到的就是嵌入在整体组成中的公司名称。徽标或名称并不只是位于左上角。
用于对 Windows 应用商店应用进行品牌推广的调色板示例。颜色   黑色和黄色作为主色调使用。从个人设置的角度看,黑色和黄色是在城市设置(如,街道标志和道路标记)中找到的颜色。

 

跨应用页面增强品牌的示例

其次是将应用与品牌融合在一起,内容丰富的页面就象品牌化登录页面一样重要。本示例使用一个虚构的运动球队应用来演示如何在多个应用页面上融入品牌。

Fabrikam FC,一支专业足球队

专业足球队 Fabrikam FC 的球迷希望在幕后观看他们喜爱的球队、喜爱的球员的所有详细资料,并希望在任何地方都可获得最新信息。登录页面设计反映了品牌的刚劲和动态属性。

示例 Fabrikam FC 球队 Windows 应用商店应用的登录页面

颜色、版式和图形突出了品牌的刚劲和动态属性。

 

此应用使用平面导航模式。用户轻扫导航栏可导航到应用的其他视图。

示例 Fabrikam FC 球队 Windows 应用商店应用的导航栏

导航应用中始终贯穿着颜色和徽标等品牌元素。电子式球队颜色与黑色背景相辉映,营造出刚劲个性的强烈对比,黄色始终贯穿在应用中,以表示富有交互性。

 

使用导航栏,用户可以查看球队的球员。

示例 Fabrikam FC 球队 Windows 应用商店应用的球员页面

在应用的不同视图上,字体都是一致的。sans serif 字样显示了球队的精力充沛和刚劲的个性。全大写的字形使特定文本标签看起来像是图形元素。

 

要快速导航到特定球员,可缩小到此页面的语义式缩放视图。

示例 Fabrikam FC 球队 Windows 应用商店应用的语义式缩放

球员的射门动作冲破了球网,营造出充满精力的动态画面。它们用在球队页面和登录页面上。

 

示例 Fabrikam FC 球队 Windows 应用商店应用中的显示图标和图形,可增强品牌。

简单的图标和图形可使内容更有趣、更易于访问,还可在整个应用中增强交互性和浏览意愿。

 

认识 Windows 应用商店应用
UX 指南
命令模式
导航模式
设置应用页面的布局
窗口大小和屏幕缩放指南
字体指南
如何将 ListView 品牌化

 

 

显示:
© 2015 Microsoft