设计风格百科

ui-ux-pro-max 全部 84 种 UI 风格的中文图鉴 — 每种风格附实时 CSS 渲染预览、设计脉络、品味要点与调用指令。

84 种 UI 风格导读:把「说不清的好看」变成可调用的词汇表

LLM 时代,写 CSS 的边际成本趋近于零:Claude 三十秒就能产出一个能跑的页面。但它默认输出的是「平均值审美」——紫色渐变、Inter 字体、圆角玻璃卡片,因为训练数据里这类设计最多。瓶颈已经从「实现」转移到「判断」:你能不能在下指令时说出「我要 Neubrutalism 而不是 Flat Design」,能不能在看到生成结果时指出「这个阴影方向不符合 Neumorphism 的单一光源原则」。风格名是你和 LLM 之间的高带宽接口——一个准确的风格词能替代几百字含糊的形容词,而认不出风格的人只能反复说「再好看一点」。

这个百科页的用法是反着来的:先遮住风格名只看 CSS 实时预览,5 秒内猜它属于哪个族系、靠什么特征判断(阴影?圆角?字体?色彩饱和度?);再展开讲解卡读 tasteTip 校准你的判断;最后去真实网站(land-book.com、mobbin.com、godly.website)里找 2-3 个该风格的活体印证。猜错的风格才是有价值的——回到 styles.csv 的 Keywords 列找你漏掉的区分特征。不要从第 1 条线性读到第 84 条,按下面的族系跳着看,同族对比记忆的效率远高于孤立记忆。

记住风格只是检索入口。这个库里 84 种风格背后挂着 161 套配色、57 组字体配对和 99 条 UX 准则——选定风格后让 skill 自动带出配套的配色和字体,避免「风格对了但配色违和」的半吊子结果。84 种里有 49 种通用风格、8 种落地页模式、10 种 BI 仪表盘模式、17 种移动端风格:后三类不是「美学」而是「场景解法」,学习时要分开对待——通用风格练的是眼力,场景风格练的是业务判断。

风格族谱

质感拟物族

用阴影、模糊、圆角和高光模拟物理材质的厚度与触感,核心变量是光源方向、box-shadow 层数和 backdrop-filter——区分这一族就看「这块表面像什么材料做的」。

Neumorphism、Glassmorphism、Claymorphism、Skeuomorphism、Liquid Glass、Soft UI Evolution、3D & Hyperrealism、Dimensional Layering、Tactile Digital / Deformable UI、Claymorphism (Mobile)、Neumorphism (Mobile)

极简理性族

装饰为零,由网格、留白和字阶层级承担全部表达——好坏完全暴露在间距节奏和排版功力上,是最难藏拙的一族。

Minimalism & Swiss Style、Flat Design、Swiss Modernism 2.0、Exaggerated Minimalism、Editorial Grid / Magazine、Bento Box Grid、Bento Grids、E-Ink / Paper、Bauhaus (包豪斯)、Minimalist Monochrome、Flat Design Mobile (Touch-First)、Minimal & Direct、Material You (MD3 Mobile)

粗野反叛族

故意打破「专业感」:硬边黑描边、不调和的原色块、错位排版、系统默认字体,用粗糙换记忆点——丑得有纪律才是这一族,丑得随机只是没做完。

Brutalism、Neubrutalism、Memphis Design、Gen Z Chaos / Maximalism、Anti-Polish / Raw Aesthetic、Vibrant & Block-based、Kinetic Brutalism (Mobile)、Neo Brutalism (Mobile)、Bold Typography (Mobile)

复古怀旧族

借特定年代媒介的物理缺陷(CRT 扫描线、胶片颗粒、像素锯齿、纸张纹理、手绘抖动)唤起情绪记忆——认风格先认它在怀念哪个年代的哪种设备。

Y2K Aesthetic、Vaporwave、Retro-Futurism、Pixel Art、Vintage Analog / Retro Film、Academia (Scholarly Mobile)、Sketch Hand-Drawn (Mobile)

暗色科技族

深底 + 霓虹或单色高亮 + 等宽字体 + 数据装饰线,传达「机器正在运转」的临场感——区分点在于克制程度:OLED Dark 最收敛,Cyberpunk 最张扬。

Dark Mode (OLED)、Cyberpunk UI、HUD / Sci-Fi FUI、Chromatic Aberration / RGB Split、AI-Native UI、Spatial UI (VisionOS)、Terminal CLI (Mobile)、Cyberpunk Mobile HUD、Modern Dark (Cinema Mobile)、Bitcoin DeFi (Mobile)

有机自然族

用不规则曲线、流体渐变和取自自然的低饱和色板对抗硬朗几何——border-radius 不再是统一数值,而是模拟生物形态的非对称弧线。

Aurora UI、Gradient Mesh / Aurora Evolved、Organic Biophilic、Biomimetic / Organic 2.0、Nature Distilled

动效叙事族

把「时间」当设计材料:滚动进度、悬停反馈、光标轨迹、字体形变都是叙事节奏——静态截图看不出好坏,必须看 transition 时长和 easing 曲线。

Motion-Driven、Micro-interactions、Kinetic Typography、Parallax Storytelling、Interactive Cursor Design、Zero Interface、Voice-First Multimodal、Storytelling-Driven、Interactive Product Demo、3D Product Preview

转化驱动族(落地页)

每个像素为转化率服务:视觉层级直指 CTA、信任元素(logo 墙/评价/数据)前置、首屏 5 秒讲清价值主张——这一族选型看业务阶段,不看个人喜好。

Hero-Centric Design、Conversion-Optimized、Feature-Rich Showcase、Social Proof-Focused、Trust & Authority

数据密度族(BI 仪表盘)

信息密度优先,色彩只用于编码数据语义(涨跌/冷热/阈值告警),装饰一律让位于可读性——区分点是「谁在看」:高管要结论大字,分析师要下钻明细,值班员要实时告警。

Data-Dense Dashboard、Heat Map & Heatmap Style、Executive Dashboard、Real-Time Monitoring、Drill-Down Analytics、Comparative Analysis Dashboard、Predictive Analytics、User Behavior Analytics、Financial Dashboard、Sales Intelligence Dashboard

学习路径

  1. 第 1-2 周:基本盘 — 掌握留白、网格、字阶层级这套「无风格的底层语法」——它是其余 80 种风格的共同地基,也是 80% 商业项目的默认正确答案。
    风格:Minimalism & Swiss Style、Flat Design、Dark Mode (OLED)、Bento Box Grid
    练习:用 ui-ux-pro-max 把同一个 SaaS 落地页分别用 Minimalism & Swiss Style 和 Flat Design 各做一版,diff 两版的 CSS:找出间距变量、阴影策略、圆角数值的具体差异,写 5 条「肉眼可见的区别」。
  2. 第 3-4 周:质感分辨 — 能在 3 秒内分辨 Glassmorphism / Neumorphism / Claymorphism / Skeuomorphism 四种 morphism,并说出各自的 box-shadow 和 backdrop-filter 特征。
    风格:Glassmorphism、Neumorphism、Claymorphism、Skeuomorphism、Liquid Glass
    练习:让 Claude 把同一张定价卡片用四种 morphism 各做一版排进一个对比页;然后反过来,只给你看每版的 box-shadow 代码片段,盲猜对应哪种风格,错了回讲解卡找区分特征。
  3. 第 5-6 周:场景解法 — 学会按业务目标而非个人喜好选风格:落地页 8 种模式对应不同获客阶段,BI 10 种模式对应不同读数人。
    风格:Hero-Centric Design、Conversion-Optimized、Social Proof-Focused、Data-Dense Dashboard、Executive Dashboard、Real-Time Monitoring
    练习:给你自己的产品做两个仪表盘:一个用 Executive Dashboard 风格给投资人看(大数字+趋势结论),一个用 Data-Dense Dashboard 给自己运营用(高密度明细);对比两版后写下「同一份数据,受众不同时我砍掉了什么」。
  4. 第 7-8 周:个性与反叛 — 理解「丑得有道理」:反叛风格牺牲了什么可用性、换来了什么记忆点,红线在哪里。
    风格:Neubrutalism、Y2K Aesthetic、Vaporwave、Cyberpunk UI、Memphis Design、Gen Z Chaos / Maximalism
    练习:把个人作品集首页用 Neubrutalism 重做一版,然后让 Claude 用库里的 99 条 UX 准则 review 它,逐条判断哪些「违规」是风格故意为之(保留)、哪些是真踩了可用性红线(修掉),形成自己的取舍清单。
  5. 第 9 周起:移动端与署名风格 — 补齐 17 种移动端风格的触控差异(点击热区、手势、底部导航),并沉淀出自己的默认风格组合——有署名感的开发者不需要每个项目重新纠结。
    风格:Material You (MD3 Mobile)、SaaS Mobile (High-Tech Boutique)、Spatial UI (VisionOS)、AI-Native UI、Interactive Cursor Design
    练习:为自己的真实项目定一套「署名组合」:1 个主风格 + 1 套配色(从 161 套里选)+ 1 组字体配对(从 57 组里选),写进项目的 CLAUDE.md,之后所有 UI 需求都让 Claude 默认遵守这套组合,只在明确说明时才偏离。

日常练眼

  • 每天拆一个真实页面(land-book.com / godly.website / mobbin.com):先 5 秒说出它的主风格族系和判断依据,再开 DevTools 验证 border-radius、box-shadow、font-family 是否符合你的预期——猜错的记下来,那是你的盲区。
  • 建立「风格-站点」对照库:每认出一个新风格就截图归档,标注风格名 + 3 个关键 CSS 特征;攒到 50 张后定期遮住标注做闪卡自测,比看十篇设计文章管用。
  • 反向拆解法:看到喜欢的设计先问「把配色换成黑白还成立吗」——成立说明布局和层级强(值得学结构),不成立说明只是风格皮肤好看(只值得学配色),两本账分开记。
  • 同组件横向对比:选一个固定组件(如 pricing card),收集它在 5 种不同风格下的真实实现,只对比三个变量——阴影、圆角、间距——你会发现 80% 的风格差异就藏在这三处。
  • 用百科页做盲测:遮住风格名只看 CSS 实时预览猜名字,每周过一族;连续两周全对的族系跳过,错误率高的族系回 styles.csv 读 Keywords 和 AI Prompt Keywords 列补特征词。

怎么调用

  • 「用 ui-ux-pro-max 的 Glassmorphism 风格给我的 SaaS 工具做落地页,深色背景,配色和字体配对从库里选最搭的,给出理由。」
  • 「把这个仪表盘改成 Data-Dense Dashboard 风格,按 ui-ux-pro-max 里 BI/Analytics 的规范处理图表配色和告警色语义,信息密度优先。」
  • 「用 Neubrutalism 和 Minimalism & Swiss Style 各做一版 pricing 页,放进同一个 HTML 左右对比,并列出两版在阴影、边框、字体上的关键差异。」
  • 「我的 App 要 Material You (MD3 Mobile) 风格:先列出它的设计变量(圆角、阴影层级、动效时长、触控热区尺寸),确认后再动手改我的组件。」
WorkSystemAbout
Order is
the message.
A system built on a 12-column grid, one accent color, and nothing else.
START →
12
grid columns
01
accent color
00
decorations

极简主义与瑞士风格 Minimalism & Swiss Style

删到不能再删,让网格替你说话

通用风格
1950s · 瑞士国际主义平面设计
展开详解

源自 1950 年代瑞士的国际主义字体风格(International Typographic Style),代表人物 Josef Müller-Brockmann 用数学网格、无衬线字体(Akzidenz-Grotesk、Helvetica)和客观传达定义了现代平面设计。Massimo Vignelli 把它带进企业识别和纽约地铁导视,数字时代又被无数 SaaS 产品奉为默认审美。它流行的根本原因是普适与高效:装饰会过时,秩序不会。本质是在解决'信息以最低噪音、最高效率传达'的问题。

色彩黑白为主的单色系,最多保留一个高饱和强调色,拒绝渐变与花哨阴影
排印大号无衬线字体、紧凑字距,靠字号与字重建立强烈层级反差
布局严格的 12-16 列数学网格与大量留白,元素只在网格线上落位
动效几乎无动效,仅 200-250ms 的克制 hover 过渡,绝不喧宾夺主

✓ 适用:企业应用、数据仪表盘、文档站、SaaS 平台、专业生产力工具

✗ 避免:创意作品集、娱乐产品、玩味年轻品牌、艺术实验项目

LinearVercelNotionStripe Docs
品味要点高级感来自'克制中的精确':间距全部走 8px 倍数体系,字阶不超过 3-4 级,唯一强调色只给最关键的那个动作。新手最常见的翻车是把极简做成空洞——删掉装饰却没建立排版层级,页面只剩苍白。自检标准:把页面转成灰度后,仅靠字号、字重和位置还能读出信息优先级,才算合格。
用 ui-ux-pro-max 的 Minimalism & Swiss Style 风格做一个页面

关键词:minimalist, white space, grid-based, sans-serif, high contrast, geometric, essential only, no shadows

Calm Session
Deep Focus · 24 min
▶▶
Breathe
Sleep
Relax

新拟态(Soft UI) Neumorphism

控件像从背景里软软挤出来的

通用风格
2019-2020s · Dribbble 概念稿引爆
展开详解

2019 年末设计师 Alexander Plyuto 在 Dribbble 发布的 Soft UI 概念稿点燃了这一风格,'Neumorphism'(New Skeuomorphism 的缩写)一词随即流行。它用同色系的双向柔和阴影让控件呈现'从背景挤出'或'压入'的浮雕感,是拟物与扁平之间的折中产物。它因新鲜的触感和宁静气质爆红,又因对比度先天不足始终未成主流,最终沉淀在健康、冥想等低信息密度场景。本质是在找回扁平化丢掉的'可按压感'。

色彩单一低饱和浅色打底(淡灰/淡蓝/淡粉),元素与背景几乎同色,全靠阴影区分
排印圆润低调的无衬线字体,颜色加深以补偿整体的低对比
布局宽松的卡片与圆形控件,12-16px 统一圆角,间距充裕
动效按压时 150ms 内外阴影互换(凸起变凹陷),辅以轻微缩放

✓ 适用:健康/冥想/健身类 app、智能家居控制面板等低密度轻交互界面

✗ 避免:复杂应用、数据密集仪表盘、对可访问性与对比度有硬性要求的产品

Dribbble Soft UI 概念稿浪潮智能家居控制类 app冥想/白噪音类产品的播放器控件
品味要点成败全在光源纪律:全页只能有一个虚拟光源(通常左上 45 度),所有凸起元素的亮阴影方向必须一致,乱一个就穿帮。阴影参数记住'偏移小、扩散大、透明度低于 15%',开重了就成了脏边。文字和图标要比常规深 2-3 档补偿对比度,主按钮建议叠一层实色或彩色渐变——别让用户在一片浅灰里找不到入口。
用 ui-ux-pro-max 的 Neumorphism 风格做一个页面

关键词:neumorphism, soft UI, embossed, dual soft shadows, pastel, rounded corners, monochromatic, subtle depth

GLASS PAYCardsVault
Total Balance
$24,580.00
+ Add funds▲ 12.4% this week

玻璃拟态 Glassmorphism

一块磨砂玻璃,隔出层级与贵气

通用风格
2013 iOS 7 萌芽 · 2020 macOS Big Sur 带火
展开详解

毛玻璃效果可追溯到 iOS 7(2013)的半透明模糊和 Windows 的 Aero/Acrylic,2020 年 Apple 在 macOS Big Sur 全面铺开半透明面板后,设计师 Michal Malewicz 将其命名为 Glassmorphism 并迅速席卷设计圈;2023 年 Vision Pro 的 visionOS 又把它推上空间计算的舞台。它流行的核心是优雅地解决'层级感':浮层既独立于背景又透出背景,建立起近似物理空间的 Z 轴秩序。

色彩鲜艳的渐变或色块背景打底,前景是 10-30% 透明度的白色毛玻璃
排印干净的无衬线,多用中粗字重保证在模糊背景上的可读性
布局多层浮动卡片明确 Z 轴层叠,1px 半透明白描边勾出玻璃切边
动效浮层出入场的柔和位移与透明度渐变,高光随悬停轻微游移

✓ 适用:现代 SaaS、金融仪表盘、高端品牌官网、模态浮层与导航栏

✗ 避免:低对比/纯色单调背景、性能受限设备、可访问性要求严苛的场景

macOS Big Sur 控制中心Apple Vision Pro visionOSWindows 11 Acrylic 材质
品味要点玻璃要'贵'必须凑齐三件套:背景够鲜艳(玻璃透出来才有内容)、1px 半透明白描边(模拟玻璃切边)、blur 控制在 10-20px。新手翻车点一是背景太素,玻璃卡和普通白卡毫无区别;二是整页铺玻璃——它是层级工具,只配给最上层的 1-2 个浮层;三是忘测对比度,模糊背景上的文字必须实打实达到 4.5:1。
用 ui-ux-pro-max 的 Glassmorphism 风格做一个页面

关键词:glassmorphism, frosted glass, backdrop blur, translucent, vibrant gradient, layered depth, subtle border

NO.004
UGLY ON
PURPOSE.
ENTER →MANIFESTO
ANTI-DESIGN
SYSTEM FONT / 0px RADIUS / NO TRANSITIONS / DEAL WITH IT

粗野主义 Brutalism

故意丑给你看,反而最有态度

通用风格
1950s 建筑粗野主义 · 2014 年后网页复兴
展开详解

名字借自 1950 年代建筑界的 Brutalism(béton brut,清水混凝土),主张材料裸露、拒绝粉饰。2014 年前后,以 Bloomberg Businessweek 网站改版和 Brutalist Websites 收录站为标志,网页设计掀起对千篇一律'安全模板'的反叛:默认字体、裸露边框、刺眼原色、零过渡交互。它的流行逻辑是注意力经济下的逆向操作——当所有网站都圆角渐变时,'粗糙'本身成了最稀缺的记忆点。本质是在用反设计解决品牌辨识度问题。

色彩红黄蓝纯原色加黑白,不调和、不渐变,生硬撞色即是态度
排印系统默认字体或等宽字体,700+ 超粗字重,巨大字号直接当图形用
布局不对称、刻意'排错'的块状布局,2-4px 可见黑边框,零圆角
动效拒绝平滑过渡,一切交互瞬时切换,hover 直接粗暴变色

✓ 适用:设计师作品集、艺术项目、反主流品牌、编辑部/媒体站、技术博客

✗ 避免:企业官网、保守行业、政府金融、面向大众客户的专业产品

Bloomberg BusinessweekGumroadBrutalist Websites 收录站Figma 部分活动页
品味要点粗野主义是'懂规则之后的故意犯规',不是真不会排版:底层网格要比平常更严,错位是设计好的错位。判断标准是层级依然清晰——再粗野,用户也得 1 秒内找到标题和入口。新手最大翻车是把丑当风格,随机配色加随机字体只会得到真正的烂页面;正确姿势是先用黑白加一种原色搭出秩序,再决定打破哪一条规则,且全站只打破那一条。
用 ui-ux-pro-max 的 Brutalism 风格做一个页面

关键词:brutalist, raw, stark, primary colors, bold typography, visible borders, sharp corners, anti-design

Real-time WebGL
Touch the
untouchable.
Physically-based lighting, 5-layer parallax, one product hero on stage.
EXPLORE IN 3D
60 FPS · PBR

三维与超写实 3D & Hyperrealism

把产品页直接做成一台渲染引擎

通用风格
2020s · WebGL/Three.js 工程化成熟后兴起
展开详解

随着 WebGL、Three.js、React Three Fiber 在 2020 年前后工程化成熟,加上 Apple 产品页滚动 3D 叙事的示范效应,超写实 3D 成为高端数字体验的标配。它继承了拟物时代对质感的执念,但用实时渲染取代静态贴图,让用户能旋转、缩放、走近商品。流行的本质是'体验即营销':当商品无法触摸时,3D 是最接近实物的说服力,沉浸感本身就是品牌溢价。

色彩深色舞台底色(深海军蓝/酒红)配金银金属质感,靠光影而非色块塑造层次
排印字体退居二线,用克制的无衬线给 3D 视觉让位
布局以单一 3D 主体为舞台中心,滚动驱动场景与机位变化
动效WebGL 实时渲染、3-5 层视差、物理光照、300-400ms 缓动的 3D 变换

✓ 适用:游戏、产品展示、高端电商、建筑可视化、VR/AR、沉浸式品牌体验

✗ 避免:低端移动设备、性能敏感场景、无障碍要求高的产品、数据表格与表单

Apple 产品发布页Bruno Simon 个人站Three.js 官网案例Awwwards 年度获奖站点
品味要点高级感的分水岭在光照与材质,不在模型精度:一盏主光加环境光遮蔽,胜过十个炫技动画。务必做性能降级——检测设备后低端机回退到静态渲染图,掉帧的 3D 比没有 3D 更显廉价。新手最常见翻车是让 3D 绑架任务流:转场超过 400ms、滚动被动画劫持,用户立刻烦躁;记住 3D 是舞台,转化按钮才是主角。
用 ui-ux-pro-max 的 3D & Hyperrealism 风格做一个页面

关键词:3D, hyperrealistic, WebGL, Three.js, realistic lighting, parallax layers, immersive, tactile texture

MAKE
LOUD
THINGS
JOIN BETA →
4.2M
creators
98%
hype score
PLAY MORE ★ SHIP MORE ★ NO BEIGE ★ PLAY MORE ★ SHIP MORE ★ NO BEIGE ★ 

鲜艳块状风格 Vibrant & Block-based

高饱和色块怼脸,能量直接拉满

通用风格
2020s · 新孟菲斯余波 + 创作者经济审美
展开详解

这一风格融合了 1980 年代孟菲斯设计(Memphis Design)的撞色几何基因与 2020 年代创作者经济的视觉语言,由 Figma、Discord 等品牌的高调改版推向主流。大色块分区、巨大字号、持续动效,把页面切成一格格高能量的'内容积木'。它流行于注意力稀缺时代:滚动三秒内必须给用户一次视觉冲击。本质是在解决年轻品牌'如何在信息流里被记住'的问题。

色彩4-6 个霓虹/高饱和色按互补或三角配色撞色,常配双色调(duotone)处理
排印32px 起步的超大几何无衬线粗体,字即图形
布局大间距(48px+)块状分区,几何形状点缀,scroll-snap 整屏切换
动效背景图案持续滚动、hover 大胆变色,200-300ms 快节奏过渡

✓ 适用:初创公司、创意机构、游戏、社交媒体、年轻向消费品牌、娱乐产品

✗ 避免:金融机构、医疗健康、政府与正式商务、面向年长用户的产品

FigmaDiscordDuolingo 营销页Gumroad
品味要点撞色要撞得有纪律:定一个主色占约 60%,其余高饱和色只做 10-20% 的点缀,文字对比度压到 7:1 以上(霓虹底配纯黑或纯白字最稳)。新手翻车点一是六种荧光色平均使用,页面变成调色盘事故;二是动效无节制——背景在动,按钮和卡片就必须静,一屏只允许一个持续动效,否则能量感会变成廉价感。
用 ui-ux-pro-max 的 Vibrant & Block-based 风格做一个页面

关键词:vibrant, bold blocks, geometric shapes, neon colors, duotone, large typography, energetic, animated patterns

OLED OPTIMIZED
$ deploy --env prod
✓ build passed (2.1s, 0 warnings)
➜ edge: 14 regions live
Uptime
99.99%
Latency
23ms
Power saved
41%

暗黑模式(OLED) Dark Mode (OLED)

纯黑画布上,光本身就是层级

通用风格
2019 · iOS 13 / Android 10 系统级普及
展开详解

暗色界面的血统可以追到早期 CRT 终端的黑底绿字,2019 年 iOS 13 与 Android 10 同时推出系统级深色模式后正式成为行业标配;OLED 屏幕普及(黑色像素直接熄灭,对比度无限且省电)又催生了追求纯黑 #000000 的 OLED 流派。它的流行同时解决三个问题:夜间用眼舒适、OLED 续航,以及开发者文化里'深色即专业'的身份认同。本质是把'发光'从默认状态变成了表达层级的设计资源。

色彩纯黑或 #121212 深灰打底,霓虹绿/电光蓝/金色做克制的高亮点缀
排印浅灰白文字(#E0E0E0 而非纯白防眩光),开发场景常配等宽字体
布局用亮度差而非边框分层:越靠近用户的卡片越亮,光晕标记焦点
动效克制的霓虹光晕(text-shadow 0 0 10px)、暗到亮的渐变过渡、清晰的 focus 态

✓ 适用:夜间模式 app、编程/开发者工具、娱乐影音、OLED 设备、低光环境产品

✗ 避免:打印优先的内容、户外强光场景、对色彩还原精度要求高的工具

VS CodeSpotifyGitHub DarkNetflix
品味要点暗黑模式不是把白底换成黑底:正文用 #E0E0E0 而非纯白(纯白在 OLED 上发眩光),阴影在黑底上失效,层级改用'亮度抬升'表达——卡片比背景亮一档、悬浮态再亮一档。新手最大翻车是直接反转浅色稿的颜色,高饱和色在黑底上会震颤刺眼,正确做法是把强调色降一档饱和、提一档亮度。霓虹光晕是味精,全页超过两处就成了赛博灾难。
用 ui-ux-pro-max 的 Dark Mode (OLED) 风格做一个页面

关键词:dark mode, OLED black, neon accents, minimal glow, high contrast, eye-friendly, midnight blue

SKIP TO CONTENT ↵AAA 7:1
Benefits you can claim

Plain language, 16px+ body text and clearly underlined links keep every reader on track.

Start nowCheck eligibility
Tab ⇥ visible 3px focus ring · prefers-reduced-motion ✓

无障碍与伦理设计 Accessible & Ethical

不是一种风格,是所有风格的底线

通用风格
跨时代 · 1998 WCAG 1.0 奠基
展开详解

无障碍设计不是某个年代的潮流,而是从 1998 年 W3C 发布 WCAG 1.0 起逐步成为行业底线的设计准则。它随各国立法(美国 ADA、欧盟 EAA)从可选项变成合规项,GOV.UK 等政府数字服务把它做成了公认范本。其根本动力很务实:全球十亿以上用户存在某种障碍,且高对比、大字号、键盘可达对所有人都更友好。它本质上解决的是产品默认只为健全年轻用户设计的系统性偏差。

色彩对比度优先:正文 7:1 以上,颜色绝不单独承担语义,必配图标或文字
排印正文 16px 起步、行高宽松,链接永远带下划线
布局语义化结构清晰,跳转链接(skip link)与 44x44px 触控目标是标配
动效动效克制并尊重 prefers-reduced-motion,3-4px 焦点环永远可见

✓ 适用:政府、医疗、教育、法律合规要求高或受众极广的公共产品

✗ 避免:无禁用场景——无障碍是普适要求,可叠加在任何风格之上

GOV.UKBBC(GEL 设计体系)Microsoft 包容性设计
品味要点高手把无障碍做成隐形的品质感:焦点环用品牌色定制(3px、offset 2px),错误提示给图标+文字+颜色三重信号,对比度用 axe/Stark 实测而非目测。新手最大翻车点是 outline:none 一删了之、只用红绿区分状态、点击区小于 44px。判断标准:拔掉鼠标只用 Tab 走完核心流程,走不通就是不合格。
用 ui-ux-pro-max 的 Accessible & Ethical 风格做一个页面

关键词:WCAG AAA, 7:1 contrast, focus ring, semantic HTML, ARIA labels, skip links, reduced motion, 44px touch targets

LittleLearn 🧸

🎨Draw
📚Read
🧩Play
Start lesson

黏土拟态 Claymorphism

把界面捏成软乎乎的充气黏土

通用风格
2020s · Dribbble 社区命名走红
展开详解

黏土拟态是 2020 年代初在 Dribbble 社区被命名并走红的软 3D 风格,可视作新拟态(Neumorphism)翻车后的可用性修正版。它用大圆角(16-24px)、厚边框和内外双阴影把元素捏成充气黏土的质感,保留立体趣味又不牺牲对比度。其流行与 Blender、Spline 等 3D 工具的普及同步。本质是在扁平化统治十年后,为界面找回可触摸的亲和力。

色彩低饱和 pastel 糖果色配奶油底色,阴影必须用背景同色系加深
排印圆润粗壮的无衬线体,偏大字重呼应大圆角的憨态
布局厚边框(3-4px)大圆角卡片,元素胖乎乎、留白充足
动效soft bounce 弹性按压(cubic-bezier 回弹),200ms ease-out

✓ 适用:教育与儿童应用、轻松向 SaaS、创意工具、引导流程、休闲游戏

✗ 避免:严肃企业、金融法律医疗等正式或数据关键型产品

Duolingo(3D 角色与按钮)Kahoot!Headspace
品味要点高级感的关键在阴影颜色——内外阴影都要用背景同色系加深(桃色背景配暖棕阴影),一旦用纯黑纯灰阴影立刻显脏。饱和度压在 30-50%,留足奶油感空隙。新手翻车点:圆角给到位但阴影只做单层(退化成普通卡片)、把高饱和糖果色当 pastel 用(变成儿童蜡笔画)。
用 ui-ux-pro-max 的 Claymorphism 风格做一个页面

关键词:claymorphism, soft 3D, chunky, pastel palette, thick borders, double shadows, rounded 20px, bubbly

Borealis Cloud
Light up your brand
Flowing mesh gradients, alive on a 10s loop
Get started →

极光渐变 Aurora UI

把北极光铺进背景,氛围即卖点

通用风格
2020s · Mesh 渐变工具普及带火
展开详解

Aurora UI 以北极光为意象,用大面积流动的网格渐变(mesh gradient)制造氛围感,2020 年前后随 Stripe 式渐变 hero 和各类 mesh 生成工具的普及成为 SaaS 落地页标配。它的走红源于品牌同质化焦虑——当排版和组件都趋同时,一块会呼吸的渐变背景是成本最低的差异化。本质是用色彩氛围替代具体图像,传达现代、有生命力的品牌情绪。

色彩互补色对(蓝橙、紫黄)大面积融化式渐变,2-3 组封顶
排印干净的现代无衬线或几何字体,常配渐变文字点题
布局渐变只做氛围背景层,内容居中悬浮其上
动效8-12 秒超慢速漂移循环,大半径 blur 让色块持续融化

✓ 适用:现代 SaaS 落地页 hero、创意机构、音乐与生活方式品牌、高端产品

✗ 避免:数据密集仪表盘、强无障碍要求场景、易被干扰的长文阅读页

Stripe(渐变 hero)LinearRaycast
品味要点高手控制三件事:渐变只做背景层、正文区域压暗或加遮罩保证对比度、动画周期 8 秒以上慢到几乎无感。色彩不超过 2-3 组互补对,blur 半径给足 30px 以上让色块真正融化。新手翻车点:渐变铺满全屏盖住正文、动画 2-3 秒快得像警报灯、颜色超过 4 组变成调色盘事故。
用 ui-ux-pro-max 的 Aurora UI 风格做一个页面

关键词:aurora gradient, mesh gradient, northern lights, flowing animation, complementary colors, iridescent, 8-12s loop, luminous

NEON DRIVE
EST·1984 ARCADE

复古未来主义 Retro-Futurism

80 年代想象的未来,自带浪漫滤镜

通用风格
1980s 基因 · 2010s Synthwave 复兴
展开详解

复古未来主义复刻的是 1980 年代流行文化想象中的未来:霓虹灯、CRT 扫描线、透视网格与合成器音乐海报美学。2010 年代经 Synthwave 音乐场景与《Stranger Things》《Cyberpunk 2077》等作品再度翻红。它流行是因为怀旧自带情绪滤镜,且高饱和霓虹在深黑背景上的视觉冲击力极强。本质是用过去对未来的乐观想象,贩卖一种当下稀缺的浪漫。

色彩深黑底(#1A1A2E)撞高饱和霓虹粉、电光蓝、赛博青
排印等宽字/像素字配大字距,标题带多层辉光 text-shadow
布局居中对称构图,透视网格地平线与霓虹落日是经典符号
动效glitch 抖动、辉光闪烁、CRT 扫描线,节奏带故障感

✓ 适用:游戏、娱乐、音乐平台、科技品牌怀旧营销、艺术项目

✗ 避免:保守行业、法律金融、年长用户群、强无障碍要求场景

Cyberpunk 2077 官网Stranger Things 片头Synthwave 专辑视觉(The Midnight 等)
品味要点高级感来自克制的做旧:扫描线透明度压在 0.2-0.3、辉光用 2-3 层 text-shadow 渐次扩散、glitch 只在 hover 或入场触发一次。正文绝不能用霓虹色,用近白色保可读性。新手翻车点:全屏常驻 glitch 晃到头晕、每段文字都加辉光(视觉噪音爆炸)、把本质是深色的风格硬做浅色版。
用 ui-ux-pro-max 的 Retro-Futurism 风格做一个页面

关键词:retro-futurism, synthwave, neon glow, CRT scanlines, glitch effect, deep black, monospace, 80s geometric

FLATKITHOME  DOCS  PRICING
TASKS
STATS
FILES
TEAM
No shadows. No gradients. Just color.SIGN UP

扁平化设计 Flat Design

删掉一切装饰,信息本身就是界面

通用风格
2010s · Metro 开端,iOS 7 定调
展开详解

扁平化是 2010 年代的设计范式革命:微软 Windows 8 的 Metro 语言开了头,苹果 2013 年用 iOS 7 一夜抹平拟物化,宣告其全面胜利。它去掉阴影、渐变和纹理,只靠色块、排版和图标传达信息。流行的底层动力是多端适配——扁平元素在任何分辨率下都干净、渲染快、好维护。本质是把界面从模拟实物中解放出来,回归信息本身。

色彩4-6 个高饱和纯色块封顶,每色职责明确,零渐变
排印粗壮无衬线挑大梁,靠字重与字号对比撑起全部层级
布局几何网格排布,色块与图标平铺,零阴影零立体
动效150-200ms 快速利落的颜色/透明度切换,不玩花活

✓ 适用:Web/移动应用、跨平台产品、创业 MVP、SaaS 仪表盘、企业官网

✗ 避免:追求奢华质感、沉浸式体验、3D 或高细节展示的场景

Windows 8 MetroiOS 7Flat UI(Designmodo)
品味要点扁平化的功力全在排版和留白——没有阴影帮你分层,必须靠字重对比(700 vs 400)、字号节奏和间距网格撑起层级。色彩纪律是灵魂:4-6 色封顶且每色有明确职责(主行动/警告/成功)。新手翻车点:层级糊成一片只好偷偷加回阴影(变成四不像)、按钮和普通文字无法区分——这正是当年 iOS 7 挨骂的“flat 到不可用”。
用 ui-ux-pro-max 的 Flat Design 风格做一个页面

关键词:flat design, 2D, bold solid colors, no shadows, clean lines, geometric shapes, icon-heavy, limited palette

Field Notes — Vol. III

Tuesday · “The old ledger smells of cedar and ink, every page stitched by hand.”
⏺ Record

拟物化设计 Skeuomorphism

界面长得像实物,连缝线都绣给你看

通用风格
2007-2012 · iOS 6 时代巅峰
展开详解

拟物化通过纹理、光影和真实材质隐喻(皮革、木纹、金属)让数字界面模仿实物,2007-2012 年从初代 iPhone 到 iOS 6 是其巅峰期,乔布斯与 Scott Forstall 是著名拥趸。在触屏交互尚属新事物的年代,它用“长得像计算器就会用计算器”的认知捷径降低学习成本。2013 年 iOS 7 转向扁平后迅速退潮,但其用真实感降低认知负担的内核在游戏与拟真应用中长存。

色彩皮革棕、木纹色、金属银等真实材质色,渐变 8-12 档起
排印衬线字配压印/浮雕效果(上下双向 text-shadow)
布局实物隐喻布局:笔记本、卷盘、旋钮,全局光源方向统一
动效300-500ms 拟真按压回馈,按钮真的会“凹下去”

✓ 适用:游戏、沉浸式叙事、拟真模拟器、怀旧主题或奢华质感产品

✗ 避免:现代企业应用、性能受限设备、常规 Web 产品、强无障碍要求

iOS 6(备忘录/Game Center)早期 GarageBandApple Podcasts 磁带卷盘界面
品味要点高手做拟物只挑 1-2 个材质隐喻做到极致:光源方向全局统一(通常左上 45°)、高光用 inset 1px 白、暗部至少两层阴影叠加,缝线用 dashed border 加偏移阴影模拟凹陷。新手翻车点:每个元素光源方向不一致(立体感瞬间崩塌)、纹理被拉伸变形、在数据密集界面硬上皮革木纹造成可读性灾难。
用 ui-ux-pro-max 的 Skeuomorphism 风格做一个页面

关键词:skeuomorphism, realistic textures, leather wood metal, multi-stop gradients, layered shadows, grain overlay, tactile, 3D depth

Lumina OS

Optical glass layers that flex, refract and morph in 500ms.

Experience →

液态玻璃 Liquid Glass

会流动、会折射的下一代玻璃拟态

通用风格
2020s · Apple WWDC 2025 定调
展开详解

液态玻璃是玻璃拟态的动态进化体,2025 年 Apple 在 WWDC 上将其定为 iOS 26 等全线系统的设计语言,从社区试验正式转为行业风向。它在半透明模糊之上叠加形变、流动、虹彩与色散(chromatic aberration),让界面像一块会呼吸的光学玻璃。流行的动力是硬件性能过剩与空间计算(visionOS)对材质真实感的需求。本质是用实时光学质感重建数字材质的高级感。

色彩虹彩光谱渐变打底加半透明白,红青色散只点缀边缘
排印现代几何无衬线,标题可加 1-2px 色散重影
布局玻璃浮层卡片悬于流动彩色背景,边缘 1px 折射描边
动效border-radius 形变 morph、背景流动,400-600ms 流体曲线

✓ 适用:高端 SaaS、奢侈品电商、创意平台、品牌体验页与发布会页面

✗ 避免:性能受限设备、强无障碍要求、复杂数据界面、预算有限项目

Apple iOS 26 Liquid GlassvisionOS高端品牌发布会页面
品味要点高级感的核心是光学正确:玻璃边缘用 1px 半透明白描边模拟折射、背景必须有彩色内容否则 blur 无物可透、色散偏移控制在 1-2px 点到为止。形变动画用 border-radius 插值而非 scale,曲线选 ease-in-out 400-600ms。新手翻车点:纯白底上做玻璃(什么都透不出来)、色散偏移 5px 以上变成重影错觉、漏写 -webkit-backdrop-filter 导致 Safari 全军覆没。
用 ui-ux-pro-max 的 Liquid Glass 风格做一个页面

关键词:liquid glass, morphing shapes, chromatic aberration, iridescent gradient, dynamic blur, fluid animation, premium, holographic

Scroll to explore
Motion tells
the story

Parallax layers · entrance reveals · 350ms ease

Watch reel ↗

动效驱动设计 Motion-Driven

让滚动变成叙事,动效即内容本身

通用风格
2010s 末–2020s · GSAP/Framer Motion 生态带火
展开详解

动效驱动设计把动画从点缀升级为信息架构的主轴:滚动触发、视差分层、入场与页面转场共同构成叙事节奏。它随 GSAP、Framer Motion 等动画引擎和 Intersection Observer API 的成熟在 2010 年代末爆发,Awwwards 获奖作品几乎清一色采用。流行的根本原因是注意力经济:动效制造出“接下来会发生什么”的期待感,把被动浏览变成主动探索。本质是在解决静态页面信息层级扁平、用户滚动无感的问题。

色彩高对比大胆撞色与动态渐变,用颜色强化运动方向与状态反馈
排印大号无衬线标题常作为动画主体,字重对比强、随滚动逐拍入场
布局全屏分段式章节布局,3-5 层视差元素错位叠放制造纵深
动效滚动触发入场、300-400ms 过渡、视差与页面转场构成完整动效系统

✓ 适用:作品集、品牌故事页、互动叙事、娱乐与创意类产品、SaaS 营销站

✗ 避免:数据仪表盘、强无障碍要求场景、低性能设备、内容密集型产品、晕动敏感用户

Apple 产品发布页Lusion.coGSAP 官网 ShowcaseAwwwards 年度获奖站
品味要点高级感来自“编排”而非数量:全站统一一套缓动曲线和时长 token(如 300ms ease-out),动效只服务叙事节奏,关键信息出现的那一拍必须留白定格。新手翻车点是什么都在动——视差超过 5 层、每个元素独立计时,结果像 PPT 转场合集;以及忘记 prefers-reduced-motion 降级,把晕动用户直接挡在门外。判断标准:关掉所有动画后页面信息层级依然成立,动画只是放大器。
用 ui-ux-pro-max 的 Motion-Driven 风格做一个页面

关键词:scroll-triggered animations, parallax layers, microinteractions, entrance animations, page transitions, GPU acceleration, Intersection Observer, 300-400ms smooth

Like
Toggle
Loading
Send message
Sent
every action answers in 50–100ms

微交互 Micro-interactions

50 毫秒的小动画,决定产品摸起来的手感

通用风格
2013 · Dan Saffer《Microinteractions》定名,移动触屏时代成熟
展开详解

微交互是围绕单一任务的最小反馈单元:点赞爆心、开关滑动、加载旋转、成功打勾。Dan Saffer 在 2013 年的同名著作中将其系统化,随后被 iOS 的触觉反馈和 Material Design 的涟漪效应推向主流。它流行是因为触屏抹掉了物理按键的手感,界面必须用动画和震动重建“我按到了”的确定感。本质在解决数字界面缺乏触觉回路、用户操作后无所适从的问题。

色彩以中性底色为画布,用 10-20% 的色彩位移和绿/红/琥珀三色传递状态语义
排印字体保持克制中性,把表达让位给控件本身的状态变化
布局不动整体布局,聚焦按钮、开关、表单等原子组件的局部反馈
动效50-100ms 瞬时响应动画,配合手势触发与触觉震动反馈

✓ 适用:移动 App、触屏界面、效率工具、消费级产品的组件层打磨

✗ 避免:纯桌面键鼠场景、极致性能敏感页面、未提供无障碍替代方案的产品

Twitter/X 点赞爆心动画DuolingoiOS 系统开关与触感反馈Telegram
品味要点高手把微交互当物理引擎调:反馈必须在 100ms 内出现才有因果感,超过 200ms 用户就觉得卡;曲线用 spring 而非 linear,模拟真实物体的惯性。新手翻车点是把微交互做成炫技——一个按钮 600ms 的弹跳会拖慢高频操作;反馈色不区分语义(成功失败都用品牌色)等于没反馈。判断标准:用户连续操作 20 次不烦,才算合格的微交互。
用 ui-ux-pro-max 的 Micro-interactions 风格做一个页面

关键词:micro-interactions, 50-100ms animations, tactile feedback, gesture-based, loading states, success/error feedback, haptic, subtle hover

Skip to content ⇥
Submit formCancel
✓ Saved✕ 1 error foundAAA 7:1

包容性设计 Inclusive Design

为边缘用户设计,所有人都受益

通用风格
1980s 通用设计运动起源 · 2016 微软 Inclusive Design 方法论普及
展开详解

包容性设计主张界面对视障、色盲、运动障碍等全能力光谱的用户可用:7:1 高对比、键盘全覆盖、屏幕阅读器语义、非颜色依赖的状态指示。它源自 Ron Mace 在 1980 年代提出的通用设计(Universal Design)运动,经 WCAG 标准化和微软 2016 年 Inclusive Design 方法论推广进入主流产品。各国无障碍立法(ADA 诉讼、欧盟 EAA)是现实推力。本质在解决“默认用户”假设把真实人群排除在外的问题——为极端场景设计的方案往往让所有人受益。

色彩7:1 以上对比度,状态用图形符号加纹理双编码,绝不只靠红绿区分
排印16px 起步的大字号、清晰字距与不低于 1.5 倍的行高
布局结构语义化、触控目标 44px 以上、焦点顺序与视觉顺序一致
动效动效全部可关(prefers-reduced-motion),焦点环 3-4px 醒目可见

✓ 适用:政务、医疗、金融、教育等公共服务,以及一切面向大众的产品

✗ 避免:没有禁用场景——无障碍是普适要求,任何产品都不该豁免

GOV.UKBBCMicrosoft 产品线Apple 系统辅助功能
品味要点高级的包容性设计看不出“无障碍专用”的痕迹:GOV.UK 的高对比和大字号同时成就了它的权威感,约束反而逼出了最清晰的视觉层级。新手翻车点是把它当上线前的 checklist 补丁——补几个 aria 标签、对比度勉强压线 4.5:1,但焦点顺序混乱、错误提示只有红色没有文字。判断标准:拔掉鼠标只用 Tab 键走完核心流程、灰度模式下所有状态仍可分辨,两关都过才算入门。
用 ui-ux-pro-max 的 Inclusive Design 风格做一个页面

关键词:WCAG AAA, 7:1 contrast, keyboard navigation, screen reader, focus-visible ring, symbol-based indicators, reduced motion, large text

9:41 · HOME
Just ask — listening
Dim the lightsPlay focus mixWhat's next today?

零界面 Zero Interface

最好的界面是没有界面,让 AI 接管交互

通用风格
2015 · Golden Krishna 提出 · 2020s AI 时代落地
展开详解

零界面主张把可见 UI 压缩到极限:语音、手势和 AI 预测代替按钮与菜单,控件按需渐进式浮现。思想源头是 Golden Krishna 2015 年的《The Best Interface Is No Interface》,是对“凡事做个 App”的反叛;Siri、Alexa 等语音助手是第一波实践,2020s 的大模型让“说一句话完成任务”真正可行。它的流行源于屏幕交互成本被重新审视——本质在解决界面本身成为用户与目标之间障碍的问题。

色彩柔白、暖灰等近乎隐形的中性底色,反馈只用最轻的色彩涟漪
排印极少量文字,多为低调的提示语和情境化建议短句
布局大面积留白为主体,单一焦点元素居中,控件按需渐进浮现
动效呼吸式脉冲与平滑的渐进披露动画,暗示系统在聆听与思考

✓ 适用:语音助手、AI 原生产品、智能家居、环境计算与前瞻性体验

✗ 避免:复杂工作流、重数据录入、需要显式精确控制的传统/遗留系统

Apple SiriAmazon AlexaGoogle AssistantHumane AI Pin、Rabbit R1 等 AI 硬件
品味要点零界面的功力在“可发现性补偿”:界面消失后,用户怎么知道能做什么?高手用情境化建议 chips、首次引导和宽容的自然语言理解来兜底。新手翻车点是把“隐藏”当“极简”——把必要控件藏进手势黑洞,用户摸不到也猜不出,挫败感比按钮多十倍。判断标准:新用户不看说明书,30 秒内能完成第一次成功交互;做不到,那不是零界面,是零线索。
用 ui-ux-pro-max 的 Zero Interface 风格做一个页面

关键词:voice-first, minimal visible UI, AI-driven, progressive disclosure, gesture-based, context-aware, ambient, smart suggestions

Good morning, Mia ☀
🌙
7h 42m
Sleep
💗
Calm
Mood
👟
8,214
Steps
View weekly report →

软 UI 进化版(新拟态 2.0) Soft UI Evolution

留住新拟态的柔软,修好它瞎掉的对比度

通用风格
2020s · 新拟态(Neumorphism)翻车后的无障碍修正版
展开详解

软 UI 进化版是 2020 年新拟态风潮的务实修正:保留柔和阴影与膨松质感,但把对比度拉回 WCAG AA+ 水准。新拟态由 Alexander Plyuto 2019 年在 Dribbble 引爆,却因“灰底灰按钮”的对比度灾难无法落地生产;设计圈随后演化出这种混合方案——阴影比扁平设计柔,层级比纯拟态清。它的流行说明趋势审美必须向可用性低头,本质在解决“好看的柔软质感”与“看得清的功能层级”之间的矛盾。

色彩提高了对比度的马卡龙粉彩配深色文字,柔而不糊
排印圆润友好的无衬线,正文用深灰而非浅灰保证可读性
布局8-12px 圆角卡片、宽松的呼吸感间距、清晰的卡片分组层级
动效200-300ms 温和过渡,焦点态有明确可见的轮廓变化

✓ 适用:现代企业应用、SaaS 平台、健康养生类产品、专业工具的亲和化

✗ 避免:极简主义诉求、极致性能场景、需要硬朗锐利气质的产品

HeadspaceApple 健康 App 卡片体系现代健康/理财类移动 App
品味要点关键在阴影配方:用两层低透明度投影(如 0 2px 4px 加 0 8px 20px,透明度 6-8%)代替新拟态的双向内外阴影,质感柔软但卡片边界清晰。新手翻车点是直接复刻 Dribbble 上的新拟态稿——背景和控件同色系只靠阴影区分、正文用浅灰,对比度跌破 3:1。判断标准:把界面调成灰度图,按钮、卡片、文字三个层级依然分明,柔软才算没牺牲功能。
用 ui-ux-pro-max 的 Soft UI Evolution 风格做一个页面

关键词:soft UI, improved contrast, subtle depth, layered soft shadows, pastel hierarchy, 8-12px radius, WCAG AA+, modern soft aesthetics

Ship your product
10x faster

The all-in-one platform trusted by 4,000+ teams.

Start free trialWatch demo ▸

巨幅主视觉设计 Hero-Centric Design

一屏定生死:标题、画面、按钮三件套

落地页
2010s 中期 · Apple 产品页定调的 SaaS 营销范式
展开详解

Hero-Centric 把落地页的全部赌注押在首屏:满屏 Hero 区、一句话价值主张、高对比 CTA、产品截图或视频。范式由 Apple 产品页定调,2010 年代中期随 SaaS 创业潮和转化率思维成为行业默认模板,Stripe、Linear 等公司把它打磨成了工艺品。底层逻辑是用户平均几秒内就决定去留,首屏必须完成“你是谁、对我有什么用、下一步点哪”三连答。本质在解决注意力稀缺时代的第一印象转化问题。

色彩品牌主色配大面积浅色留白衬底,CTA 用全页唯一的高饱和强调色
排印clamp 响应式巨字号标题(60-80 字符内),字重层级悬殊
布局100vh 满屏首屏,文案居中或左文右图,视觉重心压在折叠线上方
动效入场淡入、背景轻视差、CTA 呼吸光晕,克制但有指向性

✓ 适用:SaaS 落地页、产品发布、B2B 服务页、科技公司官网

✗ 避免:复杂多级导航站点、多页内容型站、重数据应用

StripeLinearVercelApple 产品页
品味要点高级感的核心是“一屏一念”:标题写用户得到的结果而非产品功能(“Ship in minutes”好过“强大的 CI/CD 平台”),CTA 全屏唯一,连色彩饱和度都不许有第二个竞争者。新手翻车点是首屏塞三个按钮、两行副标题加轮播图,视觉重心互相打架;以及背景图上直接叠白字不加遮罩,可读性崩盘。判断标准:眯眼看首屏,视线应 1 秒锁定标题、2 秒落到 CTA,路径不清就删元素。
用 ui-ux-pro-max 的 Hero-Centric Design 风格做一个页面

关键词:full-width hero, compelling headline, high-contrast CTA, product screenshot, value proposition above fold, gradient background, visual hierarchy

⏳ Launch offer ends tonight — 40% off annual plans
Start your free trial today
Set up in under 5 minutes
Cancel anytime, no lock-in
SOC 2 & GDPR compliant
★★★★★ 4.9 — 2,300+ verified reviews
Create your account
Work email
Company name|
Get started free →
No credit card required

转化导向设计 Conversion-Optimized

每个像素都为那一次点击服务

落地页
2010s · 增长黑客与 A/B 测试文化(Optimizely/Unbounce)催生
展开详解

转化导向设计把页面当成转化漏斗的物理化:单一 CTA、极简表单、信任徽章、社会证明、限时紧迫感,所有元素围绕一个行动目标排布。它由 2010 年代的增长黑客文化和 Optimizely、Unbounce 等 A/B 测试工具催生,每个设计决策都要用转化率数据说话。流行是因为获客成本飙升,落地页每 1% 的转化提升都直接等于钱。本质在解决“流量贵、注意力短、用户怕被骗”三重摩擦下的临门一脚问题。

色彩高对比品牌主色专供唯一 CTA,琥珀/红色专供紧迫感元素,背景干净退后
排印利益点导向的短句大标题,表单标签清晰无歧义
布局表单压在首屏折叠线上、3-5 个字段封顶、删除一切导航出口
动效只保留功能性动效:输入焦点环、加载态、成功反馈,绝不分散注意力

✓ 适用:电商产品页、免费试用注册、线索收集、SaaS 定价页、限时促销

✗ 避免:复杂功能讲解、多产品陈列、技术文档类内容

Booking.com 紧迫感体系Shopify 试用注册页Unbounce 模板库Amazon 产品页
品味要点高手做两件事:做减法和做信任。每砍一个表单字段转化率就涨一截;把“无需信用卡”“30 天退款”这类风险消除文案放在 CTA 按钮正下方 8px 处,比放页脚有效得多。新手翻车点是紧迫感造假——永远剩 2 小时的倒计时一旦被识破,信任全盘崩塌;以及在转化页保留完整导航栏,亲手给用户递逃生通道。判断标准:对页面上每个元素问一遍“删掉它转化会跌吗”,答不上来就删。
用 ui-ux-pro-max 的 Conversion-Optimized 风格做一个页面

关键词:single CTA, minimal form, trust badges, social proof, urgency elements, sticky CTA, focus states, above-the-fold form

Start free
Everything your team needs

One platform. Forty features. Zero busywork.

Automations
Trigger workflows across 200+ tools.
📈
Insights
Live dashboards for every team.
🔒
Security
SSO, audit logs and SOC 2.

功能矩阵展示页 Feature-Rich Showcase

把产品能力摊成一面功能墙,一张张打给买家看

落地页
2020s · SaaS 营销页军备竞赛产物
展开详解

功能矩阵展示型落地页用网格化的功能卡片把复杂产品拆解成一张张可扫读的「能力牌」,配合问题-方案对照、对比表格和交替分区引导用户逐层下钻。它随 2010s 末 SaaS 行业爆发而定型——当产品功能多到一屏讲不完,Monday.com、HubSpot 等把「功能墙」变成了 B2B 营销页的标准件。它本质解决的是:复杂产品如何在 30 秒内,让不同角色的买家各自找到自己关心的那个点。

色彩品牌主色打底,功能卡用蓝紫/绿/橙等高饱和辅色按类别编码(收益绿、问题红橙、功能蓝紫),CTA 用对比强调色
排印无衬线粗标题 + 短促的 benefit 文案,卡片标题与描述拉开两级以上字重差
布局3-4 列响应式功能卡网格(auto-fit minmax),交替背景分区制造滚动节奏
动效卡片 hover 浮起(translateY -4px)+ 阴影加深,图标随滚动入场,分区平滑过渡

✓ 适用:企业级 SaaS、平台型服务、开发者工具等功能复杂、需要分角色解释的 B2B 产品

✗ 避免:功能寥寥的早期产品、单一卖点的简单页面、娱乐向落地页

Monday.comHubSpotClickUpNotion 功能页
品味要点高手的功能墙:每张卡只回答一个用户问题,图标全站统一(同一线宽、同一圆角、同一风格库),分区交替用 2-4% 明度差的背景而不是换色相。新手翻车点:每卡塞三个卖点、图标线性混填充东拼西凑、hover 浮起超过 6px 像果冻。检验标准:眯眼看整页,应先看到清晰的分区节奏,而不是一锅彩色粥。
用 ui-ux-pro-max 的 Feature-Rich Showcase 风格做一个页面

关键词:feature grid, benefit cards, icon features, alternating sections, comparison table, problem-solution pairs, card hover lift

Invoices, without the chaos.

Send an invoice in 30 seconds. Get paid twice as fast. That's it — that's the product.

Try it free No credit card. No demo call.

极简直白型 Minimal & Direct

删到不能再删,只留一句话和一个按钮

落地页
2020s · 独立开发者与反营销浪潮
展开详解

极简直白型把落地页削减到骨架:单栏布局、一句价值主张、一个 CTA,大量留白和克制的黑白灰。它是对增长黑客时代过度营销的反动,由独立开发者和小型工作室带火——没预算做花哨动效,就把赌注全押在文案和加载速度上(页面常控制在 500KB 内、2 秒加载)。本质是用「少」换「信」:页面越不像推销,产品越显得自信。

色彩白底 + 近黑文字的单色系,全页只允许一个强调色,且只出现在 CTA 上
排印大号正文(18-20px)、1.6 行高、克制的无衬线,标题与正文靠字号字重拉层级
布局单栏居中、内容最大宽度 680px、上下大间距(4rem+)制造呼吸感
动效几乎无动画,仅有极轻的 hover 反馈与平滑滚动,加载速度本身就是设计

✓ 适用:独立开发者产品、micro SaaS、咨询/自由职业服务页、单一卖点的简单服务

✗ 避免:功能繁多的产品、需要长篇解释的复杂方案、多产品矩阵展示

Plausible AnalyticsBear Blog37signals 产品页独立开发者作品页
品味要点极简的成本是文案——每个字都要打中痛点,标题敢用 48px 以上而正文行宽不超过 680px,黑白灰之外只允许一个 CTA 色出现一次。新手翻车点:把「内容少」误当「设计完成」,留白没有节奏(上下间距随机拍脑袋),按钮与正文字号拉不开层级。检验标准:删掉任何一个元素页面就不成立,才算合格的极简。
用 ui-ux-pro-max 的 Minimal & Direct 风格做一个页面

关键词:single column, maximum white space, one CTA, clean typography, no decoration, direct messaging, fast loading

Loved by 12,000+ teams
★★★★★ 4.9 on G2
"We cut reporting time by 80% in the first week."
Maya Chen · VP Ops, Brightline
12k+
Customers
98%
Retention
$2.1B
Processed

社会证明驱动型 Social Proof-Focused

别自夸,让一万个客户替你说话

落地页
2020s · CRO 转化率优化时代标配
展开详解

社会证明驱动型把客户证言、logo 墙、星级评分和增长数字推到页面 C 位,让第三方声音代替品牌自述。理论根基是 Cialdini 的社会认同原理,在 2020s 被 G2/Trustpilot 评分生态和 CRO(转化率优化)行业推成 B2B 标配。它解决的是高客单价决策的核心障碍——「别人用了吗?效果如何?」——用可验证的他人经验降低买家的决策风险。

色彩品牌色 + 信任蓝与增长绿,证言区用浅灰底突出,星级固定用 #FBBF24 金黄
排印证言用斜体引文 + 实名头衔小字,指标数字用超大字号粗体(3rem 级)压阵
布局证言卡(头像+引文)、6-12 个灰度 logo 网格、三段式指标横排,模块化堆叠
动效证言轮播、logo 渐次淡入、数字 count-up 滚动动画、星级评分微动效

✓ 适用:B2B SaaS、专业服务、高客单价产品、电商转化页等已有客户积累的成熟品牌

✗ 避免:还没有用户的 MVP、初创期产品、小众实验性产品——没证据硬凑反而露怯

GongSenjaShopify 客户案例页G2 评分挂件生态
品味要点高手用「具体性」制造可信:证言必须带全名+头衔+公司+可验证数字(「省了 80% 时间」远强于「很好用」),logo 墙统一灰度处理压低视觉噪音,count-up 动画只在首次进入视口触发一次。新手翻车点:用一眼假的 stock 头像、清一色五星无一条带瑕疵(完美=可疑)、logo 彩色且大小不一像贴纸板。
用 ui-ux-pro-max 的 Social Proof-Focused 风格做一个页面

关键词:testimonials with photos, client logos grid, star ratings, count-up metrics, case study cards, trust indicators

See it work — in 60 seconds
1Connect2Automate3Ship

交互产品演示型 Interactive Product Demo

别描述产品,直接让用户隔着屏幕摸到它

落地页
2020s · PLG(产品主导增长)浪潮
展开详解

交互产品演示型把产品本身嵌进落地页:浏览器 mockup、录屏走查、分步引导、hover 揭示功能点,让用户在注册前就「摸」到产品。它是 PLG(产品主导增长)浪潮的直接产物——Linear、Loom 们发现最好的销售就是产品本身。本质是把转化漏斗前移:用「先体验后承诺」替代「先承诺后体验」,对工具类产品的转化率提升立竿见影,是公认转化力最高的落地页形态之一。

色彩品牌主色 + 与产品界面一致的 UI 配色,交互热点用高亮强调色标记
排印短促的动词型标题(See / Try / Watch),步骤编号醒目,正文极简让位于演示
布局首屏即产品截图/视频 mockup 居中压阵,下方步骤指示器(1-2-3)线性引导
动效播放按钮呼吸脉冲、hover 揭示(opacity 过渡)、步骤推进动画、交互平滑缩放

✓ 适用:SaaS 平台、效率工具、开发者工具等「看一眼界面就懂价值」的数字产品

✗ 避免:咨询等非数字化服务、无界面可展示的简单服务、对复杂度敏感的受众

LinearLoomFramerRaycast
品味要点高手让 demo 在 5 秒内出现「啊哈时刻」:首屏直接放带浏览器 chrome 框的真实产品界面而非插画,播放按钮做呼吸动画暗示可点,录屏分章节可跳转。新手翻车点:自动播放带声音的视频、demo 一镜到底三分钟没人看完、交互彩蛋藏太深无人发现。检验标准:用户一个键都不按,也能看懂产品长什么样、解决什么问题。
用 ui-ux-pro-max 的 Interactive Product Demo 风格做一个页面

关键词:embedded product mockup, video walkthrough, step-by-step guide, hover-to-reveal, live demo button, screenshot carousel

Trusted · Audited · Certified
Compliance-grade security, proven results
🛡 SOC 2 Type II 🔒 GDPR 🏅 ISO 27001
99.99%
Uptime SLA
+340%
Avg. client ROI
15 yrs
Industry expertise
Independently audited · 2026 annual report available

信任权威型 Trust & Authority

用徽章、认证和数字,把「可信」写在脸上

落地页
2020s · 合规经济与 B2B 采购信任链
展开详解

信任权威型用认证徽章、安全合规标识、专家资历和带来源的成效数字,系统性地构建专业可信形象。它脱胎于金融、医疗等强监管行业的官网传统,在 SOC 2/GDPR 成为 B2B 采购硬门槛的 2020s 扩散到整个企业软件圈。本质是在高风险决策场景中预先回答「你们靠谱吗」——把信任前置,扫清采购流程里的合规否决项,让法务和安全团队无话可说。

色彩职业感蓝灰为主调,金/银色点缀认证徽章,成功绿标注成效对比,整体克制不花哨
排印稳重的无衬线,指标数字大而粗,徽章与脚注用小字密排传递「文件感」严谨气质
布局首屏权威声明 + 徽章横排 + 三列指标卡,盾牌/锁图标点缀,层层递进铺信任链
动效极克制:徽章 hover 微亮、指标轻微脉冲、证书轮播,绝不喧宾夺主

✓ 适用:医疗健康、金融服务、法律服务、企业级软件、高端/奢侈品等高信任门槛行业

✗ 避免:休闲娱乐产品、病毒式传播的社交产品——权威感会显得无趣且疏远

VantaStripe 安全合规页NordVPN医疗/律所官网
品味要点高手把信任要素按采购决策链排布:认证徽章放首屏下方、带来源的数字案例放中段、安全徽章压在页脚前,且每个数字都标注出处;配色克制在蓝灰加一点金。新手翻车点:徽章堆得像奖状墙反而显得廉价;盗用未授权的认证 logo(法律风险);数据无来源(「提升 300%」谁说的?)。记住:信任感来自克制和可验证,不是元素数量。
用 ui-ux-pro-max 的 Trust & Authority 风格做一个页面

关键词:certification badges, security indicators, compliance logos, expert credentials, case study metrics, guarantee badges

Chapter 02 — The Turning Point
It started with one
broken harvest.

In 2019 our founders watched a season's work rot in transit. So they rebuilt the cold chain — farm by farm, mile by mile.

叙事驱动型 Storytelling-Driven

不卖功能卖故事,让用户滚动着读完一部品牌电影

落地页
2012 NYT《Snow Fall》开创 · 2020s 普及
展开详解

叙事驱动型把落地页写成一部可滚动的短片:章节式结构、滚动触发的场景揭示、情绪化配色与配图,让用户跟着品牌故事走完一段旅程。源头可追溯到 2012 年纽约时报《Snow Fall》开创的 scrollytelling,后被 Apple 产品页发扬光大成商业标配。它解决的是同质化市场中「为什么是你」的问题——当功能拉不开差距,故事和价值观本身就是差异化。

色彩暖调情绪色为主,每个故事章节有自己的色彩编码,章节间用渐变过渡暗示情绪曲线
排印衬线大标题营造文学感 + 无衬线正文,字号随叙事节奏起伏变化
布局全屏章节(100vh)纵向串联,图文交替、时间线贯穿,scroll-snap 控制停顿
动效滚动触发 reveal、视差背景、形变过渡、角色/图标动画——动效即叙事节奏

✓ 适用:品牌/创始人故事页、使命驱动型产品、高端生活方式品牌、纪录片式产品、教育内容

✗ 避免:纯技术复杂产品(除非天生有叙事性)、传统企业软件——买家只想快点看到参数

Apple 产品页NYT《Snow Fall》PatagoniaAirbnb 品牌故事页
品味要点高手控制叙事节奏:每屏只推进一个情节,滚动动画只用一次性 reveal(不循环),章节间用色彩温度变化暗示情绪曲线(冷开场、暖冲突、亮结局),衬线标题配无衬线正文是安全组合。新手翻车点:parallax 滥用引发晕动症、故事讲了五屏还没说产品是什么、忘了给「跳过故事直达产品」的出口。
用 ui-ux-pro-max 的 Storytelling-Driven 风格做一个页面

关键词:narrative flow, scroll-triggered reveals, chapter structure, emotional imagery, brand journey, timeline progression, parallax

Revenue
$84.2k
▲ 12.4%
Orders
1,982
▲ 3.1%
Churn
2.4%
▲ 0.8%
Latency
142ms
● watch
Weekly revenue
Top regions
US-East31.2k
EU-West24.8k
APAC12.1k
LATAM6.4k

高密度数据仪表盘 Data-Dense Dashboard

一屏塞下全部真相,留白是数据的敌人

数据看板
2010s BI 工具兴起 · 2020s 成熟
展开详解

高密度数据仪表盘以最小留白、12 列网格和紧凑排版,在一屏内塞进尽可能多的图表、KPI 卡和数据表。它继承自 Bloomberg 终端和航空驾驶舱的信息设计传统,随 2010s BI 工具(Tableau、Grafana)普及成为企业数据产品的默认形态。本质是为「每天盯 8 小时数据」的专业用户优化:牺牲第一眼美感,换取最低的滚动与切换成本,让异常一眼可见。

色彩浅灰白中性底(#F5F5F5)让位于数据,状态色严格三档:绿涨/黄警/红跌,蓝色承担图表主色
排印12-14px 小字号高密排版,数字用等宽字体右对齐保证列对齐可扫读
布局12 列网格 + 8px 紧凑间距,KPI 卡横排压顶、图表与表格分区平铺,侧边过滤栏
动效hover 数据提示、行高亮、图表点击缩放、过滤器平滑切换——动效只服务于查询

✓ 适用:商业智能仪表盘、金融分析、企业运营报表、数据仓库前端等专业重度数据场景

✗ 避免:营销展示型仪表盘、面向普通消费者的数据页、只有三五个指标的简单报表

GrafanaTableauMetabaseBloomberg Terminal
品味要点高手先定数据层级再画界面:一个主 KPI 区压阵 + 次级图表分层,所有数字右对齐并开启 tabular-nums 等宽数字,状态色全站只用红黄绿三档且语义绝不混用。8-12px 间距是密度的底线,再挤就该分页或分 tab。新手翻车点:为了好看上 3D/渐变柱状图(数据失真)、红绿色盲不可分(须加形状或图标辅助)、表格行高低于 32px 导致误点。
用 ui-ux-pro-max 的 Data-Dense Dashboard 风格做一个页面

关键词:data-dense dashboard, KPI cards, chart widgets, sortable tables, 12-column grid, filter sidebar, information density

Traffic Intensity — EU Regionhourly · last 5 days
COOL
HOT

热力图风格 Heat Map & Heatmap Style

颜色即数值,密度模式一眼可读

数据看板
1991 金融交易软件起源 · 2010s GitHub 贡献图普及
展开详解

热力图用颜色梯度把二维矩阵中的数值强度直接编码成色彩:蓝冷红热,一格一值。“heat map”一词由 Cormac Kinney 于 1991 年在金融交易软件中提出并注册商标,后经 GitHub 贡献图、Hotjar 点击热图在 2010 年代进入大众视野。它流行的根本原因是人眼感知颜色差异远快于逐个读数字。本质是在解决“高维密集数据如何 3 秒内看出模式与异常”的问题。

色彩双极渐变(冷蓝→中性白/黄→热红)编码强度,色阶必须连续且全图语义一致
排印字体退居二线,仅用小号无衬线标注轴与图例,不与色块争夺注意力
布局等大小单元格组成网格/矩阵,行列即坐标系,配常驻渐变图例条
动效数据更新时颜色平滑过渡,悬停高亮单元格并浮出 tooltip

✓ 适用:地理分布分析、相关性矩阵、性能/排期矩阵、用户行为点击热图、温度与强度类数据

✗ 避免:线性趋势展示、类别间精确比较(应使用柱状图)、数据点过少的小数据集

GitHub 贡献图HotjarGoogle AnalyticsWindy 气象热力图
品味要点高级感来自克制的色阶:单向强度用单色渐变,只有正负双极数据才用蓝-白-红双极渐变,且优先选感知均匀色板(如 Viridis)而非红绿灯三色。新手最常见的翻车点是色阶断档(5 个跳变色块制造出数据里不存在的假边界)和不放图例——没有图例的热力图等于没刻度的温度计。务必为色盲用户保留亮度差或纹理作为冗余编码。
用 ui-ux-pro-max 的 Heat Map & Heatmap Style 风格做一个页面

关键词:heatmap, color gradient scale, cell grid, intensity legend, divergent colors, hover tooltips, matrix layout, accessible palette

Q2 Executive SummaryFY26 · vs Q1
Revenue
$4.2M
▲ 12.4%
Net Retention
118%
▲ 3 pts
Churn
3.4%
▲ 0.6 pts
Sales on track Hiring at risk Churn alert

高管仪表盘 Executive Dashboard

给 CEO 的 30 秒,少即是权力

数据看板
2020s · 源自 1980s 高管信息系统 (EIS)
展开详解

高管仪表盘以 4-6 张大号 KPI 卡为核心,只呈现结论级指标与趋势方向,细节一律收起。它脱胎于 1980 年代的高管信息系统(EIS),在 Tableau、Power BI 普及后成为现代 BI 的标配场景。流行原因很直接:决策者没时间看明细,只需要知道“现在好不好、往哪个方向走”。本质是在解决信息过载——用强制性的留白和指标配额,逼出真正重要的数字。

色彩蓝灰白专业底盘叠加品牌色,红黄绿交通灯色只保留给状态与告警
排印指标数字 24-48px 超大字重,标签小号大写灰字,字号层级对比极端
布局单屏放下、KPI 卡横排成行,大量留白,绝不出现滚动条和明细表
动效数字 count-up 入场、趋势箭头方向动画、卡片悬停轻浮起、告警脉冲

✓ 适用:C 级管理层周报/月报视图、业务概要汇报、战略规划看板、董事会演示

✗ 避免:分析师深度钻取、技术细节排查、需要实时盯盘的运营监控

GeckoboardDataboxPower BI 高管模板Tableau 执行层仪表盘
品味要点高手的纪律是“一屏只讲一个故事”:KPI 严格卡死在 6 个以内,且每个数字必须带对比基准(环比/目标完成率),孤立的大数字只是装饰。新手翻车点是把高管仪表盘做成分析师仪表盘——塞 12 张图、加一排筛选器、放明细表,结果 CEO 一个数字也记不住。可执行判断标准:打印成一页 A4 还能 10 秒读懂,才算合格。
用 ui-ux-pro-max 的 Executive Dashboard 风格做一个页面

关键词:executive dashboard, large KPI cards, trend sparklines, traffic light indicators, at-a-glance, white space, summary metrics

LIVE — OPS CONTROLprod · us-east-1 · refresh 5s
API ▲ 99.99%DB ▲ okQUEUE ◐ lag 4sNODE-7 CPU 94%
req/s 12.4kp99 412ms ▲err 0.42%

实时监控仪表盘 Real-Time Monitoring

永不眨眼的值班室,红灯即警报

数据看板
2010s-2020s · DevOps/SRE 文化推动
展开详解

实时监控风格围绕“活着的数据”设计:流式图表持续推进、状态点脉冲呼吸、告警按红橙绿三级直接砸到眼前。它随 2010 年代 DevOps/SRE 运动兴起,Grafana、Datadog 把机房值班大屏变成了行业标准审美。其流行源于系统复杂度爆炸——人工巡检失效后,界面必须替人“盯着”。本质是在解决注意力分配:99% 的时间让人放心忽略,1% 的异常瞬间抓住视线。

色彩深色底盘降低长时间盯屏疲劳,红/橙/绿三级告警色拥有最高视觉优先级
排印等宽字体呈现指标与时间戳,数字纵向对齐便于扫读跳变
布局网格化面板墙,关键状态指示器置顶,告警 toast 固定悬浮于最上层
动效live 状态点脉冲、流式图表平滑推进、临界告警闪烁发光——动效即信息

✓ 适用:系统/DevOps 监控、实时分析大屏、股票行情看板、直播与活动实时追踪

✗ 避免:历史回溯分析、长周期趋势报告、归档数据展示

GrafanaDatadogNew Relic交易所行情大屏
品味要点高级感的关键是动效分级:正常状态的动画幅度小到近乎呼吸,只有 critical 才允许高频闪烁——全屏都在动等于全屏都没动。新手最大翻车点是“告警通胀”:把 warning 做得和 critical 一样醒目,三天后值班员就对红色免疫了。每个动画必须能回答“它代表什么状态变化”,纯装饰动效在监控场景不是审美问题,是事故隐患。
用 ui-ux-pro-max 的 Real-Time Monitoring 风格做一个页面

关键词:real-time monitoring, live status indicators, pulsing dots, streaming charts, alert notifications, system health, dark dashboard

All Regions / EMEA / Germany← Back
Berlin
€1.24M
Enterprise
€780K
SMB
€460K
Munich
€890K
Hamburg
€610K

下钻分析仪表盘 Drill-Down Analytics

层层下钻,从总览一路挖到真相

数据看板
2020s · 源自 1990s OLAP 多维分析
展开详解

下钻分析风格把数据组织成“总览→维度→明细”的层级路径,用面包屑、可展开区块和层级缩进让用户逐层深入。它的方法论根基是 1990 年代 OLAP 多维分析的 drill-down 操作,被 Tableau、Looker 等现代 BI 工具转译成交互范式。流行原因是单一视图永远无法同时满足“看大盘”和“查原因”两种诉求。本质是在解决上下文保持问题:钻得再深,用户也要随时知道自己在哪、怎么回去。

色彩以品牌主色为锚,用同色系深浅标记钻取深度,当前选中层高亮区分
排印层级靠字号字重递减表达,面包屑小号灰字、当前层加粗主色
布局置顶粘性面包屑 + 可展开嵌套区块,子层级以固定缩进表达从属关系
动效展开/收起 300ms 平滑过渡,层级切换的细节揭示动画,数据重载有加载反馈

✓ 适用:销售/产品分析、漏斗归因、多维数据探索、需要从汇总追查到明细的 BI 场景

✗ 避免:简单线性数据、单指标看板、实时流式监控

TableauLookerPower BIAmplitude
品味要点高手把“回得去”看得比“钻得深”更重要:面包屑常驻、每层保留父级汇总数字作锚点、支持深链直达任意层级。新手翻车点有二:一是钻三层后丢失上下文,用户忘了当前筛选条件是什么;二是把所有层级一次性全展开,退化成一张巨型明细表。判断标准:任意一层截图发给同事,对方能看懂“这是什么范围的数据”。
用 ui-ux-pro-max 的 Drill-Down Analytics 风格做一个页面

关键词:drill-down analytics, breadcrumb navigation, expandable sections, hierarchical data, summary to detail, level indicators, context preservation

May vs April — Growth Review
MayApr
Signups+25.7%
Revenue−7.5%
Activation rate+23.1%

对比分析仪表盘 Comparative Analysis Dashboard

并排对照,胜负与增减一目了然

数据看板
2020s · A/B 测试与增长文化推动
展开详解

对比分析风格把两组或多组数据强制并排:本期 vs 上期、A vs B、区域 vs 区域,再配增减箭头与百分比徽章。它随互联网公司 A/B 测试文化和环比汇报惯例在 2010-2020 年代成熟,Google Analytics 的期间对比功能是其大众化起点。流行原因是孤立数字毫无意义——“涨了还是跌了”才是业务最原始的问题。本质是在解决参照系问题:让每个指标自带基准线。

色彩主体蓝 vs 对照橙双色编码两组数据,绿涨红跌的 delta 色只用于差值徽章
排印指标数字突出,±百分比徽章小号加粗带底色,胜负标记一眼可辨
布局左右对称或成对条形并排,组间距将“成对”关系显式化,基准线贯穿图表
动效对比条生长到位的入场动画、delta 箭头方向动画、对比项悬停联动高亮

✓ 适用:环比/同比汇报、A/B 实验看板、市场与竞品对比、区域绩效横评

✗ 避免:单指标看板、未来预测场景(用预测分析风格)、无历史数据的纯实时场景

Google Analytics 期间对比OptimizelySimilarwebApp Store Connect
品味要点高级感来自双色系统的纪律:两组数据各占一种色相且全局一致,绿/红只留给 delta,绝不挪用去画第三组数据。新手翻车点是“对比维度爆炸”——同屏既比时间又比区域又比渠道,读者无法确定任何一根柱子在和谁比。可执行标准:每张图只回答一个“X vs Y”,并把基准(如 vs last month)写进标题而不是藏在 tooltip 里。
用 ui-ux-pro-max 的 Comparative Analysis Dashboard 风格做一个页面

关键词:comparison dashboard, side-by-side metrics, period-over-period, delta indicators, benchmark lines, A/B results, percentage change badges

Revenue Forecast — Q3✦ AI model · 87% confidence
today
ActualForecast95% CI● anomaly · Apr 18

预测分析仪表盘 Predictive Analytics

把未来画成虚线与置信区间

数据看板
2020s · AI/ML 平民化浪潮
展开详解

预测分析风格的视觉语法高度固定:实线画历史、虚线画预测、半透明色带画置信区间、醒目色点标异常。它在 2020 年代随机器学习平民化进入主流 BI——Tableau 内置指数平滑预测、各类 AIOps 产品做异常检测,让“画未来”成为仪表盘的常规需求。流行的动力是业务对“接下来会怎样”的渴求超过了“过去发生了什么”。本质是在解决不确定性的诚实表达:预测必须看起来就“不如事实确定”。

色彩实际数据用稳重蓝,预测用紫色系区隔,置信带低透明度,异常点用橙红警示
排印无衬线为主,预测值旁标注置信度小字,AI 洞察卡用强调色描边胶囊
布局时间轴折线图为主体,“今天”分界线显式分隔史实与预测,场景切换器置顶
动效预测线逐段绘出、置信带淡入、异常点脉冲告警,强调“推演”的过程感

✓ 适用:销量/营收预测、异常检测系统、预算规划、AI 驱动的趋势分析

✗ 避免:纯历史回顾报表、简单汇报场景、实时运维监控

Tableau 预测功能AnodotDatadog WatchdogAmazon Forecast
品味要点高手永远让不确定性可见:虚线、随时间变宽的置信带、标注预测生成日期与模型准确率,缺一不可。新手最危险的翻车点是把预测线画成和历史一样的实线——读者会把猜测当事实做决策,这是设计事故而非审美问题。第二条可执行标准:置信带透明度控制在 0.15-0.25 之间,太实会被误读为真实数据区间,太虚等于没画。
用 ui-ux-pro-max 的 Predictive Analytics 风格做一个页面

关键词:predictive analytics, dashed forecast line, confidence interval bands, trend projection, anomaly highlights, scenario toggles, AI insight cards

Signup Funnel — April
Visit48.2K
▼ −28% drop-off
Sign up34.7K
▼ −36% drop-off
Activate22.1K
▼ −74% drop-off
Pay5.8K
Retention cohorts
W0W1W2W3W4
W4 retention ↑ 18.4%

用户行为分析仪表盘 User Behavior Analytics

漏斗与留存,看清用户在哪流失

数据看板
2010s-2020s · 增长黑客与产品分析兴起
展开详解

用户行为分析风格以漏斗图、用户流向图(Sankey)、同期群留存表为标志性组件,把“用户从哪来、在哪卡住、何时离开”画成可追问的图形。它随 2010 年代增长黑客方法论和 Mixpanel、Amplitude 等产品分析工具兴起,AARRR 模型是其理论底座。流行原因是流量红利见顶后,精细化运营取代了粗放投放。本质是在解决转化归因:把抽象的“留存率下降”翻译成具体哪一步、哪一群人的问题。

色彩绿色编码高参与/成功、红色编码流失/放弃、蓝色编码转化主线,同期群用单色透明度梯度
排印百分比与转化率数字醒目加粗,阶段标签简短直白,流失数字以红色小字标注
布局漏斗自上而下递减居中,流向图横向展开,同期群表用网格色块矩阵
动效漏斗逐级填充、流向连线绘制动画、转化节点脉冲、参与度条增长

✓ 适用:转化漏斗分析、用户旅程追踪、同期群与留存分析、参与度运营看板

✗ 避免:实时运维指标、技术系统监控、金融交易类数据

MixpanelAmplitudeHotjarGoogle Analytics 4
品味要点高手画漏斗只保留 4-6 个关键步骤,并把“步骤间流失率”标得比“步骤内人数”更醒目——流失才是行动点。新手翻车点:把所有埋点事件全塞进漏斗变成十几层;以及同期群表不做颜色归一化,新老用户基数不同导致色块毫无可比性。判断标准:运营同学看完图能直接说出“下一步优化哪个环节”,否则只是好看的装饰。
用 ui-ux-pro-max 的 User Behavior Analytics 风格做一个页面

关键词:user behavior analytics, funnel visualization, user flow sankey, cohort table, retention curve, conversion metrics, engagement heatmap

REVENUE
$4.22M
▲ 12.4%
EXPENSES
$1.83M
▲ 3.1%
NET PROFIT
$2.39M
▲ 18.2%
CASH FLOW · BUDGET VS ACTUAL FY26

金融财务仪表盘 Financial Dashboard

钱的仪表盘:绿是利润,红是亏损,精确到分

数据看板
2020s · FinTech 与现代 BI 浪潮
展开详解

金融仪表盘是 BI 设计中要求最严苛的分支,用红绿语义和精确数字呈现损益、预算与现金流。它的血统可追溯到 Bloomberg 终端和华尔街交易屏,2010 年代被 Stripe、QuickBooks 等 FinTech 产品带入现代 Web。它流行是因为金融数据呈现出错会直接造成真金白银的误判,行业需要一套约定俗成的视觉规范。本质上它解决的是“信任”问题——等宽数字、统一小数位、完整审计痕迹,都是在向用户证明每一个数字可被追责。

色彩灰阶打底,绿=利润、红=亏损、深蓝=信任、橙=预算偏差,语义色绝不挪作他用
排印数字必须用等宽字体(tabular-nums)右对齐,小数位全表统一,货币符号常驻
布局KPI 大数卡置顶,下接瀑布图/趋势 sparkline/带合计行的明细表,列头吸顶
动效数字 count-up 滚动、涨跌箭头与红绿过渡动画,除此之外一律克制

✓ 适用:财务报表、会计/记账仪表盘、投资组合追踪、预算监控、银行与审计分析

✗ 避免:普通业务仪表盘、娱乐/社交类指标、任何非财务数据——红绿损益语义会造成误读

Stripe DashboardQuickBooksBloomberg TerminalMercury
品味要点高级感来自克制:全局只允许红绿两种语义色,其余指标一律灰阶;数字必须用等宽字体右对齐,小数位全表统一,否则列扫读直接失效。新手最常翻车在“彩虹仪表盘”——给每个指标配一种颜色,信任感瞬间崩塌。自检标准:遮住数字只看颜色,能否立刻判断这是盈利还是亏损。
用 ui-ux-pro-max 的 Financial Dashboard 风格做一个页面

关键词:financial dashboard, revenue expense charts, budget vs actual, cash flow waterfall, financial ratios, audit trail, currency formatting, period comparison

Sales Pipeline — Q2Forecast 94% accurate
PIPELINE
Leads · 412
Qualified · 218
Proposal · 96
Won · 41
QUOTA
72%
$1.8M of $2.5M
LEADERBOARD
A. Reyes128%
J. Park104%
M. Chen91%
D. Okafor67%

销售智能仪表盘 Sales Intelligence Dashboard

把销售团队的胜负欲做成可视化排行榜

数据看板
2020s · CRM/RevOps 时代,Salesforce 奠定范式
展开详解

销售智能仪表盘服务于 CRM 时代的销售管理:管道漏斗、配额仪表、战绩排行榜是标配三件套。范式由 Salesforce 在 2000 年代奠定,2010 年代 HubSpot、Pipedrive 把它做得更轻、更可视化。它流行是因为销售团队天然吃“竞争可视化”这一套——排行榜与配额进度条能直接驱动行为。本质上它解决的是“预测”问题:把混沌的成交过程拆成阶段化、可量化、可问责的漏斗。

色彩按成交状态编码:赢单绿、输单红、进行中蓝、阻塞橙,排行榜前三用金银铜
排印无衬线为主,排行榜与配额数字加粗放大,强调一眼可扫读
布局漏斗/看板列+仪表盘+排行榜三区分明,辅以territory地图与竖排活动时间线
动效仪表指针摆动、排名升降动画、deal 卡片拖拽位移、状态变更高亮

✓ 适用:CRM 仪表盘、销售管理与机会追踪、配额规划、销售团队绩效管理

✗ 避免:市场营销分析、客服指标、HR 仪表盘——漏斗与配额语义不适配

SalesforceHubSpotPipedriveGong
品味要点高手把竞争心理做进视觉:前三名用金银铜,但业绩条必须诚实——不许截断坐标轴夸大差距,销售一眼就能识破,识破即失信。漏斗各阶段用同色系深浅渐变而非跳色,否则读不出“递进”关系。新手通病是把所有 CRM 字段堆上屏,记住一屏只回答一个问题:“这个月配额能不能完成”。
用 ui-ux-pro-max 的 Sales Intelligence Dashboard 风格做一个页面

关键词:sales dashboard, pipeline funnel, deal kanban, quota gauge, leaderboard, territory map, win-loss ratio, forecast accuracy

★ NO GRADIENTS CLUB
SHIP LOUD.
SHIP UGLY.
★★★★★
12,408
MAKERS JOINED

新粗野主义 Neubrutalism

故意丑给你看:黑框硬影,反精致宣言

通用风格
2020s · Gumroad 改版与 Figma 社区带火
展开详解

新粗野主义是对 2010 年代千篇一律的“安全设计”(柔和渐变、模糊阴影、统一圆角)的公开反叛,名字借自建筑界崇拜原始混凝土的粗野主义。2020 年前后由 Gumroad 改版和 Figma 社区作品带火,迅速成为 Gen Z 创意品牌的视觉接头暗号。它流行是因为在无限滚动的信息流里,“刺眼”本身就是竞争力。本质是用故意的不完美传递真实与个性,对抗大厂模板化审美。

色彩高饱和原色(黄红蓝)撞色+纯黑边框,全程禁用渐变与模糊
排印超粗无衬线(700+),标题敢占半屏,文字本身就是装饰
布局硬边卡片直接堆叠,圆角为 0 或极小,元素间靠 3px 黑框分界
动效几乎静态,hover 时阴影位移模拟“按下去”的物理感即可

✓ 适用:Gen Z 品牌、初创公司、创意机构、Figma/Notion 式工具产品、技术博客

✗ 避免:奢侈品、金融、医疗等保守行业——玩世不恭的气质会摧毁信任感

GumroadMSCHFFigma 社区作品
品味要点精髓在“丑得讲究”:边框统一 3px、阴影统一 4px 4px 0、圆角要么全 0 要么全统一——系统一致性是“丑”与“乱”的分界线。配色最多三个高饱和色加黑白,多一个就成菜市场。新手最大翻车点是手软:偷偷加 1px 模糊或 5% 渐变,整个风格立刻塌掉,新粗野主义容不下任何“过渡”。
用 ui-ux-pro-max 的 Neubrutalism 风格做一个页面

关键词:neubrutalism, hard black borders, offset hard shadows, bright pop colors, no gradients, bold typography, sharp corners, raw aesthetic

98.2%
Sync reliability across devices
+2.4 pts this week
Instant sync
Median under 40 ms
🔒
Private
E2E encrypted
Halo Pro
Try it free

便当盒网格 Bento Box Grid

苹果式便当盒:大小不一的格子各装一道菜

通用风格
2020s · Apple Keynote 与产品页带火
展开详解

Bento Grid 得名于日式便当盒——一个盒子里分隔出大小不一的格子,每格装一道菜。Apple 在 2020 年代的发布会 Keynote 和产品页大规模使用后引爆,Linear、Vercel 等 SaaS 纷纷跟进,成为功能展示的事实标准。它流行是因为完美平衡了信息密度与呼吸感:每张卡片自成单元,又服从整体网格节奏。本质上它解决的是“多个功能点如何并列展示又不显杂乱”的经典排版难题。

色彩中性灰白打底(#F5F5F7),单一品牌色点缀,最多放一张深色卡制造反差
排印系统级无衬线,“大数字+小标签”的强对比层级是标志性手法
布局4 列网格上 1x1/2x1/2x2 卡片混排,圆角 16-24px,留白即氧气
动效hover 轻微 scale(1.02) 加柔和过渡,克制到几乎察觉不到

✓ 适用:仪表盘、产品功能页、作品集、Apple 式营销页、SaaS 特性展示

✗ 避免:高密度数据表格、长文阅读、实时监控——卡片切割会打断信息连续性

Apple 产品页LinearVercelbento.me
品味要点关键是节奏感:卡片尺寸必须遵循网格倍数(1x1、2x1、2x2),随机尺寸会变成碎玻璃;每张卡只放一个信息点,内容装不下就拆卡而不是缩字。留白是这个风格的氧气,卡片内边距低于 24px 就开始窒息。新手通病是把 bento 当瀑布流用——记住它是“策展”不是“陈列”,一屏卡片超过 8 张就该砍。
用 ui-ux-pro-max 的 Bento Box Grid 风格做一个页面

关键词:bento box grid, modular cards, varied spans, rounded corners 24px, soft shadows, asymmetric grid, Apple style, neutral background

EST ✦ 2001
ur portal 2 the shiny future ☆ now in chrome

千禧年美学 Y2K Aesthetic

镭射粉加镀铬银,千禧年的未来乡愁

通用风格
2000s 原生 · 2020s Gen Z 复兴
展开详解

Y2K 美学复刻 2000 年前后的科技乐观主义:镀铬质感、镭射粉、果冻按钮,全是 Windows Media Player 皮肤、诺基亚广告和初代 MTV 网站时代的视觉记忆。2020 年代由 Gen Z 在 Instagram/TikTok 上掀起复兴,时尚界(Heaven by Marc Jacobs、Blumarine)率先接盘,再回流到数字产品。它流行是因为对年轻人是“复古的新鲜感”,对千禧一代是乡愁。本质是用怀旧滤镜贩卖“未来曾经很美好”的情绪。

色彩镭射粉×电光青为主,镀铬银做金属字,紫色压底,整体高糖高反光
排印圆润或斜体展示字体,镀铬渐变填充文字,字号敢于夸张
布局自由浮动反网格布局,气泡、星星、闪光散落画面
动效星光闪烁、霓虹呼吸光晕、果冻按钮高光流动——动效就是氛围本体

✓ 适用:时尚品牌、音乐平台、Gen Z 消费品、怀旧营销活动、娱乐产品

✗ 避免:B2B 企业服务、医疗、金融及面向年长用户的产品——花哨质感与对比度问题是硬伤

Heaven by Marc JacobsPinkPantheress 专辑视觉Gen Z 时尚电商 campaign 页
品味要点高级的 Y2K 是“塑料质感的精确复刻”:镀铬字必须有明暗两段渐变模拟金属反光,果冻按钮的高光必须锁在顶部 50% 区域。粉与青的比例控制在 7:3 左右,对半分会变成廉价网吧。新手翻车在元素堆砌——星星、气泡、镭射全上;正确做法是选一个主特效做足,其余只做点缀,并且务必检查文字对比度,Y2K 的可读性灾难是出了名的。
用 ui-ux-pro-max 的 Y2K Aesthetic 风格做一个页面

关键词:Y2K aesthetic, neon pink cyan, chrome metallic, glossy buttons, iridescent, bubble shapes, sparkles, retro futurism

NET_7 // SECURE_LINK2077.06.10
NETRUNNER_OS
> trace daemon_47 ... [OK]
> decrypt /vault/ice.key
UPLINK
98.2%
ICE
BREACH
CRED
¥42.0K

赛博朋克界面 Cyberpunk UI

暗夜霓虹终端机,每个像素都在反乌托邦

通用风格
1980s 赛博朋克文学起源 · 2020 年《赛博朋克 2077》引爆
展开详解

赛博朋克 UI 继承自 80 年代赛博朋克文学(吉布森《神经漫游者》)与《银翼杀手》的视觉遗产,2020 年《赛博朋克 2077》发售把这套霓虹终端美学推向大众。暗底配荧光绿/品红、扫描线、故障抖动,全是 CRT 显示器与黑客终端的数字拟像。它在游戏、加密货币和开发者工具圈长盛不衰,因为受众认同“高科技、低生活”的反叛叙事。本质是用视觉噪点制造沉浸感与亚文化身份认同。

色彩近黑底(#0D0D0D)上荧光绿/品红/青三色霓虹,一屏最多两种主荧光色
排印等宽终端字体,全大写加下划线命名风(NETRUNNER_OS),自带机器感
布局HUD 式细边框面板加终端日志流,状态栏与角标制造仪器感
动效故障 glitch 抖动、光标闪烁、扫描线滚动——稀疏触发才高级

✓ 适用:游戏平台、加密应用、科幻产品、开发者工具、电竞与娱乐

✗ 避免:企业级软件、医疗、家庭应用、保守品牌——暗底霓虹的对比度先天不达标,仅限暗色模式

Cyberpunk 2077 官网Razer黑客主题开发者工具
品味要点高手的克制点在“故障要稀疏”:glitch 动画只给一个主标题,且 3 秒以上才触发一次——满屏抖动是游戏厅,不是赛博朋克。霓虹一屏最多两种主色,text-shadow 模糊半径别超 10px,否则成夜店灯牌。新手最大误区是用纯黑 #000 当背景:真正的终端是 #0D0D0D 这类“接近黑”,纯黑会让霓虹色显得漂浮没有空气感。
用 ui-ux-pro-max 的 Cyberpunk UI 风格做一个页面

关键词:cyberpunk UI, neon on dark, terminal HUD, glitch effect, scanlines, matrix green, monospace, dystopian tech

ROOTED · DAILY RITUAL
Grow at your
own pace.
Breathwork, soil-to-table recipes and slow routines for steady minds.
🌿
12 min · morning grounding

有机亲生物风 Organic Biophilic

把森林搬进屏幕,圆角和泥土色治愈焦虑

通用风格
2020s · 可持续设计与疗愈经济浪潮
展开详解

有机亲生物风植根于“亲生物设计”(Biophilic Design)理论——人类天生亲近自然,把自然元素引入人造环境能实证降低压力。2020 年代随可持续议题升温和疫情后的疗愈需求爆发,Headspace、Calm 等正念应用把它推成品类标配。圆角、泥土色、流动的 blob 形状,都在模拟自然界没有直角的形态规律。本质是用视觉的“软”对冲数字生活的“硬”,让屏幕成为减压而非施压的存在。

色彩米色/大地色大面积打底,森林绿做点缀色,天空蓝负责提亮
排印衬线标题传递人文温度,正文用圆润无衬线,行距宽松
布局不对称 blob 形状打破网格,圆角 16-24px 且刻意四角不等
动效blob 缓慢漂移变形(8 秒以上),如呼吸般的慢动效

✓ 适用:冥想/正念应用、可持续品牌、有机食品、健康与 wellness 产品

✗ 避免:硬科技产品、游戏、工业与都市感品牌——“软”气质会消解专业锐度

HeadspaceCalmAllbirds
品味要点高级感的钥匙是“不对称圆角”:四角半径各不相同的 blob 才像自然物,完美正圆反而暴露人工感。配色上绿色只能当点缀(按钮、图标),大面积底色必须是米色/沙色等低饱和中性色——满屏绿是化肥广告不是疗愈。新手通病是给有机形状配硬阴影:自然界没有 4px 黑色投影,阴影必须大半径低透明度(如 0 8px 32px / 8%)。
用 ui-ux-pro-max 的 Organic Biophilic 风格做一个页面

关键词:biophilic organic, earth tones, organic blob shapes, asymmetric rounded corners, natural textures, wellness aesthetic, flowing curves, calming

Nova Copilotv4 · agentic
Summarize last week's churn report
📄 churn-report-w24.pdf · 12 pages attached
Churn fell 1.8% — onboarding flow is working.
Ask anything…

AI 原生界面 AI-Native UI

界面退后,对话即产品

通用风格
2020s · ChatGPT 时代定型的交互范式
展开详解

为 AI 产品而生的界面范式:收起传统的菜单与表单,让一条对话流成为产品本身。它随 2022 年底 ChatGPT 的爆发而定型——流式文本、打字指示器、上下文卡片成为新的设计母语。流行的根本原因是交互范式迁移:用户从“操作软件”变成“委托代理”。它要解决的核心问题,是在不确定的 AI 输出过程中维持信任感与节奏感。

色彩九成中性灰白打底,单一 AI 紫只标记智能行为,绿色仅作在线/成功状态
排印中性无衬线保证长对话可读,代码与模型输出用等宽字体区分
布局垂直对话流,用户消息靠右、AI 靠左,输入框吸底常驻,上下文卡片内嵌流中
动效三点脉冲打字指示与流式逐字渲染,动效承担“AI 正在工作”的状态播报

✓ 适用:AI 产品、聊天机器人、语音助手、Copilot 与各类对话式工具

✗ 避免:传统多字段表单、重数据仪表盘、打印优先内容

ChatGPTClaudePerplexityGitHub Copilot
品味要点高级感来自克制:界面 90% 是中性灰白,AI 紫只给“AI 正在行动”的时刻(打字指示、流式生成高亮),让颜色成为状态语义而非装饰。新手最常翻车:满屏渐变紫加星星 emoji 堆“AI 感”,以及流式输出不做高度占位导致页面抖动。判断标准:关掉所有动效后,界面应该像一份干净的文档。
用 ui-ux-pro-max 的 AI-Native UI 风格做一个页面

关键词:minimal chrome, conversational layout, streaming text, typing indicator, context cards, AI accent purple, response bubbles, sticky input

+
POP·FEST
SHAPE
RIOT '88
GET TICKETS

孟菲斯设计 Memphis Design

对“好品味”竖中指的几何狂欢

通用风格
1980s · 米兰 Memphis 集团掀起的后现代反叛
展开详解

1981 年 Ettore Sottsass 在米兰创立 Memphis 集团,用糖果色、几何图形和“故意不和谐”对抗包豪斯式的功能主义正统。它本质是一场反叛:证明设计可以情绪化、可以开玩笑。2010 年代中期在 Web 设计中复兴,成为年轻品牌摆脱“性冷淡风”同质化的武器。它解决的核心问题是记忆度——在千篇一律的简洁界面里,孟菲斯一眼就能被认出来。

色彩热粉、柠檬黄、薄荷绿、蓝紫高饱和互撞,黑色粗描边收束画面
排印粗壮几何无衬线,标题倾斜或错位排布,自带玩具感
布局不对称构图,三角/波浪线/圆环等装饰图形散落四周,硬阴影代替景深
动效rotate 倾斜与图形位移的弹跳动效,节奏轻快像 80 年代 MV

✓ 适用:创意机构、音乐网站、青年潮流品牌、活动宣传、艺术作品集与娱乐场景

✗ 避免:金融、医疗、法务等严肃行业,面向年长用户或保守品牌的产品

MTV 80 年代频道视觉Camille Walala 装置艺术音乐节与潮流活动宣传页
品味要点孟菲斯的“乱”是精确编排的:装饰图形控制在 5-7 个,色彩可以冲突但色块面积必须有主次,黑色粗描边是镇住画面的锚。新手最常翻车:把几何图形当背景纹理铺满全屏,信息层级被装饰吞掉。判断标准:眯起眼睛看,标题和 CTA 是否依然第一眼跳出来。
用 ui-ux-pro-max 的 Memphis Design 风格做一个页面

关键词:memphis style, bold geometric shapes, squiggles, clashing colors, 80s postmodern, playful patterns, asymmetric layout, dotted texture

VAPORNET
NEW MEMORY · 1995

蒸汽波 Vaporwave

数字废墟里的霓虹乡愁

通用风格
2010s 网络亚文化 · 拼贴 80-90s 怀旧符号
展开详解

诞生于 2010 年代初的互联网音乐亚文化,以 Macintosh Plus 的《Floral Shoppe》专辑封面为图腾,把 Windows 95、希腊雕像、棕榈树、全角假名等 80-90 年代消费符号拼贴成戏谑的怀旧。它在 Tumblr 与 Reddit 上发酵,是第一个完全“生于网络”的视觉风格。本质是用过时科技的美学残骸,表达对数字消费时代的暧昧乡愁;用在界面上,能给产品注入强烈的亚文化身份认同。

色彩粉→青→紫的日落渐变打底,霓虹粉青互撞,薄荷绿点缀
排印全角字符与衬线/像素字混排,标题加霓虹 text-shadow 辉光
布局中轴对称的祭坛式构图:落日居中、透视网格铺向地平线
动效网格向前滚动、辉光呼吸、偶发 glitch 抖动与 VHS 扫描线

✓ 适用:音乐平台、游戏、创意作品集、娱乐与艺术项目,以及想贴亚文化标签的科技初创

✗ 避免:商务应用、电商、教育、医疗与企业级软件

Macintosh Plus《Floral Shoppe》封面Poolsuite FM《Hotline Miami》
品味要点蒸汽波的灵魂是“廉价数字感的精致复刻”:日落、网格地平线、霓虹辉光、扫描线这几件套点到为止,glitch 效果只在入场或 hover 触发一次。新手最常翻车:故障动画全程循环晃到没法读字,正文也加发光。判断标准:霓虹 glow 只给标题,正文必须是无特效的高对比白字。
用 ui-ux-pro-max 的 Vaporwave 风格做一个页面

关键词:vaporwave, sunset gradient, neon glow, retro grid, glitch effects, 80s-90s nostalgia, VHS scanlines, dreamy retro-futurism

Revenue Layers
Q2 overview
⌘K Quick actions
Active now
2,841
▲ 12.4% this week

维度分层 Dimensional Layering

用阴影在平面里盖出楼层

通用风格
2020s · Material 高程体系的成熟形态
展开详解

用 z-index、多级阴影和背景模糊把平面界面组织成有深度的空间,是 Google Material Design 高程(elevation)体系在 2020 年代的成熟形态。它的流行源于界面信息密度持续上升——当一屏挤着几十个元素时,z 轴是比颜色更优雅的层级语言。本质在解决“什么浮在上面、什么沉在下面”的注意力调度问题:弹窗、悬浮操作、置顶卡片各居其位。

色彩白灰中性底色分层,仅给最高层级元素一个品牌 accent
排印常规现代无衬线,层级靠阴影与位置表达而非字重轰炸
布局卡片刻意交叠错位,4 级阴影标定 z 轴高度,顶层可加背景模糊
动效悬停抬升(阴影加深 + 轻微上移)、视差滚动强化空间纵深

✓ 适用:仪表盘、卡片式布局、弹窗与导航、产品展示与 SaaS 界面

✗ 避免:印刷式排版、简单博客、低端设备和明确要求扁平化的设计

Google Material DesignmacOS Big SurStripe Dashboard
品味要点阴影体系必须统一:全站只用 4 级 elevation token,同层级元素阴影完全一致,光源方向永远来自上方。新手最常翻车:每张卡片随手写一个 box-shadow,深浅角度各异,立刻显廉价。判断标准:z 轴高度要与交互重要性对应——浮得越高的元素,越该是用户当下要操作的那一个。
用 ui-ux-pro-max 的 Dimensional Layering 风格做一个页面

关键词:dimensional layering, z-index depth, overlapping cards, elevation shadows, floating elements, backdrop blur, spatial UI, parallax depth

NOIR®WORK ABOUT CONTACT
LESS,
LOUDER.
Brand & spatial design for clients who hate clutter — est. 2021
01 / 04

夸张极简主义 Exaggerated Minimalism

元素越少,嗓门越大

通用风格
2020s · 瑞士国际主义的当代放大版
展开详解

把瑞士国际主义的网格与留白推到极端:字号大到占满半屏,元素少到只剩必需品,黑白之外只允许一个 accent 色。2020 年前后随时尚品牌与设计机构官网兴起,是对“信息过载网页”的强硬反动。流行的原因是它能在三秒内传达自信——大字本身就是品牌姿态。本质在解决注意力稀缺:与其说十句话,不如把一句话放大一百倍。

色彩纯黑纯白对撞,全页只允许一个高饱和 accent 色出现一次
排印clamp 出的巨型标题(可达 12rem)、900 字重、负字距,字即画面
布局极端留白,元素三五个,巨字常压边或出血制造张力
动效几乎静止,至多入场一次淡入或字距微调,以静制造威严

✓ 适用:时尚、建筑、作品集、设计机构落地页、奢侈品牌与编辑类站点

✗ 避免:电商目录、仪表盘、复杂表单、数据密集型应用与年长用户产品

PentagramBalenciaga 官网Awwwards 获奖作品集网站
品味要点字号要敢于越过“舒适区”:标题占屏一半以上才成立,配 -0.05em 紧字距和 900 字重;accent 色全页只出现一次(一个句号、一个词)。新手最常翻车:字大了但留白没跟上,或忍不住加第二种颜色和装饰线,瞬间退化成普通海报。判断标准:删掉任何一个元素页面就崩,才算减到位了。
用 ui-ux-pro-max 的 Exaggerated Minimalism 风格做一个页面

关键词:exaggerated minimalism, oversized typography, extreme negative space, black and white, single accent, dramatic contrast, bold statement

GSAP / SPLIT-TEXT — REEL 04
MOTION
type is the interface
SCROLL TO PLAY ↓

动态字体排印 Kinetic Typography

文字不是用来读的,是用来看的

通用风格
1950s 电影片头起源 · 2020s 借 GSAP 在 Web 复兴
展开详解

让文字本身成为动画主角:逐字入场、打字机效果、滚动触发的变形与渐变流动。血统可追溯到 1950 年代 Saul Bass 的电影片头设计,2020 年代借 GSAP、Framer Motion 和可变字体在 Web 全面复兴。流行因为短视频时代训练了用户“看字”而非“读字”的习惯。本质在解决静态文字传递不了的东西——节奏、语气和情绪。

色彩高对比底色配渐变文字填充,颜色为动效可读性服务
排印超大字号与可变字体,文字常被逐字拆分,字本身是唯一视觉主角
布局文字占据全屏中心,其余元素退场,滚动分章节触发
动效逐字入场、打字机 steps()、渐变流动、滚动触发变形——动效即内容

✓ 适用:Hero 首屏、营销网站、视频平台、品牌叙事与创意作品集落地页

✗ 避免:长文阅读、无障碍要求高的场景、数据界面、表单与年长用户产品

Spotify WrappedApple 产品发布页GSAP 官网 Showcase
品味要点动效要服务语义:让“关键词”动,而不是让所有字都动;一屏只保留一个动效焦点,时长 0.6-1s 配 cubic-bezier 缓动,并必须响应 prefers-reduced-motion 给静态回退。新手最常翻车:每行字都飞入,用户像在看弹幕;打字机效果用在长句上让人等得心焦。判断标准:把动画砍到只剩一处时,页面是否反而更有力。
用 ui-ux-pro-max 的 Kinetic Typography 风格做一个页面

关键词:kinetic typography, animated text, scroll-triggered reveal, typing effect, letter animation, morphing text, gradient text fill, hero text

CHAPTER 02 · THE ASCENT
Above the Cloudline
SCROLL ↓

视差叙事 Parallax Storytelling

把滚动条变成电影时间轴

通用风格
2012 · NYT《Snow Fall》确立滚动叙事范式
展开详解

用滚动驱动叙事:背景、中景、前景以不同速度移动,配合全屏章节与渐进披露,把网页变成一部可控速的电影。2012 年《纽约时报》的“Snow Fall”特稿确立了这一范式,此后成为品牌大片与数据新闻的标配。流行因为滚动是零学习成本的交互——人人都会,却能换来电影级沉浸。本质在解决长内容的注意力留存:让用户“走完”故事,而不是扫一眼就跳出。

色彩随叙事章节切换的情绪色板,常用自然色与大面积渐变铺陈氛围
排印章节式大标题配短句旁白,衬线体增添叙事感,文字随滚动渐显
布局全屏 100vh 章节相接,3-5 层背景以不同速度位移制造纵深
动效滚动驱动一切:视差位移、sticky 钉住、渐进披露,滚动条即时间轴

✓ 适用:品牌故事、产品发布、案例研究、年度报告与营销大片式 campaign 页

✗ 避免:电商、仪表盘、移动优先产品、SEO 关键页面与强无障碍要求场景

NYT《Snow Fall》Apple AirPods Pro 产品页The Pudding
品味要点层速差要拉开三档(背景 0.3 / 中景 0.6 / 前景 1.0),层数 3-5 层足够,每个章节只讲一件事。性能是生死线:只动 transform 和 opacity、加 will-change,移动端直接降级为普通滚动。新手最常翻车:为炫技堆视差导致文字读到一半就飘走,以及不给 reduced-motion 回退和跳过入口。
用 ui-ux-pro-max 的 Parallax Storytelling 风格做一个页面

关键词:parallax storytelling, scroll-driven narrative, layered backgrounds, cinematic transitions, progressive disclosure, full-screen chapters, depth perception

Form follows
the grid.

Zürich — Basel
Intl. Typographic Style
12 col · 8px base unit
Annual Report 2026 →

瑞士现代主义 2.0 Swiss Modernism 2.0

网格即法律,装饰是罪,留白是权力。

通用风格
1950s 瑞士国际主义 · 2020s 网页复兴
展开详解

把 1950 年代瑞士国际主义平面设计(Müller-Brockmann、Helvetica)搬进现代网页:严格 12 栏网格、数学化间距、黑白高对比加唯一强调色。它诞生于战后瑞士对'中立、理性、普世传达'的追求,2020 年代因设计系统与 Tailwind 的栅格思维而复兴。本质是在解决'信息如何不靠装饰、只靠秩序就能高效传达'的问题——层级全部由字号、字重和位置承担。

色彩黑白灰为绝对主体,仅允许一个高饱和强调色点睛,禁用渐变。
排印Helvetica/Inter 无衬线,靠字号字重拉开悬殊层级,常用负字距大标题。
布局严格 12 栏网格 + 8px 基础单位,不对称平衡,大量结构性留白。
动效几乎无动效,至多是克制的透明度与位移过渡,绝不抢戏。

✓ 适用:企业官网、建筑事务所、编辑/杂志类站点、SaaS、博物馆、专业服务、技术文档。

✗ 避免:玩乐型品牌、儿童网站、娱乐游戏、需要情绪化叙事的场景——理性气质会显得冷漠。

Vitsœ 官网瑞士国际航空(SWISS)Massimo Vignelli 的 NYC 地铁导视系统Vercel 官网
品味要点高级感全在'数学纪律':所有间距必须是 8px 的倍数,标题与正文字号比至少 3:1,强调色全站只许出现在一类元素上(如只用于链接或只用于一个色块)。新手最常翻车的是'白得没内容'——瑞士风的留白是网格切出来的负形,不是没东西可放;以及忍不住加第二个彩色,一加就破功。检验标准:删掉任何一个元素版面就失衡,才算合格。
用 ui-ux-pro-max 的 Swiss Modernism 2.0 风格做一个页面

关键词:swiss modernism, 12-column grid, helvetica, mathematical spacing, asymmetric balance, high contrast, single accent, minimal decoration

ORBITAL-OS // NAV.7
ALT 412.6 KM
VEL 7.66 K/S
INC 51.6°
98.4%CORE SYNC
PWR ▮▮▮▮▯ 82%
O2  ▮▮▮▯▯ 64%
SIG ▮▮▮▮▮ 100%
▲ PROXIMITY WARNING

科幻 HUD / FUI 界面 HUD / Sci-Fi FUI

把屏幕变成战斗机座舱,每个像素都在播报数据。

通用风格
2010s · 《钢铁侠》等电影 FUI 带火
展开详解

FUI(Fictional/Fantasy UI)源自科幻电影的全息界面道具:《少数派报告》《钢铁侠》JARVIS 让'细线 + 霓虹青 + 满屏数据'成为未来感的视觉代名词,Territory Studio 等工作室将其工业化。2010 年代游戏 HUD 与赛博朋克美学接力,把它带进真实产品。本质是在解决'如何让用户感觉自己在操控一台高精尖机器'——用信息密度和技术符号制造沉浸与权威感,哪怕大半装饰线并无功能。

色彩纯黑/深透明底上的霓虹青与全息蓝,红色只留给警报。
排印等宽科技字体,小字号、大字距、全大写,像终端读数。
布局细 1px 线框、角标括号、环形仪表与散布的数据角标,层层透明叠加。
动效扫描线、旋转环、闪烁警告标记、滚动 ticker——动效是这个风格的氧气。

✓ 适用:科幻游戏、航天/空间科技、网络安全产品、影视道具界面、沉浸式数据大屏。

✗ 避免:常规企业官网、长文阅读、需要无障碍达标的公共服务——细线和低对比是可访问性灾难。

《钢铁侠》JARVIS 界面(Cantina Creative 等制作)Territory Studio 的电影 FUI 作品SpaceX Dragon 飞船触屏 UI《赛博朋克 2077》游戏 HUD
品味要点高手的诀窍是'数据要可信':每个读数、坐标、百分比都编得像真的(带单位、会变化、互相呼应),观众一眼扫过就信了;装饰线要遵循同一套网格角度(如只用 0°/45°/90°)。新手翻车点:发光滥用——text-shadow 糊成一片就是廉价霓虹灯牌,记住 glow 半径别超过 8px、只给关键元素;以及满屏元素全在动,正确做法是 80% 静止、20% 缓动,警报才有资格闪。
用 ui-ux-pro-max 的 HUD / Sci-Fi FUI 风格做一个页面

关键词:sci-fi HUD, FUI, neon cyan, thin 1px lines, technical markers, monospace font, glow effects, dark transparency

PIXELQUEST  1UP 03
● 247
■■■□□

Village Elder

A NEW QUEST AWAITS, HERO.
PRESS START TO CONTINUE

A> OK

像素艺术 Pixel Art

用 8-bit 的硬件限制,换一整代人的乡愁。

通用风格
1980s 街机与红白机时代 · 持续复兴
展开详解

像素风诞生于 1980 年代街机和 NES 的硬件极限:低分辨率、有限调色板逼出了'每个像素都要省着用'的美学。当硬件不再受限,它反而升格为一种主动选择——独立游戏(《星露谷物语》《Celeste》)和 Web3 头像(CryptoPunks)让它成为'真诚、手作、反精致'的文化暗号。本质是在用刻意的低保真换取情感共鸣:限制即风格,怀旧即信任。

色彩NES 式有限调色板(高饱和原色 + 黑描边),靠抖动和色块做阴影。
排印像素字体(Press Start 2P 类),全大写、硬边缘、禁用抗锯齿。
布局块状对话框、粗黑边框 + 错位硬阴影模拟像素描边,元素对齐到像素网格。
动效逐帧精灵动画、闪烁光标、瞬间切换——绝不允许平滑缓动和淡入淡出。

✓ 适用:独立游戏、复古工具、创意作品集、怀旧营销活动、Web3/NFT 项目。

✗ 避免:专业企业站、现代 SaaS、高清摄影展示类网站——像素颗粒会拉低可信度和质感。

NES.css(开源像素 UI 库)《星露谷物语》《Celeste》itch.io 上的独立游戏页面
品味要点高级感的关键是'像素一致性':全站统一一个虚拟像素尺寸(如 4px),边框、阴影、字号、图标全部是它的整数倍,混用 1px 细线和 4px 像素边立刻穿帮。新手最大翻车点是平滑过渡——transition: ease 一出现像素魂就死了,所有动画必须用 steps();其次是调色板失控,严格限制在 8-16 色内,参考真实 NES/Game Boy 调色板而不是随手取色。
用 ui-ux-pro-max 的 Pixel Art 风格做一个页面

关键词:pixel art, 8-bit, retro gaming, pixelated font, limited palette, blocky UI, sharp edges, sprite animation

Everything app.

One modular workspace for notes, tasks and your team — organized in tidy boxes.

4.9★120k reviews
📦
Instant syncOffline-first, 60ms merge
Try Boxy freeGet started

便当盒网格 Bento Grids

像日式便当一样装信息:格子有大小,内容有主次。

通用风格
2020s · Apple 发布会 Keynote 与 Linear 带火
展开详解

得名于日式便当盒的分格收纳,由 Apple 发布会的功能总结页和 Linear、bento.me 等产品在 2022-2023 年带成全球默认风格。每个圆角卡片是一个独立信息单元,尺寸差异(1x1、2x1、2x2)天然编码了重要性层级。它流行是因为完美适配响应式重排和'扫一眼就懂'的注意力经济,本质是在解决'如何把一堆异构信息(数字、图标、文案、图表)塞进一屏还显得井井有条'。

色彩灰白底(#F5F5F7)+ 纯白卡片,色彩只在个别卡片内部爆发。
排印Inter/SF 类无衬线,卡片内大数字大标题、小注释,对比强烈。
布局CSS Grid 拼接不同跨度的圆角卡片(16-24px 圆角),等间隙、不等大小。
动效hover 轻微放大(1.02)与阴影扩展,布局重排平滑过渡。

✓ 适用:产品功能总览页、仪表盘、个人主页、营销摘要、作品/图片画廊。

✗ 避免:长文阅读、复杂数据表格、多步骤表单——内容被切碎反而妨碍线性任务。

Apple 产品功能页(iPhone/macOS 发布页)Linear 官网bento.meRaycast 官网
品味要点高级感来自'每格一个主角':一张卡片只许有一个视觉焦点(一个大数字、一个图标或一句话),内容多了就拆格子;卡片尺寸必须和信息重要性严格对应,最大的格子留给最想让人记住的事。新手翻车点:所有格子塞同样密度的内容,变成平庸的卡片列表;以及圆角、间距、阴影各卡不统一——bento 的整洁感全靠 gap 和 radius 全局一致,差 2px 都看得出来。
用 ui-ux-pro-max 的 Bento Grids 风格做一个页面

关键词:bento grid, modular cards, rounded corners, varied card sizes, apple-style, soft background, content-first, subtle shadow

Environments

Look to select · pinch to open

🌍
🎬
🎵
📷

空间界面(VisionOS 风格) Spatial UI (VisionOS)

界面不再贴在屏幕上,而是悬浮在你的房间里。

通用风格
2024 · Apple Vision Pro 开启空间计算时代
展开详解

2023 年 Apple 发布 Vision Pro,visionOS 确立了空间计算的视觉范式:磨砂玻璃窗口悬浮于真实环境之上,靠透明度和深度阴影与物理世界共存。它继承了 iOS 毛玻璃(Glassmorphism)血统,但加入了真正的 Z 轴——视差、动态光照、注视高亮。本质是在解决'界面叠在现实上时如何既可读又不遮挡世界':半透明让环境透过来,深度和发光告诉你哪一层是焦点。

色彩15-30% 透明度的白色玻璃为基底,鲜艳系统色只用于激活态。
排印SF/Inter 类无衬线,白字加微弱投影保证在任何背景上可读。
布局大圆角(24px+)悬浮窗口分层排布,圆形玻璃按钮,底部抓取条。
动效视差深度、注视 hover 放大、聚焦时平滑 scale,整体缓慢漂浮。

✓ 适用:空间计算/VR/AR 应用、沉浸式媒体、未来感仪表盘、概念展示。

✗ 避免:重文本文档、高对比度无障碍要求场景、不支持 3D/模糊渲染的低端设备。

Apple Vision Pro(visionOS)Meta Quest 的 Horizon OSMicrosoft HoloLens(Fluent Design 空间版)
品味要点高级感的核心是'深度纪律':全局只用 2-3 个深度层级,每层的模糊半径、阴影距离、缩放比例固定(如焦点层 scale 1.02 + 0 12px 36px 阴影),层级才立得起来。新手翻车点一是玻璃叠玻璃——两层半透明叠加后文字对比度崩盘,玻璃面板之下永远不要再放玻璃;二是忘了环境——纯白背景上的毛玻璃毫无意义,必须有彩色/有层次的底图让 blur 有东西可糊。
用 ui-ux-pro-max 的 Spatial UI (VisionOS) 风格做一个页面

关键词:visionOS, spatial UI, frosted glass, depth layers, translucent panels, floating windows, gaze hover, backdrop blur

The Slow ReaderChapter 4 · 12 min left

On the Quiet Pleasure
of Unhurried Pages

The screen holds still, like good paper should. No notification will find you here — reading is the last quiet room in a loud house, and we intend to keep it that way.

Page 87 of 214

电子墨水 / 纸感界面 E-Ink / Paper

把屏幕伪装成纸,把注意力还给文字。

通用风格
2020s 数字健康运动 · 源自 Kindle E-Ink 屏
展开详解

灵感来自 Kindle、reMarkable 等电子墨水设备的物理特性:哑光、无背光刺激、刷新即翻页。2020 年代'数字健康/慢科技'运动让这种美学溢出到普通屏幕——人们用米白底、墨黑字、零动画对抗信息过载。它流行是因为精准击中屏幕疲劳时代的反弹情绪,本质是在解决'如何让界面退场、让内容成为唯一主角':去掉一切会动、会发光、会打断的东西。

色彩米白纸底(#FDFBF7)配墨黑(#1A1A1A)单色系,唯一例外是荧光笔黄。
排印正文用衬线体(Georgia 类)优化长阅读,UI 标注用极小号无衬线。
布局单栏窄版心、宽行距、细 1px 分隔线,像装帧考究的书页。
动效原则上零动画:transition: none,翻页式硬切换,可加纸张噪点纹理。

✓ 适用:阅读类 App、数字报刊、极简日记、无干扰写作工具、慢生活品牌。

✗ 避免:游戏、视频平台、高能量营销页、重度依赖深色模式的应用——纸感天生属于亮色。

Kindle 阅读界面reMarkable 墨水屏平板iA WriterDaylight Computer
品味要点高级感藏在'纸的物理细节'里:底色绝不用纯白而是带暖调的 #FDFBF7,黑也不用纯黑而是 #1A1A1A,再叠一层 1-2% 透明度的噪点纹理,质感立刻从'没做完'变成'有意为之'。新手翻车点:忍不住加淡入淡出——哪怕 0.2s 的 fade 都会破坏'纸是瞬间翻过去的'物理直觉;以及行长失控,正文每行控制在 60-75 字符,行距 1.6 以上,否则'阅读优先'就是空话。
用 ui-ux-pro-max 的 E-Ink / Paper 风格做一个页面

关键词:e-ink, paper texture, high contrast monochrome, serif reading, no animation, distraction-free, calm minimal, off-white

★ NEW DROP ★ NO RULES ★ CLICK EVERYTHING ★ UR FAVE SITE ★ NEW DROP ★ NO RULES ★ CLICK EVERYTHING ★ UR FAVE SITE ★
Chaos
is the
Brand
100% RAW ✨
as seen on ur fyp
Buy it loud →

Z 世代混乱 / 极繁主义 Gen Z Chaos / Maximalism

故意丑给你看:混乱是真诚,精致才可疑。

通用风格
2023+ · 互联网原生文化,反精致设计浪潮
展开详解

诞生于 2023 年后的互联网原生文化:在千篇一律的'干净 SaaS 风'统治十年后,Z 世代用撞色、贴纸、拼贴和故意的粗糙宣告反叛,血统可追溯到 MySpace 个人页、Tumblr 美学和 Y2K 复古。MSCHF 的恶搞营销和 Charli XCX《brat》的廉价绿封面把它推上主流。本质是在解决'信息过载时代如何被记住'——精致会被划走,冒犯性的视觉噪音反而换来停留和转发。

色彩高饱和原色直接对撞(洋红×荧光绿×纯蓝×亮黄),故意不和谐。
排印多字体混排(衬线斜体怼无衬线粗体怼等宽),全大写、描边、硬投影。
布局拼贴式随机摆放,元素旋转重叠、z-index 混战,像贴满贴纸的笔记本。
动效marquee 滚动、抖动 jitter、闪烁、GIF 轰炸——越躁越对味。

✓ 适用:Z 世代生活方式品牌、音乐人主页、创意作品集、病毒式营销活动、潮流时尚。

✗ 避免:企业、政府、医疗、金融等严肃场景——混乱在这里等于不专业和不可信。

MSCHFCharli XCX《brat》专辑视觉Heaven by Marc Jacobs音乐节/潮牌 campaign 页
品味要点高手的混乱是'编排出来的失控':先用正常网格搭好信息层级,再逐个元素加旋转和错位——CTA 按钮和价格必须在 3 秒内能找到,找不到就不是风格而是事故。新手翻车点:把'随便放'当风格,结果只是难用;以及配色超过 4-5 个荧光色后变成纯噪音——撞色要成对设计(洋红配荧光绿、蓝配黄),抖动动画频率控制在 0.3s 以上,不然用户生理性头晕直接关页。
用 ui-ux-pro-max 的 Gen Z Chaos / Maximalism 风格做一个页面

关键词:gen z chaos, maximalism, clashing brights, sticker collage, marquee, jitter, raw unpolished, internet core

ORGANIC 2.0
Interfaces that breathe

Generative cells grow with your data — alive, fluid, bioluminescent.

Grow a system

生物拟态 / 有机设计 2.0 Biomimetic / Organic 2.0

让界面像细胞一样呼吸、生长

通用风格
2024+ · 生成式设计浪潮
展开详解

生物拟态把细胞、菌丝、流体等自然形态与生成算法结合,让界面元素呈现“活物”般的呼吸与形变。它的源头是 Processing 一代的生成艺术,2024 年后 WebGL、着色器工具和物理动效库平民化,Refik Anadol 等人的数据艺术又把这套语言推向大众视野。它流行的原因是 AI 时代千篇一律的“干净 SaaS 风”让人审美疲劳,有机的不规则反而成了稀缺品。本质上它在解决数字界面“死板无生命感”的问题——用呼吸节律和自然算法与用户建立情绪连接。

色彩深海暗底上点亮生物荧光——荧光青、叶绿素绿、细胞粉,像深海发光生物。
排印干净的现代几何无衬线,用字形的克制反衬形体的有机流动。
布局打破刚性网格,细胞状有机形体作为视觉锚点自由漂浮分布。
动效呼吸式缩放加 border-radius 形态渐变(morph),物理感缓动让元素像活物。

✓ 适用:可持续科技、生物科技、前沿健康、冥想类产品、生成艺术平台

✗ 避免:标准 SaaS、数据表格密集型产品、严肃企业官网、财务会计软件

Refik Anadol StudioteamLab 官网Headspace 呼吸练习界面生物科技品牌官网
品味要点高手会统一全站的“生命节律”:所有呼吸动效共享同一个时长变量(如 4s)和缓动曲线,画面才像一个有机体而不是一锅沸水;有机形体只做 1-2 个视觉焦点,其余界面保持安静秩序。新手最常见的翻车是到处都在蠕动、blob 上堆饱和彩虹渐变,三秒就让人晕;另一个硬伤是忘了 prefers-reduced-motion 降级和 Canvas/WebGL 的性能监控,低端机直接卡死。
用 ui-ux-pro-max 的 Biomimetic / Organic 2.0 风格做一个页面

关键词:biomimetic organic, cellular fluid shapes, breathing animation, generative patterns, bioluminescent colors, physics-based movement, flowing gradients

Made by hand,

// not by machines — zine no.14, spring issue

Sketchbookraw scans, pencil grids, taped notes
Processunfinished on purpose
100% HUMAN

反精致 / 原始手作美学 Anti-Polish / Raw Aesthetic

用手作的粗糙对抗 AI 的光滑

通用风格
2025+ · Anti-Digital 反数字化思潮
展开详解

反精致美学把扫描纸纹、铅笔线稿、胶带贴纸、刻意未完成的痕迹搬进数字界面,宣告“这里有真人”。它的血统来自朋克 zine 和 DIY 拼贴文化,Gumroad 2021 年的手绘风改版是早期信号,2025 年前后随着 AI 生成内容泛滥成灾,这种“不完美”作为反弹全面复兴。它流行的根本原因是信任稀缺:当完美变得廉价,粗糙反而成了真实性的证明。本质上它在解决品牌的人格化问题——用人的笔触替代机器的光滑。

色彩纸白、铅笔灰、马克黑加牛皮纸棕,全部取自真实文具与纸张材料。
排印衬线标题混等宽“批注”,配合轻微旋转,像手工拼贴的杂志版面。
布局刻意歪斜的卡片、胶带与图钉式叠放,秩序藏在松散表象之下。
动效拒绝平滑过渡,用 steps() 跳帧抖动和手绘逐帧感替代标准缓动。

✓ 适用:创意作品集、艺术家网站、独立品牌、手工产品、真实感叙事与编辑类站点

✗ 避免:企业级软件、金融科技、医疗、政府类站点、追求精致感的 SaaS

Gumroad(2021 改版)tldrawMailchimp 手绘插画系统独立杂志与艺术家个人站
品味要点粗糙必须是设计出来的:高手底层保持精确的网格和排印层级,只在纹理、边框、旋转角度这“表皮层”失控——旋转控制在 ±3° 以内、纹理透明度不超过 0.3,秩序加手感才显高级。新手最常见的翻车是把信息层级也做乱:标题正文一起歪、真手写字体堆满全页,结果像小学生海报而不是 indie 杂志。判断标准:眯起眼看,版面结构应该依然清晰。
用 ui-ux-pro-max 的 Anti-Polish / Raw Aesthetic 风格做一个页面

关键词:anti-polish raw, hand-drawn elements, scanned paper texture, collage style, sketch marks, tape sticker overlays, authentic imperfection

CHROME · CLAY · JELLY
Buttons you can squish
Press me Bounce back

spring(stiffness:300, damping:20) — feels like touch

触感数字 / 可形变 UI Tactile Digital / Deformable UI

按得下去、弹得回来的果冻界面

通用风格
2025+ · 触觉时代(Tactile Era)
展开详解

可形变 UI 让按钮像果冻和黏土一样被按扁、再带着过冲弹回来,用视觉形变模拟物理手感。它承接的是拟物化时代留下的触觉记忆,而 react-spring、Framer Motion 等弹簧物理库的成熟让“真实的物理响应”在工程上变得廉价可行,Duolingo 等消费产品把这种 squishy 手感带成了潮流。它流行是因为扁平化十年后界面普遍“没有手感”。本质上它在补偿触摸屏失去的物理反馈——让每次点击都有确认感和愉悦感。

色彩果冻粉、奶油蓝配铬银渐变,高光与 inset 阴影并存以塑造材质厚度。
排印圆润粗壮的无衬线,与可挤压的形体气质保持一致。
布局大圆角胶囊与卡片为主,元素间留足空隙给形变动作发挥。
动效按压挤扁、过冲回弹的弹簧物理曲线,inset 阴影模拟按入深度。

✓ 适用:现代移动 App、玩心品牌、娱乐与游戏 UI、消费级产品、互动 Demo

✗ 避免:企业软件、数据仪表盘、无障碍优先场景、严肃专业工具

DuolingoNintendo 官网Framer / react-spring 社区交互 Demo
品味要点物理参数要符合直觉才高级:按压缩放控制在 0.95 左右、回弹用 cubic-bezier(0.34,1.56,0.64,1) 这类单次过冲曲线,弹一下就停——震荡超过两次立刻显廉价。形变只给可交互元素,静态卡片别跟着抖,触觉语言才有意义。新手翻车点:spring damping 调太低让按钮晃个不停、全屏都 QQ 弹弹失去焦点,以及忘了 prefers-reduced-motion 开关——这是动效敏感用户的硬需求。
用 ui-ux-pro-max 的 Tactile Digital / Deformable UI 风格做一个页面

关键词:tactile deformable UI, jelly squishy buttons, press deformation, bounce-back spring physics, chrome clay materials, haptic-like feedback

TERRA STUDIO
Warmth, distilled from earth

Terracotta, sand and olive — slow objects for calm rooms, fired by hand.

Shop the kiln

自然萃取 / 大地色系 Nature Distilled

把陶土与砂砾的温度搬进屏幕

通用风格
2025+ · 手作温暖(Handmade Warmth)
展开详解

自然萃取用 terracotta、砂米、橄榄绿、奶油白构成低饱和大地色系,搭配颗粒纹理与有机几何,传递木、土、布的材料温度。它的审美源流是 Kinfolk 式慢生活编辑美学与 Aesop 等品牌几十年的极简自然实践,2025 年前后随可持续消费浪潮成为康养、手作品牌的数字化标配。它流行是因为高饱和科技配色看腻之后,“温暖的克制”反而稀缺。本质上它在用材料的温度对冲数字产品的冰冷,传达手作、环保、值得信赖的品牌人格。

色彩陶土橙、砂米、橄榄绿、奶油白的低饱和大地色系,全图统一暖色温。
排印人文衬线大标题配人文无衬线正文,传递编辑感与手作气质。
布局大留白加拱门形、卵石形等有机几何,构图安静克制。
动效几乎静止——只有 ease-out 微视差、柔和阴影与细腻的悬停过渡。

✓ 适用:康养品牌、可持续产品、手工艺品、有机食品、美容 SPA、家居家具

✗ 避免:科技初创、游戏、夜生活、企业金融等高能量或冷峻调性的品牌

AesopAllbirdsKinfolk高端民宿与家居品牌官网
品味要点高级感来自“低饱和加微差”:高手在同一色相里拉出 3-4 档明度层次,而不是把陶土、橄榄、棕全部平铺;留白给足、所有图片统一调成同一暖色温,整页才像一块完整的材料。新手翻车点:terracotta 配纯黑文字加生硬投影瞬间出戏——文字应该用深棕(如 #5A4632);颗粒纹理 opacity 超过 0.15 就显脏;以及误以为“加了棕色就是自然”,结果做成 2010 年的企业棕。
用 ui-ux-pro-max 的 Nature Distilled 风格做一个页面

关键词:nature distilled, muted earthy terracotta, organic materials, handmade warmth, natural textures, artisan quality, soft gradients

CURSOR®WORK — ABOUT
Point. Play.
Feel.
VIEW WORK
cursor:none · blend:difference · magnetic

交互式光标设计 Interactive Cursor Design

光标不再是箭头,而是表演者

通用风格
2025+ · 创意机构交互浪潮(源流可溯至 2010s 末 Awwwards 系)
展开详解

交互式光标把鼠标指针本身变成设计对象:自定义形状、hover 时放大变形、磁吸到按钮上、拖出残影轨迹、用 mix-blend-mode 反色穿过内容。它发端于 2010 年代末 Cuberto、Locomotive 等创意机构在 Awwwards 上的军备竞赛,GSAP 与 Framer Motion 的普及让这套手法在 2025 年沉淀为成体系的交互语言。它流行是因为作品集网站需要在 10 秒内证明自己“会做交互”。本质上它把被动浏览变成主动把玩,用微交互延长停留时间与记忆点。

色彩高对比黑白为主,光标与强调元素用一记亮色,确保指针在任何背景上可见。
排印超大号紧字距的展示型无衬线,为光标提供表演舞台。
布局大面积留白的极简画布,可交互元素稀疏分布,制造磁吸的节奏感。
动效光标 lerp 滞后跟随、hover 放大变形、磁吸吸附、blend mode 反色与拖尾。

✓ 适用:创意作品集、互动体验站、设计机构官网、产品展示、游戏与娱乐

✗ 避免:移动优先产品(无光标)、无障碍关键场景、数据密集仪表盘、表单流程

CubertoLocomotiveActive TheoryAwwwards 获奖机构站
品味要点光标永远是配角:默认态做小(20px 以内),只在悬停可交互元素时放大或变形,让形变本身成为 affordance 信号;磁吸位移别超过目标尺寸的 20%,跟随 lerp 系数取 0.1-0.2,才有“有重量”的高级感。新手翻车点:默认就一个大圆球挡内容、拖尾十几个节点像彗星刷屏;最致命的是忘了 touch 设备 fallback——检测不到鼠标时必须无痕降级回系统光标和原生交互。
用 ui-ux-pro-max 的 Interactive Cursor Design 风格做一个页面

关键词:interactive custom cursor, cursor morphing hover, magnetic cursor pull, cursor trails, blend mode cursor, click feedback

LISTENING
“Hey Aria, dim the lights to 30%”

语音优先多模态 Voice-First Multimodal

先开口说话,界面退到幕后

通用风格
2025+ · 语音交互时代(Voice Era)
展开详解

语音优先把麦克风作为第一输入通道,屏幕退化为状态反馈层:波形可视化、聆听脉冲、说话动画构成全部视觉语言。它建立在 Siri、Alexa 十余年的语音助手积累之上,2024-2025 年 LLM 实时语音(如 ChatGPT 高级语音模式)让对话式交互第一次真正流畅可用,设计范式随之转向。它流行是因为车载、厨房、智能家居等“手眼被占用”场景爆发。本质上它在解决免手操作的交互问题,并与无障碍设计天然同构——视觉做减法,状态可见性做加法。

色彩低刺激的柔白与灰蓝紫打底,状态色(聆听蓝、说话绿)做唯一强调。
排印中性人文无衬线、大字号高可读,文字只承担状态提示与语音转写。
布局单焦点居中构图:一颗语音球加波形,屏幕元素压到最少。
动效聆听态脉冲扩散环、波形条逐根起伏、处理与说话态间平滑切换。

✓ 适用:语音助手、无障碍应用、免手操作工具、智能家居、车载 UI、烹饪类 App

✗ 避免:视觉密集内容、大量数据录入、复杂表单、嘈杂环境下使用的产品

SiriChatGPT 语音模式Google AssistantAmazon Alexa App
品味要点状态可见性是这个范式的命门:listening、processing、speaking 三态必须一眼可分,而且要颜色加动效双编码——只靠颜色,色弱用户和余光场景都会失效。任何超过 300ms 的延迟都要给“处理中”反馈,否则用户不知道该继续说还是该等。新手翻车点:波形做得很炫但三个状态全是同色脉冲,等于没设计;以及忘了给语音失败兜底的可视化 fallback UI——语音永远要有 Plan B。
用 ui-ux-pro-max 的 Voice-First Multimodal 风格做一个页面

关键词:voice-first multimodal, voice waveform visualization, listening state indicator, speaking animation, minimal UI, ambient design, conversational flow

360°
Orbit Speaker S1
$129 · in stock
⟳ drag to rotate · pinch to zoom View in AR

3D 产品预览 3D Product Preview

让用户下单前先把产品转个遍

通用风格
2025+ · 电商 3D 化浪潮
展开详解

3D 产品预览把 360° 旋转、捏合缩放、材质切换和 AR 试摆直接嵌进电商详情页,让用户像在店里一样把玩商品。它的源头是汽车行业十几年的在线配置器实践(保时捷等),Google 的 model-viewer、Three.js 生态与手机端 AR 能力把技术门槛拉低后,2025 年成为家具、时尚、电子产品电商的标配。它流行的直接动力是转化率数据:能交互的商品页退货率更低、加购率更高。本质上它在压缩“看不到实物”带来的决策不确定性。

色彩中性灰白摄影棚式背景把色彩话语权让给产品,热点与 CTA 用一点品牌蓝。
排印克制的功能性无衬线,价格与操作提示小而清晰,不抢产品风头。
布局产品居中的舞台式构图,控件(色板、AR 按钮、操作提示)贴边环绕。
动效360° 匀速自转、拖拽带惯性、热点呼吸脉冲与材质切换的平滑过渡。

✓ 适用:电商详情页、家具、时尚、汽车、电子产品、珠宝及各类产品配置器

✗ 避免:内容型网站、博客、仪表盘、低带宽环境、无障碍关键场景

Apple 产品页(AirPods 等)Nike By You 配置器IKEA AR 试摆Porsche Car Configurator
品味要点转化率来自加载速度而不是模型精度:高手把模型压到 2MB 以内(Draco/meshopt 压缩)、先出海报图占位、首帧 3 秒内渲染,光照用中性 HDRI 环境光并让阴影落地——产品“站得住”才显贵。自动旋转要慢(每圈 7 秒以上)且用户一碰即停。新手翻车点:20MB 模型转圈半天用户早已离开;旋转没有阻尼惯性像幻灯片;以及忘了给键盘操作和读屏用户提供产品图集替代内容。
用 ui-ux-pro-max 的 3D Product Preview 风格做一个页面

关键词:3D product preview, 360 rotation, drag-to-spin, AR preview, material color switcher, hotspot annotations, orbit controls

PRISMA

Sound, color and motion — woven together
Enter the Flow

网格渐变 / 极光进化 Gradient Mesh / Aurora Evolved

把北极光装进首屏的氛围制造机

通用风格
2025+ · 渐变美学的进化形态
展开详解

网格渐变源自矢量软件里的 gradient mesh 工具:多个色彩锚点之间做平滑插值,生成比双色线性渐变复杂得多的流动色场。Stripe 的官网渐变和 Apple 的系统壁纸把它带入主流,2025 年后随着 CSS/SVG/Canvas 能力增强,进一步演化为缓慢流动的'极光'背景。它流行的原因很直接:不用一张摄影素材,就能制造昂贵的情绪氛围。本质上它解决的是'品牌想要高级感和情绪温度,但又不想被具体图像锁死'的问题。

色彩青、品红、黄、蓝、绿等多个高饱和锚点在网格间平滑过渡,靠混色产生虹彩与全息感。
排印几何无衬线为主,标题常用渐变填充或半透明白字,字形越简洁越能衬托背景的复杂。
布局渐变作为全屏背景层,内容居中悬浮其上,层级靠玻璃面板和模糊来区分。
动效色块缓慢漂移、hue-rotate 微转、流光循环,周期拉长到 8 至 15 秒才有呼吸感。

✓ 适用:Hero 首屏、品牌官网背景、音乐/时尚/生活方式等创意品牌、高端产品发布页

✗ 避免:数据密集界面、长文阅读场景、无障碍要求严苛的产品、保守行业品牌

Stripe 官网渐变Apple macOS 壁纸系Instagram 品牌渐变Raycast 官网
品味要点高手把渐变当'背景音'而不是主唱:内容区域压暗或垫一层玻璃面板,保证正文对比度不低于 4.5:1;动画周期拉到 10 秒级,慢到几乎察觉不到才显贵。新手最常见的翻车点是色彩锚点超过 4 个变成调色盘打翻、动画 2 秒一循环像横幅广告,以及白色细字直接压在亮黄色区域上糊成一片。
用 ui-ux-pro-max 的 Gradient Mesh / Aurora Evolved 风格做一个页面

关键词:mesh gradient, aurora effect, flowing color transitions, iridescent overlay, holographic shimmer, prismatic, color morphing

VOL.42 — JUNE 2026

Print Never Died, It Moved to Screens

When the grid holds, every column earns its keep. Editors borrowed a century of typographic craft and gave the endless scroll a spine, a rhythm, and a reason to keep reading past the fold.

PHOTO — M. HALVORSEN
“White space is the loudest voice on the page.”

编辑网格 / 杂志风 Editorial Grid / Magazine

把一百年的印刷排版功力搬上屏幕

通用风格
2020s · 印刷编辑传统的数字化
展开详解

这套风格直接继承自二十世纪的瑞士网格系统和杂志艺术指导传统——Vogue 的版式、报纸的多栏文字、首字下沉与引语拉出,都是印刷时代锤炼出的阅读节奏工具。数字端由《纽约时报》的专题报道和 Medium 等长文平台发扬光大。它在内容为王的时代重新流行,因为编辑级排版直接等于可信度和阅读完成率。本质上它解决的是'长文如何让人愿意读完'这个最古老的设计问题。

色彩黑白高对比打底,仅留一个品牌色做引语、链接和分割线点缀,克制到近乎禁欲。
排印衬线正文配粗壮无衬线或大号衬线标题,首字下沉、引语拉出、署名行齐备,层级如印刷品般严格。
布局不对称网格加多栏文字,大图占据跨栏位置,留白本身就是版面元素。
动效滚动渐显、图片视差等轻量动效,永远为阅读服务而非抢戏。

✓ 适用:新闻媒体、博客、数字杂志、长文报道、出版与新闻类产品

✗ 避免:仪表盘、工具型 App、电商目录、实时数据界面、短内容流

The New York Times 专题页MediumThe Verge 长文报道Kinfolk 杂志官网
品味要点高级感来自克制的字体表加严格的基线网格:正文一种衬线、标题一种字体就够,行长锁在 60 到 75 字符;不对称必须是'有秩序的不对称'——列宽来自同一套网格,而不是随手拖出来的。新手最常翻车在三处:什么都居中对齐、引语字号和正文拉不开差距(至少 1.5 倍才有杂志味)、舍不得留白把版面塞满。
用 ui-ux-pro-max 的 Editorial Grid / Magazine 风格做一个页面

关键词:editorial magazine layout, asymmetric grid, pull quotes, drop caps, multi-column text, bylines, print-inspired typography

REC ● 00:03:17
NULL//SIGNAL
TRANSMISSION CORRUPTED
PRESS PLAY

色差故障 / RGB 分离 Chromatic Aberration / RGB Split

故意坏掉的屏幕才是态度

通用风格
2020s · 复古科技与 Glitch 美学
展开详解

色差本是镜头和 CRT 显示器的光学缺陷——红绿蓝三个色彩通道没对齐产生的彩边。VHS 录像带的追踪错误、信号噪点这些'模拟时代的故障',先被 glitch art 和蒸汽波亚文化美学化,再经赛博朋克游戏视觉和电子音乐演出包装进入主流。它流行是因为在过度精致的数字界面里,'受控的错误'反而传递出危险感、能量和亚文化身份。本质上它解决的是'如何让品牌看起来不乖'。

色彩纯黑底上叠纯红、纯绿、纯蓝的通道偏移,辅以荧光绿扫描线和噪点,色彩即信号本身。
排印等宽字体和工业感无衬线为主,文字自带 RGB 错位投影,常配终端式全大写标签。
布局构图可以常规,但叠加扫描线、噪点层和故障元素,营造'屏幕本身出了问题'的错觉。
动效故障是间歇性发作的:偏移量随机跳变、扫描条滚动、噪点闪烁,用 steps() 制造硬切。

✓ 适用:音乐平台、游戏、科技品牌、创意作品集、夜店演出与娱乐视频类产品

✗ 避免:企业官网、医疗健康、金融、无障碍要求高的产品、面向年长用户的界面

Cyberpunk 2077 品牌视觉Watch Dogs 系列 UI电音厂牌与演出视觉glitch 风创意作品集
品味要点故障要'间歇发作'而非持续抖动:用 steps() 动画让 RGB 偏移在 3 到 5 秒周期里只爆发 0.2 秒,平时维持 2px 以内的静态彩边保证可读,关键交互节点才触发大故障。新手翻车点:全页面持续高频抖动(又晕又掉帧)、正文也加偏移导致不可读、忘记给 prefers-reduced-motion 用户提供降级——这个风格是少数真的会引起生理不适的,节制即品味。
用 ui-ux-pro-max 的 Chromatic Aberration / RGB Split 风格做一个页面

关键词:chromatic aberration, RGB split, glitch aesthetic, VHS error, scan lines, noise overlay, retro tech

summer ’79
the old cafe
roadtrip
DARKROOM DIARIES
35MM · DEVELOPED WITH LOVE

复古胶片 / 模拟怀旧 Vintage Analog / Retro Film

用噪点和漏光贩卖时间的质感

通用风格
1970s-90s 模拟介质 · 2010s 数字复兴
展开详解

这个风格的全部语汇都来自模拟介质的物理特性:胶片的颗粒、宝丽来的相纸边框、VHS 的追踪条纹、暗房漏光的橙色光晕——它们本是技术缺陷。2010 年 Instagram 的早期滤镜把这些缺陷变成大众审美,黑胶与胶片复兴运动又把它延续成一种持续的文化消费。它流行的深层原因是数字时代的完美无瑕反而显得廉价,'不完美'成了稀缺的真实感。本质上它在为品牌注入时间纵深和情绪记忆。

色彩褪色奶油、暖棕褐、灰青、灰粉等低饱和暖调,像放了四十年的相纸。
排印衬线体与手写感字体为主,常配打字机式等宽字体做日期和编号标注。
布局宝丽来相框、相册式散落旋转、纸张质感的卡片,构图刻意带一点手工的不齐。
动效胶片颗粒微闪、漏光呼吸、淡入转场,节奏舒缓如老式幻灯机。

✓ 适用:摄影作品集、音乐与黑胶品牌、复古时装、怀旧营销活动、电影行业、咖啡馆

✗ 避免:现代科技产品、SaaS 工具、医疗健康、儿童应用、企业级软件

Instagram 早期滤镜Kodak 品牌站Urban Outfitters独立咖啡馆与黑胶品牌官网
品味要点关键是'做旧要有出处':先选定一种介质——宝丽来、35mm 胶片或 VHS——然后只贯彻它的物理特征,颗粒透明度压在 0.1 到 0.2,漏光只出现在一个角落。新手最常见的翻车是滤镜大杂烩:sepia、噪点、漏光、相框、做旧纸纹全部叠在一起,像滤镜 App 的展示页。另一个铁律:做旧只作用于图像和装饰层,正文文字必须保持干净的对比度,否则怀旧变成看不清。
用 ui-ux-pro-max 的 Vintage Analog / Retro Film 风格做一个页面

关键词:vintage analog film, film grain, faded colors, warm sepia, light leaks, polaroid frame, VHS tracking

WERK·25
Form Folgt Funktion
Lektion 01 / Geometrie
Start →

包豪斯 Bauhaus

一百年前的设计学校至今仍在发号施令

移动端
1919 · 德国包豪斯学院
展开详解

1919 年格罗皮乌斯在魏玛创立包豪斯学院,确立了'形式追随功能'的现代主义信条:几何基本形、红黄蓝三原色、无衬线字体,这套语言至今是平面与产品设计的源代码。移动端复兴版把它翻译成可触摸的界面——硬边偏移阴影、2px 黑描边、机械按压反馈,零渐变零柔和。它在当下流行,恰恰因为圆角卡片和柔和渐变已泛滥成 App 的默认长相,几何硬朗反而成了最强个性。本质上它用最少的形式元素表达最大的功能秩序。

色彩红黄蓝三原色做色块,米白画布加纯黑描边,禁止渐变和中间色。
排印几何无衬线大写粗体(900 字重),标题巨大、字距收紧,像构成主义海报。
布局圆与方两种几何形构成一切,单列垂直堆叠,每个元素都带黑描边和 4px 硬偏移阴影。
动效拒绝平滑过渡:按下时元素位移 2px 且阴影消失,0 毫秒瞬时切换,像机械按键。

✓ 适用:需要强烈个性的移动端 App、onboarding 流程、品牌先行的产品页、手作与设计品牌、编辑型移动体验

✗ 避免:企业仪表盘、数据密集界面、无障碍要求严苛的场景、保守行业

包豪斯档案馆 bauhaus.deFigma 品牌插画语言设计师作品集 App美术馆与展览类 App
品味要点精髓在'系统的严格':只允许圆和方两种几何形,三原色只做小面积色块不做大背景,硬阴影必须是 0 模糊的纯黑偏移且全站统一 4px——任何一处松动整套语言就垮。按下状态要有 translate 2px 加阴影消失的机械感,这是它和普通扁平风的分水岭。新手翻车点:偷偷加 8px 圆角卡片和柔和投影(立刻退化成普通 Material)、大面积纯黄背景刺眼、黄色块上放白字看不清。
用 ui-ux-pro-max 的 Bauhaus 风格做一个页面

关键词:bauhaus, geometric shapes, primary color blocking, hard offset shadows, bold uppercase headlines, mechanical press, no gradients

MENUNO.07
VOID
ISSUE
Tailored Coat£1,240
Wool Trouser£420
Silk Scarf£180
VIEW ARCHIVE

极简黑白 / 单色主义 Minimalist Monochrome

只剩黑白二色,排版即一切

移动端
2020s · 编辑级移动端黑白
展开详解

它承袭两条血脉:高级时装屋(Comme des Garçons、Yohji Yamamoto、Acne)的黑白平面传统,和瑞士排版的网格纪律。2020 年代被奢侈品电商和编辑类 App 移植到移动端,形成一套'口袋编辑'语言——零圆角、零阴影、纯黑白,层级全靠字号对比、衬线与等宽字体的并置、粗黑分割线和黑白瞬时反转来完成。它流行因为当所有 App 都圆润讨好时,冷硬的纪律感本身就是奢侈。本质:用极端限制换取极端辨识度,这是对排版功力的裸考。

色彩纯黑加纯白,灰色只许出现在发丝分割线和次要标注上,多一个彩色都算违规。
排印大号衬线标题顶满屏宽、衬线正文、等宽字体做标签价格,三种字体各司其职,字号差要悬殊。
布局零圆角零阴影的严格 2D,分割线分级(1px、2px、4px)构建隐形层级,列表用黑线切分。
动效点按瞬时黑白反转(零过渡时间),页面硬边滑入,没有任何缓动讨好。

✓ 适用:奢侈时装移动电商、编辑出版类 App、高端作品集、先锋实验品牌、数字展览

✗ 避免:娱乐产品、色彩驱动的品牌、亲和力优先的消费类 App、任何需要视觉温度的场景

SSENSEAcne StudiosThe Row 官网Comme des Garçons
品味要点高级感的来源是'硬':零圆角、零阴影、零过渡动画必须执行到每一个元素(包括弹窗),点按状态用瞬时黑白反转代替透明度变暗;分割线要分级使用——1px 发丝线分条目、4px 粗黑线分区块,这就是你的全部层级工具。新手翻车点:忍不住加一点灰色阴影或 8px 圆角(整套语言瞬间崩塌)、衬线标题不敢放大到顶满屏宽、把极简误解为内容少而不是规则严。用文字 MENU 代替汉堡图标,是这个风格的接头暗号。
用 ui-ux-pro-max 的 Minimalist Monochrome 风格做一个页面

关键词:minimalist monochrome, black white only, zero border-radius, no shadows, typography-first, instant inversion, serif hero

NOCTISPRO
$48,210
Portfolio · +6.4%
Trade Now

影院级暗黑 / 电影感深色 Modern Dark (Cinema Mobile)

不是夜间模式,是把 App 拍成电影

移动端
2020s · Linear/Vercel 暗色美学移动化
展开详解

由 Linear、Vercel、Arc 等开发者工具确立的'深空加辉光'美学,在移动端结合 OLED 屏幕特性与 iOS 的毛玻璃传统,演化成影院级暗黑:接近纯黑(但绝不是纯黑)的渐变底、缓慢漂移的环境光斑、毛玻璃导航栏、与触觉反馈联动的按压动效。它流行的背景是暗色模式已从省电功能升格为'专业工具'的身份标签——深色等于认真、等于 pro。本质上它用光线氛围而非色彩装饰来营造沉浸感和高端感。

色彩从 #0a0a0f 到 #020203 的深空渐变打底,靛蓝紫做唯一强调色,辉光透明度压在 0.2 以下。
排印Inter 一族打天下:700 字重标题、400 正文,数字大卡用紧字距,全靠字重和灰度分层。
布局16px 圆角卡片配 rgba 白色发丝边框,毛玻璃头部与底栏,环境光斑垫在内容层之下。
动效Expo.out 贝塞尔缓动、弹簧弹窗、按压缩放 0.97 并联动触觉反馈,光斑以分钟级周期缓慢漂移。

✓ 适用:开发者工具、专业生产力 App、金融交易仪表盘、流媒体平台、AI 工具界面、高端游戏伴侣应用

✗ 避免:需要温暖感的消费类应用、儿童产品、暗色显得冰冷的医疗场景、要求极高对比度的无障碍场景

LinearArc BrowserRaycastVercel Dashboard
品味要点记住三条铁律:永远不用纯 #000000(OLED 拖影且画面死板),用 #020203 到 #0a0a0f 的渐变;边框一律 rgba 白色透明(0.06 到 0.1)的发丝线,绝不用实色灰——这是廉价暗色和影院暗色的分界线;辉光只给唯一的主操作,accent 透明度压在 0.2 以下。新手翻车点:到处加 glow 直接变赛博朋克、毛玻璃图层叠太多帧率崩盘、灰色文字一路调暗到 WCAG AA 都不过。
用 ui-ux-pro-max 的 Modern Dark (Cinema Mobile) 风格做一个页面

关键词:cinematic dark, linear gradient background, ambient light blobs, glassmorphism blur, hairline borders, accent glow, haptic press

LIVE SYNC

Revenue up 24%

Acme dashboards refresh in real time.

$48.2K
MRR · APR
Open Report
+

精品高科技 SaaS 移动端 SaaS Mobile (High-Tech Boutique)

电蓝渐变加弹簧动效,B2B 工具的精品店质感

移动端
2020s · SaaS 移动端精品化浪潮
展开详解

为 B2B SaaS 移动端量身定制的『精品店』配方:暖白画布、细边白卡、电蓝渐变按钮加全局弹簧动效。它脱胎于 2020s Linear、Mercury 等新一代 SaaS 把『工具做出奢侈品手感』的风潮,电蓝 #0052FF 正是 Coinbase 们确立的金融科技信任色。流行的原因是 Reanimated/Expo 让原生级弹簧动效和触感反馈变得廉价。本质在解决 B2B 工具『能用但廉价』的观感问题——用克制的物理动效与字体分工换取专业信任感。

色彩暖白 #FAFAFA 画布上以电蓝→浅蓝渐变做唯一强调色,Slate 灰阶承担全部层级。
排印三字体严格分工:Calistoga 衬线大标题、Inter 正文、JetBrains Mono 专管数据标签。
布局白卡 + 1px 细边框 + iOS 柔影的 bento 卡片阵列,圆角 16,留白充足。
动效全程弹簧曲线(damping 15),按压缩放 0.96 配触感反馈,FAB 轻盈浮动,入场交错淡入。

✓ 适用:B2B SaaS 移动仪表盘、金融科技 App、开发者工具移动伴侣、营销分析、HR/运营等现代商务生产力场景

✗ 避免:纯消费娱乐、儿童 App、重装饰的生活方式类产品,以及嫌电蓝太『企业味』的品牌

CoinbaseMercuryRampLinear(移动端)
品味要点高手只把渐变给主 CTA 一个元素,mono 字体只出现在数据标签上制造『仪器感』,弹簧参数全局统一一套(mass:1/damping:15/stiffness:120)。新手最常见的翻车:渐变到处刷、卡片阴影开太重变 2015 年 Dribbble 风、三套字体混着用没有分工。判断标准:截一屏数出渐变元素,超过 2 个就是过载。
用 ui-ux-pro-max 的 SaaS Mobile (High-Tech Boutique) 风格做一个页面

关键词:high-tech boutique SaaS, electric blue gradient buttons, spring animations, glassmorphism nav, JetBrains Mono data labels, pulse-dot badges, bento cards, haptic press

+-- NODE_7 // TERMINAL --+
> boot.sequence OK
> auth.keypair VERIFIED
> sync mempool_feed...
[#######---] 70%
> risk.scan 1 WARN
[ EXECUTE ]
> awaiting input
[BAT:88%][NET:CONNECTED]

终端命令行风(移动端) Terminal CLI (Mobile)

把手机变成黑客终端,绿字黑屏即态度

移动端
1980s 终端机美学 · 2020s Web3/极客复兴
展开详解

源自 CRT 磷光屏与 Unix 命令行文化的复古未来风,被《黑客帝国》定格成大众流行符号。2020s 随 Web3、安全工具和开发者品牌而复兴,OLED 屏让纯黑底既省电又纯粹。界面元素全部『去图形化』:ASCII 边框、方括号按钮、文本进度条、开机日志。本质是用『系统裸露感』换取极客圈层的信任——界面越像机器内部,越显得真实、硬核、不营销。

色彩OLED 纯黑 #050505 底 + Matrix 绿 #33FF00 主文字,琥珀色管状态、红色管报错,全员高对比。
排印JetBrains Mono/SpaceMono 等宽字体独挑大梁,字号严格只允许 12/14/16 三档。
布局全局零圆角,ASCII 字符(+ - | *)画边框,按钮写成 [ EXECUTE ],底部常驻状态栏。
动效500ms 光标闪烁、打字机逐字输出、启动假日志滚屏、按压瞬间绿黑反色配触感。

✓ 适用:开发者工具、Web3/区块链 App、极客文化产品、ARG 游戏、科幻/黑色游戏伴侣、黑客与安全工具、创意工作室作品集

✗ 避免:大众消费品、健康类 App、任何需要亲和力与温度的场景、儿童产品、常规企业应用

Warp TerminalMempool.space黑客/安全工具类 AppARG 解谜游戏
品味要点高手的克制点:扫描线透明度死守 0.05 上下、字号严格三档、报错红与琥珀只在语义上出现——真终端就是这么寡淡,寡淡才像。新手翻车两大件:手一抖加了圆角或柔阴影立刻穿帮;引入第二种非等宽字体或乱调绿色饱和度,氛围全毁。判断标准:把界面截图调成黑白,如果层级消失了说明你在靠颜色花活而不是结构。
用 ui-ux-pro-max 的 Terminal CLI (Mobile) 风格做一个页面

关键词:mobile terminal CLI, OLED black, matrix green text, monospace only, ASCII borders, blinking cursor, boot sequence, scanline overlay

DROP 004 — SOLD OUT SOON — DROP 004 — SOLD OUT SOON —

LOUD
& FAST

SCROLL TO ENTER
GET ACCESS
ARCHIVE

动态粗野主义(移动端) Kinetic Brutalism (Mobile)

酸性黄大字在滚动里咆哮的街头排印

移动端
2020s · 移动端粗野主义 + 滚动驱动动效
展开详解

网页粗野主义与滚动驱动动效在移动端的合体,视觉血统来自街头海报、地下 zine 和锐舞传单的排印暴力。直到 Reanimated 等原生动效库成熟,无限跑马灯和滚动视差才能在手机上以 60fps 跑起来,这个风格随之爆发。它流行于音乐、潮流、体育等需要肾上腺素的领域。本质是用『运动中的巨型文字』制造能量密度,把品牌态度直接砸在用户脸上。

色彩近黑 #09090B 画布 + 酸性黄 #DFE104 唯一强调色,按压时整卡反转为黄底黑字。
排印Space Grotesk 800-900 全大写,60-120pt 巨字,负字距、行高压到 1 以下。
布局0 圆角、2px 硬边框、无阴影无渐变,跑马灯横条切割版面,粘性标题推挤。
动效5s 线性无限 marquee、滚动视差(scale 1→1.3 + 淡出)、100ms 硬切换、按压中度触感。

✓ 适用:沉浸式叙事 App、品牌旗舰移动端、音乐/文化平台、体育 App、地下刊物、限量发售、高能量数据看板

✗ 避免:平静的信息型应用、医疗健康、需要信任感的金融场景、儿童产品,以及任何嫌排印太凶的语境

Spotify WrappedNike SNKRS音乐节/潮牌 campaign App
品味要点高手的纪律:marquee 必须恒速线性、硬边裁切、绝不加渐隐边缘——『机械感』本身就是高级感;巨字行高敢压到 0.9 让字母互相贴住才有海报味。新手翻车点:酸性黄到处刷导致没有爆点(黄色出现面积应小于 15%)、给粗野主义加圆角和软阴影变成四不像、忘了响应 reduced-motion 让用户晕屏。
用 ui-ux-pro-max 的 Kinetic Brutalism (Mobile) 风格做一个页面

关键词:kinetic brutalism, acid yellow, infinite marquee, oversized uppercase type, scroll parallax, hard borders, zero radius, flood invert press

Hi, Maya

3 tasks due today

Design weekly review
Add Task

扁平化设计(触控优先) Flat Design Mobile (Touch-First)

砍掉一切阴影,用色块和字重说话

移动端
2013 · iOS 7 与微软 Metro 掀起的扁平化浪潮
展开详解

2013 年 iOS 7 与微软 Metro 联手掀翻拟物化,扁平设计就此成为移动十年的默认语言。它把视觉层级全部交给颜色、字重与留白:零阴影、零渐变、零质感贴图,渲染负担趋近于零。流行的根因是跨平台一致性最好做、性能最好、设计规模化最容易。本质在解决『装饰干扰信息』的问题——界面退后,让内容和操作站到最前面。

色彩白/浅灰底上用蓝、翠绿、琥珀做大面积色块分区,颜色本身就是层级和分组。
排印无衬线一把抓:800 重标题 + 600 小标 + 400 正文,靠字重对比建立秩序。
布局全宽色块分段取代边框与阴影,图标装进实心彩色容器,底部 Tab 实心填充不悬浮。
动效按压即时缩放 0.97,无延迟无弹跳,动效只确认操作、绝不表演。

✓ 适用:iOS+Android 双端一致的跨平台 App、信息密集仪表盘、系统级 UI、品牌插画体系、引导流程、图标设计

✗ 避免:需要深度与质感的超高端场景、暗色优先的产品,以及扁平容易显得『没做完』或冰冷的语境

iOS 7+ 系统界面DuolingoHeadspaceMicrosoft Metro / Windows Phone
品味要点没有阴影后层级全靠三件事撑:4pt 间距系统、大胆的字号差(标题至少 2 倍于正文)、色块对比。高手还会用低透明度几何形状做背景装饰,给『平』增加一层呼吸感。新手翻车点:可点击元素和普通文本长得一样(按钮必须有实心色块)、配色对比不足导致层级糊掉、偷偷加一点点阴影破坏纯粹性。
用 ui-ux-pro-max 的 Flat Design Mobile (Touch-First) 风格做一个页面

关键词:flat mobile design, zero shadow, color blocking sections, solid icon containers, bold typography hierarchy, 4pt spacing, geometric shapes, touch-first

Morning routine

Dynamic color tunes the whole UI to your wallpaper.

AllWorkHome
New note
+

Material You(材料设计 3) Material You (MD3 Mobile)

谷歌的个性化材料:药丸、色调面、动态取色

移动端
2021 · Google 随 Android 12 发布
展开详解

Google 2021 年随 Android 12 发布的 Material Design 第三代,最大创新是 Dynamic Color——从用户壁纸自动提取色调,生成全套语义化颜色 token。它用『色调海拔』(容器叠色)取代 MD2 的阴影海拔,用药丸圆角与大圆角容器营造柔软有机感。流行因为它是 Android 生态的官方语言,工具链完备。本质在解决系统级个性化与设计一致性的矛盾:千人千面,但规则只有一套。

色彩以 #6750A4 紫为锚的 tonal palette,surface/container 层层叠色取代阴影,背景是染色白 #FFFBFE。
排印Roboto/Inter 体系化字阶,标题克制中庸,个性靠颜色 token 而非字体表达。
布局药丸按钮与 chip(radius 999)、16-28 大圆角卡片、圆角方形 FAB、填充式输入框。
动效emphasized 缓动 cubic-bezier(0.2,0,0,1) 100-400ms,按压用 10-15% 不透明度的 state layer 浮层。

✓ 适用:Android 生态 App、跨平台生产力工具、基于 MD3 的管理后台、数据密集的后台业务界面

✗ 避免:极简粗野主义品牌、终端黑客美学、单色编辑风应用——MD3 的圆润有机感与这些气质相冲

Android 12+ 系统界面Google Pixel 系统应用Gmail / Google Keep
品味要点高手用 token 思维配色:on-surface、container、outline 一一对应,换一个种子色全局自动自洽,这才是 MD3 的真功夫。状态反馈必须用 state layer 浮层,而不是改元素透明度。新手翻车三连:背景用纯白 #FFFFFF(MD3 要求 #FFFBFE 这种染色白)、阴影开重做出 MD2 既视感、药丸与直角混用破坏圆角语言的一致性。
用 ui-ux-pro-max 的 Material You (MD3 Mobile) 风格做一个页面

关键词:Material You, MD3 tokens, dynamic color, tonal surfaces, pill buttons, state layers, emphasized easing, tertiary FAB

NEW!

Sticker
Club

🎨 Drop your art — get paid
⚡ 1,204 makers joined
Join Now →

新粗野主义(移动端) Neo Brutalism (Mobile)

奶油底、黑粗边、硬投影的贴纸拼贴乐园

移动端
2020s · Gumroad/Figma 营销页带火的网页新粗野主义
展开详解

诞生于 2010s 末设计圈对『安全的扁平化』的集体反叛,Gumroad、Figma 营销页把它推向主流后下沉到移动端。视觉血统来自波普艺术、zine 拼贴和早期网页的不修边幅:4px 黑边框、零模糊硬投影、故意歪斜的卡片和随手一贴的徽章。它在 Gen Z 市场流行,因为足够吵、足够真、反算法审美。本质是用『反精致』对抗同质化——丑得有态度,就是美。

色彩奶油白 #FFFDF5 画布配热红、明黄、淡紫高饱和色块,纯黑描边统一全场。
排印Space Grotesk 700-900 独大,只允许粗和特粗,细字重一律禁止。
布局4px 黑边框 + 4-8px 无模糊硬偏移投影,卡片故意旋转 1-2 度,贴纸式徽章绝对定位乱入。
动效机械按压:按下时元素平移恰好盖住自己的投影,只用 spring/linear,拒绝优雅缓动。

✓ 适用:创意工具、协作平台、Gen Z 营销与电商、作品集、贴纸手账风内容 App

✗ 避免:严肃企业应用、保守行业、求稳的金融科技,以及对比度要求严苛的无障碍优先场景(需专门调校)

GumroadFigma 营销页Poolsuite
品味要点高手的『刻意的随意』有三条铁律:投影必须纯黑、零模糊、偏移量全局统一(比如一律 4px);旋转角度控制在 ±2° 以内;高饱和色不超过 3-4 种。新手翻车点:用了带模糊的灰投影立刻变廉价山寨货、颜色加到五六种变垃圾场、忘了校对比度——明黄底上放白字根本读不了。
用 ui-ux-pro-max 的 Neo Brutalism (Mobile) 风格做一个页面

关键词:neo-brutalism mobile, cream background, 4px black borders, hard offset shadows, rotated sticker badges, pop-art palette, mechanical press, Space Grotesk bold

ISSUE 12 — APRIL

Words
carry
weight

An editorial on type, silence and the space between.

Read the essay

大字海报排印(移动端) Bold Typography (Mobile Poster)

字号即版面:一行大字顶一屏设计

移动端
2020s · 编辑设计与瑞士排版的数字回潮
展开详解

承袭瑞士国际主义排版与报纸头版海报的传统,2020s 被编辑类网站和文化品牌带回移动屏幕。当插画、3D 和渐变泛滥之后,『只用字』反而成了最贵的克制:48-72px 巨型标题、大段负空间、一抹朱红点睛,信息本身就是视觉。本质在解决注意力稀缺的问题——砍掉所有竞争元素,让一句话获得海报级的音量,少即是响。

色彩近黑 #0A0A0A 底 + 暖白文字拉出可达 18:1 的极高对比,朱红 #FF3D00 只给交互元素点睛。
排印标题 48-72px、负字距 -1.5、行高 1.1,与正文保持约 5:1 字号比,文字可出血到屏幕边缘。
布局单列、0 圆角、60px+ 大段垂直留白,下划线 CTA(文字 + 2px 色条)取代按钮盒子。
动效200ms 即时过渡加 10px 上滑淡入,无弹跳无表演,状态变化用颜色而非海拔。

✓ 适用:创意品牌首屏、阅读类 App、展览/活动页面、编辑型移动体验、落地页 hero 区

✗ 避免:工具型仪表盘、儿童 App、玩乐型消费产品,以及依赖大量图标和图片的界面

It's Nice ThatA24 宣传页独立杂志数字版
品味要点高手死守两条纪律:标题正文 5:1 的字号比不缩水,朱红只出现在可交互元素上——版面自然有编辑部气质;衬线斜体只点缀一个词,多了就油。新手翻车点:标题不敢放大、缩在安全边距里立刻泄气(要敢让字贴边甚至出血);强调色到处用稀释焦点;手痒加圆角和阴影,瞬间掉回普通 App。
用 ui-ux-pro-max 的 Bold Typography (Mobile Poster) 风格做一个页面

关键词:bold editorial typography, oversized headline, tight tracking, underline CTA, vermillion accent, massive negative space, zero radius, dark poster layout

VOL · II
The Archive
In the long gallery of the old library, every folio keeps its own quiet hour, bound in worn leather and patient ink.
I.On Memory
II.Marginalia
OPEN THE FOLIO

暗黑学术风 Scholarly Academia

把牛津老图书馆装进手机屏

移动端
Timeless · 2020 年前后 Dark Academia 亚文化带火
展开详解

一种把古典图书馆物质感——红木、羊皮纸、黄铜、火漆——完整搬进移动端的复古风格。它源自牛津剑桥学院美学与《死亡诗社》《秘史》一脉的文学想象,2020 年前后随 Tumblr/TikTok 上的 Dark Academia 亚文化大规模出圈。它流行是因为知识型产品急需对抗千篇一律的白底扁平设计,而'书房氛围'天然传达深度与仪式感。本质上它在解决的问题是:如何让阅读、笔记、世界观叙事类应用获得沉浸与庄重,而不是又一个工具壳。

色彩红木与橡木深底配羊皮纸浅字,黄铜与图书馆深红做贵金属点缀。
排印全衬线体系(Cormorant Garamond/Crimson Pro),首字下沉、罗马数字编号与宽字距大写标签。
布局拱顶圆弧 hero、橡木色卡片与华丽黄铜分隔线,版面秩序如古书页。
动效只用缓出 timing 的慢动效(Easing.out poly4),拒绝弹簧回弹与任何霓虹闪烁。

✓ 适用:知识管理与深度阅读工具、仪式感个人品牌、世界观厚重的 RPG/跑团应用、特定文化社区平台

✗ 避免:超现代科技仪表盘、霓虹/玻璃拟态产品、面向 Gen Z 的玩闹型品牌

Readwise Reader(衬线阅读模式)Obsidian 社区 Academia 主题lore 向 RPG 伴侣应用
品味要点高级感来自克制的金属点缀:黄铜只给可点击元素与分隔线,全屏占比别超 5%,深红只用在火漆徽章这类'印章时刻'。暗底衬线正文把行高放到 1.55 以上、字号别低于 14pt,否则优雅秒变难读。新手最常翻车在两处:vignette 和阴影堆太重变成恐怖游戏氛围;混进一行无衬线正文或弹簧动效,整个世界观立刻穿帮。
用 ui-ux-pro-max 的 Scholarly Academia 风格做一个页面

关键词:scholarly academia, mahogany parchment, brass accents, arch-top hero, drop caps, vignette overlay, serif typography, wax seal

NETRUN_07
// SYSTEM ONLINE
CPU.CORE98%
ICE.WALLBREACH
SIGNAL▮▮▮▯
> access_node
JACK IN

赛博朋克移动 HUD Cyberpunk Mobile HUD

霓虹、扫描线与故障感的黑客驾驶舱

移动端
1984《Neuromancer》播种 · 2020《Cyberpunk 2077》UI 复兴
展开详解

把手机界面伪装成黑客终端与军用平视显示器的暗色风格:虚空黑底上叠霓虹绿、品红与青色的发光元素。审美源头是 1980 年代赛博朋克文学(吉布森《Neuromancer》)与《银翼杀手》的视觉遗产,经《Deus Ex》《Cyberpunk 2077》等游戏 HUD 重新带回界面设计。它流行靠的是强烈的叙事沉浸——切角面板、扫描线、CRT 闪烁让用户感觉自己'接入了系统'。本质上它解决的是游戏化与极客向产品的代入感问题:界面不是工具,而是世界观道具。

色彩接近纯黑的虚空底,霓虹绿做唯一主角,品红与青色当配角,警示红点缀。
排印Orbitron 式宽体科幻标题 + JetBrains Mono 数据等宽,全大写、宽字距。
布局45° 切角面板、HUD 角括号与终端式 '>' 输入框,零圆角的驾驶舱信息密度。
动效扫描线常驻、CRT 闪烁、偶发 ±2px 故障抖动与按钮霓虹脉冲。

✓ 适用:游戏仪表盘、加密/赛博题材应用、科幻伴侣工具、黑客 OS 皮肤、重数据监控 HUD

✗ 避免:严肃企业产品、需要冷静信任感的健康/金融应用、极简编辑型应用

Cyberpunk 2077 游戏内 UIASUS ROG Armoury CrateRazer Synapse加密交易终端类工具
品味要点霓虹只能有一个主角:绿色统领全局,品红/青各占不到 10%,三色平分秋色就成了夜店灯牌。故障动画要'偶发'——每 2~3 秒抖一次 2px 即可,常驻抖动是新手第一翻车点;第二翻车点是圆角,赛博朋克世界没有圆角,全部切角或直角。务必给 prefers-reduced-motion 用户关掉闪烁与glitch,这是该风格少数的可访问性底线。
用 ui-ux-pro-max 的 Cyberpunk Mobile HUD 风格做一个页面

关键词:cyberpunk HUD, neon green, chamfered corners, scanlines, CRT flicker, glitch animation, terminal prompt, corner brackets

SATOSHI WALLET
TOTAL BALANCE
1.2847 BTC
+4.2% · $48,256.04
tx_9f2a…c4+0.012
tx_b81d…77-0.005
BUY BITCOIN

比特币 DeFi 风 Bitcoin DeFi

用比特币橙在虚空里铸造数字黄金

移动端
2008 白皮书埋种 · 2020s DeFi Summer 定型
展开详解

Web3 钱包与 DeFi 应用的主流暗色美学:近乎纯黑的'虚空'底上,比特币橙到数字金的渐变充当唯一光源。比特币橙自 2010 年社区定下 logo 后成为加密世界最强的颜色资产,2020 年 DeFi Summer 与其后的牛市让这套'暗底+橙金渐变+等宽数字'的视觉语法迅速定型。它流行是因为加密产品必须同时传达两件事:技术精密(等宽字体、发丝边框、网格背景)与资产贵重(金色渐变、辉光)。本质上它在解决无监管金融产品的信任构建问题——用视觉上的'精确感'替代机构背书。

色彩虚空黑与暗物质灰打底,比特币橙→数字金渐变只给 CTA 与核心余额。
排印Space Grotesk 标题、Inter 正文、JetBrains Mono 专管金额哈希与百分比。
布局大圆角区块卡 + 发丝边框 + 玻璃拟态底部导航,纵向账本时间线串起交易流。
动效网络状态点脉冲呼吸、余额渐变流光、毛玻璃面板滑入,关键资金操作配触觉反馈。

✓ 适用:DeFi 仪表盘、加密钱包、NFT 市场、Web3 社交、高科技 fintech 品牌

✗ 避免:轻松休闲应用、低科技感品牌、极简编辑型阅读产品

StrikeMetaMaskUniswap MobileCash App 比特币页
品味要点高级感的命门是等宽字体:所有金额、哈希、百分比一律 JetBrains Mono,用比例字体写数字立刻显得廉价不可信。橙色渐变是稀缺资源——只给一个主 CTA 和余额数字,到处刷橙就成了外卖 App。边框用 1px 以下 hairline + 低透明度(rgba 边框),新手用 2px 实色边框会瞬间毁掉精密感;暗底上的灰字至少用 #94A3B8 这档亮度,再暗就牺牲了可读性。
用 ui-ux-pro-max 的 Bitcoin DeFi 风格做一个页面

关键词:bitcoin orange gradient, dark fintech, glassmorphic nav, monospace data, gradient balance text, pulsing status, ledger timeline, hairline borders

Hey, Mochi! 🍡
Daily play & learn
🎈
Shape Lab
12 squishy levels
🧸TOYS
🌈COLORS
START PLAYING

黏土拟态 Claymorphism

捏得动的果冻 UI,软到想戳一下

移动端
2021 · Michal Malewicz 命名,随 Dribbble 3D 黏土插画风潮爆发
展开详解

一种把界面元素做成'充气黏土'的玩趣风格:超大圆角、多层柔和阴影、糖果色渐变,让按钮和卡片看起来像能捏出指印。它由命名过玻璃拟态的 Michal Malewicz 在 2021 年命名,源头是 Blender 3D 黏土小人插画在 Dribbble 上的病毒式流行。它的走红回应了扁平设计多年的情感缺失——消费级产品需要可触摸的亲和力来降低使用门槛。本质上它在解决儿童、教育与轻社交产品的'第一眼好感'问题:用物理质感唤起玩具般的安全感与愉悦感。

色彩灰紫米白画布(拒绝纯白)上铺鲜紫与亮粉渐变,翡翠绿/琥珀只做功能色。
排印Nunito Black 级别的超粗圆润标题,正文用中性无衬线托底。
布局圆角层层嵌套(外层 50、卡片 32、按钮 20)的 bento 网格,处处鼓起来。
动效按压 squish 到 0.92 再弹簧回弹,背景色块 ±20px 慢速漂移,每次点按带轻触觉。

✓ 适用:儿童教育应用、青少年社交产品、加密游戏化、创意工具、吉祥物驱动的品牌应用

✗ 避免:严肃企业产品、高密度数据界面、编辑型阅读应用、需要信任感的 fintech

Duolingo(3D 黏土感插画)Headspace儿童教育类 App
品味要点黏土感 = 双层阴影:暗阴影 (12,12) 加白色高光 (-8,-8) 缺一不可,只有单层灰阴影就退化成普通卡片。背景永远别用纯白——用 #F4F1FA 这类带灰紫的米白,否则半透明白卡片会直接消失在背景里。圆角要有嵌套层级(卡 32 内部 24),里外同圆角立刻显呆;新手另一个翻车点是阴影透明度开太高,黏土变成了'发霉',阴影 alpha 控制在 0.2~0.3。
用 ui-ux-pro-max 的 Claymorphism 风格做一个页面

关键词:claymorphism, multi-layer soft shadows, gradient violet buttons, big nested radius, spring squish, drifting blobs, glass-clay cards, playful

Overview
MRR
$84k
↑ 12%
SEATS
1,208
↑ 4%
Invite Team

企业级 SaaS 风 Enterprise SaaS

靛紫渐变打底的 B2B 信任感流水线

移动端
2020s · Stripe/Linear 系 SaaS 美学向移动端延伸
展开详解

当代 B2B 软件的'默认体面':Slate 浅灰底、白色卡片、靛蓝到紫的渐变点睛,配上严格的网格与字重阶梯。它是 Stripe、Linear、Salesforce 等桌面端 SaaS 设计语言成熟后向移动端的自然延伸,indigo-violet 渐变更是被 Tailwind 默认色板推成了 2020 年代 SaaS 的标志色。它流行因为企业采购看重的是'可靠、专业、值得付费',而这套语言已被市场反复验证为信任的速记符号。本质上它解决的是 B2B 产品在小屏上同时保住信息密度与品牌质感的问题。

色彩Slate 浅灰底白卡片,靛蓝→紫渐变只点睛主 CTA 与激活态,翡翠绿报喜。
排印Plus Jakarta Sans 一族打天下,从 800 屏幕标题到 400 正文的清晰字重阶梯。
布局16pt 圆角白卡 + 底部 Tab 导航 + 全宽底部 CTA,严格安全区与 24/12pt 垂直节奏。
动效0.97 按压回弹配中度触觉、浮动标签聚焦动画、骨架屏脉冲与滚动联动标题收缩。

✓ 适用:B2B 后台管理、生产力工具、政务与金融移动端、SaaS 伴侣应用、企业仪表盘

✗ 避免:纯消费娱乐产品、Gen-Z 年轻化应用、游戏 UI、极简编辑型产品

Slack MobileAsana MobileLinear MobileNotion Mobile
品味要点这套风格的高级感藏在'有色阴影'里:卡片阴影用 rgba(79,70,229,.08) 而非黑灰,整个界面立刻贵 20%——灰阴影是模板感的头号来源。渐变是稀缺品,只出现在主 CTA 和激活态 tab 两处,第三处出现就开始廉价。新手最常见的翻车是密度失控:要么塞成桌面端报表,要么稀疏得像营销页;守住 24pt 段落间距、12pt 条目间距的节奏,企业感来自秩序而非装饰。
用 ui-ux-pro-max 的 Enterprise SaaS 风格做一个页面

关键词:enterprise SaaS mobile, indigo violet gradient, colored card shadows, floating label inputs, pill CTA, bottom tabs, skeleton loading, clean light UI

My Doodle Day
idea: draw the moon 🌙 before bedtime!
water the cactus
sketch 3 cats
clean desk (nope)
+ NEW SCRIBBLE

手绘草图风 Sketch Hand-Drawn

铅笔、便利贴和胶带糊出来的界面

移动端
Timeless · 2008 Balsamiq 把低保真草图做成产品风格
展开详解

故意把界面画'歪'的风格:歪斜圆角、铅笔黑勾线、硬偏移阴影、便利贴与胶带拼贴,整个 App 像一页涂鸦笔记。它的源头是设计师在纸上画原型的传统,2008 年 Balsamiq 把'手绘线框图'做成产品标识,Excalidraw 等工具延续了这条审美血脉。它流行是因为'未完成感'有奇效——降低用户的心理门槛,暗示'这只是草稿,欢迎随便玩、随便改'。本质上它解决的是创意与教育产品的亲和力问题:完美光滑的 UI 让人拘谨,而手绘让人放松参与。

色彩暖纸白打底,铅笔黑勾线,红马克笔强调、蓝圆珠笔聚焦、便利贴黄做 CTA。
排印Kalam/Patrick Hand 类手写体,标题粗如毡笔、正文像随手记,但保证可读。
布局四个角圆角各不相同的歪斜卡片,±1° 旋转加胶带图钉 SVG 拼贴。
动效按下时元素位移盖住硬阴影(像按扁纸片),出错时 ±2° 抖动,布局变化带弹簧。

✓ 适用:低保真原型工具、创意品牌、儿童绘本应用、教育工具、手帐日记、游戏化解谜

✗ 避免:企业仪表盘、高密度数据表格、fintech 精密工具、医疗法律类应用

BalsamiqExcalidraw儿童绘本/涂鸦类 App
品味要点手绘感的灵魂是三件套:0 模糊的硬偏移阴影(4px 4px 0 实色)、四角不等的 wobbly 圆角、±1° 出头的轻微旋转——缺一件就像敷衍的 Comic Sans 换皮。一旦用了柔和模糊阴影立刻穿帮,这是新手第一翻车点。旋转克制在 ±1.5° 以内,转多了像车祸现场;手写体只给标题和短句,长正文必须换回易读字体,触控目标仍要守住 48×48。
用 ui-ux-pro-max 的 Sketch Hand-Drawn 风格做一个页面

关键词:hand-drawn sketch, wobbly border radius, hard offset shadow, paper texture, post-it yellow, tape decorations, rotated cards, handwriting font

Living Room
Soft climate control
22°
TEMPERATURE
💡
🌀
🔒
APPLY SCENE

新拟态(Soft UI) Neumorphism

从同一块黏土里挤出来的软按钮

移动端
2019-2020 · Alexander Plyuto 的 Dribbble 概念引爆,旋即退潮又回流
展开详解

全屏只有一种冷灰底色,所有元素靠'凸起'与'凹陷'的双向阴影从同一块材质里挤出来——像一块通电的陶瓷面板。2019 年底设计师 Jason Kelley 把它命名为 Neumorphism(new + skeuomorphism),Alexander Plyuto 的 Dribbble 概念图随即引爆全网。它走红于人们对扁平设计的审美疲劳,又因低对比度的可访问性硬伤在 2020 年内迅速退潮,最终在智能家居、硬件控制这类'界面即实体面板'的场景里找到归宿。本质上它在实验一个问题:不靠颜色和描边,纯靠光影能否表达层级与状态。

色彩全屏唯一的冷灰 #E0E5EC 基底,紫罗兰 #6C63FF 只给激活与聚焦态。
排印中性几何无衬线(Plus Jakarta Sans/系统字体),大标题收负字距,靠字重分层。
布局8pt 网格上凸起卡片内嵌凹陷槽位,靠光影深度而非色块与描边分区。
动效按压时凸起塌为凹陷、阴影透明度从 1 插值到 0.4,250ms 标准贝塞尔加轻触觉。

✓ 适用:极简硬件控制、智能家居应用、审美型实用工具、健康监测、品牌展示页

✗ 避免:高密度数据界面、多彩明亮的应用、依赖颜色建立强层级的产品、暗色模式优先的产品

Alexander Plyuto 的 Dribbble 概念作品智能家居控制面板类 App计算器/遥控器类小工具
品味要点铁律:全屏只许一种背景色,元素靠凹凸而非色块区分——一旦给卡片换了别的底色,'同一块材质'的隐喻就碎了。双阴影光源必须全局一致(固定左上打光),左右乱飘是新手最常见的穿帮。对比度是最大短板:文字至少用 #3D4852 这档深度,关键操作必须加 #6C63FF 点缀,否则用户根本找不到按钮;也别强行做暗色版——深灰底的塑料感正是它当年退潮的原因之一。
用 ui-ux-pro-max 的 Neumorphism 风格做一个页面

关键词:neumorphism soft UI, single clay base, dual light-dark shadows, extruded convex, inset concave, violet accent only, no pure white, 8pt grid