产品设计同质化严重，那如何以品牌的角度做产品？

本文授权转载自：芝士追光（ID：Dcheese2022）

最近几年我们发现一些同类手机 APP 出现雷同相似现象，大家感觉很多产品越做越像，界面也越做越一样……面对产品设计同质化这个问题，单纯从UI界面做文章，其实很难让产品能找到自身的差异和独特性。所以，部分一线大厂设计团队尝试从品牌角度进行产品UI升级。

所谓“万物皆品牌”，意思是万事皆以品牌先行，拥有品牌特性的页面会更容易让用户记住，也会为产品带来更大的附加价值。本篇文章将作为这个系列主题的第一篇，先围绕一些基本的设计知识点说起。

01

产品主界面的品牌属性体现

产品界面植入品牌元素，会加强产品本身的独特和差异性。我们最常见的就是品牌元素在App主要界面中的植入，下面我将几种基本形式进行了梳理罗列：

1.以主品牌色为中心，打造产品的品牌印象

色彩是与品牌认知度息息相关的视觉主要构成要素，我们提到星巴克、蒂凡尼，脑海中会自然而然联想到和这些品牌相关联的颜色，星巴克的绿色、蒂凡尼的蓝色，这就是品牌色的作用。‍

色彩作为品牌传达中重要的要素，自然在UI页面设计中也发挥着不可忽视的作用。大脑对于色彩的记忆度要高于图形，一个App能否给用户留下印象，大部分作用在于界面的色彩。

比如，B站bilibili界面传达的品牌粉色印象，产品的色相让用户很容易能认出这是哪款产品。一些UI设计师喜欢用多种颜色来丰富页面，虽然会让页面看起来很丰富，但越简单的颜色才越容易让用户记住，因为色彩是品牌在用户心中构建品牌辨识度的第一步。

2.IP吉祥物形式

国内很多App都比较重视IP吉祥物与产品的绑定，在UI设计中也非常常见。当然这也取决于你的logo是不是吉祥物（比如盒马和京东的logo本身就是吉祥物形式）。

或是品牌名称中是否有与吉祥物直接相关的词汇。（比如“闲鱼”可以直接想到“鱼”）

3.植入logo形式：顶部直接放

品牌logo单纯植入是比较保守稳妥的一种方式，大部分产品App都采用了将logo直接呈现于首页中。

还有的产品首页原本看不到logo，但只是在截图时会自动添加logo，也是一个比较机智的做法。（比如美团和豆瓣，界面本身没有logo，只有手机截屏时，会自动添加logo，又是一个小细节。）

4.植入logo形式：底部导航

有一些单个文字类的App图标logo，直接放在底部导航位置，我感觉是比较完美的形式，既可以作为主要按钮操作，又能完全将品牌形象展示出来。

相比下，多于两个字的logo，使用在按钮位置时，字体周围的空间如果太大，在视觉呈现上文字就会显得小一些。不过现在用户的手机基本都是大尺寸屏幕，所以识别使用上还算OK。

5.植入logo形式：搜索框内

一些搜索工具类App，像百度、Naver这种会把logo展示在搜索框里，也是一个很好的植入形式，而且也能体现出产品的搜索属性。

6.logo以icon变化形式出现在底部导航区

一般App为了与页面icon风格匹配，UI设计师会对logo图形进行重新设计，让其看起来更像个icon，以便于在页面中使用。

细心的同学会发现，网易音乐的图标图形有刻意变细，也是为了跟底部其他icon风格搭配。

7.产品名称+品牌色

最后一种直接将产品名称名放在主界面展示，同时底部导航配合主品牌色，这样既简单又直观，名字是最直接能让用户记住的信息，微信产品这种形式也是非常聪明的做法。

8.还有任性一些的，主界面不出现品牌元素

当然还有一些产品在主页面里基本找不到品牌相关的元素，也许是因为用户体量足够大。不过只是从视觉角度看，确实少了一些品牌识别点。比如下面一组截屏（下图）大家只根据页面截图，能快速猜到是哪款产品吗？

以上只是简单列举了一些UI主界面常用的品牌元素植入形式，但也只是产品借力品牌的第一步，实际项目中需要更多利用品牌主导设计的操作。以下举例品牌符号应用比较好的几个案例，也都是大家比较熟悉的App。

02

案例分析一：飞猪App

在品牌超级符号的使用案例中，除了大家再熟悉不过的天猫“猫头”，其次就是像飞猪这种，算是做的比较成功的案例了。飞猪是阿里巴巴旗下的综合旅游出行服务平台，最近看到App图标风格也进行了换新。

飞猪IP吉祥物头部造型本身就有独特的记忆点，经过外形直接提炼，就是一款非常简洁且有识别性的视觉符号。而且在其设计延展中也超级好用。（比如应用在字体笔划、界面的风格、按钮、或是营销海报中。）

超级符号一般是偏简洁且有较强记忆识别度的图形，下面一组（下图）大家是否能够很容易想到对应的品牌呢？

但很多同学在超级符号设计推导中，最后推导出一个正圆、正三角形、正方形……一般这种基本的图形形态是不能算作超级符号，只能作为一个基本的图形元素。因为，用正圆形作为超级符号使用，对于品牌是毫无辨识度和意义的。

举个简单的例子，你能从（上图）一排基本方、圆、三角、菱形的图形元素中，能联想到什么品牌吗？所以，答案显而易见。

另外，再说说页面插画。用在产品页面里的插画，我们称之为 “产品情感化” 设计。这些“情感化设计”的作用，就是通过这种软性的设计调动用户的情绪，以降低用户在产品操作时，那些需要等待加载过程中产生的焦虑感。

插画本身的创作也需要与业务呼应，融入故事性和行业属性。比如飞猪是一款旅游出行产品，那么就插画的创作就可以围绕旅行故事展开。

不管是手绘风格还是3D形式，这种简单的小场景让用户有很强的代入感。我们经常听到“要让冰冷的产品变得有温度”，就是要让用户通过一些人性化的体验细节感受到产品的温度，一款有差异性的产品就是这么做出来的。

03

案例分析二：闲鱼App

闲鱼是一个典型的“重IP形象”的设计案例，虽然图标logo是文字形式，但页面中除了大量的品牌黄色使用之外，更多侧重于对于IP形象的挖掘。

比如功能引导提示、头像、空状态页……但凡能出现的，都少不了这条胖子鱼的身影。因为IP形象延展设计都比较可爱有趣、很生动……所以在页面中大量的出现，也不会让人排斥它。

IP卡通形象比较考验设计师对于表情动作细节的拿捏，眼神表情、肢体动作、道具、情绪的表达……如果没有找到那个“萌点”，表情动作就会显得生硬，这样就很容易把一款IP形象做呆。

除了IP形象的大量使用，页面中icon的风格也看起来较为统一，主icon使用粗黑色描线风格，这种略带粗旷的感觉与品牌调性倒也显得挺搭。

04

结尾总结

其实，怎样以品牌角度做产品是一个比较大的话题，需要展开的内容还有很多。比如：如何通过品牌语言推导产品的页面风格调性？产品的形色字质构这些如何通过品牌方向去设定？当一个新产品logo还没有时，要与产品UI同步进行，设计师该如何向前推进？等等这些都是可以展开讨论的话题，后期也会通过公众号不定期与大家分享。

韩国的Naver最开始旗下有很多不错的App，每个App不同设计师负责。由于最初没有统一规范的品牌设计语言指导，导致旗下的所有App设计风格和体验的不一致。经过后来通过统一品牌设计语言和理念，才是目前大家所能看到的App设计的标杆典范。（上图大部分都是Naver旗下App）

未来互联网进入存量时代，一个产品想要从同类同质化的产品中跳脱出来，品牌将起着关键作用。如何在用户心智中深深植入品牌？很多UI设计师也越来越意识到，不能局限于界面的视觉表现层，需要了解业务和品牌，将品牌作为设计规范的重要指导原则，以此建立基于“形色字质构”的视觉语言基础，这样也可以大大提升设计决策的效率。

文章转载：芝士追光，版权归原作者所有

https://mp.weixin.qq.com/s/qdlE8Lh2qR_VDF6drla4PQ

版权声明：“IXDC”所推送的文章，除非确实无法确认，我们都会注明作者和来源，本公众号对转载、分享的内容、陈述、观点判断保持中立，不对所包含内容的准确性、可靠性或完善性提供任何明示或暗示的保证，仅供读者参考。部分文章推送时未能与原作者取得联系，若涉及内容或作品等版权问题，烦请原作者联系我们，给出内容所在的网址并提供相关证明资料，我们会核查后立即更正或者删除有关内容！本公众号不承担任何责任，并拥有对此声明的最终解释权。

联系微信：Meia_99

联系电话：15011717572

终审 | 苏菁

编辑 | 廖金婷

点这里，学习更多设计知识！