從草圖到原型:最佳設(shè)計(jì)工作流
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ì)都從紙上開始。拿出你的紙和筆畫出大致形狀。
2、下一步是把草圖用手機(jī)拍下來(lái),然后把你的孩子放到POP上面測(cè)試一下原型。
3、接下來(lái)是示意圖。光有草圖是不夠的。示意圖任何時(shí)候都是不可或缺的。繼續(xù)打開Omnigraffle 畫你的示意圖。
4、現(xiàn)在才意識(shí)到你需要下拉菜單?只好再用Balsamiq重畫示意圖。
5、對(duì) Balsamiq 不滿意嗎?那可以試試Axure。
6、還是不滿意?!那可以換到 AdobeIllustrator 用它的 UI Wireframing kit,警告你,要 89 美元。
7、現(xiàn)在把那些示意圖導(dǎo)出為 PNG 然后導(dǎo)入到 Invision,這樣你就可以共享給團(tuán)隊(duì)了。
8、再也不想用 Invision 了?那你只好在用Marvel試試了,希望這次他們不知道怎么寫評(píng)論了。
9、你成功了,示意圖終于獲得批準(zhǔn)了。接下來(lái)可以做高清版的原型了。
10、到人人都使用的圖庫(kù)找圖然后用 Photoshop 進(jìn)行優(yōu)化。
11、現(xiàn)在打開Sketch開始為你的 app 創(chuàng)建 UI。開始有點(diǎn)真正產(chǎn)品的模樣了吧?
12、現(xiàn)在把屏幕導(dǎo)出為 PNG 并導(dǎo)入到Flinto Lite 。
13、哦,你需要手勢(shì)設(shè)計(jì)?99 美元買個(gè) Flintofor Mac 吧。
14、你的 CEO/ 利益相關(guān)者 / 客戶 “不需要手機(jī)上再多一個(gè) app” 并且拒絕下載 Flinto。
15、導(dǎo)入設(shè)計(jì)到Principle增加交互。
16、靠,Principle 導(dǎo)出的是視頻???!不用了,用Pixate 吧,反正是免費(fèi)的,祝你好運(yùn)。
17、你要瘋了?!好吧再下載Framer試試,它可以免費(fèi)試用。
18、忘了告訴你,F(xiàn)ramer 的試用時(shí)間只有 32 分鐘。再換Justinmind吧。
好了,大功告成,終于過(guò)關(guān)了。
本文編譯自:blog.prototypr.io
譯文地址:http://36kr.com/p/5048116.html
啥意思?難道Justinmind是終點(diǎn)嗎?
一個(gè)通關(guān)游戲啊
菜刀是廚師的命根子,不同菜刀切出來(lái)的菜不一樣
暈了
醉了……哈哈
草圖,sketch,ps直接畫,Axure交互??磥?lái)還有很多工具可以用。demoo快速交互演示也不錯(cuò)
這工具廣告做的也沒sei了??