调研报告：原型图出稿

之前做 Web 项目，拿到手就开始编码，编到一半又会变得很迷糊，这是由于准备工作不充分给后续工作带来的坑。我了解的项目生命周期是这样的：（也可能不准确啦...）

• 需求分析。拿到客户提的需求进行分析；（产品经理）
• 原型图出稿。UI 设计师画原型图跟客户确定是否页面大致做成这样；（产品经理）
• 设计表结构。原型图确认之后，分析业务，这一过程要考虑表之间关联关系；（开发人员）
• 开发代码。原型图帮助开发人员理清做出来的东西像什么样子，表结构帮助开发人员确认功能如何开发；（开发人员）
• 测试代码。写测试案例，覆盖尽可能多的应用场景，让代码变得健壮；（开发人员 + 测试人员）
• 运维。服务器选择/购买+环境搭建+部署代码；（运维人员）
• 交付项目。前面每一步都按部就班，编写对应的文档，这一步就会变得很简单，汇总完整的开发流程文档，方便后续维护人员修复 bug 或者扩展功能。（运维人员）

就我个人来说，前面关注点大多放在开发、测试和运维。对于需求分析、原型图出稿和表结构设计没怎么接触。很多项目组开发都会忽略其中一至两点，但在我看来缺一不可。

---

本文调研原型图出稿的 "硬件"，使用什么软件制作原型图，相关的素材网站、学习教程等。

1. 原型图设计工具

• Axure RP。老牌设计工具，貌似对中文支持不是很好，但有汉化包可以解决这一问题；
• 磨刀。国产工具，可在浏览器在线编辑，也可以下载客户端本地编辑。使用文档比较齐全，视频教程也很 nice；
• xiao piu。

2. 原型图设计的页面比较单调，需要加点图片、图标等点缀。这就需要 photoshop。常见的抠图、修图等。推荐一本 ps 入门书 《好学、好用、好玩的 Photoshop》,不像板砖那么厚，有很多插图，看着都能懂。（这周刚好买了本二手书，费用：¥18）

3. 使用 ps 抠图/修图都需要图片，图片从哪来？？网上有很多图片素材网站，多逛逛总有适合的图片，也能培养自己的审美，看的多了有比较了也就知道什么好看了。收集的素材网：

• 创客贴
• 包图网
• 千图网
• 昵图网
• 花瓣网

4. 除了图片也会用到图标，现在图标基本都用字体库代替而不是纯图片了。图标库有：

• iconfont
• font-awsome

在做移动端如微信小程序底部 bar 会用到图片而不是图标，使用 ps 慢慢修吧。

5. 有时候对图片有要求，要用矢量图，相关设计软件有 ai（Adobe Illustrator）

吐槽一下：Adobe 的正版软件 Illustrator 和 photoshop 单独购买都是 3300 元。去网上下载试用期只有一个月，找序列号真是累死人，试了好多都不管用。有人说下载注册机，装个软件麻烦的一逼。