Axure中移動端原型設計方法（附IPhoneX和IPhone8最新模板）

Axure中移動端原型設計方法（附IPhoneX和IPhone8最新模板）

2018年4月16日luodonggan

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、#33333三、#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。另外，內容框架的動態面板的屬性中須要將滾動條設置爲「自動顯示垂直滾動條」，這樣當框架的內容超出時能夠拖動滾動條進行查看。

經過添加設備模板的設計區域效果

經過使用設備模板可讓輸出的原型效果更標準和規範，若是咱們在編輯界面中放置了設備模板，則再也不須要對導航欄、標籤欄或工具欄、模態窗口等動態面板進行固定到瀏覽器設置，你只須要拖動到設備模板對應的位置並置於內容框架上方便可。