线上线下如何形塑一致的品牌感知

#开胃

是半生瓜在工作之余做的理想态案例模拟实践。

每期聚焦一个设计相关的选题，

透过理想态案例将我们完整的思考过程及视觉表达呈现出来，

与更多设计师及关心品牌、产品设计细节的相关角色分享我们的见解与观点。

我们知道，没有数据、缺乏用户反馈的理想案例，是无法验证其实际价值的。

所以我们将它比作正餐前的那道“开胃”小菜，

分享料理过程是我们的初衷，

并借此与大家展开更多“食欲”相投的讨论~

本期选题：聊聊线上&线下如何形塑一致的品牌感知

目录：

0.选题背景

1.困境描述

2.案例选取

3.品牌定位及视觉推导

4.线上产品中的品牌形塑

夯实一致性

校正接触点

5.线下品牌延展（完整案例的视觉效果请戳主页）

6.观点总结

选题背景：

对于以无线业务为主的品牌来说，品牌感知不只有一个频繁出场的标识，或是一段屏幕上的短暂旅程。它是由线上和线下共同构成的立体感知，因此品牌的传递需要渗透在每一个细节里。比起热烈地使用品牌色去强调识别性，我们更想去挑战的是：如何把控好线上和线下的每个接触点，共同形塑更立体、更生动的品牌。

困境描述：

在产品业务方向发生转型时，品牌升级与客户端改版之间往往节奏无法同步。

1.客户端的“品牌感知”仅依赖一本VI手册，做些颜色、图形等元素的贯穿使用。其余更多的品牌渗入也大都为“填入式”的，比如设计师画些缺省图、引导页，在加载、刷新等控件上做些关联性设计，就完成了“品牌落地”；

2.品牌在丰富物料延展性的同时，缺乏对落地客户端实际场景的考虑，导致客户端的品牌印象元素随着更多体验问题的暴露，逐步删减、损耗，最终无法在线上形成与线下一致的品牌感知。

案例选取：以每日优鲜的垂类频道-“水果频道”展开思路

品牌定位及视觉推导：

如果说Enjoy对标大众点评的品质升级，是高级、精致的属性，那么我们想要做的品质生鲜，应该是什么样的呢？首先我们对“品质”进行了具象化的讨论和收拢。

通过图片我们发现，我们必须在模糊宽泛的“品质”中找到更明确的方向，稍有犹豫就意味着：品牌感知的形成，将会随着每个分岔路口不够清晰的决定，逐步失去它鲜明的个性。那么，表明品牌个性的是什么？颜色、logo这些不过是手段，真正的核心是“品牌文化”，即我们的产品想与用户一起创造怎样的生活，他们要认同我们输出的观点，才会为我们的服务买单。

所以到这步时，我们没有急于选定方向，而是先停下来思考：用户通过我们的APP下单购买水果，在拿到实物之后，会怎样享用这些水果呢？可能是仔细清洗干净后爽脆的咬上一口，或是认真使用它们为自己、家人料理一顿晚餐，或是某个周末午后邀请朋友一起来制作果酱...这些对“水果”料理场景的想象，让品牌文化越来越清晰。

无论是发迹自日本、由台湾向亚洲广泛传播开来的“小确幸”，还是北欧的Hygge文化，无一不反应着一些用户对“生活仪式感”的追求和渴望。而我们的案例也将搭乘这样的文化属性，继续对品牌进行发想。

在产品名字方面，我们保留了“鲜”的基础含义，添加了一个“作”字。我们希望可以透过“作品”的概念，向用户传达两层意思。一是我们希望用户使用“鲜作"购买食材后，可以重新回到厨房，认真做饭，认真生活，每一道精心烹制的菜肴都是用户的一幅作品，一个美好生活的记录；二是我们贩卖的生鲜都是经过光照雨露的天然之作，是来自大自然的恩赐，强调“新鲜自然”的商品属性。“鲜作”二字外添加的圆形描边，意在用户完成作品时用刻章留下的小小仪式，也是平台售卖品质生鲜的象征标识。同产品名称一样，logo的设计也核准了以上2层含义，此时，产品气质开始成形。

随着“鲜作”核心文化的逐渐清晰，我们以字、色、形、文4个部分继续搭建基础VI内容，而它也将成为孕育品牌的丰厚土壤。

字

logo字体的设计以篆刻感的宋体为主。在这里我们也思考很久，有什么样的字体形式适合“鲜作”的定位。简洁的无衬线字体吗？它虽然轻量感十足，却给人过多科技感受；刚劲有力的粗宋体吗？自然和手作感有，但笔锋犀利，整体感受太过浓烈，粗旷但不细腻。最终我们取其各自特点，将楷体的轻松自然与宋体的韵律感相结合，来表达“鲜作”的品牌文化。

文案字体：以康熙字典字体为主，这款基于宋体为主的字体，在笔画拐角的细节上有着凹凸不平的处理，天然而有韵味，与我们“鲜作”表达的“回归本我”理念不谋而合。

色
以纯净的黑与白为品牌主色。纵观当下诸多生鲜品牌，普遍会以明快、鲜艳的色彩为主。而我们这次的案例，想挑战这样的“规律”，做些“不那么普通”的方案。所以在色彩选取上我们思考，为何不能回归纯粹呢？黑白的色彩倾向很单纯，可以将“鲜作”质朴、自然的理念传递出来，很平凡很手作。

另外，在主色调基础上，我们也加入了墨绿色，它作为“点睛”色，以10%左右的比例来配合主色的使用。

形
“回归本我”的理念让我们的插画表现形式，也从目前流行的电脑绘图，回归到了绘画的基础表现形式---素描。尝试拿起纸和笔，一笔一画的绘制插画。纸上的作品真实而自然，这种手作感也正是“鲜作”所追求的。每幅作品在构图上也有一定de考究，有散有聚，有远有近，去除过多的装饰，一切都以自然为出发点随心而作。

文
文案部分是“鲜作”文化的体现，我们配合八组水果插画来延展文案。再现每个水果令人印象深刻的场景，不只停留在“水果”本身的“营销”，而是通过捕捉生活片段的方式去打动用户，真正将自然、手作所获得的幸福感传递出来。

线上产品中的品牌形塑

目录中这部分写了两点，他们实际上是递进的关系。尤记得几年前，“一致性”做的好，仍是一款优秀产品的90分高能力。如今，做好一致性，不过是界面设计的基础能力了。关于夯实一致性，从方法到实操，大家都比较熟悉，今天主要展开聊下“校正接触点”。

随着“内容化”作为主角频繁出场于产品的重要场景中时，我们的界面设计趋势，越来越趋近于后退的、隐形的、无感的风格，这并不是一味的在追赶流行，而是我们在实际工作中发现，这样去做，更有利于呈现好不那么可控的“内容源”。

“内容源”外露比重的增加，实际上是用户在客户端直接感知品牌的接触点在增加。多数产品将图片调性定义为“好看”，文案“抓人眼球”就可以，专题卡片的内容主题五花八门，在关键场景不能准确的传递产品的核心服务价值...这些接触点都在无形之中，影响着用户对品牌的认知感受，而多数产品目前还未对此引起足够的重视。我们平时举例最多的“楷模”产品，如Spotify、Airbnb等，正是意识到了内容本身即品牌的道理，才能做到“标杆”级别。

我们将端内散落在各场景下的接触点归为以下四类，以这期的理想态案例“鲜作”为例，分别说明。

案例产品“鲜作”除了延续“每日优鲜”基础的生鲜电商属性外，还为用户在购买食材后提供了更丰富的“料理提案”，增加了生活服务属性。所以我们要把电商和服务这两种属性差异较大的内容，通过接触点的校正，最终统一指向我们定义的品牌文化中，即“每一天都值得歌颂，每一餐都是美好时光”。

定义图片调性

图片作为面积最大、最易被用户识别的接触点，是传递品牌认知极为重要的一环。我们可以将用户的线上购买过程，在想象中模拟出对应的线下真实场景，从中提取我们要定义的图片调性。比如，我们对“每日优鲜”水果单品图片的观察发现，它虽然通过圆形托盘在一致性上对水果图片做了规范，但这些图片放入端内，加上高频出现的优惠标签，令用户仿佛身处“热闹却无聊”的超市中，无法传递它品牌里一直在强调的“品质生鲜”。

回溯鲜作品牌文化，我们想在线上构建的是一间食材天然、服务贴心、充满手作气息的“市集感门店”。所以我们对图片调性的定义重点在于图片景别和填充比例的控制上。特写景别用于水果单品拍摄，能够最好地表现水果的线条、质感、色彩等特征。它将水果的局部放大，使用户视觉集中，仿佛近距离观察感受着水果的天然气息。而一致、饱满的图片填充比例，更加强调了“鲜作”的品质感。

搭建文案体系

如果说由于各产品面临的实际境况不同，校正图片调性的落地难度较大，那么在文案这件“小事”上，仍有很多产品处理的较为潦草。一个产品的文案体系，就好像一个人的谈吐，字里行间都在“定义”着自己身上的标签。无论是栏目名称、内容标题，还是异常提醒、新功能引导文案，都应与品牌散发相同的气质。因文案工作涉及到的合作角色较多，且人员流动现象较为常见，所以在新产品立项初期或成熟产品改版期间，应抓住机会对文案体系进行搭建或更新，保证后续多人协作的高质、高效。

收拢内容主题

和内容相关的产品中，一般来说会有两部分组成。一部分是关乎生计的基础内容，一部分是尝试转型或变现的运营内容。比如App Store的基础应用分发和IOS11增加的精品内容TODAY、下厨房的基础菜谱内容和大步商业化的市集内容等。随着产品业务方向的不断调整，我们会发现，这些承载着商业、运营目的的主题内容，以不同形式出现在端内各场景中。关于这部分设计思路，多数产品的逻辑是：要么按照客户端视觉规范做延展性设计，要么以当前内容主题作为依据展开设计，之间没有太多联系。

以Enjoy和Flipboard为例，前者在花式变现的路上陆续添加了多种样式来承载更多的专题内容，与之成长轨迹相似的产品也非常多；后者在内容组织和设计表达上都做得非常节制，并且灵活运用品牌元素做出了内容之间的层次，可惜受众面远比不上风头正劲的头条类产品，这股甘为清流的勇气也是一般产品不敢尝试的。

本期案例我们尝试将这些“内容主题”以品牌为依据进行组织和收拢，继续向一致的品牌调性靠近。

示例1：水果单品运营卡片

前文提到，我们选取了“康熙字典”作为线下物料字体，但它并不适用于线上产品，因此在和线上运营内容相关的字体选取上，我们使用了较为靠近“康熙字典”气质且适用性更好的“华文中宋”。在这个卡片中，经过对图片调性的校正，品牌传达已经完成了大半，剩余空间里，字体的使用思路成为关键。即，这个更具运营属性的字体，应该在标题层级中如何使用，才能最大化的传递品牌？经过以下2个方案的对比尝试，我们发现，宋体字形用在感性文案中，比用在水果名称这样的陈述文案中，更具品牌感。

示例2：用户运营卡片

回想这个卡片的设计思考过程，本质上其实是分场景调节品牌感知度的过程。以下3个方案，体现了3种不同的品牌感知程度，我们要做的是：依据对当前场景的判断，在品牌感较弱与品牌感过度之间，将旋钮（方案）调至最佳位置。

传递服务价值

这一点看标题挺空洞的，因为体现服务的形式大都是综合的、多元的，简单理解就是在对的场景做对的设计，做到准确引导，价值加成。关于这里，我们以Snapseed和VSCO为例，看看他们在用户开始处理图片前的场景中，各自的设计重点是什么。

通过下图我们看到，Snapseed在这一场景强调的是“快速处理”图片的动作，并且为了迎合更大众的用户习惯，最近版本加入了快捷滤镜的服务，想要服务“专业”摄影爱好者的同时网罗更多的小白用户。这些设计思路的变动都是在通过传递服务价值指向更加明确的品牌定位。

VSCO也是如此，它在这一场景想要为用户服务好“创作”的环境，用户既可以即刻开始图片的初次创作，也可以进入“工作室”投入到已有图片的二次创作中。将每一位用户都视作“艺术家”，每一幅通过VSCO诞生的作品都认真对待，这显然和Snapseed的定位是非常不同的。

经过用户的长期使用，两款产品服务价值的差异，也会逐渐清晰的被感知到。

回到“鲜作”案例，在水果详情页的“食谱”场景中，我们有了这样的思考：我们为用户呈现的每一份料理提案，颗粒度都是非常细的，目的就是为了干掉那些无聊的吃法，慢慢让用户发现，原来平日里常见的水果还可以有这么特别的吃法。可是，我们提供的这份服务，如何最大化的令用户感受到呢？只是做到图片精美有食欲、增加图片展示面积营造沉浸感，还是不够的。再度回溯品牌文化，我们想传达的是：用户通过购买食材、料理食物，和自己、和家人、和朋友的交流互动中，留下的那些美好时光。

在这个场景下，我们尝试让食谱拥有“说话”的能力。将做过这个食谱的用户评价数据提前外露出来，以弹幕的形式，向来到此场景的用户“安利”这道料理的美妙之处。而弹幕的滚动效果，又像是料理过程中，咕嘟咕嘟冒出的腾腾热气，将一张精美的静态美食图片，加成的更有烟火气息。

      

      

线下品牌延展（完整案例的视觉效果请戳主页）

观点总结

·品牌是一个立体的形塑过程，想好我们要讲的故事，谨慎、果断的执行每一个决定，对细节反复打磨，直到作品传达出独有的情绪和个性。

·触达用户的每一个接触点，无论是线下物料还是线上产品，都需要向一致的品牌方向校正，做到形神合一、个性明确。

·产品中的品牌形塑，是不断校正接触点的过程。颜色贯穿和排版设计并不能表达品牌，它们是一致性的措施。