Refactoring UI 给非设计师的 UI 实战手册(层级·留白与间距·配色系统·字体排印·深度与阴影·图片处理·收尾打磨·实战拆解)
Adam Wathan & Steve Schoger《Refactoring UI》全套笔记精华(50+ 条可照做的小技巧)。核心立场:好看的 UI 不靠艺术天赋,靠一套能背下来的具体规则——把'凭感觉'换成'查清单'。八章主线:①开局心法(从功能而非布局起步·黑白灰先行·限定选项·提前定系统,把每个反复纠结的细节变成规则)。②视觉层级 Visual Hierarchy(让重要的跳出来:不只靠字号,靠字重+颜色 3 档;次要内容靠'弱化'而非'强调';能不用标签就不用;按钮按主/次/辅 3 级分,危险操作不必又大又红;视觉层级 ≠ HTML 文档层级)。③留白与间距(从过多留白开始往回删·至少差 25% 的间距/尺寸阶梯·组间距 > 组内距防歧义·网格被高估固定宽度常更好·别按比例缩放·不必填满屏幕)。④配色(用 HSL 不用 hex·一套要 8-10 档灰+1-2 主色×9 阶+语义辅助色·预先定色阶 100-900·灰可带冷暖·调亮调暗同时提饱和·靠转色相提亮防发灰·WCAG 4.5:1/3:1 对比+换深浅方向防过艳·不能只靠颜色要配图标/箭头)。⑤字体排印(type scale 手挑不用公式·行长 45-75 字符·行高随宽度和字号反向变·基线对齐不居中·长文左对齐·链接不必都上色·全大写要加字间距·用 px/rem 不用 em)。⑥深度(光从上方来→凸起上亮下阴/凹陷上阴·阴影分大柔+小锐两层·5 档阴影表高度·扁平也能用明暗+实色阴影+元素重叠造深度)。⑦图片(用好照片别凑合·背景图配遮罩/发光保证文字对比·别放大小图标别缩小截图·用户上传图固定显示框+cover)。⑧收尾(少用边框改用阴影/底色/间距·彩色顶边框一招提质感·美化背景·重视空状态·跳出组件惯例)。外加 3 个 before/after 实战拆解(内容页/复杂表单/数据面板)。读者=做原型的 PM,术语行内解释,每条带 Why + do/don't,数值全保留。