同一个按钮,
两种世界之间隔着结构。
「AI 味」不是配色问题,也不是圆角问题。它是层级被抹平、约束被去掉、每个元素都拿同样的分量说话。 这一页把八个界面元素各用一套真实存在的视觉语言重做一遍:左边是常见的那种做法,右边是它本来的样子。 按住左下角的开关,或者随时按 D。
对照 · 操作控件
八档
操作控件
铁路行车控制台 · 硬质键帽 / 围栏 / 护盖按键的重要性不是标出来的,是做出来的:圈高、键隙、围栏和护盖各承担一层含义,颜色只负责最后一层。危险操作有物理闭锁,所以不会误触。
表单与校验
工业测量仪表标签 · 标注线 / 公差 / 单位制标注线决定字段怎么排,单位与公差决定它们要多宽。错误指名道姓:说清哪个字段、为什么不行、改成什么才行,并与字段建立可访问关联。
导航与定位
日式车站导向标识 · 视认距离 / 色带 / 指向先把「隔多远要看清」定下来,字号和对比就被倒推出来了。当前位置用色带与指向说清楚:不靠变淡的背景,不靠猜。
数据表格
会计分类账 · 等宽对位 / 表线逻辑 / 合计数字右对齐并按小数点对位,横向扫一列就能看出量级。表线只在分组处出现,合计行用双线切断。这两条让表格从「一堆行」变成「有结论的表」。
空状态
排字车间校样 · 版口 / 页码规矩线 / 校样标记空页面是排版问题。用规矩线标出版面结构,用一行有信息量的实义文字说清现状和下一条路,不靠插画撑高度,也不用「暂无数据」这种等于零的文案。
反馈与状态
航空检查单 · NOTE / CAUTION / WARNING 分级不可忽略性决定形态,不是颜色决定。可以忽略的写在原地,不能忽略的必须进视线;最严重的那一级中断操作并要求明确确认,而不是三秒后自己溜走。
搜索与筛选
图书馆卡片目录 · 检索语言 / 抽屉 / 命中反馈筛选不是一排彩色胶囊,是一句可读、可改写的检索式。找不到结果时,把它把你的意图读成了什么原样回显出来 —— 用户能自己改对,而不用重新猜。
内容卡片与列表项
瑞士国际主义 · 网格系统 / 字重层级 / 图录层级由字重与网格建立,不由容器建立。同一份网格上,字号、字重、对齐和留白就能说清主次。去掉卡片,信息反而更好扫。
这一页是怎么做出来的
八个标本各自独立成页,外壳只用一种版式装它们。所有示例数据都是为说明问题编出来的,不是真实案例; 所有规范引用都写明了出处的名字。出处核对不到的地方标成「推论」。说得出口的判断,和查不到就得承认的判断,是两件事。
- 字体Sitka Text / Bahnschrift / Noto CJK / Consolas,全部为本机字面。没有下载任何字体文件,所以换一台没装这些字体的机器,字面会回落。
- 规矩线页面上的发丝线、方括弧和键栏记号由一枚规矩引擎读实时布局盒绘制,按设备像素比取整,窗口一变就重新求解。
- 数据表格行、条目、日志、错误文案均为示意。价格、客户、性能数字一概没有。
- 对照两版内容都在 DOM 里,不是脚本拼出来的字符串;关掉 JavaScript 仍然能看到当前那一版的结构。