Vibulary
菜单
外观与语言
按主题找术语 · 50 份指南

设计

学习做出清楚、一致、好用，而且每个人都能使用的界面。

01 / 术语图鉴

全部设计术语

打开一个术语，就能看简单解释、示例、使用时机、正式程度和代码名称。

  3. 03 · 深入了解

    玻璃拟态 Glassmorphism

    玻璃拟态是一种使用半透明分层表面的视觉风格，会搭配模糊、亮边和适度的深度感。

  4. 04 · 深入了解

    侘寂美学 Wabi-sabi

    侘寂是日本的美学观。它重视克制、变化、不规则、岁月痕迹和真实材料，而非完美抛光。

  5. 05 · 核心

    极简设计 Minimalism

    极简设计会去掉不需要的元素，但仍要让产品清晰、好用，也保留自己的特色。

  6. 06 · 核心

    间距体系 Spacing Scale

    间距体系（Spacing Scale）是一小组共用的间距值，用来表达分组并保持稳定的页面节奏。

  7. 07 · 核心

    渐变 Gradient

    渐变是颜色或透明度平滑变化的效果，可以沿着直线、圆形、角度或网格变化。

  9. 09 · 核心

    交互状态 Interaction State

    交互状态（Interaction State）是控件当前的情况，例如默认、鼠标悬停、焦点、按下、禁用、加载、错误或成功。

  10. 10 · 核心

    焦点环 Focus Ring

    显示在控件周围的线条或亮色，用来指出键盘当前会操作哪里。

  11. 11 · 深入了解

    可操作性暗示 Affordance

    可操作性暗示（Affordance）是看得到或感觉得到的线索，让人知道对象可以怎么操作。

  12. 12 · 深入了解

    孟菲斯风格 Memphis Style

    Memphis Style 是大胆的后现代风格。它使用强烈形状、冲突色彩、图案、不对称布局和趣味。

  13. 13 · 深入了解

    拟物设计 Skeuomorphism

    拟物设计会借用熟悉的实体造型和材质，帮助用户理解数字控件如何操作。

  14. 14 · 深入了解

    黏土拟态 Claymorphism

    黏土拟态是一种活泼风格，会用鼓起的形状、圆角、柔和的内外阴影，以及像黏土的粉彩表面。

  15. 15 · 深入了解

    千禧数字美学 Y2K Digital Aesthetic

    千禧数字美学来自 1990 年代末到 2000 年代初。它是数字文化中的复古未来风，常见镀铬、像素、鲜艳渐变和俏皮电脑元素。

  17. 17 · 深入了解

    瑞士国际主义风格 Swiss Style

    瑞士国际主义风格是一种平面设计方法。它使用清楚网格和不对称但平衡的布局，也常用无衬线字体、摄影和严谨层级。

  18. 18 · 核心

    色彩对比度 Color Contrast

    色彩对比度（Color Contrast）会测量前景内容和旁边背景的明暗差异，用来判断重要文字和边界是否看得清楚。

  19. 19 · 核心

    色彩体系 Color Palette

    色彩体系（Color Palette）是一组规划好的颜色，每个颜色都分配给明确的用途、状态或表面。

  20. 20 · 核心

    设计令牌 Design Token

    设计令牌（Design Token）是为一项设计决定命名的值，例如颜色、间距、字体或动效速度。

  21. 21 · 核心

    设计系统 Design System

    设计系统（Design System）是一套共用规则。它也包含设计令牌、组件、模式和指南，并会持续维护。

  22. 22 · 核心

    深色模式 Dark Mode

    深色模式（Dark Mode）是一套完整主题，会为深色环境调整表面、文字、边框、媒体和状态。

  23. 23 · 核心

    视觉层级 Visual Hierarchy

    视觉层级（Visual Hierarchy）会用尺寸、对比、位置、间距和分组，引导用户先看什么、再看什么。

  24. 24 · 深入了解

    图标体系 Iconography

    图标体系（Iconography）是一套外观一致、含义清楚的符号，用来表示操作和概念。

  26. 26 · 深入了解

    网页粗野主义 Web Brutalism

    网页粗野主义是一种看起来很原始的网页风格。它会露出页面结构、浏览器默认样式和朴素字体，也会有意保留粗糙感。

  27. 27 · 核心

    无障碍设计 Accessibility

    无障碍设计（Accessibility）让不同能力的人都能理解和使用产品。它是一种设计与开发方式。

  29. 29 · 深入了解

    新粗野主义 Neobrutalism

    新粗野主义是一种大胆、高对比的数字风格，常用简单几何、粗边框、直接色彩和刻意带机械感的构图。

  30. 30 · 深入了解

    新拟物风 Neumorphism

    新拟物风是一种柔和、低对比的风格。它用明暗阴影，让控件看起来从同色表面浮起或凹下。

  31. 31 · 深入了解

    液态玻璃 Liquid Glass

    液态玻璃是一种会随动效变化的半透明材质风格，会用透镜般的折射、高光，以及看似融合或弯曲的形状。

  33. 33 · 核心

    有机形态设计 Organic Design

    有机设计从自然形态取材。它使用不规则曲线、有触感的材质、自然色彩和较不机械的布局。

  34. 34 · 核心

    终端美学 Terminal Aesthetic

    终端美学借用命令行页面。它使用等宽字、紧密层级、Prompt 符号、少量色彩和清晰状态。

  35. 35 · 深入了解

    字号比例 Type Scale

    字号比例（Type Scale）是整个产品共用的一小组字号和行高。

  36. 36 · 核心

    字体排印 Typography

    字体排印（Typography）是选择与安排文字样式的方法，让内容易读、有层次，也符合品牌语气。

  37. 37 · 核心

    组件 Component

    组件（Component）是可重复使用的界面部分，具有清晰的结构、行为、状态和边界。

  38. 38 · 核心

    组件变体 Variant

    组件变体（Variant）是同一组件的正式版本。尺寸、重要程度或使用场景可以不同。

  40. 40 · 深入了解

    Aqua 水润界面风 Aqua

    Aqua 是和早期 macOS 有关的亮面界面风格，常见发光控件、凝胶般的立体感、细条纹和鲜明蓝色。

  41. 41 · 核心

    B2B 企业网站 B2B Corporate Site

    B2B 企业网站让不同商业角色了解公司的能力、规则和可信度。也帮助他们判断是否适合采购或合作。

  43. 43 · 核心

    CSS 圆角半径 CSS Border Radius

    CSS 圆角半径（border-radius）会用水平和垂直半径，把盒子角落画成四分之一椭圆。它会影响绘制和裁剪，但不改变布局尺寸，也不会生成数学意义上的 Squircle。

  44. 44 · 深入了解

    CSS Squircle 方圆角 CSS Squircle Corner

    在 CSS Borders Level 4 草案中，Squircle 是 corner-shape 的一个值，会画出介于圆形和方形之间的凸形超椭圆曲线，等同于 superellipse(2)。它需要非零的圆角半径，也必须先检查浏览器支持。

  45. 45 · 核心

    DTC 品牌电商 DTC E-commerce

    DTC 电商让品牌直接卖给消费者。流程包含找商品、选择规格、支付、配送和售后帮助。