學(xué)習(xí)交互設(shè)計(jì)的童鞋，都躲不過畫原型圖這個(gè)必考科目。如何創(chuàng)建保真度（視覺、交互、內(nèi)容）都較高的 Demo 呢，今天騰訊設(shè)計(jì)師分享的好文，除了推薦很多簡單易上手的畫圖神器，更寶貴更值得細(xì)讀的是她的思路，完全體現(xiàn)了一個(gè)設(shè)計(jì)師該有的嚴(yán)謹(jǐn)與細(xì)致。童鞋們感受一 下。

正文：

一、什么是”更好”的Demo

什么是Demo？Demo是Demonstration的縮寫，表示”示范”、”展示”，常指具有示范或展示功能及意味的事物。本文中Demo的含義更接近與維基百科中的這個(gè)解釋：一種原型，主要用來展示想法、表現(xiàn)、方法或者是產(chǎn)品特點(diǎn)的簡易樣例或未完成的產(chǎn)品版本。它常常用來對(duì)投資者、合伙人、記者甚至于潛在的用戶展示其選擇方法的可行性。

在視覺、交互和內(nèi)容的保真程度上有著高保真和低保真的區(qū)分，所以本文的Demo就是指在這三個(gè)緯度（視覺、交互、內(nèi)容）保真程度都較高的原型。

Demo往往用在以下幾個(gè)場合和對(duì)象：

1. 新產(chǎn)品 / 功能的演示－投資者、老板、合伙人
2. 用戶研究/市場調(diào)研－研究員、潛在目標(biāo)用戶
3. 可用性測試－真實(shí)用戶
4. 交互 / 設(shè)計(jì)走查－設(shè)計(jì)師、產(chǎn)品經(jīng)理、專家

什么是”更好”的Demo：

• 核心功能完整，主要任務(wù)流足夠深度
• 交互保真程度高，操作的體驗(yàn)感真實(shí)
• 根據(jù)場合與目的有適當(dāng)?shù)囊曈X細(xì)節(jié)
• 避免制作過程”過于費(fèi)工”或”效率底下”

二、工具與步驟

設(shè)計(jì)師們特別是交互設(shè)計(jì)師往往需要承擔(dān)制作Demo的工作，而這個(gè)過程從上涉及到產(chǎn)品想法和主要功能、信息架構(gòu)和界面的組織，甚至向下涉及到視覺風(fēng) 格和互動(dòng)反饋等各個(gè)環(huán)節(jié)；打交道的人可能包括了產(chǎn)品經(jīng)理（提供原始的產(chǎn)品概念，用戶需求分析或者是功能完整的產(chǎn)品文檔），視覺設(shè)計(jì)師（提供UI風(fēng)格和設(shè)計(jì) 稿），用戶研究員（提出測試用例或者研究需求）。

所以，完成整個(gè)過程的步驟比單純地制作線框圖或者紙?jiān)鸵獜?fù)雜很多，涉及到工具也非常豐富。工具的意義正是幫助我們?cè)诠ぷ髦刑岣咝?，提升表現(xiàn)效果，市面上一些較典型的工具根據(jù)其擅長的環(huán)節(jié)，可以做如下簡單的分類和介紹：

• 思路整理
• 原型繪制
• 界面元素
• 互動(dòng)與反饋
• 移動(dòng)展示

其中前三部分是廣大設(shè)計(jì)師熟知并且常用的一些工具，而隨著移動(dòng)互聯(lián)網(wǎng)的大潮，越來越多的工作需要我們展示移動(dòng)設(shè)備上的產(chǎn)品和功能。于是，本文更多筆墨將針對(duì)移動(dòng)Demo的制作和展示上的有用工具。這里的工具包括了軟件工具、移動(dòng)App、工作方法和一些概念。

2.1 思路整理

在制作Demo時(shí)，我們并不是要做一個(gè)高大全全的東西出來，一個(gè)是沒必要，另一個(gè)理由是不劃算?；旧现灰獫M足在展示或者演示的過程中”不露破綻” 即可，所以最開始并不必急著去搭建產(chǎn)品的架構(gòu)或者界面，而是要圍繞著展示目標(biāo)和形式，并且充分考慮到誰將來用這個(gè)Demo，來規(guī)劃整體的思路——Demo 的”劇本”。

思維管理軟件：MindManager、Mindjet。也叫思維導(dǎo)圖或者心智圖，既可以用在放射性思考的展開 過程，也可以用在整理各級(jí)主題的相互關(guān)系，最快可以整理并可視化出一個(gè)抽象的概念或者過程，下圖就是一個(gè)簡單的Mindjet的輸出物例子。利用思維管理 軟件，就能將Demo里要展示的產(chǎn)品主要功能抽絲剝繭列清楚層級(jí)關(guān)系，并且安排好主次關(guān)系。

Storyboard：故事板，也叫分鏡腳本，雖然更多用在電影、動(dòng)畫、電視劇、廣告等影像媒體的創(chuàng)作前期，下 圖是一個(gè)簡易故事板的例子。Demo和產(chǎn)品完整App的不同之處在于目的在于”展示”而非”使用”，所以可以借助storyboard的方法將產(chǎn)品核心使 用場景下的主要功能用任務(wù)的形式在時(shí)間線上做一個(gè)規(guī)劃和梳理。在交互展示性的Demo中，storyboard的作用就更加強(qiáng)大了，通過對(duì)場景和情節(jié)的引 入，往往會(huì)使整個(gè)產(chǎn)品或服務(wù)看起來更有說服力。

2.2 原型繪制

原型繪制算是基本功，根據(jù)不同的年代、不同的習(xí)慣和不同的機(jī)器，最典型的就要算是Visio、Framework、Adobe Illustrator、Axure和OmniGraffle最常為大家使用和熟知了。事實(shí)上本人和周圍更流行的工具是Axure（Win、Mac系統(tǒng)） 和OmniGraffle（Mac系統(tǒng)），豐富強(qiáng)大的基礎(chǔ)繪圖功能，豐富的控件模版庫，輸出物簡潔美觀，都使得工作效率大大提高。下圖是 OmniGraffle的軟件界面，有興趣的可以下載試用版哦，Axure，OmniGraffle。

2.3 界面元素

這里的界面元素指的是兩個(gè)方面，一個(gè)是要決定視覺風(fēng)格上的各種元素在Demo體現(xiàn)的程度，顏色、質(zhì)感、字體、圖片等等，就是我們常常說的視覺設(shè)計(jì) （Visual Design）；另一個(gè)方面就是界面上內(nèi)容，比如一些用戶提供內(nèi)容的App，或者一些帶有SNS特征的App，可能每個(gè)用戶的界面呈現(xiàn)都會(huì)很不一樣，這個(gè) 時(shí)候更加要關(guān)注在Demo中要呈現(xiàn)那些內(nèi)容和故事。

我認(rèn)為，在Demo界面中呈現(xiàn)的內(nèi)容都應(yīng)該更加貼近于軟件或服務(wù)最終呈現(xiàn)的效果。善用產(chǎn)品的Persona，結(jié)合各個(gè)功能的主要使用場景，在這些抽 象出的”目標(biāo)用戶”的角度上來想象和模擬這些可能會(huì)個(gè)性化的界面內(nèi)容（頭像、簽名、日志、聊天對(duì)話等等）。是不是很像導(dǎo)演呢，人物角色在場景中經(jīng)歷并演繹 著使用產(chǎn)品或者服務(wù)的故事，企圖讓觀眾更加身臨其境或者感同身受！

最常使用視覺軟件就是Adobe家族的幾兄弟了，Photoshop（風(fēng)格材質(zhì)制作，圖層樣式等效果的合成等）、Illustrator（圖標(biāo)等矢 量圖形繪制）、InDesign（頁面排版）基本能滿足絕大部分的需求。當(dāng)然也有大量針對(duì)不同的視覺設(shè)計(jì)細(xì)節(jié)流程比如圖標(biāo)設(shè)計(jì)、字體設(shè)計(jì)、取色配色、切 圖、預(yù)覽、圖片格式轉(zhuǎn)換等等開發(fā)的各種軟件、網(wǎng)站和插件等工具。實(shí)際工作中需要各種軟件中切換、各種流程上的合作，又著實(shí)是另一門大學(xué)問了！

2.4 互動(dòng)與反饋

這基本上算是整個(gè)Demo制作的精髓部分了，有了這部分的工作，你的靜態(tài)頁面將有如注入生命一樣動(dòng)起來！本節(jié)將從準(zhǔn)備圖片素材、添加跳轉(zhuǎn)關(guān)系、更多的反饋三個(gè)方面來詳細(xì)說說會(huì)用到工具和技巧。

2.4.1 準(zhǔn)備圖片素材

在高保真原型制作中，使用的就是視覺設(shè)計(jì)后的界面圖片素材。所以要制作動(dòng)態(tài)的Demo的話，需要Demo中涉及到的所有功能的視覺元素的圖片：界面 整體效果圖、各控件切圖、各層次的界面內(nèi)容的文本或圖片等等。這時(shí)候需要我們自己在psd的源文件里面切出所有的圖片素材，這個(gè)步驟就是炒菜中的切菜備 料。這里介紹一個(gè)很好用便捷的免費(fèi)Photoshop切圖插件Cut&Slice me（目前僅支持CS6），Photoshop CC也有類似的功能。

2.4.2 添加跳轉(zhuǎn)關(guān)系

根據(jù)展示的思路（Mindjet）或者腳本（Storyboard）的產(chǎn)出物，我們已經(jīng)清晰的知道Demo的展示邏輯和任務(wù)流程，即已經(jīng)定義好了用戶/觀眾的交互路徑，這時(shí)候只需要將頁面元素拼裝成Demo中會(huì)出現(xiàn)的頁面，在這些用來交互的控件上面添加跳轉(zhuǎn)關(guān)系就可以了。

我周圍最為常用的添加互動(dòng)的軟件是Axure，添加完并導(dǎo)出之后生成一個(gè)裝著HTML文件的文件夾。Axure的好處就是內(nèi)置了非常豐富的網(wǎng)站交互模式和鼠標(biāo)事件?；旧暇W(wǎng)站上有的Click、Hover等操作都有，對(duì)應(yīng)頁面間的跳轉(zhuǎn)、打開新頁面等反饋也非常豐富。

這時(shí)我們不難發(fā)現(xiàn)，這些操作和互動(dòng)都是針對(duì)網(wǎng)站或者網(wǎng)頁產(chǎn)品的，Demo展示的時(shí)候也需要網(wǎng)頁瀏覽器來解析播放。如果要在手機(jī)上看，事情就會(huì)變得有點(diǎn)復(fù)雜。以下一個(gè)迂回的解決方案：

Step1 發(fā)布設(shè)置

點(diǎn)擊Publish>Generate HTML，在Mobile / Device的面板中可以安需要設(shè)置設(shè)備和Icon等內(nèi)容。

Step2 手機(jī)瀏覽

方法A：將整個(gè)文件夾傳到一個(gè)網(wǎng)絡(luò)地址上，類似發(fā)布一個(gè)網(wǎng)站，使其中的每個(gè)HTML有自己的訪問網(wǎng)址。在手機(jī)的瀏覽器上訪問這個(gè)網(wǎng)址，就可以看到了，具體操作看這里。但事實(shí)上如何將一個(gè)文件夾發(fā)布到網(wǎng)絡(luò)上，就已經(jīng)是一件很多設(shè)計(jì)師覺得比較麻煩并糾結(jié)的事情，因?yàn)槟阈枰W(wǎng)絡(luò)空間或者一個(gè)服務(wù)器之類的東西。

這個(gè)時(shí)候，需要以下方法B：下載一個(gè)網(wǎng)盤App（如AirDisk Pro），iPhone鏈接電腦在iTunes的”應(yīng)用程序”下面找到這個(gè)App并添加這個(gè)壓縮包，然后在手機(jī)的App里面解壓這個(gè)文件夾，瀏覽就可以 了；同樣也可以利用一個(gè)內(nèi)置瀏覽器的閱讀類App 和一個(gè)解壓App來達(dá)成，具體操作看這里）。

綜上所述，這個(gè)辦法可行卻麻煩，且由于不支持各種觸摸手勢的互動(dòng)只滿足基本的頁面跳轉(zhuǎn)，故互動(dòng)體驗(yàn)和保真程度都不好。

這里推薦一個(gè)簡單的軟件Briefs（Mac 系統(tǒng)），和它的iPhone App，Briefscase。即在Mac制作好Demo，然后用App打開這個(gè)Demo。它的好處在于首先專門為移動(dòng)應(yīng)用（基于iOS設(shè)備）的原型制作 而打造，內(nèi)置各種屏幕尺寸的iOS設(shè)備模型。其次，也是最重要的一點(diǎn)，Briefs支持觸摸為主的手勢操作。它支持界面間的基本動(dòng)態(tài)切換效果，這樣 Demo中頁面的呆板跳轉(zhuǎn)就變?yōu)榱薸OS一直倡導(dǎo)的優(yōu)雅轉(zhuǎn)場，更好的在空間層面上表達(dá)頁面間的層級(jí)關(guān)系和視覺引導(dǎo)。最后，當(dāng)你連上手機(jī)時(shí)，就可以實(shí)時(shí)修改 和預(yù)覽你的Demo，就像在Xcode上編程一樣避免了來回的上傳下載安裝，沒有什么比這點(diǎn)更能高效地幫助你工作了。

還有網(wǎng)站強(qiáng)烈推薦給大家，flinto ，是一個(gè)專門為iOS原型設(shè)計(jì)的 工具，鏈接添加非常高效，也支持iPhone中頁面切換的各種轉(zhuǎn)場效果；更方便的一點(diǎn)是在分享環(huán)節(jié)中，會(huì)自動(dòng)生成一個(gè)網(wǎng)頁地址，用手機(jī)和電腦都可以訪問到 這個(gè)Demo了。最妙的是當(dāng)你將這個(gè)鏈接直接發(fā)送到郵箱里，在iPhone上打開郵件點(diǎn)擊鏈接，在瀏覽器中點(diǎn)擊”分享”按鈕，就可以將這個(gè)Demo直接添 加到手機(jī)桌面上了哦，就像一個(gè)真的App！

類似的工具還有proto.io（類似flinto，基于網(wǎng)站的應(yīng)用），Prototypr（類似Briefs，有Mac客戶端和iPhone App，自備梯子）等等，有興趣的都可以下載來玩玩，這些都是收費(fèi)的軟件或者服務(wù)，幾十到幾百人民幣，不算貴咯！

2.4.3 更細(xì)致的效果

其實(shí)做到上面2.4.2的部分，你的Demo已經(jīng)相對(duì)完整并可供把玩了，但是總有些人是完美主義者，還想再進(jìn)一步怎么辦？這時(shí)你也許就需要更多的一 些時(shí)間精力和愛來學(xué)新的東西——Xcode的Storyboard，Quartz Composer，F(xiàn)lash或是After Effects等，當(dāng)然這需要你具備對(duì)細(xì)節(jié)極致追求的心態(tài)、懂一些基礎(chǔ)英文、數(shù)學(xué)和編程技巧。

有哪些更細(xì)致的效果呢：支持除點(diǎn)擊之外的手勢操作（長按、輕撫、多指操作等）；界面切換時(shí)有更逼真的動(dòng)態(tài)效果和視覺引導(dǎo)；支持聲音、視頻等多媒體的播放。

Xcode的Storyboard，前身是Xcode里面的Interface Builder，在Xcode里面的一個(gè)便捷圖形化的工具。在開發(fā)環(huán)境中，沒有任何限制，設(shè)計(jì)師可以嵌入各種各樣有趣的交互，動(dòng)態(tài)效果和聲音去創(chuàng)造一個(gè)真實(shí)的iOS App的體驗(yàn)。這里有同學(xué)翻譯了一篇很實(shí)用并且詳盡的教程，我也試著有跟著邊學(xué)邊做了一個(gè)小Demo。

好處是可以直接使用大量的iOS自帶的標(biāo)準(zhǔn)界面控件，支持觸摸手勢，并且在頁面切換時(shí)有和實(shí)際iPhone App中一樣的動(dòng)態(tài)效果。缺點(diǎn)也很明顯，當(dāng)跳轉(zhuǎn)關(guān)系非常復(fù)雜的時(shí)候，軟件的可用性就打折扣了，不得不眼花花地去找到某條連接（Segue）來調(diào)整手勢或者 是頁面轉(zhuǎn)場等動(dòng)畫，就如下圖所示。還有個(gè)明顯不足，因?yàn)閄code是為工程師和開發(fā)者設(shè)計(jì)的，所以整個(gè)界面非常復(fù)雜，信息量極大，不熟悉的話很容易抓狂。

Quartz Composer，簡單的說是一個(gè)強(qiáng)大的動(dòng)畫合成軟件，是Apple的開發(fā)軟件包中自帶的軟件。Quartz Composer編輯好的內(nèi)容可以輸出到Interface Builder（就是現(xiàn)在Xcode的Storyboard）。優(yōu)勢在于它生成的動(dòng)態(tài)效果靈活豐富，自由度相當(dāng)高（它可以自定義曲線控制運(yùn)動(dòng)速度與軌 跡），另外它雖然是編程工具，但基本不用寫代碼就可以實(shí)現(xiàn)生成動(dòng)態(tài)效果與交互所需要的邏輯。

2.5 移動(dòng)展示

Demo的最終目的是秀出來，不知道你是否發(fā)現(xiàn)傳統(tǒng)PC軟件（Axure和網(wǎng)頁三劍客Flash、Fireworks和Dreamware）制作的 Demo在移動(dòng)設(shè)備上的展示總是很奇怪或者蹩腳。原因很好理解，這些軟件都是基于網(wǎng)頁產(chǎn)品的原型Demo工具，生成的可交互文件格式為HTML或者是 swf，很顯然與App在手機(jī)上的運(yùn)行機(jī)制和所受限制完全不同。

所以，如何展示基本上取決于你用哪個(gè)軟件制作Demo，如果用Axure這類的軟件做出的HTML文件夾，請(qǐng)參考2.4.2中的Step 2部分；如果用的是Briefs制作的Demo，則可以直接使用配套的iPhone App Briefscase來打開和使用這個(gè)Demo；如果你用了flinto來制作Demo，則在網(wǎng)站上分享這個(gè)鏈接到郵箱，然后在郵箱中就可以”安 裝”Demo到iPhone桌面上了；再則如果高端一點(diǎn)用的是Xcode做的Demo，連上手機(jī)或平板直接發(fā)布成一個(gè)測試App，就可以在各種iOS移動(dòng) 設(shè)備上使用了。

2.6 用手機(jī)做Demo

雖然用手機(jī)進(jìn)行繪圖和添加跳轉(zhuǎn)關(guān)系聽起來就是不方便的一件事情，但是它的好處就是不受時(shí)間地點(diǎn)限制，在移動(dòng)場景下方便設(shè)計(jì)師或產(chǎn)品經(jīng)理快速構(gòu)建產(chǎn)品 概念。POP曾經(jīng)紅極一時(shí)，之后的各種手機(jī)制作原型的工具也如雨后春筍般蓬勃而出，現(xiàn)在市面上的App主要有：POP、app.eal、 Mockup.io、FileSq、IdeaShow等等。

最簡單粗暴易上手的就屬POP了，全名Prototyping on paper，顧名思義就是做紙?jiān)?。分三個(gè)步驟，第一步在紙上畫出線框圖，第二步拍下這些圖，第三步就是添加跳轉(zhuǎn)鏈接，就是這么簡單！

app.eal（中文名：愛備）是一個(gè)有意思的應(yīng)用，也是手機(jī)做Demo來說功能非常強(qiáng)大的一款，也是為數(shù)不多有中文版本的一個(gè)App。比起POP 來說，支持轉(zhuǎn)場效果、支持導(dǎo)航欄與標(biāo)簽欄等都是我們喜聞樂見的功能。如下圖所示，支持設(shè)置眾多的交互細(xì)節(jié)能夠幫助制作出更逼真的Demo。

在手機(jī)上做Demo或多或少有些麻煩，畢竟受制于屏幕的尺寸和不太靈敏精準(zhǔn)的觸摸操作。所以在更多情況下我們都是在電腦上完成整個(gè)制作，只在手機(jī)上進(jìn)行展示或演示。不過誰知道呢，越來越離不開手機(jī)的人們，未來基本上可以在手機(jī)上干任何事情。

三、Summery：小結(jié)

• 對(duì)的場合使用對(duì)的工具/組合：明確最終產(chǎn)出物的目標(biāo)和對(duì)象，打鳥避免用大炮，效率和效果的平衡掌握好；
• 多個(gè)工具的聯(lián)合使用：取長補(bǔ)短，不同環(huán)節(jié)使用不同工具的便捷和優(yōu)勢之處，提高效率和實(shí)現(xiàn)效果；
• 與上下游的人們合作：交互設(shè)計(jì)師與產(chǎn)品經(jīng)理，用戶研究員和視覺設(shè)計(jì)師的理性配合提升Demo的良性結(jié)果，誰也不想九牛二虎之力做個(gè)飛機(jī)稿；
• 會(huì)編程讓你錦上添花：更容易學(xué)會(huì)和使用Xcode和Quartz Composer等模擬出真實(shí)炫酷的效果，Demo呈現(xiàn)將更加生動(dòng)；
• 如果你要做基于iOS設(shè)備的設(shè)計(jì)，請(qǐng)使用Mac電腦，理由你懂的；如果你知道如何制作優(yōu)雅體驗(yàn)的基于Android系統(tǒng)的Demo設(shè)計(jì)，非常歡迎和大家一起分享；
• 雖然有點(diǎn)廢，還是要說句”熟能生巧”——Practice makes perfect！
• 工具只是作為設(shè)計(jì)師的基本技術(shù)技巧，為產(chǎn)品、服務(wù)和品牌服務(wù)，所以理解用戶所需把握行業(yè)趨勢遠(yuǎn)比做技術(shù)控更有意義；

原文地址：騰訊ISUX

作者：Zoey