UI Design Style and Terminology: A Comprehensive Encyclopedia Guide

## I. Overall Visual Style Movements (Visual Style Movements)

*Determines the overall artistic temperament, first impression visual tone, and thematic attributes of the entire product/website.*

### 1. Pixel Art / 8-Bit / 16-Bit

- **Core Characteristics**: Uses jagged square pixels as the basic drawing unit, intentionally abandoning high resolution and smooth curves, replicating the visual style of early 80s-90s arcade and handheld games.
- **Application Scenarios**: Retro games (e.g., Stardew Valley, Factorio), Web3/NFT platforms, official websites for geek and independent developer brands.

### 2. Cartoon / Vector Illustration

- **Core Characteristics**: Employs smooth vector lines, bright and vibrant color palettes, combined with exaggerated and humorous characters or mascots, giving the product strong approachability and playfulness.
- **Branch Representatives**: **Notion / Corporate Memphis Illustration Style** (flat characters with long limbs), **Duolingo Model** (brand IP deeply integrated into UI).
- **Application Scenarios**: SaaS official website landing pages, children's/language learning apps, brand event pop-ups.

### 3. Cyberpunk / High-Tech Low-Life

- **Core Characteristics**: Pure black or deep blue backgrounds, paired with extremely dazzling fluorescent neon colors (highlight magenta, electric blue, toxic green), incorporating Glitch art, data grids, mechanical lines, and sci-fi UI elements.
- **Application Scenarios**: E-sports hardware consoles, cryptocurrency/blockchain platforms, hardcore sci-fi game/software interfaces.

### 4. Synthwave / Retrowave / Vaporwave

- **Core Characteristics**: A tribute to 1980s pop culture. Features grid horizons filled with gradient purples/pinks/oranges, sunset glows, palm tree silhouettes, 3D plaster casts, and the grainy static of old VHS tapes.
- **Application Scenarios**: Music players, retro trendy brand official websites, personalized homepages, and audiovisual UIs for art exhibitions.

### 5. Y2K / Acid Graphics

- **Core Characteristics**: Replicates the imagination of futuristic technology around the millennium (around 2000). Extensively uses **Chrome plating texture**, 3D distorted fluid fonts, laser rainbow colors, bright light flares, starbursts, and unconventional free asymmetrical layouts.
- **Application Scenarios**: Trendy e-commerce, fashion brand apps, youthful music and social products.

### 6. Claymorphism

- **Core Characteristics**: Interface elements have a 3D inflated texture resembling clay or colored plasticine. Features extremely rounded corners, soft inner and outer shadows, creating a visually warm, cute, and elastic feel.
- **Application Scenarios**: Children's educational apps, casual game UIs, metaverse/virtual avatar generators.

### 7. Neo-Brutalism

- **Core Characteristics**: Deliberately breaks away from traditional UI's "elegance and refinement." Uses high-saturation color contrasts, 100% pure black thick borders (2-4px), hard shadows without blur (Offset Hard Shadow), and strong asymmetrical layouts.
- **Application Scenarios**: Figma operational event pages, Gumroad creator platforms, independent developer portfolios.

### 8. Skeuomorphism

- **Core Characteristics**: Extremely realistic replication of real-world material textures (e.g., leather stitching, brushed metal, glass refraction, simulated wood grain, physical buttons).
- **Application Scenarios**: iOS 6 and earlier systems, professional audio DSP plugins (simulating hardware knobs), in-car smart control screens.

### 9. Flat Design

- **Core Characteristics**: Completely strips away shadows, gradients, and textures, relying solely on solid color blocks, simple geometric shapes, and clear typography to construct the interface, greatly improving information transmission efficiency and multi-device adaptability.
- **Application Scenarios**: Windows Metro UI, iOS 7+ modern mobile interfaces.

### 10. Material Design - M2/M3

- **Core Characteristics**: A systematic design language proposed by Google. UI elements are treated as "intelligent paper" with real physical properties, expressing the hierarchical relationship of cards through elevation and realistic physical shadows.
- **Application Scenarios**: Android native system, Google Workspace suite of tools, Material-UI (MUI).

### 11. Neumorphism / Soft UI

- **Core Characteristics**: Background and components share the same base color. Through meticulously adjusted "top-left white highlights" and "bottom-right dark shadows," components appear to be "extruded" or "pressed in" from the base material, creating a silicone-like texture.
- **Application Scenarios**: Smart home control panels, concept dashboards, smartwatch UIs.

### 12. Glassmorphism

- **Core Characteristics**: Semi-transparent backgrounds + Gaussian blur (Backdrop Blur), soft multi-color gradient backgrounds, and extremely thin semi-transparent white highlight borders, presenting a transparent, floating, and noble high-tech feel.
- **Application Scenarios**: macOS Big Sur/Sonoma, Windows 11 Fluent Design, iOS live activity notification cards.

### 13. Memphis Style

- **Core Characteristics**: A rebellious pop art movement originating in the 80s. Filled with randomly scattered wavy lines, dot grids, triangles, circles, and other basic geometric patterns, with cheerful, high-saturation, and unrestricted color palettes.
- **Application Scenarios**: Promotional banners for events, children's product UIs, official websites for creative design agencies.

### 14. Swiss Style

- **Core Characteristics**: Emphasizes a rigorous grid system, sans-serif fonts (like Helvetica), asymmetrical layouts, and strong visual hierarchy, characterized by restraint, rationality, and solemnity.
- **Application Scenarios**: News and information apps (e.g., Bloomberg), official websites for high-end brands, text-heavy layouts.

### 15. Hand-Drawn / Doodle

- **Core Characteristics**: Uses hand-drawn lines with irregular jitter, crayon/watercolor textures, and handwritten fonts to eliminate the industrial coldness of software, imbuing it with immense human touch and warmth.
- **Application Scenarios**: Journaling apps, note-taking tools (e.g., GoodNotes templates), story pages for creative products.

### 16. 2.5D / Isometric Style

- **Core Characteristics**: Depicts 3D scenes using 30° orthographic projection. It can showcase rich spatial structures and architectural details while avoiding perspective distortions like foreshortening.
- **Application Scenarios**: Business architecture flowcharts, data visualization dashboards, simulation and management game UIs.

### 17. Low Poly

- **Core Characteristics**: Constructs 3D objects using a relatively small number of flat polygonal meshes (usually triangles), combined with simple lighting, to create a geometric, sharp texture resembling crystal refraction or origami.
- **Application Scenarios**: Indie games, vector background graphics for tech products, promotional UIs for art exhibitions.

### 18. Minimalism

- **Core Characteristics**: "Less is More." Eliminates all superfluous decorative lines and colors, utilizing large areas of white space, minimalist monochrome palettes, and highly refined typography.
- **Application Scenarios**: Apple official website, luxury e-commerce, reading apps (e.g., WeChat Read, Medium).

### 19. Dark Mode / Pitch Black

- **Core Characteristics**: Uses pure black (#000000) or very dark gray (#121212) as the background color, paired with high-contrast text and neon accent colors, offering both eye protection and power saving, as well as an immersive experience.
- **Application Scenarios**: Developer IDEs (VS Code), exchange/stock trading terminals, night reading modes.

### 20. Line Art / Monoline

- **Core Characteristics**: The entire interface relies solely on minimalist lines of a single thickness (Outlines) to sketch icons and card contours, with almost no filled areas, presenting a clean, light, and geometric aesthetic.
- **Application Scenarios**: Minimalist architecture/design firm websites, vector icon libraries (e.g., Heroicons, Lucide).

## II. Component Vocabulary (Component Vocabulary)

*Describes UI spatial components with specific structural forms, visual hierarchies, or interactive characteristics.*

| Component Term (Chinese/English) | Visual Characteristics & Functional Form                                                                                             | Typical Application Examples                                                               |
| -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
| **幽灵按钮 (Ghost Button)**      | Button with no solid background fill, only a thin border and text. Lights up on hover. Used to reduce the visual priority of secondary actions. | "Cancel", "View Details" and other secondary buttons                                       |
| **骨架屏 (Skeleton Screen)**     | Grayish-white gradient content outline blocks displayed during data loading, replacing traditional spinners to reduce user anxiety. | Placeholder skeletons when initial screen data is not fully loaded                         |
| **浮动操作按钮 (FAB)**           | A circular/pill-shaped core action button floating in the bottom right corner of the screen, always fixed as the page scrolls.     | "New" in mail apps, "Post" in communities                                                  |
| **便当盒布局 (Bento Grid)**      | Inspired by Japanese bento boxes, information is divided into a grid of equally sized, modular, rounded rectangular cards.        | Apple product spec diagrams, iOS desktop widgets                                           |
| **分段控件 (Segmented Control)** | A single-choice switcher that groups 2-5 mutually exclusive options within a rounded frame. The selected item has a highlighted slider. | Single-choice toggles in iOS settings, switching views by "Day/Week/Month"                  |
| **手风琴 (Accordion)**           | Vertically stacked title list. Clicking collapses or expands the content panel below. Typically, only one item expands at a time. | Frequently Asked Questions (FAQ), multi-level setting menus                                |
| **面包屑导航 (Breadcrumbs)**     | A mini chain of links at the top with a path like `Home > Department > Employee`, allowing users to understand the current page hierarchy and return easily. | E-commerce category pages, large document systems (e.g., GitBook)                          |
| **底部抽屉 (Bottom Sheet)**      | A half-screen or full-screen operation panel that slides up from the bottom of the screen, ideal for one-handed operation on large screens. | WeChat share pop-ups, payment confirmation panels                                          |
| **抽屉式侧边栏 (Drawer)**      | A navigation panel hidden on the side of the screen, sliding in from the left or right after clicking the Hamburger Menu.        | Mobile website navigation, backend administration sidebars                                 |
| **走马灯 / 轮播图 (Carousel)**   | A component allowing users to swipe left and right to browse multiple images/card panels, with dot indicators.                  | E-commerce homepage banners, recommended card groups                                       |
| **步骤条 (Stepper / Wizard)**    | A progress indicator using numbered circles connected by horizontal lines, guiding users through complex tasks step-by-step.      | Shopping cart checkout, account registration process                                       |
| **胶囊标签 (Pill Tag / Chip)**   | Small labels or clickable filter blocks with completely rounded edges (like a capsule).                                          | Article tags, product attribute selection (e.g., "Red/L Size")                             |
| **吸顶/吸底栏 (Sticky Header/Footer)** | A navigation bar or action bar fixed at the top or bottom of the viewport as the page scrolls vertically.                      | "Buy Now" bar at the bottom of mobile e-commerce pages                                     |

## III. Textures, Optics & Visual Effects (Textures, Optics & Visual Effects)

*Technical terms describing visual fineness, rendering details, and optical textures.*

1.  **Squircle / Continuous Curvature**:
    *   *Explanation*: Rejects ordinary rounded rectangles (right angles + tangent arcs) and uses higher-order mathematical curves for extremely smooth transitions from straight lines to arcs, with no abrupt tangent points. This is Apple's secret to the sophisticated feel of its entire hardware line and iOS icons.
2.  **Mesh Gradient / Diffused Gradient**:
    *   *Explanation*: Breaks away from traditional unidirectional linear gradients. Multiple color nodes permeate and diffuse into each other like clouds and mist on a 2D plane, creating a dreamy effect.
3.  **Noise Texture / Film Grain**:
    *   *Explanation*: Adds a layer of fine monochrome or color noise particles to smooth gradients or solid color backgrounds, eliminating the coldness of digital colors and adding a tactile feel like paper or film.
4.  **Offset Hard Shadow**:
    *   *Explanation*: No Gaussian blur is used (Blur = 0). A pure black or dark color block is simply offset 2-6px to the bottom right as a shadow. A core characteristic of Neo-Brutalism.
5.  **Ambient Shadow vs Drop Shadow**:
    *   *Explanation*: **Drop Shadow** is a shadow with a clear direction produced by direct light; **Ambient Shadow** is a diffuse shadow with no direction and a wide range, produced by ambient light reflection, used to create a sense of airiness and suspension for components.
6.  **Duotone**:
    *   *Explanation*: Maps all colors in an image to only two contrasting colors (e.g., deep blue + bright orange), creating a distinct image style, often used for Spotify music covers.

## IV. Layout, Visual Flow & Motion (Layout, Visual Flow & Motion)

1.  **Above the Fold**:
    *   *Explanation*: The entire first screen area visible to the user without scrolling down. This is where the product's core value and **CTA (Call to Action)** buttons are located.
2.  **Hero Section**:
    *   *Explanation*: The most prominent large image/video background area on the website's homepage, usually accompanied by a strong headline and primary conversion buttons.
3.  **F-Pattern & Z-Pattern Reading Flow**:
    *   *Explanation*: **F-Pattern** is suitable for text-heavy pages (like blogs, news), where users scan from left to right, line by line, downwards; **Z-Pattern** is suitable for landing pages with fewer information elements and more visual content (Hero -> Top-right navigation -> Bottom-left illustration -> Bottom-right CTA).
4.  **Negative Space / White Space**:
    *   *Explanation*: The blank areas between elements. White space is not wasted space; it provides visual "breathing room" and highlights core content.
5.  **Cubic-Bezier / Easing**:
    *   *Explanation*: Animation tuning terminology. Abandoning mechanical linear motion, it uses physical curves like "ease-in, ease-out" (Ease-Out) or "with slight bounce" (Bounce/Spring) to make interactive animations appear extremely natural and smooth.
6.  **Parallax Scrolling**:
    *   *Explanation*: When the page scrolls, background layers and foreground cards move at different speeds, creating a strong sense of depth and 3D spatial illusion.
7.  **Shimmer Effect**:
    *   *Explanation*: A highlight sweeps diagonally from left to right across the skeleton screen (like a beam of light passing by), visually informing the user that "loading is in progress."

## V. Cross-Departmental Communication Quick Reference (Everyday Talk vs. Pro Terms)

If you need to communicate with designers or front-end engineers, you can quickly look up the corresponding professional terms and technical implementation methods for "plain language" in the following table:

| What You Mean in "Plain Language" | Designer's Professional Term | Front-end / CSS Code Keywords | Suggested Communication Example for Designers                                                              |
| --------------------------------- | ---------------------------- | ----------------------------- | -------------------------------------------------------------------------------------------------------- |
| "Make it feel like mosaic/NES game" | **Pixel Art**                | `image-rendering: pixelated;` | "Let's make this promotional event page in Pixel Art style, with a retro game feel."                     |
| "Like 3D effects made from clay/soft rubber" | **Claymorphism**             | `border-radius` + `inset shadow` | "Let's change these core feature icons to Claymorphism style; they'll look more approachable."            |
| "Thick borders, black, opaque hard shadows" | **Neo-Brutalism**            | `border: 3px solid #000; box-shadow: 4px 4px #000;` | "The homepage card style should use Neo-Brutalism, with strong black borders and high-contrast colors." |
| "Sophisticated semi-transparent frosted glass feel" | **Glassmorphism**            | `backdrop-filter: blur(20px);` | "Make the top navigation bar a frosted glass floating effect, blurring the background as it scrolls."      |
| "Dreamy background where colors blend like mist" | **Mesh Gradient + Noise**    | `radial-gradient` / Canvas    | "Let's make the Hero section background a Mesh Gradient, with a touch of subtle Noise grain."            |
| "Before content loads, show rows of gray placeholder boxes" | **Skeleton with Shimmer**    | CSS Animation Gradient Offset | "Use Skeleton Screens for list loading, with a Shimmer effect of a sweeping light."                      |
| "Cards divided into sections like an Apple product launch" | **Bento Grid**               | `display: grid;`              | "The product features display area should use a Bento Grid layout, with different sized rounded cards arranged offset." |
| "Rounded corners should be as smooth as iPhone icons" | **Squircle / Continuous Curvature** | iOS guidelines / Figma Corner Smoothing | "Enable 100% Corner Smoothing (Squircle smooth rounding) for all large cards."                           |