Demoo | 為移動(dòng)端方案設(shè)計(jì)演示而生

3 評(píng)論 30391 瀏覽 703 收藏 6 分鐘

在移動(dòng)互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)過程中,我們會(huì)在紙板或電腦工具上畫出簡(jiǎn)單的線框圖,用思維導(dǎo)圖標(biāo)注界面間的關(guān)系等,但往往,我們?cè)诓粩喾磸?fù)的討論中會(huì)因?yàn)橐恍├斫馍系恼`差,或是一些細(xì)節(jié)無法腦補(bǔ)還原,而影響方案的實(shí)施,影響項(xiàng)目的進(jìn)度或質(zhì)量。

“樸素”的關(guān)系或原型圖方案會(huì)帶來一定的溝通理解成本,所以需要方案最終以一個(gè)模似真實(shí)的APP,可以滿足的操作演示的同時(shí),借此來講述方案的各類關(guān)系與細(xì)節(jié),驗(yàn)證操作體驗(yàn)等的可行性。

在早期的軟件設(shè)計(jì)時(shí)代,很多團(tuán)隊(duì)會(huì)借助像Flash、AE等動(dòng)畫工具,用動(dòng)畫的方式,輸出一個(gè)模似真實(shí)的軟件界面,來完成這類演示需求,但并不完全能滿足模擬操作或快速修改,實(shí)現(xiàn)成本亦相當(dāng)大,并不利于高速迭代優(yōu)化的方案輸出。

當(dāng)然,移動(dòng)互聯(lián)網(wǎng)時(shí)代,也有很多更輕便可以符合APP方案設(shè)計(jì)演示的工具,從QQ音樂5.0的設(shè)計(jì)之前,我們嘗試了很多互聯(lián)網(wǎng)國(guó)內(nèi)外優(yōu)秀的Demo演示工具,但很快發(fā)現(xiàn),都因不堅(jiān)持迭代更新、速度緩慢、功能臃腫或缺失等原因而遺憾放棄,難以滿足團(tuán)隊(duì)的工作訴求,于是萌生了設(shè)計(jì)研發(fā)一個(gè)小而美,專門滿足“簡(jiǎn)單、更捷、演示”APP設(shè)計(jì)方案的工具,拉起一個(gè)小團(tuán)隊(duì),花兩晚上輸出了一個(gè)簡(jiǎn)單粗暴的版本,為QQ音樂5.x、全民K歌等多個(gè)項(xiàng)目的方案設(shè)計(jì)提供高效的支持。

在過程中,也不斷加入了一些團(tuán)隊(duì)的剛需功能,慢慢在公司內(nèi)部散播開,被更多的項(xiàng)目團(tuán)隊(duì)采用,同時(shí)也收到了一些體驗(yàn)上的誠(chéng)懇建議,一直沒違背它“小而美”的定位,在更多團(tuán)隊(duì)的請(qǐng)求下,我們把工具在安全性和穩(wěn)定性進(jìn)行優(yōu)化,本著互聯(lián)網(wǎng)分享精神,在2016年來臨之際,送給互聯(lián)網(wǎng)產(chǎn)品和設(shè)計(jì)團(tuán)隊(duì)一份禮物,分享奮斗在一線可愛有同樣需求的人兒。

Demoo – 為移動(dòng)端方案設(shè)計(jì)演示而生!(這句話應(yīng)有五毛錢的跑馬燈特效)

它是誰?

Demoo基于web設(shè)計(jì)搭建,無需安裝,在瀏覽器內(nèi)可視化操作,簡(jiǎn)單便捷的創(chuàng)建方式,通過上傳平面稿件,用手勢(shì)或觸點(diǎn)熱區(qū)的方式把界面關(guān)系連接起來,加入連接轉(zhuǎn)場(chǎng)特效,輸出一份仿真APP的、可體驗(yàn)操作的設(shè)計(jì)方案,滿足在電腦、會(huì)議投影現(xiàn)場(chǎng)及手機(jī)上體驗(yàn)操作,或分享給工作伙伴,直觀清晰地理解設(shè)計(jì)上的細(xì)節(jié),促進(jìn)討論溝通,同時(shí)還可授權(quán)給其他成員協(xié)同修改優(yōu)化。

1

基本功能

創(chuàng)建項(xiàng)目,無需代碼技能,做一個(gè)演示DEMO,彈指間只需四步:

1. 新建原型 - 批量上傳移動(dòng)端稿件,在編輯區(qū)生成多個(gè)卡片;

2. 設(shè)置劃動(dòng)手勢(shì)或熱區(qū)觸點(diǎn) - 輸出界面間的關(guān)系和觸發(fā)區(qū)域;

2

3. 選擇轉(zhuǎn)場(chǎng)動(dòng)畫實(shí)現(xiàn)流暢的切換效果;

4. 保存預(yù)覽 - 輸出DEMO進(jìn)行分享、演示和討論。

3

更多細(xì)節(jié)功能

1. 編輯區(qū)域給卡片排序、更名;

2. 編輯區(qū)域雙視圖切換,并可放大、縮小卡片的顯示尺寸,滿足不同的編輯需求;

3. 設(shè)置卡片頂、底部固定區(qū)域,讓長(zhǎng)稿件的中間部份滿足上下滾動(dòng)的體驗(yàn);

4. 設(shè)置APP icon和閃屏;

5. 授權(quán)給其它用戶編輯,協(xié)同辦公。

4

更多功能期待您來發(fā)掘…

體驗(yàn)與分享演示

提供演示DEMO二維碼,用手機(jī)版QQ掃碼,可高保真全屏體驗(yàn)APP效果;

5

在電腦操作創(chuàng)建及預(yù)覽,在會(huì)議現(xiàn)場(chǎng)投影演示講述;

6

參會(huì)成員可用手機(jī)版QQ掃碼在手機(jī)全屏仿真體驗(yàn)與講述者同步并參與討論;

7

萬水千山總是情,體驗(yàn)再說行不行!

 

文章來源@騰訊ISUX

原文鏈接:http://isux.tencent.com/demoo-2015.html

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 說了半天在哪可以使用啊

    來自北京 回復(fù)
  2. 前輩,您好,經(jīng)過一次簡(jiǎn)單的項(xiàng)目,做交互時(shí)發(fā)現(xiàn)設(shè)置“返回上一頁”熱鍵如果連續(xù)兩頁都是“返回上一頁”會(huì)邏輯錯(cuò)誤變成兩個(gè)頁面間相互切換,而不是原有切回去的目的。
    愚以為demoo最大優(yōu)勢(shì)在于快,能在突如其來的小會(huì)議給上司匯報(bào)前使用,以供給上司檢閱效果。而在最后的產(chǎn)品匯報(bào)還是較為成熟的Axure和mockplus較為展示效果穩(wěn)定。

    來自湖北 回復(fù)
  3. 挺不錯(cuò)的

    來自廣東 回復(fù)