从草图到原型:最佳设计工作流

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

Keaton Herzer介绍了从草图到原型的设计流程,并且推荐了各阶段适用的工具。至于合不合适,各位设计师用用看再说吧。

caotuyuanxinggongju

作为设计师,我们要不断尝试各种工具和流程以便找出最合适的。经过大量实验后,我已经找到了完美的设计工作流,在此我愿跟大家一起分享。设计是一个流程,我要分享的这个流程是我在开发各种人人喜爱的习惯养成产品的项目都采用的流程。

1、画草图(用纸笔)—每一个伟大的设计都从纸上开始。拿出你的纸和笔画出大致形状。

1-KJ0HplGCIcUkzVJqWhujyg

2、下一步是把草图用手机拍下来,然后把你的孩子放到POP上面测试一下原型。

1-K6rMhNwPzntbu7Vd0p9aMg

3、接下来是示意图。光有草图是不够的。示意图任何时候都是不可或缺的。继续打开Omnigraffle 画你的示意图。

1-3v-HCiW7uZoej6s_F_q1Rw

4、现在才意识到你需要下拉菜单?只好再用Balsamiq重画示意图。

1-xJRjDTyhxjVZeQ0PG_woeA

5、对 Balsamiq 不满意吗?那可以试试Axure

1-PNBMvQPZlt_fM0b0sN3DNg

6、还是不满意?!那可以换到 AdobeIllustrator 用它的 UI Wireframing kit,警告你,要 89 美元。

1-KYIUa-tO8Iei52_uix3NGg

7、现在把那些示意图导出为 PNG 然后导入到 Invision,这样你就可以共享给团队了。

1-X5THTg-vfFJUQy9v1okOZw

8、再也不想用 Invision 了?那你只好在用Marvel试试了,希望这次他们不知道怎么写评论了。

1-Aqs5vREj0YFnwANdS0YrCA

9、你成功了,示意图终于获得批准了。接下来可以做高清版的原型了。

10、到人人都使用的图库找图然后用 Photoshop 进行优化。

1-12oS1uwG95V5Z3TBa5ifNg

11、现在打开Sketch开始为你的 app 创建 UI。开始有点真正产品的模样了吧?

1-7ZDSs6XqzXnHwJQnN8jRZw

12、现在把屏幕导出为 PNG 并导入到Flinto Lite

1-uZAWXo_fb4KaVq1YLym74g

13、哦,你需要手势设计?99 美元买个 Flintofor Mac 吧。

14、你的 CEO/ 利益相关者 / 客户 “不需要手机上再多一个 app” 并且拒绝下载 Flinto。

15、导入设计到Principle增加交互。

1-fvRO0mzSuOtVzAtyGTpvhQ

16、靠,Principle 导出的是视频啊?!不用了,用Pixate 吧,反正是免费的,祝你好运。

1-Dk7owAlIbAMHQMJHf98-lw

17、你要疯了?!好吧再下载Framer试试,它可以免费试用。

1-Rr3ZTyNUqrWYmK6CA2qLKw

18、忘了告诉你,Framer 的试用时间只有 32 分钟。再换Justinmind吧。

1-NTHeYjej-UBZVBCblLugWg

好了,大功告成,终于过关了。

 

本文编译自:blog.prototypr.io

译文地址:http://36kr.com/p/5048116.html

您的赞赏,是对我创作的最大鼓励。

评论( 6

登录后参与评论
  1. 一个通关游戏啊

    回复
  2. 菜刀是厨师的命根子,不同菜刀切出来的菜不一样

    回复
  3. 晕了

    回复
  4. 醉了……哈哈

    回复
  5. 草图,sketch,ps直接画,Axure交互。看来还有很多工具可以用。demoo快速交互演示也不错

    回复
  6. 这工具广告做的也没sei了😂

    回复
加载中