广州总部电话:020-85564311
广州总部电话:020-85564311

广州网站建设-小程序商城开发-广州小程序开发-企业微信开发公司-网站建设高端品牌-优网科技

20年
互联网应用服务商
请输入搜索关键词
知识库 知识库

优网知识库

探索行业前沿,共享知识宝库

UI 设计的新方向: Material 3 Expressive
发布日期:2025-05-23 17:46:37 浏览次数: 812 来源:UXnext

——写给正在找工作的你:别只会画图标了!


今天我想和你们聊聊一个可能你还没太注意,但未来一定会火的设计趋势——Material 3 Expressive


如果你是即将毕业的学生,或者刚入行2-5年的年轻设计师,这篇文章就是为你准备的。它不会只是罗列一堆术语,而是从实战出发,帮你看清趋势、找准方向,甚至在面试中“多说一句,少踩一坑”。



? Material 3 Expressive 是什么?听起来像咖啡新品名?

谷歌这次推出的 Material 3 Expressive,可以说是迄今为止最具情感温度的一次 UI 设计语言升级。它以之前的 Material You 为基础,加入了更多动态色彩、情绪动效和个性化表达,目标很明确:

让界面不再只是工具,而是一个会呼吸、有性格的存在。

换句话说,Material 3 不再只是一个“功能说明书”,而是一本“用户情感使用手册”。



? 为什么值得你关注?因为它正在影响整个行业

谷歌可不是闲着没事搞更新。他们做了 46 场全球研究,覆盖超过 18,000 名用户,发现了一个关键结论:

富有表现力的视觉体验,能显著提升用户体验,尤其对年轻人和老年人更友好。

这说明什么?说明现在的设计已经从“能不能用”转向“好不好用、爽不爽用”。而这正是你作为年轻设计师需要掌握的新技能点。



? Material 3 Expressive 的四大核心亮点

1️⃣ 大胆而富有表现力的色彩:不只是好看,更是“情绪传达”

Material 3 Expressive 引入了全新的 Color System 2.0(色彩系统2.0),强调“色彩不是装饰品,而是情感的载体”。

什么意思?简单来说就是:

  • 色彩不再是冷冰冰的功能区分;

  • 它要传递情绪、引导行为、甚至讲个故事。

举个例子:

  • 金融 App 中的红色警告,不能让人一看就焦虑;

  • 健身 App 中的绿色按钮,要激发活力而非单调的确认感;

  • 冥想 App 中的蓝绿色系,要让人一打开就平静下来。

动态色彩系统:你的界面也能“换心情”

Material 3 Expressive 支持根据用户的壁纸、时间、节日等自动调整主色调。这意味着:

  • 用户换了壁纸,App 主题色也跟着变;

  • 白天明亮清爽,晚上柔和温暖;

  • 春节来了,App 也能穿件红衣裳。

这不是炫技,而是真正把用户放在中心的设计思维。



2️⃣ 动效设计的“灵魂注入”:让界面活起来

如果说 Material 3 是个冷静理性的工程师,那 Expressive 就是这个工程师下班后喝了两杯,开始弹吉他唱歌的样子——有灵魂了!

动效不再是“左滑右滑淡入淡出”的机械操作,而是:

  • 点击时跳一下的小激动;

  • 页面切换时像风吹过一样的自然过渡;

  • 完成任务时给你一个小庆祝动作。

这些细节会让用户觉得:“我在跟一个人互动,而不是一台机器。”



3️⃣ 形态与层级的“弹性社交”:组件也能穿衣服

Material 3 Expressive 推出了新的 Shape System(形态系统),让按钮、卡片、图标等组件可以根据场景灵活变化。

比如:

  • 教育类 App 可以用圆润膨胀的按钮,更有亲和力;

  • 金融类 App 则可以用硬朗直角+渐变,体现专业稳重。

就像你会根据不同场合穿不同的衣服一样,你的设计也要学会“看场合打扮自己”。



4️⃣ 个性化定制:让用户觉得自己被宠爱

Material You 已经支持“颜色随壁纸变化”,而 Expressive 更进一步,把个性化渗透到每一个细节。

你可以根据:

  • 使用习惯;

  • 当天的心情;

  • 甚至是节日氛围;

来动态调整界面风格。比如:

  • 用户喜欢暗黑模式?没问题,但我们还可以给他“深海蓝”、“夜空紫”等多种主题选择。

  • 用户经常使用某个功能?我们可以把这个按钮放大一点、加个光晕,甚至偷偷给它加个表情包。

这就是新时代的“高情商设计”——知道什么时候该热情主动,什么时候该保持距离。




? 写给正在找工作的你

我知道很多同学都在准备作品集,忙着练手绘、学 Figma、做交互动效。但我要提醒你一句:

现在的面试官已经不再满足于你“会不会画按钮”,而是想知道你“为什么要这么画”。

他们会问你:

  • “你觉得为什么 Expressive 要强调‘富有表现力的颜色’?”

  • “你怎么看待动效在产品中的角色?”

  • “如果让你为老年人设计一个表达性更强的界面,你会怎么做?”

这些问题,不是你背几个规范就能答好的。你需要有自己的思考,有对用户心理的理解,有对产品目标的洞察。



✅ 给你的四个行动建议

1. 多看案例,不只是“收藏点赞”

Google 官方出了很多 Expressive 的 demo,别只停留在截图收藏阶段,去分析它们背后的设计逻辑。


2. 动手实践,别只停留在 PPT

用 Figma 或者 Adobe XD 模拟一些 Expressive 风格的界面,尝试加入动效和动态色彩。哪怕只是一个登录页,也要让它“活过来”。


3. 写设计文档,别只会放图

哪怕只是一个简单的页面,也要写出你:

  • 为什么要这样配色?

  • 为什么要用这种形状?

  • 动效的意义是什么?

这是你打动面试官的关键一步。


4. 关注行业趋势,别只盯着 Dribbble

去看看 Google I/O 的演讲视频,了解 Material 团队是怎么思考问题的。你会发现,优秀的设计从来都不是“好看就行”,而是“有用又有情”。




? 结语:未来的设计师,是“讲故事的人”

Material 3 Expressive 不仅仅是一套设计规范,它更像是一种新的设计哲学:

让用户不只是“使用”产品,而是“感受”产品。

在这个 AI 工具泛滥、视觉趋同的时代,真正打动人心的,不是谁的图标更精致,而是谁能让用户在使用过程中感受到一点点温暖、一点点惊喜、一点点“哦,原来你也懂我”的共鸣。

所以,未来的 UI 设计师,不仅要会画图,更要会“讲故事”。而 Material 3 Expressive,正好给了你一支好笔。


优网科技,优秀企业首选的互联网供应服务商

优网科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!

优网科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真)、移动端应用(手机站APP开发)、微信定制开发(微信官网、微信商城、企业微信)、微信小程序定制开发等一系列互联网应用服务。


我要投稿

姓名

文章链接

提交即表示你已阅读并同意《个人信息保护声明》

专属顾问 专属顾问
扫码咨询您的优网专属顾问!
专属顾问
马上咨询
联系专属顾问
联系专属顾问
联系专属顾问
扫一扫马上咨询
扫一扫马上咨询

扫一扫马上咨询

和我们在线交谈!