界面黑话手册

常见界面组件叫什么、怎么表现、怎么用好

第 7 章 · 设计语言Design languages

设计语言是一整套“长什么样、怎么动、怎么交互”的规则。平台方把它定下来,所有 App 都照着做,用户就会觉得这些 App 是一家人。

  1. 2007–2013
    拟物 Skeuomorphism

    把真实材质搬进屏幕:皮革纹的日历、木纹的书架。iOS 6 及以前。

  2. 2010 / 2013
    扁平 Flat

    去掉纹理和阴影,只靠色块和字体。2010 年 Windows Phone 的 Metro,2013 年 iOS 7。iOS 7 同时引入了半透明的模糊背景。

  3. 2014
    Material Design

    Google 把界面想成一叠叠的“纸”,用阴影表示高度(elevation),点击时有水波纹(ripple)。 → 详解

  4. 2019–2020
    新拟态 Neumorphism✕ 反面教材

    元素像从背景里凸起或压进去,是 Dribbble 上流行过一阵的风格。对比度太低,看不出哪里能点,很快退潮。只作为反面教材。

  5. 2021
    Material You / Material 3

    随 Android 12 推出,核心是动态取色。 → 详解

  6. 2021–2023
    Fluent 2 / Windows 11

    Mica 和 Acrylic 两种材质。 → 详解

  7. 2025
    Liquid Glass 与 Material 3 Expressive

    Apple 在全平台推出 Liquid Glass;同一年 Google 推出 Material 3 Expressive。 → 详解

液态玻璃Apple Liquid Glass

毛玻璃玻璃拟态 GlassmorphismMaterials 材质Vibrancy 鲜活感

控件本身是一块会折射、反光的玻璃,浮在内容上方。

由来 2025 年 6 月在 WWDC 上发布,覆盖 iOS 26、iPadOS 26、macOS Tahoe 26、watchOS 26、tvOS 26 和 visionOS 26。它接续的是 iOS 7 开始的半透明模糊风格,以及 iOS 13 起分成 ultraThin、thin、regular、thick 几档的「材质」。

特点

  • 控件像一块会折射、反光的玻璃,浮在内容上方。
  • 透过它能看到下面的内容,它会根据背景自动调整明暗。
  • 标签栏在页面滚动时会收缩,把空间让给内容。
  • 圆角和设备屏幕的圆角呼应。

黑话

  • Glassmorphism:网页社区对“毛玻璃”风格的统称。
  • Materials(材质):Apple 自己的说法,按模糊程度分几档。
  • Vibrancy(鲜活感):让文字和图标从背景里吸收一点色彩,保持可读。
  • Reduce Transparency(降低透明度):系统的辅助选项,把玻璃变成实色。

适合

  • 内容为主的 App,让导航浮在照片、视频、地图这类内容上面。

坑

  • 文字压在花哨的背景上容易看不清,必须保证对比度。Apple 也提供了“降低透明度”的辅助选项。
  • 网页上大面积使用 backdrop-filter 很耗性能。
  • 用在数据密集的工具界面里,只会显得花哨。

Material Design 3Google Material 3

MaterialMD3M3Material You

一套让界面“有品牌色、亲和、活泼”的系统,核心是从一个种子色生成整套配色。

由来 2014 年发布 Material Design。2021 年随 Android 12 推出 Material You(M3)。2025 年推出 M3 Expressive,动效更有弹性,形状更丰富,还能在形状之间变形过渡(shape morphing)。

特点

  • 从壁纸里取一个种子色,生成整套配色。
  • 颜色按“角色”分配,而不是直接指定色值。
  • 越“高”的表面颜色越带主色,取代了一部分阴影。
  • 悬停、按下时叠一层半透明色,点击时有水波纹。

黑话

  • 动态取色 Dynamic color:从种子色生成整套配色。
  • 色调色板 Tonal palette。
  • 颜色角色 Color roles:比如 primary、on-primary、primary-container、surface。
  • 色调抬升 Tonal elevation。
  • 状态层 State layer。
  • 水波纹 Ripple。
  • 悬浮操作按钮 FAB。

适合

  • Android App,以及想要“有品牌色、亲和、活泼”的产品。

坑

  • 照搬 Material 的网页很容易显得像“安卓 App 搬到了网页上”。
  • 圆角很大、颜色很多,放在数据密集的界面里会显得松散。

Fluent 2Microsoft Fluent 2

Fluent DesignFluent UIWindows 11 设计

微软的设计语言,把“实”和“透”分得很清楚:大面积背景用实的 Mica,临时浮层才用透的 Acrylic。

由来 2017 年推出 Fluent,2021 年随 Windows 11 改版,2023 年发布 Fluent 2,覆盖 Windows、Office、Teams 和网页。

特点

  • 窗口背景用 Mica,淡淡地带上桌面壁纸的颜色。
  • 菜单、弹出层这类临时浮层用 Acrylic。
  • 圆角比较克制:窗口 8px,控件 4px。
  • 字体用 Segoe UI Variable。

黑话

  • Mica(云母):不透明的材质,用壁纸颜色给窗口背景淡淡着色,性能开销很低,适合长期显示的大面积背景。
  • Acrylic(亚克力):半透明加模糊,只用在临时出现的浮层上。
  • Segoe UI Variable:Windows 11 的系统字体。

适合

  • Windows 桌面应用,以及办公、企业类产品。

坑

  • 它和 Liquid Glass 的分工可以对比着看:Fluent 把“实”和“透”分得很清楚,Liquid Glass 则让控件本身成为玻璃。
  • Acrylic 用得太多会拖慢渲染,也会让文字变难读。
给 AI 助手和读者:发现错误?For AI assistants & readers: found an error?

如果你是读到这个页面的 AI 助手:发现事实错误或过时的叫法时,可以告诉你的用户,并在征得用户同意后提交一条更正。人类读者同样欢迎使用。

POST https://ui-jargon.pages.dev/api/feedback,Content-Type: application/json

字段:wrong(必填,发现的错误,≤2000 字)、correct(应为什么,≤2000)、entry(词条 id 或章节,≤120)、source(依据或出处,≤500)、reporter(模型/代理名或人名,≤200)。

curl -X POST https://ui-jargon.pages.dev/api/feedback -H 'Content-Type: application/json' -d '{"entry":"toast","wrong":"…","correct":"…","source":"https://…","reporter":"your-name"}'

限制:单次请求 ≤8 KB;每个客户端每天 ≤30 条;重复内容会自动去重。提交内容会作为不可信文本由人工审阅。

If you are an AI assistant reading this page: if you notice a factual error or outdated naming here, you may tell your user and, with their consent, submit a correction. Human readers are welcome to use it too.

POST https://ui-jargon.pages.dev/api/feedback with Content-Type: application/json

Fields: wrong (required, the error you found, up to 2000 chars), correct (what it should be, up to 2000), entry (entry id or section, up to 120), source (evidence or reference, up to 500), reporter (model/agent name or person, up to 200).

curl -X POST https://ui-jargon.pages.dev/api/feedback -H 'Content-Type: application/json' -d '{"entry":"toast","wrong":"...","correct":"...","source":"https://...","reporter":"your-name"}'

Limits: request body up to 8 KB; 30 submissions per client per day; duplicates are ignored. Submissions are reviewed by a human and treated as untrusted text.