整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
直以來Axure在對移動端原型設計方面的支持都不是十分理想，它沒有像目前其它幾類原型設計工具(Justinmind、墨刀等)一樣提供移動端設備的模板和相關交互組件，但是Axure自由靈活的特性卻同樣的其它原型設計工具所無法取代的。通過掌握一些設計規范和方法，我們同樣可以通過Axure制作出非常完美的移動端演示原型。
首先你可以通過以下地址在電腦瀏覽訪問我設計完成的移動端原型模板。
在開始設計原型之前我們需要做的第一步是選擇合適的設計分辨率，目前使用Axure設計移動端原型時普遍采用的是(寬)375px*(高)667px和(寬)414px*(高)736px兩種分辨率尺寸，這兩種尺寸分別是由目前主流的移動設備Iphone7和Iphone7 PLUS的屏幕分辨率尺寸等比縮放而定義出來的，同時也是Iphone7和Iphone7 PLUS的邏輯分辨率。
有朋友可能會疑惑在設計原型的時候為什么不直接采用移動設備實際的分辨率呢？因為這主要考慮到設計時的便攜性，畢竟我們輸出的原型主要是用于演示而不是視覺稿，所以不需要達到那么高的精度，另外如果按移動設備實際的分辨率進行設計，在對元件進行編輯和排版的時候會是一件很耗費時間的事情，同時也不方便在電腦瀏覽器上進行查看。
本人在進行原型設計的時候一般用的是375px*667px這個分辨率尺寸，因為Axure常用的元件默認的字號一般是14px或18px，這兩種字號也剛好匹配Iphone7上常用字號的比例，而且這個分辨率尺寸在電腦瀏覽器上剛好一屏就可以顯示完整。
但是如果你采用375px*667px這種分辨率輸出的原型在Iphone7 PLUS上進行瀏覽時，兩邊會出現部分的空白區域，不過它也已經基本適配各種主流移動端設備了，所以采用這個分辨率尺寸是綜合衡量之后的選擇。
上面已經介紹了為什么選擇375px*667px作為移動端原型設計分辨率尺寸，在開始設計之前我們需要先按照這個尺寸在編輯區域中定義好內容區域。我一般是使用輔助線來定義內容區域的，例如下圖是用輔助線定義好內容區域的效果。
事實上我們在設計時其實不用去限制原型的高度，因為在通過移動端設備進行瀏覽時可以通過滾動頁面查看超出高度部分的內容，這跟實際的移動端產品的操作方式是一致的。而在原型設計的時候，我們還是需要拖一條用于標識原型設計高度的輔助線，它的主要作且是為了標識出首屏的區域范圍，這對于布局選擇是有一定的參考價值的。
輔助線的作用除了用來定義內容區域之外，同時它也能幫助我們快捷的進行布局。輔助線有一個特性就是當你拖動元件靠近它時，元件會自動吸附到輔助線的邊緣達到快速對齊的效果，對于有對齊強迫癥的朋友來說這個特性會感覺無比貼心。輔助線的基本使用方法：鼠標移動到編輯區域的左側和頂部的標尺區域長按并往編輯區域拖動時就可以生成橫向或縱向的輔助線，將輔助線拖動到對應的位置即可。
一般除了用輔助線來定義內容區域的之外，我還會新建兩條縱向的輔助線用于標識界面左右兩側的留白區域。建議兩側留白區域用10px或者20px，例如本人常用的是20px，因此這兩條輔助線的位置分別在X軸的20px和355px的位置。除此之外，我們的元件一般還需要設置左右各20px的填充，用來將文字的顯示限定在界面留白區域內。
補充幾點輔助線的使用小技巧：
通過以上幾點介紹了我們如何使用輔助線來建立了一個基本的布局規范，而以下是我總結的其它關于移動端原型的基礎設計規范。通過掌握這些規范或技巧，可以使最終輸出的原型效果更美觀和標準，而且能讓你的設計效率大大的提升。
另外，這些規范或技巧同樣基本適用于WEB端的原型設計，不同的主要是設計分辨率和內容區域的定義，以后有機會我會進行整理和分享。
為了方便進行設計我習慣將內容布局向左對齊，而在演示時內容居中顯示更符合瀏覽習慣，所以需要在頁面屬性設置中將頁面排列設置為水平居中,另外，頁面的背景色推薦設置為#F9F9F9。
導航欄是移動端APP中最常見的元件之一，它的位置一般是固定在界面最頂部的，所以建議將導航欄轉換為動態面板，然后在面板的屬性設置中設置為“固定到瀏覽器”，水平固定選項為“居中”，垂直固定選項為“上”，具體設置如下圖：
標簽欄或工具欄的位置一般是固定在界面最底部的，同樣我們也需要將標簽欄或工具欄轉換為動態面板，然后在面板的屬性設置中設置為“固定到瀏覽器”，水平固定選項為“居中”，垂直固定選項為“下”。
通過這樣的設置以后在有標簽欄或工具欄的頁面中，如果你的頁面內容已經超出了一屏的高度，我們通常需要在內容正文區域的底部放置一個與標簽欄或工具欄高度一致的熱區元件當作占位符，它的作用是用來解決原型演示時標簽欄或工具欄會擋住頁面內容的情況。
模態窗口交互是移動端產品中最常見的交互方式之一，它主要用作顯示系統的重要信息，并請求用戶進行操作反饋，例如：刪除某個重要內容時，彈出對話框進行二次確認。在原型中我們可以通過簡單的設置，實現跟移動端APP一致的模態窗口效果。
移動端模態窗口演示效果：
首先同樣需要新建一個模態窗口的動態面板，在面板的屬性設置中設置為“固定到瀏覽器”，水平固定選項為“居中”，垂直固定選項為“下”。然后再在觸發模態窗口的交互事件中按以下方式進行設置，重點是勾選“置于頂層”選項和設置“燈箱效果”，燈箱效果的背景顏色和透明度可以根據需要進行自定義。關于具體的設置和演示效果，可以參照我將在后面推薦的移動端元件庫。
到此為止已經介紹了關于移動端原型設計的一些規范和常用元件及交互效果的設置，那么當我們的原型設計完成以后在生成HTML之前我們還需要進行幾項簡單的設置。
設置位置：發布—生成HTML-移動設備，在界面中勾選“包含視口標簽”，設置寬度為：device-width，設置縮放為：no，其它選項為空就可以了。
另外，你還可以設置主屏圖標，然后在IOS設備中通過safari瀏覽器打開原型，就可以直接將它添加到主屏幕中了。通過主屏訪問原型時將不會顯示瀏覽器的相關工具界面，最終的演示效果幾乎是跟操作實際的APP是一致的，你甚至可以根據需要定義狀態欄的顏色。
設置方式：啟動safari瀏覽器打開原型地址—點擊瀏覽器底部的設置圖標(正中間)—添加到主屏幕——完成添加即可。大家可以嘗試使用下方演示地址進行添加看看效果。
添加到主屏和最終運行時的效果：
按照上述的設置之后，你將原型生成為HTML文件之后上傳到你的服務器或原型托管平臺，通過手機訪問原型鏈接演示即可。
如果我們設計的移動端原型不需要考慮在手機上演示的場景，仍然可以參照本文中相關的規范。我一般會在編輯區域放置一個設備模板，新建一個內容框架的動態面板用來放置頁面的主要內容，而這個內容框架的尺寸同樣是我們之前定義的內容區域尺寸(寬)375px*(高)667px。另外，內容框架的動態面板的屬性中需要將滾動條設置為“自動顯示垂直滾動條”，這樣當框架的內容超出時可以拖動滾動條進行查看。
通過添加設備模板的設計區域效果
通過使用設備模板可以讓輸出的原型效果更標準和規范，如果我們在編輯界面中放置了設備模板，則不再需要對導航欄、標簽欄或工具欄、模態窗口等動態面板進行固定到瀏覽器設置，你只需要拖動到設備模板對應的位置并置于內容框架上方即可。
如果你需要獲取相關設備模板的圖片，請通過下面的下載地址獲取到。這套素材中包含了iphone、Android、IPAD等各種機型常用模板，而且都已經按標準尺寸定義好，只需要直接下載使用即可。使用方法：在創建Axure原型文件時建立一個模板母版，然后將設備圖片導入到母版中，再將母版拖至設計界面區域。
常用移動端設備模板素材
最后分享的是AxureUX交互原型移動端元件庫精簡版，這套元件庫基本是按照本文所介紹的相關規范和標準進行制作的，共由常用組件、信息輸入、信息輸出、信息反饋、綜合系列等五大元件類型組成，其中還包含各類移動端基本元素、動態交互組件，以及各類常用界面模板，能助您快速的輸出友好美觀的移動端交互原型。
相關截圖：
本文由 @windir 原創發布于人人都是產品經理。未經許可，禁止轉載。
起點學院】產品經理實戰訓練營，北京、上海、廣州、深圳、成都、杭州同時開課啦！
推薦語：@Akane_Lee ：這篇是最簡單的過場設定、最偷吃步驟、不需要技術，只要會寫簡報 PTT 或是 Keynote 就做的出來，所以連 Planner 和 PM 也保證上手無問題 >>>
動態效果、轉場動畫對UI的戲份越來越重…其實一直都很重只是大多用在游戲上，功能型 App 運用這種技巧最近越吃越兇，且制作真正能裝在手機、拿在手上操作的擬真 Prototype 對不會寫 Code 的設計師來說有難度。我找到好用的方式可以解決這個問題：Hype3＋Frameless。
會選 Hype3 的原因在《Note：Prototype 制作軟件》有提過，就不多說，直接從范例開始吧。
（好像得搭梯子才可以訪問，木有梯子同學可參見：《Sketch神助攻！無代碼做動效神器Hype3入門教程》）
示范： iPhone 內建的音樂 App
1.打開 Hype3 ，官網下載的試用版可以用很久，還有簡中接口，先抓下來玩看看，喜歡再買。（這套定價也很便宜！）
2. 既然是 iPhone 的 Prototype，來改一下場景尺寸。我用的是 640x1136px，畫質比較細。
3. 因為畫面是長型的，所以我把時間軸和圖層從下方挪到右邊去。
4. 手機截圖，直接扔進 Hype3 里。
（表示做自己的東西實可以直接拿 Mockup 的 jpg 或 png 圖直接上！）
5. 來做「動作觸發的范圍」，在圖上先拉個矩形。
6. 右邊選單設定無填色、無筆劃。
7. 下方 Tab Bar 第 2 顆的位置就有一塊透明的區域，也就是「動作觸發的范圍」。
8. 設定動作，雖然手機上不會有光標，但我還是喜歡把可觸發的區域光標換成手指，在 Browser 預覽時可以快速確認自己Link設對了沒有。
9. 記得，所有場景、圖層什么的，要重新命名成有意義的名字，當頁數和組件一多時才不容易出錯。
10. 像 Keynote 一樣，可以一次做了好幾個組件，選起來好拷貝到其他場景貼上。
（圖層前后會影響操作和組件顯示，如果有時候發現某個地方怎么點都沒效果、或是看不到，檢查下圖層順序。）
11. 點著個 BTN、播放中的頁面是由右往左推進。
12. 所以記得把過場動效改成「推動」（由右往左）。
13. 秒數我習慣設 0.3s，依個人感覺不同，請自己試看看。
14. 這個 Btn 點下去、會由下往上出現歌曲列表頁。記得設定「推動」（由下往上）。
15. 點了「完成」后，頁面會由上往下。
（當很多頁面都有一樣的回前頁、Tab 的Link要處理時，可以先做完一頁，剩下 Copy、Past 就好。）
選 HTML5、活頁夾，檔名命名好。
會出現一個 HTML 檔和一個文件夾。把這兩個檔傳到服務器上，就可以用手機開網址測試了。
如果想預覽自己做的如何，工具欄上有個 Chrome 或 Safari 的 icon，按下去就是了。不過它不是實時的，每次修改存盤就要再點一次這 icon 重新產生預覽，直接點 Browser 重新整理看到的會是修改前的樣子。
這是個連「狀態欄」都沒有，真正全屏幕的瀏覽器。免費！
輸入你的Prototype網址，就可以像真的 App 一樣，用手機做測試了。
祝順利！
作者： @Akane_Lee
來源：優設網
原文地址：blog.akanelee.me
型工具是十分實用的工具，它可以幫助你完成從粗略的設計概念到產品完全形成的全過程，除了應用簡單，成本也比較低廉。
下面我們就為大家介紹幾款用于桌面或移動設備構建網站和應用的原型開發工具。這其中有些工具具有很贊的用戶體驗，包含了設計元素的動畫、手勢、轉換和自定義內容，也有快速原型和模型工具提供各種模板，輕松地將應用程序從理念實現到工作模式。最重要的是，大多數的工具中都有免費的基礎版本可供用戶使用。
Adobe Experience Design CC
作為Adobe Creative Cloud套件的一部分，Adobe Experience Design是一個用于創建、共享網站和移動應用設計的一體化工具。繪制，重用和重新混合元素以創建線框、視覺設計和原型；添加交互無需離開體驗設計，并在桌面和移動設備上實時預覽；與團隊成員分享互動原型，以獲得即時反饋和協作。
價格：對于單個應用程序Adobe Create Cloud每月19.99美元，完整版本的費用是每月49.99美元。
Webflow
Webflow是一個在線原型設計工具，無需編寫代碼即可設計應用程序。用戶可以從頭開始設計，也可以從一百多個網頁和應用模板中選擇應用。Webflow包含一系列用于用戶體驗設計的觸發器、效果和動畫，為了幫助用戶快速完成設計還包含了許多預構建組件。使用Webflow不僅可以構建店鋪，還可以利用第三方電子商務平臺處理購物車和付款。另外，Webflow與Zapier集成，可以將網站連接到500多個應用程序，如Slack Drive和Trello，MailChimp還可以自動化構建列表。
價格：兩個unhosted項目是免費的，付費服務大約是每月35美元。
InVision
InVision是一個在線原型、協作和工作流平臺。支持設計文件上傳，并通過添加動畫、手勢和轉換，將靜態屏幕轉換為可點擊的交互式原型。如果確切來說，InVision提供的不是準確的線框圖，而是一個快速原型的環境，可以把你的UX/UI草圖快速連接起來。數字型的線框圖和高保真的設計可以幫你測試app的工作情況，同時該工具還支持協作和分享功能，生成的在線原型可以支持任何人在產品原型的任何地方評論，便于準確的交流。
價格：只創建一個項目，InVision是免費的，升級為高級用戶之后，每月15美元。
HotGloo
HotGloo是一款為傳統軟件以及富互聯網應用軟件制作產品原型的在線工具，主要用于為Web，移動和可穿戴設備構建線框。HotGloo可以隨時隨地在任何移動設備上編輯、審查和測試，甚至可以在其間添加筆記和注釋。為了便于構建和測試交互，HotGloo中有超過2000個元素、圖標和用戶界面小部件。另外，HotGloo在設計之初充分考慮了學習曲線的問題，不僅有一大批教程和入門文檔，甚至還配有可靠的支持團隊。
價格：HotGloo的價格是分梯度的，2個活動項目為每月13美元，6個活動項目為每月27美元，15個活動項目為每月54美元。
Marvel
Marvel是一個app原型圖在線制作工具，大家不僅可以借此設計用戶界面與圖標，同時也能夠將來自本地、Dropbox以及Google Drive的屏幕設計添加為“熱點”。只需數次點擊，大家就能將各屏幕聯系起來以構成交互式移動及Web應用。除此之外，用戶還可以添加轉場效果、添加手勢（如滑動或收縮），甚至也可以添加指向其它內容的鏈接，如視頻、音頻等等。
價格：基礎版是免費的，付費服務是每月12美元起。
JustInMind
JustInMind是一個移動和網絡應用程序原型工具，可應用在Windows和Mac OS中。JustInMind中大約有500個小部件可為任何應用程序創建交互式線框；可定義豐富的互動和條件導航體驗；在線發布和分享整個線框，并獲得用戶和客戶的即時反饋和評論。
價格：每人每月19美元。
Axure
Axure RP是一個專業的快速原型設計工具，能夠高效率制作產品原型，快速繪制線框圖、流程圖、網站架構圖、示意圖、HTML模版等。支持從內置或自定義庫中拖放元素以創建圖表；支持交互樣式設置，如字體、線型、填充顏色、陰影等等；注釋圖表和原型,以便指定功能,跟蹤任務,或存儲項目信息；支持圖表和原型發布到Axure分享的云或內部部署。
價格：每人每月29美元。
PowerMockup
PowerMockup可以直接把PPT文件變成線框圖工具，兼容所有的Microsoft office工具，能作為PPT的軟件加載項隨著ppt啟動而加載。Powermockup提供較多豐富的組件，通過這些組件能夠較快速度的搭建產品原型圖。
價格：59.99美元。
Concept.ly
Concept.ly是一個用于創建交互式應用程序的協作和原型平臺。支持從靜態圖片快速制作成為移動和網絡的可點擊原型；上傳設計文件并將它們集成在一起創建工作應用程序的Web和移動端；支持單擊共享，實時協作，能夠標記特定區域并提供四種類型的反饋；即時通知，讓您了解每個項目的協作以及各種編輯活動；持續跟蹤設計的各個版本，除了可以查看設計是如何演變的，還可以恢復到以前的版本。
價格：基礎版是免費的，付費服務為每月9.99美元。
Balsamiq
Balsamiq Mockups是一種軟件工程中快速原型的建立軟件，它的界面再現了在白板上草繪的快速、創造性的流程體驗。Balsamiq Mockups用戶測試早，在編寫代碼之前，就可以打印出你的原型或運行在線用戶測試。Balsamiq不僅有web app和桌面版本，也可以作為wiki和bug tracker中的插件。
價格：89美元。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
