久久亚洲精品国产精品,激情久久无码天堂,中国无码人妻丰满熟妇啪啪软件

搜索

APP

起點課堂會員權益

職業體系課特權

線下行業大會特權

個人IP打造特權

30+門專項技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導直播

12場專業技能直播

會員專屬社群

榮耀標識

發布

注冊 | 登錄

產品經理必知:創建更好的移動Demo:工具篇

大城小蛙

2014-05-07

4 評論 36344 瀏覽 159 收藏

23 分鐘

　　一、什么是“更好”的Demo

　　什么是Demo?Demo是Demonstration的縮寫，表示“示范”、“展示”，常指具有示范或展示功能及意味的事物。本文中Demo的含義更接近與維基百科中的這個解釋：一種原型，主要用來展示想法、表現、方法或者是產品特點的簡易樣例或未完成的產品版本。它常常用來對投資者、合伙人、記者甚至于潛在的用戶展示其選擇方法的可行性。

　　在視覺、交互和內容的保真程度上有著高保真和低保真的區分，所以本文的Demo就是指在這三個緯度(視覺、交互、內容)保真程度都較高的原型。

　　Demo往往用在以下幾個場合和對象：

　　新產品 / 功能的演示-投資者、老板、合伙人

　　用戶研究/市場調研-研究員、潛在目標用戶

　　可用性測試-真實用戶

　　交互 / 設計走查-設計師、產品經理、專家

　　什么是“更好”的Demo：

　　核心功能完整，主要任務流足夠深度

　　交互保真程度高，操作的體驗感真實

　　根據場合與目的有適當的視覺細節

　　避免制作過程“過于費工”或“效率底下”

　　二、工具與步驟

　　設計師們特別是交互設計師往往需要承擔制作Demo的工作，而這個過程從上涉及到產品想法和主要功能、信息架構和界面的組織，甚至向下涉及到視覺風格和互動反饋等各個環節;打交道的人可能包括了產品經理(提供原始的產品概念，用戶需求分析或者是功能完整的產品文檔)，視覺設計師(提供UI風格和設計稿)，用戶研究員(提出測試用例或者研究需求)。

　　所以，完成整個過程的步驟比單純地制作線框圖或者紙原型要復雜很多，涉及到工具也非常豐富。工具的意義正是幫助我們在工作中提高效率，提升表現效果，市面上一些較典型的工具根據其擅長的環節，可以做如下簡單的分類和介紹：

　　思路整理

　　原型繪制

　　界面元素

　　互動與反饋

　　移動展示

　　其中前三部分是廣大設計師熟知并且常用的一些工具，而隨著移動互聯網的大潮，越來越多的工作需要我們展示移動設備上的產品和功能。于是，本文更多筆墨將針對移動Demo的制作和展示上的有用工具。這里的工具包括了軟件工具、移動App、工作方法和一些概念。

　　2.1 思路整理

　　在制作Demo時，我們并不是要做一個高大全全的東西出來，一個是沒必要，另一個理由是不劃算。基本上只要滿足在展示或者演示的過程中“不露破綻”即可，所以最開始并不必急著去搭建產品的架構或者界面，而是要圍繞著展示目標和形式，并且充分考慮到誰將來用這個Demo，來規劃整體的思路——Demo的“劇本”。

　　思維管理軟件：MindManager、Mindjet。也叫思維導圖或者心智圖，既可以用在放射性思考的展開過程，也可以用在整理各級主題的相互關系，最快可以整理并可視化出一個抽象的概念或者過程，下圖就是一個簡單的Mindjet的輸出物例子。利用思維管理軟件，就能將Demo里要展示的產品主要功能抽絲剝繭列清楚層級關系，并且安排好主次關系。

　　Storyboard：故事板，也叫分鏡腳本，雖然更多用在電影、動畫、電視劇、廣告等影像媒體的創作前期，下圖是一個簡易故事板的例子。Demo和產品完整App的不同之處在于目的在于“展示”而非“使用”，所以可以借助storyboard的方法將產品核心使用場景下的主要功能用任務的形式在時間線上做一個規劃和梳理。在交互展示性的Demo中，storyboard的作用就更加強大了，通過對場景和情節的引入，往往會使整個產品或服務看起來更有說服力。

　　2.2 原型繪制

　　原型繪制算是基本功，根據不同的年代、不同的習慣和不同的機器，最典型的就要算是Visio、Framework、Adobe Illustrator、Axure和OmniGraffle最常為大家使用和熟知了。事實上本人和周圍更流行的工具是Axure(Win、Mac系統)和OmniGraffle(Mac系統)，豐富強大的基礎繪圖功能，豐富的控件模版庫，輸出物簡潔美觀，都使得工作效率大大提高。下圖是OmniGraffle的軟件界面，有興趣的可以下載試用版哦，Axure，OmniGraffle。

　　2.3 界面元素

　　這里的界面元素指的是兩個方面，一個是要決定視覺風格上的各種元素在Demo體現的程度，顏色、質感、字體、圖片等等，就是我們常常說的視覺設計(Visual Design);另一個方面就是界面上內容，比如一些用戶提供內容的App，或者一些帶有SNS特征的App，可能每個用戶的界面呈現都會很不一樣，這個時候更加要關注在Demo中要呈現那些內容和故事。

　　我認為，在Demo界面中呈現的內容都應該更加貼近于軟件或服務最終呈現的效果。善用產品的Persona，結合各個功能的主要使用場景，在這些抽象出的“目標用戶”的角度上來想象和模擬這些可能會個性化的界面內容(頭像、簽名、日志、聊天對話等等)。是不是很像導演呢，人物角色在場景中經歷并演繹著使用產品或者服務的故事，企圖讓觀眾更加身臨其境或者感同身受!

　　最常使用視覺軟件就是Adobe家族的幾兄弟了，Photoshop(風格材質制作，圖層樣式等效果的合成等)、Illustrator(圖標等矢量圖形繪制)、InDesign(頁面排版)基本能滿足絕大部分的需求。當然也有大量針對不同的視覺設計細節流程比如圖標設計、字體設計、取色配色、切圖、預覽、圖片格式轉換等等開發的各種軟件、網站和插件等工具。實際工作中需要各種軟件中切換、各種流程上的合作，又著實是另一門大學問了!

　　2.4 互動與反饋

　　這基本上算是整個Demo制作的精髓部分了，有了這部分的工作，你的靜態頁面將有如注入生命一樣動起來!本節將從準備圖片素材、添加跳轉關系、更多的反饋三個方面來詳細說說會用到工具和技巧。

　　2.4.1 準備圖片素材

　　在高保真原型制作中，使用的就是視覺設計后的界面圖片素材。所以要制作動態的Demo的話，需要Demo中涉及到的所有功能的視覺元素的圖片：界面整體效果圖、各控件切圖、各層次的界面內容的文本或圖片等等。這時候需要我們自己在psd的源文件里面切出所有的圖片素材，這個步驟就是炒菜中的切菜備料。這里介紹一個很好用便捷的免費Photoshop切圖插件Cut&Slice me(目前僅支持CS6)，Photoshop CC也有類似的功能。

　　2.4.2 添加跳轉關系

　　根據展示的思路(Mindjet)或者腳本(Storyboard)的產出物，我們已經清晰的知道Demo的展示邏輯和任務流程，即已經定義好了用戶/觀眾的交互路徑，這時候只需要將頁面元素拼裝成Demo中會出現的頁面，在這些用來交互的控件上面添加跳轉關系就可以了。

　　我周圍最為常用的添加互動的軟件是Axure，添加完并導出之后生成一個裝著HTML文件的文件夾。Axure的好處就是內置了非常豐富的網站交互模式和鼠標事件。基本上網站上有的Click、Hover等操作都有，對應頁面間的跳轉、打開新頁面等反饋也非常豐富。

　　這時我們不難發現，這些操作和互動都是針對網站或者網頁產品的，Demo展示的時候也需要網頁瀏覽器來解析播放。如果要在手機上看，事情就會變得有點復雜。以下一個迂回的解決方案：

　　Step1 發布設置

　　點擊Publish>Generate HTML，在Mobile / Device的面板中可以安需要設置設備和Icon等內容。

　　Step2 手機瀏覽

　　方法A：將整個文件夾傳到一個網絡地址上，類似發布一個網站，使其中的每個HTML有自己的訪問網址。在手機的瀏覽器上訪問這個網址，就可以看到了，具體操作看這里。但事實上如何將一個文件夾發布到網絡上，就已經是一件很多設計師覺得比較麻煩并糾結的事情，因為你需要網絡空間或者一個服務器之類的東西。

　　這個時候，需要以下方法B：下載一個網盤App(如AirDisk Pro)，iPhone鏈接電腦在iTunes的“應用程序”下面找到這個App并添加這個壓縮包，然后在手機的App里面解壓這個文件夾，瀏覽就可以了;同樣也可以利用一個內置瀏覽器的閱讀類App 和一個解壓App來達成，具體操作看這里)。

　　綜上所述，這個辦法可行卻麻煩，且由于不支持各種觸摸手勢的互動只滿足基本的頁面跳轉，故互動體驗和保真程度都不好。

　　這里推薦一個簡單的軟件Briefs(Mac系統)，和它的iPhone App，Briefscase。即在Mac制作好Demo，然后用App打開這個Demo。它的好處在于首先專門為移動應用(基于iOS設備)的原型制作而打造，內置各種屏幕尺寸的iOS設備模型。其次，也是最重要的一點，Briefs支持觸摸為主的手勢操作。它支持界面間的基本動態切換效果，這樣Demo中頁面的呆板跳轉就變為了iOS一直倡導的優雅轉場，更好的在空間層面上表達頁面間的層級關系和視覺引導。最后，當你連上手機時，就可以實時修改和預覽你的Demo，就像在Xcode上編程一樣避免了來回的上傳下載安裝，沒有什么比這點更能高效地幫助你工作了。

　　還有網站強烈推薦給大家，flinto ，是一個專門為iOS原型設計的工具，鏈接添加非常高效，也支持iPhone中頁面切換的各種轉場效果;更方便的一點是在分享環節中，會自動生成一個網頁地址，用手機和電腦都可以訪問到這個Demo了。最妙的是當你將這個鏈接直接發送到郵箱里，在iPhone上打開郵件點擊鏈接，在瀏覽器中點擊“分享”按鈕，就可以將這個Demo直接添加到手機桌面上了哦，就像一個真的App!

　　類似的工具還有proto.io(類似flinto，基于網站的應用)，Prototypr(類似Briefs，有Mac客戶端和iPhone App，)等等，有興趣的都可以下載來玩玩，這些都是收費的軟件或者服務，幾十到幾百人民幣，不算貴咯!

　　2.4.3 更細致的效果

　　其實做到上面2.4.2的部分，你的Demo已經相對完整并可供把玩了，但是總有些人是完美主義者，還想再進一步怎么辦?這時你也許就需要更多的一些時間精力和愛來學新的東西——Xcode的Storyboard，Quartz Composer，Flash或是After Effects等，當然這需要你具備對細節極致追求的心態、懂一些基礎英文、數學和編程技巧。

　　有哪些更細致的效果呢：支持除點擊之外的手勢操作(長按、輕撫、多指操作等);界面切換時有更逼真的動態效果和視覺引導;支持聲音、視頻等多媒體的播放。

　　Xcode的Storyboard，前身是Xcode里面的Interface Builder，在Xcode里面的一個便捷圖形化的工具。在開發環境中，沒有任何限制，設計師可以嵌入各種各樣有趣的交互，動態效果和聲音去創造一個真實的iOS App的體驗。這里有同學翻譯了一篇很實用并且詳盡的教程，我也試著有跟著邊學邊做了一個小Demo。

　　好處是可以直接使用大量的iOS自帶的標準界面控件，支持觸摸手勢，并且在頁面切換時有和實際iPhone App中一樣的動態效果。缺點也很明顯，當跳轉關系非常復雜的時候，軟件的可用性就打折扣了，不得不眼花花地去找到某條連接(Segue)來調整手勢或者是頁面轉場等動畫，就如下圖所示。還有個明顯不足，因為Xcode是為工程師和開發者設計的，所以整個界面非常復雜，信息量極大，不熟悉的話很容易抓狂。過程中也常遇到一些問題，就像那篇教程的作者說的一樣，這時候我們需要身邊的iOS工程師的幫忙咯!這里是另一個詳盡的入門教程。

　　Quartz Composer，簡單的說是一個強大的動畫合成軟件，是Apple的開發軟件包中自帶的軟件。Quartz Composer編輯好的內容可以輸出到Interface Builder(就是現在Xcode的Storyboard)。優勢在于它生成的動態效果靈活豐富，自由度相當高(它可以自定義曲線控制運動速度與軌跡)，另外它雖然是編程工具，但基本不用寫代碼就可以實現生成動態效果與交互所需要的邏輯。這里有關于Quaitz Composer在知乎上的各種教程和應用經驗，有興趣的可以一起來學習討論。

　　2.5 移動展示

　　Demo的最終目的是秀出來，不知道你是否發現傳統PC軟件(Axure和網頁三劍客Flash、Fireworks和Dreamware)制作的Demo在移動設備上的展示總是很奇怪或者蹩腳。原因很好理解，這些軟件都是基于網頁產品的原型Demo工具，生成的可交互文件格式為HTML或者是swf，很顯然與App在手機上的運行機制和所受限制完全不同。

　　所以，如何展示基本上取決于你用哪個軟件制作Demo，如果用Axure這類的軟件做出的HTML文件夾，請參考2.4.2中的Step 2部分;如果用的是Briefs制作的Demo，則可以直接使用配套的iPhone App Briefscase來打開和使用這個Demo;如果你用了flinto來制作Demo，則在網站上分享這個鏈接到郵箱，然后在郵箱中就可以“安裝”Demo到iPhone桌面上了;再則如果高端一點用的是Xcode做的Demo，連上手機或平板直接發布成一個測試App，就可以在各種iOS移動設備上使用了。

　　2.6 用手機做Demo

　　雖然用手機進行繪圖和添加跳轉關系聽起來就是不方便的一件事情，但是它的好處就是不受時間地點限制，在移動場景下方便設計師或產品經理快速構建產品概念。POP曾經紅極一時，之后的各種手機制作原型的工具也如雨后春筍般蓬勃而出，現在市面上的App主要有：POP、app.eal、Mockup.io、FileSq、IdeaShow等等。

　　最簡單粗暴易上手的就屬POP了，全名Prototyping on paper，顧名思義就是做紙原型。分三個步驟，第一步在紙上畫出線框圖，第二步拍下這些圖，第三步就是添加跳轉鏈接，就是這么簡單!

　　app.eal(中文名：愛備)是一個有意思的應用，也是手機做Demo來說功能非常強大的一款，也是為數不多有中文版本的一個App。比起POP來說，支持轉場效果、支持導航欄與標簽欄等都是我們喜聞樂見的功能。如下圖所示，支持設置眾多的交互細節能夠幫助制作出更逼真的Demo。