UI STYLE ATLAS · 2026 · 25 STYLES · REFERENCE EDITION

国际 UI 风格大盘 · 五卷 25 种

23 种之外,补上了你最初要的那味:24 圆润亲和 + 25 呼吸动效,和 06 治愈凑成"圆润·舒适·动画"三件套。用法不变:先查矩阵定方向 → 再用筛选器缩小范围 → 最后看图读看图指南。

第一步 · 查矩阵想让用户快 / 信 / 留 / 潮 / 酷?下表每行直接给出候选卡片编号,点编号自动筛出对应卡片。
第二步 · 用筛选器情绪 × 产品类型 × 端,三组条件叠加,23 张里秒剩 2–3 张候选。
第三步 · 看图定调读卡片里的"看图指南",盯着截图对应部位确认感觉;再点链接看活站/规范。

选型速查矩阵

点卡片编号 = 按该情绪自动筛选。组合逻辑:情绪定大方向,产品类型和端在下方筛选器里叠加。
快 · 转化下单
信 · 专业付费
留 · 放松陪伴
潮 · 年轻圈层
酷 · 前沿炫耀

活演示 · 25 号卡片讲的就是它:吸气…(4 秒胀开 / 4 秒收缩,跟一轮再往下翻)

卷一当代主流

2022–2026 欧美产品界面的默认选项

Meet Liquid Glass
01

液态玻璃 Liquid Glass

出处:Apple WWDC25(2025.06)· iOS 26 / macOS Tahoe 26 · 灵感源自 visionOS

一块会弯曲光线的"数字玻璃":控件浮在内容上,背景透过来并发生折射,交互时像液体一样形变。

看图指南 → 盯着玻璃体边缘,看它如何把背后网格"掰弯"——refraction(折射)是唯一的关键词。
光线折射动态形变内容透视控件浮层
Teenage Engineering
02

极简主义 Minimalism

出处:Dieter Rams"少即是多" → Apple / Teenage Engineering 一脉

黑白单色、巨大留白,说明书式排印本身就是装饰。和性冷淡的区别:TE 的极简里有插画和幽默,骨架极简、表情丰富。

看图指南 → 顶部导航像电器说明书目录;超大标题压住整屏,字即画面。
黑白单色大留白工业排印去装饰化
Gumroad
03

新粗野主义 Neo-Brutalism

出处:2023 年 Gumroad 改版引爆,"Go from 0 to $1"沿用至今

故意反精致:粗黑描边、硬阴影、高饱和撞色,像手工丝网海报。亲切好玩,是创作者经济的味道。

看图指南 → 满屏乱飞的粉色 G 硬币 + 底部黑边直角硬阴影卡片,一秒识别。
粗黑描边硬阴影高饱和撞色手工感
Vercel Templates
04

便当网格 Bento Grid

出处:Apple 2022.9 / 2023.9 发布会总结页 → 2024–2025 经 Notion、Linear、Vercel 落地

把卖点装进大小不一的圆角格子,每格一个完整卖点,买家 15 秒扫完 6–9 个价值点。

看图指南 → 左侧筛选栏 + 右侧大小不一的模板卡片网格——一屏之内,多路可扫。
模块格子大小错落一屏多卖点可扫读性
Raycast
05

暗黑开发者美学 Dark Dev

出处:Linear(2019 起)→ Raycast / Vercel 跟进,2023 后成开发者工具统一制服

纯黑底、居中大字、微光质感。把极客、高效、贵写在脸上,AI 产品现在几乎默认这套。

看图指南 → 居中大字 + 周围大片纯黑——信息密度极低,自信极高。
纯黑底居中大字微光质感等宽字体点缀
潮汐
06

平静治愈 Calm Design

出处:Amber Case《Calm Technology》→ Headspace / Calm 落地;国内集大成者是潮汐

让你慢下来的界面:单色沉浸、超大字、呼吸动效、一屏一事。随波呼吸就是这一派的独立开发者版本。

看图指南 → 大圆角冥想内容卡 + 舒缓插画,一屏只讲"冥想"一件事,字大、事少、无红点。(上一版错配了营销头图,已换成纯内容屏。)
单色沉浸大字层级呼吸动效零打扰
Vercel
07

瑞士排印 Swiss Typography

出处:1950 年代瑞士国际主义平面风格 → Vercel 用 Geist 字体在数字端复活

网格对齐、超大无衬线标题、黑白灰三色,用秩序感表达专业,几何图形只做点缀。

看图指南 → 巨型标题 + 中央黑三角 + 三栏信息——秩序即美感。
网格对齐超大标题黑白灰几何点缀
Stripe
08

极光渐变 Aurora Mesh

出处:Stripe 2019 年确立"丝绸渐变"首屏,此后成 SaaS 讲未来感的标准答案

流动多色丝绸渐变铺满首屏,情绪先行、理性断后。左侧克制排印讲事,右侧用光讲梦。

看图指南 → 右侧橙粉紫丝绸光带 + 左侧克制文字——梦幻与专业的对半开。
流动渐变丝绸光泽情绪先行左右对半开
MUJI
09

侘寂暖极简 Japandi

出处:日式侘寂 × 北欧极简的混血,MUJI 是全球范本

米白原木、自然光摄影、克制排版,"刚刚好"的哲学。02 是冷的工业感,这是暖的生活感。

看图指南 → 米白底商品网格 + 自然光人物摄影——没有一句硬广,质感自己说话。
米白原木自然光影克制排版呼吸感留白
Kimi
10

AI 原生对话式 AI-Native

出处:ChatGPT(2022.11)"输入框即首页" → 2025–2026 Agent 化:输入框下挂技能 chips

首页就是一个输入框:居中、巨大、几乎无导航,内容靠生成不靠陈列。

看图指南 → 巨型居中输入框 + 下面一排 Agent 技能 chips——导航栏几乎不存在。
输入框即首页技能 chips去导航化生成式内容

卷二基础设施与历史地层

今天所有风格脚底下的地层:平台规范 + 前智能手机时代的遗产

Playdate
11

拟物主义 Skeuomorphism

出处:iOS 6 之前 Forstall 时代 → 被 iOS 7 扁平化埋葬 → 2020s 以硬件潮物姿态回潮

材质和阴影讲故事:金属螺丝、塑料按键、纸张纹理,靠"像真东西"降低学习成本。

看图指南 → 黄色机身上的十字键、AB 键、金属螺丝和侧面摇柄——每个像素都在模仿真实触感。
材质纹理真实阴影实体隐喻触感优先
Gmail
12

Material You Google M3

出处:Google 2014 Material Design → 2021 Material You(动态取色),安卓阵营的宪法

纸片隐喻 + 圆角即正义 + 从壁纸取色的动态主题。Gmail 是 M3 最普及的活体,一个像素都不锋利。

看图指南 → 顶部大圆角搜索条 + 圆形发件人头像——全圆角、无直角是 M3 的指纹。
全圆角纸片层级动态取色FAB 按钮
Hacker News
13

原生粗野 Raw Brutalism

出处:90 年代早期网络 → Craigslist / Hacker News,三十年不改版,03 的"祖父"辈

零样式即样式:默认字体、默认蓝链、表格布局。信息密度拉满、装饰精确为零——极客圈的信任状。

看图指南 → 橙色细条 + 序号列表 + 蓝色下划线链接——2007 年的页面,2026 年还在服役。
默认字体蓝链表格布局零装饰

卷三情绪与亚文化

不讲效率,讲多巴胺:给 Z 世代和亚文化圈层的界面方言

Duolingo
14

多巴胺玩趣 Dopamine Playful

出处:2022 多巴胺穿搭 → 界面;前身是 Facebook Alegría 带起的 Corporate Memphis(2017–2021)

高饱和糖果色、巨型圆角按钮、吉祥物带路,用游戏化让人上瘾。Duolingo 的绿猫头鹰是全球最赚钱的多巴胺。

看图指南 → 绿猫头鹰 + 巨型药丸按钮 + 扁平插画——每个元素都在哄你点一下。
糖果色吉祥物巨型按钮游戏化
Adult Swim
15

酸性拼贴 Acid Graphics

出处:锐舞传单 × 成人动画 × 音乐视觉,Adult Swim 是该美学在主流世界的最大据点

怪诞拼贴、荧光色块、cult 梗,故意"有点不对劲"。服务的是圈层认同:看不懂的请出门左转。

看图指南 → 宇宙里的沙漏和缝合棒球 + 荧光黄标题条——怪得理直气壮。
怪诞拼贴荧光色块cult 梗圈层黑话
Cameron's World
16

蒸汽波怀旧 Vaporwave

出处:2010s 网络考古;cameronsworld.net 是该美学的神龛站(GeoCities 残件拼贴)

星空、行星 GIF、彩虹字——1999 年的显示器味道。怀旧本身就是功能:让人想起"网上冲浪"还有梦的年代。

看图指南 → 星空行星 GIF 阵 + 底部彩虹渐变英文——每个像素都在 1999 年。
GIF 拼贴星空行星彩虹字考古感
Stardew Valley
17

复古像素 Pixel Art

出处:8-bit 机能限制 → 独立游戏文艺复兴(Stardew Valley 一人开发,卖出 3000 万份)

逐像素手绘、复古 HUD。限制即风格:低分辨率逼出高辨识度,暖得像小时候的暑假。

看图指南 → 像素农场 + 右上角复古 HUD(星期/时间/金币)——UI 和游戏画面同一种笔画。
逐像素手绘复古 HUD低分辨率暖怀旧
Headspace
24

圆润亲和 Rounded Blob

出处:iOS squircle 圆角规范 → Headspace blob 家族(2012 起)→ 全端"去直角化"

直角几乎绝迹:药丸按钮、全圆角卡片、blob 形吉祥物。圆润=无威胁,是刻在本能里的亲和——这就是你说的"圆润的"。

看图指南 → 橙色 blob 笑脸 + 全圆角课程卡 + 药丸按钮——整屏找一个直角试试。
全圆角blob 形药丸按钮去直角
Headspace 课程
25

呼吸环境动效 Ambient Motion

出处:Apple Watch 呼吸 App(2016)→ Headspace 呼吸练习 → 随波呼吸(你视频里看到的那种)

动效不是装饰,是功能:4 秒吸气胀开、4 秒呼气收缩,用节奏带你的神经慢下来。页顶那颗呼吸球就是 4-4 节奏的活演示——这就是你说的"动画的感觉"。

看图指南 → 诚实声明:静态图截不下动效。看笑脸 blob 大卡——那是呼吸动画的舞台;真机感觉去 App 里跟一轮。
呼吸节奏弹簧物理环境循环动效即功能

卷四东方语言

中国界面自己的两条路:浓烈的潮、克制的雅

江南百景图
18

国潮 Guochao

出处:2018 后故宫文创 × 李宁 × 花西子带火,"传统元素潮流化"的商业运动

水墨打底、高饱和点缀、印章标题、祥云回纹——把博物馆搬进潮牌店。

看图指南 → 水墨宝塔 + 印章式标题 + 左侧竖排——传统符号一个不少,但排的是手游的局。
水墨打底印章标题竖排文字祥云纹样
西窗烛
19

新中式 New Chinese

出处:宋式美学回潮(宋画、宋词、宋瓷),和国潮同源但反向:不求潮,求雅

中国红打底、竖排诗词、印章点缀、大量留白。国潮是"博物馆开派对",新中式是"书房里焚香"。

看图指南 → 中国红 + 竖排诗词 + 赏析印章——克制、端庄,零多余装饰。
中国红竖排诗词印章点缀宋式留白

卷五平台与次元

载体变了,界面就得换骨:终端、空间、二次元、报纸各有骨相

Termius
20

终端美学 Terminal

出处:CRT 绿磷光 × Unix 终端 → 极客生产力工具的成人礼

纯黑、等宽字体、霓虹强调色、命令即界面。Termius 把服务器列表做成了电话本——极客也要好用的电话本。

看图指南 → 深蓝黑底 + 等宽服务器地址列表——电话本的外表,终端的心。
纯黑底等宽字体霓虹强调命令即界面
JigSpace
21

空间计算 Spatial

出处:visionOS(2024)→ 3D 产品叙事;JigSpace 是苹果多次 keynote 点名的范本

界面围着 3D 模型转:步骤卡片是模型的标注,操作是抓、放、走近。"页面"概念在这里失效。

看图指南 → 无人机 3D 模型 + 1-2-3-4 步骤卡——卡片是模型的说明书,不是页面的组件。
3D 为中心步骤标注抓放交互无页面概念
原神
22

二次元游戏 Anime Game UI

出处:日式 ACG → 米哈游工业化(原神 2020)。全球最赚钱的 UI 流派之一

赛璐璐立绘 + 发光标题 + 徽章式版本标签 + 高密度信息。规则:华丽但必须可读,氪金按钮永远一眼能找到。

看图指南 → 立绘群像 + 发光标题 + 版本徽章——华丽、拥挤、但层级分明。
立绘群像发光标题版本徽章高密度可读
The Guardian
23

社论衬线 Editorial Serif

出处:报纸排印传统(Guardian Egyptian 字体)→ 严肃新闻 App 的信任装甲

衬线大标题、藏青 masthead、栏目线、署名。和大字报的区别:同样大字,这里是"机构的庄重"不是"小贩的吆喝"。

看图指南 → 衬线大标题 + 藏青报头——字体的衬线就是公信力。
衬线大标题报头栏目线机构庄重

标标准与分类对照

UI 风格没有国际统一标准(不像字体有 Vox-ATypI 分类)——风格是时尚,规范是宪法。下面三层是真实存在的权威,动手做产品时回这里查

一层 · 平台规范(真标准,管组件不管风格)Apple HIG · Material 3 · Fluent 2 · Carbon · Polaris
规定按钮、导航、动效曲线、无障碍怎么做,不规定"好看"。风格定完,落地时逐条对规范,避免自创交互翻车。
二层 · 奖项(事实上的品味标准)Apple Design Awards · Awwwards
ADA 每年按"乐趣、视觉、交互、社会影响"等类别颁奖——这是离"官方风格分类"最近的东西。想知道某种风格的天花板,去翻对应年份的获奖名单。
三层 · 学术与商业分类NN/g · Mobbin 分类法
NN/g 只按可用性给"对错"打分,从不给风格排名——学术界的态度本身就说明问题。商业库里最接近工作分类法的是 Mobbin(按类目/页面/流程三维索引)。字体界有 Vox-ATypI,界面没有,因为界面 18 个月换一代,写进标准就过时。

附深挖书架

大盘解决"选哪种",这些站解决"这种怎么做"——全部验活,点直达分区(Mobbin 是付费产品,登录后用)

查 App 怎么做Mobbin Discover · Pttrns · Store 截图档案馆
按 App / 类目 / 页面类型翻真实产品,比 Dribbble 管用。
找 Web 灵感Awwwards · Httpster · Minimal Gallery · SaaS 落地页 · recent.design · Muzli
抠风格规范uigoodies(按风格分集) · designmd(AI 可用 tokens) · 液态玻璃专馆
以下三个需真实浏览器打开(本站点网络被反爬):SiteInspire · Land-book · Lapa Ninja