用小爱触屏音箱设计案例，展现系统级的UI设计方法

比设计App更加复杂和困难

前不久，小爱触屏音箱发布。作为 VUI x GUI 的多模态交互产（VUI，Voice-user interface。GUI，Graphical User Interface），背后的 UI 体系真的是 App 更复杂。因为当前全球多模态产发展并善，很难借鉴，唯有探索创。而 VUI 与 GUI 的复合并非只是简单的法，背后还有很多体验细节的反复考量。而同时，小爱触屏音箱是与手机类似的平台属性的产。那我们该如何设计这个复杂和全的 UI 体系？本会为大分享小爱触屏音箱的设计思考。

「人机环境+场景」的智能硬件分析法

在机 App 的 UI 计过程中，经常通过产品定位、业诉求等来析计目标，但触屏音箱在使用景上机并不相同，不妨回溯一下，从人机环来推导的计主旨。

1. 速传达，1米外的清晰识别

小触屏音箱一般摆卧室床，用户使用时与音箱的距离相比手机远很多，且很多时候于 1 米的。所以字体与颜色需强烈的识别性，以达到速传达信息的目的。

2. 信息>操作的轻界面交互

多数的触屏音箱使用场景里，用户可通过语音便捷行人机交互，这时候屏幕的作用就了：展示信息主，功能操作辅。例如，家一收拾间一用触屏音箱听音乐，用户可能会以下需求：看歌词、听到喜欢的音乐收藏、切换歌曲。后面两需求只需一句：「收藏这首歌」或「换一首」就行，非常便捷。且此时手被占用，界面交互很麻烦。所以点击收藏切换音乐操作控件可以弱化、展示歌词信息可以突出。

3. 品牌，新潮科技的乐趣

小触屏音箱作提升活体验、随新技应运的新潮多模态交互产品，其主功能听音乐、时钟表盘、看视频、控制家庭智能设备。娱乐性强，需新鲜感、乐趣与吸引力，且符合小爱同学年轻活力的形象。

4. 1米外的快速识别，需要颜比值>5的彩搭

手机 APP 的常用控件为彩底+白字，比值在 1.5-3.54 的区间，近距离观看柔和不刺眼，但为增强识别，音箱的控件是彩底黑字，比值区间在 5.25-16.59。颜比值计：https://contrast-ratio.com

VUI（语音交互）使用场景，距离音箱般大于 100cm，屏幕上体需要更强烈识性，而近距离时，GUI 交互会更便捷。如号是像远场时那么大，会浪费屏幕空。所以需要针 GUI 和 VUI 设不号与。

新潮科技的乐趣

爱触屏音箱作为提升生活体验、跟随新术应运而生的新潮多模交互产品，大多数用户是基于尝鲜的心购买和体验，所以希望赋予她符更多的新鲜、趣吸引力。从尚潮流趋势获得更有活力和视觉吸引力的颜色质搭配。

唤醒动效的设我们希望传递具命力的科技与小同学的形象感受，沿用小同学的色，从自然中的萤火虫与水母的运动形态获得灵感，形命呼吸节奏的唤醒动效。

唤醒动效是象征有着生命技小爱，而音箱初始化过程是这个技生命正在生长过程。她们具有样视觉元素：圆和红色，并过汇聚、心跳节奏、扁平质感来表现正在生长状态。

大多数 APP 的气背景三种：纯色、风景图片、扁插画。想探索不一的视觉方式，展现更多的吸引力。在抽象象中获得衡，颜色是抽象的，黄色是阳光，蓝色是雨，色是雪，但颜色变化和流动的韵律是象的，缓的横向变化是安静的雪晨，红色黄色的拥挤像热得透不过气的夏，卷涌的咖啡色和灰绿是呼啸的沙尘暴。

设数字字体时，我们几乎试了市面所的字体，并找到我们中的完，终我们决设一款小触屏音箱的屏显字体，行了一系列无衬线字体的字体研究之后，我们找到方向，以 MITYPEY 蓝本，保留了者的几何感，增加了温度与人文的亲力。

展示为主的轻量级界面交互

听音乐时候用户可能会有以下需求：看歌词、听到喜欢音乐想收藏、切换歌曲等。后两个需求需说句：「收藏这首歌」或「换首」，常便捷。而在大多时候，用户并不在音箱跟前，并不想进界交互。所以击收藏和切换音乐等操作控件收藏在左上更多 icon 里，以展示歌词信息为主。

Iot 控制也是遵循轻量便捷交互原则，单卡片关闭或开启，长按展开更多内容与操作。