2 元件
元件是組成原型的一部分减宣，并且是最重要的一部分。
我主要介紹自帶的元件庫以及阿里巴巴的Iconfont矢量庫的使用玩荠。
希望你也已經(jīng)安裝好了Axure RP 9了漆腌。
2.1 元件的作用
元件有啥作用贼邓？它就是用來表達原型內(nèi)容的主要元素。
我做了一個十分簡易的彈出框原型可以直觀地進行理解：
在右側(cè)的 「OUTLINE」 中，Page1下的多個元件（都是從元件庫中拖拽出來的），分別為：
- 打擾了按鈕–矩形
- 確認按鈕–矩形
- 文件夾「彈出框文字內(nèi)容」–文字第一行趁矾、文字第二行石咬、文字第三行–文字
- 關(guān)閉–形狀
- 彈出框標題–矩形
- 彈出框-邊框–矩形
他們組成了右側(cè)畫布中所展示的彈框界面，俗話說就是它的長相戳粒。原型還有另一個更好理解的名字，叫做線框圖，也就是由多眾線條/形狀組合而成的圖形绑咱。
當然，以上都是我給元件命名枢泰、按類別進行組合后所展示的結(jié)果描融， 就像我上一篇中1.4 一些你需要記住的好習慣所提到的，要給你的元件命名衡蚂，并且善用組合窿克；后期做交互的時候你會感謝這個操作！ 毛甲。
2.2 元件在哪兒
2.2.1 自帶的元件庫
上一篇文章(自學Axure–學會20%的功能年叮，滿足80%的日常使用（1）)有提到過，
軟件自帶的元件庫可以在界面左下方 「library」 中找到玻募，分為三類：
- 默認 Defalut
- 流程圖 FLow
-
圖標 Icons
在這里插入圖片描述
網(wǎng)絡上也有許多元件庫可供下載只损，但是學習前期的話暫不需要話太多時間去尋找其他有特殊用途的元件庫，默認的已經(jīng)足夠使用七咧。
2.2.2 Iconfont
阿里巴巴的Iconfont可以點擊 這里 進行跳轉(zhuǎn)跃惫。
2.3 元件怎么玩
2.3.1 Iconfont怎么玩？
這里有大量的矢量圖標可供挑選艾栋，那么怎么將他們應用到原型設計中呢爆存？
Step1：搜索一個音量的小圖標
STEP2：點擊一個你心儀的音量小圖標
彈出的圖標界面中，可以進行：
- 調(diào)整圖標顏色：提供顏色調(diào)整蝗砾，可以直接使用hex code調(diào)色
- 調(diào)整圖標大小：提供圖標大小調(diào)整（16先较、32、48悼粮、64拇泣、128）
- 下載圖標：提供多格式的圖標下載
- SVG：可縮放的矢量圖形
- AI：類似PSD的分層文件格式
- PNG：便攜式網(wǎng)絡圖形
- 復制圖標：提供SVG代碼復制
STEP3：復制SVG
當然，你也可以調(diào)整顏色矮锈、調(diào)整大小再復制霉翔，但是我一般不這么做，因為放到原型中通過Axure也是可以進行調(diào)整的苞笨。
STEP4：粘貼到畫布中
把小喇叭放到畫布中后债朵，左側(cè)OUTLINE中最頂部就多了一個小喇叭的元件標簽子眶，此時該元件只能調(diào)整大小，而不能調(diào)整顏色（右下角紅色圓圈處序芦，調(diào)整填充色的地方是灰色的）
STEP5：拖動頂點臭杰，調(diào)整成合適的大小
STEP6：將SVG轉(zhuǎn)化成形狀（shapes），調(diào)整小喇叭的顏色
將SVG轉(zhuǎn)化成shapes后谚中，左側(cè)OUTLINE中的小喇叭元件不再是SVG渴杆，而是變成一個組合后的GROUP文件夾，里面有兩個元件組成宪塔。右側(cè)的填充顏色按鈕也可用了磁奖。?? 里面的shape是可以分別改變顏色的。
STEP7：養(yǎng)成好習慣某筐，給小喇叭取個名字比搭！ 「我是音量」
2.3.2 自帶元件庫怎么玩？
部分自帶元件有自己的特有屬性南誊，可以進行一些特定的交互身诺。就像玩游戲時的不同角色，有不同的技能抄囚。
自帶元件庫分了三類霉赡，我主要是介紹使用的最多的第一類默認元件–Defalut。具有特有屬性的元件也都集中在默認元件中幔托。
2.3.1.1 修改樣式
還是以這個小彈窗為例穴亏，我將它拆解出來，一共由三類元件組成：
- 矩形
- 文本
-
Icon（小喇叭是Iconfont中復制來的柑司，叉×是從第三類Icons中拖入畫布的
在這里插入圖片描述
首先以 「文本」 元件為入手，對 「STYLE」 的操作界面進行介紹锅劝。其他元件的 「STYLE」 操作界面都是一樣的攒驰。
「文本」 和平時使用的文本差不多，是帶有文本格式的元件故爵，雖然自帶元件庫中有這幾個元件可供選擇玻粪，但是他們之間是可以通過 「STYLE」 進行調(diào)整的，自帶的元件就是提供了一套標準的字體大小來供使用者使用诬垂，也就是類似Word工具欄上的樣式推薦一樣劲室。
將元件拖入畫布中，雙擊元件便可進行文本編輯了结窘。
Word里的樣式功能：
編輯好文本后很洋，可以對文本元件進行樣式修改，操作界面在右側(cè)的 「STYLE」 窗口：
一些常規(guī)性的操作就不多做介紹隧枫，在這里介紹一下邊框喉磁、圓角谓苟、和填充的效果：
-
邊框(BORDER)：
首先，需要展示邊框协怒，它的粗細參數(shù)(THICKNESS)一定要大于零涝焙，面板上還提供了邊框的顏色、類型（實線虛線等）的選擇孕暇。特別說一下 「可見性visiblility」 仑撞， 點擊后會出現(xiàn)邊框的上、下妖滔、左隧哮、右的線條示意，單擊線條铛楣，線條便會消失近迁，那么元件對應的邊框位置便會不可見。
在這里插入圖片描述 -
圓角(CORNER)：
關(guān)于圓角簸州，是用來柔和元件邊框的四個角的鉴竭。當參數(shù)為0的時候，四個角的角度為直角岸浑，數(shù)字越大搏存，角度越柔和。
另外矢洲，圓角的可見性也和邊框的可見性一樣璧眠，當你單擊一個角，會使那個角的圓角屬性失效读虏，恢復成直角责静。
在這里插入圖片描述 -
填充(PADDING)：
填充調(diào)整的是文本與邊框之間的距離。參數(shù)越大盖桥，距離越遠灾螃。
在這里插入圖片描述 -
編輯頂點：
編輯頂點是可以修改邊框的形狀的，通過單擊的方式可以在邊框上面添加頂點揩徊，通過拖動頂點的方式腰鬼，可以改變邊框的形狀。
在這里插入圖片描述Step1：通過單擊新增頂點
在這里插入圖片描述Step2：拖動頂點塑荒，以達到自己想要的形狀
在這里插入圖片描述
2.3.1.2 小交互：點擊-隱藏
彈窗出現(xiàn)熄赡，需要給予的動作有點擊“確認”、“取消”齿税、“關(guān)閉”彼硫，界面給予的反饋一般是將這個彈窗關(guān)閉。那么我們在設計交互的時候，第一是選擇點擊動作的對象是誰乌助，第二是選擇點擊后效果實現(xiàn)的對象是誰溜在。
Step1：首先把組成彈窗的幾個元件組合起來，并命名
選中目標元件他托，點擊頂部菜單欄的GROUP按鈕（或者CTRL+G/CMD+ALT+G）掖肋，這一步的目的是組合出點擊后效果實現(xiàn)的對象。
Step2：選擇點擊動作的對象
此處演示的是關(guān)閉動作赏参，所以我選擇了彈窗右上角的叉×志笼。
- 單擊叉 × 元件，同時將右側(cè)面板切換到 「交互Interactions」
- 點擊新建交互 「New Interaction」
Step3：選擇交互事件–單擊
單擊新建交互 「New Interaction」 后把篓，會出現(xiàn)一個下拉列表纫溃，分為 「EVENTS」 和 「STYLE EFFECTS」 。
「EVENTS」 便是確定觸發(fā)交互的事件韧掩，有單擊紊浩、雙擊、鼠標移入移出等疗锐；
「STYLE EFFECTS」便是確定該元件觸發(fā)了某項交互事件后坊谁，帶來的樣式變化。
在這個例子里滑臊，我們想要實現(xiàn)的效果是：
- 單擊右上角的 ×口芍，
- 實現(xiàn) 「靈魂的質(zhì)問彈窗」 的關(guān)閉效果。
所以右上角 「EVENTS」 事件雇卷，則選擇 OnClick鬓椭。
Step4：選擇交互動作–顯示/隱藏
選擇了 OnClick 后，會繼續(xù)有一個選擇列表彈出來关划，這個選擇列表是 「添加動作」 列表小染。這里的動作，就是為了實現(xiàn)窗口關(guān)閉效果贮折。
仔細想想裤翩，一個窗口關(guān)閉了，其實相當于用戶看不見它了脱货。那么 「關(guān)閉」這個 動作 就可以通過 「顯示/隱藏;show/hide」 來實現(xiàn)岛都。
Step5：選擇動作的對象-- 靈魂的質(zhì)問彈窗
最后一步就是選擇實現(xiàn)step4動作的目標對象律姨，在這里就是指 「靈魂的質(zhì)問彈窗」 這個窗口了振峻。由于我們step1時就將涉及到窗口的元件組合成一個整體（文件夾的形式展示著），所以在這一步選擇對象時择份，就選中整個代表著 「靈魂的質(zhì)問彈窗」 的文件夾即可扣孟。否則，就需要將所有元件一個一個分別添加進目標對象里荣赶，這是件麻煩事凤价，后期交互多了還容易出錯鸽斟，所以要記住 「善用組合」 。
Step6：完成利诺。預覽后點擊 ×富蓄，看一下關(guān)閉效果吧
預覽鏈接：靈魂的質(zhì)問彈窗
密碼：liucong
下一期內(nèi)容：熱區(qū)、動態(tài)面板慢逾？這都是些啥立倍？
