上周帮朋友改一个企业官网首页，他把导航栏做成了横向滚动条+渐变色+微动效三连击，结果客户第一句就问：‘这符合咱们行业设计规范吗？’——我当场愣住。其实很多新人一上来就想炫技，却忽略了网络设计里最硬核的底子：规范。
别急着画高保真，先搞懂‘规矩’在哪
规范不是束缚，是让页面在不同设备、浏览器、网速下都能稳稳落地的‘地基’。比如银行类网站禁用大段动画，政务系统要求对比度≥4.5:1，电商详情页按钮尺寸不能小于44×44px……这些细节，全藏在专业书籍里。
《Web UI Design Patterns 2023》（英文原版）
不讲理论，直接甩出300+真实案例截图+标注说明。比如‘登录页错误提示’这一节，对比了12家主流平台的文案位置、图标样式、颜色选择，旁边还附上WCAG 2.1对应条款编号。适合边查边改，像翻字典一样用。
《前端架构：从入门到微前端》第4章 ‘CSS 设计系统’
很多人以为设计规范只是UI的事，其实前端实现才是落地关键。这本书用BEM命名法+CSS自定义属性+PostCSS插件组合，手把手搭出可维护的设计Token体系。里面一段代码特别实用：
:root {
--color-primary: #2563eb;
--spacing-xs: 4px;
--radius-sm: 4px;
}
.btn {
background-color: var(--color-primary);
padding: var(--spacing-xs) calc(var(--spacing-xs) * 3);
border-radius: var(--radius-sm);
}《用户体验要素》（Jesse James Garrett 著）
经典老书，但第五层‘表现层’至今不过时。它把‘为什么首页Banner要限制3张轮播图’‘表单字段顺序怎么影响转化率’这些事，用用户心智模型拆得明明白白。我带实习生时，让他们先读完这一章再动手画线框图。
《中国互联网产品设计规范白皮书》（信通院2022版）
国内团队必看。明确写了适老化改造要求（如‘文字可放大至200%不丢失信息’）、无障碍标签写法（aria-label必须中文）、甚至小程序顶部状态栏高度标准。有次我们做政务小程序，靠它避开了三个审核驳回点。
《Design Systems》（Nathan Curtis 著）
讲怎么把规范变成团队能用的活文档。里面有份真实的‘按钮组件卡片’模板：左侧是视觉稿，中间列API参数（size / variant / loading），右侧写使用禁忌（‘禁用在模态框底部同时出现两个primary按钮’）。我们组现在所有组件库文档，都是照这个格式抄的。
书不用全读完，挑你正做的项目相关章节精读。比如明天要交后台管理系统的视觉稿，就重点啃《Web UI Design Patterns》里的‘Data Tables’和‘Admin Dashboards’两章；如果在做适老化改造，信通院那本白皮书第7章直接打印出来贴工位上。