本文的前4步适用于公司没有产品经理的情况下。
Step 1 讨论 & 草图框架
所需工具：纸、笔
与客户或产品负责人讨论，了解产品的需求。讨论前带好纸笔，讨论时可以画出大概的框架草图。
若是外包项目的话，会更会费周折一点，因为对方可能只有大概的需求，功能、流程无法很快落实到纸上，因此这样的讨论和沟通需要重复多次。
Step 2 流程图
所需工具：Mindnode、百度脑图
Mindnode下载地址：点击进入下载页面
结合产品需求和框架草图，可以用 Mindnode 画出流程图，把文字需求更清晰、有条理地展示出来。如下：
或者也可以使用百度脑图进行绘制：点击进入百度脑图
Mindnode 是本地使用的，百度脑图是线上使用的，不过样式多一些，更适合线上协作。两者都可以导出 PDF 文件。
Step 3 框架图 & 初步原型
所需工具：Sketch（框架图）、POP（初步原型）
Sketch这里就不过多介绍了，大家应该都知道了 : P这里是 Sketch 软件（版本 47.1）下载资源：点击进入下载页面
原型框架素材包：点击进入下载页面
内含网页流程图模板、移动线框包、迷你暗色流程线框图、iPhone框架模板、Apple Watch交互流程包。
在原型框架素材的基础上，用 Sketch 画出符合产品需求的框架图。如下：
POP—— Prototyping on Paper，一款手机 App，把纸上的东西变为原型。拍照后可在手机上编辑热区，手机上快速模拟原型动效。
POP 原是由一个仅有3个人的年轻台湾团队做出，后被 Marvel 收购，可与你的 Marvel 账户打通，Marvel 线上做的原型，这下手机浏览起来更方便啦！
POP下载链接：点击进入App Store
Step 4 确定设计稿 & 原型交互
所需工具：Sketch（设计稿）、Axure（原型交互）、Marvel（原型展示）、Principle（交互动效）
Axure 是产品经理必备工具，主要作用就是用来做原型交互的。在没有设计稿的情况下，可以让客户或团队的其他人了解产品的初步原型。也是产品经理与设计师沟通的主要工具之一。
Axure PR 8 下载链接：点击进入下载页面
作为设计师，我们或许不必用 Axure 了，可以用 Skecth 设计完后，直接上 Marvel，实现高保真交互展示。且 Marvel 有 Sketch 插件，可以一键导入。
前面讲 POP 时提到的，如果你设计的是手机 App，用 Marvel 后，就可以直接在手机上给别人演示啦。
Marvel 插件下载地址：点击进入下载页面
而 Principle 主要用于实现较复杂的交互动效，操作比 Marvel 难一些，适合有动画基础的人。
Principle 下载地址：点击进入官网
它有本地软件可提供下载，很多复杂炫酷的原型交互效果都是用 Principle 做出来的。如下：
Step 5 完成设计 & 待开发
所需工具：Zeplin（切图、设计稿标注）、阿里妈妈（图标）、Icomoon（图标）
Zeplin 是配合着 Sketch 非常好用的一款插件，设计稿完成后，可以直接从 Sketch 导入到 Zeplin 中。Zeplin 可以帮你自动生成尺码标注、CSS 样式代码、需导出的图片（在 Sketch 中设好切片的设计稿，在 Zeplin 中可以直接导出），以及共享成员间可以备注和评论。
Zeplin 下载地址：点击进入下载页面
Zeplin 帮我们解决了大部分开发前的准备工作，但有 Icons 的设计稿我们还需要用到 Iconfont 或 Icomoon。
要找 Icons 素材，可以上 Iconfont，由阿里妈妈 MUX 打造，它有许多成套的彩色免费 Icon Set。也可以用作 Icons 转 Font 供程序员使用。
阿里妈妈图标库网址：点击进入官网
Icomoon 和阿里妈妈是一样的，但更棒的是它的编辑功能，设计师们再也不需要去纠结怎么把 Icon 调到画布居中的问题了，它可以挪动、旋转、放大缩小，居中、去色一个 Icon 等（虽然界面看起来有点挫）。
Icomoon 网址：点击进入官网
Tips 进度管理
所需工具：Trello（任务管理）、Bearychat（团队沟通）
在此过程中，我们或许会需要用到任务管理软件，例如 Trello：点击进入官网
Trello 是国外非常火的任务管理软件，据说拥有 1900 万注册用户，国际红十字会、谷歌、美国迪尔公司都在使用。
看板样式擅长处理流程化任务，适用于产品研发设计等。如下：
由于是英语界面，若是团队中有人对此不适应则可能无法很好得协作。这种情况可以使用中国版本的类似产品，如Tower或Teambition。
Bearychat 是中国版的 Slack，聊天群组 + 工具集成，取代 QQ 或微信作为团队工作中的及时聊天沟通工具。有在线版和本地版。下载与具体功能可上官网查看：点击进入官网。
- END -
西瓜设计研究所
互联网创业 | UI设计 | 开发资源 | 教程
未经授权请勿转载，烦请留言获取（侵权必究）
© uirush.com
