自如智能改版

用户头像
北京/UI设计师/1年前/120浏览
自如智能改版
设计是连接用户与产品的重要桥梁,智能家居产品更需注重用户体验。本文将针对自如智能618设计改版,探讨基于用户场景行为的交互体验设计,并分析全屋智能商城首页改版思路。
2020年初,自如智能UX团队开始推动设计语言的全面升级。历经数月各部门设计师的共同努力,我们终于迎来了迄今为止最大的变革。全新的 Aurora Design,智慧过人的灵犀助手,沉浸式体验和暗黑模式,以及强大的性能提升,期望带给用户全新的Zhome体验。
自如智能改版(图ZMzgwMTYxNjQ0) - 交互/UE - 站酷设计师温迪学姐的视界原创素材 - 站酷ZCOOL
收藏
品牌名称“灵犀”的诞生,为设计师们带来了全新的挑战。经过三轮深入的头脑风暴,我们逐渐厘清了品牌基因、品牌图形以及品牌升级的目标。最终,设计改版的方向明确为四个核心领域:品牌重塑、情感化设计、用户场景交互体验升级,以及栅格系统与组件库的搭建。
自如智能改版(图ZMzgwMTYxNjQ4) - 交互/UE - 站酷设计师温迪学姐的视界原创素材 - 站酷ZCOOL
收藏
一、双重属性下的品牌重塑
A1. 品牌升级-情绪版
此次品牌升级,我们将品牌形象进行了全新的演绎,使其更具情感温度和亲和力。通过视觉元素的优化和色彩搭配的调整,我们希望传递出更加积极、温暖的品牌形象,与用户建立更加紧密的情感连接。
自如智能改版(图ZMzgwMTYxNjU2) - 交互/UE - 站酷设计师温迪学姐的视界原创素材 - 站酷ZCOOL
收藏
A2. 颜色定义及使用比例
在色彩方面,我们进行了细致的研究和规划。我们定义了主色调、辅助色和点缀色,并规定了它们的使用比例,以确保整体视觉效果的协调统一。同时,我们还设计了颜色梯度,使色彩更加丰富和层次分明。
自如智能改版(图ZMzgwMTYxNjgw) - 交互/UE - 站酷设计师温迪学姐的视界原创素材 - 站酷ZCOOL
收藏
自如智能改版(图ZMzgwMTYxNjg0) - 交互/UE - 站酷设计师温迪学姐的视界原创素材 - 站酷ZCOOL
收藏
自如智能改版(图ZMzgwMTYxNjg4) - 交互/UE - 站酷设计师温迪学姐的视界原创素材 - 站酷ZCOOL
收藏
A3. 基础图形
我们设计了一系列基础图形,包括圆形、方形、三角形等,它们将成为品牌视觉体系的重要组成部分。这些基础图形将应用于不同的场景和元素,增强品牌的辨识度和一致性。
自如智能改版(图ZMzgwMTYxNjky) - 交互/UE - 站酷设计师温迪学姐的视界原创素材 - 站酷ZCOOL
收藏
自如智能改版(图ZMzgwMTYxNzAw) - 交互/UE - 站酷设计师温迪学姐的视界原创素材 - 站酷ZCOOL
收藏
自如智能改版(图ZMzgwMTYxNzA0) - 交互/UE - 站酷设计师温迪学姐的视界原创素材 - 站酷ZCOOL
收藏
自如智能改版(图ZMzgwMTYxNzA4) - 交互/UE - 站酷设计师温迪学姐的视界原创素材 - 站酷ZCOOL
收藏
自如智能改版(图ZMzgwMTYxNzEy) - 交互/UE - 站酷设计师温迪学姐的视界原创素材 - 站酷ZCOOL
收藏
自如智能改版(图ZMzgwMTYxNzE2) - 交互/UE - 站酷设计师温迪学姐的视界原创素材 - 站酷ZCOOL
收藏
自如智能改版(图ZMzgwMTYxNzIw) - 交互/UE - 站酷设计师温迪学姐的视界原创素材 - 站酷ZCOOL
收藏
二、情感化设计在品牌升级中的应用
B1. 语音助手
随着智能家居的普及,语音交互逐渐成为人机交互的重要方式。此次升级,我们将情感化设计融入语音助手的设计中,旨在打造一个更加聪明、善解人意、富有情感的智能伙伴。
自如智能改版(图ZMzgwMTYxNzQw) - 交互/UE - 站酷设计师温迪学姐的视界原创素材 - 站酷ZCOOL
收藏
B2. 单眼灵感来源
我们参考了科幻电影《太空漫游:2001》中人工智能的形象,提取了单眼元素,并对其进行无害化处理,使其更具亲和力。单眼成为传递信息与情绪的窗口,增强用户与语音助手的情感连接。
自如智能改版(图ZMzgwMDk3MDMy) - 交互/UE - 站酷设计师温迪学姐的视界原创素材 - 站酷ZCOOL
收藏
自如智能改版(图ZMzgwMDk3MDM2) - 交互/UE - 站酷设计师温迪学姐的视界原创素材 - 站酷ZCOOL
收藏
B2. 小灵小犀
为了赋予品牌形象更加鲜明的性格,我们设计了“小灵”和“小犀”两个视觉形象。它们分别代表了白双子和小黑子两种不同的性格特征,用户可以根据自己的喜好选择与之互动。
自如智能改版(图ZMzgwMDk3MDQw) - 交互/UE - 站酷设计师温迪学姐的视界原创素材 - 站酷ZCOOL
收藏
自如智能改版(图ZMzgwMDk3MDQ0) - 交互/UE - 站酷设计师温迪学姐的视界原创素材 - 站酷ZCOOL
收藏
B3. 情感化
Current Time 0:00
/
Duration Time 0:00
Progress: NaN%
Playback Rate
1.00x
自如智能改版(图ZMzgwMTYxNzk2) - 交互/UE - 站酷设计师温迪学姐的视界原创素材 - 站酷ZCOOL
收藏
三、用户场景下的交互体验升级
我们深入分析了用户的使用场景和需求,对交互体验进行了全面升级。例如,我们优化了语音交互界面,使其更加直观易用;我们还设计了沉浸式体验和暗黑模式,满足用户在不同场景下的使用需求。
C1. 首页改版思路
从业务支持到共创设计: 19年11月后,设计团队更加主动,与业务和产品团队共创,但仍需关注用户特性,理解用户偏好,打造个性化智能家居体验。
因此此次从首页快捷操作卡片出发,在可视化、交互反馈方面提升用户的使用体验。
场景卡片层级:缩小场景卡片样式,提升页面利用率,便于操作及浏览场景信息。
自如智能改版(图ZMzgwMDk3MDky) - 交互/UE - 站酷设计师温迪学姐的视界原创素材 - 站酷ZCOOL
收藏
自如智能改版(图ZMzgwMDk3MDg0) - 交互/UE - 站酷设计师温迪学姐的视界原创素材 - 站酷ZCOOL
收藏
C1. 场景卡片迭代
场景卡片优化: 缩小卡片样式,提升页面利用率;通过图片区分场景类型,营造沉浸式体验;加强进度交互反馈,确保用户充分了解场景执行状态。同时优化新建场景流程,提升用户操作易用性。
自如智能改版(图ZMzgwMDk3MTI0) - 交互/UE - 站酷设计师温迪学姐的视界原创素材 - 站酷ZCOOL
收藏
自如智能改版(图ZMzgwMDk3MTI4) - 交互/UE - 站酷设计师温迪学姐的视界原创素材 - 站酷ZCOOL
收藏
自如智能改版(图ZMzgwMDk3MTMy) - 交互/UE - 站酷设计师温迪学姐的视界原创素材 - 站酷ZCOOL
收藏
自如智能改版(图ZMzgwMDk3MTM2) - 交互/UE - 站酷设计师温迪学姐的视界原创素材 - 站酷ZCOOL
收藏
Current Time 0:00
/
Duration Time 0:00
Progress: NaN%
Playback Rate
1.00x
降低使用门槛: 现阶段智能家居场景功能存在理解和使用门槛,通过可视化、交互反馈优化,提升用户体验。
自如智能改版(图ZMzgwMDk3MTQ4) - 交互/UE - 站酷设计师温迪学姐的视界原创素材 - 站酷ZCOOL
收藏
作为智能家居里最接近智能化的场景功能,对于普通用户而言还是存在一定的理解和操作门槛(从场景的使用情况和新建漏斗也可以看出)。主动条件触发、自动化的联动,以及新建场景的冗长流程,都在无形中增加用户去使用场景的心理和学习成本。加强进度交互反馈,确保用户充分了解场景执行状态。同时优化新建场景流程,提升用户操作易用性。
自如智能改版(图ZMzgwMDk3MTUy) - 交互/UE - 站酷设计师温迪学姐的视界原创素材 - 站酷ZCOOL
收藏
C2. 首页沉浸式体验
重构框架,连接生活: 深入理解“连接”的本质,即连接场景中的人,将用户与生活片段连接起来,而非单纯的设备操作。
感知用户,匹配需求: 用户喜好各异,设计需感知用户内在需求,匹配其生活方式,打造可控且贴心的智能家居产品。
自如智能改版(图ZMzgwMDk3MjAw) - 交互/UE - 站酷设计师温迪学姐的视界原创素材 - 站酷ZCOOL
收藏
Current Time 0:00
/
Duration Time 0:00
Progress: NaN%
Playback Rate
1.00x
C3 底导图标重设计
设计目标拆解: 采用目标导向方法,定义设计框架,解决业务变化需求,打造灵活兼容的布局模式。
UI风格确定: 增加视觉冲击力,使用自如品牌色和灵犀品牌色,搭配三种核心辅助色,激发创造性与内省。
自如智能改版(图ZMzgwMDk3MjM2) - 交互/UE - 站酷设计师温迪学姐的视界原创素材 - 站酷ZCOOL
收藏
自如智能改版(图ZMzgwMDk3MjQw) - 交互/UE - 站酷设计师温迪学姐的视界原创素材 - 站酷ZCOOL
收藏
自如智能改版(图ZMzgwMDk3MjQ4) - 交互/UE - 站酷设计师温迪学姐的视界原创素材 - 站酷ZCOOL
收藏
自如智能改版(图ZMzgwMDk3MjUy) - 交互/UE - 站酷设计师温迪学姐的视界原创素材 - 站酷ZCOOL
收藏
四、搭建栅格系统及组件库
为了确保设计的一致性和可扩展性,我们搭建了栅格系统和组件库。这些工具将帮助设计师更高效地完成设计工作,并确保不同平台和设备上的设计风格保持一致。
D1 全屋智能商城首页改版思路
基于自如优品从一开始的主营生活家居美学版本到现在已有一年的时间,期间也经历过多次迭代,本次主要围绕全屋智能商城首页改版进行总结。
自如智能改版(图ZMzgwMDk3MjY4) - 交互/UE - 站酷设计师温迪学姐的视界原创素材 - 站酷ZCOOL
收藏
D2 首页可配置性
金刚区可配置实体智能商品,降低用户选择成本;背景通栏入口可配置,寻求信息内容、视觉效果和信息之间的平衡点。
自如智能改版(图ZMzgwMDk3Mjcy) - 交互/UE - 站酷设计师温迪学姐的视界原创素材 - 站酷ZCOOL
收藏
自如智能改版(图ZMzgwMDk3Mjc2) - 交互/UE - 站酷设计师温迪学姐的视界原创素材 - 站酷ZCOOL
收藏
自如智能改版(图ZMzgwMDk3MzA0) - 交互/UE - 站酷设计师温迪学姐的视界原创素材 - 站酷ZCOOL
收藏
D2 灵活换肤展示
根据节日氛围配置皮肤,运用插画增强氛围感,通栏设计增加节奏感,版式布局富有变化。全屋智能商城背景: 智能家居市场规模庞大,未来将进入全屋智能阶段,提升C用户体验。
自如智能改版(图ZMzgwMDk3MzA4) - 交互/UE - 站酷设计师温迪学姐的视界原创素材 - 站酷ZCOOL
收藏
自如智能改版(图ZMzgwMDk3MzEy) - 交互/UE - 站酷设计师温迪学姐的视界原创素材 - 站酷ZCOOL
收藏
自如智能改版(图ZMzgwMDk3MzE2) - 交互/UE - 站酷设计师温迪学姐的视界原创素材 - 站酷ZCOOL
收藏
总结
自如智能618设计改版聚焦用户体验,通过场景卡片迭代和沉浸式首页设计,降低用户使用门槛,提升产品易用性和沉浸感。未来将持续优化设计,为用户打造更智能、更便捷的智能家居生活。
自如智能改版(图ZMzgwMDk3MzI4) - 交互/UE - 站酷设计师温迪学姐的视界原创素材 - 站酷ZCOOL
收藏
结语
此次自如品牌升级,是我们对用户体验的全新探索,也是对设计理念的全新诠释。我们相信,全新的Aurora Design将为用户带来更加美好的生活体验。
自如智能改版(图ZMzgwMDk3MzMy) - 交互/UE - 站酷设计师温迪学姐的视界原创素材 - 站酷ZCOOL
收藏
欢迎共同探讨设计心得,打造更优秀的智能家居产品!
0
举报
|
3
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
你可能喜欢
相关收藏夹
大家都在看
登录注册