文章作者分享了一種基於設備範本的移動端原型設計方法， 相信能夠對你的原型設計工作帶來幫助， 值得馬克。
在使用Axure設計移動端原型的應用方面，
什麼是基於設備範本的移動端原型設計方法？簡而言之就是在Axure的編輯介面中放置對應的機型範本， 使輸出的原型達到更規範和真實的演示效果。 其實這是一種很常見的移動端原型的設計方法， 很多同行在設計原型的時候也都用過。 這篇分享教程將對個設計方法進行了總結和梳理，
● 結構化， 根據APP介面結構進行搭建；
● 標準化， 非常方便進行編輯和維護；
● 高保真， 可高度還原移動端交互效果；
在本篇分享的結尾我會提供範本的Axure原始檔案下載， 其中包含了最新的IPhoneX和IPhone8等多套IOS設備機型， 以及一些常見的介面元素和交互效果。 在開始正式的介紹之前， 大家可以查看使用這套範本還原IOS中兩款官方應用的設計演示。
IOS11 AppStroe For iPhoneX 原型演示
1.介面元素和結構介紹由於這套範本是基於IOS系統進行設計的，
所以如果沒有特珠需求的話， 我們一般也只需要輸出一套原型方案就可以了， 不過設計過程中需要儘量兼顧這兩個主流的系統。 當然， 如果你的產品明確需要按照Android的系統規範來設計， 你也可以參照本教程設計一套Android的原型範本， 相關對話模式可以參照Android版的交互指南規範。
在開始介紹範本的搭建和使用方法之前， 需要先對APP的介面結構做一個簡單的介紹， 熟悉了介面結構可以方便我們後續的設計。
狀態列顯示裝置的關鍵資訊， 包含設備模型或網路提供商、網路信號強度、電池使用量、時間等。 在特殊介面中可以對狀態列做隱藏處理， 或根據需要自訂狀態列背景。
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 原型範本的原始檔案下載，大家可以結合本文中的相關介紹進行使用。
最後再給大家分享一套本人整理設計的移動端元件庫，這套元件庫中的相關元件是可以在這個範本中複用的，後續也會不斷的進行優化和完善，有需要的朋友可以關注一下。
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 原型範本的原始檔案下載，大家可以結合本文中的相關介紹進行使用。
最後再給大家分享一套本人整理設計的移動端元件庫，這套元件庫中的相關元件是可以在這個範本中複用的，後續也會不斷的進行優化和完善，有需要的朋友可以關注一下。