Material 3 Expressive logo

Material 3 Expressive

增强用户互动,提升设计效率

Material 3 Expressive更新:新增组件、动态物理系统、色彩方案和风格,提升用户体验,提高界面易用性和情感连接。基于18000多名参与者的研究,优化设计,提升用户互动和效率。

Sponsors

Become one
Featured
NotchNook
NotchNook

NotchNook

Access media, calendar, files, and more from the Mac's notch

Visit Website
Featured
NoFilterGPT
NoFilterGPT

NoFilterGPT

Unleash the Unrestricted Power of anonymous and unfiltered ChatGPT

Visit Website

Promote your product

Seen by 300K+ monthly visitors

Material 3 Expressive - 增强用户互动,提升设计效率 | Product Screenshot
Material 3 Expressive product screenshot

更多关于 Material 3 Expressive 的信息

Material 3 Expressive

Material 3 Expressive 是一个旨在提升用户体验的设计系统。它通过新增组件、动态效果和色彩方案,帮助开发者创建更具情感共鸣的产品界面。在各种应用场景中,它都能提升用户参与度和效率,例如,通过更直观的UI元素,用户可以更快地找到关键信息。

  • 表达性组件:提供15个新增或更新的组件,具有更多配置能力、形状选项、强调文本和其他表达性更新,例如按钮组、FAB菜单、加载指示器和工具栏等。
  • 动态物理系统:全新的动态物理系统,使用运动弹簧使交互和过渡更生动、流畅和自然,空间弹簧模仿物体实际移动的物理特性,效果弹簧则为颜色和不透明度变化创建无缝过渡。
  • 强调型排版:提供可变和静态字体的全新字体样式,用于表达各种情感状态,自动调整可读性变量,并支持粗体编辑布局,强化信息层级,并提请注意重要操作或信息。
  • 扩展形状库:包含35种形状,可为图像剪裁和头像等元素添加装饰细节,内置的形状变形动画允许从一种形状平滑过渡到另一种形状。
  • 鲜艳的色彩方案:提供更丰富的色彩,用于增强层级结构并阐明关键操作,丰富的视觉样式支持个性化和动态颜色。
  • 多种形状的使用:通过多种形状组合,创建视觉张力或凝聚力,并引导用户关注应用中的特定元素。
  • 丰富且细致的色彩应用:混合主色、次色和三次色,以突出屏幕的主要内容,并使用表面色调创建视觉层级,从而简化导航。
  • 利用排版引导注意力:使用强调文本样式来突出显示重要的UI元素,例如标题和操作,通过强调排版来创建类似编辑的效果,使用 Material 字体比例中的其他字体样式有助于在内容块内部和之间创建适当的层级结构。
  • 包含内容以增强重点:将内容组织成逻辑分组或容器,通过充足的空间和最亮的表面映射使最重要的内容、任务或操作具有视觉突出性,使用大小、间距、节奏、相似性或其他分组原则使重要元素更清晰。
  • 添加流畅自然的动态效果:通过形状变形或表面效果使交互更生动,应用表达性运动弹簧或自定义微动画。
  • 利用组件的灵活性:UI 应适应用户环境,根据环境调整组件或控件,以便于完成任务,通过自定义调整或应用规范布局来使内容适应可折叠的大屏幕。
  • 组合策略以创建英雄时刻:英雄时刻使用多种表达性策略来打破可预测或统一应用的设计理念,旨在以一种新颖的编辑方式来表达独立的声明或框架重要信息,是产品的核心。

Material 3 Expressive 不仅仅是一个设计系统更新,它代表着用户体验设计的一次飞跃。通过它,您可以创建更具情感共鸣、更易于使用且更令人向往的产品。借助改进的组件、流畅的动态效果和丰富的色彩方案,提升用户参与度,并显著缩短用户完成关键任务所需的时间。选择 Material 3 Expressive,让您的产品脱颖而出,在竞争激烈的市场中占据优势。