拆解一套界面，最容易犯的错是「照着截图摆积木」——位置对了，气质还是不对。气质来自规则，不来自排版。
栅格
它用的是很硬的两栏：左侧一列文字，右侧一块图像或数据面板。比例大约 5:7，中间一条细线分隔。没有三栏，没有瀑布流。
关键在分隔线：1px，透明度很低，从不断开，也不加圆角。整页的分隔线在视觉上是一条连续的竖线，哪怕中间被标题打断。
字阶
只有四档：
- 超大号中文标题（粗，字距收紧到 -3%）
- 超大号英文标题（超宽字距 30%，全大写，细）
- 正文（中文，行高 1.8）
- 标注（等宽，10–11px，字距 14%，全大写，永远灰色）
没有第五档。所有「稍微大一点」的需求都被压回这四档之一，这是它看起来干净的根本原因。
编号系统
01 / 02 / 03、010 / 010、Si // 01、[ REC ]。
编号承担三件事：给内容排序、暗示「这是一个系统」、以及在没有装饰的情况下填满空白。它比图标便宜，也比图标稳定。
我给自己定的规矩是：编号只在列表、状态、面包屑里出现，正文里一个都不放。
状态语言
- 亮色方块 = 当前 / 可点
- 细线 = 边界
- 灰字 = 元信息
- 闪烁的
●= 正在运行 0 % Updating...= 进度
这套语言一致的可怕之处在于，没有任何一个状态是用颜色以外的东西表达的。没有阴影，没有描边变化，没有缩放。
哪些不能抄
- 游戏原画和角色立绘。那是 IP，不是 UI。
- 大量切角符号堆叠。切角是强调，用满一屏就变成装饰性噪音。
- 深色底 + 荧光黄满屏。这是它的海报，不是它的界面。
落到自己的站上
我把这套东西压成六个 CSS 变量：底色、墨色、信号色、线色、灰阶、切角尺寸。剩下的全部由排版和层级完成。
结果是：换一个信号色，整个站就换了一种性格——但依然认得出来是同一套规则。
抄结构，别抄截图。
COMMENTS留言 (0)
LOGIN REQUIRED