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

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

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

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

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

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

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

涉及技巧：圖片排序

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

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

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

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

 

Step 3：為長頁面固定滾動區(qū)域

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

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

Step 4：設(shè)置頁面滑動手勢

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

大屏幕手機越來越泛濫的時候，手勢滑動成為一個很常見的操作，Demoo也可以模擬手勢操作哦！

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

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

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

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

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

涉及技巧：將原型添加到手機桌面，模擬最真實的app體驗

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

 

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

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

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

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

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

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

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