Demo這個(gè)大家有聽說過吧。蒙特微網(wǎng)站建設(shè)給大家分享一下微網(wǎng)站建設(shè)微網(wǎng)站Demo可視化工具。什么是Demo?Demo是Demonstration的縮寫，表示“示范”、“展示”，常指具有示范或展示功能及意味的事物。本文中Demo的含義更接近與維基百科中的這個(gè)定義：一種原型，主要用來展示想法、表現(xiàn)、方法或者是產(chǎn)品特點(diǎn)的簡(jiǎn)易樣例或未完成的產(chǎn)品版本。它常常用來對(duì)投資者、合伙人、記者甚至于潛在的用戶展示其選擇方法的可行性。在視覺、交互和內(nèi)容的保真程度上有著高保真和低保真的區(qū)分，所以本文的Demo就是指在這三個(gè)緯度(視覺、交互、內(nèi)容)保真程度都較高的原型。
而對(duì)于微網(wǎng)站建設(shè)Demo往往用在以下幾個(gè)場(chǎng)合和對(duì)象：
新產(chǎn)品 / 功能的演示-投資者、老板、合伙人
用戶研究/市場(chǎng)調(diào)研-研究員、潛在目標(biāo)用戶
可用性測(cè)試-真實(shí)用戶
交互 / 設(shè)計(jì)走查-設(shè)計(jì)師、產(chǎn)品經(jīng)理、專家
什么是“更好”的Demo：
核心功能完整，主要任務(wù)流足夠深度
交互保真程度高，操作的體驗(yàn)感真實(shí)
根據(jù)場(chǎng)合與目的有適當(dāng)?shù)囊曈X細(xì)節(jié)
避免制作過程“過于費(fèi)工”或“效率底下”
二、工具與步驟
設(shè)計(jì)師們特別是交互設(shè)計(jì)師往往需要承擔(dān)制作Demo的工作，而這個(gè)過程從上涉及到產(chǎn)品想法和主要功能、信息架構(gòu)和界面的組織，甚至向下涉及到視覺風(fēng)格和互動(dòng)反饋等各個(gè)環(huán)節(jié);打交道的人可能包括了產(chǎn)品經(jīng)理(提供原始的產(chǎn)品概念，用戶需求分析或者是功能完整的產(chǎn)品文檔)，視覺設(shè)計(jì)師(提供UI風(fēng)格和設(shè)計(jì)稿)，用戶研究員(提出測(cè)試用例或者研究需求)。
所以，完成整個(gè)過程的步驟比單純地制作線框圖或者紙?jiān)鸵獜?fù)雜很多，涉及到工具也非常豐富。工具的意義正是幫助我們?cè)诠ぷ髦刑岣咝?，提升表現(xiàn)效果，市面上一些較典型的工具根據(jù)其擅長(zhǎng)的環(huán)節(jié)，可以做如下簡(jiǎn)單的分類和介紹：
思路整理
原型繪制
界面元素
互動(dòng)與反饋
移動(dòng)展示
其中前三部分是廣大設(shè)計(jì)師熟知并且常用的一些工具，而隨著移動(dòng)互聯(lián)網(wǎng)的大潮，越來越多的工作需要我們展示移動(dòng)設(shè)備上的產(chǎn)品和功能。于是，本文更多筆墨將針對(duì)移動(dòng)Demo的制作和展示上的有用工具。這里的工具包括了軟件工具、移動(dòng)App、工作方法和一些概念。
2.1 思路整理
在制作Demo時(shí)，我們并不是要做一個(gè)高大全全的東西出來，一個(gè)是沒必要，另一個(gè)理由是不劃算?；旧现灰獫M足在展示或者演示的過程中“不露破綻”即可，所以最開始并不必急著去搭建產(chǎn)品的架構(gòu)或者界面，而是要圍繞著展示目標(biāo)和形式，并且充分考慮到誰將來用這個(gè)Demo，來規(guī)劃整體的思路——Demo的“劇本”。
思維管理軟件：MindManager、Mindjet。也叫思維導(dǎo)圖或者心智圖，既可以用在放射性思考的展開過程，也可以用在整理各級(jí)主題的相互關(guān)系，最快可以整理并可視化出一個(gè)抽象的概念或者過程，下圖就是一個(gè)簡(jiǎn)單的Mindjet的輸出物例子。利用思維管理軟件，就能將Demo里要展示的產(chǎn)品主要功能抽絲剝繭列清楚層級(jí)關(guān)系，并且安排好主次關(guān)系。
Storyboard：故事板，也叫分鏡腳本，雖然更多用在電影、動(dòng)畫、電視劇、廣告等影像媒體的創(chuàng)作前期，下圖是一個(gè)簡(jiǎn)易故事板的例子。Demo和產(chǎn)品完整App的不同之處在于目的在于“展示”而非“使用”，所以可以借助storyboard的方法將產(chǎn)品核心使用場(chǎng)景下的主要功能用任務(wù)的形式在時(shí)間線上做一個(gè)規(guī)劃和梳理。在交互展示性的Demo中，storyboard的作用就更加強(qiáng)大了，通過對(duì)場(chǎng)景和情節(jié)的引入，往往會(huì)使整個(gè)產(chǎn)品或服務(wù)看起來更有說服力。
2.2 原型繪制
原型繪制算是基本功，根據(jù)不同的年代、不同的習(xí)慣和不同的機(jī)器，最典型的就要算是Visio、Framework、Adobe Illustrator、Axure和OmniGraffle最常為大家使用和熟知了。事實(shí)上本人和周圍更流行的工具是Axure(Win、Mac系統(tǒng))和OmniGraffle(Mac系統(tǒng))，豐富強(qiáng)大的基礎(chǔ)繪圖功能，豐富的控件模版庫(kù)，輸出物簡(jiǎn)潔美觀，都使得工作效率大大提高。下圖是OmniGraffle的軟件界面，有興趣的可以下載試用版哦，Axure，OmniGraffle。
2.3 界面元素
這里的界面元素指的是兩個(gè)方面，一個(gè)是要決定視覺風(fēng)格上的各種元素在Demo體現(xiàn)的程度，顏色、質(zhì)感、字體、圖片等等，就是我們常常說的視覺設(shè)計(jì)(Visual Design);另一個(gè)方面就是界面上內(nèi)容，比如一些用戶提供內(nèi)容的App，或者一些帶有SNS特征的App，可能每個(gè)用戶的界面呈現(xiàn)都會(huì)很不一樣，這個(gè)時(shí)候更加要關(guān)注在Demo中要呈現(xiàn)那些內(nèi)容和故事。
在Demo界面中呈現(xiàn)的內(nèi)容都應(yīng)該更加貼近于軟件或服務(wù)最終呈現(xiàn)的效果。善用產(chǎn)品的Persona，結(jié)合各個(gè)功能的主要使用場(chǎng)景，在這些抽象出的“目標(biāo)用戶”的角度上來想象和模擬這些可能會(huì)個(gè)性化的界面內(nèi)容(頭像、簽名、日志、聊天對(duì)話等等)。是不是很像導(dǎo)演呢，人物角色在場(chǎng)景中經(jīng)歷并演繹著使用產(chǎn)品或者服務(wù)的故事，企圖讓觀眾更加身臨其境或者感同身受!
最常使用視覺軟件就是Adobe家族的幾兄弟了，Photoshop(風(fēng)格材質(zhì)制作，圖層樣式等效果的合成等)、Illustrator(圖標(biāo)等矢量圖形繪制)、InDesign(頁(yè)面排版)基本能滿足絕大部分的需求。當(dāng)然也有大量針對(duì)不同的視覺設(shè)計(jì)細(xì)節(jié)流程比如圖標(biāo)設(shè)計(jì)、字體設(shè)計(jì)、取色配色、切圖、預(yù)覽、圖片格式轉(zhuǎn)換等等開發(fā)的各種軟件、網(wǎng)站和插件等工具。實(shí)際工作中需要各種軟件中切換、各種流程上的合作，又著實(shí)是另一門大學(xué)問了!
2.4 互動(dòng)與反饋
這基本上算是整個(gè)Demo制作的精髓部分了，有了這部分的工作，你的靜態(tài)頁(yè)面將有如注入生命一樣動(dòng)起來!本節(jié)將從準(zhǔn)備圖片素材、添加跳轉(zhuǎn)關(guān)系、更多的反饋三個(gè)方面來詳細(xì)說說會(huì)用到工具和技巧。
2.4.1 準(zhǔn)備圖片素材
在高保真原型制作中，使用的就是視覺設(shè)計(jì)后的界面圖片素材。所以要制作動(dòng)態(tài)的Demo的話，需要Demo中涉及到的所有功能的視覺元素的圖片：界面整體效果圖、各控件切圖、各層次的界面內(nèi)容的文本或圖片等等。這時(shí)候需要我們自己在psd的源文件里面切出所有的圖片素材，這個(gè)步驟就是炒菜中的切菜備料。這里介紹一個(gè)很好用便捷的免費(fèi)Photoshop切圖插件Cut&Slice me(目前僅支持CS6)，Photoshop CC也有類似的功能。
2.4.2 添加跳轉(zhuǎn)關(guān)系
根據(jù)展示的思路(Mindjet)或者腳本(Storyboard)的產(chǎn)出物，我們已經(jīng)清晰的知道Demo的展示邏輯和任務(wù)流程，即已經(jīng)定義好了用戶/觀眾的交互路徑，這時(shí)候只需要將頁(yè)面元素拼裝成Demo中會(huì)出現(xiàn)的頁(yè)面，在這些用來交互的控件上面添加跳轉(zhuǎn)關(guān)系就可以了。
身邊最為常用的添加互動(dòng)的軟件是Axure，添加完并導(dǎo)出之后生成一個(gè)裝著HTML文件的文件夾。Axure的好處就是內(nèi)置了非常豐富的網(wǎng)站交互模式和鼠標(biāo)事件。基本上網(wǎng)站上有的Click、Hover等操作都有，對(duì)應(yīng)頁(yè)面間的跳轉(zhuǎn)、打開新頁(yè)面等反饋也非常豐富。
2.5 移動(dòng)展示
Demo的最終目的是秀出來，不知道你是否發(fā)現(xiàn)傳統(tǒng)PC軟件(Axure和網(wǎng)頁(yè)三劍客Flash、Fireworks和Dreamware)制作的Demo在移動(dòng)設(shè)備上的展示總是很奇怪或者蹩腳。原因很好理解，這些軟件都是基于網(wǎng)頁(yè)產(chǎn)品的原型Demo工具，生成的可交互文件格式為HTML或者是swf，很顯然與App在手機(jī)上的運(yùn)行機(jī)制和所受限制完全不同。
所以，如何展示基本上取決于你用哪個(gè)軟件制作Demo，如果用Axure這類的軟件做出的HTML文件夾，請(qǐng)參考2.4.2中的Step 2部分;如果用的是Briefs制作的Demo，則可以直接使用配套的iPhone App Briefscase來打開和使用這個(gè)Demo;如果你用了flinto來制作Demo，則在網(wǎng)站上分享這個(gè)鏈接到郵箱，然后在郵箱中就可以“安裝”Demo到iPhone桌面上了;再則如果高端一點(diǎn)用的是Xcode做的Demo，連上手機(jī)或平板直接發(fā)布成一個(gè)測(cè)試App，就可以在各種iOS移動(dòng)設(shè)備上使用了。
產(chǎn)品經(jīng)理必知的微網(wǎng)站Demo可視化工具蒙特微網(wǎng)站建設(shè)分享的如何?如果您想了解更多微網(wǎng)站相關(guān)資訊，請(qǐng)繼續(xù)關(guān)注蒙特官網(wǎng)。蒙特微網(wǎng)站建設(shè)15年的經(jīng)驗(yàn)和技術(shù)，我們的努力您怎么能可以看不到呢?15158184365蒙特人等著您!
Demo這個(gè)大家有聽說過吧。蒙特微網(wǎng)站建設(shè)給大家分享一下微網(wǎng)站建設(shè)微網(wǎng)站Demo可視化工具。什么是Demo?Demo是Demonstration的縮寫，表示“示范”、“展示”，常指具有示范或展示功能及意味的事物。本文中Demo的含義更接近與維基百科中的這個(gè)定義：一種原型，主要用來展示想法、表現(xiàn)、方法或者是產(chǎn)品特點(diǎn)的簡(jiǎn)易樣例或未完成的產(chǎn)品版本。它常常用來對(duì)投資者、合伙人、記者甚至于潛在的用戶展示其選擇方法的可行性。在視覺、交互和內(nèi)容的保真程度上有著高保真和低保真的區(qū)分，所以本文的Demo就是指在這三個(gè)緯度(視覺、交互、內(nèi)容)保真程度都較高的原型。
而對(duì)于微網(wǎng)站建設(shè)Demo往往用在以下幾個(gè)場(chǎng)合和對(duì)象：
新產(chǎn)品 / 功能的演示-投資者、老板、合伙人
用戶研究/市場(chǎng)調(diào)研-研究員、潛在目標(biāo)用戶
可用性測(cè)試-真實(shí)用戶
交互 / 設(shè)計(jì)走查-設(shè)計(jì)師、產(chǎn)品經(jīng)理、專家
什么是“更好”的Demo：
核心功能完整，主要任務(wù)流足夠深度
交互保真程度高，操作的體驗(yàn)感真實(shí)
根據(jù)場(chǎng)合與目的有適當(dāng)?shù)囊曈X細(xì)節(jié)
避免制作過程“過于費(fèi)工”或“效率底下”
二、工具與步驟
設(shè)計(jì)師們特別是交互設(shè)計(jì)師往往需要承擔(dān)制作Demo的工作，而這個(gè)過程從上涉及到產(chǎn)品想法和主要功能、信息架構(gòu)和界面的組織，甚至向下涉及到視覺風(fēng)格和互動(dòng)反饋等各個(gè)環(huán)節(jié);打交道的人可能包括了產(chǎn)品經(jīng)理(提供原始的產(chǎn)品概念，用戶需求分析或者是功能完整的產(chǎn)品文檔)，視覺設(shè)計(jì)師(提供UI風(fēng)格和設(shè)計(jì)稿)，用戶研究員(提出測(cè)試用例或者研究需求)。
所以，完成整個(gè)過程的步驟比單純地制作線框圖或者紙?jiān)鸵獜?fù)雜很多，涉及到工具也非常豐富。工具的意義正是幫助我們?cè)诠ぷ髦刑岣咝剩嵘憩F(xiàn)效果，市面上一些較典型的工具根據(jù)其擅長(zhǎng)的環(huán)節(jié)，可以做如下簡(jiǎn)單的分類和介紹：
思路整理
原型繪制
界面元素
互動(dòng)與反饋
移動(dòng)展示
其中前三部分是廣大設(shè)計(jì)師熟知并且常用的一些工具，而隨著移動(dòng)互聯(lián)網(wǎng)的大潮，越來越多的工作需要我們展示移動(dòng)設(shè)備上的產(chǎn)品和功能。于是，本文更多筆墨將針對(duì)移動(dòng)Demo的制作和展示上的有用工具。這里的工具包括了軟件工具、移動(dòng)App、工作方法和一些概念。
2.1 思路整理
在制作Demo時(shí)，我們并不是要做一個(gè)高大全全的東西出來，一個(gè)是沒必要，另一個(gè)理由是不劃算?；旧现灰獫M足在展示或者演示的過程中“不露破綻”即可，所以最開始并不必急著去搭建產(chǎn)品的架構(gòu)或者界面，而是要圍繞著展示目標(biāo)和形式，并且充分考慮到誰將來用這個(gè)Demo，來規(guī)劃整體的思路——Demo的“劇本”。
思維管理軟件：MindManager、Mindjet。也叫思維導(dǎo)圖或者心智圖，既可以用在放射性思考的展開過程，也可以用在整理各級(jí)主題的相互關(guān)系，最快可以整理并可視化出一個(gè)抽象的概念或者過程，下圖就是一個(gè)簡(jiǎn)單的Mindjet的輸出物例子。利用思維管理軟件，就能將Demo里要展示的產(chǎn)品主要功能抽絲剝繭列清楚層級(jí)關(guān)系，并且安排好主次關(guān)系。
Storyboard：故事板，也叫分鏡腳本，雖然更多用在電影、動(dòng)畫、電視劇、廣告等影像媒體的創(chuàng)作前期，下圖是一個(gè)簡(jiǎn)易故事板的例子。Demo和產(chǎn)品完整App的不同之處在于目的在于“展示”而非“使用”，所以可以借助storyboard的方法將產(chǎn)品核心使用場(chǎng)景下的主要功能用任務(wù)的形式在時(shí)間線上做一個(gè)規(guī)劃和梳理。在交互展示性的Demo中，storyboard的作用就更加強(qiáng)大了，通過對(duì)場(chǎng)景和情節(jié)的引入，往往會(huì)使整個(gè)產(chǎn)品或服務(wù)看起來更有說服力。
2.2 原型繪制
原型繪制算是基本功，根據(jù)不同的年代、不同的習(xí)慣和不同的機(jī)器，最典型的就要算是Visio、Framework、Adobe Illustrator、Axure和OmniGraffle最常為大家使用和熟知了。事實(shí)上本人和周圍更流行的工具是Axure(Win、Mac系統(tǒng))和OmniGraffle(Mac系統(tǒng))，豐富強(qiáng)大的基礎(chǔ)繪圖功能，豐富的控件模版庫(kù)，輸出物簡(jiǎn)潔美觀，都使得工作效率大大提高。下圖是OmniGraffle的軟件界面，有興趣的可以下載試用版哦，Axure，OmniGraffle。
2.3 界面元素
這里的界面元素指的是兩個(gè)方面，一個(gè)是要決定視覺風(fēng)格上的各種元素在Demo體現(xiàn)的程度，顏色、質(zhì)感、字體、圖片等等，就是我們常常說的視覺設(shè)計(jì)(Visual Design);另一個(gè)方面就是界面上內(nèi)容，比如一些用戶提供內(nèi)容的App，或者一些帶有SNS特征的App，可能每個(gè)用戶的界面呈現(xiàn)都會(huì)很不一樣，這個(gè)時(shí)候更加要關(guān)注在Demo中要呈現(xiàn)那些內(nèi)容和故事。
在Demo界面中呈現(xiàn)的內(nèi)容都應(yīng)該更加貼近于軟件或服務(wù)最終呈現(xiàn)的效果。善用產(chǎn)品的Persona，結(jié)合各個(gè)功能的主要使用場(chǎng)景，在這些抽象出的“目標(biāo)用戶”的角度上來想象和模擬這些可能會(huì)個(gè)性化的界面內(nèi)容(頭像、簽名、日志、聊天對(duì)話等等)。是不是很像導(dǎo)演呢，人物角色在場(chǎng)景中經(jīng)歷并演繹著使用產(chǎn)品或者服務(wù)的故事，企圖讓觀眾更加身臨其境或者感同身受!
最常使用視覺軟件就是Adobe家族的幾兄弟了，Photoshop(風(fēng)格材質(zhì)制作，圖層樣式等效果的合成等)、Illustrator(圖標(biāo)等矢量圖形繪制)、InDesign(頁(yè)面排版)基本能滿足絕大部分的需求。當(dāng)然也有大量針對(duì)不同的視覺設(shè)計(jì)細(xì)節(jié)流程比如圖標(biāo)設(shè)計(jì)、字體設(shè)計(jì)、取色配色、切圖、預(yù)覽、圖片格式轉(zhuǎn)換等等開發(fā)的各種軟件、網(wǎng)站和插件等工具。實(shí)際工作中需要各種軟件中切換、各種流程上的合作，又著實(shí)是另一門大學(xué)問了!
2.4 互動(dòng)與反饋
這基本上算是整個(gè)Demo制作的精髓部分了，有了這部分的工作，你的靜態(tài)頁(yè)面將有如注入生命一樣動(dòng)起來!本節(jié)將從準(zhǔn)備圖片素材、添加跳轉(zhuǎn)關(guān)系、更多的反饋三個(gè)方面來詳細(xì)說說會(huì)用到工具和技巧。
2.4.1 準(zhǔn)備圖片素材
在高保真原型制作中，使用的就是視覺設(shè)計(jì)后的界面圖片素材。所以要制作動(dòng)態(tài)的Demo的話，需要Demo中涉及到的所有功能的視覺元素的圖片：界面整體效果圖、各控件切圖、各層次的界面內(nèi)容的文本或圖片等等。這時(shí)候需要我們自己在psd的源文件里面切出所有的圖片素材，這個(gè)步驟就是炒菜中的切菜備料。這里介紹一個(gè)很好用便捷的免費(fèi)Photoshop切圖插件Cut&Slice me(目前僅支持CS6)，Photoshop CC也有類似的功能。
2.4.2 添加跳轉(zhuǎn)關(guān)系
根據(jù)展示的思路(Mindjet)或者腳本(Storyboard)的產(chǎn)出物，我們已經(jīng)清晰的知道Demo的展示邏輯和任務(wù)流程，即已經(jīng)定義好了用戶/觀眾的交互路徑，這時(shí)候只需要將頁(yè)面元素拼裝成Demo中會(huì)出現(xiàn)的頁(yè)面，在這些用來交互的控件上面添加跳轉(zhuǎn)關(guān)系就可以了。
身邊最為常用的添加互動(dòng)的軟件是Axure，添加完并導(dǎo)出之后生成一個(gè)裝著HTML文件的文件夾。Axure的好處就是內(nèi)置了非常豐富的網(wǎng)站交互模式和鼠標(biāo)事件?；旧暇W(wǎng)站上有的Click、Hover等操作都有，對(duì)應(yīng)頁(yè)面間的跳轉(zhuǎn)、打開新頁(yè)面等反饋也非常豐富。
2.5 移動(dòng)展示
Demo的最終目的是秀出來，不知道你是否發(fā)現(xiàn)傳統(tǒng)PC軟件(Axure和網(wǎng)頁(yè)三劍客Flash、Fireworks和Dreamware)制作的Demo在移動(dòng)設(shè)備上的展示總是很奇怪或者蹩腳。原因很好理解，這些軟件都是基于網(wǎng)頁(yè)產(chǎn)品的原型Demo工具，生成的可交互文件格式為HTML或者是swf，很顯然與App在手機(jī)上的運(yùn)行機(jī)制和所受限制完全不同。
所以，如何展示基本上取決于你用哪個(gè)軟件制作Demo，如果用Axure這類的軟件做出的HTML文件夾，請(qǐng)參考2.4.2中的Step 2部分;如果用的是Briefs制作的Demo，則可以直接使用配套的iPhone App Briefscase來打開和使用這個(gè)Demo;如果你用了flinto來制作Demo，則在網(wǎng)站上分享這個(gè)鏈接到郵箱，然后在郵箱中就可以“安裝”Demo到iPhone桌面上了;再則如果高端一點(diǎn)用的是Xcode做的Demo，連上手機(jī)或平板直接發(fā)布成一個(gè)測(cè)試App，就可以在各種iOS移動(dòng)設(shè)備上使用了。
產(chǎn)品經(jīng)理必知的微網(wǎng)站Demo可視化工具蒙特微網(wǎng)站建設(shè)分享的如何?如果您想了解更多微網(wǎng)站相關(guān)資訊，請(qǐng)繼續(xù)關(guān)注蒙特官網(wǎng)。蒙特微網(wǎng)站建設(shè)15年的經(jīng)驗(yàn)和技術(shù)，我們的努力您怎么能可以看不到呢?15158184365蒙特人等著您!
