Axure8.0基礎(chǔ)教程(51-56)之 新手必須掌握的基礎(chǔ)操作
發(fā)布時間:2022-03-18 10:31 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175 閱讀: 2132

本文目錄

基礎(chǔ)51.     生成部分原型頁面

基礎(chǔ)52.     為原型添加標(biāo)志

基礎(chǔ)53.     發(fā)布原型到AxShare

基礎(chǔ)54.     重新生成當(dāng)前頁面

基礎(chǔ)55.     移動設(shè)備設(shè)置

基礎(chǔ)56.     Web字體設(shè)置

正文

基礎(chǔ)51.   生成部分原型頁面

發(fā)布原型時,如果不需要將所有頁面生成或發(fā)布,可以在生成HTML的設(shè)置中打開【頁面】的設(shè)置,取消【生成所有頁面】的勾選,則可以設(shè)置生成指定的頁面。注意,子級頁面無法單獨(dú)發(fā)布,勾選子級頁面時會自動勾選父級頁面。如果需要單獨(dú)發(fā)布子級頁面,需要在頁面管理面板中將子級頁面的級別調(diào)整到一級頁面。(圖6-4)

6-4

基礎(chǔ)52.   為原型添加標(biāo)志

在生成HTML的設(shè)置中有【標(biāo)志】的設(shè)置,可以為原型添加圖片標(biāo)識或文字標(biāo)題。原型發(fā)布后會顯示在工具欄的頁面面板中。(圖6-5)

6-5

基礎(chǔ)53.   發(fā)布原型到AxShare

發(fā)布原型到AxShare是指將做好的原型發(fā)布到Axure官方提供的空間中,通過自動生成的網(wǎng)址進(jìn)行訪問。發(fā)布到AxShare的快捷鍵為鍵。發(fā)布到AxShare需要預(yù)先注冊AxureShare賬號,注冊地址:https://share.axure.com/。(圖6-6)

6-6

發(fā)布完成后,將會自動生成一個網(wǎng)址?梢酝ㄟ^在PC或手機(jī)瀏覽器中打開該網(wǎng)址查看原型。(圖6-7)

6-7

基礎(chǔ)54.   重新生成當(dāng)前頁面

修改某個頁面無需將整個原型HTML文件都重新生成一遍,只需要在【發(fā)布】的選項(xiàng)列表中,選擇【在HTML文件中重新生成當(dāng)前頁面】即可。(圖6-8)

6-8

基礎(chǔ)55.   移動設(shè)備設(shè)置

制作移動設(shè)備原型需要遵循規(guī)范將原型制作成標(biāo)準(zhǔn)尺寸。

除了制作成標(biāo)準(zhǔn)原型尺寸,還需要在生成HTML文件配置中,進(jìn)行【移動設(shè)備】的設(shè)置,讓生成的HTML文件【包含視口標(biāo)簽】,這樣才能夠正常顯示。(圖6-9)

6-9

基礎(chǔ)56.   Web字體設(shè)置

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

方式一、鏈接“.CSS”文件(圖6-10)

優(yōu)點(diǎn):設(shè)置簡單。

缺點(diǎn):需要網(wǎng)絡(luò)以及在線CSS文件支持。

以FontAwesome字體為例。在Web字體設(shè)置中,點(diǎn)擊【 】添加新的配置,勾選【鏈接到“.CSS”文件】選項(xiàng),將該字體官方網(wǎng)站提供的“.CSS”文件地址填入超鏈接中即可。這樣只要瀏覽原型時有網(wǎng)絡(luò)支持,即可正常顯示字體。

6-10

方式二、@font-face

優(yōu)點(diǎn):支持本地字體與在線字體

缺點(diǎn):設(shè)置略有復(fù)雜

仍以FontAwesome字體為例。新建Web字體配置后,選擇【@font-face選項(xiàng)】并填寫代碼。

在線字體代碼如下:

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

通過以上方式處理后,未安裝該字體的設(shè)備中查看原型時即可正常顯示字體。

注意:在Axure RP 8的元件庫中,提供了FontAwesome圖標(biāo)元件庫,該元件庫可以直接使用,無需進(jìn)行上述設(shè)置。但是,官方提供的FontAwesome圖標(biāo)元件庫與上述元件庫有很大區(qū)別,官方元件庫中的圖標(biāo)并不是文字,而是形狀。在之后的案例中,我們需要將一些圖標(biāo)字體放入文本編輯界面進(jìn)行編輯 ,這是官方元件無法做到的。

UI交互app及axure設(shè)計教程
我要自學(xué)網(wǎng)商城 ¥50 元
進(jìn)入購買
文章評論
0 條評論 按熱度排序 按時間排序 /350
添加表情
遵守中華人民共和國的各項(xiàng)道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設(shè)計 室內(nèi)設(shè)計 室外設(shè)計 機(jī)械設(shè)計 工業(yè)自動化 影視動畫 程序開發(fā) 網(wǎng)頁設(shè)計 會計課程 興趣成長 AIGC