如何将品牌基因融入到产品设计中?这是高级设计师的方法!

2018/04/12 6413

@苏大牙牙牙 :日常工作中你有没有遇到,自己做的设计很难跟竞品产生差异?只能盲目追逐趋势缺少自己的独立思考?做不出符合自己产品品牌调性且独一无二的设计方案?

在互联网产品设计越来越同质化的今天,做出有自己品牌调性和差异化的产品,是每个设计师要面对的挑战。

今天大牙就跟你一起分析下,如何将品牌基因融入到产品设计中,从而提升产品的识别度。

一、什么是品牌基因

品牌基因也就是品牌的 DNA,它包括品牌核心价值和品牌个性,不同的品牌基因,是各品牌之间形成差异化的根本原因。

成功的延用品牌基因在产品不同场景中,能让用户一眼就能看出这是你的产品。

下面举几个传统行业比较经典的案例来感受一下。比如:当你看到下面这块格子纹理时,你会想到什么品牌?

对,棕色格子让你想到了 burbrry,这就是品牌基因的力量。同时在每年的新款,不断把品牌基因延续到产品中,能够增强品牌感知,强化自己的定位。

再比如,保时捷前车灯的设计(青蛙眼)。这种比较有差异性的外观设计,被严格的应用到所有保时捷的汽车产品中,就算你遮住它车上的 logo,也能一眼看出它的品牌。

再举个互联网产品的例子吧,看下图虽然都是二维码页面,但是大面积的颜色,就能让你很直观的分辨出是谁家的产品。

因为蓝色属于支付宝的品牌基因,绿色属于微信的品牌基因。同时这两种颜色,在支付过程中,也会给用户带来安全的品牌感知。

当然,品牌基因是一门比较广的学问,在不同领域包含的维度也不同。

比如:在传统行业里,甚至某种服务(海底捞),某种说话语气(优衣库导购抑扬顿挫地说,欢迎光临,随意挑选~ ),都是品牌基因的一部分。

由于我们都是设计师,所以今天重点围绕的是品牌基因里「视觉」这个维度。

二、如何定义品牌基因

说了那么多别人家的品牌基因如何厉害,那么如何定义自己家产品的品牌基因呢?

通过分析发现互联网产品中,有两种常用来定义品牌基因的方法:LOGO提取法、品牌故事提取法。

1. LOGO 提取法

LOGO,通常是奠定品牌基因的基础,通过提取 LOGO 中的基因,沿用到产品的不同场景中,从而提升品牌的识别性。

一般情况下可以从两个维度提取: LOGO 的「形」、 LOGO 的「色」。

LOGO 的「形」:把 LOGO 的形状当作视觉符号,提取出来,进行延续和拓展。比如:美团外卖的袋鼠形象,在图标的设计和下拉刷新上都进行延续性的处理,品牌感知更强。

LOGO 的「色」:从 LOGO 中提取比较有特色或代表性的颜色,当作品牌基因,也是常见的一种方式。

比如:抖音的 LOGO,比较符合年轻化的用户群体,产品的定位。

提取 LOGO 的颜色,结合着「抖」的主题,运用在产品不同环节,建立与品牌的联想,让人看到这些设计就会知道是抖音的。

包括下面视频中女生的眼妆,都是抖音的品牌基因配色。

视频地址:http://v.youku.com/v_show/id_XMzQyODk4NTM5Ng==.html

以上是 LOGO 提取法,通过对形和色的提取及运用,加深用户对产品定位的感知,强化品牌识别性,是比较常用的一种方式。

2. 品牌故事提取法

另一种方式,是品牌故事提取法,通过对品牌的定位梳理出品牌故事,从而推导出品牌性格,最后提取出视觉语言,辅助图形。

比如:网易严选,是网易自营类家居生活品牌 App,秉承严谨的态度甄选天下优品(品牌定位)。

使用场景是,用户躺在懒人沙发上悠闲的看着书,坐在窗边惬意的喝着茶,抑或是靠在阳台上享受午后的阳光。他们不紧不慢,追求品质,享受宁静(品牌故事)。所以,品牌关键字是品质、生活、宁静(品牌性格)。

从品牌关键字提取到的设计语言是细节化、场景化、简约化(品牌基因)。

那么,网易严选底栏的 icon设计,都是以家具为原型衍化而来,给人以场景感,真实且生活化的感受,传达出品牌的基因。

包括登录页面的设计,运用大面积留白空间的商品图,加上自然的投影,给人营造简约中带着场景感,细节感,无形中透露着品质,生活,宁静的基因。

以上是品牌故事提取法,相比 LOGO 提取法来说,它更为抽象,是围绕着品牌基因关键词,进行拓展和延续在产品不同场景,达到视觉感官的一致性。

三、哪些环节适合融入

上面分析了什么是品牌基因,如何定义品牌基因,下面要说一下产品中哪些环节适合融入品牌基因,来提升产品的识别度。

通过分析市面上产品,可以大致分为四个维度进行融入:ICON、板式、缺省页面、动效。

1. ICON

ICON,是最能够让用户产生品牌感知的地方,也是设计师发挥空间较大的地方。

比如:陌陌的 ICON 设计,是提取了 LOGO「形」和「色」,进行基因延续( LOGO 提取法),形成自己独特且具有识别性的设计语言。

「更多」页面 ICON 的绘制,也是延续 LOGO 的处理手法。

就连照片编辑页面的笔刷颜色,也是运用品牌一致的配色,使品牌感知更强烈 。

好好住,也是通过对 LOGO 的「色」进行提取,运用到自己的 ICON 设计上。

有道精品课,底部的 ICON 风格,提取了 LOGO 的绿色和半透明的基因,在未选中的灰色 ICON 上也进行这种处理手法的延续。

爱奇艺的「泡泡」,是品牌做的比较好的模块,因为它既延续了爱奇艺的主色「绿色」,同时,针对泡泡的用户群体,又做了跟爱奇艺差异化,符合定位的趣味化处理,对母品牌基因,做了很好的延续和差异。

2. 排版

一个界面的排版方式,是给用户的第一感受。如何作出符合产品定位且具有识别性的排版设计,是很多设计师面临的挑战。它不能像 ICON 一样运用 LOGO 提取法就可以搞定,更适合的是采用品牌故事提取法。

比如:轻芒,一款碎片化高品质的阅读 APP,定位有趣味有品味又小众的用户,营造出一种杂志捧在手心里的感受。因此它的品牌基因就是:高品质、小清新、生活。

下图可以看出,整个排版方式跳脱常规的设计规范,更贴近纸质杂志的感受,而且大面积的留白及高端的配图,也体现了它高品质的品牌基因。

虾米音乐,最近刚更新的新版本7.0。也是在前几个月在线音乐平台版权归属调整后,一个比较大的动作。这次改版也能看出来虾米音乐在找自己全新的定位,从「小而美」到「美而潮」。

改版后,将全新品牌定位也融入到了页面排版中,更加大胆。同时顶部分类导航的处理,更符合音乐产品的调性,从而增强了品牌的识别性。

下面这个页面的版式,不仅沿用了品牌色,同时「三角形」的元素也是沿用 LOGO 的基因,进而增强品牌感知。

好好住,一款室内装修的 app。由于最近需要装修房子,所以朋友推荐给我这个 APP。下载之前觉得一个装修的产品嘛,应该带有浓浓的施工队儿风。但是,等我下载后,忍不住说了感叹。

因为一个装修 APP 做的如此清新脱俗,可以说很有灵魂了,非常符合本屌丝的气质。

它的定位是针对年轻人,有了自己的小房子后,来这里找一些家居设计的方案,以及交流社区。因此这种简洁且具有情感化的排版方式,加上趣味化图标和插画点缀,很符合它的品牌调性。

3. 缺省页面

缺省页面也是我们常说的空页面,一般会有一些功能的引导,或者由于异常情况,消除用户焦虑感的设计。

它的特点是空间比较大,因此里面的插画配图,很适合对品牌基因进行延续,来强化用户对品牌的心智。

比如:TIM,是腾讯出的一款专注办公,多人协作以及沟通的软件。整个产品的视觉基因是比较尖锐体现效率的切角,因此在空页面上也做了视觉延续。

企鹅 FM,腾讯出的电台产品。它的空页面插画设计,是提取了 LOGO 和界面内 ICON 的基因,从圆角的处理到颜色,虽然很简洁,但很有自己的品牌调性。

Google photos 的空页面,是以场景化进行引导。插画的风格沿用 Google「面」状的处理手法,采用不同明度的灰色进行处理,形成自己独特的设计风格。同时又符合 Google 整体的母品牌基因。

4. 动效

除了静态的图形设计,动效也是品牌基因延续的关键要素。一个好的动效,不应该只追求表面的酷炫效果,而是能够满足功能表达,延续品牌基因。

比如:开眼的加载动效,就是对 logo 的一种延续。

马蜂窝的下拉刷新动画效果,也是提取 LOGO 的基因。

airbnb 的空页面引导动效,每一个元素都是说明 airbnb 所包含的内容,比如:饮食,户外运动,旅行,居住……同时在用色上也保持跟主色一致,具有明确的品牌识别性。

五、总结

总的来说,学会定义自己产品的品牌基因,合理的将其融入在产品中的点点滴滴,从而提升产品的品牌调性和识别性,是身为设计师最应该努力去做的。

而不是盲目的跟着设计趋势走,因为只有符合自己品牌定位的设计语言才是经典的、具有识别性的、具有说服力的,而跟趋势的你,终将被趋势所抛弃。

欢迎关注作者的微信公众号:「大牙的设计笔记」

「用品牌基因法做设计」

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/brand-genes-integrated-into-product-design

好文 界面设计 UI 平面设计 转场动效 交互设计师 设计师 设计师专访 扁平化设计 排版布局 设计流程 职场 用户体验设计 素材下载 视觉设计 配色 web前端开发 设计规范 海报设计 AI教程 产品设计 字体下载 设计理论 设计趋势 神器下载 动效设计 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 用户体验 优秀网页设计 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里