什么是品牌DNA?

品牌DNA包括品牌核心价值品牌个性。具有不同的品牌DNA是品牌之间形成差异化的根本原因。品牌DNA让用户清晰地记住并识别你的产品,成功的延用品牌DNA在产品不同场景中,能够打造区分竞品的差异化设计。

如果一个产品没有树立牢固产品个性,在当今竞争激烈的大环境中,很容易会被淹没,因此产品DNA视觉特征打造是非常迫在眉睫的事情了。

品牌DNA在UI中的优势

1#差异性

独特的特征可以区别或领先于其他竞争产品基因,打造差异化特征, 在内部和外部树立牢固形象,在商业领域吸引更多优质忠实粉丝。

MUJI照片品牌就是一个很好的例子,在商品照片摄影图上系统化定义拍摄调性与处理手法,以达到全局统一。即使没有logo符号,我相信你可以一眼识别出

2#传播性

品牌个性具有强大的自然传播力,前期对品牌塑造深入,自然就会有很多忠实用户为你传播推广,apple在这方面就是很好的榜样。在产品设计、品牌包装、线下门店、宣传单页等都有着统一设计特征,如白色语言就其中一大特征。

3#个性化

品牌个性就如同一样,如果每次见面你穿着的服饰发型说话方式不同,那么你的形象可能就很难在别人心目中建立起来。品牌个性也是如此,如果全局统一一致,就能很好的树立深刻独特印象,并形成竞争力

4#价值感

品牌由低到高分为三个不同的层面, 即知名度 – 美誉度 – 忠诚度。当达到忠诚度这个层面,价值感自然上升。要体现价值感除了自身品牌个性构建,还需要关注社会责任,改变人类的物质生活精神生活(MUJI在这方面做得很好)。

如何定义品牌DNA

前面对品牌DNA的了解,那么我们在UI设计中该如何去打造具有传播力与独特性的产品性格?可从底层去分析视觉语言基础元素;图形、色彩、字体、照片、声音、构成、材质、空间构造这些元素的综合运用打造品牌DNA。

那么下面我们从优秀线上案例中,学习设计方法:

1# LOGO品牌图形打造DNA特征

▲  29cm通过LOGO图形提取,延展到全局设计中,包括移动端WEB端的设计,特别图标最具明显记忆,硬朗直角线性特征。

▲  11street电商产品,也通过将LOGO图形符号,沿用到界面、图标、运营页、宣传页等场景中。

▲  KaKao page动漫产品,运用图形符号打造记忆点,形成传播口碑。

2#运用色彩打造DNA特征

▲  除了前面说的品牌图形各场景的运用,那么国外知名流媒体音乐软件Spotify在打造产品特征上,大量运用互补撞色在各个线上线下场景,不断强化用户心智

在首页专辑封面处理上,他们独特视角处理手法以达到页面统一,并与其他音乐产品形成独特差异化。因此即使你不看LOGO就知道是他们家的产品。

3#大圆角/大字体/白色语言

▲  不知道大家是否留意到苹果DNA打造手法,是我觉得目前在设计领域做得比较好且也很统一的。大圆角特征,从硬件外观产品商品包装和界面内设计语言空间设计等无一不透露着这一明显特征。

大字体也是apple设计语言其中一个独特的个性特征。当时发布后,很多产品跟随这一设计手法。

那么白色设计语言呢?苹果几乎所有门店内装修风格、包括商品展台、产品包装盒、产品硬件、软件设计等有着统一的白色记忆特征。

白色象征简洁纯净。苹果的设计理念就有着易用性,因此在各种场景里面通过合理化去营造这种简单好用的氛围感,线下门店就一个很好的例子。

4#照片/空间/色彩调性

▲  MUJI产品设计理念很多方面值得我们去学习包括色彩、材料选取、形态、包装等,都体现极简主义美学设计风格特征。就是这些独特DNA特征,在用户心中树立了牢固的品牌印象。

比如在色彩上,无印良品就充分考虑了人与环境之间的和谐关系。对于产品界面设计,我们同样也需要考虑到这一点。可能大家没注意到,特别车载场景设计中,考虑到环境对设计的影响是非常重要的一点。

需要遵循原则

在打造产品DNA记忆点时候,最重要的一点就是需要在各种场景中去强化,不断重复运用。

从前面案例分析可以看出,不管是apple还是MUJI的设计,他们都是在全场景里面去运用家族化DNA设计。品牌的核心是创造一个使DNA充实的人格(personality),因此打造一个产品个性,需要从统一形象开始。

同时还需要满足克制的运用,如果运用不当或者用力过猛反而适得其反。比如在图形的提取上就非常有讲究。这里可看看29cm的提取和运用思路。

写在最后

打造产品视觉DNA方法多种多样,我们不能只盯着UI领域那一亩三分地,应该多拓宽视野,看看在设计领域其他做得比较好的。

比如appleMUJI在这方面做得具有代表性,MUJI的照片品牌选材材质的克制应用灵感,都可以运用到界面设计中,spotify的专辑封面设计,就做出很好的榜样。

文章来源:http://www.xueui.cn/tutorials/banner/brand-ui-with-dna-characteristics.html