QUALITY · VISUAL CRAFT
全站年轻化视觉质感优化
同样是官网，有的看着像模板，有的看着像作品。差距就在质感。从配色到字距，从阴影到缓动，每一处细节都在说话。
CRAFT DETAIL / 质感打磨
质感不是玄学，是参数
质感差距往往就在几个参数里：阴影的模糊半径多 2px、字间距松 0.02em、圆角从 4px 改 8px、缓动曲线从 linear 换成 cubic-bezier。这些细节单独看微不足道，叠在一起就是"高级感"和"廉价感"的分水岭。
我们用一套质感检查清单逐项过，每一项都有明确的数值标准，不是"感觉再调调"，是"对齐到参数"。
BEFORE / AFTER / 前后对比
优化前 vs 优化后
同一套内容，质感差距一目了然。
VS
BEFORE / 优化前
常见模板感站点
- · 纯黑纯白配色，对比生硬无层次
- · 系统默认字体，字间距紧凑局促
- · 卡片无阴影，悬浮无反馈
- · 直角硬边，缺乏呼吸感
- · 动效突兀，linear 曲线无节奏
- · 图文贴边，留白节奏混乱
AFTER / 优化后
年轻化质感站点
- 深灰主色 + 军绿 + 荧光橙三段层次
- 定制字距与行高，呼吸感更松
- 分层阴影 + 悬浮位移反馈
- 4px/10px 双圆角体系，柔而不软
- cubic-bezier 缓动，动效有弹性
- 8 列网格留白，节奏规整有秩
CRAFT LIST / 优化清单
质感打磨的六个维度
每个维度都有可量化的标准，不是靠感觉调。
06
配色层次
主色、辅色、点缀色三段分明，深浅梯度不少于 5 级，告别纯黑纯白。
字体排印
字距、行高、字号阶梯校准，中英混排基线对齐，标题字重分级。
间距节奏
8 的倍数间距体系，模块内外留白分级，告别贴边与拥挤。
阴影分层
三层阴影体系（环境光 + 投射 + 高光），悬浮位移 4px，反馈明确。
圆角体系
按钮 4px、卡片 10px、容器 14px 三级圆角，柔而不软，硬而不尖。
动效曲线
统一 cubic-bezier(.22,1,.36,1) 缓动，时长分 0.25s/0.45s 两档，有弹性。