在Axure中內聯框架主要用于內部頁面引用,外部鏈接、資源引用等。在整個原型中可以進行不同頁面內容以及外部資源的組合。
內聯框架樣式
添加內聯框架目標
引用內部界面
內聯框架可以引用目前已創建的頁面內容,在內部頁面支持對應的搜索。
- 引用內部頁面,會按照內部頁面樣式形式全部展示(類似鑲嵌網頁),引用的頁面修改后,內聯框架預覽同步更新。
- 通常在高保證的原型中,菜單欄與內容進行分離,在框架頁面通過交互事件綁定內聯框架引用不同頁面。
案例截圖
整個原型框架采用菜單與內容分離,菜單點擊后,設置內聯框架加載對應的內部頁面。這樣就可以解決部分原型的頁面自適應問題。只需設置內聯框架的尺寸自適應,內部引用界面會自動居中加載(需設置頁面樣式為居中),交互效果也會比較平滑自然。
引用外部內容
外部資源可以為外部網頁,外部視頻、圖片等資源。支持本地資源與網絡資源的引用。
外部網頁
適合大多數網頁的引用。
引用前,需要訪問網頁,保證外部網頁正常,同時注意區分內外網資源,內網資源如果在外網時,會產生加載失敗。
配置網頁需要注意網頁的訪問協議頭,例:http或https。
引用網頁的展示有效展示區域取決于內聯框架的設置(大小設置,是否滾動等屬性)。
引用圖片資源
內聯框架引用本地圖片資源。
- 引用本地圖片資源存在在預覽時無法加載的顯示問題,此時可以生成對應的Html文件解決此問題。
關于文件的相對路徑與絕對路徑的說明
絕對路徑:若整個原型在本機(當前編輯電腦)運行展示,外部引用的內容可以配置絕對路徑,即當前文件所在的位置(本地電腦硬盤位置)。在其它電腦編輯展示時引用文件不存或路徑變更會無法展示。
相對路徑:相對位置文件,只需配置對應的文件部分路徑。然后將資源統一整理,放置在對應生成的原型Html文件目錄中。這樣可以在不同的環境展示對應的文件均可加載對應外部資源。
一般常用的為相對路徑,相對比較靈活,但是需要注意文件的相對路徑位置是針對整個生成Html文件的位置。
內聯框架引用網絡圖片資源。
可以借助目前主流的網絡存儲,例如圖床、OSS等進行圖片資源的引用。在借助網絡資源時,需在對應的地址中配置圖片的網絡地址,同時需要確保圖片可自由訪問(防止圖片存在防盜鏈接,部分環境中無法加載)。
借助網絡資源,可以提升原型的加載速度。
網絡資源無需擔心路徑問題,只要資源可訪問即可引用。
引用視頻資源
引用視頻資源相關流程與圖片相似,同樣分為本地與網絡兩種。相關設置可參考圖片的引用。
隱藏邊框
控制邊框在預覽和生成Html文件中是否展示、
需要在未選中內聯框架時區分,選中時,選中狀態會與邊框重復,有點無法區分。
默認邊框有點類似陰影的效果。
通常使用中,勾選隱藏即可。
滾動條控制
會分為按需滾動、從不滾動、始終滾動。
按需滾動:根據引用內容,顯示對應的方向滾動條(內容方向超出當前內聯框架的方向大小)
從不滾動:引用內容靜止不可滑動,超出內聯框架大小范圍內容不展示。
始終滾動:始終展示滾動條。
引用函數資源
此處可以引用部分函數配置的資源。
- 多出使用同一資源,可全局變量設置網絡圖片或視頻資源后,此處直接引用全局變量。后期直接修改全局變量,整個內容全部更改。
- 引用中繼器中的字段函數(設置字段為引用頁面),可直接實現內聯框架自動加載對應的頁面鏈接。
預覽設置
用于編輯狀態下的內聯框架的內容區分。在實際的預覽與生成的Html中無效。
視頻樣式
地圖樣式
自定義樣式
自定義樣式可以自行選擇圖片進行填充。
總結
內聯框架在搭建自適應原型中可以通過引用的方式進行頁面加載,是目前比較主流的自適應方案之一。
內聯框架可以引用外部的部分富媒體,方便多樣化展示,例如:視頻、圖片等。
內聯框架可以引用外部的網頁進行部分嵌套與打開,從而實現部分靜態網站的搭建。