​本文的前4步适用于公司没有产品经理的情况下。

---

Step 1 讨论 & 草图框架

所需工具：纸、笔

与客户或产品负责人讨论，了解产品的需求。讨论前带好纸笔，讨论时可以画出大概的框架草图。

若是外包项目的话，会更会费周折一点，因为对方可能只有大概的需求，功能、流程无法很快落实到纸上，因此这样的讨论和沟通需要重复多次。

手绘框架草图

---

Step 2 流程图

所需工具：Mindnode、百度脑图

Mindnode下载地址：点击进入下载页面

Mindnode 官网

结合产品需求和框架草图，可以用 Mindnode 画出流程图，把文字需求更清晰、有条理地展示出来。如下：

Mindnode 脑图绘制

或者也可以使用百度脑图进行绘制：点击进入百度脑图

百度脑图官网

Mindnode 是本地使用的，百度脑图是线上使用的，不过样式多一些，更适合线上协作。两者都可以导出 PDF 文件。

百度脑图绘制

---

Step 3 框架图 & 初步原型

所需工具：Sketch（框架图）、POP（初步原型）

Sketch这里就不过多介绍了，大家应该都知道了 : P这里是 Sketch 软件（版本 47.1）下载资源：点击进入下载页面

Sketch 官网

原型框架素材包：点击进入下载页面

内含网页流程图模板、移动线框包、迷你暗色流程线框图、iPhone框架模板、Apple Watch交互流程包。

在原型框架素材的基础上，用 Sketch 画出符合产品需求的框架图。如下：

网页流程图模板

POP—— Prototyping on Paper，一款手机 App，把纸上的东西变为原型。拍照后可在手机上编辑热区，手机上快速模拟原型动效。

POP 原是由一个仅有3个人的年轻台湾团队做出，后被 Marvel 收购，可与你的 Marvel 账户打通，Marvel 线上做的原型，这下手机浏览起来更方便啦！

POP下载链接：点击进入App Store

Snapchat on POP

---

Step 4 确定设计稿 & 原型交互

所需工具：Sketch（设计稿）、Axure（原型交互）、Marvel（原型展示）、Principle（交互动效）

Axure 是产品经理必备工具，主要作用就是用来做原型交互的。在没有设计稿的情况下，可以让客户或团队的其他人了解产品的初步原型。也是产品经理与设计师沟通的主要工具之一。

Axure PR 8 下载链接：点击进入下载页面

Axure 界面

作为设计师，我们或许不必用 Axure 了，可以用 Skecth 设计完后，直接上 Marvel，实现高保真交互展示。且 Marvel 有 Sketch 插件，可以一键导入。

前面讲 POP 时提到的，如果你设计的是手机 App，用 Marvel 后，就可以直接在手机上给别人演示啦。

Marvel 插件下载地址：点击进入下载页面

Marvel 官网

而 Principle 主要用于实现较复杂的交互动效，操作比 Marvel 难一些，适合有动画基础的人。

Principle 下载地址：点击进入官网

它有本地软件可提供下载，很多复杂炫酷的原型交互效果都是用 Principle 做出来的。如下：

Principle 演示

---

Step 5 完成设计 & 待开发

所需工具：Zeplin（切图、设计稿标注）、阿里妈妈（图标）、Icomoon（图标）

Zeplin 是配合着 Sketch 非常好用的一款插件，设计稿完成后，可以直接从 Sketch 导入到 Zeplin 中。Zeplin 可以帮你自动生成尺码标注、CSS 样式代码、需导出的图片（在 Sketch 中设好切片的设计稿，在 Zeplin 中可以直接导出），以及共享成员间可以备注和评论。

Zeplin 下载地址：点击进入下载页面

Zeplin 演示

Zeplin 帮我们解决了大部分开发前的准备工作，但有 Icons 的设计稿我们还需要用到 Iconfont 或 Icomoon。

要找 Icons 素材，可以上 Iconfont，由阿里妈妈 MUX 打造，它有许多成套的彩色免费 Icon Set。也可以用作 Icons 转 Font 供程序员使用。

阿里妈妈图标库网址：点击进入官网

Iconfont 官网

Icomoon 和阿里妈妈是一样的，但更棒的是它的编辑功能，设计师们再也不需要去纠结怎么把 Icon 调到画布居中的问题了，它可以挪动、旋转、放大缩小，居中、去色一个 Icon 等（虽然界面看起来有点挫）。

Icomoon 网址：点击进入官网

Icomoon 官网

---

Tips 进度管理

所需工具：Trello（任务管理）、Bearychat（团队沟通）

在此过程中，我们或许会需要用到任务管理软件，例如 Trello：点击进入官网

Trello 官网

Trello 是国外非常火的任务管理软件，据说拥有 1900 万注册用户，国际红十字会、谷歌、美国迪尔公司都在使用。

看板样式擅长处理流程化任务，适用于产品研发设计等。如下：

Trello 控制台展示

由于是英语界面，若是团队中有人对此不适应则可能无法很好得协作。这种情况可以使用中国版本的类似产品，如Tower或Teambition。

Bearychat 是中国版的 Slack，聊天群组 + 工具集成，取代 QQ 或微信作为团队工作中的及时聊天沟通工具。有在线版和本地版。下载与具体功能可上官网查看：点击进入官网。

-  END -

---

西瓜设计研究所

互联网创业 | UI设计 | 开发资源 | 教程

未经授权请勿转载，烦请留言获取（侵权必究）

© uirush.com