Axure-RP-8-交互原型設(shè)計(jì)案例教程第14章

第14章發(fā)布交互原型AxureRP8交互原型設(shè)計(jì)案例教程（微課版）微課版執(zhí)行【發(fā)布】→【預(yù)覽】（【F5】）命令或者在樣式工具欄中單擊【預(yù)覽】按鈕，即可預(yù)覽當(dāng)前的原型文件。如果用戶電腦上安裝了多款網(wǎng)頁瀏覽器，則可以執(zhí)行【發(fā)布】→【預(yù)覽選項(xiàng)】（【Ctrl+F5】）命令，在打開的【預(yù)覽選項(xiàng)】對(duì)話框中選擇相應(yīng)的瀏覽器，如圖14-1所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.1預(yù)覽交互原型14.1.1本地預(yù)覽圖14-1選擇預(yù)覽的瀏覽器默認(rèn)狀態(tài)下，預(yù)覽原型時(shí)，網(wǎng)頁瀏覽器的左邊會(huì)自動(dòng)打開一個(gè)側(cè)邊欄，如圖14-2所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.1預(yù)覽交互原型14.1.1本地預(yù)覽圖14-2側(cè)邊欄如果想關(guān)閉側(cè)邊欄或者預(yù)覽網(wǎng)頁時(shí)最小化側(cè)邊欄，則可以在【預(yù)覽選項(xiàng)】對(duì)話框中設(shè)置，如圖14-3所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.1預(yù)覽交互原型14.1.1本地預(yù)覽圖14-3設(shè)置側(cè)邊欄要將自己設(shè)計(jì)的交互原型發(fā)布到AxureShare網(wǎng)站中，首先需要注冊一個(gè)賬號(hào)，否則會(huì)彈出【登錄】對(duì)話框，如圖14-4所示。如果你有自己的賬號(hào)，則可以直接登錄，如果沒有賬號(hào)，則可以通過該對(duì)話框創(chuàng)建一個(gè)賬號(hào)。或者可以在樣式工具欄中單擊右側(cè)的【登錄】按鈕登錄或者注冊賬號(hào)，如圖14-5所示。登錄成功后，樣式工具欄中會(huì)顯示你的用戶名，如圖14-6所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.1預(yù)覽交互原型14.1.2在線預(yù)覽圖14-4【登錄】對(duì)話框AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.1預(yù)覽交互原型14.1.1本地預(yù)覽圖14-5【登錄】對(duì)話框圖14-6顯示的用戶賬號(hào)現(xiàn)在可以執(zhí)行【發(fā)布】→【發(fā)布到AxureShare】（F6）命令或者在樣式工具欄中單擊【分享】按鈕進(jìn)行發(fā)布。在彈出的【發(fā)布到AxureShare】對(duì)話框中可以選擇“創(chuàng)建一個(gè)新項(xiàng)目”，然后輸入要發(fā)布項(xiàng)目的名稱、密碼和原型存放的文件夾，如圖14-7所示。單擊【發(fā)布】按鈕即可上傳當(dāng)前的原型文檔，發(fā)布成功后會(huì)彈出一個(gè)對(duì)話框，上面顯示原型發(fā)布到的地址，如圖14-8所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.1預(yù)覽交互原型14.1.1本地預(yù)覽AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.1預(yù)覽交互原型14.1.1本地預(yù)覽圖14-7設(shè)置【創(chuàng)建一個(gè)新項(xiàng)目】參數(shù)圖14-8成功發(fā)布原型后的提示單擊【復(fù)制】按鈕可復(fù)制預(yù)覽的網(wǎng)址給他人，只要電腦聯(lián)網(wǎng)，就能在任何地方看到你的杰作了。如果設(shè)置，訪問的密碼（在發(fā)布原型時(shí)，密碼是可選項(xiàng)），則在打開你的預(yù)覽網(wǎng)頁時(shí)會(huì)彈出要求輸入密碼的提示，如圖14-9所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.1預(yù)覽交互原型14.1.1本地預(yù)覽圖14-9輸入訪問密碼為了更好地學(xué)習(xí)如何生成說明書，先設(shè)計(jì)一個(gè)簡單的交互原型，通過設(shè)計(jì)該原型了解設(shè)計(jì)過程，更好地掌握生成說明書時(shí)各個(gè)參數(shù)的含義。（1）新建AxureRP文檔并創(chuàng)建多個(gè)頁面，分別命名各個(gè)頁面，如圖14-10所示。（2）雙擊“目錄”進(jìn)入該頁面編輯視圖中，在頂部位置添加一個(gè)矩形元件并輸入如圖14-11所示的文本。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.2生成交互原型說明書14.2.1設(shè)計(jì)一個(gè)交互原型AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.2生成交互原型說明書14.2.1設(shè)計(jì)一個(gè)交互原型圖14-10重命名頁面圖14-11創(chuàng)建矩形元件（3）右擊矩形元件，從彈出的快捷菜單中選擇【轉(zhuǎn)換為母版】，在彈出的對(duì)話框中將拖放行為設(shè)置為“固定位置”，將母版命名為“教材名稱”，如圖14-12所示。（4）選擇頁面中的母版元件，在右側(cè)的【說明】子面板中輸入圖14-13所示的文字。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.2生成交互原型說明書14.2.1設(shè)計(jì)一個(gè)交互原型AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.2生成交互原型說明書14.2.1設(shè)計(jì)一個(gè)交互原型圖14-12轉(zhuǎn)為母版設(shè)置圖14-13添加文字說明（5）使用鼠標(biāo)從【頁面】面板中將每個(gè)頁面拖到目錄頁面視圖中，頁面中會(huì)自動(dòng)生成帶有鏈接功能的矩形元件（即引用頁面），并且每個(gè)矩形元件上都自動(dòng)標(biāo)有對(duì)應(yīng)頁面的名稱，如圖14-14所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.2生成交互原型說明書14.2.1設(shè)計(jì)一個(gè)交互原型圖14-14生成引用頁面（6）給每個(gè)元件命名并使用與步驟（4）相同的方法，對(duì)頁面中的每個(gè)章節(jié)標(biāo)題添加說明文字，如圖14-15所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.2生成交互原型說明書14.2.1設(shè)計(jì)一個(gè)交互原型圖14-15給元件命名并添加文字說明（7）雙擊“第一章AxureRP基礎(chǔ)”頁面進(jìn)入其頁面編輯視圖，從【母版】面板中將“教材名稱”母版拖到頁面中，然后創(chuàng)建一個(gè)三級(jí)標(biāo)題元件并輸入“本章重點(diǎn)”字樣，使用與步驟（3）相同的方法將該元件轉(zhuǎn)為母版，如圖14-16所示。（8）同樣給該母版元件添加文字說明，如圖14-17所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.2生成交互原型說明書14.2.1設(shè)計(jì)一個(gè)交互原型AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.2生成交互原型說明書14.2.1設(shè)計(jì)一個(gè)交互原型圖14-16創(chuàng)建第二個(gè)母版元件圖14-17給母版添加文字說明（9）在頁面中添加一些重點(diǎn)內(nèi)容，給元件命名并添加說明文字，如圖14-18所示。（10）使用上面的方法對(duì)其他頁面也添加相應(yīng)的內(nèi)容并添加文字說明，在此略過，不再重復(fù)介紹，請(qǐng)讀者自行完成。（11）使用第14章所學(xué)的知識(shí)建立一個(gè)自適應(yīng)視圖，如圖14-19所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.2生成交互原型說明書14.2.1設(shè)計(jì)一個(gè)交互原型AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.2生成交互原型說明書14.2.1設(shè)計(jì)一個(gè)交互原型圖14-18添加的其他文字及說明圖14-19建立自適應(yīng)視圖生成Word說明書的方法是：執(zhí)行【發(fā)布】→【生成Word說明書】（【F9】）命令，打開如圖14-20所示的【生成Word說明書】對(duì)話框。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.2生成交互原型說明書14.2.2生成Word格式說明書圖14-20【生成Word說明書】對(duì)話框下面介紹【生成Word說明書】對(duì)話框中的參數(shù)。1.【常規(guī)】該參數(shù)可以指定保存Word文檔的位置。默認(rèn)生成的Word格式是.docx，需要使用Word2007或者以上版本打開，如果使用Word2003，則無法直接打開，需要安裝支持.docx格式的兼容包方可打開。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.2生成交互原型說明書14.2.2生成Word格式說明書2.【頁面】該參數(shù)主要用于設(shè)置AxureRP頁面中的哪些內(nèi)容出現(xiàn)在說明書中。（1）標(biāo)題部分。該選項(xiàng)用于控制是否在說明書中顯示說明書的標(biāo)題，內(nèi)容可以自定義，默認(rèn)標(biāo)題內(nèi)容是“頁面”，如果不選擇該項(xiàng)，則在生成說明時(shí)不會(huì)出現(xiàn)該項(xiàng)內(nèi)容。（2）包含站點(diǎn)地圖列表。該項(xiàng)控制頁面面板中的頁面結(jié)構(gòu)圖是否顯示在說明書中，默認(rèn)是顯示的，如果不選擇該項(xiàng)，則生成的說明書中不會(huì)出現(xiàn)這些內(nèi)容。（3）生成所有頁面。選擇該項(xiàng)，可以將【頁面】面板中的所有頁面都包含在說明書中，如果不勾選該項(xiàng)，則可以從下面的列表中選擇要生成說明書的頁面。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.2生成交互原型說明書14.2.2生成Word格式說明書3.【母版】該參數(shù)與前面的【頁面】設(shè)置基本類似，只是它專門控制AxureRP的【母版】面板中的相關(guān)母版是否出現(xiàn)在說明書中。默認(rèn)狀態(tài)下，【母版】面板中的所有內(nèi)容都出現(xiàn)在說明書中。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.2生成交互原型說明書14.2.2生成Word格式說明書在【母版】選項(xiàng)界面的下方還有幾個(gè)參數(shù)，其作用分別如下。（1）只包含生成頁面使用的母版。（2）不生成類型為脫離的母版。（3）頁面部分中記錄母版：要看出該選項(xiàng)的作用，首先雙擊【母版】面板中的母版元件進(jìn)入母版編輯頁面，選擇母版包含的元件，如母版中帶文本的矩形元件，然后給該矩形命名并添加用例，如圖14-21所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.2生成交互原型說明書14.2.2生成Word格式說明書AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.2生成交互原型說明書14.2.2生成Word格式說明書圖14-21給母版中的矩形命名并添加用例然后對(duì)選中的元件添加文字說明，如圖14-22所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.2生成交互原型說明書14.2.2生成Word格式說明書圖14-22給母版中的矩形添加說明接下來取消元件的選擇狀態(tài)并在【說明】子面板中輸入針對(duì)頁的說明文字，如圖14-23所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.2生成交互原型說明書14.2.2生成Word格式說明書圖14-23給母版中的矩形所在的頁面添加說明以上設(shè)置完成后，在生成Word說明時(shí)，如果不勾選“頁面部分中記錄母版”選項(xiàng)，則在頁面部分的元件表中顯示的內(nèi)容如圖14-24所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.2生成交互原型說明書14.2.2生成Word格式說明書圖14-24未選擇“頁面部分中記錄母版”選項(xiàng)時(shí)的元件表如果如果不勾選“頁面部分中記錄母版”選項(xiàng)，則在頁面部分的元件表中顯示的內(nèi)容如圖14-25所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.2生成交互原型說明書14.2.2生成Word格式說明書圖14-25選擇“頁面部分中記錄母版”選項(xiàng)時(shí)的元件表注意在勾選“頁面部分中記錄母版”選項(xiàng)后，頁面中的快照右上角的藍(lán)色腳注圖標(biāo)上會(huì)出現(xiàn)一個(gè)“A”，如圖14-26所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.2生成交互原型說明書14.2.2生成Word格式說明書圖14-26選擇“頁面部分中記錄母版”選項(xiàng)時(shí)導(dǎo)致腳注圖標(biāo)變化（4）只在首次使用時(shí)記錄：如果同一個(gè)母版在多個(gè)頁面中使用，則勾選該項(xiàng)后，只在使用該母版的第一個(gè)頁面的元件表中出現(xiàn)對(duì)該母版的記錄，其余頁面中雖然也可能用到了該母版，但元件表中不會(huì)記錄該母版的信息。（5）不包含母版說明：首先需要弄清楚的是：此處所說的母版說明是指進(jìn)入母版編輯狀態(tài)的頁面說明，并非是指母版所在頁面的說明。如果不勾選該項(xiàng)，則在生成的Word說明書的相關(guān)頁面中會(huì)出現(xiàn)對(duì)母版的說明文字，如圖14-27所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.2生成交互原型說明書14.2.2生成Word格式說明書AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.2生成交互原型說明書14.2.2生成Word格式說明書圖14-27頁面中出現(xiàn)的母版說明如果勾選“不包含母版說明”選項(xiàng)，則在生成的Word說明書的相關(guān)頁面中不會(huì)出現(xiàn)對(duì)母版的說明文字，如圖14-28所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.2生成交互原型說明書14.2.2生成Word格式說明書圖14-28頁面中未出現(xiàn)母版說明文字4.【頁面屬性】該選項(xiàng)主要控制在Word說明書中要顯示的與頁面相關(guān)的屬性信息。（1）包含頁面說明：選擇該選項(xiàng)，在【說明】子面板中輸入的說明文字和自定義字段后輸入的說明文字會(huì)顯示在Word說明書中。圖14-29所示是在【說明】子面板中輸入的頁面說明文字。生成Word說明書后，在頁面中會(huì)顯示對(duì)應(yīng)的頁面說明文字，如圖14-30所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.2生成交互原型說明書14.2.2生成Word格式說明書AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.2生成交互原型說明書14.2.2生成Word格式說明書圖14-29頁面說明文字圖14-30說明書中顯示的頁面說明文字如果不選擇“包含頁面說明”選項(xiàng)，則生成Word說明后，在頁面中不會(huì)出現(xiàn)這些頁面說明文字，如圖14-31所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.2生成交互原型說明書14.2.2生成Word格式說明書圖14-31說明書中未顯示頁面說明文字5.【快照】（1）包含快照：勾選該項(xiàng)，則生成的Word說明書中會(huì)包含AxureRP原型中每個(gè)頁面的快照。（2）快照標(biāo)題：為生成的屏幕快照命名，默認(rèn)名稱為“用戶界面”。（3）快照中顯示腳注：勾選該選項(xiàng)，則生成Word說明書之后，在原型的快照?qǐng)D片上會(huì)顯示腳注標(biāo)號(hào)，如果不選該項(xiàng)，則快照中不會(huì)顯示腳注標(biāo)號(hào)。（4）顯示快照邊框：勾選該項(xiàng)，則說明書中的快照會(huì)顯示一個(gè)黑色邊框。（5）腳注不隨快照縮放：如果不選擇該項(xiàng)，則當(dāng)輸出的Word說明書使用較大的頁面版面（如A3紙等）時(shí)，腳注編號(hào)會(huì)變大一些，當(dāng)輸出的說明書使用較小的頁面版面（如32開等）時(shí)，腳注編號(hào)會(huì)變小一些。如果勾選“腳注不隨快照縮放”選項(xiàng)，則無論輸出的說明書使用多大的尺寸，藍(lán)色腳注都保持固定的尺寸。（6）應(yīng)用默認(rèn)頁面載入時(shí)和元件載入時(shí)用例：如果使用了頁面的【頁面載入時(shí)】事件和元件的【載入時(shí)】事件，勾選該選項(xiàng)后，在生成的Word說明書中會(huì)顯示載入的效果。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.2生成交互原型說明書14.2.2生成Word格式說明書（7）包含子菜單：如果在原型中使用了AxureRP自帶的經(jīng)典菜單元件，那么選擇“包含子菜單”選項(xiàng)會(huì)生成展開菜單的快照。如果不選擇“包含子菜單”選項(xiàng)，則不會(huì)在快照中顯示展開的菜單內(nèi)容。（8）包含展開的樹狀菜單：如果在原型中使用了AxureRP自帶的樹狀菜單元件，那么選擇“包含展開的樹狀菜單”選項(xiàng)會(huì)生成展開樹狀菜單的快照。如果不選擇“包含展開的樹狀菜單”選項(xiàng)，則不會(huì)在快照中顯示展開的樹狀菜單內(nèi)容。（9）在內(nèi)聯(lián)框架中顯示默認(rèn)頁面：如果RP頁面中應(yīng)用了內(nèi)聯(lián)框架且內(nèi)聯(lián)框架引用了頁面或者指定了鏈接內(nèi)容，則勾選該項(xiàng)后會(huì)在說明書中顯示框架中的內(nèi)容。（10）不使用背景樣式：如果在原型中使用頁面的【樣式】子面板中的參數(shù)設(shè)置了頁面背景樣式（如設(shè)置了背景色或者背景圖案等），則勾選此項(xiàng)后，在Word說明書中不會(huì)出現(xiàn)設(shè)置的背景。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.2生成交互原型說明書14.2.2生成Word格式說明書6.【自適應(yīng)視圖】該欄參數(shù)可以控制在生成的Word說明書中哪些自適應(yīng)視圖生成快照，默認(rèn)狀態(tài)下，程序?qū)⑸伤凶赃m應(yīng)視圖的快照?？梢詮牧斜碇凶远x要生成快照的自適應(yīng)視圖。7.【元件表】該欄參數(shù)提供了許多配置功能，可以管理Word說明書中包含的元件說明信息。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.2生成交互原型說明書14.2.2生成Word格式說明書8.【布局】設(shè)置該欄中的參數(shù)可以將生成的說明書分成單列顯示成雙列顯示，默認(rèn)狀態(tài)下生成的說明書單列顯示。9.【W(wǎng)ord母版】設(shè)置該欄中的參數(shù)，可以編輯、導(dǎo)入和創(chuàng)建新的Word母版，而且可以將Word中的樣式與AxureRP中的樣式一一對(duì)應(yīng)。如果要編輯當(dāng)前使用的Word母版，則可以單擊“編輯”鏈接，啟動(dòng)Word程序，可以根據(jù)需要設(shè)置Word母版的內(nèi)容，例如，可以輸入中文的內(nèi)容，將原來的英文替換掉或者改變Word文檔的大小等，設(shè)置完成后保存Word母版即可。如果還有其他的Word母版，則可以單擊“導(dǎo)入”鏈接將其導(dǎo)入進(jìn)來，這樣在生成Word說明書時(shí)會(huì)采用新導(dǎo)入的母版。如果要新建一個(gè)Word母版，則可以單擊“新建模板”鏈接。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.2生成交互原型說明書14.2.2生成Word格式說明書AxureRP在本地輸出網(wǎng)頁文件方法是：執(zhí)行【發(fā)布】→【生成HTML文件】（F8）命令或者在樣式工具欄中單擊【HTML】按鈕，打開如圖14-32所示的【生成HTML】對(duì)話框。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-32【生成HTML】對(duì)話框1.【常規(guī)】該欄參數(shù)主要指定HTML文件存放的位置以及使用哪個(gè)瀏覽器預(yù)覽網(wǎng)頁。2.【自適應(yīng)視圖】該欄參數(shù)可指定在網(wǎng)頁中顯示哪些自適應(yīng)視圖，默認(rèn)狀態(tài)下，將在網(wǎng)頁中輸出所有設(shè)置的自適應(yīng)視圖。3.【頁面】該欄參數(shù)可以指定在網(wǎng)頁中包含原型的哪些頁面，默認(rèn)狀態(tài)下，將在網(wǎng)頁中包含原型中的全部頁面。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地4.【頁面說明】該欄參數(shù)可以指定在網(wǎng)頁中包含哪些頁面說明的內(nèi)容，默認(rèn)狀態(tài)下，將在網(wǎng)頁中包含原型頁面中添加的全部說明。顯示頁面說明名稱：頁面說明是指在頁面的【說明】子面板中添加的頁面說明文字，頁面說明名稱則是指如圖14-33所示的圈紅的名稱。選擇“顯示頁面說明名稱”選項(xiàng)，則在生成的網(wǎng)頁文件中的側(cè)邊欄就會(huì)列出這些名字，如圖14-34所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-33頁面說明名稱圖14-34側(cè)邊欄中的頁面說明名稱5.【元件說明】該欄參數(shù)主要用于設(shè)置在網(wǎng)頁中的元件說明選項(xiàng)。默認(rèn)狀態(tài)下，網(wǎng)頁中包含原型中的所有元件說明內(nèi)容。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地6.【交互】該欄中的參數(shù)可以控制原型中的交互在網(wǎng)頁中的顯示方式，參數(shù)如圖14-35所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-35交互參數(shù)欄（1）包含控制臺(tái)：勾選該項(xiàng)，在生成的網(wǎng)頁后，瀏覽器的側(cè)邊欄會(huì)顯示CONSOLE（控制臺(tái)）項(xiàng)，在該項(xiàng)中，可以顯示頁面中的交互內(nèi)容，如圖14-36所示。如果不勾選“包含控制臺(tái)”選項(xiàng)，則網(wǎng)頁瀏覽器中不會(huì)出現(xiàn)CONSOLE（控制臺(tái)）項(xiàng)，如圖14-37所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-36側(cè)邊欄顯示控制臺(tái)圖14-37側(cè)邊欄不顯示控制臺(tái)（2）用例行為：該欄參數(shù)主要控制在瀏覽器中是否顯示用例名稱。例如，對(duì)一個(gè)元件添加了兩個(gè)用例，如圖14-38所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-38一個(gè)元件添加兩個(gè)用例始終顯示用例名稱：無論元件中的事件添加了多少個(gè)用例，在瀏覽器中預(yù)覽網(wǎng)頁時(shí)，當(dāng)鼠標(biāo)和元件進(jìn)行交互時(shí)，都將彈出針對(duì)該元件事件的用例，如圖14-39所示。只在同一事件包含多個(gè)用例時(shí)顯示用例名稱：勾選該項(xiàng)后，如果在同一個(gè)元件中的同一個(gè)事件中添加了多個(gè)用例，則使用鼠標(biāo)和該元件交互時(shí)會(huì)彈出這些用例名稱，如果在一個(gè)事件中只包含了一個(gè)用例，則不會(huì)彈出用例名稱，如圖14-40所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-39一個(gè)元件添加兩個(gè)用例圖14-40一個(gè)元件添加兩個(gè)用例（3）元件引用頁：該欄中的兩個(gè)參數(shù)可對(duì)引用頁進(jìn)行控制。生成引用頁最簡單的方法就是從【頁面】面板中將某個(gè)頁面圖標(biāo)拖曳到頁面中，默認(rèn)狀態(tài)下，生成引用頁的元件是矩形，如圖14-41所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-41生成引用頁點(diǎn)擊元件時(shí)打開引用頁：勾選該項(xiàng)時(shí)，在網(wǎng)頁瀏覽器中單擊某個(gè)元件，如果該元件使用了引用頁，則會(huì)打開引用的頁面，如圖14-42所示。如果不勾選該項(xiàng)，則單擊元件時(shí)不會(huì)打開引用頁，如圖14-43所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-42單擊按鈕會(huì)打開引用頁圖14-43單擊按鈕不會(huì)打開引用頁7.【標(biāo)志】可在瀏覽器側(cè)邊欄中設(shè)置要顯示的標(biāo)志圖像和標(biāo)題文字。標(biāo)志：勾選該選項(xiàng)，可以在網(wǎng)頁的側(cè)邊欄上顯示指定的標(biāo)志，單擊【導(dǎo)入】按鈕可以指定什么樣的圖像作為標(biāo)志，單擊【清除】按鈕可以清除導(dǎo)入的標(biāo)志。標(biāo)題：勾選該選項(xiàng)，可以在下方的文本框中輸入作為標(biāo)題的文本。預(yù)覽網(wǎng)頁時(shí)，導(dǎo)入的標(biāo)志圖像和輸入的標(biāo)題文本將出現(xiàn)在網(wǎng)頁側(cè)邊欄標(biāo)志圖像的下方。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地8.【W(wǎng)eb字體】所謂Web字體，就是把放在網(wǎng)絡(luò)上的一個(gè)字體文件嵌入當(dāng)前網(wǎng)頁上，客戶端瀏覽該網(wǎng)頁時(shí)，字體顯示效果就像本機(jī)安裝的效果一樣。使用這種方法可以讓在互聯(lián)網(wǎng)中顯示的網(wǎng)頁文件正確地顯示比較特殊的字體，而無需將特殊字體設(shè)置成圖片格式。Web字體欄參數(shù)如圖14-44所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-44Web字體參數(shù)下面學(xué)習(xí)如何設(shè)置CSS字體文件。首先在AxureRP中為一段文本指定一款比較特殊字體，如“漢儀秀英體簡”，該款字體效果如圖14-45所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-45在AxureRP中指定特殊字體現(xiàn)在只需要輸入文本，無需關(guān)注使用了什么字體，當(dāng)然，默認(rèn)狀態(tài)下，AxureRP會(huì)使用Arial字體，如圖14-46所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-46在AxureRP中輸入文本單擊【使用】按鈕，彈出一個(gè)新的界面，在該界面中單擊“CSS模式”，然后在下方輸入要使用秀英體的文本，如圖14-48所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-47搜索到的字體圖14-48在CSS模式中輸入文本輸入完畢后，單擊下方的【生成】按鈕，即可生成相關(guān)代碼，從代碼中可以看到CSS文件所在的目錄位置，如圖14-49所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-49生成的代碼中包含CSS文件路徑位置圖14-49中顯示的CSS文件的代碼位置如下。///webfonts/nomal/93323/19496/58094329f629e111d4747f4e.css將該代碼復(fù)制到網(wǎng)頁瀏覽器中瀏覽可以看到CSS代碼完整的內(nèi)容，這就是我們需要的CSS文件，如圖14-50所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-50CSS代碼內(nèi)容另外，還要注意現(xiàn)在網(wǎng)頁瀏覽器地址欄中的地址在我們復(fù)制的地址前面自動(dòng)添加了“http:”，如圖14-51所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-51自動(dòng)添加的“http:”從CSS代碼中可以看到，Web字體名稱是“minijianxiuying68957a0dc16c8b”，如圖14-52所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-52Web字體的名稱雖然該字體的名稱過長，不便于記憶，但是只能使用這個(gè)名稱，無法更改?，F(xiàn)在需要將該字體名稱復(fù)制下來，然后在AxureRP中選擇輸入的文字并將復(fù)制的字體名稱粘貼到樣式工具欄的字體下拉列表框中，再按回車鍵確認(rèn)，如圖14-53所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-53給文本指定字體按【F8】鍵打開【生成HTML】對(duì)話框，在【W(wǎng)eb字體】欄中新建一個(gè)Web字體并將其命名為“minijianxiuying68957a0dc16c8b”，這個(gè)名稱必須和CSS代碼中的字體名稱一致，然后選擇“鏈接到CSS文件”選項(xiàng)，并將CSS代碼的完整網(wǎng)址從網(wǎng)頁瀏覽器地址欄復(fù)制到URL文本框中，如圖14-54所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-54Web字體參數(shù)設(shè)置設(shè)置完成后，單擊“生成”按鈕，可以在本地預(yù)覽網(wǎng)頁原型文件，無論你的電腦中是否安裝秀英字體，打開網(wǎng)頁瀏覽器后都能看到真實(shí)的秀英字體效果，如圖14-55所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-55在本地預(yù)覽字體效果也可以將這個(gè)網(wǎng)頁原型文件發(fā)布到AxureShare進(jìn)行在線預(yù)覽，同樣會(huì)顯示真實(shí)的秀英字體效果，如圖14-56所示。@font-face：選擇該選項(xiàng)，可以將互聯(lián)網(wǎng)中的CSS代碼復(fù)制過來或者輸入自定義的CSS代碼。例如，可以將圖14-50中的CSS代碼內(nèi)容復(fù)制過來，和前面的URL設(shè)置一樣，需要在每個(gè)“//”前面添加“http:”，如圖14-57所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-56在AxureShare中預(yù)覽字體效果圖14-57搜索到的字體按【F5】鍵預(yù)覽即可看到秀英字體的真實(shí)效果。除了使用其他Web字體網(wǎng)站的CSS代碼外，還可以將特殊字體復(fù)制到網(wǎng)頁輸出文件夾中，然后自己編寫CSS文件或者代碼，以顯示正確的特殊字體，當(dāng)需要在其他電腦上預(yù)覽網(wǎng)頁原型時(shí)，只需要將整個(gè)網(wǎng)頁文件夾一起復(fù)制過去，而無需再安裝這些字體，即可顯示正確的字體效果。如果要將CSS字體文件放在本地的網(wǎng)頁文件夾中，則需要進(jìn)行下面的操作：首先在【樣式工具欄】中給輸入的文本指定一個(gè)字體名稱，如輸入“xiuying”，如圖14-58所示。將使用的后綴為TTF的字體也命名為“xiuying”，然后將其放在網(wǎng)頁文件原型所在的文件夾中，如圖14-59所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-58自定義字體名稱圖14-59將命名的字體復(fù)制到網(wǎng)頁文件夾中打開記事本程序并輸入如圖14-60所示的代碼。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-60自定義代碼將編輯好的記事本文件另存為“xiuying.css”，注意在保存類型中選擇“所有文件”，如圖14-61所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-61保存為CSS文件將保存的“xiuying.css”文件存放到網(wǎng)頁原型文件夾的根目錄中，使其位置與CSS文件中的URL路徑位置一致，如圖14-62所示。按【F8】鍵打開【生成HTML】對(duì)話框，在【常規(guī)】欄中將HTML文件存放到網(wǎng)頁原型文件夾中，如圖14-63所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-62保存的自定義CSS文件圖14-63指定網(wǎng)頁輸出位置在【W(wǎng)eb字體】欄中新建一個(gè)Web字體并將其命名為“xiuying”，這個(gè)名稱必須和命名的字體名稱一致，然后選擇“鏈接到CSS文件”選項(xiàng)，在URL文本框中輸入“xiuying.css”，如圖14-64所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-64設(shè)置Web字體單擊【生成】按鈕，即可輸出HTML文件，在網(wǎng)頁原型文件夾Web中可以看到輸出的網(wǎng)頁文件、文件夾以及在前面步驟中復(fù)制的字體和自定義的CSS文件，如圖14-65所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-65網(wǎng)頁文件夾中的文件現(xiàn)在如果沒有自動(dòng)打開瀏覽器預(yù)覽網(wǎng)頁效果，則可以雙擊網(wǎng)頁文件夾中的“start.html”進(jìn)行預(yù)覽，預(yù)覽效果如圖14-66所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-66預(yù)覽的字體效果又該如何設(shè)置URL呢？下面首先在網(wǎng)頁原型文件Web中建立一個(gè)“css”子文件夾并將“xiuying.css”文件移動(dòng)到該子文件夾中，如圖14-67所示。對(duì)此，只需要修改兩項(xiàng)即可解決這個(gè)問題：一項(xiàng)是修改CSS文件代碼中的URL，另一項(xiàng)是修改Web字體URL路徑。打開“css”子文件夾中的“xiuying.css”文件，在url后面的括弧中將原來的“xiuying.ttf”改為“../xiuying.ttf”，如圖14-68所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-67將CSS文件放在子文件夾中圖14-68在CSS代碼中修改URL“../xiuying.ttf”表示“xiuying.ttf”文件位于上一級(jí)目錄中，情況的確如此，“xiuying.ttf”字體文件就是在css文件的上一級(jí)目錄中。在【生成HTML】對(duì)話框中，將URL由原來的“xiuying.css”也改為“css/xiuying.css”，如圖14-69所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-69重新制定URL路徑通過上面的修改，現(xiàn)在可以預(yù)覽網(wǎng)頁文件了，預(yù)覽效果同前面一樣。當(dāng)然，也可以選擇“@font-face”選項(xiàng)，在下面輸入CSS代碼。仍用上面練習(xí)的RP文件為例進(jìn)行操作。在網(wǎng)頁輸出文件夾Web中，將創(chuàng)建的“xiuying.css”文件刪除，按【F8】鍵，在打開的【生成HTML】對(duì)話框中選擇Web字體欄中的“@font-face”，然后將圖14-70所示的CSS代碼輸入文本框中即可。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-70在Web字體欄中輸入的自定義CSS代碼單擊【生成】按鈕，可以預(yù)覽與前面相同的文字結(jié)果，如圖14-71所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-71預(yù)覽網(wǎng)頁9.【字體映射】字體映射是指將原型中使用的一些字體替換成Web字體。例如，在原型中使用了“宋體”“黑體”，又定義了Web字體“ABC”，則通過字體映射功能可以將“宋體”和“黑體”全部映射為“ABC”，預(yù)覽時(shí)，原型中使用“宋體”和“黑體”的文字全部變成“ABC”字體。下面舉例說明字體映射的使用方法。在AxureRP頁面中創(chuàng)建三行文本，第一行使用默認(rèn)的字體設(shè)置，第二行使用“黑體”，第三行使用“宋體”，如圖14-72所示。使用本節(jié)前面講到的方法，在有字庫網(wǎng)站中搜索“秀英”字體，然后在其CSS欄中輸入上面的文本，如圖14-73所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-72在AxureRP中輸入的文本圖14-73在有字庫網(wǎng)站中輸入對(duì)應(yīng)的文本單擊【生成】按鈕，即可獲得CSS文件路徑，將該路徑復(fù)制到瀏覽器地址欄瀏覽該文件，如圖14-74所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-74瀏覽CSS文件接下來使用本節(jié)前面講到的方法先定義一個(gè)Web字體，根據(jù)剛才生成的CSS代碼可知，Web字體的名稱是“minijianxiuying68f589d7d16c8b”，同時(shí)要注意URL后面要添加“http:”，如圖14-75所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-75自定義Web字體此時(shí)單擊【生成】按鈕預(yù)覽網(wǎng)頁，則網(wǎng)頁中的字體和AxureRP中顯示的一樣，如圖14-76所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-76預(yù)覽網(wǎng)頁的文字最后，設(shè)置字體映射將三行不同字體全部變成同一種字體效果。按【F8】鍵，打開【生成HTML】對(duì)話框，在【字體映射】欄中單擊三次按鈕，添加三個(gè)字體映射，選擇每個(gè)字體映射，在字體中分別選擇默認(rèn)的Arial、黑體、楷體，然后在font-family中將Web字體的名稱復(fù)制過來，如圖14-77所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-77字體映射設(shè)置單擊【生成】按鈕，即可生成HTML文件并進(jìn)行預(yù)覽?，F(xiàn)在三行文本已經(jīng)全部變成了相同的秀英字體效果，如圖14-78所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-78字體映射效果選擇特定字體：只有勾選該項(xiàng)后，下面的三個(gè)參數(shù)才有效，但要注意該選項(xiàng)主要對(duì)英文字體有效，對(duì)中文支持效果不夠理想。在AxureRP中通過字體類型選項(xiàng)設(shè)置的文本效果（如斜體、粗體、粗黑等）無法真實(shí)地在網(wǎng)頁中顯示出來，如圖14-79所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-79Axure中的文本與瀏覽器中的文本顯示不一致字體類型：可選擇normal（正常）、italic（斜體）、oblique（傾斜）oblique等，這些選項(xiàng)就是樣式工具欄字體右側(cè)的類型選項(xiàng)，如圖14-80所示。font-weight：可設(shè)置的參數(shù)有normal（正常）、bold（加粗）等，或者輸入數(shù)值。font-style：可設(shè)置的參數(shù)有normal（正常）、italic（斜體）、oblique（傾斜）等。例如，在AxureRP中設(shè)置了“Arial字體”，字體類型為“Negretacursiva”，如圖14-81所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-80字體類型選項(xiàng)圖14-81AxureRP中設(shè)置的字體和字體類型在【字體映射】欄中新建一個(gè)字體映射，字體選擇“Arial”，在font-family文本框中輸入Web字體“ABC”，勾選“選擇特定字體”選項(xiàng)，在【字體類型】下拉列表中選擇“Negretacursiva”，在font-weight文本框中輸入“Bold”（加粗），在font-style文本框中輸入“Oblique”，如圖14-82所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-82特定字體設(shè)置10.【高級(jí)】該欄參數(shù)主要設(shè)置字體單位轉(zhuǎn)換以及是否在網(wǎng)頁文件中應(yīng)用草圖設(shè)置。字號(hào)以磅為單位代替像素：選擇該項(xiàng)，HTML文件中的字號(hào)將以“磅”為單位取代以默認(rèn)的以“像素”為單位來衡量字號(hào)大小。由于默認(rèn)狀態(tài)下，AxureRP將項(xiàng)目的DPI設(shè)置為72，對(duì)于Mac顯示器而言，是否勾選“字號(hào)以磅為單位代替像素”選項(xiàng)來輸出HTML文件，對(duì)字號(hào)大小并無影響；但勾選該項(xiàng)后，輸出的HTML文件放在PC顯示器上觀看，顯示的字號(hào)要比在AxureRP中顯示的字號(hào)大一些，如圖14-83所示?？梢詧?zhí)行【項(xiàng)目】→【項(xiàng)目設(shè)置】命令改變項(xiàng)目DPI的默認(rèn)設(shè)置，如圖14-84所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-83在PC顯示器中改變字號(hào)單位對(duì)輸出結(jié)果的影響圖14-84設(shè)置項(xiàng)目的DPI如果將項(xiàng)目DPI設(shè)置為96，那么對(duì)于PC顯示器而言，是否勾選“字號(hào)以磅為單位代替像素”選項(xiàng)，對(duì)輸出的字號(hào)而言也沒有影響，如圖14-85所示。但是如果是通過Mac顯示器顯示HTML文件，則顯示的字號(hào)要比AxureRP中的小一些。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-85PC顯示器顯示的HTML字號(hào)大小相同如果將項(xiàng)目DPI設(shè)置為120，那么無論對(duì)于PC顯示器，還是Mac顯示器而言，勾選“字號(hào)以磅為單位代替像素”選項(xiàng)輸出后的HTML文件，其字號(hào)都比在AxureRP中顯示的小一些，只是Mac顯示器顯示的字號(hào)會(huì)更小，如圖14-86所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-86項(xiàng)目DPI影響字號(hào)尺寸11.【討論】該選項(xiàng)欄主要用于在發(fā)布的HTML原型中添加討論版塊，讓更多的用戶發(fā)表對(duì)原型的看法以及其他問題等，該欄參數(shù)不多，如圖14-87所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-87【討論】選項(xiàng)欄包含討論：在聯(lián)網(wǎng)的前提下，勾選該選項(xiàng)并設(shè)置了正確的項(xiàng)目ID后，生成的HTML文件會(huì)在側(cè)邊欄中出現(xiàn)一個(gè)“DISCUSS”版塊，如圖14-88所示。項(xiàng)目ID：該參數(shù)需要登錄網(wǎng)站獲取，單擊上面的“訪問share.獲取新的ID”藍(lán)色鏈接文字，即可登錄AxureShare網(wǎng)站。如果有一個(gè)賬號(hào)，則在“LOGIN”標(biāo)簽中輸入郵箱和密碼登錄即可；如果沒有賬號(hào)，則在“SIGNUP”標(biāo)簽中注冊一個(gè)新賬號(hào)，如圖14-89所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-88HTML側(cè)邊欄添加的討論版塊圖14-89登錄和注冊賬號(hào)界面成功登錄后，雙擊項(xiàng)目文件夾打開文件夾中的項(xiàng)目，即可看到每個(gè)RP文件對(duì)應(yīng)的ID，如圖14-90所示。如果只是注冊了賬戶，但沒有上傳過RP原型文件，則可以單擊上面的“NewProject”（新建項(xiàng)目）按鈕，在彈出的窗口中輸入項(xiàng)目名稱和密碼，密碼是可選的，但最好對(duì)項(xiàng)目添加密碼，這里添加密碼“123456”，如圖14-91所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-90查看ID圖14-91創(chuàng)建新的項(xiàng)目界面單擊【Create】（【創(chuàng)建】）按鈕可以創(chuàng)建一個(gè)新項(xiàng)目，而且列出了項(xiàng)目ID，這是因?yàn)轫?xiàng)目中還沒有上傳RP原型文件，所以URL一欄是空的，如圖14-92所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-92創(chuàng)建新的項(xiàng)目列表復(fù)制新建項(xiàng)目的ID，然后返回AxureRP，在【生成HTML】對(duì)話框的【討論】欄中粘貼復(fù)制過來的項(xiàng)目ID，如圖14-93所示。確保在“常規(guī)”欄中設(shè)置了使用帶側(cè)邊欄的瀏覽器打開網(wǎng)頁預(yù)覽，然后單擊下方的【生成】按鈕，稍等片刻后，在瀏覽器的側(cè)邊欄中出現(xiàn)一個(gè)輸入密碼的提示框，如圖14-94所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-93粘貼項(xiàng)目ID圖14-94彈出的輸入密碼提示框如果不輸入密碼，則也可以單擊下面的紫色文字鏈接，這樣打開的網(wǎng)頁不會(huì)帶討論區(qū)，輸入密碼“123456”，然后單擊【OK】按鈕。如果使用的是火狐瀏覽器，則還會(huì)顯示一個(gè)是否記住密碼的提示框，如圖14-95所示。選擇記住密碼就無需每次訪問該網(wǎng)頁時(shí)都要輸入密碼，但不在自己的電腦上瀏覽網(wǎng)頁時(shí)，最好不要單擊【記住】按鈕，可單擊右上角的【×】按鈕不讓程序記住密碼，現(xiàn)在在瀏覽器的側(cè)邊欄出現(xiàn)了討論版塊“DISCUSS”，如圖14-96所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-95是否記住密碼提示框圖14-96側(cè)邊欄的討論版塊如果聯(lián)網(wǎng)的話，在本地生成HTML網(wǎng)頁的同時(shí)，該RP原型文件也上傳到了AxureShare中，如圖14-97所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-97側(cè)邊欄的討論版塊執(zhí)行【發(fā)布】→【更多生成器和配置文件】命令，打開【管理配置文件】對(duì)話框，編輯或者建立自己需要的HTML配置文件，默認(rèn)狀態(tài)下，程序只包含一個(gè)HTML配置文件，如圖14-98所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-98默認(rèn)的HTML配置文件雙擊默認(rèn)的HTML配置名稱，可打開【生成HTML】對(duì)話框?qū)ζ溥M(jìn)行編輯，【生成HTML】對(duì)話框中的各項(xiàng)參數(shù)設(shè)置請(qǐng)參閱前面的講解。也可以在【管理配置文件】對(duì)話框上面的“添加”下拉列表中選擇“HTML”，添加一個(gè)新的HTML配置，如圖14-99所示。使用此方法，可以創(chuàng)建多個(gè)HTML配置。同樣可以雙擊新建的HTML配置對(duì)其進(jìn)行修改和編輯。選擇一個(gè)HTML配置并單擊上面的【設(shè)為默認(rèn)】按鈕，可將其設(shè)置為默認(rèn)的配置文件，如圖14-100所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-99添加新的HTML配置圖14-100設(shè)置默認(rèn)的HTML配置現(xiàn)在再按【F8】鍵輸出HTML文件時(shí)，在打開的對(duì)話框標(biāo)題欄上會(huì)顯示指定的默認(rèn)HTML配置名稱，如圖14-101所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.1將原型發(fā)布到本地圖14-101設(shè)置默認(rèn)的HTML配置設(shè)置完成HTML配置后關(guān)閉窗口，然后執(zhí)行【發(fā)布】→【發(fā)布到AxureShare】（【F6】）命令或者在樣式工具欄右側(cè)單擊按鈕，即可打開如圖14-102所示的對(duì)話框，如果有AxureShare賬號(hào)，則可以直接登錄，如果沒有賬號(hào)，則可以使用前面所學(xué)的方法在AxureShare注冊一個(gè)賬號(hào)并登錄，然后從【配置】下拉列表中選擇合適的配置文件或者單擊最右側(cè)的“編輯”鏈接對(duì)配置文件進(jìn)行編輯。有兩種選擇可以將RP原型發(fā)布到AxureShare。一種是創(chuàng)建一個(gè)新項(xiàng)目，需要輸入項(xiàng)目名稱，密碼和文件夾可選，然后單擊下方的【發(fā)布】按鈕，即可將RP原型文件上傳，上傳成功后會(huì)顯示圖14-103所示的提示信息。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.2將原型發(fā)布到AxureShareAxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.2將原型發(fā)布到AxureShare圖14-102【發(fā)布到AxureShare】對(duì)話框圖14-103發(fā)布成功提示另一種方式是用當(dāng)前的RP原型文件替代AxureShare中指定的原型文件，如果你記得某個(gè)項(xiàng)目的ID，則可以直接輸入項(xiàng)目ID，如果記不住，則可以單擊右側(cè)的按鈕，從彈出的列表中選擇要替換的項(xiàng)目，如圖14-104所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.2將原型發(fā)布到AxureShare圖14-104替換現(xiàn)有項(xiàng)目將RP原型發(fā)布到AxureShare之后，只要記住網(wǎng)址就可以通過互聯(lián)網(wǎng)在任何地方瀏覽了，如果忘記了RP原型網(wǎng)址，則可以登錄AxureShare官網(wǎng)（/），然后在自己的項(xiàng)目文件夾中找到相應(yīng)的項(xiàng)目就可以看到該原型的網(wǎng)址了，如圖14-105所示。AxureRP8交互原型設(shè)計(jì)案例教程（微課版）第14章發(fā)布交互原型14.3發(fā)布原型14.3.2將原型發(fā)布到AxureShare圖14-105查看原型網(wǎng)址除了使用AxureRP自帶的發(fā)布到AxureShare功能發(fā)布RP原型到AxureShare外，還可以將RP文件直接上傳到AxureShare官網(wǎng)，方法是：將RP文件保存到本地電腦中，然后登錄到AxureShare，指定要發(fā)布到哪個(gè)項(xiàng)目文件夾，然后在該文件夾中新建一個(gè)空項(xiàng)目，之后單擊該項(xiàng)目最后面的【upload】按鈕，即可上傳本地的RP文件，如圖14-10