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