手把手教你Axure-默認(rèn)元件庫（上）

從今天開始，我們將正式的介紹Axure中最重要的部分-元件。這是組成頁面的最基本元素，可以說它是整個(gè)頁面的基石。

在RP9中，軟件默認(rèn)自帶的元件庫有四個(gè)：Default、Flow、Icons、Simple UI Patterns。翻譯過來，就分別是默認(rèn)元件、流程元件、圖標(biāo)元件、UI元件，每種類型的元件庫都有其各自的功能。

默認(rèn)元件：這是最常用的，也是使用頻率最高的元件庫，幾乎覆蓋了我們80%的使用場景。

流程元件：通過名字我們就能大概清楚，這是用來畫流程圖用的，元件庫中包含的是我們畫流程圖時(shí)常用的一些圖形。

圖標(biāo)元件：這個(gè)是常用的圖標(biāo)元件庫，系統(tǒng)為我們提供了一些常見的icon。

UI元件：系統(tǒng)為我們提供了一些常見的UI元件庫，也包含一些已經(jīng)封裝好的交互效果和功能。

接下來的幾期，我會對默認(rèn)元件庫這部分進(jìn)行詳細(xì)的介紹?？偣卜至怂姆N類型：基本元件、表單元件、菜單/表格、標(biāo)記元件。

由于元件內(nèi)容比較多，我會分成兩期來介紹，這篇先介紹基本元件，剩下的三種類型放在下篇。

01.形狀

一共有四種類型的形狀，分別是白底有描邊的矩形、淺灰無描邊的矩形、深灰無描邊的矩形、白底有描邊的圓形。

我們在畫原型的時(shí)候，就可以根據(jù)實(shí)際的需要，選擇最合適的那個(gè)即可。

02.圖片

圖片元件，顧名思義就是用來展示圖片的。將元件拖到右側(cè)的畫布后，如果不進(jìn)行修改，會顯示默認(rèn)的圖片標(biāo)識。

如果想修改圖片，有下面兩種方式可以操作。

第一種是直接雙擊圖片，然后選擇圖片。

第二種是選中圖片右鍵，然后選擇導(dǎo)入圖片，然后選擇圖片。

03.占位符

占位符的作用是“占位”，當(dāng)我們不是十分明確所要展現(xiàn)的內(nèi)容的時(shí)候，就可以使用占位符。

其作用就是表明這里有內(nèi)容，只不過目前還沒有確定而已。

04.按鈕

一共有三種類型的形狀，分別是按鈕、主要按鈕、鏈接按鈕。

按鈕：白底有描邊，適用于只有一個(gè)按鈕的情況。

主要按鈕：帶有顏色的按鈕，適用于需要重點(diǎn)突出的。比如表單中有多個(gè)按鈕，需要引導(dǎo)用戶去點(diǎn)擊的，放主要按鈕。

鏈接按鈕：其實(shí)是一個(gè)文字鏈接，需要讓用戶明確的知道這里是可以點(diǎn)擊的。比如很多的“查看詳情”，都會使用這種類型的按鈕。

05.標(biāo)題

一共有三種類型的標(biāo)題，分別是一級標(biāo)題、二級標(biāo)題、三級標(biāo)題。

從一級到三級，隨著層級的遞減，對應(yīng)的字號也越來越小。

06.文本

一共有兩種類型的文本，分別是文本標(biāo)簽、文本段落。

文本標(biāo)簽：適合的是單行形式的內(nèi)容，比如文章標(biāo)題。

文本段落：適合的是段落形式的內(nèi)容，比如文章正文。

07.線段

一共有兩種類型的線段，分別是水平線、垂直線。

水平線：默認(rèn)是高度為1像素的水平線。

垂直線：默認(rèn)是寬度為1像素的垂直線。

08.熱區(qū)

熱區(qū)只在RP的操作界面中顯示，原型生成后，在實(shí)際頁面中是不可見的。

在我的使用過程中，熱區(qū)的作用有兩個(gè)：區(qū)域操作、隱藏操作。

所謂的區(qū)域操作，即某個(gè)區(qū)域內(nèi)有多個(gè)元件，但是操作都是統(tǒng)一的，我們不可能對每個(gè)元件單獨(dú)做相關(guān)交互。這時(shí)候就可以放一個(gè)熱區(qū)，然后覆蓋整個(gè)區(qū)域，然后對熱區(qū)做交互。

所謂的隱藏操作，即有時(shí)候我們?yōu)榱搜菔拘畔?，需要在某個(gè)位置放一個(gè)只有自己知道的隱藏操作，可以添加熱區(qū)，然后做相關(guān)的交互。

09.動態(tài)面板

通過動態(tài)面板，我們可以添加不同的狀態(tài)，然后對不同的狀態(tài)分別配置相關(guān)內(nèi)容。

適合的場景是，同一個(gè)模塊，需要根據(jù)不同的狀態(tài)顯示不同的內(nèi)容、文字、標(biāo)識等。

將動態(tài)面板拖到操作區(qū)域，然后雙擊，就可以看到不同的狀態(tài)。選中后，就可以針對當(dāng)前狀態(tài)的內(nèi)容進(jìn)行編輯。所編輯的內(nèi)容，只影響本狀態(tài)，不會改變其他狀態(tài)的內(nèi)容。

動態(tài)面板里的不同狀態(tài)，我們可以復(fù)制現(xiàn)有狀態(tài)、刪除現(xiàn)有狀態(tài)、重命名現(xiàn)有狀態(tài)、添加新狀態(tài)，這四種基本操作。

當(dāng)然，僅僅將動態(tài)面板設(shè)置完成只是開始。我們真正需要的是，根據(jù)不同的條件，顯示不同的狀態(tài)內(nèi)容，會在后續(xù)的實(shí)操中進(jìn)行講解。

10.內(nèi)聯(lián)框架

內(nèi)聯(lián)框架，適用的情況是，我們需要在特定的情況下展現(xiàn)某些現(xiàn)有的頁面或者網(wǎng)址。

將內(nèi)聯(lián)框架拖到操作區(qū)域，然后雙擊，就可以選擇鏈接的目標(biāo)。

我們可以鏈接到當(dāng)前RP文件中的一個(gè)頁面，也可以鏈接到外部的網(wǎng)址。完成后，預(yù)覽，就可以看到這個(gè)內(nèi)聯(lián)框架所展示的內(nèi)容了。

11.中繼器

中繼器，應(yīng)該是整個(gè)元件中最復(fù)雜的內(nèi)容了。

其主要解決的問題是避免重復(fù)的內(nèi)容和操作，最常見的適用情況是列表的循環(huán)顯示問題。

舉個(gè)簡單的例子，對于列表，我們通常的做法是拖一個(gè)表格，然后添加多行，每一行的內(nèi)容進(jìn)行編輯。

而通過中繼器，我們只需要定義好每列的名稱。后續(xù)的增刪改，我們只需要通過右側(cè)的內(nèi)容修改即可。

在我看來，使用中繼器的最終目的，是方便后續(xù)后續(xù)的維護(hù)和擴(kuò)展。

以上，就是關(guān)于默認(rèn)元件庫中部分元件的介紹。

------------- End -------------

關(guān)注后，回復(fù)“PRD”，可免費(fèi)獲取PRD模板。