Smart BBQ Systerm

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

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

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

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

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

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

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

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

Part3 Design Details
User Research
Aug 2017 — forever

主风格定义

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

我为客户提供了几种视觉布局和颜色方案,最终我们一致认为,方案3更具优势,理由是:

  1. 颜色上,暗色调更符合烧烤机黑色的外观调性,也能减轻用户的视觉负担
  2. 左侧功能操作区用悬浮状表示,与功能内容显示区域可以更好的形成层级对比,形式上也与全局操作区区分开来,更好辨认
Visual Style Exploration

在智能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.