Design Language · morphism
设计语言（morphism）对比与选型
「拟物化 / 扁平化 / Material / 玻璃拟态……」这些名字经常被并列，但它们不在同一根轴上 ，而且有几类是整套系统、有几类只是一层表面处理 。
这一页用同一组组件 把它们并排渲染，然后给出本项目的选型。
01 先分清轴表面处理轴（下面这条）与信息密度轴（极简 ↔ 极繁）是正交 的，可以任意组合。
← 物质感 / 仿真实体 抽象 / 纯信息 →
三个容易搞混的点：
Material / Fluent / Apple HIG 不是"风格"，是平台的产品语言 ——它们绑定图标体系、动效物理与整套组件库。Web 工具套用它，会显得"像别人的产品"。
极繁主义不在上面这根轴上 ——它说的是信息密度与装饰量，可以和"半扁平"自由组合（我们选择"高密度但克制"）。
极简主义也不是"无阴影" ——它说的是删减到只剩必要元素，属于信息轴；很多"极简"设计照样有精细的层级阴影（本项目的目标就是这种）。
02 同一组组件，九种渲染样本取自本产品的真实控件：主按钮、筛选标签、院校结果行、地图浮层。请重点比较可读性 与"一眼看得出能不能点" 。
筛选
工科 0816
10486 武汉大学 081602 摄影测量与遥感 · 拟招 3 人
优点 ：控件"能点"这件事毫无歧义。代价 ：纹理/渐变/描边全部在抢数据的注意力；暗色主题几乎无法优雅实现；维护成本极高。排除 ——但保留它的内核：让可操作性显形 （现代做法是层级+状态，不是画皮革）。
筛选
工科 0816
10486 武汉大学 081602 摄影测量与遥感 · 拟招 3 人
优点 ：亲近、有趣，适合面向青少年的消费产品。代价 ：厚重阴影占空间，信息密度被迫下降；严肃性不足。排除 ——择校是压力场景，用户要的是"可信、快"，不是"可爱"。
筛选
工科 0816
10486 武汉大学 081602 摄影测量与遥感 · 拟招 3 人
看起来漂亮，但不能用 ：控件与背景对比度极低 （文字远达不到 4.5:1），无法区分"可点"与"不可点" 。这套风格在 2020 年后基本被业界放弃。排除 ——与 §3.7 的可访问性底线直接冲突。
筛选
工科 0816
10486 武汉大学 081602 摄影测量与遥感 · 拟招 3 人
优点 ：有语义 ——半透明层读作"浮在某物之上"。用在地图之上的浮层 很贴切（地图本身就是它的背景）。代价 ：文字对比度不稳、GPU 开销、暗色/亮色双主题都要单独调；当整站底色用就变成噪声。局部使用 ——只允许出现在地图或图表的浮层 上，且必须有降级。
Material Design Material 3
筛选
工科 0816
10486 武汉大学 081602 摄影测量与遥感 · 拟招 3 人
优点 ：文档与组件生态最完备，可用性经验成熟。代价 ：它是 Google 的产品语言 ——胶囊按钮、大圆角、紫色调色板会让人一眼认成"Google 风格/别人的产品"；与本项目的制图气质冲突。不套用 ——只借鉴它的动效与可用性经验。
筛选
工科 0816
10486 武汉大学 081602 摄影测量与遥感 · 拟招 3 人
优点 ：亚克力材质（模糊+饱和）在桌面端很精致，"揭示高光"的交互思路不错。代价 ：同样是平台语言；亚克力依赖 backdrop-filter，在低端设备会掉帧——与我们的性能预算冲突。不套用 。
筛选
工科 0816
10486 武汉大学 081602 摄影测量与遥感 · 拟招 3 人
优点 ：干净、性能好。代价 ：零圆角 + 零阴影 导致层级全靠颜色，一旦颜色不够用（我们有 5 类筛选维度），可点的东西就"塌"进背景里；也最容易做出一堆"傻白"的界面。过度了 ——我们保留它的一半。
筛选
工科 0816
10486 武汉大学 081602 摄影测量与遥感 · 拟招 3 人
优点 ：扁平打底（干净、快、好做暗色），深度只用于表达层级与状态 （卡片浮起 1px、选中项左侧竖条、hover 变色）。可读性与可操作性同时成立。代价 ：需要有纪律——"阴影只用来表达高度，不作装饰"。采纳 。
筛选
工科 0816
10486 武汉大学 081602 摄影测量与遥感 · 拟招 3 人
找到 87 所 · 湖北省 12 所
基线与上面的半扁平 完全一致，唯一叠加是：当浮层压在地图/图表之上时，用玻璃 （模糊 + 半透明白 + 细描边）——因为它确实"浮在地理之上"，语义成立。采纳 ，边界写在 §3 的规则里。
03 评分与结论评分维度取自本项目的硬约束：数据密集、有可访问性底线（§3.7）、有性能预算、要亮暗双主题、单人维护。
风格 可读性 可访问性 性能 数据密集工具 暗色主题 维护成本 结论
拟物化 中 中 中 差 差 高 排除 粘土拟态 中 中 中 差 中 高 排除 新拟物 差 差 好 差 差 中 排除 玻璃拟态 中 中 差 中 中 中 局部 Material 3 好 好 好 好 好 低 不套用 Fluent 好 中 中 好 好 中 不套用 扁平化 中 中 好 中 中 低 过度 半扁平 Flat 2.0 好 好 好 好 好 低 采纳 半扁平 + 玻璃浮层 好 好 中 好 好 中 采纳
04 落地规则（写进 UIUX.md 的部分）
基线是半扁平 ：扁平打底 + 深度只表达层级。阴影只有三档（sm 按钮 / md 卡片 / lg 抽屉弹层），阴影的颜色永远是透明黑，绝不用不透明灰 。深度即语义 ：浮得越高 = 越"临时"（按钮 < 卡片 < 抽屉 < 弹层）。同一层级的元素必须用同一档阴影——否则层级读不出来。可操作性靠状态显形 ，不靠仿真：hover 变色、`aria-pressed` 选中态、焦点环 2px、光标变化。这是从拟物化继承的唯一内核 。玻璃只允许出现在"地图/图表之上的浮层" ：浮动结果卡、地图控件、底部抽屉。规则：模糊 10–12px、白色 70–75% 底、1px 白描边；必须 给不支持 `backdrop-filter` 的浏览器降级为不透明白底。禁止清单 ：新拟物（对比度不达标）、粘土（气性不符）、极繁装饰（噪声）、平台语言的组件形状（胶囊按钮 / 大圆角 / Material 调色板）。极简是"密度轴"的选择，不是"没有阴影" ：我们的信息密度偏高（这是工具的优点），但装饰量压到最低——这一条正是 refactoring-ui 的"先做灰阶、再加颜色"。
05 那我该怎么选？——一套可复用的流程不要问"哪个风格最好"（无穷比较，永远选不完）。要问"我的约束把窗口压到多小 "。风格是约束的输出 ，不是审美的输入 。
先记住这根阶梯：越靠上层越耐久，越靠下层越短命。 绝大多数都在最下面那层 。每年都会有新的"XX-morphism"——判断方法只有一句：它改的是结构，还是只改了表面的皮？
层级 典型寿命 这层放什么 本项目的决定
结构 10 年+ 布局范式、信息架构、交互模型
布局 B（分屏联动）；筛选即时 + URL 同步；列表 ↔ 地图互指
排版 5–10 年 字体选择、字阶、行高、信息密度
IBM Plex Sans + Mono（中文走系统栈）；12/14/16/18/20/24/30/36；密度舒适
颜色 2–5 年 色板、色彩语义
地形图制图配色：水系青蓝 #0F6E7B + 等高线棕 + 冷调灰
表面 1–3 年 圆角、阴影、模糊、材质——morphism 全在这层
半扁平打底 + 玻璃只浮在地图上 ；圆角 4/6/8；阴影三档
六步流程（任何项目都能复用）
写死 5 条不可谈判的约束 （可访问性 / 性能 / 双主题 / 定位 / 维护成本）。约束越硬，后面越省事 ——它们会替你淘汰候选。用约束做淘汰，不用审美做淘汰。 凡是与硬约束冲突的，无论多好看，直接出局。这一步通常能砍掉 80%。看剩下的窗口有多大。 如果只剩 1–2 个刻度（我们只剩"半扁平⇄扁平"），就说明选型已经收敛，不必再找。定基线，不定"风格"。 基线 = 表面轴上一个刻度 + 密度轴上一个刻度。只选一次，然后冻结 （建议至少 6 个月）。留 1–2 处局部例外，这才是辨识度的来源。 全局平静 + 一处破例，远好过处处用力。我们的例外：图廓刻度、mono 数据、地图上的玻璃浮层。写禁止清单。 比"选了什么"更重要的是"不做什么 "——它能防止半年后你自己（或 AI）手滑把新拟物加回来。
什么时候该停止想风格？ 当你发现结构层已经定了 （用户怎么找到他要的东西）、排版层已能保证可读 的时候。而"陌生人 30 秒内得到价值"跟这层关系不大 。
对一个还没上线的作品集项目，把时间花在 M1 上，比花在第十种 morphism 上值一百倍。