1. 程式人生 > >軟體開發實訓(720)科技---Axure8.0基礎教程01

軟體開發實訓(720)科技---Axure8.0基礎教程01

基礎51.   生成部分原型頁面

釋出原型時,如果不需要將所有頁面生成或釋出,可以在生成HTML的設定中開啟【頁面】的設定,取消【生成所有頁面】的勾選,則可以設定生成指定的頁面。注意,子級頁面無法單獨釋出,勾選子級頁面時會自動勾選父級頁面。如果需要單獨釋出子級頁面,需要在頁面管理面板中將子級頁面的級別調整到一級頁面。(圖6-4)

6-4

基礎52.   為原型新增標誌

在生成HTML的設定中有【標誌】的設定,可以為原型新增圖片標識或文字標題。原型釋出後會顯示在工具欄的頁面面板中。(圖6-5)

6-5

基礎53.   釋出原型到AxShare

釋出原型到AxShare是指將做好的原型釋出到Axure官方提供的空間中,通過自動生成的網址進行訪問。釋出到AxShare的快捷鍵為鍵。釋出到AxShare需要預先註冊AxureShare賬號,註冊地址:https://share.axure.com/。(圖6-6)

6-6

釋出完成後,將會自動生成一個網址。可以通過在PC或手機瀏覽器中開啟該網址檢視原型。(圖6-7)

6-7

基礎54.   重新生成當前頁面

修改某個頁面無需將整個原型HTML檔案都重新生成一遍,只需要在【釋出】的選項列表中,選擇【在HTML檔案中重新生成當前頁面】即可。(圖6-8)

6-8

基礎55.   移動裝置設定

製作移動裝置原型需要遵循規範將原型製作成標準尺寸。移動裝置原型尺寸計算工具:http://www.iaxure.com/share/yxcc/(個別移動裝置可能會有出入,僅供參考!)

除了製作成標準原型尺寸,還需要在生成HTML檔案配置中,進行【移動裝置】的設定,讓生成的HTML檔案【包含視口標籤】,這樣才能夠正常顯示。(圖6-9)

6-9

基礎56.   Web字型設定

當原型使用一些特殊字型時,在沒有安裝該字型的裝置上將無法正常顯示。Web字型可以較好地解決這個問題。Web字型的使用包含兩種方式。

方式一、連結“.CSS”檔案(圖6-10)

優點:設定簡單。

缺點:需要網路以及線上CSS檔案支援。

以FontAwesome字型為例。在Web字型設定中,點選【 】新增新的配置,勾選【連結到“.CSS”檔案】選項,將該字型官方網站提供的“.CSS”檔案地址填入超連結中即可。這樣只要瀏覽原型時有網路支援,即可正常顯示字型。

6-10

圖中為Fontawesome4.4.0字型的配置方法。該字型CSS檔案的官方連結地址為: https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css

方式二、@font-face(圖6-11)

優點:支援本地字型與線上字型

缺點:設定略有複雜

仍以FontAwesome字型為例。新建Web字型配置後,選擇【@font-face選項】並填寫程式碼。

線上字型程式碼如下:

font-family:FontAwesome;

src:url(\’http://7xl7jg.com1.z0.glb.clouddn.com/fontawesome-webfont.ttf\’) format(\’truetype\’);

本地字型程式碼如下:

font-family:FontAwesome;

src:url(\’fontawesome-webfont.ttf \’) format(\’truetype\’);

注意:使用本地字型需要將字型檔案(.ttf)拷貝到生成的HTML資料夾中。

6-11