智能清洁设备 LCD 屏幕体验设计

Designing a scalable interaction system for smart cleaning devices under hardware and input constraints.

面向追觅首款 LCD 洗地机，搭建设备状态、信息层级、按键导航与故障反馈框架，并推动方案在多部门协作和硬件限制下完成量产落地。

关键成果：

• 量产上市——三态体验框架随 480×480 机型完整量产;资源削减时,故障态引导动画凭优先级规则全部保留
• 沉淀标准——《可识别性人机规范》(视距/字号/动效等)——公司首个屏端人机标准
• 方法留存——"动画资产盘点"成为我此后LCD屏项目的固定前置动作

01｜Understanding Device Experience

User Scenario Analysis

研究发现，用户对智能清洁设备的需求并非来自更多功能展示，而来自对设备状态、任务进度和下一步行动的理解。

三类用户需求最终指向同一个设计挑战：如何让有限尺寸的设备屏幕，在不同使用经验和认知水平下，都能提供快速、准确、低负担的信息反馈。

Competitive Analysis:

分析添可、云鲸等竞品的屏幕方案后发现，行业普遍面临两难：写实感强的方案（如添可的3D机器+水流动效）反馈更新速度受限、细节过多、视觉节奏不统一；氛围感强的方案（如云鲸的2D旋风动效）虽然屏幕内存占用低，但模式间视觉差异不够清晰，容易造成混淆。

我们需要在添可式写实与云鲸式氛围之间找到平衡点，而非简单套用某一方案。

02｜Design Approach（三态体系 + 分层降噪 + Digital Twin）

设计不是打造单个界面，而是构建一个跨机型、跨场景的可扩展屏幕体验系统。基于研究发现的三类核心诉求，我们提出了"三态"设计定位：

三态体系分别对应三类核心焦虑：运行态用"轻量"化解信息过载，基座态用"光感可视"替代冰冷数字建立信任，故障态用"动效引导"降低故障恐慌。

如何做到"轻量"——分层降噪：

针对用户"看不懂参数"的认知问题，我没有堆砌吸力千帕数、转速这类专业数值，而是重构了一套统一的模式布局标准：

• 脏污指示光环——让用户直接"看懂"清洁结果，而非解读参数
• 模式动画——让不同模式的特点通过视觉直觉传达，而非依赖用户阅读理解
• 除菌等高关注功能——采用常驻图标提示，无需主动查询
• 电量显示——弱化精确数字带来的焦虑感，改为更"含蓄且稳定"的视觉表达方式

每一个视觉元素的取舍，都是用"用户能否一眼看懂"替代"数据是否精确"的判断标准——这正是运行态"轻量"原则的具体落地方式。

可视化核心卖点——Digital Twin

刮洗模式是运行态下的一个具体模式，核心卖点是机器后方机械臂下压刮除污渍——但这个动作发生在机器底部，用户看不见，导致很多人不敢用。

延续"模式动画"的设计逻辑（用动效差异传达模式特点），我在切换到刮洗模式的瞬间，让屏幕播放一段特制3D动画，直观展示机械臂"咔哒"一下压住滚刷的完整动作。

用户瞬间秒懂了原理，把一个"黑盒"技术变成了"透明"体验，极大地增强了对产品的信任感。

Hierarchy Restructuring：

为避免多状态同时出现时的显示冲突，我们制定了明确的优先级规则——层级越高越优先，可覆盖低层级状态。

一旦用户遇到故障，若信息被其他状态遮挡，极易导致操作放弃——因此故障信息必须始终处于最高优先级。

User Interaction Flow:

以下三组流程示例，展示三态体系在真实交互路径中的具体应用：从模式切换的即时反馈，到基座功能的进度可视化，再到故障状态的引导式解除。

Example flow: product mode changing and working

短按模式键即可切换，运行态实时反映当前模式的关键特征，确保用户在操作后1秒内获得状态确认。

Example flow: product Self-cleaning Process

自清洁属于基座态功能，全程无需用户操作，因此用写实动画+光效进度替代数字读数，让用户能"看见"设备正在工作，而非等待一个不透明的过程。

Example flow: Visual Instruction for Error Resolution

故障发生时，屏幕优先展示引导动画而非单纯错误代码，用可视化步骤告诉用户问题出在哪里、如何解决，降低对智能设备故障的恐慌感。

03｜Usability Testing

为了让用户在真实场景下（低头、行走、1M视距）依然能够快速理解设备状态，我们把不同字号、不同对比度的界面元素按实际尺寸打印出来,贴在与整机屏幕等高的位置,让测试者以真实姿态(站立低头、行走接近、约 1–1.2m 视距)判读。从用户姿态 → 文字 → 图像三个维度构建了统一的可读性规范。

规范覆盖1-1.2m典型视距下的字号、图标角度与色彩对比度标准，确保任意机型、任意视距下设备状态都能被清晰识别。

04｜Engineering Collaboration

Hardware Constraints Alignment

当时240*240屏幕的机器硬件还没定型，无法制作动画，导致MCU选型卡住了。我没有干等，而是采取了"并行开发策略"：

反向盘点

我先画出交互逻辑图,输出完整的动画资产盘点——类型、数量、时长、循环策略。电子工程师据此完成存储与带宽的量级估算,支撑了芯片选型。

逻辑占位

在3D资源没出来前，我输出了1:1的逻辑占位稿，让嵌入式软件工程师先把代码写好。

等机器定型那天，我们直接替换资源就跑通了，帮项目组抢回了至少2周时间。

Final Review & Handoff

交付完整量产文件，使工程端可实现：

• UI 规格（尺寸、间距、状态机）
• 图标与动效切图
• 显示校准方案（亮度 / 色彩还原）
• 演示视频

Bonus | 软硬生态闭环

我们希望用户多用App，但用户习惯只用机器。为了解决这个矛盾，我设计了一个"无打扰的诱导闭环"：我们的"自定义模式"必须连App才能设置，但我没有在屏幕上贴二维码，而是设计了一个逻辑——当用户按物理键轮播模式，在回到第一个"智能模式"的前一刻，插入一个0.5秒的"发现页"，提示"连接网络开启更多功能"。

这样既不影响用户盲操洗地（多按一下就过去了），又在硬件体验中给软件生态开了一个优雅的切入点。

这个设计的遗憾是：当时屏端没有行为埋点，连接率的提升无法归因量化。这件事让我在后续项目中开始推动屏端交互埋点的立项——硬件屏幕不该是数据盲区。

05 ｜ Review

在硬件限制下，设计无法完全按照理想路径推进，许多功能都需要在体验、产品卖点与量产可行性之间做取舍。本项目让我意识到：硬件体验的推进并不是线性的，而是一个与结构、电控、嵌入式持续协作、不断验证的过程。

相比追求“完美视觉效果”，真正重要的是在工程边界内找到最优的、可实现的体验方案。