小米超级小爱 Alive AI 美学设计实践

用户头像
北京/设计爱好者/3小时前/131浏览
小米超级小爱 Alive AI 美学设计实践
前言
从 2023 年大语言模型的爆发到 2025 年“超级小爱”的进化,亿万用户熟悉的小爱同学已从单纯的“语音助手”转变为终端设备的“系统级AI内核”。小爱同学不再仅仅是入口,而是重塑小米手机 HyperOS 体验的 AI 灵魂。
本文立足于小米集团的底层设计哲学,深度探索了 AI 时代下的人机交互界面美学设计,推动界面从“静态图形界面”向“生成式动态界面”演进,以及如何利用“光”这一视觉元素,构建起连接底层逻辑与用户情感的动效体系。
设计团队
美学主设计师:添吉     协作设计师:何苗、兆梅、舒格、智彦、郭威、小禾 、薛骁
设计指导:刘静 Jack Liu
小米超级小爱 Alive AI 美学设计实践(图ZNDA2MDA5Nzky) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
语音助手时代的小爱同学
语音助手时代的小爱同学,尚处于智能的萌芽期,其交互逻辑局限于单一的指令反馈与基础的设备控制。在视觉语境上,早期的美学风格已难以承载当前 AI 时代对“智能感”的追求。
那时的交互更像是一场“工具式”的问答,图形界面缺乏情绪的起伏与意图的预判。而现在,随着 AI 内核的彻底重构,我们需要打破这种沉浸感不足的视觉僵局,让UI视觉迈向AI时代。
小米超级小爱 Alive AI 美学设计实践(图ZNDA2MDA4OTMy) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
紧跟品牌焕新
小爱同学于
2024年10月29日‌ 在澎湃OS2 的发布会上,正式升级并更名为 ‌“超级小爱”‌,作为小米澎湃OS 2 系统的核心 AI 能力,标志着其从智能语音助手向 ‌全生态 AI 智能助手‌ 的全面进化。
Current Time 0:00
/
Duration Time 0:00
Progress: NaN%
Playback Rate
1.00x
小米超级小爱 Alive AI 美学设计实践(图ZNDA2MDM2NDky) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
品牌升级
Collect
小米超级小爱 Alive AI 美学设计实践(图ZNDA2NDE4NzAw) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
探索符合AI时代的小爱设计语言
遵循集团设计语言
首先,我们遵循了小米集团的整体设计语言,明确了由原研哉(Kenya Hara)提出的“生命感设计”(Alive Design)作为底层哲学。
小米超级小爱 Alive AI 美学设计实践(图ZNDA1OTUzNTc2) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
小米超级小爱 Alive AI 美学设计实践(图ZNDA2NDE4MzI4) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
基于集团使命与目标
然后,基于小米集团的使命与目标:“让全球每个人都能享受科技带来的美好生活”。
我们需要重塑的不只是界面,更是一种关系。在 HyperOS 的生态体系中,超级小爱致力于将前沿的算力转化为触手可及的温度,让每一个人都能在与 AI 的交互中,感知到科技带来的善意与美好。
小米超级小爱 Alive AI 美学设计实践(图ZNDA1OTUyODA4) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
紧跟人机交互时代变迁
同时,我们也研究了时代的变迁:从
GUI(图形用户界面)
LUI(语言/逻辑用户界面)
的范式转移,这不仅是交互媒介的改变,更是技术从“外在于人”到“内化于生活”的进化。
当技术真正达到极致时,它就不再作为一种“工具感”存在,而是像空气一样透明,融入生活。
小米超级小爱 Alive AI 美学设计实践(图ZNDA2NDExODgw) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
确立“Alive AI”设计理念
秉承小米集团‘让全球每个人都能享受科技带来的美好生活’的使命,我们深度实践“生命感设计”哲学,提出了“Alive AI”的设计理念。
我们将基于这个理念,致力于打破预设图形的边界,让冷峻的技术逻辑转化为直觉性的情感共鸣,赋予智能以生命的温度。
小米超级小爱 Alive AI 美学设计实践(图ZNDA1OTUzMzEy) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
简单来讲,我们就是需要做“普适性设计”。
小米超级小爱 Alive AI 美学设计实践(图ZNDA1OTU0MjEy) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
设计践行科技平权
做普适性设计,最终还是为了人,为了大多数人,科技不再是高高在上。
通过“Alive AI”践行小米“科技平权”的道路——让强大的 AI 能力不再是少数人的技术壁垒,而是温润如光、触手可及的生命温度,让每一个平凡的瞬间,都能感受到科技带来的美好与善意。”
小米超级小爱 Alive AI 美学设计实践(图ZNDA1OTU0NDAw) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
设计语言落地
有了理念与目标,接下来就是怎么落地“Alive AI”设计语言,我们从形态、颜色、材质三个方面着手,去营造属于AI的自然和谐的生命感。
小米超级小爱 Alive AI 美学设计实践(图ZNDA1OTU0OTA0) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
小米超级小爱 Alive AI 美学设计实践(图ZNDA1OTU1MDA0) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
定义普适性图形元素
从图形开始,我们寻找到“光”来作为核心元素,因为光是普适又多元的、有智能感的。
小米超级小爱 Alive AI 美学设计实践(图ZNDA1OTU1MDEy) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
小米超级小爱 Alive AI 美学设计实践(图ZNDA1OTU1MDc2) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
为什么光能代表“Alive AI”的设计理念。
小米超级小爱 Alive AI 美学设计实践(图ZNDA1OTU1MTUy) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
光需要和UI元素怎么配合才能达到我们的目标“Alive”。
小米超级小爱 Alive AI 美学设计实践(图ZNDA1OTU1MjA4) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
光如何表达AI能力
我们对”光“的物理形态进行了拆解,通过规范光效的色彩与动态形态的映射关系,构建出一套高度一致的 AI 视觉语言。
光在此不再是孤立的视觉装饰,而是驱动人机交互的核心逻辑,实现了 AI 思考状态与感官反馈的深度同步。
小米超级小爱 Alive AI 美学设计实践(图ZNDA1OTU1MzQ4) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
小米超级小爱 Alive AI 美学设计实践(图ZNDA2MDM5MjA4) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
小米超级小爱 Alive AI 美学设计实践(图ZNDA1OTU1NTM2) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
看世界
Collect
小米超级小爱 Alive AI 美学设计实践(图ZNDA1OTU1NTQw) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
主动智能
Collect
小米超级小爱 Alive AI 美学设计实践(图ZNDA1OTU1NTQ4) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
动效设计 - AI交互的动态叙事
以上展示的视觉碎片仅是静态的切片,而真正的 AI 交互是一场流动的‘动态叙事’。
AI产品界面与传统界面‘指令-响应’的机械往复不同,它是实时生成的视听语言,我们需要将每一次对话构建为逻辑连贯、情感起伏的连续叙事。
小米超级小爱 Alive AI 美学设计实践(图ZNDA1OTk5NzU2) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
小米超级小爱 Alive AI 美学设计实践(图ZNDA1OTk5ODU2) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
OS2超级小爱-语音流动光
我们在OS2版本的小爱上,使用了流动的光来代表语音交互的视觉新形态。
这种形态彻底告别了过去单一的波形反馈,转而利用具有物理质感的流光,在屏幕边缘流动,赋予了 AI 交互一种更具生命律动感的动态表达。
小米超级小爱 Alive AI 美学设计实践(图ZNDA1OTk1ODUy) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Gif动图,有些摩尔纹实在不好去掉,将就看吧😂
Collect
小米超级小爱 Alive AI 美学设计实践(图ZNDA2MDM4NjY4) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
语音光效落地“人车家全生态”
这道流动的光并不止于手机,我们将其全线贯穿于小米全生态终端。
从小米汽车的智能座舱,到客厅的大屏电视,再到床头的智能音箱,“流动的光”作为超级小爱的统一视形象,在不同维度、不同尺寸的屏幕间无缝流转,实现了全场景交互体验的高度一致性。”
小米超级小爱 Alive AI 美学设计实践(图ZNDA2MDAwMjAw) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
小米超级小爱 Alive AI 美学设计实践(图ZNDA2MDM5Mjc2) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
OS3超级小爱
在 OS3 版本中,我们引入了‘环绕光’作为语音交互的视觉形态,以适配新的输入框架。
通过在输入框边缘增加环绕光效,表达了系统当前的收音状态,通过直觉化的视觉反馈,让用户在交互瞬间即能感知 AI 的敏锐响应。
小米超级小爱 Alive AI 美学设计实践(图ZNDA2MDU1MzQ4) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
小米超级小爱 Alive AI 美学设计实践(图ZNDA2MDY2Mjc2) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
小米超级小爱 Alive AI 美学设计实践(图ZNDA2MTIyNTMy) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
小米超级小爱 Alive AI 美学设计实践(图ZNDA2MTI2NjM2) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
小米超级小爱 Alive AI 美学设计实践(图ZNDA2NDEyNjQw) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
小爱陪伴UI设计
在小爱陪伴界面中,我们采用具有灵动生命力的“光球”作为实时语音对话的视觉载体。光球的状态(聆听、思考、播报)能根据语音交互的状态变化随时切换。
光球呈现出自然舒缓的呼吸律动,模拟生物的呼吸频率,搭配背景的动态颜色,赋予界面一种平和且深沉的生命感。
Current Time 0:00
/
Duration Time 0:00
Progress: NaN%
Playback Rate
1.00x
生态大会小爱语音光效
除了个人设备上的表现,我们还将小爱的语音光效做变体,延伸至全生态触点,统一了用户的感官记忆,更让超级小爱从单一的“工具符号”进化为贯穿全场景的“智慧人格”。
小米超级小爱 Alive AI 美学设计实践(图ZNDA2NDEzMDMy) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
图标设计
除了动态的光效语言,在图标设计维度,我们同样践行“普适性”的设计哲学。
通过克制且明晰的图形,我们为大模型时代下纷繁复杂的 AI 功能建立了直观的视觉索引。
让用户在瞬间即可读懂每一项 AI 能力背后的交互语义。
小米超级小爱 Alive AI 美学设计实践(图ZNDA2MTI2OTA0) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
小米超级小爱 Alive AI 美学设计实践(图ZNDA2NDEzMDY0) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
小米超级小爱 Alive AI 美学设计实践(图ZNDA2MTI2OTA4) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
定义AI的颜色
小米超级小爱 Alive AI 美学设计实践(图ZNDA2MTMwNjEy) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
衔接集团与系统品牌
基于 Xiaomi Hyper AI 全新品牌理念,我们重构了小爱的色彩体系,旨在深度强化全场景下的品牌一致性。
这套体系不仅是品牌视觉的延续,更是 AI 智能感的具象表达,我们将算法的每一次呼吸与律动转化为灵动的色值变幻,让交互充满了AI智能感。
小米超级小爱 Alive AI 美学设计实践(图ZNDA2MTMwNjE2) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
色彩细节打磨
在色彩表现的打磨中,我们发现橙色与黄色的常规过渡往往会产生视觉上的“浑浊感”。
所以我们打破了线性的渐变逻辑,在橙黄之间嵌入了紫色作为过渡,消解了色彩衔接处的沉闷,更通过冷暖色的微妙碰撞,让整个色彩序列呈现出明净感与层次感。
小米超级小爱 Alive AI 美学设计实践(图ZNDA2MTMwODA4) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
小米超级小爱 Alive AI 美学设计实践(图ZNDA2MTMwODEy) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
色彩落地应用
小米超级小爱 Alive AI 美学设计实践(图ZNDA2MTMwODE2) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
小米超级小爱 Alive AI 美学设计实践(图ZNDA2MTMwOTA0) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
小米超级小爱 Alive AI 美学设计实践(图ZNDA2MTMwOTA4) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
小米超级小爱 Alive AI 美学设计实践(图ZNDA2MTMwOTEy) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
质感
在核心 UI 的关键触点上,我们深度践行“生命感”的设计理念,赋予了小爱更为丰富的视觉肌理与空间层次。
通过半透明材质与多层级的光影叠加,我们营造出一种通透且轻盈的交互体验,让技术以一种温润、无感的方式消隐于生活场景之中。
小米超级小爱 Alive AI 美学设计实践(图ZNDA2MTI4MTM2) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
唤醒水波动画
在OS2的唤醒动画中,我们从自然界中汲取灵感,寻找到一种兼具半透明和柔软的元素——水。
依托系统的动效引擎,我们将其通透的质感与小爱唤醒时的流光结合,表达光影的流转,呈现出一种如同涟漪扩散般的自然律动。
水作为核心元素,拥有跨越文化的普适美感。通过最简约的物理逻辑表达最复杂的 AI 能力。这正是我们坚持“科技平权”的初心:科技不再是高高在上,而是以最自然的方式流入每个人的生活。
小米超级小爱 Alive AI 美学设计实践(图ZNDA2NDEzMDU2) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
关键UI中的透明材质
依托系统的高级材质组件,我们在交互的关键 UI 节点引入了通透的半透明材质。
透明材质的应用,构建出清晰的空间分层,让核心功能从复杂的背景中轻盈‘浮现’,为用户指引出直觉化的操作路径,实现了美学深度与交互效率的高度统一。
小米超级小爱 Alive AI 美学设计实践(图ZNDA2MTI5NTAw) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
小米超级小爱 Alive AI 美学设计实践(图ZNDA2MTI5NTMy) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
光的质感
我们捕捉了自然界中的光影动态,将其转化为具有生命感的视觉语言,在数字世界中重建人类与自然之间的共生链接。
通过这种‘生命感美学’的营造,我们让科技不再是孤立的存在,而是一种具有温度、能够感应自然律动的普适体验。”
小米超级小爱 Alive AI 美学设计实践(图ZNDA2MTI5NTM2) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
小米超级小爱 Alive AI 美学设计实践(图ZNDA2MTI5NTQw) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
总结
OS2和OS3系统版本中小爱的升级,不仅是交互逻辑的重构,更是小爱同学UI视觉的焕然新生。
这两代系统的接力演进,标志着小爱同学已从单一的语音助手,进化为贯穿全场景、具备“生命感美学”的智能体——让科技以最通透、普适的方式,润物无声地融入每个人的生活。”
关于个人成长
这几年在小爱升级的项目中,学到了很多很多。从视觉设计师转变为UI设计师;从动效0基础小白,到负责手机小爱的所有动效,以及参与小米发布会上的动效设计。从不了解AI,到深度参与AI设计的定义,不仅是专业能力的提升,更是认知的提升。
用户的检验:通过深度参与AI产品的设计,以公司为平台,让AI设计走进千家万户,接受亿万用户的体验质检。
行业的检验:小爱的设计也拿到了去年的IF设计奖,这也是对我和团队专业能力的肯定。
Current Time 0:00
/
Duration Time 0:00
Progress: NaN%
Playback Rate
1.00x
小米超级小爱 Alive AI 美学设计实践(图ZNDA2MTI5NTUy) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Collect
小米超级小爱 Alive AI 美学设计实践(图ZNDA2NDE2MTQ0) - APP界面 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
一个通宵的夜晚,产品设计团队在金大师的带领下攻坚新方案(除了我这个吗喽,都是老板- -)
Collect
最后说两句
在AI时代,基础的设计工作已经不需要人来完成了。我们团队已经全员coding了,设计师能把自己的设计想法独自落地到实际项目当中了。
然而,AI 终究是工具,它无法替代人类进行复杂的价值选择与深度的审美定调。在 AI 时代,设计师正逐步摆脱“工具人”的桎梏,从繁琐的像素推敲中解放,转而聚焦于更具灵魂的审美判断与体验决策。
PS:最后说两句是AI帮忙写的,前面大部分也是让AI帮忙润色的,只有最后这句话是自己写的- -
1
Report
|
收藏
Share
评论
用户头像
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
Log in