Demoo是一款在瀏覽器快速創建移動端原型方案設計演示的工具,熱區和手勢雙設置,把設計思維更保真的通過電腦投影演示呈現,同時可以在手機上實時體驗!
主要功能
快速引入原型畫面并連結相關頁面,加入過渡動作,在線預覽及修改。
方便快捷的操作,只需簡單的幾步就能把一個項目的所有原型頁面串聯起來。
授權他人編輯,可讓多人同時編輯一個項目,充分發揮團隊的戰斗力。
無縫的分享到各種平臺,在不同的平臺上進行測試,讓你的原型有最真實的體驗。
創建項目
登錄后點擊“新建App原型”按鈕就可以創建一個項目,如圖:
填寫項目信息頁面
功能菜單介紹
默認菜單
鏈接編輯菜單
上傳圖片
剛創建好的項目,可以從文件夾中拖入圖片到頁面的空白處生成項目頁面,一張圖片為一個頁面,也可以通過頁面中的上傳圖片按鈕上傳圖片。
創建鏈接熱區
鏈接熱區可以實現頁面間的跳轉,在圖片上任意位置按住鼠標左鍵不放就可以繪制一個鏈接熱區,繪制好熱區后放開鼠標左鍵,會顯示連接目標的曲線,曲線的終點為鏈接熱區的目標點,單擊目標點即能成功的給鏈接熱區綁定一個目標,單擊右鍵可以取消選中目標,如圖:
也可以通過下拉選擇的方式給鏈接綁定一個目標頁面,如圖:
給鏈接綁定目標
單擊鏈接熱區,如果該鏈接已經綁定了目標,那么會顯示一條連接到目標的曲線。
雙擊鏈接熱區,可以給該鏈接重新綁定一個目標。
設置鏈接跳轉動畫
選中某個鏈接后,可以給該鏈接設置一個跳轉動畫,實現頁面間的跳轉已動畫的方式進行,如圖:
刪除鏈接熱區
選中某個鏈接后,可以點擊刪除鏈接按鈕刪除鏈接,也可以按Delete鍵刪除該鏈接,如圖:
縮放頁面
拖動頁面上的滑動條,可以對頁面進行縮放,方便精確的操作頁面上的元素,如圖:
設置頁面手勢
選中某個頁面后可以給該頁面設置一個手勢,這樣頁面就可以通過手勢來實現跳轉,單擊手勢圖標顯示手勢對應的目標,雙擊手勢圖標可以重新綁定目標,每個頁面最多可以綁定四個手勢,如圖:
固定頁面的頭部和底部
拖動頁面底部和頂部的裁剪條,可以實現裁剪范圍內頁面固定在頂部或者底部,也可以選中頁面后在輸入框中精確的設置頁面的裁剪值,如圖:
替換圖片
將新的圖片拖到頁面中對應的圖片區域或者選中某個頁面后點擊替換圖片按鈕即可實現圖片的替換,如圖:
設置項目屬性
點擊配置圖標就可以重新對項目的屬性進行配置,如圖:
頁面排序
按住標題后面的空白處不放,可以改變頁面的排序,默認第一張圖片會首屏展示,如圖:
本文為@運營喵原創,運營喵專欄作者。