《Shopify 全新插画风格》 

 

阅读时长10分钟

作者：Meg Robichaud

翻译：  园林组

排版：丝鹿

 

 

 

在 Shopify，插画家一直很忙。我们一直在努力为 Shopify 寻找新的视觉语言。（当然，我说“我们”的意思是 “Ryan Coleman和Holly Schofield”。想想，我是谦虚还是怎么？第一次问设计经理他们推进了多少实际设计。说真的。零产出。相比之下，Ryan 和 Holly 简直是疯狂的天才。）

 

 

 

为什么给 Shopify 定义新的风格如此重要？

插图是具有三种超能力的沟通工具。它可使复杂的想法变得清晰；也可以将产品的理念和新手引导页面中引导词句链接起来；并且，还可以以一种独特的视觉语言捕获品牌的价值和特点；插画还能够根据不同的情形改变品牌基调；插画能够直接和用户交流。现有的插画风格，虽然可以让用户赏心悦目，但是不能增加功能，反而（只是）重复现有的功能。现有插画风格在表现复杂的创意时候能力有限，现有插画风格不能准确的映射 Shopify 的价值和原则。

 

 Spofiy 的旧风格被用户接受是一件很 cool 的事情。但这也很令人沮丧也是让人觉得有些害怕。当你做一个大决定的时候，就像屋里的大象，一样是存在风险的。所以需要考虑多久用户需要接受新的风格。每个决定都是重要的，因为每个决定后面都会有相应的回应。据我所知，没有人能够100%确定，如果你觉得这个是正确的，就应该立刻行动。当你回顾的时候，那些事正确的就很明显，当你不对的时候，就不要纠结之前的决定。

 

 

 一个好的开始应该是设定一些目标，在这次更新中你想去尝试做些什么呢？当你做完之后，你怎么知道是不是你想要的风格所以我们要给新的插画风格设定以下几个目标：

• 确定插画风格需要独特而灵活的插画风格

• 插画风格能够随着Shopify更新进行迭代

• 插画要视觉上吸引人的风格，同时能够适用于角色、情景、 地点和图标

 

插图应该让商人对自己的任务充满信心，并给他们更多想象空间。插图应该是风格统一的，就像它们来自同一个源头 - 同一个公司，同一品牌，同一个声音，同一个人（隐喻或表面都看起来像是由一个人绘制的） - 同时仍然能够根据受众、所在项目及情感状态平滑地改变基调。

 

当定义一种插画风格是否成功时，可以从以下几个方面考量：

• 选用的颜色有别于UI中的用色

• 针对于不同的设计场景，地点，角色和图标都有明确指南

• UI组件更新

 

（这里要补充下，插画师的工作还包括执行并推出更新所有现有插图 - 但回想起来，我认为以上是成功找到新插图风格的决定性瞬间，其余的是后续）

好的，我们知道我们想要什么，我想剩下的就是执行了......

 

我们很幸运，在 Spotify 有专门负责品牌的团队。他们创作了价值、声音和基调方面的资源，我们可以直接映射。你不能准确的说明为什么有的插画是猫的形象，有的插画是一把椅子，有的是一个闹钟，这些都是通过关键词汇联想出来的。但是这可以给你一些通用的语言，与团队沟通对话和制定共同目标的一个起始点。我喜欢用这而不是那，评估我们想要达到的目标。使用频谱代替单一质量可以为你提供额外的上下浮动空间 - 你可能始终无法断言为什么某些东西是平易近人的。但你可以确定是这并不是一个简单的事情，所以，我们选择在具目标的频谱上讨论想法。

                                                所以 Shopify 的基调是:

                                             值得信任的，但不缺乏经验 ；

                                                   自信的，但不吹毛求疵；

                                                充满力量，但不缺席；

                                                   积极的，可以随时接触；

                                                   热情的，但不夸张的；

                                                   强大的，但不自私；

                                                   真正的，不是人工的；

                                                   专注的，但不是局限；

                                                      伙伴，但没有利益关系；

                                                   同理心，但是不是歉疚的；

                                             秀色可餐的，不是引诱；

 

还有很多空间去解释这些词，所以那么我们如何在视觉上清晰地表达我们对新风格的看法呢？你猜！情绪版。

 

每个人都可以使用互联网。发现你喜欢和不喜欢的事情是同等重要的。把他们贴在墙上，让我们讨论它，放在墙上的东西是否能代表Shopify的某个特征，为什么代表？怎么样代表？当你觉得没什么可以说的时候，大家可以围成一个圈，一起讨论，每个人观点可能都不是相似的，提出你的观点，大家一起探索，其中的可能性。

 

把想法贴在墙上，反复的讨论。或许有人的观点比你的更有说服力。但如果两三个人一起讨论时，就有意外收获，比如我们常常会想尽全力自己解决问题，这次我们重新加入讨论决定谁的解决方案最好，提取我们都想要的部分，然后从新的起点再尝试一次。

 

 

我们有一个所谓完美的问题版本，然后是一个所谓完美的解决方案，然后顺利地推导出新风格。我们耐心地等待所有辛勤工作后的辉煌时刻。当然，我们永远不会等到那一刻。你提出的再多的想法也不过是假设出来的。在某个时刻 - 迟早 - 你需要和你的团队坐下来回答以下问题：你认为我们已经探索了一切值得探索的东西吗？如果你采用这种风格，你会感到高兴吗？如果我们继续沿着这条道路前进，你会为你所做的工作成果感到自豪吗？

 

如果你的答案只有一个响亮的YES，那么你需要抛开任何唠叨。决然地前进到你想要解决的真正问题 - 充满信心。这是你可以获得的最佳解决策略。是的，还有一个更好的解决方案。与它能带来的价值相比，找到它的付出的努力可以忽略不计。在某些时候，你需要优先考虑完成任务。

 

 

我确定不久 Meghan 就会被我们吸引来记录我们的决定。随着团队的发展，如果没有办法让下一个人加入，并且加快速度的话，我会认为这个项目很快就会失败。毫无疑问，有一个可以共享我们创造东西的工具非常重要。说实话，当我们三个人中（只有三个人）创造了这种插画风格时 - 我们花了110％的时间来绘制这种插画风格，讨论并思考这种插画风格 - 我们并不需要请参阅reg上的样式指南。

 

但风格指南在哪里，和这些强大的文档帮助我们准确的定位，特别是在创建新插图风格的早期阶段。首先是“好吧，我写下来了，我们都同步了颜色面板了吧，对吗？” - 一个简单的检查。每次风格指南更迭时，问题会变得更加困难，从“圆角或直角？”到“嘿，我们选择的插画对象，需要有些东西让他们统一。这些插画风格统一吗？“或者”所以你知道我们总是有些随意，但是，不是太多......？“

 

 

 

有时，决策是有迹可循的，注意到趋势并抓住趋势。还有的时候，会遇到一个新问题，需要在继续继续推进之前将其提交讨论。这两种情况都使插图团队回到了同一个起点，有助于向前推进。

 

目前，我们已经记录了以下内容：

·通用语言和定义（图标vs现场与场景）

·最佳方式（文件命名/管理/组织/设置）

·原则

·组件

·质量

·颜色（哪些能使用哪些不能）

·描边

·填充

·形状

·透视

·图形元素

·背景

·一致性处理（什么时候一致性规则可以打破，什么时候不能

·导出

·提出需求（实际上是一步一步，所以我们并不总是需要求助）

 

下来，我们将确定如何处理角色，动画，图标以及其他一些东西。

 

执行

执行很容易（相对而言）任命三个设计师然后就等风格焕然一新。你可以吸引一些利益相关者，尝试对正在做的事情保持透明，让人们对最终结果感到兴奋，但对于这种规模的产品，你只需要选择一个起点。当用户超过20万的托管平台使用您的产品时，通过合作伙伴网络和销售渠道，每个人都与产品的视觉品牌有关系，也对该从哪里开始有明确的认知。

 

这是一个艰难的决定，但这件事也决定了我们在过渡期是否能够平稳度过。也就是说，这个阶段可以在产品上同时使用两种插图样式的时期。不理想。但是当替代方案花费了一些不确定的时间来准备时，我们不能将这个项目视为生存和发展的救命稻草，他是不可或缺的一部分，但最终决定是显而易见的。

 

另一个艰难的决定是确定更新的方向。我们应该从外向内更迭吗？从最小的着力点开始，给自己留出空间，继续更迭新风格，从而避免给每天都在使用产品的用户过度的刺激。还是我们应该从内到外？从最高参与点开始，从使用频率最高的产品开始，并创造机会收集最多反馈从而修正新风格。

 

说实话，我们在如何开始时有些决策失败了。我们选择了前者-由外向内改变，不想对目前使用该产品的用户造成太大的干扰。然后我们改变了想法，并决定在主面板上推进它，从而解决随着新风格变动带来的边界问题。当时我们感觉像是在弥补（我们曾经，但通常没有这种感觉），这无可否认地令人沮丧。但回头看，就像婴儿粥一样，结果恰到好处。

 

从一些空状态和一些边缘物料开始，我们有机会实时完善我们的决策，并重新审视不同的一些元素的处理方法，以便我们作为一个团队一起前进，而不会将另一个团队拖入其中。

 

好的。酷。通过更好地了解新插图样式在应用场景中的样子，我们可以让另一个团队加入，并开始重新设计首页。

 

 

 或者，如果由于某种原因，你拥有人类已知的最大屏幕......我们已经为你准备好了。

 

 虽然我知道你们很喜欢流程，但可能这对你来说无用…

 

 

 

我们已将更新同步到首页。我们可以确认并继续更新 Shopify 的下一个方面 - 上帝知道它已经足够了。但我认为这里我们应该吸取教训，我准备确定哪个是最新最适合的插图样式，就是让问题暴露出来（隐喻地说）。将自己嵌入其他团队 - 每次都换一个。

 

我们将继续延展这个风格，并与其他团队整合，并记录 Shopify 插画风格，目前对于为 Shopify 找到合适的语言和恰当的基调充满信心。

 

我们的下一个项目是调整新的插图风格，以反映 Shopify 其他分支（品牌，营销，文化，视频等）的基调。找到一个明确的 Shopify 独特的语言，并将其翻译成各种不同但相似的风格，彼此互补，以及在多种情境下重复这种语言，最终打造一个有凝聚力，令人难忘和具有力量的体验。