如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

外星來的蘋果：之前提到騰訊出了一款輕便的Demo演示工具，今天這篇文章以全民K歌原型制作為例，介紹從無到有創(chuàng)建一個(gè)原型的流程，并在每一個(gè)流程中介紹該流程的技巧。

對(duì)于每一位設(shè)計(jì)師的日常工作來說，如何有效闡述自己的方案是非常關(guān)鍵的一步，如果只是一張?jiān)蛨D方案，無論標(biāo)注得多么清楚，都會(huì)有一定的溝通理解成本，所以通常都會(huì)需要一個(gè)原型demo來幫助大家對(duì)方案進(jìn)行直觀的演示，以此闡明方案的各類細(xì)節(jié)、操作體驗(yàn)等等。為了幫助大家在移動(dòng)互聯(lián)網(wǎng)時(shí)代，快速、簡(jiǎn)單地制作原型demo，Demoo應(yīng)運(yùn)而生。

Demoo是基于web設(shè)計(jì)搭建的一款在瀏覽器內(nèi)進(jìn)行可視化操作的工具。通過上傳平面稿件，用手勢(shì)或觸點(diǎn)熱區(qū)的方式把界面關(guān)系連接起來，加入連接轉(zhuǎn)場(chǎng)，輸出一份仿真APP的、可體驗(yàn)操作的設(shè)計(jì)方案，滿足在電腦、會(huì)議投影現(xiàn)場(chǎng)及手機(jī)上體驗(yàn)操作。點(diǎn)擊這里可查看更詳細(xì)介紹：《為移動(dòng)端方案設(shè)計(jì)演示而生的DEMOO》

Step 1：導(dǎo)入圖片

涉及技巧：批量導(dǎo)入

在設(shè)計(jì)工具中，我已經(jīng)設(shè)計(jì)好了全民K歌5個(gè)主要頁面的圖并命名好保存在文件夾中，準(zhǔn)備開始制作原型。如圖所示，Demoo支持批量導(dǎo)入圖片，將我需要的圖片全部選中，拖放到虛框內(nèi)，即可完成圖片導(dǎo)入工作。導(dǎo)入后，就相當(dāng)于你已經(jīng)把a(bǔ)pp原材料都放到工作臺(tái)啦，之后操作起來就會(huì)特別方便。

涉及技巧：圖片排序

Demoo支持我們對(duì)圖片進(jìn)行拖動(dòng)排序整理，在標(biāo)題欄區(qū)域鼠標(biāo)停留，即可發(fā)現(xiàn)鼠標(biāo)指針變?yōu)槭中?，此時(shí)可拖動(dòng)頁面。友情提示：按照app主tab邏輯擺放頁面，后面建立tab跳轉(zhuǎn)時(shí)，會(huì)更輕松哦！

Step 2：建立tab之間的跳轉(zhuǎn)

涉及技巧：運(yùn)用復(fù)制粘貼熱區(qū)，快速建立鏈接

導(dǎo)入之后，自然就是將各個(gè)頁面建立跳轉(zhuǎn)鏈接了，在需要跳轉(zhuǎn)鏈接的地方，拖動(dòng)鼠標(biāo)，即可建立一個(gè)熱區(qū)，松開鼠標(biāo)可以看到熱區(qū)小尾巴，點(diǎn)擊對(duì)應(yīng)跳轉(zhuǎn)的頁面，再次點(diǎn)擊，一個(gè)鏈接完成。這時(shí)候，你們會(huì)意識(shí)到，這么多跳轉(zhuǎn)，那我得要點(diǎn)多少次呀？Demoo有個(gè)非常驚人的設(shè)計(jì)是——熱區(qū)可復(fù)制?。?！這就意味著，所有頁面，相同的跳轉(zhuǎn)可以通過復(fù)制來減少操作。這一點(diǎn)在tab的制作過程中省非常多事兒。舉例來看，所有導(dǎo)航里面的“發(fā)現(xiàn)”其實(shí)都是鏈接到第二個(gè)頁面，于是，我只需要?jiǎng)?chuàng)建一個(gè)熱區(qū)鏈接，在接下來的幾個(gè)頁面中復(fù)制粘貼熱區(qū)，其他幾個(gè)頁面就快速建立好熱區(qū)了！最有效的是，復(fù)制粘貼的過程中，熱區(qū)的位置還不會(huì)變！

 

Step 3：為長(zhǎng)頁面固定滾動(dòng)區(qū)域

涉及技巧：記住頂部bar和底部導(dǎo)航的高度，準(zhǔn)確設(shè)定滾動(dòng)區(qū)域不留白

以圖示為例，動(dòng)態(tài)頁面非常長(zhǎng)，需要模擬頁面滾動(dòng)的效果，實(shí)際app中，頂bar和底部導(dǎo)航是不會(huì)動(dòng)的，這時(shí)候，只需要拖動(dòng)上下固定的錨點(diǎn)來固定位置就好了。這里Demoo有一個(gè)值得贊美的小細(xì)節(jié)是，當(dāng)你拖動(dòng)錨點(diǎn)時(shí)，會(huì)放大顯示頁面中間的位置，并且展示錨點(diǎn)拖動(dòng)的像素值，所以你只要記住頂bar和底部導(dǎo)航的高度，你一定可以拖到一個(gè)完美的位置，沒有白邊。

Step 4：設(shè)置頁面滑動(dòng)手勢(shì)

涉及技巧：雙擊手勢(shì)區(qū)域，快速設(shè)置手勢(shì)熱點(diǎn)

大屏幕手機(jī)越來越泛濫的時(shí)候，手勢(shì)滑動(dòng)成為一個(gè)很常見的操作，Demoo也可以模擬手勢(shì)操作哦！

如圖所示頁面左邊的一排手指，就是用來設(shè)定手勢(shì)的，從上到下分別對(duì)應(yīng)左滑、右滑、上滑、下滑的手勢(shì)操作，可以根據(jù)需要選擇。雙擊手勢(shì)，即可出現(xiàn)和熱區(qū)尾巴一樣的藍(lán)色連接線，在對(duì)應(yīng)需要停留的頁面點(diǎn)擊即可完成手勢(shì)操作的設(shè)定，完成后，手指變成藍(lán)色，示意有手勢(shì)操作。圖中，我給了這個(gè)頁面一個(gè)右滑返回到首頁的操作，模擬手勢(shì)返回。

Step 5：建立頁面切換方向，打磨細(xì)節(jié)

涉及技巧：鼠標(biāo)停留在切換示意區(qū)，預(yù)覽動(dòng)畫效果

真實(shí)的app中，頁面間常常通過方向來示意層級(jí)關(guān)系，例如重新創(chuàng)建的流程，通常創(chuàng)建頁面會(huì)從底部向上呼起，于是，在建立熱區(qū)鏈接過程時(shí)，我們需要對(duì)鏈接進(jìn)行方向設(shè)定。如圖示，我將點(diǎn)歌臺(tái)呼起的頁面出現(xiàn)形式，設(shè)定為從下往上出。如果不是很確定切換效果，Demoo很細(xì)心的在這里設(shè)計(jì)了動(dòng)畫預(yù)覽，鼠標(biāo)停留在小方塊上時(shí)，會(huì)有微動(dòng)畫示意，多看幾遍也就明白了。

Step 6：在手機(jī)中預(yù)覽原型效果

涉及技巧：將原型添加到手機(jī)桌面，模擬最真實(shí)的app體驗(yàn)

Demoo支持大家用手Q掃一掃在手機(jī)上查看原型，然而在手Q里打開鏈接特別不穩(wěn)定，一不小心返回了，又要重新掃一遍二維碼。有一個(gè)技巧是，可以將原型添加到桌面，且只要設(shè)置好，Demoo可以做到app的圖標(biāo)和閃屏完整模擬，讓你體驗(yàn)從手機(jī)桌面打開app的真實(shí)感！點(diǎn)擊屏幕右側(cè)的設(shè)置，上傳好app圖標(biāo)和閃屏之后，用手機(jī)QQ掃二維碼打開頁面，然后用分享在safari中打開鏈接，在safari中設(shè)置分享到屏幕，于是，大功告成，你可以從桌面打開這個(gè)app了！是不是傻傻分不清楚是app還是app原型呢！

 

至此，一個(gè)app原型的設(shè)計(jì)就完整了，歡迎大家掃二維碼圍觀這個(gè)簡(jiǎn)單的原型。當(dāng)年全民K歌3.0提案的時(shí)候，就拿著這個(gè)原型去給產(chǎn)品經(jīng)理看，產(chǎn)品經(jīng)理都驚呆了喲！

最后，聽說很多試用過的朋友都在詢問，如何在Demoo中模擬浮層的效果，Demoo其實(shí)更擅長(zhǎng)的是頁面之間的跳轉(zhuǎn)，那么如何模擬呢？這里給大家一個(gè)小技巧。

Step 1：將沒有浮層和有浮層的兩張圖，導(dǎo)入demoo

Step 2：在沒有浮層的圖中，點(diǎn)擊出浮層的區(qū)域建立熱點(diǎn)，連接到有浮層狀態(tài)頁面。

Step 3：在有浮層頁面建立點(diǎn)擊空白返回沒有浮層頁面的熱點(diǎn)鏈接（注意選擇過渡動(dòng)畫為漸隱哦）

沒錯(cuò)，用兩個(gè)狀態(tài)的跳轉(zhuǎn)，就可以模擬浮層出現(xiàn)啦~ 當(dāng)然，這個(gè)技巧在動(dòng)效上還不夠完美，劇透一下，Demoo團(tuán)隊(duì)正在全力完善浮層的設(shè)計(jì)哦，相信后續(xù)會(huì)有更好用的方法！

藍(lán)藍(lán)設(shè)計(jì)( bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)