中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

學習交互設(shè)計的童鞋，都躲不過畫原型圖這個必考科目。如何創(chuàng)建保真度（視覺、交互、內(nèi)容）都較高的 Demo 呢，今天騰訊設(shè)計師分享的好文，除了推薦很多簡單易上手的畫圖神器，更寶貴更值得細讀的是她的思路，完全體現(xiàn)了一個設(shè)計師該有的嚴謹與細致。童鞋們感受一 下。

正文：

一、什么是”更好”的Demo

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

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

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

1. 新產(chǎn)品 / 功能的演示－投資者、老板、合伙人
2. 用戶研究/市場調(diào)研－研究員、潛在目標用戶
3. 可用性測試－真實用戶
4. 交互 / 設(shè)計走查－設(shè)計師、產(chǎn)品經(jīng)理、專家

什么是”更好”的Demo：

• 核心功能完整，主要任務(wù)流足夠深度
• 交互保真程度高，操作的體驗感真實
• 根據(jù)場合與目的有適當?shù)囊曈X細節(jié)
• 避免制作過程”過于費工”或”效率底下”

二、工具與步驟

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

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

• 思路整理
• 原型繪制
• 界面元素
• 互動與反饋
• 移動展示

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

2.1 思路整理

在制作Demo時，我們并不是要做一個高大全全的東西出來，一個是沒必要，另一個理由是不劃算?；旧现灰獫M足在展示或者演示的過程中”不露破綻” 即可，所以最開始并不必急著去搭建產(chǎn)品的架構(gòu)或者界面，而是要圍繞著展示目標和形式，并且充分考慮到誰將來用這個Demo，來規(guī)劃整體的思路——Demo 的”劇本”。

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

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

2.2 原型繪制

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

2.3 界面元素

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

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

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

2.4 互動與反饋

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

2.4.1 準備圖片素材

在高保真原型制作中，使用的就是視覺設(shè)計后的界面圖片素材。所以要制作動態(tài)的Demo的話，需要Demo中涉及到的所有功能的視覺元素的圖片：界面 整體效果圖、各控件切圖、各層次的界面內(nèi)容的文本或圖片等等。這時候需要我們自己在psd的源文件里面切出所有的圖片素材，這個步驟就是炒菜中的切菜備 料。這里介紹一個很好用便捷的免費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)定義好了用戶/觀眾的交互路徑，這時候只需要將頁面元素拼裝成Demo中會出現(xiàn)的頁面，在這些用來交互的控件上面添加跳轉(zhuǎn)關(guān)系就可以了。

我周圍最為常用的添加互動的軟件是Axure，添加完并導(dǎo)出之后生成一個裝著HTML文件的文件夾。Axure的好處就是內(nèi)置了非常豐富的網(wǎng)站交互模式和鼠標事件?；旧暇W(wǎng)站上有的Click、Hover等操作都有，對應(yīng)頁面間的跳轉(zhuǎn)、打開新頁面等反饋也非常豐富。

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

Step1 發(fā)布設(shè)置

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

Step2 手機瀏覽

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

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

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

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

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

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

2.4.3 更細致的效果

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

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

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

好處是可以直接使用大量的iOS自帶的標準界面控件，支持觸摸手勢，并且在頁面切換時有和實際iPhone App中一樣的動態(tài)效果。缺點也很明顯，當跳轉(zhuǎn)關(guān)系非常復(fù)雜的時候，軟件的可用性就打折扣了，不得不眼花花地去找到某條連接（Segue）來調(diào)整手勢或者 是頁面轉(zhuǎn)場等動畫，就如下圖所示。還有個明顯不足，因為Xcode是為工程師和開發(fā)者設(shè)計的，所以整個界面非常復(fù)雜，信息量極大，不熟悉的話很容易抓狂。

Quartz Composer，簡單的說是一個強大的動畫合成軟件，是Apple的開發(fā)軟件包中自帶的軟件。Quartz Composer編輯好的內(nèi)容可以輸出到Interface Builder（就是現(xiàn)在Xcode的Storyboard）。優(yōu)勢在于它生成的動態(tài)效果靈活豐富，自由度相當高（它可以自定義曲線控制運動速度與軌 跡），另外它雖然是編程工具，但基本不用寫代碼就可以實現(xiàn)生成動態(tài)效果與交互所需要的邏輯。

2.5 移動展示

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

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

2.6 用手機做Demo

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

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

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

在手機上做Demo或多或少有些麻煩，畢竟受制于屏幕的尺寸和不太靈敏精準的觸摸操作。所以在更多情況下我們都是在電腦上完成整個制作，只在手機上進行展示或演示。不過誰知道呢，越來越離不開手機的人們，未來基本上可以在手機上干任何事情。

三、Summery：小結(jié)

• 對的場合使用對的工具/組合：明確最終產(chǎn)出物的目標和對象，打鳥避免用大炮，效率和效果的平衡掌握好；
• 多個工具的聯(lián)合使用：取長補短，不同環(huán)節(jié)使用不同工具的便捷和優(yōu)勢之處，提高效率和實現(xiàn)效果；
• 與上下游的人們合作：交互設(shè)計師與產(chǎn)品經(jīng)理，用戶研究員和視覺設(shè)計師的理性配合提升Demo的良性結(jié)果，誰也不想九牛二虎之力做個飛機稿；
• 會編程讓你錦上添花：更容易學會和使用Xcode和Quartz Composer等模擬出真實炫酷的效果，Demo呈現(xiàn)將更加生動；
• 如果你要做基于iOS設(shè)備的設(shè)計，請使用Mac電腦，理由你懂的；如果你知道如何制作優(yōu)雅體驗的基于Android系統(tǒng)的Demo設(shè)計，非常歡迎和大家一起分享；
• 雖然有點廢，還是要說句”熟能生巧”——Practice makes perfect！
• 工具只是作為設(shè)計師的基本技術(shù)技巧，為產(chǎn)品、服務(wù)和品牌服務(wù)，所以理解用戶所需把握行業(yè)趨勢遠比做技術(shù)控更有意義；

原文地址：騰訊ISUX

作者：Zoey