2016-3-10 博博
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
外星來的蘋果：之前提到騰訊出了一款輕便的Demo演示工具，今天這篇文章以全民K歌原型制作為例，介紹從無到有創(chuàng)建一個原型的流程，并在每一個流程中介紹該流程的技巧。
對于每一位設計師的日常工作來說，如何有效闡述自己的方案是非常關(guān)鍵的一步，如果只是一張原型圖方案，無論標注得多么清楚，都會有一定的溝通理解成本，所以通常都會需要一個原型demo來幫助大家對方案進行直觀的演示，以此闡明方案的各類細節(jié)、操作體驗等等。為了幫助大家在移動互聯(lián)網(wǎng)時代，快速、簡單地制作原型demo，Demoo應運而生。
Demoo是基于web設計搭建的一款在瀏覽器內(nèi)進行可視化操作的工具。通過上傳平面稿件，用手勢或觸點熱區(qū)的方式把界面關(guān)系連接起來，加入連接轉(zhuǎn)場，輸出一份仿真APP的、可體驗操作的設計方案，滿足在電腦、會議投影現(xiàn)場及手機上體驗操作。點擊這里可查看更詳細介紹：《為移動端方案設計演示而生的DEMOO》
涉及技巧：批量導入
在設計工具中，我已經(jīng)設計好了全民K歌5個主要頁面的圖并命名好保存在文件夾中，準備開始制作原型。如圖所示，Demoo支持批量導入圖片，將我需要的圖片全部選中，拖放到虛框內(nèi)，即可完成圖片導入工作。導入后，就相當于你已經(jīng)把app原材料都放到工作臺啦，之后操作起來就會特別方便。
涉及技巧：圖片排序
Demoo支持我們對圖片進行拖動排序整理，在標題欄區(qū)域鼠標停留，即可發(fā)現(xiàn)鼠標指針變?yōu)槭中?，此時可拖動頁面。友情提示：按照app主tab邏輯擺放頁面，后面建立tab跳轉(zhuǎn)時，會更輕松哦！
涉及技巧：運用復制粘貼熱區(qū)，快速建立鏈接
導入之后，自然就是將各個頁面建立跳轉(zhuǎn)鏈接了，在需要跳轉(zhuǎn)鏈接的地方，拖動鼠標，即可建立一個熱區(qū)，松開鼠標可以看到熱區(qū)小尾巴，點擊對應跳轉(zhuǎn)的頁面，再次點擊，一個鏈接完成。這時候，你們會意識到，這么多跳轉(zhuǎn)，那我得要點多少次呀？Demoo有個非常驚人的設計是——熱區(qū)可復制！?。∵@就意味著，所有頁面，相同的跳轉(zhuǎn)可以通過復制來減少操作。這一點在tab的制作過程中省非常多事兒。舉例來看，所有導航里面的“發(fā)現(xiàn)”其實都是鏈接到第二個頁面，于是，我只需要創(chuàng)建一個熱區(qū)鏈接，在接下來的幾個頁面中復制粘貼熱區(qū)，其他幾個頁面就快速建立好熱區(qū)了！最有效的是，復制粘貼的過程中，熱區(qū)的位置還不會變！
涉及技巧：記住頂部bar和底部導航的高度，準確設定滾動區(qū)域不留白
以圖示為例，動態(tài)頁面非常長，需要模擬頁面滾動的效果，實際app中，頂bar和底部導航是不會動的，這時候，只需要拖動上下固定的錨點來固定位置就好了。這里Demoo有一個值得贊美的小細節(jié)是，當你拖動錨點時，會放大顯示頁面中間的位置，并且展示錨點拖動的像素值，所以你只要記住頂bar和底部導航的高度，你一定可以拖到一個完美的位置，沒有白邊。
涉及技巧：雙擊手勢區(qū)域，快速設置手勢熱點
大屏幕手機越來越泛濫的時候，手勢滑動成為一個很常見的操作，Demoo也可以模擬手勢操作哦！
如圖所示頁面左邊的一排手指，就是用來設定手勢的，從上到下分別對應左滑、右滑、上滑、下滑的手勢操作，可以根據(jù)需要選擇。雙擊手勢，即可出現(xiàn)和熱區(qū)尾巴一樣的藍色連接線，在對應需要停留的頁面點擊即可完成手勢操作的設定，完成后，手指變成藍色，示意有手勢操作。圖中，我給了這個頁面一個右滑返回到首頁的操作，模擬手勢返回。
涉及技巧：鼠標停留在切換示意區(qū)，預覽動畫效果
真實的app中，頁面間常常通過方向來示意層級關(guān)系，例如重新創(chuàng)建的流程，通常創(chuàng)建頁面會從底部向上呼起，于是，在建立熱區(qū)鏈接過程時，我們需要對鏈接進行方向設定。如圖示，我將點歌臺呼起的頁面出現(xiàn)形式，設定為從下往上出。如果不是很確定切換效果，Demoo很細心的在這里設計了動畫預覽，鼠標停留在小方塊上時，會有微動畫示意，多看幾遍也就明白了。
涉及技巧：將原型添加到手機桌面，模擬最真實的app體驗
Demoo支持大家用手Q掃一掃在手機上查看原型，然而在手Q里打開鏈接特別不穩(wěn)定，一不小心返回了，又要重新掃一遍二維碼。有一個技巧是，可以將原型添加到桌面，且只要設置好，Demoo可以做到app的圖標和閃屏完整模擬，讓你體驗從手機桌面打開app的真實感！點擊屏幕右側(cè)的設置，上傳好app圖標和閃屏之后，用手機QQ掃二維碼打開頁面，然后用分享在safari中打開鏈接，在safari中設置分享到屏幕，于是，大功告成，你可以從桌面打開這個app了！是不是傻傻分不清楚是app還是app原型呢！
至此，一個app原型的設計就完整了，歡迎大家掃二維碼圍觀這個簡單的原型。當年全民K歌3.0提案的時候，就拿著這個原型去給產(chǎn)品經(jīng)理看，產(chǎn)品經(jīng)理都驚呆了喲！
最后，聽說很多試用過的朋友都在詢問，如何在Demoo中模擬浮層的效果，Demoo其實更擅長的是頁面之間的跳轉(zhuǎn)，那么如何模擬呢？這里給大家一個小技巧。
Step 1：將沒有浮層和有浮層的兩張圖，導入demoo
Step 2：在沒有浮層的圖中，點擊出浮層的區(qū)域建立熱點，連接到有浮層狀態(tài)頁面。
Step 3：在有浮層頁面建立點擊空白返回沒有浮層頁面的熱點鏈接（注意選擇過渡動畫為漸隱哦）
沒錯，用兩個狀態(tài)的跳轉(zhuǎn)，就可以模擬浮層出現(xiàn)啦~ 當然，這個技巧在動效上還不夠完美，劇透一下，Demoo團隊正在全力完善浮層的設計哦，相信后續(xù)會有更好用的方法！
藍藍設計( www.alimai.net )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務