原文链接:https://www.zcool.com.cn/article/ZMTI0MjY1Ng==.html

文章主要讲述住小帮设计团队对居住产品的理解和改版过程
家是每个人一生的作品。温柔的触感,自然的光线,暖洋洋的炉火,一个让心灵休息的舒适角落,都承载了家的意义。作为家装平台的住小帮,致力于传递“家”的美好,设计团队也在不断迭代中重新定义了住小帮的设计语言。

改版背景

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

设计目标和愿景

从产品目标出发,我们制定了设计目标和解决方案。从品牌、视觉和体验三个维度出发,通过改版完成品牌重塑、体验升级、全新视觉语言的提炼,最终在同类产品中形成品牌差异点,提升产品美誉度。
字节|居住的升温:住小帮改版之路 - 图1

前期分析

在项目启动之前,我们通过实地调研和用户访谈的方式,走访了不同的角色,包括内部的产品、外部的设计师、用户、商家……大家一致认为:“家”,不单是让人的身体栖息、日常生活的容器,更是让内心安稳、丰富、融洽的地方。
字节|居住的升温:住小帮改版之路 - 图2
通过收集到的资料,我们用第一视角去体验,分析产品的问题。最终从产品价值、用户体验和用户需求三个维度筛选出四个关键词:专业、实用、轻松和温度。
字节|居住的升温:住小帮改版之路 - 图3
基于这些关键词做了大量的推导,希望可以找到代表“家”的理念。最初我们尝试过“解剖家”的设计理念,认为足够专业。但在具体的设计中发现,这个理念并不适合住小帮,它无法传递温暖和轻松的感觉。
所以我们摒弃了这个设计理念,回顾之前调研中的一些关键词。将诸多零散的点聚集到一起。家是美好的、是温暖的,希望通过屏幕传递真实的家,让用户感受到设计师的这份心意。
字节|居住的升温:住小帮改版之路 - 图4

设计理念:美而真实

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

设计原则

在理念的指引下让居住升温,用系统性设计美学向用户传达设计理念,用科技的手段传递真实;这三个设计原则将定义住小帮未来的设计,对设计的好坏进行评判。
字节|居住的升温:住小帮改版之路 - 图5

1、居住的升温

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

2、轻松触碰真实

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

3、系统性美学

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

设计呈现

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

logo:居住空间的演变

用户初次和品牌的情感连接是通过logo传递的。家中的一花一草、日常摆设组成了住小帮的logo。在旧版本的基础上,进行了三个部分调整:
1、从设计原则出发对颜色进行了降噪,经过多次的对比和筛选寻找合理的颜色搭配;
2、品牌升温,去掉尖锐的图形,降低紧张感,创造一种轻松的氛围;
3、对笔画间距进行调整,让松散的结构更加紧凑、聚焦,最终我们敲定了“住”字的形态。
字节|居住的升温:住小帮改版之路 - 图6
字节|居住的升温:住小帮改版之路 - 图7

颜色:情感价值的渗透

除了全新的LOGO,颜色也是非常重要的品牌识别要素,同时也为产品功能和情感价值发声。
提供专业的内容与服务是住小帮的产品功能性价值,是核心也是基础;品牌真正增加核心竞争力的部分是创造情感性价值。而打造一个有温度的平台,正是我们想带给用户的情感性价值。我们通过科学理性的手段将住小帮的颜色系统进行了感性的“升温”。H(色相)、S(饱和度)、B(明度)每个数值的调整变化,都是“升温”中重要的存在。我们相信,“家”是以身体和情感来寻求希望的空间,只要有向往,家就有温度。
字节|居住的升温:住小帮改版之路 - 图8
围绕主品牌色拓展相应的颜色色板,针对不同的服务角色定义了颜色的搭配方式,既满足不同的服务场景,也为视觉应用提供了更多可能性。
字节|居住的升温:住小帮改版之路 - 图9

图标:合适的平衡点

在金刚位风格的探索中,我们一直在寻找最适合用户的设计。通过质感的隐喻与叠加,如有机玻璃、金属材质等,沿用Logo 的品牌基因作为内核,在元素搭配组合上多动脑筋,给用户带来由内而外一致的视觉体验。
字节|居住的升温:住小帮改版之路 - 图10
基于此我们确定了大金刚位的风格,小金刚位进行了多版探索,通过数据验证为后续的设计指明了方向。系统图标更加轻量化,拐角设计更加柔软;为了保证一致性能渗透到细节,我们对线宽、圆角、角度和层次制定了规则。
字节|居住的升温:住小帮改版之路 - 图11

界面:高效的信息触达

住小帮通过界面服务C端用户,如何帮助他们迅速找到装修灵感、看得懂复杂的装修知识、获得专业可靠的装修服务是设计的核心。我们主张将分发入口结构化,从用户场景出发强化核心功能入口,让首页重点突出,结构明确;更多的横滑金刚位以便我们为用户带来更多有价值的工具服务,并且在首页保留了用户喜欢的内容双流形式。
字节|居住的升温:住小帮改版之路 - 图12
除此之外,调整色彩搭配方式,使用中性色与主色的搭配来衬托品牌感,同时能够减少App中颜色太多太重的问题。完善栅格系统去控制页面韵律,使不同场景的页面也能保持统一的美感。整体看起来更加稳定、透气,而感到轻松。在工具产品设计中,通过简单轻量的交互和真实家装效果的还原,让用户轻松触碰真实。
界面的调整让我们准确地传达平台服务内容,更高效进行流量分发,同时用户也能更快更轻松找到自己想要东西,让用户能有更舒适的阅读体验,快速建立对住小帮的认知。
字节|居住的升温:住小帮改版之路 - 图13
界面的调整让我们准确地传达平台服务内容,更高效进行流量分发,同时用户也能更快更轻松找到自己想要东西,让用户能有更舒适的阅读体验,快速建立对住小帮的认知。

插画:生活情景的传递

如何能更大限度的将用户代入到产品中,看到品牌构建的理想家居世界,插画系统起到了至关重要的作用。以一家人为主角,家装过程中特殊的角色作为配角进行绘制;用了市面中较为少见的单线风格,轻松的表现手法制作了完整的插画组件系统。
字节|居住的升温:住小帮改版之路 - 图14
字节|居住的升温:住小帮改版之路 - 图15

IP:住小帮的灵魂角色

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

结束语:

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