Smart BBQ Systerm

Product Designer / Strategy / UX&UI Design
项目概述

2023年,我接到HANKS公司的委托,为他们的一款智能烧烤机设计系统界面。客户提供了所需功能的大致描述和相关数据参数,我据此完善了功能架构,并完成了整个系统的体验设计,耗时4个月。

汉普森BBQ烧烤机旨在为家庭聚会等场景提供便捷的烧烤体验,支持自动烘烤、烟熏和自定义菜单等功能。
我的工作

需求分析:整理功能逻辑框架图,明确项目的基本结构和需求;

用户体验设计:运用用户体验地图和故事板方法,二次梳理出关键体验点,并针对这些点制定了UX解决方案;

交互原型制作:设计可交互的低保真原型,供客户更直观的体验;

视觉设计:完成UI界面的设计工作,并与开发协作,以确保实际实现效果达到设计预期

基于数据架构设计智能烧烤机系统的UX流程。我主要做了以下工作:

  1. 平衡操作的复杂性和屏幕空间的有限性
  2. 梳理烤模式操作的阻断和非阻断性操作
  3. 梳理界面信息排布层级
Part2 UX设计
Smart BBQ
Aug 2017 — forever

挑战1:平衡操作的复杂性和屏幕空间的有限性

在有限屏幕空间内,需同时解决两大矛盾:
  1. 操作复杂性:由多层级数据设置引发的用户认知负荷
  2. 空间局限性:需明确区分功能区域并动态突出核心操作
解决方案框架:采用三分屏架构实现功能聚焦
  1. 全局显示区(10%):实时反馈系统级状态(时间、网络、运行状态、错误提示)
  2. 全局操作区(20%):集中全局性操作(开机/童锁/送料/食物探头温度显示设置)
  3. 系统功能区(70):主要操作区,承载主要的烧烤功能和系统功能操作
Smart BBQ主屏区域划分

挑战2:烧烤进程中的操作干扰管理

问题1. 操作分级管理

问题描述:数十项设置参数与核心烧烤进程的耦合性冲突,需对操作进行分级管理

解决方案:将操作分为阻断性操作、非阻断性操作、过渡性操作,并梳理对应的操作的影响以及体验需求。

问题2. 反馈分级设计

问题描述:需明确区分阻不同级别操作的交互反馈

解决方案:通过「阻断操作防护、跨页面监控、进程可视化」方案解决区分不同级别的操作,解决操作干扰问题。

不同操作类型的交互解决方案

UX主页面设计

主页面的设计需要考虑以下用户体验:操作层级清晰、数据直观易懂

界面布局采用三区域分区设计,功能区域明确分隔,降低误操作
  • 顶部:全局内容显示区
  • 左侧:系统功能区(菜单区域位于左侧)
  • 右侧:全局操作区(温度探头形式区别于全局按钮)
重要数据可视化设计
  • 烤制进程全局实时展示
  • 温度时间数据调节可视化
  • 食物探头温度调节可视化
Smart BBQ主屏布局图

UX流程动画

在具体的视觉设计阶段,我依据交互模型进行设计尝试,完成了主风格定义、70+页面的UI设计以及UI规范文档的输出。

Part3 Design Details
User Research
Aug 2017 — forever

主风格定义

在这个阶段的定义中,除了对颜色的尝试外,我还对界面的具体布局进行的更改。主要是将全局内容区与全局操作区统一放置在了屏幕右侧区域,这样避免了屏幕被瓜分得过于分散,也保障了功能操作区域的显示空间,进一步减轻了用户的认知负担,同时提升了操作体验。除此之外,还需要解决以下几个设计挑战:

1. 温度时间视觉样式设计对比

温度和时间设置的可视化设计是关键环节。设计中遵循了两个核心原则:提供充足的操作空间,确保用户体验的精准性。

经过三种布局方案的尝试与对比,最终选择了上下排列的设计结构。在时间设置的视觉化呈现中,结合了粗调滑动操作和精细加减调整,既提升了操作效率,又增强了用户的控制感。

温度时间设计方案对比
2. 暗色和亮色方案对比

在色调设计上,我对明暗方案进行了深入对比。最终结合硬件的黑色外观及烘烤所营造的氛围感,选择了暗色调。暗色不仅能够强化烘烤过程的沉浸感,也能突出火炉的色彩表现。在信息密集的页面中,暗色调更能引导用户关注核心数据,提升视觉层次感和重点信息的辨识度。

暗亮色系设计方案对比

主视觉方案

在完成视觉布局、温度时间样式及主色调的确认后,我对功能操作区的菜单样式进行了优化设计。通过悬浮式功能操作区与右侧全局操作区的视觉分离,明确两者的功能定位。同时,功能操作区与内容显示区建立了清晰的上下层级关系,有效减少用户的认知负担,提升操作流畅性和界面层次感。

主视觉方案

在智能BBQ烧烤机项目的第一阶段,需求整理与设计方案探索是关键步骤。以下是我完成的工作:

  • 需求框架梳理:我收集了用户的基本需求和相关数据参数,并整理出了需求的大致框架。
  • 故事板与关键体验点:我利用故事板串联了用户的整个使用流程,并梳理出了体验设计中需要考虑的关键点。
  • 系统框架与信息层级:根据关键体验点,我重新整理了系统的框架结构,并梳理出了信息层级和站点地图,以便客户和技术团队了解解决方案。
  • 交互设计与原型测试:我进行了详细的交互设计,并设计了可交互的交互原型,供客户、开发人员以及身边的人测试使用,以收集反馈。
  • 设计完善:根据收集到的反馈,完善设计,确保最终方案能满足用户需求并提供良好的用户体验。

这个阶段的工作为整个项目打下了坚实的基础,确保了后续设计和开发工作的顺利进行。

Part4 UX流程
User Research
Aug 2017 — forever

在智能BBQ烧烤机项目的第二阶段,设计展示是重要环节。以下是我完成的UI设计工作:

  • 情绪板收集:我收集了不同的视觉元素,整理出了大致的视觉方案,为后续的设计提供灵感和方向。
  • 主风格设计:我进行了主风格的设计尝试,并提供了2-3个不同的方案供客户参考和选择,确保最终的设计风格符合客户的期望和品牌形象。
  • 关键元素规范:根据确定的主风格,我设计了相关的关键元素,包括色彩、字体和布局规范,以规范所有界面的设计,并形成了可复用和方便修改的元素库,供开发伙伴和后续设计师使用。
  • 界面设计与原型测试:我完成了所有界面的设计,并提供了可交互的原型供大家测试,以确保设计的可用性和用户体验。

这个阶段的工作是将UX解决方案具体化,通过视觉设计展示出来,为项目的最终实现奠定了基础。

Part5 设计展示
Detailed Design
Aug 2017 — forever

在这个智能BBQ烧烤机项目中,我总结了以下收获:

  • 远程协作的高效模式:我们全程采用了远程协作的工作模式,用图示或文档清楚地提出问题和反馈,并保证在24小时内回复。这种方式既保证了沟通内容的质量,又保障了各方有充足的时间去实践解决方案和思考,同时也提供了灵活的处理时间,可以根据自己的作息安排工作。
  • 专业工作上的收获:我发现用具体的数据和体验去说服客户改变想法很有效,这样能让用户体验更一致。
  • 协作中的挑战与解决:合作过程中,有时候开发伙伴会觉得某些设计难以实现,我会弄清楚具体原因,然后根据不同的问题协商不同的解决方案,例如简化组件的新开发难度,用实际的体验说服客户,或者给出迭代开发的建议。我还会自己翻阅已经实现了类似交互效果的应用,供开发伙伴参考。这些方法帮我说服了团队,让实际效果更接近我们的设计预期。

这些收获不仅体现了我在专业技能上的提升,还展示了我在远程协作和团队协作方面的能力。

Part6 我的收获
My Gains
Aug 2017 — forever

Ad quia molestiae quis sit autem aliquam dolores.

Dolor hic architecto facilis aspernatur suscipit ut esse. Eum sint non quis totam eveniet saepe. Cum eligendi aut. Itaque labore et saepe consequatur quia alias adipisci voluptatem. Dolorum exercitationem fugiat error modi occaecati deserunt et.

Aperiam culpa commodi incidunt aut rerum dolorem qui.

Corporis est impedit vel sequi iusto ratione est quis ea. Non architecto odit sint quia quisquam in recusandae quas. Est iure voluptas veritatis quisquam sit. Omnis suscipit facere. Iure magnam ipsa eum libero. Tempore dolorem tenetur ratione cum earum quo.

Saepe at aut impedit harum deleniti a illo repellendus est. Dolor eum autem. Assumenda corrupti ullam velit unde.

Quis praesentium et ipsa autem sit. Dolorum nulla dolores fuga. Nemo illo in minima qui tempore praesentium. Rerum nostrum nesciunt quia pariatur mollitia autem dolorem optio quo. Dolores nisi omnis.