如何在Material的世界中树立自己的品牌

2015年8月27日,我做了自己在Droidcon NYC上的第一次演讲 - Your Brand in a Material World。下面是我为演讲所做的幻灯片与笔记相关的资料。幻灯片的png资源质量虽不完美,但是应该也不至于影响阅读:)

下载.gif

在重塑安卓应用面貌一事上,material design绝对做了很多的事情。随着详细指南与一些列资源的日益增加,开发者与设计师都深入进去,在它们自己的app中实现与奉行material design。这让设计成为了安卓平台的一大卖点。当然,这是好消息。

但是对于某些人而言,仍然存在着抱怨的思想,那就是无法制作一个既能代表自己的品牌同时又适合material design的app。我听到一些人说material app看起来都差不多,它的那些设计准则限制太多,他们根本不关心什么material design。因此我想谈谈如何在安卓上建立一个同时考虑了平台与品牌的一流用户体验。

ps:以下,一个问题,一张图作为开头。

blob.png

为什么?首先我们要问问为什么开发者,设计师与产品经理应该关心material design,以及为什么自己的产品移动体验要有品牌意识与平台意识。

blob.png

第一个也是最重要的原因是用户关心。毫无疑问没有用户希望得到一个糟糕的用户体验。重度用于与新用户对于平台的意识强度差别是很大的,但是不管用户的使用目的是什么,两种用户都期望app能给他们带来美好的用户体验。而且设计(包括商标的设计)可以既可以增强体验也可以降低体验。

设计可以干扰实际功能,造成让人迷惑笨重低效的用户体验,而另一方面它也可以潜移默化的促进app的使用体验。即便是小如调成type为4dpgrid 这样的事情也可以对用户体验造成很大的视觉影响。小的细节加在一起形成深层次的好设计,即便用户并不能直接意识到设计的影响。

在你考虑把这些设计细节作为一种手段来培养app优秀体验的时候,考虑一下自己app对于整个平台的角色也是很好的。正确的设计,品牌以及用户体验也是在为整个平台的可用性做贡献。一个带着这些思想去设计的app一定是用户(新的或者老的)觉得好用的app。

blob.png

那么知道了这些,你就准备好了开始一个界面漂亮友好的个性app了,并在平台上发挥你的影响力。不过,这里我们有必要暂停下来问问material design到底是什么鬼。取决于你问的是什么人与看待的角度,你会得到许多不同的回答,但它也没有必要那么复杂。

blob.png

首先material design 是无法用比例来衡量的。你不能说一个app是25%或者40%或者80%的material。与其说有多少 FAB,hamburger或者56dp的toolbar,倒不如把material design 看成是一种方法论。这种方法论基于这样的观点:数字界面元素的行为应该表现得和物理材料一样可预见性。dimensional depth,transitions,以及interaction model都是在证明这点。在material design中,即使对象的持久性也非常严格。

那么,虽然诸如FAB,hamburger,tab bar以及卡片这些元素都适应material design语言,但是它们只是个体语言。需要开发者和设计师把这些语言放在一起形成令人信服的,有意义的句子和故事来表述自己的品牌并且帮助用户达到目的。 

blob.png

幸运的是在这个问题上谷歌有一些准则和规范 - material design规范。这些规范是在线文档的形式。时常更新反应了material design中最新的设计模式,同时为设计师和开发者提供资源。规范中甚至有一些关于品牌识别方面的建议 。

blob.png

谷歌的material design 规范只是一本娱乐书籍,而不是一本规则手册,规范是如此详细以至于对它们第一印象是权威。但是记住有这么个东西也很重要。这个说明书集合了排版和导航模式之类的基本定义,但是它其实是在日常中遇到设计上的抉择时为你提供最佳实践与捷径的服务。

Trello的安卓设计师说的很好”我们把 Material准则看成是指南,而不是一字不差去遵循的规则"。

 如果我们回到字面的暗示,谷歌的设计指南就像一本字典 - 对基本设计定义的快速参考。

blob.png

那么,说了这么多然并卵的东西,到底该如何让品牌融合进来呢?在一张空白的画布上,你有上万种方法来自由表达自己的产品与品牌,但是什么才是为移动用户寻找一个合适的接触点最佳方法呢?我们将细数5个恰当树造品牌体验的常规时机。

blob.png

第一个就是logo。logo是一个非常重要的品牌元素,用户一眼就能认出并和产品联系起来,但是这也不是说logo必须在要界面上占据突出的位置。应该保守的在app里使用logo,除非真能积极增强体验,否则不要包含logo。如果不包含logo让你心有不安,那么思考下下面的问题:用户是如何获得你的app的?一般情况,他们在商店里找到你的app,确认并下载,然后点击图标。之后,它们不知道它们所处的位置以及自己在使用什么,我们无法提供更多的帮助。

这就是说,对于logo有恰当的地方放置 - 最明显的莫过于启动图标与产品图标。这是用户与你app的第一个接触点。而且要把自己的logo转换成适合安卓风格的产品图标也并不是一件难事。

然后就是启动画面与引导画面。它们对于安卓是新的东西 - 谷歌一直以来并没有在官方支持启动画面,直到最近更新了设计规范才改变了这一局面。如果用的恰到好处,它们可以是用来隐藏加载时间与空白界面的便利工具。也是在不打断用户体验的情况下增强与logo关联的好时机。

在恰当的时候logo也可以适应进app的其它地方。B&H 的logo就在app的 hero graphic中,显示了风格化了的 B&H商店。这并没有打乱用户体验,也和其余的app相搭配。

blob.png

这里是一些更多在app内部恰当使用了logo的例子。

Instagram 和 Timehop 都有比较简单的导航模式,不依赖于drawer,因此把logo放在toolbar 上是可以接受的。

Timehop 则更进了一步,在刷新动画中包含了Abe,这点我们一会儿会讨论。YikYak也把自己的logo放在了刷新动画中。而在Focus(豌豆荚上叫聚焦相册)中,logo被用在了空白占位图(placeholder )中。它在图片加载之前显示。

所有这些应用方式都是正确的- 非但没有降低体验,而且在某种程度上增强了体验。

blob.png

让我们来谈谈字体。字体是让用户对产品产生熟悉感的机会之一 - 如果他们来自于某个地方有特殊字体的网站,他们可能认出你app的标题字体。但这并不是说你应该在整个app都使用自定义字体 - 要记住Roboto 字体。Roboto是安卓的系统字体。因此用户会在整个平台上看到这种字体,对这种字体会非常熟悉。所以它非常适合诸如设置,对话框以及其离开了核心功能的元素。另外,尽量审慎的使用自定义字体。

blob.png

这里是几个app中非标准字体的例子。对于纽约时报,它的标题与内容字体都和自己的品牌与编辑语调是相称的。

google keep使用了变体的Roboto 字体来强调笔记内容与其他操作。

而Robinhood 则有自己的字体集合。

我的意见是在决定是否使用非系统字体的时候需要审慎。如果你有一个字体对打印材料很合适,那么先考虑下转换成移动界面会怎么样,有时是不行的。但是如果可行的话,它确实可以把你app的体验带回到品牌所代表的含义上来。

blob.png

接下来是颜色。这是另一个很显然的问题,颜色也是树立品牌的好机会。

Material design 允许你使用尽可能单一的调色板,不过反过来你想要多少的颜色也没有问题 - 只要使用的足够仔细。

blob.png

Dropbox 采用了单一颜色方案,在toolbar,操作按钮与其它高亮操作中使用了标志性的蓝色。

blob.png

而 Project  Fi 有效的使用了品牌带有的四种颜色,Slack 使用了三种。有效的使用品牌颜色可以形成视觉层次感 - 考虑什么应该高亮显示,什么元素应该使用中性颜色避免吸引眼球,或者什么东西应该在app里面。

blob.png

那么如果你的品牌着色版不适合material design该怎么办呢?幸运的事谷歌在这点上有更多的指南。最新的设计说明包含了非常广泛的调色板供你选择,而谷歌提供了一个简单的公式来计算如何高效的使用颜色。只需选择一个primary color或者同一颜色的深色版本,那么相配套的颜色就自己得到值。

blob.png

回到B&H,下一个话题是视觉延伸。即使你的logo不是重要UI的一部分,你仍然可以把自己的品牌审美观与视觉风格通过图标或者插图来展示出来。

blob.png

这里,B&H 把这个app都占满了插图,把不同类别的商店集中展示在了一个页面。谷歌钱包则使用了典型的谷歌风格的图像来引导用户浏览一遍重要的任务和操作,比如在手机上设置tap-to-pay。Weather timeline则在每一个角落都添加一些有趣的动画图标,比如这个德劳瑞恩准备开始旅行去看看2017年的天气(草这可能吗)。

blob.png

最后我们谈谈产品自身- 用户体验是什么?什么功能决定了品牌的界面?对于Inbox来说,它是一个任务类app,所以划动然后标记为完成是非常关键的动作。对于Tumblr ,发表一篇新的内容是关键操作。而对于Tinder左右滑动定义了产品自身。

如果有什么关键交互,特性或者操作定义了你的产品,并且可以在不同平台之间采用,那么抓住它们并做到完美是很关键的。就这一点也会对整个app的体验帮助良多,并且可以让你感觉这就是自己的体验。

blob.png

就如已经说过的,Inbox基于任务的邮件管理操作是标志性的体验,在整个app中以很直观的形式呈现。对于 Google+来说,+1操作被调整修改了很多次才是现在这个样子。Instacart 想出了一个聪明的方法来呈现“add to cart” 操作,这个操作是整个产品的基础。Weather  timeline  则名副其实的使用了时间轴。

blob.png

那么我们已经涵盖了所有重点,那么我们的配料是什么呢?

首先,树立品牌不仅仅是一个logo的问题。有许多不同方面的东西组合在一起才能形成整个品牌形象 - 颜色,字体,操作,图标,视觉延伸,当然还有logo。所有这些元素都必须仔细考虑。我的方法是把这些东西分割成小点的组建,把部分做出来,然后把它们还原在一起看看效果如何。这个反复循环的过程是有趣和严肃的。

第二,考虑用户的建议。他们当然能识别出好的设计,他们也知道一个app的品牌是不是用的过分了或者笨拙了。另一方面,如果设计是优秀的,那么你会赢得更多的热心用户。

最后,惊艳的体验虽然是在安卓上建立的,但也会影响到它的web和ios版本。正确的树立品牌体验,你可以帮助你自己,用户以及整个平台,何乐而不为呢?

原文: Your Brand in a Material World

转载注明出处:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0913/3445.html