從草圖到原型:最佳設(shè)計(jì)工作流

7 評(píng)論 25457 瀏覽 256 收藏 6 分鐘

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

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

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

1-KJ0HplGCIcUkzVJqWhujyg

2、下一步是把草圖用手機(jī)拍下來(lái),然后把你的孩子放到POP上面測(cè)試一下原型。

1-K6rMhNwPzntbu7Vd0p9aMg

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

1-3v-HCiW7uZoej6s_F_q1Rw

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

1-xJRjDTyhxjVZeQ0PG_woeA

5、對(duì) Balsamiq 不滿意嗎?那可以試試Axure

1-PNBMvQPZlt_fM0b0sN3DNg

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

1-KYIUa-tO8Iei52_uix3NGg

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

1-X5THTg-vfFJUQy9v1okOZw

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

1-Aqs5vREj0YFnwANdS0YrCA

9、你成功了,示意圖終于獲得批準(zhǔn)了。接下來(lái)可以做高清版的原型了。

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

1-12oS1uwG95V5Z3TBa5ifNg

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

1-7ZDSs6XqzXnHwJQnN8jRZw

12、現(xiàn)在把屏幕導(dǎo)出為 PNG 并導(dǎo)入到Flinto Lite 。

1-uZAWXo_fb4KaVq1YLym74g

13、哦,你需要手勢(shì)設(shè)計(jì)?99 美元買個(gè) Flintofor Mac 吧。

14、你的 CEO/ 利益相關(guān)者 / 客戶 “不需要手機(jī)上再多一個(gè) app” 并且拒絕下載 Flinto。

15、導(dǎo)入設(shè)計(jì)到Principle增加交互。

1-fvRO0mzSuOtVzAtyGTpvhQ

16、靠,Principle 導(dǎo)出的是視頻???!不用了,用Pixate 吧,反正是免費(fèi)的,祝你好運(yùn)。

1-Dk7owAlIbAMHQMJHf98-lw

17、你要瘋了?!好吧再下載Framer試試,它可以免費(fèi)試用。

1-Rr3ZTyNUqrWYmK6CA2qLKw

18、忘了告訴你,F(xiàn)ramer 的試用時(shí)間只有 32 分鐘。再換Justinmind吧。

1-NTHeYjej-UBZVBCblLugWg

好了,大功告成,終于過(guò)關(guān)了。

 

本文編譯自:blog.prototypr.io

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 啥意思?難道Justinmind是終點(diǎn)嗎?

    來(lái)自陜西 回復(fù)
  2. 一個(gè)通關(guān)游戲啊

    來(lái)自浙江 回復(fù)
  3. 菜刀是廚師的命根子,不同菜刀切出來(lái)的菜不一樣

    回復(fù)
  4. 暈了

    回復(fù)
  5. 醉了……哈哈

    回復(fù)
  6. 草圖,sketch,ps直接畫,Axure交互??磥?lái)還有很多工具可以用。demoo快速交互演示也不錯(cuò)

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

    回復(fù)