使用Axure打造最佳的移動端交互原型教程

直以來Axure在對移動端原型設(shè)計(jì)方面的支持都不是十分理想，它沒有像目前其它幾類原型設(shè)計(jì)工具(Justinmind、墨刀等)一樣提供移動端設(shè)備的模板和相關(guān)交互組件，但是Axure自由靈活的特性卻同樣的其它原型設(shè)計(jì)工具所無法取代的。通過掌握一些設(shè)計(jì)規(guī)范和方法，我們同樣可以通過Axure制作出非常完美的移動端演示原型。

首先你可以通過以下地址在電腦瀏覽訪問我設(shè)計(jì)完成的移動端原型模板。

1. 選擇適合的設(shè)計(jì)分辨率

在開始設(shè)計(jì)原型之前我們需要做的第一步是選擇合適的設(shè)計(jì)分辨率，目前使用Axure設(shè)計(jì)移動端原型時(shí)普遍采用的是(寬)375px*(高)667px和(寬)414px*(高)736px兩種分辨率尺寸，這兩種尺寸分別是由目前主流的移動設(shè)備Iphone7和Iphone7 PLUS的屏幕分辨率尺寸等比縮放而定義出來的，同時(shí)也是Iphone7和Iphone7 PLUS的邏輯分辨率。

有朋友可能會疑惑在設(shè)計(jì)原型的時(shí)候?yàn)槭裁床恢苯硬捎靡苿釉O(shè)備實(shí)際的分辨率呢？因?yàn)檫@主要考慮到設(shè)計(jì)時(shí)的便攜性，畢竟我們輸出的原型主要是用于演示而不是視覺稿，所以不需要達(dá)到那么高的精度，另外如果按移動設(shè)備實(shí)際的分辨率進(jìn)行設(shè)計(jì)，在對元件進(jìn)行編輯和排版的時(shí)候會是一件很耗費(fèi)時(shí)間的事情，同時(shí)也不方便在電腦瀏覽器上進(jìn)行查看。

本人在進(jìn)行原型設(shè)計(jì)的時(shí)候一般用的是375px*667px這個分辨率尺寸，因?yàn)锳xure常用的元件默認(rèn)的字號一般是14px或18px，這兩種字號也剛好匹配Iphone7上常用字號的比例，而且這個分辨率尺寸在電腦瀏覽器上剛好一屏就可以顯示完整。

但是如果你采用375px*667px這種分辨率輸出的原型在Iphone7 PLUS上進(jìn)行瀏覽時(shí)，兩邊會出現(xiàn)部分的空白區(qū)域，不過它也已經(jīng)基本適配各種主流移動端設(shè)備了，所以采用這個分辨率尺寸是綜合衡量之后的選擇。

2. 定義內(nèi)容區(qū)域

上面已經(jīng)介紹了為什么選擇375px*667px作為移動端原型設(shè)計(jì)分辨率尺寸，在開始設(shè)計(jì)之前我們需要先按照這個尺寸在編輯區(qū)域中定義好內(nèi)容區(qū)域。我一般是使用輔助線來定義內(nèi)容區(qū)域的，例如下圖是用輔助線定義好內(nèi)容區(qū)域的效果。

事實(shí)上我們在設(shè)計(jì)時(shí)其實(shí)不用去限制原型的高度，因?yàn)樵谕ㄟ^移動端設(shè)備進(jìn)行瀏覽時(shí)可以通過滾動頁面查看超出高度部分的內(nèi)容，這跟實(shí)際的移動端產(chǎn)品的操作方式是一致的。而在原型設(shè)計(jì)的時(shí)候，我們還是需要拖一條用于標(biāo)識原型設(shè)計(jì)高度的輔助線，它的主要作且是為了標(biāo)識出首屏的區(qū)域范圍，這對于布局選擇是有一定的參考價(jià)值的。

3. 神奇的輔助線

輔助線的作用除了用來定義內(nèi)容區(qū)域之外，同時(shí)它也能幫助我們快捷的進(jìn)行布局。輔助線有一個特性就是當(dāng)你拖動元件靠近它時(shí)，元件會自動吸附到輔助線的邊緣達(dá)到快速對齊的效果，對于有對齊強(qiáng)迫癥的朋友來說這個特性會感覺無比貼心。輔助線的基本使用方法：鼠標(biāo)移動到編輯區(qū)域的左側(cè)和頂部的標(biāo)尺區(qū)域長按并往編輯區(qū)域拖動時(shí)就可以生成橫向或縱向的輔助線，將輔助線拖動到對應(yīng)的位置即可。

一般除了用輔助線來定義內(nèi)容區(qū)域的之外，我還會新建兩條縱向的輔助線用于標(biāo)識界面左右兩側(cè)的留白區(qū)域。建議兩側(cè)留白區(qū)域用10px或者20px，例如本人常用的是20px，因此這兩條輔助線的位置分別在X軸的20px和355px的位置。除此之外，我們的元件一般還需要設(shè)置左右各20px的填充，用來將文字的顯示限定在界面留白區(qū)域內(nèi)。

補(bǔ)充幾點(diǎn)輔助線的使用小技巧：

右擊輔助線可以將其鎖定，以防止拖動元件時(shí)會將輔助線會跟著一起移動；
可以通過按住Ctrl拖動創(chuàng)建全局輔助線，全局輔助線就是在所有頁面中產(chǎn)生一條相同的輔助線；
在“布局—柵格和輔助線—鎖定輔助線”中選中可以將所有的輔助線保持鎖定狀態(tài)且無法刪除；
在“布局—柵格和輔助線—刪除輔助線”中可以清除所有頁面中的輔助線；
在“布局—柵格和輔助線—輔助線設(shè)置”中可以修改輔助線的顏色或進(jìn)行更多設(shè)置；

4. 更多基礎(chǔ)設(shè)計(jì)規(guī)范

通過以上幾點(diǎn)介紹了我們?nèi)绾问褂幂o助線來建立了一個基本的布局規(guī)范，而以下是我總結(jié)的其它關(guān)于移動端原型的基礎(chǔ)設(shè)計(jì)規(guī)范。通過掌握這些規(guī)范或技巧，可以使最終輸出的原型效果更美觀和標(biāo)準(zhǔn)，而且能讓你的設(shè)計(jì)效率大大的提升。

另外，這些規(guī)范或技巧同樣基本適用于WEB端的原型設(shè)計(jì)，不同的主要是設(shè)計(jì)分辨率和內(nèi)容區(qū)域的定義，以后有機(jī)會我會進(jìn)行整理和分享。

列表菜單的高度為45px、導(dǎo)航欄的高度為45px、標(biāo)簽欄和工具欄常用高度為60px；
字號一般用偶數(shù)，常用的正文字號為12和14px，常用的標(biāo)題字號為16px和18px；
元件的寬度和高度一般為5的倍數(shù)，例如45px、100px等；
元件的距間和行距一般為10的倍數(shù)，常用10px、20px，按住ctrl鍵通過方向鍵移動元件，每次移動的距離剛好是10px。

5. 頁面屬性的設(shè)置

為了方便進(jìn)行設(shè)計(jì)我習(xí)慣將內(nèi)容布局向左對齊，而在演示時(shí)內(nèi)容居中顯示更符合瀏覽習(xí)慣，所以需要在頁面屬性設(shè)置中將頁面排列設(shè)置為水平居中,另外，頁面的背景色推薦設(shè)置為#F9F9F9。

6. 導(dǎo)航欄的設(shè)置

導(dǎo)航欄是移動端APP中最常見的元件之一，它的位置一般是固定在界面最頂部的，所以建議將導(dǎo)航欄轉(zhuǎn)換為動態(tài)面板，然后在面板的屬性設(shè)置中設(shè)置為“固定到瀏覽器”，水平固定選項(xiàng)為“居中”，垂直固定選項(xiàng)為“上”，具體設(shè)置如下圖：

7. 標(biāo)簽欄或工具欄的設(shè)置

標(biāo)簽欄或工具欄的位置一般是固定在界面最底部的，同樣我們也需要將標(biāo)簽欄或工具欄轉(zhuǎn)換為動態(tài)面板，然后在面板的屬性設(shè)置中設(shè)置為“固定到瀏覽器”，水平固定選項(xiàng)為“居中”，垂直固定選項(xiàng)為“下”。

通過這樣的設(shè)置以后在有標(biāo)簽欄或工具欄的頁面中，如果你的頁面內(nèi)容已經(jīng)超出了一屏的高度，我們通常需要在內(nèi)容正文區(qū)域的底部放置一個與標(biāo)簽欄或工具欄高度一致的熱區(qū)元件當(dāng)作占位符，它的作用是用來解決原型演示時(shí)標(biāo)簽欄或工具欄會擋住頁面內(nèi)容的情況。

8. 模態(tài)窗口交互設(shè)置

模態(tài)窗口交互是移動端產(chǎn)品中最常見的交互方式之一，它主要用作顯示系統(tǒng)的重要信息，并請求用戶進(jìn)行操作反饋，例如：刪除某個重要內(nèi)容時(shí)，彈出對話框進(jìn)行二次確認(rèn)。在原型中我們可以通過簡單的設(shè)置，實(shí)現(xiàn)跟移動端APP一致的模態(tài)窗口效果。

移動端模態(tài)窗口演示效果：

首先同樣需要新建一個模態(tài)窗口的動態(tài)面板，在面板的屬性設(shè)置中設(shè)置為“固定到瀏覽器”，水平固定選項(xiàng)為“居中”，垂直固定選項(xiàng)為“下”。然后再在觸發(fā)模態(tài)窗口的交互事件中按以下方式進(jìn)行設(shè)置，重點(diǎn)是勾選“置于頂層”選項(xiàng)和設(shè)置“燈箱效果”，燈箱效果的背景顏色和透明度可以根據(jù)需要進(jìn)行自定義。關(guān)于具體的設(shè)置和演示效果，可以參照我將在后面推薦的移動端元件庫。

9. 輸出選項(xiàng)的設(shè)置

到此為止已經(jīng)介紹了關(guān)于移動端原型設(shè)計(jì)的一些規(guī)范和常用元件及交互效果的設(shè)置，那么當(dāng)我們的原型設(shè)計(jì)完成以后在生成HTML之前我們還需要進(jìn)行幾項(xiàng)簡單的設(shè)置。

設(shè)置位置：發(fā)布—生成HTML-移動設(shè)備，在界面中勾選“包含視口標(biāo)簽”，設(shè)置寬度為：device-width，設(shè)置縮放為：no，其它選項(xiàng)為空就可以了。

另外，你還可以設(shè)置主屏圖標(biāo)，然后在IOS設(shè)備中通過safari瀏覽器打開原型，就可以直接將它添加到主屏幕中了。通過主屏訪問原型時(shí)將不會顯示瀏覽器的相關(guān)工具界面，最終的演示效果幾乎是跟操作實(shí)際的APP是一致的，你甚至可以根據(jù)需要定義狀態(tài)欄的顏色。

設(shè)置方式：啟動safari瀏覽器打開原型地址—點(diǎn)擊瀏覽器底部的設(shè)置圖標(biāo)(正中間)—添加到主屏幕——完成添加即可。大家可以嘗試使用下方演示地址進(jìn)行添加看看效果。

添加到主屏和最終運(yùn)行時(shí)的效果：

按照上述的設(shè)置之后，你將原型生成為HTML文件之后上傳到你的服務(wù)器或原型托管平臺，通過手機(jī)訪問原型鏈接演示即可。

10. 其它的補(bǔ)充說明

如果我們設(shè)計(jì)的移動端原型不需要考慮在手機(jī)上演示的場景，仍然可以參照本文中相關(guān)的規(guī)范。我一般會在編輯區(qū)域放置一個設(shè)備模板，新建一個內(nèi)容框架的動態(tài)面板用來放置頁面的主要內(nèi)容，而這個內(nèi)容框架的尺寸同樣是我們之前定義的內(nèi)容區(qū)域尺寸(寬)375px*(高)667px。另外，內(nèi)容框架的動態(tài)面板的屬性中需要將滾動條設(shè)置為“自動顯示垂直滾動條”，這樣當(dāng)框架的內(nèi)容超出時(shí)可以拖動滾動條進(jìn)行查看。

通過添加設(shè)備模板的設(shè)計(jì)區(qū)域效果

通過使用設(shè)備模板可以讓輸出的原型效果更標(biāo)準(zhǔn)和規(guī)范，如果我們在編輯界面中放置了設(shè)備模板，則不再需要對導(dǎo)航欄、標(biāo)簽欄或工具欄、模態(tài)窗口等動態(tài)面板進(jìn)行固定到瀏覽器設(shè)置，你只需要拖動到設(shè)備模板對應(yīng)的位置并置于內(nèi)容框架上方即可。

如果你需要獲取相關(guān)設(shè)備模板的圖片，請通過下面的下載地址獲取到。這套素材中包含了iphone、Android、IPAD等各種機(jī)型常用模板，而且都已經(jīng)按標(biāo)準(zhǔn)尺寸定義好，只需要直接下載使用即可。使用方法：在創(chuàng)建Axure原型文件時(shí)建立一個模板母版，然后將設(shè)備圖片導(dǎo)入到母版中，再將母版拖至設(shè)計(jì)界面區(qū)域。

常用移動端設(shè)備模板素材

11. 移動端元件庫分享

最后分享的是AxureUX交互原型移動端元件庫精簡版，這套元件庫基本是按照本文所介紹的相關(guān)規(guī)范和標(biāo)準(zhǔn)進(jìn)行制作的，共由常用組件、信息輸入、信息輸出、信息反饋、綜合系列等五大元件類型組成，其中還包含各類移動端基本元素、動態(tài)交互組件，以及各類常用界面模板，能助您快速的輸出友好美觀的移動端交互原型。

相關(guān)截圖：

本文由 @windir 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

起點(diǎn)學(xué)院】產(chǎn)品經(jīng)理實(shí)戰(zhàn)訓(xùn)練營，北京、上海、廣州、深圳、成都、杭州同時(shí)開課啦！

推薦語：@Akane_Lee ：這篇是最簡單的過場設(shè)定、最偷吃步驟、不需要技術(shù)，只要會寫簡報(bào) PTT 或是 Keynote 就做的出來，所以連 Planner 和 PM 也保證上手無問題 >>>

動態(tài)效果、轉(zhuǎn)場動畫對UI的戲份越來越重…其實(shí)一直都很重只是大多用在游戲上，功能型 App 運(yùn)用這種技巧最近越吃越兇，且制作真正能裝在手機(jī)、拿在手上操作的擬真 Prototype 對不會寫 Code 的設(shè)計(jì)師來說有難度。我找到好用的方式可以解決這個問題：Hype3＋Frameless。

會選 Hype3 的原因在《Note：Prototype 制作軟件》有提過，就不多說，直接從范例開始吧。

（好像得搭梯子才可以訪問，木有梯子同學(xué)可參見：《Sketch神助攻！無代碼做動效神器Hype3入門教程》）

Hype3

場景設(shè)定

示范： iPhone 內(nèi)建的音樂 App

1.打開 Hype3 ，官網(wǎng)下載的試用版可以用很久，還有簡中接口，先抓下來玩看看，喜歡再買。（這套定價(jià)也很便宜！）

2. 既然是 iPhone 的 Prototype，來改一下場景尺寸。我用的是 640x1136px，畫質(zhì)比較細(xì)。

3. 因?yàn)楫嬅媸情L型的，所以我把時(shí)間軸和圖層從下方挪到右邊去。

匯入圖檔

4. 手機(jī)截圖，直接扔進(jìn) Hype3 里。

（表示做自己的東西實(shí)可以直接拿 Mockup 的 jpg 或 png 圖直接上！）

設(shè)定動作范圍

5. 來做「動作觸發(fā)的范圍」，在圖上先拉個矩形。

6. 右邊選單設(shè)定無填色、無筆劃。

7. 下方 Tab Bar 第 2 顆的位置就有一塊透明的區(qū)域，也就是「動作觸發(fā)的范圍」。

8. 設(shè)定動作，雖然手機(jī)上不會有光標(biāo)，但我還是喜歡把可觸發(fā)的區(qū)域光標(biāo)換成手指，在 Browser 預(yù)覽時(shí)可以快速確認(rèn)自己Link設(shè)對了沒有。

9. 記得，所有場景、圖層什么的，要重新命名成有意義的名字，當(dāng)頁數(shù)和組件一多時(shí)才不容易出錯。

10. 像 Keynote 一樣，可以一次做了好幾個組件，選起來好拷貝到其他場景貼上。

（圖層前后會影響操作和組件顯示，如果有時(shí)候發(fā)現(xiàn)某個地方怎么點(diǎn)都沒效果、或是看不到，檢查下圖層順序。）

過場方式

11. 點(diǎn)著個 BTN、播放中的頁面是由右往左推進(jìn)。

12. 所以記得把過場動效改成「推動」（由右往左）。

13. 秒數(shù)我習(xí)慣設(shè) 0.3s，依個人感覺不同，請自己試看看。

14. 這個 Btn 點(diǎn)下去、會由下往上出現(xiàn)歌曲列表頁。記得設(shè)定「推動」（由下往上）。

15. 點(diǎn)了「完成」后，頁面會由上往下。

（當(dāng)很多頁面都有一樣的回前頁、Tab 的Link要處理時(shí)，可以先做完一頁，剩下 Copy、Past 就好。）

匯出 HTML 檔

選 HTML5、活頁夾，檔名命名好。

會出現(xiàn)一個 HTML 檔和一個文件夾。把這兩個檔傳到服務(wù)器上，就可以用手機(jī)開網(wǎng)址測試了。

如果想預(yù)覽自己做的如何，工具欄上有個 Chrome 或 Safari 的 icon，按下去就是了。不過它不是實(shí)時(shí)的，每次修改存盤就要再點(diǎn)一次這 icon 重新產(chǎn)生預(yù)覽，直接點(diǎn) Browser 重新整理看到的會是修改前的樣子。

原型專用瀏覽器 —— Frameless

這是個連「狀態(tài)欄」都沒有，真正全屏幕的瀏覽器。免費(fèi)！

輸入你的Prototype網(wǎng)址，就可以像真的 App 一樣，用手機(jī)做測試了。

祝順利！

作者： @Akane_Lee

來源：優(yōu)設(shè)網(wǎng)

原文地址：blog.akanelee.me

型工具是十分實(shí)用的工具，它可以幫助你完成從粗略的設(shè)計(jì)概念到產(chǎn)品完全形成的全過程，除了應(yīng)用簡單，成本也比較低廉。

下面我們就為大家介紹幾款用于桌面或移動設(shè)備構(gòu)建網(wǎng)站和應(yīng)用的原型開發(fā)工具。這其中有些工具具有很贊的用戶體驗(yàn)，包含了設(shè)計(jì)元素的動畫、手勢、轉(zhuǎn)換和自定義內(nèi)容，也有快速原型和模型工具提供各種模板，輕松地將應(yīng)用程序從理念實(shí)現(xiàn)到工作模式。最重要的是，大多數(shù)的工具中都有免費(fèi)的基礎(chǔ)版本可供用戶使用。

Adobe Experience Design CC

作為Adobe Creative Cloud套件的一部分，Adobe Experience Design是一個用于創(chuàng)建、共享網(wǎng)站和移動應(yīng)用設(shè)計(jì)的一體化工具。繪制，重用和重新混合元素以創(chuàng)建線框、視覺設(shè)計(jì)和原型；添加交互無需離開體驗(yàn)設(shè)計(jì)，并在桌面和移動設(shè)備上實(shí)時(shí)預(yù)覽；與團(tuán)隊(duì)成員分享互動原型，以獲得即時(shí)反饋和協(xié)作。

價(jià)格：對于單個應(yīng)用程序Adobe Create Cloud每月19.99美元，完整版本的費(fèi)用是每月49.99美元。

Webflow

Webflow是一個在線原型設(shè)計(jì)工具，無需編寫代碼即可設(shè)計(jì)應(yīng)用程序。用戶可以從頭開始設(shè)計(jì)，也可以從一百多個網(wǎng)頁和應(yīng)用模板中選擇應(yīng)用。Webflow包含一系列用于用戶體驗(yàn)設(shè)計(jì)的觸發(fā)器、效果和動畫，為了幫助用戶快速完成設(shè)計(jì)還包含了許多預(yù)構(gòu)建組件。使用Webflow不僅可以構(gòu)建店鋪，還可以利用第三方電子商務(wù)平臺處理購物車和付款。另外，Webflow與Zapier集成，可以將網(wǎng)站連接到500多個應(yīng)用程序，如Slack Drive和Trello，MailChimp還可以自動化構(gòu)建列表。

價(jià)格：兩個unhosted項(xiàng)目是免費(fèi)的，付費(fèi)服務(wù)大約是每月35美元。

InVision

InVision是一個在線原型、協(xié)作和工作流平臺。支持設(shè)計(jì)文件上傳，并通過添加動畫、手勢和轉(zhuǎn)換，將靜態(tài)屏幕轉(zhuǎn)換為可點(diǎn)擊的交互式原型。如果確切來說，InVision提供的不是準(zhǔn)確的線框圖，而是一個快速原型的環(huán)境，可以把你的UX/UI草圖快速連接起來。數(shù)字型的線框圖和高保真的設(shè)計(jì)可以幫你測試app的工作情況，同時(shí)該工具還支持協(xié)作和分享功能，生成的在線原型可以支持任何人在產(chǎn)品原型的任何地方評論，便于準(zhǔn)確的交流。

價(jià)格：只創(chuàng)建一個項(xiàng)目，InVision是免費(fèi)的，升級為高級用戶之后，每月15美元。

HotGloo

HotGloo是一款為傳統(tǒng)軟件以及富互聯(lián)網(wǎng)應(yīng)用軟件制作產(chǎn)品原型的在線工具，主要用于為Web，移動和可穿戴設(shè)備構(gòu)建線框。HotGloo可以隨時(shí)隨地在任何移動設(shè)備上編輯、審查和測試，甚至可以在其間添加筆記和注釋。為了便于構(gòu)建和測試交互，HotGloo中有超過2000個元素、圖標(biāo)和用戶界面小部件。另外，HotGloo在設(shè)計(jì)之初充分考慮了學(xué)習(xí)曲線的問題，不僅有一大批教程和入門文檔，甚至還配有可靠的支持團(tuán)隊(duì)。

價(jià)格：HotGloo的價(jià)格是分梯度的，2個活動項(xiàng)目為每月13美元，6個活動項(xiàng)目為每月27美元，15個活動項(xiàng)目為每月54美元。

Marvel

Marvel是一個app原型圖在線制作工具，大家不僅可以借此設(shè)計(jì)用戶界面與圖標(biāo)，同時(shí)也能夠?qū)碜员镜亍ropbox以及Google Drive的屏幕設(shè)計(jì)添加為“熱點(diǎn)”。只需數(shù)次點(diǎn)擊，大家就能將各屏幕聯(lián)系起來以構(gòu)成交互式移動及Web應(yīng)用。除此之外，用戶還可以添加轉(zhuǎn)場效果、添加手勢（如滑動或收縮），甚至也可以添加指向其它內(nèi)容的鏈接，如視頻、音頻等等。

價(jià)格：基礎(chǔ)版是免費(fèi)的，付費(fèi)服務(wù)是每月12美元起。

JustInMind

JustInMind是一個移動和網(wǎng)絡(luò)應(yīng)用程序原型工具，可應(yīng)用在Windows和Mac OS中。JustInMind中大約有500個小部件可為任何應(yīng)用程序創(chuàng)建交互式線框；可定義豐富的互動和條件導(dǎo)航體驗(yàn)；在線發(fā)布和分享整個線框，并獲得用戶和客戶的即時(shí)反饋和評論。

價(jià)格：每人每月19美元。

Axure

Axure RP是一個專業(yè)的快速原型設(shè)計(jì)工具，能夠高效率制作產(chǎn)品原型，快速繪制線框圖、流程圖、網(wǎng)站架構(gòu)圖、示意圖、HTML模版等。支持從內(nèi)置或自定義庫中拖放元素以創(chuàng)建圖表；支持交互樣式設(shè)置，如字體、線型、填充顏色、陰影等等；注釋圖表和原型,以便指定功能,跟蹤任務(wù),或存儲項(xiàng)目信息；支持圖表和原型發(fā)布到Axure分享的云或內(nèi)部部署。

價(jià)格：每人每月29美元。

PowerMockup

PowerMockup可以直接把PPT文件變成線框圖工具，兼容所有的Microsoft office工具，能作為PPT的軟件加載項(xiàng)隨著ppt啟動而加載。Powermockup提供較多豐富的組件，通過這些組件能夠較快速度的搭建產(chǎn)品原型圖。

價(jià)格：59.99美元。

Concept.ly

Concept.ly是一個用于創(chuàng)建交互式應(yīng)用程序的協(xié)作和原型平臺。支持從靜態(tài)圖片快速制作成為移動和網(wǎng)絡(luò)的可點(diǎn)擊原型；上傳設(shè)計(jì)文件并將它們集成在一起創(chuàng)建工作應(yīng)用程序的Web和移動端；支持單擊共享，實(shí)時(shí)協(xié)作，能夠標(biāo)記特定區(qū)域并提供四種類型的反饋；即時(shí)通知，讓您了解每個項(xiàng)目的協(xié)作以及各種編輯活動；持續(xù)跟蹤設(shè)計(jì)的各個版本，除了可以查看設(shè)計(jì)是如何演變的，還可以恢復(fù)到以前的版本。

價(jià)格：基礎(chǔ)版是免費(fèi)的，付費(fèi)服務(wù)為每月9.99美元。

Balsamiq

Balsamiq Mockups是一種軟件工程中快速原型的建立軟件，它的界面再現(xiàn)了在白板上草繪的快速、創(chuàng)造性的流程體驗(yàn)。Balsamiq Mockups用戶測試早，在編寫代碼之前，就可以打印出你的原型或運(yùn)行在線用戶測試。Balsamiq不僅有web app和桌面版本，也可以作為wiki和bug tracker中的插件。

價(jià)格：89美元。

在線咨詢

上一篇：HTML網(wǎng)絡(luò)編程之時(shí)間格式
下一篇：Youku HTML5 播放器擴(kuò)展 Youku-HTML5-Player

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商