你蹲在电脑前盯着空白PS文档第3个小时了，新建画布时手抖选了1920px宽度，结果老板突然说"改成手机版优先设计"。这时候才明白，那些建站教程里轻飘飘说的"从需求分析开始"，实际操作时跟拆定时炸弹差不多——剪错线就会原地爆炸。
一、别急着打开Photoshop
新手最常踩的坑就是抓起设计软件就干，我见过最惨的例子是设计师按 1440px宽度 做了全套页面，开发时发现要适配暗黑模式，结果所有渐变色都得返工。说真的，先搞明白这三个问题能让你少改20稿：
- 用户用手机看还是电脑看多？ （蹲厕所刷手机和办公室用大屏的体验天差地别）
- 网站要展示商品还是收集用户信息？ （这决定你要重点布置产品图还是表单）
- 后续要不要加新功能？ （比如突然要直播功能会不会毁了现有布局）
（突然想到，其实新手如何快速涨粉的关键，就是把用户当路痴——网站动线要像宜家出口指示那么明确）
两天改八次的规划阶段
看这张常见翻车场景对比表：
| 错误操作 | 开发阶段补救成本 | 正确操作 |
|---|---|---|
| 没做网站地图 | 3倍工时 | 先用XMind画 功能树 |
| 跳过竞品分析 | 上线后被投诉抄袭 | 收集20+同类站点截图 |
| 忽视内容管理系统 | 数据迁移要重写 | 提前确认 WordPress 或定制开发 |
| 色彩方案随便定 | 引发色弱用户投诉 | 用 Adobe Color 检测对比度 |
上周有个学员把登录按钮做成淡灰色，结果用户找注册入口花了10分钟。各位，重要按钮的色相要和背景形成 30%以上明度差 啊！
刀尖舔血的原型设计
Q：低保真原型要详细到什么程度？
A：记住20%法则——画出 核心页面20%的交互点 就行。我常用 Figma自动布局 快速堆组件，重点是标清楚跳转逻辑。
Q：什么时候该定视觉风格？
A：等甲方确认信息架构后再出手。有次我给教育机构做方案，参照牛津官网用了深蓝色，结果老板说想要"托儿所般的**感"，真想当场撕稿。
Q：移动端和PC端要分开设计吗？
现在流行 移动优先策略 ，但别忘了PC端那些老板们才是付款的人啊！折中方案是用 12列栅格系统 ，保证两端显示都不崩。
开发阶段的救命稻草
接外包的老王跟我说，最怕设计师给 切片标注不规范 。比如导航栏图标用PNG-24导出，导致加载速度拖慢2秒。这些细节要注意：
- 图标统一用 SVG格式 并控色
- 背景纹理尺寸必须 是偶数像素
- Hover效果要标清楚 过渡时间
- 文字行高坚持用 1.5倍基准值
最近发现个神器 Zeplin ，能把设计稿直接转为开发文档，比截图画红框专业多了，建议你们拿去忽悠甲方。
自问自答环节
Q：验收时发现按钮位置偏移怎么办？
立即掏出 浏览器开发者工具 ，改成绝对定位先应付检查。但长期方案是让前端用 Flex布局 加 gap属性 。
Q：总被客户催着出原型怎么破？
提前准备3套 占位模板 ，把客户logo丢进去看效果，争取多3天设计时间。亲测这招能降低50%改稿率。
Q：不会写代码能做网站设计吗？
会用Chrome检查元素就行。现在很多建站工具像 Webflow 拖拽生成代码，不过要收168刀/月——你可以说这是专业软件授权费，让甲方买单。
小编揉着发红的眼睛说：别信什么"三天速成建站大神"的鬼话，自己拿WordPress建个博客摔打两周，比看三十篇教程都管用。下次老板催稿时记得问三个灵魂问题：给钱吗？给时间吗？改三次以上加钱吗？保证你的设计效率突飞猛进！
