Axure中移動端原型設計方法（附IPhoneX和IPhone8最新模板）
Axure中移動端原型設計方法（附IPhoneX和IPhone8最新模板）
Axure中基於裝置模板的移動端原型設計方法（附IPhoneX和IPhone8最新模板）
文章作者分享了一種基於裝置模板的移動端原型設計方法，相信能夠對你的原型設計工作帶來幫助，值得馬克。
在使用Axure設計移動端原型的應用方面，我總結出了兩種常用的方法。第一種是更適合在移動端進行演示的設計方法，大家可以參考我之前已經分享過的一篇教程：使用Axure打造最佳的移動端互動原型教程，使用這種方法輸出的原型在手機裝置上進行演示時可以達到跟真實APP幾乎一致的展示效果及互動體驗。在今天我將分享另外一種基於裝置模板的移動端原型設計方法。
什麼是基於裝置模板的移動端原型設計方法？簡而言之就是在Axure的編輯介面中放置對應的機型模板，使輸出的原型達到更規範和真實的演示效果。其實這是一種很常見的移動端原型的設計方法，很多同行在設計原型的時候也都用過。這篇分享教程將對個設計方法進行了總結和梳理，並基於這個方法制作了一套可快速複用的模板。這套模板具有幾個方面的特點：
● 結構化，根據APP介面結構進行搭建；
● 標準化，非常方便進行編輯和維護；
● 高保真，可高度還原移動端互動效果；
在本篇分享的結尾我會提供模板的Axure原始檔下載，其中包含了最新的IPhoneX和IPhone8等多套IOS裝置機型，以及一些常見的介面元素和互動效果。在開始正式的介紹之前，大家可以檢視使用這套模板還原IOS中兩款官方應用的設計演示。
IOS11 AppStroe For iPhoneX 原型演示
演示地址：http://www.axureux.com/demo/TemplatesForIOS11/today.html
IOS11 Contacts For iPhone8 原型演示
演示地址：http://www.axureux.com/demo/TemplatesForIOS11/個人收藏.html
1.介面元素和結構介紹
由於這套模板是基於IOS系統進行設計的，所以相關介面元素和互動方式均以IOS為標準。目前主流的移動端系統除了IOS還有Android，這兩種系統設計標準和互動方式其實是存在一些差異的，不過目前市面上大部分APP在設計時並沒有爭對兩種系統做單獨的處理。
所以如果沒有特珠需求的話，我們一般也只需要輸出一套原型方案就可以了，不過設計過程中需要儘量兼顧這兩個主流的系統。當然，如果你的產品明確需要按照Android的系統規範來設計，你也可以參照本教程設計一套Android的原型模板，相關互動方式可以參照Android版的互動指南規範。
在開始介紹模板的搭建和使用方法之前，需要先對APP的介面結構做一個簡單的介紹，熟悉了介面結構可以方便我們後續的設計。常見APP的介面主要由以下元素或元件組成：
StatusBar / 狀態列
狀態列顯示裝置的關鍵資訊，包含裝置模型或網路提供商、網路訊號強度、電池使用量、時間等。在特殊介面中可以對狀態列做隱藏處理，或根據需要自定義狀態列背景。
NavBar / 導航欄
導航欄位於app內容區的上方，系統狀態列的下方，並且提供在一系列頁面中的導航能力。可在導航欄中顯示當前檢視的標題，如果標題非常冗長且無法精簡，可以空缺，避免用過多的元素填滿導航欄。導航欄中可以新增文字和圖示控制元件，相關控制元件的可點選區域需要大於控制元件的可視大小。
Body / 內容區
內容區域根據需要進行自定義設計，常見的設計形式有選單列表、圖示列表、卡片列表、圖文組合等。
TabBar / 標籤欄
標籤欄位於APP底部，方便使用者在不同功能模組之間進行快速切換。標籤欄一般用作APP的一級分類，數量控制在3-5個之間。建議使用Badge進行提示，讓使用者知道有內容更新。
Toolbar / 工具欄
工具欄一般會出現在檢視的的底部，提供給使用者相關可操作的功能按紐。如，郵件應用程式裡的收件箱欄中有刪除、分享、答覆等等。
Modal / 彈出層
移動端的彈出層根據彈出方式不同，共分為模態視窗、動作面板、彈出面板等幾種不同的型別。在實際使用中，可根據介面的互動方式選擇對應的型別。
Toast / 輕提示
一種輕量級反饋提示，可以用來顯示不會打斷使用者操作的內容，適合用於頁面轉場、資料互動的等場景中。一次只顯示一個輕提示，有圖示的提示字數為4-6個，沒有圖示的輕提示字數不宜超過14個。
TableView / 列表檢視
列表檢視是移動端APP中一種通用的介面元素。很多應用程式在一定程度上，都有使用表檢視來顯示資料列表。常見的例如IOS的聯絡人應用中聯絡人資訊列表，另外還有Mail中使用列表檢視顯示郵箱和郵件。列表檢視不僅可以用來顯示文字資料，也可以用來呈現影象資料。
以上是豆瓣APP的一個介面截圖示例，介面的結構用顏色進行了區分，從上至下分別為：狀態列、導航欄、內容區、標籤欄。
2.結構化的模板搭建
在介紹完APP的介面結構之後，接下來說明一下模板的搭建方法。在本篇教程的結尾會提供了已經制作好的模板的檔案，大家可以下載並參考本部分介紹進行使用，也可以參照介紹製作自己的原型模板。
在製作模板時需要用到對應的機型裝置的圖片素材，可以通過Dribbble等設計分享平臺找到對應的素材檔案，然後對素材做一些簡單的處理。處理的過程首先是去掉多餘的元素，只保留機型裝置的框架圖片。另外還需要對圖片的尺寸進行調整，例如在製作手機等移動端模板時我們將內容區域定為375px，需要根據所定的內容區域對圖片的尺寸進行相應的調整。
為什麼模板的內容區域是375px？這個問題我在上篇教程中進行過介紹，所以不再進行展開說明。但是需要記住的這個尺寸是一個重要的標準，後續在設計過程中相關元件的寬度尺寸都需要參照這個標準。機型裝置的圖片素材準備好之後，我們在Axure中建立一個對應的母版，然後將機型裝置圖片拖入到母版中。母版的名稱可以按該機型裝置的名稱命名，後面在使用時在新建的頁面中拖入該母版即可。
下一步需要建立前面介紹過的APP介面中常見元素或元件，首先大家可以看一下這張圖片中已經建立好的模板，其中包含了機型母版、輕提示、彈層、導航欄、標籤欄、內容框架等元素。
在這個模板頁面的概要檢視中可以看到相關的物件，所有物件我都建立了一個對應的動態面板。這樣的處理主要出於兩個方面的考慮，一是方便對相關元素進行編輯維護，二是相關物件的顯示是有順序的，這樣可以方便在概要檢視中進行排序處理。
3.模板使用細節說明；
在內容框架中編輯介面內容；
介面的主要內容在內容框架動態面板中進行編輯和維護，由於該動態面板設定了自動顯示滾動條，如果你的介面內容超出了一屏，在演示時可以通過在內容框架區域滾動滑鼠滾輪檢視更多內容。
關於模板介面元素的尺寸說明：
模板中的介面元素的尺寸並沒有非常嚴格的標準，以下尺寸是我根據比例進行設定的，僅供參考。IphoneX狀態列：44px、IphoneX標籤欄：80px、Iphone8狀態列：28px、IphoneX標籤欄：60px、導航欄：40px。另外，內容區域的高度因為機型裝置的素材圖片不統一可能略有差異，基本上可以忽略。
每個介面對應一個頁面；
在設計原型時建議每一個介面建立一個對應的頁面，通過新增頁面連結進行介面跳轉，這樣方便對原型進行編輯和維護。不建議將多個介面用動態面板堆砌在一起頁面內，這樣會使輸出的原型在演示時出現卡頓現象。
關於元素的層級順序；
在概要檢視中可以看到相關元素對應動態面板的層級順序，在使用該模板的時候請儘量參照此順序，否則可能在演示時出現顯示錯誤的情況。
關於底部標籤欄的設定；
為了方便維護可以將標籤欄建立為母版，然後新增到需要顯示標籤欄的頁面中。另外，在對應的頁面中需要顯示對應的標籤選中效果，只需要在該頁面中的標籤欄動態面板中新增一個選中效果的標籤元件。
熱區佔位符的使用；
如果頁面中添加了標籤欄或工具欄，由於標籤頁的動態面板在內容框架的動態面板之上，在演示時會出現內容有一部分被擋住的情況。可以建立一個高度為100px的熱區元件為母版，將母版拖入對應的頁面底部，用來解決內容區域被擋住的問題。
4.常用設計元素及規範
經常有朋友向我諮詢如何設計出更漂亮美觀的原型，雖然原則上原型能完整的體現出需求細節即可，好看並不是我們在原型輸出時應該關注的重點，但是如果能滿足說明需求的同時能把原型做得更漂亮一些更好，這也算是體現專業程度和工作態度的一個方面，而且很多人對自己的輸出物也是有強烈的美感追求的。
其實原型設計不需要了解太複雜的設計方法，只要掌握一點簡單的技巧就能達到美觀的效果，同時能讓整體更統一和標準。在分享的這套模板中包含了一些基本的設計元素，我下面對其中的一些規範細節進行說明，供大家進行參考。
配色方案
-
◆ 一般採用黑白灰的配色方案就能夠滿足基本設計要求了，但是如果能稍微得加上一些亮色的配色效果，可以使原型更好的體現出視覺層級，這對UI是有一定的參考價值的。不要感覺得配色效果能夠影響UI的設計，如果UI會被原型中的配色影響，只能說明UI的設計能力有待提升；
-
整套原型中亮色主色調不要超過兩個，對於主要按紐和重點提示可以加上主色調色值，次要元素統一使用#000000、#333333、#999999等灰色輔助色；
-
◆ 模板中的這套模板方案中的主色調是從IOS11的UI設計規範中提取的，你可以根據自己的需要整理一套自己的配色方案，建議儘量使用扁平化設計色值；
配色板使用
Axure中的配色板提供了一些常用的顏色色值，可用作一些常用元素的顏色配色。例如截圖中標註1中的縱向的灰色色值可用於相關字型元素的顏色，標註2中橫向的灰色色值可用於相關元素的背景和線條的顏色。另外，點選標註3中的更多按紐，可以將其它的常用色值加入到自定義顏色中，方便快速的使用。
字型元素
-
◆ 原型設計時的字型字號建議統一使用偶數，常用的標題字號為16px、18px、20px，常用的正文字號為12px、14px；
-
針對不同字型大小的多行文字單獨設定對應的行間距，例如12px的多行文字行間距建議設定為20，14px的多行文字行間距建議設定為28；
-
推薦中文字型統一使用微軟雅黑，由於Axure的預設字型為Arial，可以通過生成HTML設定中的字型對映，將Arial對映為微軟雅黑，這樣就不需要在設計時去單獨設定每個元件的字型了。
其它元素
-
◆ 原型設計時元件的寬度建議統一保持為5和10的倍數，元件的間距建議為10px或20px；
-
◆ 使用鍵盤方向鍵移動選中的元件時每次移動距離為1px ，使用ctrl+鍵盤方向鍵每次移動距離為10px；
-
◆ 按住Ctrl+滑鼠拖動可以快速的複製元件，按住Shift+滑鼠拖動可以垂直或水平的移動元件；
對齊及分佈工具使用
-
有對齊強迫症的朋友可以使用頂部工具欄中的對齊及分佈工具對元件進行處理，右擊頂部的工具欄區◆ 域可以自定義顯示或隱藏相關的工具圖示；
-
選中多個元件時可以使用對齊工具快速的對多個元件進行各種對齊處理，還可以使用分佈工具快速的對多個元件進行垂直或水平分佈處理；
5.使用輔助線進行排版；
在以前的教程中已經介紹過輔助線的使用方法，合理的使用輔助線可以幫助我們提升設計效率，同時能讓輸出的原型效果更標準，所以強烈建議大家在設計過程中使用。以下是模板中內容框架編輯區域的截圖，是我常用使用輔助線用來排版的方式。截圖中的輔助線均為橫向x軸輔助線，可以看到其中共有4條，分別介紹一下它們的作用和位置：
-
第1條輔助線是用來劃分左邊的內容留白區域，例如我一般習慣將左邊留白為20px，這條輔助線位於x軸的20px位置。
-
第2條輔助線是內容居中輔助線，之前已經介紹過模板的設計寬度標準為375px，這條輔助線位於x軸的188px位置；（375px/2=187.5px）
-
第3條輔助線用來劃分右邊的內容留白區域，例如右邊跟左邊留白一樣為20px，這條輔助線位於x軸的355px位置；(375px-20px=355px)
-
第4條輔助線是用來劃分內容設計區域，例如模板的設計寬度標準為375px，這條輔助線位於位於x軸的375px位置；
這些輔助線的用法只是作為參考，可以根據自己的需要新建對應的輔助線。滑鼠游標移動到編輯區域的左側和頂部的標尺區域，按住滑鼠左鍵並往編輯區域拖動時，就可以生成橫向x軸或縱向y軸的輔助線，然後將輔助線拖動到對應的位置即可。輔助線還有一個特性就是當拖動元件靠近它時，元件會自動吸附到輔助線的邊緣達到快速對齊的效果。
幾點輔助線的使用小技巧：
-
右擊輔助線可以將其鎖定，以防止拖動元件時會將輔助線會跟著一起移動；
-
可以通過按住Ctrl拖動建立全域性輔助線，全域性輔助線就是在所有頁面中產生一條相同的輔助線；
-
在“佈局—柵格和輔助線—鎖定輔助線”中選中可以將所有的輔助線保持鎖定狀態且無法刪除；
-
在“佈局—柵格和輔助線—刪除輔助線”中可以清除所有頁面中的輔助線；
-
在“佈局—柵格和輔助線—輔助線設定”中可以修改輔助線的顏色或進行更多設定；
6.Toast提示互動設定；
移動端原型中最常用的互動效果就是彈出層和輕提示兩種，模板中已經包含了這種兩互動效果的相關元件和事件，這裡再單獨簡單的介紹一下。
Toast提示顯示效果
在模板頁面的概要檢視中可以看到名為“提示”的動態面板，需要顯示的提示資訊在這個動態面板中編輯就可以了。當前的動態面板中有一個“操作成功”的提示狀態，如果在一個頁面中顯示多個提示，可以新增對應的狀態然後修改相關的提示內容。
選中提示的動態面板的狀態右擊選擇複製狀態可以快速建立新的提示。建議對每個對應的提示狀態進行命名，這樣方便後續進行管理。關於輕提示的基本使用規範請參照前面的介紹內容。
Toast提示的顯示方式設定很簡單，只需要在對應的元件事件上加入以上的互動動作。首先設定提示動態面板中對應的狀態，然後設定顯示動態面板，顯示時有一個逐漸的動畫效果。
Toast提示顯示以後會在3秒後自動逐漸隱藏，模板中的這個互動動作已經加在提示動態面板的顯示時事件中了，不需要再單獨的進行設定。
7.常用彈層互動設定
模態視窗互動效果
移動端的彈層共分為模態視窗、動作面板、彈出面板等幾種不同的型別。在模板頁面的概要檢視中可以看到名為“彈層”的動態面板，可以根據需要建立更多其它的彈層狀態，還能在對應的面板狀態屬性中設定透明背景的遮罩效果。
上面截圖中的為比較常見的模態視窗彈層效果，設定方式是在對應的元件事件上加入以上的互動動作。另外，根據模態視窗、動作面板、彈出面板這幾種彈層型別的彈出方式不同，需要設定顯示時為向上滑動和逐步等動畫效果。
8.導航欄切換互動設定
最後介紹一下如何實現內容區域滾動時，導航欄自動切換的互動效果。首先需要在導航欄的動態面板中建立對應的狀態，然後選中內容框架動態面板，在它的滾動時事件中按照上面的格式加入對應的條件判斷即可。
在這個設定用到了條件判斷和函式，條件的詳細設定見上方的截圖。它的原理是當內容框架垂直滾動高度大於70時設定導航欄動態面板的顯示狀態為2，當內容框架垂直滾動高度大小於70設定導航欄動態面板的顯示狀態為1。其中用到的This.scrollY函式是獲取當前元件的直滾動高度，70的值可以根據需要自己設定。
好了，到此這篇基於裝置模板的移動端原型設計方法的分享基本介紹完了。最後提供的是iPhoneX And iPhone8 Mockup 原型模板的原始檔下載，大家可以結合本文中的相關介紹進行使用。
下載地址：https://pan.baidu.com/s/1nvBVgYt
最後再給大家分享一套本人整理設計的移動端元件庫，這套元件庫中的相關元件是可以在這個模板中複用的，後續也會不斷的進行優化和完善，有需要的朋友可以關注一下。
演示及下載：http://www.axureux.com/home/librariesmoblite.html
一直以來Axure在對移動端原型設計方面的支援都不是十分理想，它沒有像目前其它幾類原型設計工具(Justinmind、墨刀等)一樣提供移動端裝置的模板和相關互動元件，但是Axure自由靈活的特性卻同樣的其它原型設計工具所無法取代的。通過掌握一些設計規範和方法，我們同樣可以通過Axure製作出非常完美的移動端演示原型。
首先你可以通過手機或電腦訪問以下地址，這是我設計完成的移動端原型模板。
演示地址：http://www.axureux.com/demo/TemplatesMobEC/startapp.html
使用Axure打造最佳的移動端互動原型教程
1. 選擇適合的設計解析度
在開始設計原型之前我們需要做的第一步是選擇合適的設計解析度，目前使用Axure設計移動端原型時普遍採用的是(寬)375px*(高)667px和(寬)414px*(高)736px兩種解析度尺寸，這兩種尺寸分別是由目前主流的移動裝置Iphone7和Iphone7 PLUS的螢幕解析度尺寸等比縮放而定義出來的，同時也是Iphone7和Iphone7 PLUS的邏輯解析度。
有朋友可能會疑惑在設計原型的時候為什麼不直接採用移動裝置實際的解析度呢？因為這主要考慮到設計時的便攜性，畢竟我們輸出的原型主要是用於演示而不是視覺稿，所以不需要達到那麼高的精度，另外如果按移動裝置實際的解析度進行設計，在對元件進行編輯和排版的時候會是一件很耗費時間的事情，同時也不方便在電腦瀏覽器上進行檢視。
本人在進行原型設計的時候一般用的是375px*667px這個解析度尺寸，因為Axure常用的元件預設的字號一般是14px或18px，這兩種字號也剛好匹配Iphone7上常用字號的比例，而且這個解析度尺寸在電腦瀏覽器上剛好一屏就可以顯示完整。
2. 定義內容區域
上面已經介紹了為什麼選擇375px*667px作為移動端原型設計解析度尺寸，在開始設計之前我們需要先按照這個尺寸在編輯區域中定義好內容區域。我一般是使用輔助線來定義內容區域的，例如下圖是用輔助線定義好內容區域的效果。
事實上我們在設計時其實不用去限制原型的高度，因為在通過移動端裝置進行瀏覽時可以通過滾動頁面檢視超出高度部分的內容，這跟實際的移動端產品的操作方式是一致的。而在原型設計的時候，我們還是需要拖一條用於標識原型設計高度的輔助線，它的主要作且是為了標識出首屏的區域範圍，這對於佈局選擇是有一定的參考價值的。
3. 神奇的輔助線
輔助線的作用除了用來定義內容區域之外，同時它也能幫助我們快捷的進行佈局。輔助線有一個特性就是當你拖動元件靠近它時，元件會自動吸附到輔助線的邊緣達到快速對齊的效果，對於有對齊強迫症的朋友來說這個特性會感覺無比貼心。
輔助線的基本使用方法：滑鼠移動到編輯區域的左側和頂部的標尺區域長按並往編輯區域拖動時就可以生成橫向或縱向的輔助線，將輔助線拖動到對應的位置即可。
一般除了用輔助線來定義內容區域的之外，我還會新建兩條縱向的輔助線用於標識介面左右兩側的留白區域。建議兩側留白區域用10px或者20px，例如本人常用的是20px，因此這兩條輔助線的位置分別在X軸的20px和355px的位置。除此之外，我們的元件一般還需要設定左右各20px的填充，用來將文字的顯示限定在介面留白區域內。
補充幾點輔助線的使用小技巧：
-
右擊輔助線可以將其鎖定，以防止拖動元件時會將輔助線會跟著一起移動；
-
可以通過按住Ctrl拖動建立全域性輔助線，全域性輔助線就是在所有頁面中產生一條相同的輔助線；
-
在“佈局—柵格和輔助線—鎖定輔助線”中選中可以將所有的輔助線保持鎖定狀態且無法刪除；
-
在“佈局—柵格和輔助線—刪除輔助線”中可以清除所有頁面中的輔助線；
-
在“佈局—柵格和輔助線—輔助線設定”中可以修改輔助線的顏色或進行更多設定；
4. 更多基礎設計規範
通過以上幾點介紹了我們如何使用輔助線來建立了一個基本的佈局規範，而以下是我總結的其它關於移動端原型的基礎設計規範。通過掌握這些規範或技巧，可以使最終輸出的原型效果更美觀和標準，而且能讓你的設計效率大大的提升。
另外，這些規範或技巧同樣基本適用於WEB端的原型設計，不同的主要是設計解析度和內容區域的定義，以後有機會我會進行整理和分享。
-
列表選單的高度為45px、導航欄的高度為45px、標籤欄和工具欄常用高度為60px；
-
字號一般用偶數，常用的正文字號為12和14px，常用的標題字號為16px和18px；
-
元件的寬度和高度一般為5的倍數，例如45px、100px等；
-
元件的距間和行距一般為10的倍數，常用10px、20px，按住ctrl鍵通過方向鍵移動元件，每次移動的距離剛好是10px。
5. 頁面屬性的設定
為了方便進行設計我習慣將內容佈局向左對齊，而在演示時內容居中顯示更符合瀏覽習慣，所以需要在頁面屬性設定中將頁面排列設定為水平居中,另外，頁面的背景色推薦設定為#F9F9F9。
6. 導航欄的設定
導航欄是移動端APP中最常見的元件之一，它的位置一般是固定在介面最頂部的，所以建議將導航欄轉換為動態面板，然後在面板的屬性設定中設定為“固定到瀏覽器”，水平固定選項為“居中”，垂直固定選項為“上”，具體設定如下圖：
7. 標籤欄或工具欄的設定
標籤欄或工具欄的位置一般是固定在介面最底部的，同樣我們也需要將標籤欄或工具欄轉換為動態面板，然後在面板的屬性設定中設定為“固定到瀏覽器”，水平固定選項為“居中”，垂直固定選項為“下”。
通過這樣的設定以後在有標籤欄或工具欄的頁面中，如果你的頁面內容已經超出了一屏的高度，我們通常需要在內容正文區域的底部放置一個與標籤欄或工具欄高度一致的熱區元件當作佔位符，它的作用是用來解決原型演示時標籤欄或工具欄會擋住頁面內容的情況。
8. 模態視窗互動設定
模態視窗互動是移動端產品中最常見的互動方式之一，它主要用作顯示系統的重要資訊，並請求使用者進行操作反饋，例如：刪除某個重要內容時，彈出對話方塊進行二次確認。在原型中我們可以通過簡單的設定，實現跟移動端APP一致的模態視窗效果。
移動端模態視窗演示效果：
首先同樣需要新建一個模態視窗的動態面板，在面板的屬性設定中設定為“固定到瀏覽器”，水平固定選項為“居中”，垂直固定選項為“下”。然後再在觸發模態視窗的互動事件中按以下方式進行設定，重點是勾選“置於頂層”選項和設定“燈箱效果”，燈箱效果的背景顏色和透明度可以根據需要進行自定義。關於具體的設定和演示效果，可以參照我將在後面推薦的移動端元件庫。
9. 輸出選項的設定
到此為止已經介紹了關於移動端原型設計的一些規範和常用元件及互動效果的設定，那麼當我們的原型設計完成以後在生成HTML之前我們還需要進行幾項簡單的設定。
設定位置：釋出—生成HTML-移動裝置，在介面中勾選“包含視口標籤”，設定寬度為：device-width，設定縮放為：no，其它選項為空就可以了。
另外，你還可以設定主屏圖示，然後在IOS裝置中通過safari瀏覽器開啟原型，就可以直接將它新增到主螢幕中了。通過主屏訪問原型時將不會顯示瀏覽器的相關工具介面，最終的演示效果幾乎是跟操作實際的APP是一致的，你甚至可以根據需要定義狀態列的顏色。
設定方式：啟動safari瀏覽器開啟原型地址—點選瀏覽器底部的設定圖示(正中間)—新增到主螢幕——完成新增即可。大家可以嘗試使用下方演示地址進行新增看看效果。
演示地址：http://www.axureux.com/demo/TemplatesMobEC/demo.html
新增到主屏和最終執行時的效果：
按照上述的設定之後，你將原型生成為HTML檔案之後上傳到你的伺服器或原型託管平臺，通過手機訪問原型連結演示即可。
10. 其它的補充說明
如果我們設計的移動端原型不需要考慮在手機上演示的場景，仍然可以參照本文中相關的規範。我一般會在編輯區域放置一個裝置模板，新建一個內容框架的動態面板用來放置頁面的主要內容，而這個內容框架的尺寸同樣是我們之前定義的內容區域尺寸(寬)375px*(高)667px。另外，內容框架的動態面板的屬性中需要將滾動條設定為“自動顯示垂直滾動條”，這樣當框架的內容超出時可以拖動滾動條進行檢視。
通過新增裝置模板的設計區域效果
通過使用裝置模板可以讓輸出的原型效果更標準和規範，如果我們在編輯介面中放置了裝置模板，則不再需要對導航欄、標籤欄或工具欄、模態視窗等動態面板進行固定到瀏覽器設定，你只需要拖動到裝置模板對應的位置並置於內容框架上方即可。