4.4 视觉优化

视觉的本质不是「好看」，而是「不分散用户注意力」。越克制的设计，越能让产品本身成为主角。

视觉规范速查表

视觉要素	规范	为什么
字体	标题用粗体无衬线字体（如 Inter/Lato），正文用细字重	无衬线字体屏幕可读性最好，粗细对比建立层次感
颜色	主色 + 辅助色 ≤ 3 种，全站统一	颜色越少越克制，用户注意力越聚焦在产品上
留白	产品图周围留白越多，越显高级	留白让视觉「呼吸」，减少压迫感，提升品质感
图片规格	全部压缩至 <200KB（工具：Squoosh.app）	每减少100KB，页面加载快约0.1秒
加载速度	目标分数 >60（Shopify Speed Report）	加载超过3秒，流失率超过53%

配色的实操建议

• 主色（Primary）：用于 Add to Cart 按钮、标题强调、Logo

• 辅助色（Secondary）：用于次级按钮、标签背景、分割线

• 中性色（Neutral）：白色/浅灰用于背景，深灰用于正文

• 警告色：仅在限时标签、库存警告等地方使用红/橙色，不要滥用

→ 配色工具推荐： · Coolors.co — 一键生成配色方案，可锁定已选颜色继续生成 · Adobe Color — 支持色轮调色，可导出颜色代码 · 竞品参考 — 直接在竞品网站右键「检查元素」，看他们的颜色代码

图片处理工具清单

工具	用途	费用
Squoosh.app	批量压缩图片到 <200KB，浏览器直接用	免费
remove.bg	一键去白底，生成透明背景图	免费（每月50张）
Photoroom	批量去背景+场景合成，效率高	免费/付费
Canva	批量加水印、调整规格、制作 Banner	免费版够用
TinyPNG	批量压缩，支持 PNG/JPG/WebP	免费（每月20张）