原型是我掌握新工具、平臺(tái)和技術(shù)的支撐框架。愛掏網(wǎng) - it200.com原型是驗(yàn)證一個(gè)想法是否可行的強(qiáng)有力工具。愛掏網(wǎng) - it200.com它是我整個(gè)創(chuàng)作過程的中心，也是我與合作的人和企業(yè)的交流媒介。愛掏網(wǎng) - it200.com
我對(duì)原型深有感情，因?yàn)槲艺J(rèn)為它們可以創(chuàng)造奇跡，但我也覺得它們沒有得到應(yīng)有的重視。愛掏網(wǎng) - it200.com原型通常不會(huì)被納入到項(xiàng)目時(shí)間表中，或者，即使被納入，通常卻也只作為一個(gè)更大項(xiàng)目的不太相關(guān)的交付物。愛掏網(wǎng) - it200.com 其實(shí)只要你愿意，它可以起更大作用！
我想說服你把原型更深入地植入你的工作流程中。愛掏網(wǎng) - it200.com這種嵌入項(xiàng)目的方式，可以改變你作為創(chuàng)意人員的協(xié)作、學(xué)習(xí)和成長(zhǎng)的方式。愛掏網(wǎng) - it200.com說服過程是這樣的：我會(huì)試圖做出一個(gè)合適的定義，然后深入探討你怎樣才可以做出實(shí)際有用的原型，這樣的原型對(duì)我的實(shí)際工作也同樣有效。愛掏網(wǎng) - it200.com為了更吸引人，我會(huì)提供一些我創(chuàng)作的原型，它們用于我制作自己的游戲應(yīng)用Melody Jams，這個(gè)游戲在130個(gè)國(guó)家得到了蘋果公司的官方推薦，而且一定時(shí)間內(nèi)還沖到了應(yīng)用商店兒童App排名第一。愛掏網(wǎng) - it200.com
1. 什么是原型
原型的經(jīng)典定義是，它是你想要制作的原樣尺寸東西的縮樣。愛掏網(wǎng) - it200.com一個(gè)原型可能是部分地被創(chuàng)建或設(shè)計(jì)，用來展示一個(gè)更大系統(tǒng)的特定功能。愛掏網(wǎng) - it200.com這是一個(gè)相當(dāng)不錯(cuò)的定義，但我想把原型看作更廣泛的東西。愛掏網(wǎng) - it200.com我對(duì)原型的定義是什么？它是探索檢驗(yàn)一個(gè)想法的無形變有形的神器。愛掏網(wǎng) - it200.com
你的模式庫(kù)是最新的嗎？ Alla Kholmatova剛剛出版了一本滿是干貨的書，詳解了設(shè)計(jì)體系以及如何正確使用它們。愛掏網(wǎng) - it200.com書里面寫了她所經(jīng)歷的常見陷阱、領(lǐng)悟和教訓(xùn)。愛掏網(wǎng) - it200.com這本書有精裝書和電子書版本。愛掏網(wǎng) - it200.com如圖1所示。愛掏網(wǎng) - it200.com
圖1 Alla Kholmatova剛剛出版的書，詳解了設(shè)計(jì)體系以及如何正確使用它們
它可以像在紙上繪制一些粗糙的草圖一樣簡(jiǎn)單。愛掏網(wǎng) - it200.com也許它只是被簡(jiǎn)單地設(shè)計(jì)一下，就像在After Effects中一個(gè)界面的動(dòng)效演示。愛掏網(wǎng) - it200.com 也許它是一個(gè)在Codepen上粗糙的demo演示。愛掏網(wǎng) - it200.com或者它也可能有高得多的保真度。愛掏網(wǎng) - it200.com當(dāng)有人看到一個(gè)原型時(shí)，他不應(yīng)該有任何含糊不清的反應(yīng)。愛掏網(wǎng) - it200.com換句話說，如果這個(gè)人要問，“如果應(yīng)用程序是藍(lán)色的會(huì)怎樣呢？”，那么這就不是一個(gè)原型。愛掏網(wǎng) - it200.com如果你顯示出了應(yīng)用程序變成藍(lán)色的效果，那么它就是（一個(gè)原型）。愛掏網(wǎng) - it200.com
當(dāng)然，也有不同類型的原型，每個(gè)原型都有不同的目的：內(nèi)部的，外部的和公開的。愛掏網(wǎng) - it200.com
（1）內(nèi)部原型
內(nèi)部的原型不需要給我或我團(tuán)隊(duì)以外的任何人帶來直接的價(jià)值。愛掏網(wǎng) - it200.com它盡可以像我想要的那樣粗糙和快速。愛掏網(wǎng) - it200.com在網(wǎng)站世界中，我可能會(huì)使用vanilla CSS、HTML和JavaScript、React、Angular或Vue來構(gòu)建一個(gè)簡(jiǎn)單的組件，以便了解它是如何工作的，并權(quán)衡利弊。愛掏網(wǎng) - it200.com 事實(shí)上，這些類型的原型往往用在我工作流程中的很早階段-—實(shí)際上是項(xiàng)目開始的第一天。愛掏網(wǎng) - it200.com 有了這些原型，我不必害怕有人不“ 理解它 ”，或者會(huì)弊大于利。愛掏網(wǎng) - it200.com我雖然可以向客戶或利益相關(guān)者展示內(nèi)部原型，特意顯示原型制作過程的價(jià)值，但這還不是重點(diǎn)，立刻、馬上、趕快展示我的創(chuàng)意想法才是我想要的。愛掏網(wǎng) - it200.com
圖2所示的這個(gè)原型演示了iOS中一個(gè)圓圈被拖動(dòng)到另一個(gè)圓圈附近時(shí)的情況。愛掏網(wǎng) - it200.com這是Melody Jams為內(nèi)部團(tuán)隊(duì)展示的早期原型。愛掏網(wǎng) - it200.com
圖2 這個(gè)原型演示了iOS中一個(gè)圓圈被拖動(dòng)到另一個(gè)圓圈附近時(shí)的情況
（2）外部原型
一個(gè)外部的原型就是為你想要的方向做一個(gè)實(shí)例，以展示進(jìn)展或論證某個(gè)事物是如何工作的。愛掏網(wǎng) - it200.com當(dāng)客戶需要一個(gè)管理工具時(shí)，我會(huì)在Craft、WordPress和Contentful（是的，所有3個(gè)！）中快速創(chuàng)建一個(gè)輕型博客，讓他們了解每個(gè)工具的運(yùn)行模式，以便他們可以更清楚地知道哪個(gè)最適合他們。愛掏網(wǎng) - it200.com這類原型在項(xiàng)目的中后期都非常適用。愛掏網(wǎng) - it200.com我記得有一個(gè)項(xiàng)目，客戶正在考慮用一個(gè)新的服務(wù)提供商的API。愛掏網(wǎng) - it200.com把API接入原型并展示給客戶，讓他們知道這個(gè)服務(wù)提供商可以做什么，我們能夠多快地整合它，以及對(duì)項(xiàng)目其他部分會(huì)產(chǎn)生什么樣的影響。愛掏網(wǎng) - it200.com
圖3所示的這個(gè)輕便的iPhone應(yīng)用程序展示了Contentful如何加載內(nèi)容—這是外部原型的一個(gè)很好的例子。愛掏網(wǎng) - it200.com像這樣的原型可以同時(shí)用于評(píng)估一個(gè)CMS①，并驗(yàn)證它是否可用來提升iPhone應(yīng)用程序。愛掏網(wǎng) - it200.com
圖3 這個(gè)輕便的iPhone應(yīng)用程序展示了Contentful如何加載內(nèi)容
（3）公開原型
公開原型面向團(tuán)隊(duì)外部這一更大的范圍。愛掏網(wǎng) - it200.com也就是說，把實(shí)際的設(shè)計(jì)過程公開出去接受真實(shí)檢驗(yàn)，了解用戶如何操作，并據(jù)此進(jìn)行迭代。愛掏網(wǎng) - it200.com它可能是一個(gè)完整的試點(diǎn)產(chǎn)品之類的東西，開放給一小部分用戶使用。愛掏網(wǎng) - it200.com這是最精致的原型，并且最接近于我前面提到的傳統(tǒng)定義。愛掏網(wǎng) - it200.com它往往適合于一個(gè)更大型的項(xiàng)目，用在某些功能特性的測(cè)試階段。愛掏網(wǎng) - it200.com
用戶和客戶可以輕松點(diǎn)擊如圖4所示的這個(gè)公開的InVision原型，并提供反饋。愛掏網(wǎng) - it200.com
圖4 用戶和客戶可以輕松點(diǎn)擊這個(gè)公開的InVision原型，并提供反饋
2. 快速的原型設(shè)計(jì)是好的原型嗎？
簡(jiǎn)而言之，肯定是的。愛掏網(wǎng) - it200.com原型需要盡快在一個(gè)項(xiàng)目中建立。愛掏網(wǎng) - it200.com為了讓你明白為什么，我們來做一下練習(xí)。愛掏網(wǎng) - it200.com
在腦海中想象一下椅子是什么樣子的。愛掏網(wǎng) - it200.com想好了嗎？ 是如圖5所示的這樣的椅子嗎？
圖5 椅子的圖片
可能不是，對(duì)吧？ 你想的可能是戶外椅、扶手椅、辦公椅或凳子。愛掏網(wǎng) - it200.com你甚至可能沒有想象出一個(gè)逼真的椅子！既然有了這張椅子的圖片作參照，就可以消除上面的各種可能性了。愛掏網(wǎng) - it200.com這把椅子，是我正在談?wù)摰模⑶掖撕笤偬峒埃覀兌贾乐傅氖撬?b class="xhide">愛掏網(wǎng) - it200.com于是，我們有了一個(gè)共同的參照系。愛掏網(wǎng) - it200.com
當(dāng)你的客戶說，“我需要我的網(wǎng)站有現(xiàn)代感”，你怎么知道這是什么意思？如果沒有實(shí)際的工具，比如情緒板，每個(gè)人頭腦中對(duì)“現(xiàn)代”都有各自的定義，就像上面的椅子一樣。愛掏網(wǎng) - it200.com這個(gè)問題不僅存在于設(shè)計(jì)，而且也會(huì)出現(xiàn)在登錄流程的方式或軟件運(yùn)行環(huán)境的選擇中。愛掏網(wǎng) - it200.com要迅速處理事情就會(huì)要求強(qiáng)制進(jìn)行對(duì)話和做出反應(yīng)。愛掏網(wǎng) - it200.com所有的含糊不清的部分就都能更快得到明確。愛掏網(wǎng) - it200.com
重要的是，原型也不必非得解決你期望它解決的問題。愛掏網(wǎng) - it200.com簡(jiǎn)單地創(chuàng)建和分享它，有時(shí)就能開啟想法、靈感、挑戰(zhàn)或顧慮，而人們之前并沒意識(shí)到這些。愛掏網(wǎng) - it200.com原型做得越快、越頻繁，所有的好東西就會(huì)越早浮出水面。愛掏網(wǎng) - it200.com
原型開發(fā)解鎖了你在沙盒中進(jìn)行實(shí)驗(yàn)、失敗、學(xué)習(xí)和成長(zhǎng)的能力。愛掏網(wǎng) - it200.com 你可以提升自己并同時(shí)改進(jìn)手頭的產(chǎn)品。愛掏網(wǎng) - it200.com這是非常關(guān)鍵的。愛掏網(wǎng) - it200.com
3. 誰(shuí)應(yīng)該設(shè)計(jì)原型？
每個(gè)人！原型設(shè)計(jì)是打破學(xué)科之間壁壘的一個(gè)機(jī)會(huì)。愛掏網(wǎng) - it200.com設(shè)計(jì)師應(yīng)該設(shè)計(jì)原型，以便了解項(xiàng)目的局限性、復(fù)雜性和可能性。愛掏網(wǎng) - it200.com編程人員做原型，當(dāng)然能用來測(cè)試可行性，但更能深入?yún)⑴c創(chuàng)作過程。愛掏網(wǎng) - it200.com無論項(xiàng)目經(jīng)理、制作人、文案人員，只要是任何有想法的人都可以參與其中。愛掏網(wǎng) - it200.com
當(dāng)然，原型不必瘋狂寫代碼—甚至根本不需要！它只是生成和測(cè)試想法，用真實(shí)的東西來玩和探索。愛掏網(wǎng) - it200.com
由于原型設(shè)計(jì)可以像你想要的那樣，或簡(jiǎn)單或復(fù)雜，因而在實(shí)踐中采用原型將給你帶來巨大的價(jià)值。愛掏網(wǎng) - it200.com 我們來看看原型的一些好處。愛掏網(wǎng) - it200.com
（1）撩起創(chuàng)意的騷動(dòng)
有時(shí)候，你只是想嘗試構(gòu)建你從未見過的某個(gè)東西，或者仿效出你認(rèn)為很酷的東西。愛掏網(wǎng) - it200.com這可能是一個(gè)不成熟的想法，也可能是用戶界面的下一代趨勢(shì)—誰(shuí)知道呢？ 至少，弄清楚東西是如何工作的，這是作為設(shè)計(jì)師所感到的最滿意的部分之一，原型設(shè)計(jì)為此提供了肥沃的土壤。愛掏網(wǎng) - it200.com
（2）為無畏和激進(jìn)的想法留出空間
做出的東西，既能使用戶容易理解又具有創(chuàng)新性，這是很難的。愛掏網(wǎng) - it200.com 即使你啟動(dòng)項(xiàng)目時(shí)有一個(gè)“原型周”的時(shí)間，也只是這個(gè)星期不受到太大限制。愛掏網(wǎng) - it200.com
（3）增加主題專業(yè)知識(shí)
我所知道的每一個(gè)開發(fā)工作室似乎都對(duì)一個(gè)工作平臺(tái)擁有深厚的專業(yè)知識(shí)，并且暗中希望超越它（我確信這一點(diǎn)對(duì)于所有設(shè)計(jì)師來說也是成立的）。愛掏網(wǎng) - it200.com你正在用PHP做所有開發(fā)，而又想要投入Rails陣營(yíng)嗎？那么就請(qǐng)?jiān)陂_始項(xiàng)目時(shí)建立一些原型，即使它們與商業(yè)目標(biāo)無關(guān)。愛掏網(wǎng) - it200.com
（4）規(guī)避風(fēng)險(xiǎn)
制作以前從未做過的東西，心里是很沒底的。愛掏網(wǎng) - it200.com快速地大致搞明白它，可以消除那種心理障礙。愛掏網(wǎng) - it200.com 突然之間，之前不可能的狀況只需要一兩天就能消除。愛掏網(wǎng) - it200.com
（5）建立一個(gè)創(chuàng)意目錄
當(dāng)你的原型庫(kù)隨著一個(gè)個(gè)項(xiàng)目而不斷擴(kuò)展，相應(yīng)地，以往的理念會(huì)得到重新審視。愛掏網(wǎng) - it200.com 有時(shí)來自一個(gè)項(xiàng)目的廢料卻會(huì)成為下一個(gè)項(xiàng)目的寶藏。愛掏網(wǎng) - it200.com
（6）為每個(gè)人賦能
當(dāng)你要去把事情搞清楚時(shí)，職位頭銜、多年的經(jīng)驗(yàn)和技能都不重要。愛掏網(wǎng) - it200.com好的想法可以從任何人那里產(chǎn)生，但是當(dāng)遇到高級(jí)創(chuàng)意人員從天而降肆意指點(diǎn)時(shí)，它就很難浮現(xiàn)了。愛掏網(wǎng) - it200.com我們需要從一個(gè)純粹的創(chuàng)作流程開始，忽略職位，讓好的想法從基層涌現(xiàn)出來。愛掏網(wǎng) - it200.com
（7）自定義你的流程
我曾經(jīng)和很多設(shè)計(jì)師和代理商合作過，而且他們似乎一直被我開始工作的速度震撼到。愛掏網(wǎng) - it200.com我不會(huì)干等著需求拋來、美術(shù)設(shè)計(jì)去評(píng)審或其他種種。愛掏網(wǎng) - it200.com通過積極主動(dòng)的方式，我可以超高速推進(jìn)項(xiàng)目。愛掏網(wǎng) - it200.com
4. 如何開始
千萬(wàn)不要總是擔(dān)心你建立原型的方法會(huì)出錯(cuò)，那樣是不對(duì)的。愛掏網(wǎng) - it200.com就像李小龍說的那樣：“力求不爭(zhēng)”。愛掏網(wǎng) - it200.com時(shí)刻牢記這一點(diǎn)，下面是一些指導(dǎo)原則，可以幫助你完成一個(gè)快速的原型實(shí)踐。愛掏網(wǎng) - it200.com
（1）列出問題陳述
想一下你正試圖學(xué)習(xí)或者解決的事情，把它進(jìn)行逐條拆分，然后把拆分出來的每一條當(dāng)做不同的原型來對(duì)待。愛掏網(wǎng) - it200.com“如何在iOS中下載地圖？”“如何將地圖定位到特定的位置？”“如何在地圖中繪制圖形？”“如何在地圖上放置大頭針？”4條陳述，4個(gè)原型，快速得解決了4個(gè)問題。愛掏網(wǎng) - it200.com
（2）從你熟悉的事情入手
就像鍛煉之前要進(jìn)行拉伸運(yùn)動(dòng)一樣，你不可能一開始就進(jìn)入全速節(jié)奏。愛掏網(wǎng) - it200.com如果你是一個(gè)正在建立網(wǎng)站原型的開發(fā)者，你可能想從建立自己的模板開始：一個(gè)靜態(tài)的HTML文件，一個(gè)Gulp配置，諸如此類。愛掏網(wǎng) - it200.com這樣可以讓你的創(chuàng)造力源源不斷地?cái)U(kuò)展，當(dāng)你進(jìn)入一個(gè)未知領(lǐng)域時(shí)，你的魔力就已經(jīng)開始發(fā)揮作用了。愛掏網(wǎng) - it200.com
（3）畫得丑一點(diǎn)
用熒光色的Comics Sans MS字體，不要命名你的圖層。愛掏網(wǎng) - it200.com打破所有規(guī)則。愛掏網(wǎng) - it200.com現(xiàn)在不是要求每像素都完美的時(shí)候，現(xiàn)在最重要的是把你的想法畫出來。愛掏網(wǎng) - it200.com
（4）將設(shè)計(jì)初始原型的時(shí)間限制在60分鐘以內(nèi)
錯(cuò)綜復(fù)雜和原型是你死我活的敵人。愛掏網(wǎng) - it200.com當(dāng)你做得正確的時(shí)候，你可以在項(xiàng)目第一天結(jié)束時(shí)產(chǎn)出至少4個(gè)原型。愛掏網(wǎng) - it200.com
（5）率性最為先，別被急事趕
你今天想做什么？和這個(gè)項(xiàng)目一點(diǎn)關(guān)系都沒有？不要糾結(jié)，就按照你想的來做。愛掏網(wǎng) - it200.com誰(shuí)知道什么情況？很可能它的價(jià)值你還沒意識(shí)到呢！
（6）分支
永遠(yuǎn)不要覆蓋原型。愛掏網(wǎng) - it200.com相反的，要復(fù)制一份然后從那里進(jìn)行迭代。愛掏網(wǎng) - it200.com這樣你的原型永遠(yuǎn)是最簡(jiǎn)潔的，可以從不同的方向分支，并且易于學(xué)習(xí)。愛掏網(wǎng) - it200.com
（7）分享控
給所有人看你所做的原型。愛掏網(wǎng) - it200.com要為之感到驕傲！你在這個(gè)項(xiàng)目上所營(yíng)造的積極能量會(huì)貫穿到整個(gè)的項(xiàng)目生命周期中。愛掏網(wǎng) - it200.com僅這一步就可以大大地提高整個(gè)項(xiàng)目的文化氣氛。愛掏網(wǎng) - it200.com
（8）記錄你正在做的原型以及結(jié)果
這就像目錄中的README文件或者企業(yè)協(xié)作工具Slack的消息一樣簡(jiǎn)單。愛掏網(wǎng) - it200.com要經(jīng)常回顧你之前所做的東西。愛掏網(wǎng) - it200.com
（9）寫下你所擔(dān)憂的事情，然后把它們變成問題陳述
所以，你剛剛在Heroku上部署了你的第一個(gè)網(wǎng)站，但是你擔(dān)心如何設(shè)置SSL證書？這不是一個(gè)問題，把它列下來稍后用原型來處理就可以了。愛掏網(wǎng) - it200.com
圖6所示的是一個(gè)以Trello卡展示的問題陳述，它描述了如何建立一個(gè)基礎(chǔ)的three js原型。愛掏網(wǎng) - it200.com
圖6 以Trello卡展示的問題陳述
（10）如何在項(xiàng)目中增加預(yù)算
事實(shí)上，你不需要。愛掏網(wǎng) - it200.com這不是那種向上銷售式的順桿爬②。愛掏網(wǎng) - it200.com我就是這么做的。愛掏網(wǎng) - it200.com這篇文章在標(biāo)題中包含“流程”這個(gè)詞是有原因的：這不僅僅是關(guān)于如何建立原型的問題，這是一個(gè)關(guān)于如何建造東西的指導(dǎo)性原則。愛掏網(wǎng) - it200.com
當(dāng)一個(gè)項(xiàng)目開始時(shí)，你就要做原型，一直到?jīng)]有什么原型可以做了才可以停止。愛掏網(wǎng) - it200.com原型與你的主要代碼或者設(shè)計(jì)文件都不一樣。愛掏網(wǎng) - it200.com在項(xiàng)目初期，你的原型應(yīng)該很粗糙，以至于無法開發(fā)設(shè)計(jì)。愛掏網(wǎng) - it200.com只要之后找到可以實(shí)行的方式就可以了。愛掏網(wǎng) - it200.com
這是按照項(xiàng)目不同而變通的決定。愛掏網(wǎng) - it200.com建立原型是一個(gè)持續(xù)的過程，當(dāng)我們這樣做的時(shí)候，就不會(huì)有失敗的原型和錯(cuò)誤。愛掏網(wǎng) - it200.com
當(dāng)我和潛在的客戶交談的時(shí)候，我向他們解釋說，這個(gè)過程會(huì)比我的競(jìng)爭(zhēng)對(duì)手（比如你）有更快更多的產(chǎn)出。愛掏網(wǎng) - it200.com這些產(chǎn)出可以幫助定義一個(gè)API或者證明技術(shù)上的可行性，或者檢查一個(gè)可怕的任務(wù)。愛掏網(wǎng) - it200.com特別是在設(shè)計(jì)師和內(nèi)部設(shè)計(jì)團(tuán)隊(duì)中尤其具有影響力，他們喜歡這樣的工作方式，因?yàn)槲铱梢院退麄円黄鹂焖俚亟鉀Q問題。愛掏網(wǎng) - it200.com我產(chǎn)出更高質(zhì)量的、更定制化的、更不容易出錯(cuò)的工作成果。愛掏網(wǎng) - it200.com由于大家都習(xí)慣于看到粗糙的原型，因而就不擔(dān)心失敗的原型會(huì)讓客戶意識(shí)到——有些東西不能有效運(yùn)行已成為工作流程中習(xí)以為常的現(xiàn)象。愛掏網(wǎng) - it200.com
這也使我長(zhǎng)期處于有利的位置，因?yàn)槲夷軌蚩焖俚卣莆招录夹g(shù)。愛掏網(wǎng) - it200.com我的客戶知道無論在安裝、物理計(jì)算③、應(yīng)用程序或者任何規(guī)模的網(wǎng)站等方面，都可以與我進(jìn)行溝通。愛掏網(wǎng) - it200.com因?yàn)樗麄冎肋@種方法保證了結(jié)果一定會(huì)成功。愛掏網(wǎng) - it200.com
對(duì)于我來說，這并不是為了利益最大化，這是為了以我期望的方式去做我想做的事情。愛掏網(wǎng) - it200.com我從未想特意去學(xué)習(xí)并精通App和網(wǎng)站開發(fā)，事實(shí)上，這些東西在我開始的時(shí)候并不存在。愛掏網(wǎng) - it200.com我開始寫代碼是用來學(xué)習(xí)很酷很有意思的東西。愛掏網(wǎng) - it200.com我希望我的職業(yè)生涯是長(zhǎng)久的、充實(shí)的、令人興奮的，并且不斷地有新的東西去學(xué)習(xí)。愛掏網(wǎng) - it200.com一個(gè)原型驅(qū)動(dòng)的過程是完美適合那個(gè)目標(biāo)的。愛掏網(wǎng) - it200.com
（11）工具
最近，似乎一提到“原型”這個(gè)詞就不得不想到 In Vision——就好像是原型設(shè)計(jì)用到的 Kleenex（一種常用的餐巾紙）。愛掏網(wǎng) - it200.comIn Vision是一個(gè)強(qiáng)大的工具，可以讓設(shè)計(jì)師在不需要編程的情況下產(chǎn)出可點(diǎn)擊的原型。愛掏網(wǎng) - it200.com這是真的：快速、直觀、容易上手。愛掏網(wǎng) - it200.com
隨著sketch的普及而出現(xiàn)的許多插件讓原型制作更加方便。愛掏網(wǎng) - it200.comFramer是一個(gè)很好的例子，它可以導(dǎo)入sketch文件，只要有一點(diǎn)編程知識(shí)，就可以創(chuàng)建一些演示demo，比如點(diǎn)擊動(dòng)畫。愛掏網(wǎng) - it200.comIn Vision 也同樣有sketch插件。愛掏網(wǎng) - it200.com其他工具，包括 Marvel 和 Craft，也是值得探索的。愛掏網(wǎng) - it200.com我們還有很多工具可以嘗試。愛掏網(wǎng) - it200.com
你不必成為一個(gè)程序員，甚至不需要使用設(shè)計(jì)軟件創(chuàng)造原型。愛掏網(wǎng) - it200.com不使用電腦，只在紙上畫原型也是一個(gè)很好的探索UI設(shè)計(jì)方案的方式。愛掏網(wǎng) - it200.com你也可以在白板上嘗試，這些方式甚至可以用在游戲設(shè)計(jì)中。愛掏網(wǎng) - it200.com
不知道從哪里開始？你可以考慮用每一種方式進(jìn)行一次原型設(shè)計(jì)的快速試驗(yàn)。愛掏網(wǎng) - it200.com
回到網(wǎng)站和軟件開發(fā)的世界，我喜歡做的事情是在 GitHub上專門為原型建立一個(gè)庫(kù)。愛掏網(wǎng) - it200.com我已經(jīng)加入了一個(gè)README文件，它描述了我在原型設(shè)計(jì)時(shí)考慮的一些規(guī)則，你可以使用或者借鑒它，嘗試練習(xí)一下。愛掏網(wǎng) - it200.com
5. 學(xué)習(xí)案例：Melody Jams
大概在一年之前，我和幾個(gè)朋友一起設(shè)計(jì)并發(fā)布了一款iOS平臺(tái)上的兒童游戲，叫做 Melody Jams（也在Smashing Magazine上寫了一篇關(guān)于這個(gè)游戲的文章），如圖7所示。愛掏網(wǎng) - it200.com我們用了大概3個(gè)月的時(shí)間完成了這款游戲的開發(fā)。愛掏網(wǎng) - it200.com在這個(gè)過程中我們遇到了一些挑戰(zhàn)：我們的設(shè)計(jì)師從來沒有做過App的設(shè)計(jì)，并且他住在離我3000英里之外的地方，我們從來沒有見過面。愛掏網(wǎng) - it200.com同時(shí)，我也有一年的時(shí)間沒有開發(fā)過iOS平臺(tái)的App了，所以可想而知我的技能退化了多少。愛掏網(wǎng) - it200.com
圖7 Melody Jams進(jìn)行中的動(dòng)畫原型
這個(gè)游戲需要將屏幕底部的小怪獸拖曳到舞臺(tái)上指定的熱點(diǎn)區(qū)。愛掏網(wǎng) - it200.com單從這一個(gè)設(shè)計(jì)，我的腦海里就浮現(xiàn)出一些問題清單：
-
怎樣創(chuàng)建一個(gè)iOS App？
-
怎樣創(chuàng)建一個(gè)iOS 游戲？
-
怎樣在這個(gè)游戲里創(chuàng)建一個(gè)事物？
-
怎樣點(diǎn)擊這個(gè)事物？
-
怎樣拖曳這個(gè)事物？
-
怎樣能有多個(gè)可以拖曳的事物？
-
怎樣發(fā)現(xiàn)一個(gè)事物接近另一個(gè)事物？
-
諸如此類，每一個(gè)問題都成為獨(dú)立的原型。愛掏網(wǎng) - it200.com接著，每一個(gè)都是iOS 應(yīng)用程序，直到所有問題都解決。愛掏網(wǎng) - it200.com每一條解決一個(gè)問題，也有的引出了新的問題，比如，當(dāng)我拖曳完一個(gè)東西時(shí)，該怎么做動(dòng)畫使它動(dòng)起來？
我已經(jīng)在Swift 3中重建了這些原型，如圖8所示，這樣你可以看到這些原型庫(kù)如果在今天創(chuàng)建的樣子。愛掏網(wǎng) - it200.com你會(huì)注意到這些文檔都很小——每個(gè)目錄下都有一個(gè)README文件，一個(gè)屏幕截圖或者GIF動(dòng)畫，但沒有大量的詳細(xì)文檔。愛掏網(wǎng) - it200.com如果這能幫助我們列出注解，那就去做吧。愛掏網(wǎng) - it200.com對(duì)于我來說，這樣是為了看到過程。愛掏網(wǎng) - it200.com這里沒有理論，沒有博客文章或者教程。愛掏網(wǎng) - it200.com從原型1到原型2再到原型3，只要有足夠的練習(xí)，即便你從未見過，你也可以快速掌握編程語(yǔ)言的細(xì)微差別。愛掏網(wǎng) - it200.com
圖8 GitHub上的原型過程
我們?cè)陧?xiàng)目的前幾個(gè)星期遵循了這個(gè)流程，主要是開發(fā)原型而不是進(jìn)行核心程序的開發(fā)。愛掏網(wǎng) - it200.com在項(xiàng)目結(jié)束的時(shí)候，我們有超過50個(gè)不同的原型，用來測(cè)試不同類型的動(dòng)畫、加載方案、緩存、聲音測(cè)試和UI機(jī)制。愛掏網(wǎng) - it200.com
在這個(gè)過程中，設(shè)計(jì)師在進(jìn)行l(wèi)ogo、動(dòng)畫測(cè)試、應(yīng)用程序圖標(biāo)的原型設(shè)計(jì)等等。愛掏網(wǎng) - it200.com音效設(shè)計(jì)師提供他們正在考慮的音樂的樣例。愛掏網(wǎng) - it200.com整個(gè)過程中，每個(gè)人都喜歡我們一直在做的事情。愛掏網(wǎng) - it200.com
在游戲中，由“Mars Disco”中的歌曲制作的原型，是由我們的音效設(shè)計(jì)師Nate所創(chuàng)作的，那時(shí)所有設(shè)計(jì)和動(dòng)畫都未完成。愛掏網(wǎng) - it200.com
6. 總結(jié)
根據(jù)我廣義的定義，你可能已經(jīng)做了一些原型了，甚至根本都沒像上面那樣考慮過。愛掏網(wǎng) - it200.com所以接下來你應(yīng)該與你的同事進(jìn)行更多的分享，或者堅(jiān)決要求你將如何使用原型來開展下一個(gè)項(xiàng)目。愛掏網(wǎng) - it200.com
將原型深入地融入到你的創(chuàng)作過程，可能帶來革命性的改變。愛掏網(wǎng) - it200.com這可以帶來更加積極的、豐富的團(tuán)隊(duì)文化，也可以成為程序員學(xué)習(xí)新語(yǔ)言或者設(shè)計(jì)師學(xué)習(xí)新工具的途徑。愛掏網(wǎng) - it200.com項(xiàng)目能夠更快速更高質(zhì)量地完成，同時(shí)也帶來了更多的快樂。愛掏網(wǎng) - it200.com你的客戶將對(duì)設(shè)計(jì)的過程有明晰的了解，并且接受較低保真度的東西，可使得分享交流變得更頻繁、更容易。愛掏網(wǎng) - it200.com你也會(huì)比競(jìng)爭(zhēng)者看上去工作得更快，能夠參與更廣泛的項(xiàng)目。愛掏網(wǎng) - it200.com
有了以上這些好處，原型還有什么讓你不喜歡的呢？所以，快點(diǎn)告訴我，是不是心服口服了？是不是大徹大悟了？知道下一步該怎么做了吧？
——————————————————————
① 內(nèi)容管理系統(tǒng)。愛掏網(wǎng) - it200.com ——譯者注
② 向上銷售upsell，指根據(jù)既有客戶過去的消費(fèi)喜好，提供更高價(jià)值的產(chǎn)品或服務(wù)，刺激客戶做更多的消費(fèi)。愛掏網(wǎng) - it200.com ——譯者注
③ 通過軟硬件對(duì)現(xiàn)實(shí)世界進(jìn)行感知和交互的系統(tǒng)。愛掏網(wǎng) - it200.com ——譯者注
原文網(wǎng)址：https://www.smashingmagazine.com/2024/12/prototyping-driven-process/
參與翻譯：Hiyori 菁菁
本文由Smashing Magazine獨(dú)家授權(quán)異步社區(qū)發(fā)布簡(jiǎn)體中文版。愛掏網(wǎng) - it200.com版權(quán)所有 禁止轉(zhuǎn)載或建立鏡像。愛掏網(wǎng) - it200.com
推薦閱讀
2024年5月新書書單（文末福利）
2024年4月新書書單
異步圖書最全Python書單
一份程序員必備的算法書單
第一本Python神經(jīng)網(wǎng)絡(luò)編程圖書
長(zhǎng)按二維碼，可以關(guān)注我們喲
每天與你分享IT好文。愛掏網(wǎng) - it200.com
在“異步圖書”后臺(tái)回復(fù)“關(guān)注”，即可免費(fèi)獲得2000門在線視頻課程
點(diǎn)擊閱讀原文，閱讀原文
閱讀原文