Axure RP 9萌新修煉手冊-第三章-基礎應用(2)

AxureRP9教程 小樓一夜聽春語 749℃ 0評論

(四)其它元件庫

在網絡上有很多第三方元件庫共享,我們可以下載下來使用。

元件庫的文件名后綴為“.rplib”,可以通過元件功能面板的“+”按鈕進行選擇添加。(圖3-31)


也可以直接雙擊元件庫文件進行添加(無論Axure RP 9是否打開都有效)。

添加完成的元件庫,就能夠像自帶元件庫一樣使用了。(圖3-32)

添加的外部元件庫可以進行編輯與移除。(圖3-33)

【提示】直接修改RP文件的文件名后綴為“.rplib”即可當做外部元件庫使用。

(五)圖片文件夾

除了元件庫的添加功能,Axure RP 9還支持添加圖片文件夾,作為元件庫使用。(圖3-34)

三、圖標字體

除了常用的元件,我們在原型中還可以使用圖標字體(也叫字體圖標)。

實際上字體文件中所包含的文字都是矢量圖形,所以字體文件中也可以包含圖標。

這里以比較知名的圖標字體FontAwesome為例。

Axure RP中Icons元件庫里面所包含的圖標元件,都是參考這套字體圖標制作而成的。

但是,和Icons元件庫中的圖標元件不同,使用圖標字體需要先安裝字體文件,并在安裝字體文件之后重新啟動Axure RP才能夠正常加載字體。

一般來說,我們在系統中只需要安裝TTF或OTF格式的字體文件。

資源下載地址:https://fontawesome.com/download

目前,FontAwesome已經商業化,如果未經購買,我們只能使用免費部分的字體。

點擊下載頁面中的下載按鈕(圖3-35),下載下來之后是兩個ZIP格式的壓縮文件。


1、完成系統字體的安裝。

將“fontawesome-free-X.X.X-desktop.zip”(X.X.X表示版本號,目前是5.6.3)文件解壓縮(圖3-36)。

“otfs”文件夾包含了字體安裝文件,逐個雙擊進行安裝。(圖3-37)

另外,“svgs”文件夾中包含了所有圖標單獨的SVG文件,這些SVG文件和阿里巴巴圖標庫中下載的SVG圖標一樣,可以直接拖入或導入Axure RP元件庫中使用。

安裝完三個字體文件之后,我們就可以使用這套圖標字體了。

但是,Axure RP中并不能直接使用這些圖標字體,因為不能夠直接輸入。

2、借助Office軟件完成輸入。

Word/Excel/PowerPoint中都帶有插入符號的功能。(圖3-38)

打開插入符號的的面板之后,我們選擇字體系列就可以在文檔中插入這些符號。

注意,Word中通過上下文菜單也可以打開插入符號的面板;工具欄中點擊符號按鈕時,需要選擇【其他符號】。

例如,我們插入一個Windows的商標,需要先選擇“Font Awesome 5 Brands Regular”字體系列,然后選中Windows圖標,再點擊【插入】按鈕,就完成了圖標的插入。(圖3-39)

最后,我們可以在文檔中復制圖標,粘貼到Axure RP的畫布中進行使用。(圖3-40)

3、為圖標字體添加Web支持。

因為,我們制作的原型如果發布給他人進行瀏覽,在他人的系統中也需要安裝字體才能夠正常顯示圖標。

很顯然,這樣顯得有些麻煩。

為了讓瀏覽原型的用戶不用做任何操作就能夠正常瀏覽原型,我們需要為圖標字體添加Web支持。

Web支持可以通過以下方式添加。

(1)在線CSS文件

字體官網提供了在線的CSS文件支持:https://fontawesome.com/start。

頁面中,我們能夠看到代碼中的CSS文件鏈接。(圖3-41)


將鏈接復制,然后打開Axure RP的HTML生成配置。

切換到【字體】設置面板,點擊【+添加字體】按鈕,輸入一個自定義的字體標簽,并將鏈接粘貼到下方的【CSS文件的URL】輸入框中。(圖3-42)

完成這個配置之后,只要瀏覽原型的用戶網絡暢通,就能夠保證圖標正常顯示。

(2)本地CSS文件

如果不是在線方式發布原型,或者要把原型生成的HTML文件部署到自有服務器上,可以使用本地CSS文件。

在Axure RP的HTML生成配置中,【CSS文件的URL】填入CSS文件的相對路徑“css/all.css”。(圖3-43)

然后,生成HTML文件到指定的文件夾。

接下來,就需要用到我們下載的另外一個壓縮文件“fontawesome-free-X.X.X-web.zip”。(X.X.X表示版本號,目前是5.6.3)

我們把壓縮文件解壓縮之后,將里面的“css”和“webfonts”文件夾復制到原型的HTML文件夾中,打開HTML文件,就能夠正常顯示圖標了。(圖3-44)

(3)@font-face

這種方式是使用代碼完成Web字體支持,比較容易出錯,所以不建議采用這種方式。

操作上也分為在線與本地兩種,代碼內容相近,只是代碼中的字體文件路徑(url)分別為網絡路徑和相對路徑(本地)。

例如(相對路徑):

font-family: 'Font Awesome 5 Brands';

src: url('webfonts/fa-brands-400.eot');

src: url('webfonts/fa-brands-400.eot?#iefix') format('embedded-opentype'),

url('webfonts/fa-brands-400.woff') format('woff'),

url('IaxureTBG/fa-brands-400.ttf') format('truetype'),

url('webfonts/fa-brands-400.svg#Font Awesome 5 Brands') format('svg');

完成設置后(圖3-45),生成HTML文件到指定的文件夾。

并且,將“fontawesome-free-X.X.X-web.zip”里面的“css”和“webfonts”文件夾復制到原型的HTML文件夾中。(圖3-44)

此時,打開HTML文件,就能夠正常顯示圖標了。

四、元件樣式

除了了解元件的基本用途,我們還需要了解如何編輯元件的樣式。

例如,修改形狀的填充顏色、修改邊框的線段類型和改變文字字號等等。

不過不同類型的元件,樣式設置會有一些區別。(圖3-46)

樣式的設置主要分為:

顯示和隱藏:設置元件的初始可見狀態。

位置和尺寸:元件的位置與尺寸,支持寫入運算公式。(圖3-47)

樣式方案:創建新的樣式方案和更新當前的樣式方案。

透明:設置元件整體的透明度,包括元件與元件中的文字。

排版:設置元件上文字的樣式,包括字體、字號、字色、文字陰影、粗體、斜體、文字下劃線、文字刪除線、文字下標、行列間距等。

填充:設置形狀的填充顏色或填充圖像,或者設置圖片元件默認顯示的圖像。

線段:設置元件邊框、線段元件以及連接線的線型、線寬以及線段顏色,還能設置線段兩端的箭頭類型以及元件四個邊框的可見性。

陰影:設置元件的內部陰影和外部陰影。

圓角:設置矩形與圖片的圓角,并可以單獨取消部分圓角。

邊距:設置元件中文字與邊框之間的間距。

五、布局排列

每個原型都會使用到多個元件。

在編輯過程中讓這些元件整齊有序的排列是非常有必要的。

在Axure RP的工具欄中,提供了一些實用的功能,幫助我們能夠快速的完成功能元素的排布。(圖3-48)

1、層級排序:工具欄中的【頂層】和【底層】按鈕能夠讓我們快速的將元件置于頂層或底層,也可以通過快捷鍵<Ctrl+Shift+[>和<Ctrl+Shift+]>完成。

2、組合:元件可以組合到一起,方便統一的操作。工具欄中的【組合】和【取消組合】按鈕能夠讓我們快速的將元件組合或拆分,也可以通過快捷鍵<Ctrl+G>和<Ctrl+Shift+G>完成。

3、對齊:工具欄中提供了多個元件的對齊功能,能夠讓多個元件快速的進行各個方向對齊或中心對齊。

4、分布:工具欄中提供了多個元件的分布功能,能夠讓多個元件快速的進行水平或垂直方向的等距分布。

六、繪制草圖

繪制草圖只是不同元件的搭配組合。

通過對元件和基礎操作與功能的了解,我們應該可以完成這樣的工作。

例如,知乎網站(https://www.zhihu.com/)登錄后的首頁。(圖3-49)

案例01:知乎首頁草圖

注:本示例只包含原網頁上半部分內容。

我們先來看一下基本模塊組成。(圖3-50)

然后,就通過元件去完成每一個模塊的組建。(3-51)

注:為了便于查看,截圖中添加了灰色頁面背景色。

線框草圖一般通過默認元件庫中的基本元件(形狀、線段)與圖標元件即可完成。

注:示例中原頁面的部分圖標使用了相似圖標代替;非軟件自帶的元件庫文件在隨書資源中獲取。

隨書資源:關注微信公眾號“”chanpinban”,回復“萌新手冊”獲取下載地址。

建議初學者從網絡中選取一些內容簡潔的頁面,分析功能結構與元素組成,并模擬為線框草圖。

本示例中使用了軟件自帶的默認元件庫(Default)與FontAwesomeV5.5.0元件庫。

各位讀者可以下載隨書資源,打開本示例源文件進行參考。

七、頁面樣式

點擊概要功能面板中的頁面名稱,或者畫布的空白處即可切換到頁面的交互、樣式與說明的設置。(圖3-52)

在頁面的樣式功能面板中,我們能夠設置查看原型時,頁面整體內容的排列方式是靠左還是居中。

另外,在頁面樣式的設置中,還可以設置頁面的背景顏色或背景圖片。

例如,為我們之前做好的頁面導航欄,添加一個頂部帶有陰影效果的通欄背景。(圖3-53)


通過一個只有15像素寬的背景圖片進行【填充】,【水平重復】后,橫向鋪滿整個瀏覽器窗口的頂部。(圖3-54)


~~~~~~~~~~~~ 正文結束 下面沒了 ~~~~~~~~~~~~

小樓老師全新打造Axure RP 9精品課程,以獨有的教學方法與技巧,幫助你以最短的時間高效的完成學習目標。

《Axure RP 9 萌新修煉視頻》-----從零入門進階的優質課程------【點此查看詳情】


轉載請注明:Axure原創教程網 » Axure RP 9萌新修煉手冊-第三章-基礎應用(2)

喜歡 (5)or分享 (0)
頭像
發表我的評論
取消評論

表情

Hi,您需要填寫昵稱和郵箱!

  • 昵稱 (必填)
  • 郵箱 (必填)
  • 網址
(2)個小伙伴在吐槽
  1. 頭像
    為啥現在拉長直線很費勁 是我沒掌握什么便捷操作嗎 求指教
    蠟筆2019-05-01 14:44 回復
    • 小樓一夜聽春語
      按住Shift鍵
      小樓一夜聽春語2019-05-02 12:02 回復
辽宁快乐12选5走势图表