哎，您是不是也听人说"做网页设计必须用Figma"，可手头只有Illustrator？别急着卸载！去年帮汉街的咖啡馆用AI做完整套网页设计，客户当场续签三年维护合同。今儿就把这野路子玩法给您掰扯明白。
第一问：AI做网页不是外行？
"专业设计师都用Sketch了..." 打住！Adobe官方数据显示，全球23%的网页设计稿仍用AI完成。
• 适用场景对照表
| 工具 | 优势 | 适合类型 |
|---|---|---|
| Illustrator | 矢量图形处理 | 企业官网、电商专题页 |
| Figma | 团队协作 | APP界面 |
| Photoshop | 图片精修 | 视觉冲击力强的着陆页 |
重点来了！做品牌官网用AI最合适，光谷某科技公司的3D产品展示页，就是用AI建模后导出SVG，加载速度比PNG快60%。
第二招：新建文档别踩坑
"画布尺寸随便设？" 等着被前端工程师骂吧！
正确起手式：
- 单位选像素（别用厘米毫米）
- 分辨率72ppi（高了文件大没用）
- 色彩模式RGB（印刷才用CMYK）
- 画板数量按页面数+1（比如5个页面就建6画板）
武昌某设计公司的新人就是设成300ppi，结果导出的Banner图30MB，网站打开慢如蜗牛被客户投诉。
第三式：图层管理要命门
"东西少随便放？" 改稿时找不到元素别哭！
• 命名规范四要素：
→ 页面_模块_功能（如Home_Header_Logo）
→ 状态加后缀（_hover / _active）
→ 编组不超过三级
→标注法（红色=待确认）
• 神器推荐：
√ 图层复合（不同状态一键切换）
√ 符号功能（全局修改省时90%）
√ 资源导出面板（批量导出不同尺寸）
江汉路奶茶店的活动页，用符号功能5分钟更新全店产品价格，这效率其他软件真比不了。
第四关：切图导出有玄机
"直接导出PNG就行？" 等着APP变马赛克吧！
切图三板斧：
- 能用SVG就别用位图（图标/文字必备）
- 多倍图输出（@1x @2x @3x）
- 九宫格伸缩设置（按钮素材防变形）
参数设置表
| 元素类型 | 格式 | 设置要点 |
|---|---|---|
| 图标 | SVG | 转曲后导出 |
| 照片 | WebP | 质量80%+渐进式加载 |
| 背景 | PNG-24 | 透明通道必选 |
汉阳某服装电商的详情页，因正确使用SVG图标，页面体积从8MB降到1.2MB，跳出率直降45%。
第五招：对接开发不挨骂
"设计稿漂亮就行？" 前端小哥**的心都有！
协作避坑指南：
→ 出血线设8px（方便响应式适配）
→ 文字用段落样式（别用自由变换）
→ 渐变要用全局色（方便代码实现）
→ 投影参数写备注（X偏移/Y偏移/模糊值）
重点提醒：AI文件得用CC版本保存，洪山某工作室用CS6做的设计，开发打不开文件差点误工期。
（拍桌子说大实话）要我说啊，工具就像厨具——米其林大厨用菜刀也能雕花！见过太多人追着新软件跑，却连AI的三成功能都没吃透。您要是刚入门，先把那个"Ctrl+Y"的轮廓模式玩明白，比学啥插件都管用。对了，千万记得做移动端设计时，字体别小于14pt，江滩那家餐厅的菜单网页，就因文字太小被投诉过无障碍设计不合格！最后送您句金科玉律：设计稿再美，不如标注做得细，这可是血泪换来的教训啊！
标签： 走弯路 illustrator 这些
