如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

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

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

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

Step 1：導入圖片

涉及技巧：批量導入

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

涉及技巧：圖片排序

Demoo支持我們對圖片進行拖動排序整理，在標題欄區域鼠標停留，即可發現鼠標指針變為十字型，此時可拖動頁面。友情提示：按照app主tab邏輯擺放頁面，后面建立tab跳轉時，會更輕松哦！

Step 2：建立tab之間的跳轉

涉及技巧：運用復制粘貼熱區，快速建立鏈接

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

 

Step 3：為長頁面固定滾動區域

涉及技巧：記住頂部bar和底部導航的高度，準確設定滾動區域不留白

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

Step 4：設置頁面滑動手勢

涉及技巧：雙擊手勢區域，快速設置手勢熱點

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

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

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

涉及技巧：鼠標停留在切換示意區，預覽動畫效果

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

Step 6：在手機中預覽原型效果

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

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

 

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

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

Step 1：將沒有浮層和有浮層的兩張圖，導入demoo

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

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

沒錯，用兩個狀態的跳轉，就可以模擬浮層出現啦~ 當然，這個技巧在動效上還不夠完美，劇透一下，Demoo團隊正在全力完善浮層的設計哦，相信后續會有更好用的方法！

藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供有效的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務