一个充电器,为什么把我逼成了“系统设计师”? cover

一个充电器,为什么把我逼成了“系统设计师”?

只给我一个按键时,我决定把它榨干。

极简硬件下的交互设计:Single Button UI System

在设计行业里,我们总喜欢追求更多。

更大的屏幕、更丰富的动效、更复杂的交互逻辑、更自由的操作方式。

但这次项目恰恰相反。

我接到的是一款 70W 双C口充电器,它拥有一块仅 1.3 英寸左右的小屏幕,以及一个触摸按键。

除此之外,什么都没有。

没有菜单层级,没有返回键,没有方向键,甚至没有第二个操作入口。

资源 147.png

这让我重新思考一个问题:

当硬件条件被压缩到极限时,交互设计究竟还剩下什么?

过去很长一段时间里,充电器都是一种近乎“沉默”的产品。用户只关心它能不能充电,却很少关心它正在经历什么。

但随着 GaN 技术的发展,以及高功率、多设备同时充电成为常态,充电器已经不再是一个简单的电源转换工具。

它开始具备自己的状态。

功率会动态分配。

温度会实时变化。

协议会不断协商。

资源 145.png

甚至不同场景下,还会采用不同的充电策略。

这些变化都真实发生着,只是过去没有被看见。

而当屏幕被加入产品之后,一个新的问题出现了。

用户终于能够看见这些信息了。

但他们真的需要看见所有信息吗?

资源 96.png

项目初期,我和很多设计师一样,习惯性地从界面开始思考。

总功率页面怎么设计?

双口输出页面如何布局?

设备识别页面是否需要动画?

资源 143.png

当时我画了很多稿子,也尝试了各种不同的排版方式。

然而随着项目推进,我逐渐发现一个问题:

界面越来越多,但系统却越来越混乱。

因为我始终在思考“应该显示什么”,而不是“用户为什么需要看这些内容”。

这两者看似相近,实际上完全不同。

资源 21@400x-01.jpg

前者是界面设计。

后者是体验设计。

于是我暂停了视觉探索,把所有页面重新拆解成状态。

01-开机。

02-识别设备。

03开始充电。

04-查看功率。

05-切换模式。

06-异常保护。

当这些状态被重新排列之后,我发现自己面对的已经不是一个 UI 项目,而是一套微型系统。

资源 20@400x.png

用户并不是在浏览页面。

用户是在浏览设备的状态。

而页面只是状态的载体。

很多人第一次看到这款产品时,都会问同一个问题:

为什么只有一个按键?

事实上,这也是整个项目最有挑战性的部分。

资源 134.png
资源 138.png
资源 137.png
资源 136.png
资源 135.png

因为一个按键意味着所有操作都必须在同一个输入入口内完成。

增加一个按键当然可以解决问题。

增加两个按键甚至会让事情变得更简单。

但设计真正有趣的地方,从来不是在资源充足的时候做选择,而是在限制条件下寻找更优解。

资源 92.png

如果说大屏设备是在解决信息组织问题,那么单按键设备解决的其实是交互映射问题。

用户只有一个动作入口。

系统却需要提供多个功能出口。

如何建立两者之间的联系,成为整个项目的核心。

最终,我们将系统拆解成四种行为:

单击、双击、三击与长按。

资源 18@400x-01.jpg

看起来只是简单的动作分类,但背后对应的是四个完全不同的功能层级。

单击负责浏览。

双击负责切换。

三击负责控制。

长按负责探索。

这并不是随意分配的结果,而是围绕用户行为频率进行的一次重新排序。

资源 133.png

越高频的需求,对应越简单的操作。

越低频的需求,则需要更明确的触发条件。

这种设计方式并没有增加功能数量,却有效降低了学习成本。

资源 132.png

整个项目中,我最满意的设计决策,其实来自于一个意外。

最早版本里,长按功能被定义为熄屏。

资源 130.png

这是很多消费电子产品的惯用逻辑。

看起来合理,却始终缺少存在感。

后来我反复观察测试过程时发现,几乎没有用户主动去关闭屏幕。

资源 131.png

因为屏幕本身并不会带来负担。

用户真正想做的事情,是快速查看全部信息。

于是我们推翻了原来的逻辑。

把长按从“关闭显示”改成“自动浏览”。

按住按键之后,系统开始依次轮播各个界面。

单口功率、双口功率、总功率、设备信息依次出现。

资源 129.png

用户不再需要反复点击,而是通过一次持续动作完成一次完整的信息浏览。

这是一个很小的改动。

但它让我意识到一件事。

很多时候,设计并不是创造新的功能,而是重新理解用户真正想完成的事情。

在视觉层面,这套 UI 受到两个系统的影响。

资源 128.png

一个是 Apple Watch。

另一个是锤子 OS。

资源 79.png

但这种借鉴并非停留在视觉风格。

Apple Watch 给我的启发来自信息表达。

在一块极小的屏幕里,用户停留时间往往不足两秒。

因此界面必须做到抬眼可读。

最重要的信息永远占据视觉中心。

数字永远比说明文字更重要。

状态永远比装饰元素更重要。

而锤子 OS 则让我重新理解了秩序感。

很多时候,设计感并不来自图形,而来自排版。

数字与数字之间的距离。

标题与正文之间的关系。

留白与内容之间的平衡。

这些看似微小的细节,最终决定了一块屏幕给人的气质。

因此在这套系统里,我尽量克制所有不必要的视觉表达。

资源 77.png

背景保持纯净。

色彩只承担状态提示。

动画只承担反馈作用。

让界面回归信息本身。

资源 8.png

项目完成之后,我回头看这套系统时,最大的感受是:

自己做的其实已经不再只是 UI。

资源 78.png

因为在设计过程中,我需要定义状态、规划行为、制定优先级、处理异常情况,甚至建立用户对于整个系统的认知模型。

这更像是在设计一个微型操作系统。

只是它最终被装进了一枚不到手掌大小的充电器里。

而这也是消费电子设计最吸引我的地方。

它永远不是单纯地解决视觉问题。

资源 76.png

它是在有限的硬件条件下,重新建立人与设备之间的沟通方式。

当屏幕越来越小,按键越来越少时,设计的价值反而变得更加清晰。

因为真正优秀的交互,从来不是给用户更多选择。

而是在恰当的时候,帮用户少做一次选择。