看一个网站,别看它说了什么,看它的 CSS 数了什么。我把某游戏官网的原始 HTML 和两份生产 CSS 抓下来,对字体、色值、字号、字距、线宽、过渡时长做正则统计,得到一份和直觉完全相反的结论。
一个强调色撑起全站
统计结果里出现次数最多的颜色是纯黑和纯白,紧随其后的是唯一一个强调色。它不是背景、不做发光、面积不超过一成,只出现在四个位置:左色条、反色块、编号底、hover 反馈。所谓”科技感”,八成来自这种克制。
字号两极分化
抓出来的字号集合呈两个峰:一端是 55px 以上的巨字,另一端是 11px 以下的微型注脚,中间几乎没有。也就是说设计者主动砍掉了所有”中间档”,宁可让层级断崖,也不让层级变得模糊。
18rem ─ 巨(海报感)
5.4rem ─ 展示
2.5rem ─ 区块
.875rem ─ 正文
.375rem ─ 微注脚(0.5em 字距)
三层信息三种字体
中文名一种字体,英文名一种字体,数字编号一种字体。换字体 = 换信息层级,从不靠加粗和变色来区分层级。这是最值得抄的一条:层次感不是”加个颜色”,而是给每类信息固定的字形。
换场 0.6 秒,其余全是 0.3 秒
全站 18 处 opacity .3s,8 处 transform .3s,只有整屏切换才用到 0.6–1 秒。没有一次弹跳。动效系统如果需要文档来解释,说明它已经太复杂了。
不能照搬的部分
官网是 overflow:hidden 的翻页站,博客不行——Ctrl+F、锚点、分享定位都依赖文档流。能抄的是语言(字体分工、色条、编号、直角硬线),不能抄的是形态。这次拆解最大的收获是:高级感是减法的副产品。