设计与前端
这一类里几乎没有「审美」问题,全是可测量的量:对比度是比值、图标是像素与矢量、颜色是三个通道的数值。所以判据可以写死 —— 正文对比度 4.5:1、16px 图标单独画、透明背景不能用 JPEG。
难点在于这些数值不直观。同样是 50% 亮度的黄和蓝,人眼看到的明暗差一倍;同样是 512 像素的图标,缩到 16 像素后可能完全认不出。文章都在解释「为什么不直观」,而不是罗列规则。
- HEX、RGB、HSL、CMYK 该用哪个四种颜色格式不是随便挑一个。讲清 HEX 为什么省字节、HSL 为什么适合调色、CMYK 为什么印不出屏幕上的颜色,以及「把亮度减 20% 做 hover」这类做法在暗色主题下为什么会失效。
- 流程图、思维导图、Markdown 大纲该用哪个三者的区别不在好不好看,而在信息结构:有向图、树、带顺序的树。讲清各自适合什么场景、常见反模式怎么破,以及什么时候根本不该画图。
- favicon 要几种尺寸:一份能照抄的清单十六像素的图标和五百一十二像素的不是同一张图。给出 2026 年仍然有效的 favicon 清单、maskable 的安全区、为什么改了图标浏览器不更新,以及只放一个大图会出什么问题。
- 字号与行高:正文多大才读得下去16px 正文、1.6 行高、每行 45 到 75 个字符 —— 这些数字不是审美偏好,是可读性研究的下限。讲清字号阶梯、中英文字号为什么要分开定,以及暗色模式下行高该加大多少。
- 图标用 SVG 还是 PNG:看这三点SVG 是文本、可改色、能无限放大,但它不是万能的。讲清什么时候必须用位图、内联 SVG 和外链 SVG 为什么改不了颜色、导出的 viewBox 为什么会把图标裁掉一半。
- 截图怎么截才清楚:分辨率、格式与标注同一张界面,有人截出来锐利得一像素都清楚,有人糊成一团。差别在设备像素比、缩放方式和保存格式。讲清截图从截到用的完整链路,以及文档和工单里怎么标注才有效。
- WCAG 对比度怎么算、怎么改到达标从相对亮度的 sRGB 计算公式讲到对比度比值,给出 AA 与 AAA 的精确阈值、几个常见配色的实测数值,以及半透明、渐变、禁用态这些特殊情况的判定规则。
这一类常见问题
不懂设计也能做出不难看的界面吗?
能,只要把可量化的部分做对:对比度达标、间距成体系、颜色从一个色板取而不是随手挑。剩下的「好看」很大程度是这些基础项不出错的结果。
对比度达标就够了吗?
对比度是下限不是上限。达标只保证「能读」,字号、行高、行宽同样影响可读性。文章里给的是验收线,不是设计目标。