朋友创业做了一个B2B工业品平台，预算有限请不起UI设计师，自己用Canva拖了几张图拼了个首页，发给十个潜在客户看，反馈是"看着不太正规，像个人做的"。他来找我帮忙，我说不需要学设计，用对工具和按对流程走，非设计师也能做出看着不业余的网站页面。两周后他用Figma重新画了框架、配了一套颜色规范、换了一套字体，再把新版发出去，十个人里有七个说"这个看着像正经公司了"。
设计网站页面这件事，非设计师和专业设计师的差距不在于审美天赋，而在于工具链条和检查清单。设计师知道用什么工具做什么事、知道每个环节该检查什么。下面把这套工具链和设计原则拆开讲，照着走一遍，出来的页面至少不会让人一眼就觉得不专业。
网站页面设计的完整工具链：六个工具覆盖从框架到上线的全部环节
| 1 | Figma — 画页面框架和线框图，确定每个模块的位置、大小、间距，免费版足够用 |
| 2 | Adobe Color — 配色方案生成器，一键出主色+辅色+中性色全套色板，免费在线用 |
| 3 | Google Fonts — 免费可商用字体库，选一套标题字体+一套正文字体，保证可读性 |
| 4 | Coolors — 渐变和配色微调工具，快速生成按钮、卡片、banner的渐变背景色 |
| 5 | Unsplash + 图片处理 — 高质量免费商用图片，配合压缩工具控制页面加载速度 |
| 6 | PageSpeed Insights — Google官方的页面性能检测，设计做得再好加载慢也白搭 |
一、用Figma画页面框架，先定结构再上色，别一上来就抠细节
非设计师做网站页面最常犯的错是一上来就选颜色、选字体、找图片，结果每个元素单独看都还行，拼在一起就很乱。正确的顺序是先用Figma画低保真线框图，把每个模块的位置、大小、间距定好，确认结构没问题了再上色。Figma免费版完全够用，注册一个账号，新建一个Frame选Desktop 1440×900的画布就可以开始了。
低保真线框图只画四个东西
灰色矩形代替图片、灰色横条代替文字、确定每个模块的高度和宽度、标注模块之间的间距。不要用任何颜色，不要放真实图片，不要纠结文字内容。
Figma三个必学操作
Frame工具（画页面容器）、Auto Layout（自动排版和间距控制，按Shift+A）、Constraints（元素在不同屏幕尺寸下的响应规则）。这三个学完就能画出结构清晰的线框图。
用真实网站截图当参考底板
找三个你喜欢的同行业网站首页，截图贴到Figma里当参考底板。对比它们的结构：导航栏多高、banner占多大面积、产品区几列排列、页脚放了什么。照着结构画，不会出错。
一个标准的网站首页线框图通常包含这些模块，从上到下排列：导航栏（约60-80px高）、主视觉区（banner，约500-700px）、核心价值或产品展示区、客户案例或数据展示区、行动号召区（CTA按钮或表单）、页脚。不是每个网站都要放全，但至少要有导航、主视觉、核心内容和页脚这四个基础模块。
二、Adobe Color搞定配色，一套色板用到底，别超过三个主色
配色是非设计师最头疼的环节。Adobe Color（color.adobe.com）有一个功能叫"色彩规则"，你选一个主色，它自动给你生成一套协调的配色方案。支持类比色、互补色、三色组合等多种规则，拖拽色轮上的点就能实时预览效果。
主色（Primary）
1个
品牌色，按钮、链接、重点元素
辅色（Secondary）
1-2个
次要元素，图标、标签、分隔线
中性色（Neutral）
3-4个
文字、背景、边框，从深灰到浅灰
功能色
3个
成功绿、警告黄、错误红
配色实操四步法
- 第一步：打开Adobe Color，在"探索"里搜索你行业的英文关键词（比如"industrial""health""education"），看别人配好的成熟方案，选一套顺眼的。
- 第二步：复制色值到Figma，建一个色板页面，把主色、辅色、中性色、功能色排好。
- 第三步：主色用在按钮、链接、重点标题上，占比不超过页面面积的10%。中性色（白、浅灰、深灰）负责大面积背景和文字，占70%以上。辅色和功能色点缀使用。
- 第四步：用Coolors的"Contrast Checker"功能检查文字和背景的对比度，正文对比度至少4.5:1，大标题至少3:1，低于这个值的配色阅读体验会差。
配色最核心的原则就一条：中性色打底，主色点睛，辅色点缀。非设计师最常犯的错是把主色铺得到处都是，按钮是蓝的、背景也是蓝的、卡片也是蓝的，整个页面刺眼且没有层次。记住：白色和浅灰是你最好的朋友，让它们占大部分面积，颜色只用在需要用户注意的地方。
三、字体选两套就够，一套标题一套正文，多了反而乱
字体选得好，页面气质就定了大半。Google Fonts上有上千款免费可商用字体，但非设计师只需要从中挑两套：一套用于标题（有性格的、偏粗的），一套用于正文（干净、好读的）。
| 网站风格 | 推荐标题字体 | 推荐正文字体 | 适合的行业 |
|---|---|---|---|
| 现代科技风 | Inter（粗体）、Poppins | Inter（常规）、Roboto | SaaS、互联网、IT服务 |
| 专业稳重风 | Playfair Display、Lora | Source Sans 3、Noto Sans | 金融、法律、咨询、B2B |
| 简约清新风 | DM Sans、Work Sans | Nunito、Open Sans | 教育、健康、生活方式 |
| 中文网站 | Noto Sans SC（粗体） | Noto Sans SC（常规） | 所有中文为主的网站 |
字体使用三个容易犯的错
- 用了超过三种字体：一套标题+一套正文是最优解。三种以上字体会让页面像拼凑出来的，缺乏整体感。不同层级的区分靠字号和粗细，不靠换字体。
- 正文字号太小：桌面端正文至少16px，移动端至少15px。很多网站正文用14px甚至12px，在1080p以上的屏幕上阅读体验很差。Google的Material Design规范建议正文用16px。
- 行高没设置：正文行高设为字号的1.5-1.75倍（比如16px的字号，行高24-28px）。行高太低文字挤在一起，太高则显得松散。CSS里写line-height: 1.6是最安全的做法。
四、图片素材找Unsplash，用对了是加分项，用错了直接拉低档次
Unsplash上有超过300万张高质量免费可商用图片，覆盖了几乎所有行业场景。但图片选得不好，反而会毁了页面的整体质感。
选图三个标准
清晰度足够（至少1200px宽）、色调和你网站的配色协调、内容和你行业的真实场景相关。不要用那种明显是外国人的握手商务图放在中文网站上，一眼假。
压缩是必须的步骤
Unsplash原图通常2-5MB一张，直接放网站上会导致页面加载好几秒。用Squoosh或TinyPNG压缩到200KB以下再上传，视觉上几乎看不出差别但加载速度差3-5倍。
统一图片风格
全站图片保持统一的调色方向：要么都是暖色调、要么都是冷色调、要么都是低饱和度。一张高饱和暖色图配一张冷色黑白图，视觉上会很跳脱。
如果预算允许，可以考虑付费图库如Shutterstock或Envato Elements，图片质量和独家性比Unsplash更高，避免你的网站和同行用了同一张图。但如果只是做个企业展示站，Unsplash的质量完全够用了。
五、四个设计原则，比学任何设计软件都管用
工具会用了，还得知道什么算"好看"、什么算"不好看"。设计不是一个玄学，背后有明确的规则。四个原则，每个都在约束你的设计决策。
原则一：亲密性（Proximity）
相关的元素放在一起，不相关的分开。标题和它下面的正文间距要小于标题和上一段正文的间距。视觉上让用户一眼看出"这些是一组的"。具体做法：同组元素间距设为16-24px，不同组间距设为48-64px。
原则二：对齐（Alignment）
页面上每个元素都应该和另一个元素有视觉上的对齐关系。不要左对齐一段文字、居中一段文字、右对齐一个按钮。选一种对齐方式（通常是左对齐），整页统一。Figma的Auto Layout能帮你自动对齐。
原则三：重复（Repetition）
同类元素用同样的样式。所有按钮用一样的圆角、一样的颜色、一样的内边距。所有卡片用一样的阴影、一样的间距。重复创造一致性，一致性让人觉得专业。专业设计师和非设计师最大的差别就在这。
原则四：对比（Contrast）
如果两个元素功能不同，就让它们看起来明显不同。标题比正文大且粗、主按钮比次按钮颜色深、重点文字用不同颜色标注。对比不够的页面看起来是"糊成一团"的，用户不知道重点在哪。
六、上线前用PageSpeed Insights测一遍，设计好看加载慢等于白做
页面设计完上线之前，最后一件事是打开PageSpeed Insights（pagespeed.web.dev），输入你的网址跑一遍检测。它会给你一个0-100的评分和具体的优化建议。移动端得分至少要到60分才算及格，80分以上算优秀。
| 常见问题 | 原因 | 怎么修 |
|---|---|---|
| 图片太大 | 直接用了Unsplash原图或设计稿导出的大图 | 用Squoosh压缩到200KB以下，优先用WebP格式 |
| Google Fonts加载慢 | 加载了太多字体粗细和字符集 | 只选实际用到的字重（通常400和700就够），去掉不需要的语言子集 |
| 未使用的CSS/JS | 模板或框架自带的样式和脚本没删 | 用Chrome DevTools的Coverage面板找出未使用的代码并移除 |
| 没开缓存 | 服务器没配置静态资源的缓存策略 | 在服务器上设置图片、CSS、JS的缓存过期时间至少30天 |
设计做完之后，落地到代码才是关键
Figma画得再好看，如果前端还原度低，实际效果会大打折扣。如果你用的是WordPress建站，选一个和Figma设计稿结构接近的主题，调整CSS来匹配配色和字体。如果用的是UC建站系统这类支持HTML直出的方案，可以直接把Figma的设计参数（色值、字号、间距）搬到前端代码里，还原度能做到90%以上，而且HTML直出的页面结构对SEO收录更友好。
还有一个容易被忽略的点：移动端的显示效果。PageSpeed Insights默认检测的是移动端，因为现在超过60%的流量来自手机。在Figma里做设计时就要建一个375px宽的Mobile Frame，把桌面端的布局重新排一遍。不要等代码写完了才发现手机上看全乱了。
回过头看开头那个做B2B平台的朋友，他后来把整个流程重新走了一遍：先用Figma画了线框图定了六个模块的布局，用Adobe Color从行业配色库里挑了一套深蓝+橙色的方案，在Google Fonts选了Inter做标题和正文，Unsplash找了三张工业场景的图压缩到150KB以内，四个设计原则逐条检查了一遍，最后PageSpeed Insights移动端跑出了78分。虽然离专业设计师的水平还有差距，但至少不会再有人看了说"不正规"。非设计师做网站页面，目标不是拿设计奖，是不让设计成为用户不信任你的理由。
