前面在介紹AxureRP的時候，有介紹到過它的模板管理面板(Masters)，對模板管理面板善加利用能對設計起到事半功倍的效果，且能提高所設計頁面生成原型后的加載速度。很多產品只需要利用現成的UI標準就可以畫出原型，為了減少流程、降低溝通成本，直接利用現有UI標準進行原型的搭建，一般會用Photoshop來實現UI原型，但是效率和不可交互性還是存在很多問題，所以需要有一套完成封裝的UI標準并且產生可交互的中高保真原型，這里最好是整體的統一風格，因為只應用于某一個體的，就失去了封裝的意義。這里主要介紹AxureRP怎么使用模板管理面板來封裝UI標準。

一、創建UI零件庫

1、把UI標準中的元素進行提取。一般UI標準的形式是以圖片的形式提供的，所要做的就是把每個元素單獨切割出來保存成圖片文件，最好背景是透明的，而且把圖片上的文字都去掉保持可擴展性，然后按照自己需要來分類。

2、在AxureRP里面的模板管理面板中新建一個文件夾并命名，在文件夾下面新建一個模板文件。如果已經分好類了，就在對應類別文件夾下建。

3、雙擊打開這個模板，在組件里面把圖片組件拖動到中間的操作區域中，雙擊找到已經保存好的圖片文件，這樣一個UI組件就加到AxureRP里面了。

4、如果這個UI組件本身需要文字元素，那么在組件里面把文字組件放到UI零件上的相應位置，然后根據UI標準調整文字樣式。注意，因為AxureRP不支持中文，所以他的字體和html中的px是不同的，html中的12px字體在AxureRP里面要設置為9，14px的要設置為11，以此類推。

5、在AxureRP中模板可區分為可單獨編輯和不可單獨編輯(正常及作為背景)，默認是不可單獨編輯，也就是只要改動模板的樣式，這個模板在所應用到的地方都會改變。若需要單獨編輯，特別是在編輯文字的時候，可以右鍵點擊模板，選擇行為下的自定義組件即可。

6、保存并重復2~4的步驟，就可以完成所有UI組件的轉換。

二、結構庫構建

有時候需要可以直接使用的模塊，類似于網站的頭部和底部是可以直接調用不需要再設計的。類似于這類的結構，利用現有UI組件進行搭配。方法和搭建UI組件類似，只要新建一個文件夾然后新建模板，再把相應的UI零件拖放到指定位置便可以完成。

這里要注意幾點：

1、要把一些基本交互加上去，保證原型的可交互性。

2、模塊是屬于統一的內容，一般不需要轉換成可單獨編輯的模式，也可以根據個人需要自行轉換。

三、UI標準的更新

要記住一點：不斷更新，要定期把新的UI組件加入到AxureRP中。

完成一、二兩大步驟其實已經可以開始工作了，每次使用這套封裝的組件時只需要導入這個rp文件，并選擇第二項“Masters”，以及Check All所有組件，點擊確定完成就可以直接使用了。

其實這里也可以用創建RP的庫文件來實現，把上面所述的所有模板做成庫里面的一個個組件，然后生成庫文件，把這個庫文件放在AxureRP安裝目錄下的庫文件夾，這樣每次打開AxureRP都會自動加載，在組件選擇面板里可以直接選擇使用，不過這樣就起不到提高加載速度的效果，后面會介紹。

總結

以上是生活随笔為你收集整理的axure rp编辑html模板,AxureRP教程—用模板封装UI标准的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。