本文的前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
网友评论