HCDE 351 | A1：OXO 淋浴控制界面

产品概述：

这篇过程记录记录了一个智能淋浴控制界面的设计：用户可以用它直观地看到水温、当前水量和出水口的信息。这个设计的目标，是提升日常洗澡时的可及性和易用性。浴室环境很特殊，用户的手常常是湿的、沾着泡沫，视线也受限。在这个项目里，我通过制作一个低保真的实体原型，并经过两轮评图和用户测试收集改进意见，探索了怎样让设计更好地回应这些物理条件。

这个设计由两个相互连接的部分组成：一个装在墙上的界面，实时显示水温、水流量和出水口；以及一个手持花洒，用户可以通过上面的实体按键和滑块直接控制。

在这篇记录里，我会讲我如何基于明确的用户需求进行头脑风暴、如何决定最终方案、如何收集用户和同学的反馈，以及找出了哪些需要改进的地方。我也会记录关键决策背后的理由，以及这些选择如何更好地服务目标用户。

构思：

这个设计的目标，是做一个数字化的淋浴控制界面，让用户即使手上有泡沫、视线受限，也能顺畅地使用。在这一节，我会讲我如何在三个想法之间迭代，让方案更贴合设计目标。

我先思考：这份设计说明里的哪一部分，能让它比我们现在用的产品更好？我试着列出了自己在家用淋浴控制系统时的痛点：

• 洗澡时我不知道确切的水温，所以每次都得把控制杆左右来回拧，试着找到那个“刚刚好的位置”。
• 不同出水口之间怎么切换没有清晰的标识，所以每次都得猜自己是不是拧对了阀门。
• 每次出水的流量都不稳定，找到“刚刚好的位置”和调水温一样难。
• 当手上有泡沫，或者头发打湿后视线受限时，上面这些都会变得格外困难。

在 Pinterest 上找灵感的同时，我也在想，怎样用我的设计来回应这些痛点。

想法 1：

这个想法是一个全触屏的控制面板，手持花洒用磁吸固定在它的右侧。我把所有的角都做成了圆角，考虑的是用户的安全：我在 Pinterest 上看到很多智能淋浴面板都有尖角，让我担心洗澡时滑倒的危险。温度下方有一个滑动条，用户要先点选择按钮，选好要调的项目，再用滑动条去调。我意识到，我通过提供清晰的信息部分解决了痛点，但调节的过程仍然很费劲。同时回看设计目标，这个方案在视线受限或手上有泡沫时几乎没法用。所以我在它的基础上继续想，怎样更好地回应痛点、贴合设计目标。

想法 2：

和想法 1 相比，想法 2 用实体按键来控制温度、水量，以及在不同出水口之间切换。这样手上有泡沫也很好用，因为不需要复杂的手势操作，可及性和易用性都大大提升，也更贴合设计目标。我加了一个蓝牙连接指示灯，告诉用户这个手持花洒已经和墙上的主体连上，可以用主体上的按键来调节。在电子控制取代机械控制的场景下，这也能给用户更多信心。我试着用一个实体支架来挂花洒，因为磁吸有掉下来的可能。后来我发现，横向布局的显示屏容易让人困惑，尺寸也没必要那么大，而且用户有可能误操作。所以我决定进入第三个想法。

想法 3：

最终在第三个想法里，我把显示屏放在中间，一个“O”形的手持花洒磁吸在控制屏上。这样既解决了花洒会掉下来的问题，又保持了外观的美感。屏幕用来显示信息，上面的两个按键比各个单独部件的控制层级更高。左边那个是锁，用户可以用它避免误触按键、意外改变水温或切换出水口。带播放图标的那个按键，控制三个出水口里是否有水流出。用户洗澡途中可以随时暂停去抹洗发水，再按一下继续（恢复），所有设置都会恢复原样。我把控制温度和水量的按键、以及出水口切换器都转移到了手持花洒上，因为用户可能需要在视线受限、手上有泡沫的情况下调水温。这样他们能很快达到目的，这让这个想法在三个想法里最贴合设计目标，也解决了我前面列出的所有痛点。

原型：

在上面几节里，我讲了我如何按照设计目标、回应痛点来迭代想法。这一节我会简单讲讲制作可测试的低保真实体原型的过程，并展示它的样子。

首先，我找了一个快递纸箱，把设计简化成几何形状。原型的大致形状是：中间一个小盒子，一个更大的盒子代表花洒头，中间开一个长方形的孔，再加一个圆柱体当手柄。

我用铅笔在纸板上戳孔来确定边缘，再把孔连起来画出切割线。然后用胶水和胶带把它做成立体的原型。之后，我用记号笔在屏幕上画出显示内容，在按键上画出图标，又剪了一些小纸板片来表现实体按键的质感。

后来，我细化了花洒头上小孔的细节，并用便利贴模拟了一个可交互的界面。最终的样子是这样的：

反馈：

课上，我和同学三人一组进行了两轮评图。第一轮，我把原型交给他们，自己保持沉默，让他们自己摸索怎么用。第二轮，我告诉他们我最想听反馈的地方：怎样让屏幕的显示效果更好，或者让两个部分之间的对应关系更清楚。以下是我收到的反馈：

第一轮：

哪些地方做得好？

• 同学们认出了这个系统有两个不同的部分（墙上模块 + 手持花洒）。
• 界面成功传达出：这是一个可交互的设备，而不是被动的硬件。
• 同学们能想象出真实的使用场景。

哪些地方可以更好？

系统对应关系不清楚：

• 同学们不理解墙上模块和手持花洒之间的关系。
• 不清楚哪个部分是主控制器，哪个是输出设备。

滑块让人困惑：

• 同学们不确定这个滑块是：可交互的还是装饰性的 / 触屏的一部分还是实体控件 / 控制温度还是水流
• 滑块在手持花洒上的位置，让人觉得它和墙上的部分脱节。

功能被误解：

• “Pulse”被误以为是扬声器 / 音频功能。
• 当前温度显示被认为没有必要。
• 锁定 / 解锁按键的用途不清楚。

实体设计上的顾虑：

• 手持部分比预期的大。
• 同学们期待有一个挂钩来放花洒。
• 激活逻辑（挂在墙上 vs. 取下来）不够明显。

第二轮：

把滑块移回墙上模块，让对应关系更清楚。

改进显示，更好地区分：

• 可交互的控件和只显示信息的元素
• 墙上部分和手持部分各自的职责。

之后，我做了一次半结构化的用户测试。结果如下：

• “T”按键不够直观，用户不知道按它可以升高温度。
• 切换器应该回到墙上的部分。

收获：

同学和参与者的反馈都表明，我的设计确实贴合了设计目标，也解决了痛点。但这个设计还有一些小问题，可能会、也可能不会影响它的功能。如果做到下面几点，它会更好：

• 强化心智模型：“墙上 = 控制，花洒 = 输出”。
• 重新设计：“pulse” → “开始 / 结束”；“锁定按键” → 锁的标志，默认自动锁定，按两下才解锁。
• 增加更清晰的实体示能（挂钩 + 调整尺寸）。

感谢阅读！: )

技术附录：

AI 使用说明：

• 我用 ChatGPT 修改语法和错别字；
• 我和 ChatGPT 讨论了这篇博客的整体结构；
• 我用 NotebookLM 帮我整理用户反馈；
• 我和 ChatGPT 讨论了 1 分钟用户测试视频该怎么规划；
• 我和 ChatGPT 讨论了根据收到的反馈，应该改进哪些地方。

灵感参考：