2023年,我接到HANKS公司的委托,为他们的一款智能烧烤机设计系统界面。客户提供了所需功能的大致描述和相关数据参数,我据此完善了功能架构,并完成了整个系统的体验设计,耗时4个月。
汉普森BBQ烧烤机旨在为家庭聚会等场景提供便捷的烧烤体验,支持自动烘烤、烟熏和自定义菜单等功能。
需求分析:整理功能逻辑框架图,明确项目的基本结构和需求;
用户体验设计:运用用户体验地图和故事板方法,二次梳理出关键体验点,并针对这些点制定了UX解决方案;
交互原型制作:设计可交互的低保真原型,供客户更直观的体验;
视觉设计:完成UI界面的设计工作,并与开发协作,以确保实际实现效果达到设计预期
基于数据架构设计智能烧烤机系统的UX流程。我主要做了以下工作:
问题描述:数十项设置参数与核心烧烤进程的耦合性冲突,需对操作进行分级管理
解决方案:将操作分为阻断性操作、非阻断性操作、过渡性操作,并梳理对应的操作的影响以及体验需求。
问题描述:需明确区分阻不同级别操作的交互反馈
解决方案:通过「阻断操作防护、跨页面监控、进程可视化」方案解决区分不同级别的操作,解决操作干扰问题。
主页面的设计需要考虑以下用户体验:操作层级清晰、数据直观易懂
在具体的视觉设计阶段,我依据交互模型进行设计尝试,完成了主风格定义、70+页面的UI设计以及UI规范文档的输出。
在这个阶段的定义中,除了对颜色的尝试外,我还对界面的具体布局进行的更改。主要是将全局内容区与全局操作区统一放置在了屏幕右侧区域,这样避免了屏幕被瓜分得过于分散,也保障了功能操作区域的显示空间,进一步减轻了用户的认知负担,同时提升了操作体验。除此之外,还需要解决以下几个设计挑战:
温度和时间设置的可视化设计是关键环节。设计中遵循了两个核心原则:提供充足的操作空间,确保用户体验的精准性。
经过三种布局方案的尝试与对比,最终选择了上下排列的设计结构。在时间设置的视觉化呈现中,结合了粗调滑动操作和精细加减调整,既提升了操作效率,又增强了用户的控制感。
在色调设计上,我对明暗方案进行了深入对比。最终结合硬件的黑色外观及烘烤所营造的氛围感,选择了暗色调。暗色不仅能够强化烘烤过程的沉浸感,也能突出火炉的色彩表现。在信息密集的页面中,暗色调更能引导用户关注核心数据,提升视觉层次感和重点信息的辨识度。
在完成视觉布局、温度时间样式及主色调的确认后,我对功能操作区的菜单样式进行了优化设计。通过悬浮式功能操作区与右侧全局操作区的视觉分离,明确两者的功能定位。同时,功能操作区与内容显示区建立了清晰的上下层级关系,有效减少用户的认知负担,提升操作流畅性和界面层次感。
在智能BBQ烧烤机项目的第一阶段,需求整理与设计方案探索是关键步骤。以下是我完成的工作:
这个阶段的工作为整个项目打下了坚实的基础,确保了后续设计和开发工作的顺利进行。
在智能BBQ烧烤机项目的第二阶段,设计展示是重要环节。以下是我完成的UI设计工作:
这个阶段的工作是将UX解决方案具体化,通过视觉设计展示出来,为项目的最终实现奠定了基础。
在这个智能BBQ烧烤机项目中,我总结了以下收获:
这些收获不仅体现了我在专业技能上的提升,还展示了我在远程协作和团队协作方面的能力。
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.
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.