赞助商
立即赞助

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

品牌设计3年前 (2021)更新 流光
2.4K 0 0

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

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

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

一、什么是品牌基因

品牌基因也就是品牌的 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 所包含的内容,比如:饮食,户外运动,旅行,居住……同时在用色上也保持跟主色一致,具有明确的品牌识别性。

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

五、总结

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

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

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

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

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

字体是界面设计中重要的构成要素之一,它能辅助信息的传递,是文字的外在表现形式;字体还可以通过其独有的艺术魅力,表达情...
信息层级
在设计系统中字体的重要性不用再多说,这篇文章主要和大家聊聊设计系统中「完美」的字体系统是如何搭建与维护的。本字体系统...
字体
通常每年进入下半年之后,设计趋势通常都会呈现出一种比较稳定的状态,不太会出现很独特的变化。不过,在具体的设计项目当中...
2018设计趋势
这篇文章要为大家解析空白页的存在意义及设计技巧,希望对你有益。 一. 概念 空白页是什么? 空白页指的是当前页面内容为空...
加载设计
我们每天都在设计图标,并且保持这样的状态超过15年。身为设计师,想必你已经阅读过很多关于图标设计的文章,但是今天的文章...
ICON
很多人在这个信息爆炸的移动时代,更想看到一些所谓的「干货」,干货到底是什么,可以直接拿来上手的是干货吗?还是需要你经...
交互模式
你有没有尝试过各种各样的能够影响用户行文的设计策略和设计方法?无论是指向性明确的配色方案,还是 A/B 测试,抑或是在着陆...
Adam Fard
@CDYdesign :每当提到设计方法论时,总难免会给人一种比较虚空偏理论,或者说比较难应用到设计实战中的感觉;但是这一次,经...
经验分享