從草圖到原型:最佳設計工作流

7 評論 25699 瀏覽 256 收藏 6 分鐘

Keaton Herzer介紹了從草圖到原型的設計流程,并且推薦了各階段適用的工具。至于合不合適,各位設計師用用看再說吧。

作為設計師,我們要不斷嘗試各種工具和流程以便找出最合適的。經過大量實驗后,我已經找到了完美的設計工作流,在此我愿跟大家一起分享。設計是一個流程,我要分享的這個流程是我在開發(fā)各種人人喜愛的習慣養(yǎng)成產品的項目都采用的流程。

1、畫草圖(用紙筆)—每一個偉大的設計都從紙上開始。拿出你的紙和筆畫出大致形狀。

1-KJ0HplGCIcUkzVJqWhujyg

2、下一步是把草圖用手機拍下來,然后把你的孩子放到POP上面測試一下原型。

1-K6rMhNwPzntbu7Vd0p9aMg

3、接下來是示意圖。光有草圖是不夠的。示意圖任何時候都是不可或缺的。繼續(xù)打開Omnigraffle 畫你的示意圖。

1-3v-HCiW7uZoej6s_F_q1Rw

4、現(xiàn)在才意識到你需要下拉菜單?只好再用Balsamiq重畫示意圖。

1-xJRjDTyhxjVZeQ0PG_woeA

5、對 Balsamiq 不滿意嗎?那可以試試Axure

1-PNBMvQPZlt_fM0b0sN3DNg

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

1-KYIUa-tO8Iei52_uix3NGg

7、現(xiàn)在把那些示意圖導出為 PNG 然后導入到 Invision,這樣你就可以共享給團隊了。

1-X5THTg-vfFJUQy9v1okOZw

8、再也不想用 Invision 了?那你只好在用Marvel試試了,希望這次他們不知道怎么寫評論了。

1-Aqs5vREj0YFnwANdS0YrCA

9、你成功了,示意圖終于獲得批準了。接下來可以做高清版的原型了。

10、到人人都使用的圖庫找圖然后用 Photoshop 進行優(yōu)化。

1-12oS1uwG95V5Z3TBa5ifNg

11、現(xiàn)在打開Sketch開始為你的 app 創(chuàng)建 UI。開始有點真正產品的模樣了吧?

1-7ZDSs6XqzXnHwJQnN8jRZw

12、現(xiàn)在把屏幕導出為 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、忘了告訴你,F(xiàn)ramer 的試用時間只有 32 分鐘。再換Justinmind吧。

1-NTHeYjej-UBZVBCblLugWg

好了,大功告成,終于過關了。

 

本文編譯自:blog.prototypr.io

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 啥意思?難道Justinmind是終點嗎?

    來自陜西 回復
  2. 一個通關游戲啊

    來自浙江 回復
  3. 菜刀是廚師的命根子,不同菜刀切出來的菜不一樣

    回復
  4. 暈了

    回復
  5. 醉了……哈哈

    回復
  6. 草圖,sketch,ps直接畫,Axure交互。看來還有很多工具可以用。demoo快速交互演示也不錯

    回復
  7. 這工具廣告做的也沒sei了??

    回復