跳到正文
UIGrammer
EN 中文

反模式 · 厚度 ·

扁平与拟物混用

扁平与拟物混用指同一屏同时出现线性图标与高光斜面元素,两种厚度语言互相打架。

症状

线性图标旁边是渐变加内阴影的按钮,或者新拟态卡片紧挨着扁平列表行。

为什么会这样

模型给每个组件采样自不同的参考,而每个参考分属不同年代的视觉风格。提示词里没有任何约束要求它们彼此一致。

规则

为整页声明一种厚度语言,并贯彻到每一个组件。

  1. 明确选定厚度层级:扁平、轻微抬升、或拟物。
  2. 图标、按钮、卡片、输入框一律照此执行,没有例外。
  3. 某个元素必须突出时,用颜色或尺寸区分,绝不用换厚度语言。

扁平与拟物混用是什么?

一屏之内同时出现 1.5px 线性图标、高光渐变按钮、新拟态按压面板和写实投影,等于同时说着四种厚度语言。厚度是一套系统,不是逐个组件做的决定:先定好这个界面要假装多「物理」,然后处处守住这条线。

修复 Prompt

贴在你现有 Prompt 之后,把这类毛病从结果里剥掉。