惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
雷峰网
雷峰网
Hugging Face - Blog
Hugging Face - Blog
IT之家
IT之家
H
Help Net Security
腾讯CDC
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
The GitHub Blog
The GitHub Blog
V
V2EX
M
MIT News - Artificial intelligence
Vercel News
Vercel News
WordPress大学
WordPress大学
博客园 - 三生石上(FineUI控件)
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
阮一峰的网络日志
阮一峰的网络日志
B
Blog RSS Feed
D
Docker
V
Visual Studio Blog
博客园 - 叶小钗
美团技术团队
S
SegmentFault 最新的问题
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com

人人都是产品经理

为什么你的产品找不到差异化?90%的失败都卡在第一步上(下) – 人人都是产品经理, 3年从30万到1300万用户、获2200万美元融资,这个AI教育产品用“抽卡”破解了获客难题 – 人人都是产品经理, 园区招商系统怎么做才能真正帮到去化?我加了这一个功能,推广链接转发400次阅读过万 – 人人都是产品经理, AI大事件:OpenAI发完网络安全模型又搞药物研发,小鹏汽车要抓”DeepSeek时刻” – 人人都是产品经理, 电商不是卖货,是一场更残酷的产品经理实战 – 人人都是产品经理, 没想到,活动营销又回来了! – 人人都是产品经理, 为何All-in海外KOC:一场关于AI时代窗口期的豪赌 – 人人都是产品经理, 重新理解企业的内部协作 – 人人都是产品经理, 苹果的 AI 战略到底是什么? – 人人都是产品经理, 医疗智能体·第2讲——合规护城河:等保、PIPL与HIPAA的架构实战 – 人人都是产品经理, 向量知识库五步法:从“答非所问”到“精准回复” – 人人都是产品经理, 鸿蒙PC三方库构建总指挥HPKBUILD(sha)库为例 – 人人都是产品经理, 何时该用LLM?AI产品经理的LLM设计指南 – 人人都是产品经理, 医疗信息领域的需求方、决策方、准入方以及关注点(二) – 人人都是产品经理, 即梦涨价:一场被误读的「傲慢」 – 人人都是产品经理, 面试AI PM必答题:Hermes和OpenClaw的区别,如何讲清楚业务价值 – 人人都是产品经理, AI的下一张船票:世界模型——AI产品经理必须理解的技术拐点 – 人人都是产品经理, 小红书做GEO,怎么让AI信你?记住这 3 个重要信息 – 人人都是产品经理, 5 家印度 AI 初创公司,看看印度 AI 再做什么 – 人人都是产品经理, AI项目跨团队协作:产品技术业务如何不打架 – 人人都是产品经理, Agentic Workflow(智能体工作流):让AI从”答案生成器”变成”数字员工” – 人人都是产品经理, lycium_plusplus 项目全景解读:OpenHarmony 三方库构建的“大管家” – 人人都是产品经理, 从爆单救火到前置履约:两套预采策略,把生鲜大促履约效率拉满 – 人人都是产品经理, 什么时候该补货?我用一轮数据做了一个决定 – 人人都是产品经理, 从“机械兜底”到“动态分流”:AI客服重复进线治理的4大底层逻辑 – 人人都是产品经理, 抖音拼效率,红书拼洞察 – 人人都是产品经理, 全民狂欢与退潮——为什么龙虾这波热潮冷却得如此之快? – 人人都是产品经理, Stripe押注!MPP重塑全球支付 – 人人都是产品经理, 小红书GEO:AI引用你的内容,不是因为你对,而是因为你看起来可信 – 人人都是产品经理, 前百度副总裁押注办公Agent,日韩付费爆发,Manus迎来强劲对手 – 人人都是产品经理,
Material Design 大更新!“极繁设计”风格,真正的情感化设计!
元尧 · 2025-05-27 · via 人人都是产品经理

Google 推出 Material Design 3 更新,采用极繁设计风格,优化颜色、字体、组件等,增强情感化设计与用户体验。

Google 的 Material Design 设计语言最新演进版本:Material 3 Expressive (以下简称 M3)于 2025 年 5 月的 The Android Show 活动中正式推出。

它是在 Material Design2 的基础上,强化现有设计哲学,重点在于更具表现力的界面和情感连接,目标是让安卓系统更易用、更吸引人。本文将为你介绍其主要特点:

Part 1‍‍‍‍‍‍‍设计表达:丰富多样

颜色:动态配色方案

M3 保留原有的基线色盘和配色方案,在此基础上升级了动态配色方案。动态配色方案会根据不同的颜色输入来改变 UI 界面的颜色,让整个产品的视觉外观就像壁纸一样可以任意变换。而其中一些特定颜色,例如语义色或功能色,可以设置为不做动态变化:

应用动态配色方案的产品可以自动生成界面视觉效果,并为 UI 中的每个元素分配颜色。该功能的主要优势在于:

– 用户界面可以更加个性化;

– 用户可以更随意地调控页面颜色的搭配和对比度;

– 整个系统可以自动丝滑地转换暗色主题或多色主题;

– 应用产品可以基于使用环境产生视觉变化,并能够与手机背景、壁纸和其它使用环境更加自然地融合。

给你举两个例子:

例 1:Android 系统可以采用你的手机锁屏壁纸的主色调,将其融入系统 UI 和应用程序中,为你创建独特的色彩视觉界面,下图的应用程序就采用了来自用户红色壁纸的主题色,动态生成配色方案:

例 2:应用程序可以采用了来自应用内部的图片的主色调,来动态生成配色方案进行着色。如下图的音乐播放器程序就采用了来自应用程序内歌曲专辑封面的蓝色调,对播放器整体界面进行动态配色:

字体:加大、加粗、适配

M3 共有 30 种字体样式,包括 15 种基线字体和 15 种强调字体。每种字体样式都能在不同屏幕尺寸和内容上下文中流畅适配。加大加粗了新字体的基准字重和字号,最适合用于粗体、选择和其他强调区域,便于用户在阅读时快速识别关键信息。

同时,字体的样式可以使用 Material Token 来进行自定义,每一个样式的字体、行高、大小、粗细等都有单独对应的 Token,都可以做重新调整以适应应用产品的设计风格:

组件:新增变体 & 样式

M3 把此次的组件升级称之为“Expressive components「富有表现力的组件」”,对包括按钮组、加载提示、菜单等 15 个组件做了更新,使之具备更多的配置功能、形状选项、强调文本和其他富有表现力的样式:

比如导航栏线条更简洁,位置更高;浮动操作按钮增加多种尺寸,轮廓更方正;对话框增大了内边距、加粗了文本以提高可读性等等:

几乎所有组件都采用了新的圆润造型,连谷歌新默认字体 Google Sans Flex Rounded 的笔画末端也从原本的锐角转为平滑圆角。

动效:运动拟物系统

M3 使用了运动弹簧感的新拟物效果,使交互和转换感觉更加生动、流畅和自然。交互动画模拟弹簧物体实际运动的物理原理,使动画清晰可预测,也能为实体颜色与有透明度颜色之间创造无缝衔接与过渡:

弹簧效果有三种速度:默认、快速和慢速。大多数元素的运动都使用默认速度,较小的元素可以使用快速,较大的元素可以使用慢速。Google 认为这种微动画增强了交互的流畅感和视觉反馈,又不会让用户感到厌烦。下图中左边为 M3 弹簧动效,右边为之前的标准动效:

图形:扩展形状样式

M3 添加了 35 种新形状和形状变体,为图像裁剪和头像等元素增加装饰细节。M3 也为这些形状添加了新的使用原则和规范指导:

形状可以对不同的交互(例如点击、滑动、滚动、释放和长按等)做出反应。因此使用形状的变化可以更好地传达以下信息:

– 交互动作及状态:例如选择按钮、打开开关等;

– 正在进行的操作:例如正在打字、页面加载等;

– 元素及环境变化:例如声音、温度或时间上的变化等。

Part 2‍‍‍‍‍‍‍ 设计策略:极繁主义‍‍‍‍‍‍

随着产品开始使用新的视觉表达元素, Google 也迅速建立了一套设计策略,包括以下 7 点。这些设计策略会帮助设计师正确使用 M3,让组件、布局和产品更具表现力:

1. 应用不同的形状和比例

形状是界面设计中强大的沟通工具。在视觉设计的基础层面,组件、元素和容器的形状会为用户奠定第一印象。巧妙地结合形状和圆角,可以营造出视觉张力和聚合力,引导用户的注意力。比如,下图左侧图中较小的、规整的形状可能会导致操作功能看起来不那么重要;而右侧图中打破规则的、不一致的形状和变化线条风格可以吸引用户对特定元素的注意力:

2. 使用丰富而细腻的色彩

M3 的动态色彩系统用于关键组件或视觉元素,有助于强调屏幕的主要内容,创建出更加丰富的视觉层次,以此强化出用户操作的优先级。比如,左侧图中的色彩对比度不强,变化较少,元素之间就容易分不清主次;而右侧图中使用强烈的色彩对比来强调主要内容和元素,可以自然而然地引导用户进行操作:

3. 使用字体引导用户视线

使用突出强调的文本样式来吸引用户对重要界面元素(如标题和主要操作)的注意力。更大的字重、更大的字号和间距的对比关系可以使关键信息更具吸引力。混合使用 Material 字体库中的其他字体样式,有助于创建出适当的信息层级:

4. 用容器组织和强调内容

将信息内容进行合理的分组,并组织到容器当中,使用大小、间距、节奏、相似性等分组原则,使最重要的内容、任务或操作在视觉上更加突出,信息更加清晰易懂:

5. 使用流畅而自然的动效

通过形状变形或表面效果的变化让交互更加生动活泼,合理使用富有表现力的运动弹簧或自定义微动画:

6. 善于应用组件的灵活性

产品的 UI 应该根据整体环境来调整组件大小、形状、配色和自定义布局,使内容适应于任意尺寸的屏幕和使用场景,帮助用户的更容易完成操作任务:

7. 结合技术创造英雄时刻

产品的“英雄时刻(Hero Moment)”是指:以新颖的、恰当的方式突出重要信息,让最重要的互动环节精彩纷呈,这些时刻正是产品的核心灵魂。

“英雄时刻”通常是短小精悍、令人惊喜且出乎意料的。产品功能中的“英雄时刻”数量应有所控制,过多的英雄时刻可能会让人不知所措或分心。

Google 称 M3 是“有史以来研究最深入的一次更新”,也是迄今最具“极繁主义”风格的设计版本,旨在通过丰富的设计元素和多样的设计手法来引导用户更迅速、高效地完成操作任务,与此同时重新唤起用户的愉悦与惊喜。更大胆的色彩、更俏皮的动画和更直接的界面语言已经成为 Material Design 的主导特征。

本文由人人都是产品经理作者【元尧】,微信公众号:【长弓小子】,原创/授权 发布于人人都是产品经理,未经许可,禁止转载。

题图来自Unsplash,基于 CC0 协议。