Vibulary
選單
外觀與語言
依主題找術語 · 50 份指南

設計

學會做出清楚、一致、好用，而且每個人都能使用的畫面。

01 / 術語圖鑑

全部設計術語

開啟一個術語，就能看簡單解釋、例子、使用時機、正式程度和程式名稱。

  1. 01 · 深入了解

    千禧數位美學 Y2K Digital Aesthetic

    千禧數位美學來自 1990 年代末到 2000 年代初。它是數位文化中的復古未來風，常見鍍鉻、像素、鮮豔漸層和俏皮電腦元素。

  2. 02 · 核心

    互動狀態 Interaction State

    互動狀態（Interaction State）是控制項目前的情況，例如預設、滑鼠停留、焦點、按下、停用、載入、錯誤或成功。

  3. 03 · 核心

    元件 Component

    元件（Component）是可重複使用的介面部分，具有清楚的結構、行為、狀態與邊界。

  4. 04 · 核心

    元件變體 Variant

    元件變體（Variant）是同一元件的正式版本。尺寸、重要程度或使用情境可以不同。

  5. 05 · 深入了解

    可操作暗示 Affordance

    可操作暗示（Affordance）是看得到或感覺得到的線索，讓人知道物件可以怎麼操作。

  6. 06 · 深入了解

    字級比例 Type Scale

    字級比例（Type Scale）是整個產品共用的一小組字級與行高。

  7. 07 · 核心

    字體排印 Typography

    文字排版（Typography）是選擇與安排文字樣式的方法，讓內容好讀、有層次，也符合品牌語氣。

  8. 08 · 核心

    有機形態設計 Organic Design

    有機設計從自然形態取材。它使用不規則曲線、有觸感的材質、自然色彩和較不機械的版面。

  9. 09 · 核心

    色彩對比 Color Contrast

    色彩對比（Color Contrast）會量測前景內容和旁邊背景的明暗差異，用來判斷重要文字與邊界是否看得清楚。

  10. 10 · 核心

    色彩盤 Color Palette

    色彩盤（Color Palette）是一組規劃好的顏色，每個顏色都分配給明確的用途、狀態或表面。

  11. 11 · 深入了解

    侘寂美學 Wabi-sabi

    侘寂是日本的美學觀。它重視克制、變化、不規則、歲月痕跡和真實材料，而非完美拋光。

  12. 12 · 深入了解

    孟菲斯風格 Memphis Style

    Memphis Style 是大膽的後現代風格。它使用強烈形狀、衝突色彩、圖案、不對稱版面和趣味。

  14. 14 · 深入了解

    玻璃擬態 Glassmorphism

    玻璃擬態是一種使用半透明分層表面的視覺風格，會搭配模糊、亮邊和適度的深度感。

  15. 15 · 深入了解

    液態玻璃 Liquid Glass

    液態玻璃是一種會隨動態變化的半透明材質風格，會用透鏡般的折射、高光，以及看似融合或彎曲的形狀。

  16. 16 · 核心

    深色模式 Dark Mode

    深色模式（Dark Mode）是一套完整主題，會為深色環境調整表面、文字、邊框、媒體與狀態。

  17. 17 · 核心

    視覺層級 Visual Hierarchy

    視覺層級（Visual Hierarchy）會用尺寸、對比、位置、間距與分組，引導使用者先看什麼、再看什麼。

  19. 19 · 核心

    設計系統 Design System

    設計系統（Design System）是一套共用規則。它也包含設計變數、元件、模式與指南，並會持續維護。

  20. 20 · 核心

    設計變數 Design Token

    設計變數（Design Token）是替一項設計決策命名的值，例如顏色、間距、字型或動態速度。

  22. 22 · 核心

    無障礙設計 Accessibility

    無障礙設計（Accessibility）讓不同能力的人都能理解和操作產品。它是一種設計與開發方式。

  23. 23 · 核心

    焦點環 Focus Ring

    顯示在控制項周圍的線條或亮色，用來指出鍵盤目前會操作哪裡。

  24. 24 · 核心

    間距比例 Spacing Scale

    間距比例（Spacing Scale）是一小組共用的間距值，用來表達分組並保持穩定的畫面節奏。

  25. 25 · 深入了解

    新粗獷主義 Neobrutalism

    新粗獷主義是一種大膽、高對比的數位風格，常用簡單幾何、粗邊框、直接色彩和刻意帶機械感的構圖。

  26. 26 · 深入了解

    新擬物風 Neumorphism

    新擬物風是一種柔和、低對比的風格。它用明暗陰影，讓控制項看起來從同色表面浮起或凹下。

  27. 27 · 核心

    極簡設計 Minimalism

    極簡設計會拿掉不需要的元素，但仍要讓產品清楚、好用，也保有自己的特色。

  28. 28 · 深入了解

    瑞士國際主義風格 Swiss Style

    瑞士國際主義風格是一種平面設計方法。它使用清楚網格和不對稱但平衡的版面，也常用無襯線字型、攝影和嚴謹層級。

  29. 29 · 深入了解

    圖示系統 Iconography

    圖示系統（Iconography）是一套外觀一致、意義清楚的符號，用來表示操作與概念。

  30. 30 · 深入了解

    漸進揭露 Progressive Disclosure

    漸進揭露（Progressive Disclosure）會先顯示必要選項，等使用者真的需要時再展開較複雜的內容。

  31. 31 · 核心

    漸層 Gradient

    漸層是色彩或透明度平順變化的效果，可以沿著直線、圓形、角度或網格變化。

  32. 32 · 深入了解

    網頁粗獷主義 Web Brutalism

    網頁粗獷主義是一種看起來很原始的網頁風格。它會露出頁面結構、瀏覽器預設樣式和樸素字型，也會故意保留粗糙感。

  36. 36 · 深入了解

    擬物設計 Skeuomorphism

    擬物設計會借用熟悉的實體造型和材質，幫助使用者理解數位控制項怎麼操作。

  37. 37 · 深入了解

    黏土擬態 Claymorphism

    黏土擬態是一種活潑風格，會用膨膨的形狀、圓角、柔和的內外陰影，以及像黏土的粉彩表面。

  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 電商讓品牌直接賣給消費者。流程包含找商品、選擇規格、付款、配送和售後協助。