家居产品之从LOGO到IP形象的改版过程

4月 21, 2021 发表于: 视觉设计. 评论

前言：这是一个家居APP设计的改版过程，由字节跳动公司团队出品，本文将跟你分享关于居住产品如何从LOGO到IP形象的改版思路，即使你不是做同类产品，但也可以学习这些设计思路来做参考。

家是每个人一生的作品。温柔的触感，自然的光线，暖洋洋的炉火，一个让心灵休息的舒适角落，都承载了家的意义。作为家装平台的住小帮，致力于传递“家”的美好，设计团队也在不断迭代中重新定义了住小帮的设计语言。

随着家装行业由流量竞争迈向服务竞争，住小帮的业务发生了变化，从单纯的内容分发向家装平台转变。用户群体从三四线城市向一线城市渗透。越来越多的用户认可住小帮的同时，我们也意识到现有的品牌无论从深度还是广度上都无法全场景渗透，更无法传达“轻松住好家”的产品初心。基于以上诸多问题，我们决定作出改变。

设计目标和愿景

从产品目标出发，我们制定了设计目标和解决方案。从品牌、视觉和体验三个维度出发，通过改版完成品牌重塑、体验升级、全新视觉语言的提炼，最终在同类产品中形成品牌差异点，提升产品美誉度。

在项目启动之前，我们通过实地调研和用户访谈的方式，走访了不同的角色，包括内部的产品、外部的设计师、用户、商家……大家一致认为：“家”，不单是让人的身体栖息、日常生活的容器，更是让内心安稳、丰富、融洽的地方。

通过收集到的资料，我们用第一视角去体验，分析产品的问题。最终从产品价值、用户体验和用户需求三个维度筛选出四个关键词：专业、实用、轻松和温度。

基于这些关键词做了大量的推导，希望可以找到代表“家”的理念。最初我们尝试过“解剖家”的设计理念，认为足够专业。但在具体的设计中发现，这个理念并不适合住小帮，它无法传递温暖和轻松的感觉。

所以我们摒弃了这个设计理念，回顾之前调研中的一些关键词。将诸多零散的点聚集到一起。家是美好的、是温暖的，希望通过屏幕传递真实的家，让用户感受到设计师的这份心意。

设计理念：美而真实

我们将之前的推导归零后，思路反而更加清晰，用“家”的概念做指引。基于用户和产品的洞察，打破线上、线下的空间维度，让千万家庭触手可及。这个理念一定是有想象空间、有丰富情感、能引领行业、同时设计可落地的。当说出美和真实的时候，我们觉得这就是住小帮所需要的，就是要通过设计为用户带去美好而真实的感受。

在理念的指引下让居住升温，用系统性设计美学向用户传达设计理念，用科技的手段传递真实；这三个设计原则将定义住小帮未来的设计，对设计的好坏进行评判。

1、居住的升温

设计的发心是希望每个人都能体会到“家”的温暖，自然的交互体验、柔软的质感和舒适的色彩都是我们想通过设计传达给用户的。

2、轻松触碰真实

眼见为简，心思为繁。透过屏幕触碰真实。

3、系统性美学

世间万物皆有规律，秩序营造安心的体验，让设计在不同场景和媒介下呈现一致的美感。

虽然有了设计理念和设计原则的支撑，落实到具体的设计上也不是那么一番风顺，需要考虑用户感知、业务方的要求和不同场景的诉求，最终我们打磨出住小帮的设计体系。

logo：居住空间的演变

用户初次和品牌的情感连接是通过logo传递的。家中的一花一草、日常摆设组成了住小帮的logo。在旧版本的基础上，进行了三个部分调整：

1、从设计原则出发对颜色进行了降噪，经过多次的对比和筛选寻找合理的颜色搭配；

2、品牌升温，去掉尖锐的图形，降低紧张感，创造一种轻松的氛围；

3、对笔画间距进行调整，让松散的结构更加紧凑、聚焦，最终我们敲定了“住”字的形态。

颜色：情感价值的渗透

除了全新的LOGO，颜色也是非常重要的品牌识别要素，同时也为产品功能和情感价值发声。

提供专业的内容与服务是住小帮的产品功能性价值，是核心也是基础；品牌真正增加核心竞争力的部分是创造情感性价值。而打造一个有温度的平台，正是我们想带给用户的情感性价值。我们通过科学理性的手段将住小帮的颜色系统进行了感性的“升温”。H（色相）、S（饱和度）、B（明度）每个数值的调整变化，都是“升温”中重要的存在。我们相信，“家”是以身体和情感来寻求希望的空间，只要有向往，家就有温度。

围绕主品牌色拓展相应的颜色色板，针对不同的服务角色定义了颜色的搭配方式，既满足不同的服务场景，也为视觉应用提供了更多可能性。

图标：合适的平衡点

在金刚位风格的探索中，我们一直在寻找最适合用户的设计。通过质感的隐喻与叠加，如有机玻璃、金属材质等，沿用Logo 的品牌基因作为内核，在元素搭配组合上多动脑筋，给用户带来由内而外一致的视觉体验。

基于此我们确定了大金刚位的风格，小金刚位进行了多版探索，通过数据验证为后续的设计指明了方向。系统图标更加轻量化，拐角设计更加柔软；为了保证一致性能渗透到细节，我们对线宽、圆角、角度和层次制定了规则。

界面：高效的信息触达

住小帮通过界面服务C端用户，如何帮助他们迅速找到装修灵感、看得懂复杂的装修知识、获得专业可靠的装修服务是设计的核心。我们主张将分发入口结构化，从用户场景出发强化核心功能入口，让首页重点突出，结构明确；更多的横滑金刚位以便我们为用户带来更多有价值的工具服务，并且在首页保留了用户喜欢的内容双流形式。

除此之外，调整色彩搭配方式，使用中性色与主色的搭配来衬托品牌感，同时能够减少App中颜色太多太重的问题。完善栅格系统去控制页面韵律，使不同场景的页面也能保持统一的美感。整体看起来更加稳定、透气，而感到轻松。在工具产品设计中，通过简单轻量的交互和真实家装效果的还原，让用户轻松触碰真实。

界面的调整让我们准确地传达平台服务内容，更高效进行流量分发，同时用户也能更快更轻松找到自己想要东西，让用户能有更舒适的阅读体验，快速建立对住小帮的认知。

界面的调整让我们准确地传达平台服务内容，更高效进行流量分发，同时用户也能更快更轻松找到自己想要东西，让用户能有更舒适的阅读体验，快速建立对住小帮的认知。

插画：生活情景的传递

如何能更大限度的将用户代入到产品中，看到品牌构建的理想家居世界，插画系统起到了至关重要的作用。以一家人为主角，家装过程中特殊的角色作为配角进行绘制；用了市面中较为少见的单线风格，轻松的表现手法制作了完整的插画组件系统。

IP：住小帮的灵魂角色

IP探索上想通过“住小帮”这个名字寻找一个有趣的点，我们发现在装修过程中所有人都希望有个帮手，这里找到一个讨巧的办法，用英文hand和help做了结合，有了自己名字的help-and小帮诞生了。

我们做的每一个设计、画的每一个草稿，其实都是对未来的一种规划。希望住小帮的设计不仅仅停留在日常审美的表现层，而是能赋予更大的社会价值。从此让装修不再难，轻松装好“家”。

作者 | 字节跳动IVUX
来源 | 站酷（zcool.com.cn/u/18557208）

赞助商链接