起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門(mén)專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)產(chǎn)品經(jīng)理們，你們使用過(guò)Axure繪制矢量圖嗎？
Axure從8.0版本開(kāi)始就有了鋼筆工具，通過(guò)鋼筆工具可以自定義矢量圖的形狀，對(duì)多個(gè)矢量圖之間進(jìn)行布爾運(yùn)算，我們可以得到更多形態(tài)各異的形狀。而在9.0的版本中，又進(jìn)一步加強(qiáng)了繪制矢量圖的能力。
鋼筆工具概述
要真正提高你在Axure RP工作流的方法之一是為你的團(tuán)隊(duì)創(chuàng)建自定義元件庫(kù)。它可以節(jié)省每個(gè)人的時(shí)間，你會(huì)得到更具一致性的項(xiàng)目。
可惜的是，目前沒(méi)有一個(gè)好的方法來(lái)繪制自定義形狀，元件庫(kù)往往充斥著不同顏色、大小的圖片。
使用Axure RP 9提供的鋼筆工具可以繪制自定義形狀。繪制的形狀是基于矢量的，可以自由拉伸形狀而不降低圖像的清晰度。我們也可以靈活調(diào)整圖像的填充和邊框線的顏色。這些功能對(duì)于繪制圖標(biāo)、圖表、曲線箭頭、設(shè)備輪廓、按鈕和流程圖形狀是非常有幫助的。
你還可以對(duì)這些形狀進(jìn)行合并、去除、相交、排除等布爾運(yùn)算，也可以對(duì)它們進(jìn)行水平翻轉(zhuǎn)、垂直翻轉(zhuǎn)。下面我們?cè)敿?xì)介紹鋼筆的工具的使用方法，以及鋼筆工具繪制的矢量圖的一些特征。
繪制圖形
直線路徑：點(diǎn)擊工具欄插入>繪畫(huà)，啟用鋼筆工具，畫(huà)布空白處鼠標(biāo)單擊，繪制路徑的起始點(diǎn)，移動(dòng)鼠標(biāo)至目標(biāo)位置，并單擊鼠標(biāo)，繪制路徑節(jié)點(diǎn)，重復(fù)上述做法，可繪制多個(gè)路徑節(jié)點(diǎn)，鼠標(biāo)移入至起點(diǎn)上方，當(dāng)起點(diǎn)外圍出現(xiàn)一個(gè)紅色矩形框時(shí)，雙擊鼠標(biāo)，閉合路徑，完成圖形繪制。如果我們希望在開(kāi)放路徑中結(jié)束繪制，在節(jié)點(diǎn)處雙擊鼠標(biāo)即可。
圖1-直線
曲線路徑：默認(rèn)情況下，使用鋼筆工具繪制的線條都是直線，那么如果我們需要繪制曲線路徑是否可以呢？答案是肯定的，單擊鼠標(biāo)新增節(jié)點(diǎn)后，按住鼠標(biāo)左鍵不松開(kāi)，拖拽鼠標(biāo)的位置，則可以看到直線變成了曲線，拖拽鼠標(biāo)時(shí)，節(jié)點(diǎn)處會(huì)有一條輔助線，當(dāng)輔助線越長(zhǎng)時(shí)，線條的彎曲度越大。
圖2-曲線
插入圖形：點(diǎn)擊工具欄“插入”，選擇插入的圖形：矩形、圓形、線段、文本和各類形狀。鼠標(biāo)移入設(shè)計(jì)區(qū)域，鼠標(biāo)下方出現(xiàn)對(duì)應(yīng)的圖形圖標(biāo)，此時(shí)，直接拖拽鼠標(biāo)可以繪制圖形，拖拽鼠標(biāo)的同時(shí)按住Shift鍵，可以等比例縮放圖形。
通過(guò)一些快捷鍵我們可以快速插入常用的圖形元件，各矢量圖形的快捷鍵如下：
- P鍵：鋼筆工具
- R鍵：矩形
- 0鍵：圓形
- L鍵：線段
- T鍵：文本
管理節(jié)點(diǎn)
編輯節(jié)點(diǎn)：鼠標(biāo)單擊圖形，選中圖形，鼠標(biāo)右鍵單擊選擇“編輯連接點(diǎn)”或鼠標(biāo)移至路徑上方，當(dāng)光標(biāo)下方出現(xiàn)一個(gè)黑色方框時(shí)，鼠標(biāo)雙擊，這個(gè)時(shí)候，圖像中所有的節(jié)點(diǎn)都展示出來(lái)了。鼠標(biāo)拖拽節(jié)點(diǎn)位置，拉伸線條改變路徑位置，從而達(dá)到改變圖形的目的。
圖3-編輯節(jié)點(diǎn)
添加節(jié)點(diǎn)：鼠標(biāo)單擊圖形，鼠標(biāo)移至路徑上方，當(dāng)光標(biāo)下方出現(xiàn)一個(gè)黑色方框時(shí)，鼠標(biāo)雙擊，選中路徑，這個(gè)時(shí)候各路徑線上的節(jié)點(diǎn)都展示出來(lái)了。在路徑上單擊鼠標(biāo)左鍵，則完成新節(jié)點(diǎn)的添加。
圖4-添加節(jié)點(diǎn)
刪除節(jié)點(diǎn)：選中路徑先后，展示出了所有節(jié)點(diǎn)，鼠標(biāo)單擊選中節(jié)點(diǎn)，按下delete鍵，完成節(jié)點(diǎn)刪除。
選擇節(jié)點(diǎn)過(guò)渡方式：按照上述步驟，選中路徑節(jié)點(diǎn)之后，點(diǎn)擊鼠標(biāo)右鍵，選擇curve，曲線過(guò)渡，選擇sharpen，直線過(guò)渡?；蛘咧苯邮髽?biāo)雙擊節(jié)點(diǎn)，也能夠完成直線過(guò)渡與曲線過(guò)渡的切換。
圖5-選擇節(jié)點(diǎn)過(guò)渡方式
變換形狀
1. 翻轉(zhuǎn)
- 水平翻轉(zhuǎn)：選中繪制的自定義圖形，鼠標(biāo)右鍵單擊選擇“變換形狀>水平翻轉(zhuǎn)”，圖形在原地進(jìn)行水平翻轉(zhuǎn)。
- 垂直翻轉(zhuǎn)：選中繪制的自定義圖形，鼠標(biāo)右鍵單擊選擇“變換形狀>垂直翻轉(zhuǎn)”，圖形在原地進(jìn)行垂直翻轉(zhuǎn)。
圖6-水平翻轉(zhuǎn)
圖7-垂直翻轉(zhuǎn)
2. 布爾運(yùn)算
圖8-原圖
- 合并：對(duì)兩個(gè)圖形進(jìn)行并集運(yùn)算，合并后的圖形填充色為原底層圖形的顏色。
- 去除：底層圖形減去頂層圖形，底層圖形去除相交部分后得出的圖形，即為最終運(yùn)算得出的圖形。最終運(yùn)算后所得圖形的填充色為底層圖形的填充色。
- 相交：對(duì)兩個(gè)圖形進(jìn)行交集運(yùn)算，相交后圖形的填充色為原底層圖形的填充色
- 排除：先對(duì)兩個(gè)圖形進(jìn)行并集運(yùn)算，再對(duì)兩個(gè)圖形進(jìn)行交集運(yùn)算，用合并后的形狀減去相交部分的形狀，就等于去除后的形狀。最終運(yùn)算后所得圖形的填充色為底層圖形的填充色。
圖9-合并
圖10-去除
圖11-相交
結(jié)合：將兩個(gè)圖形合并為一個(gè)圖形，如有相交，則去除相交部分，所得圖形填充色為底層圖形顏色。
分開(kāi)：將合并的圖形分開(kāi)，分開(kāi)后的圖形填充色與原來(lái)顏色一致。
圖12-結(jié)合
圖13-分開(kāi)
3. 節(jié)點(diǎn)連接
自定義圖形中各節(jié)點(diǎn)之間的連接線我們可以選擇直線連接或曲線連接，選中自定義圖形，鼠標(biāo)右鍵單擊選擇“變換形狀>曲線連接各點(diǎn)/折線連接各點(diǎn)”。
圖14-直線連線/曲線連線
形狀與圖片的轉(zhuǎn)換：
由鋼筆工具繪制的自定義矢量圖形也可以像其他的形狀類元件一樣，通過(guò)鼠標(biāo)右鍵單擊即可轉(zhuǎn)化為圖片。
圖15-轉(zhuǎn)換為圖片
元件庫(kù)中的系統(tǒng)元件如矩形、原型、占位符等元件均為矢量圖形，選中元件，鼠標(biāo)右鍵單擊選擇“編輯連接點(diǎn)”，這個(gè)時(shí)候我們可以像使用鋼筆工具繪制自定義圖形一樣，對(duì)節(jié)點(diǎn)進(jìn)行任意操作，包括移動(dòng)節(jié)點(diǎn)位置、新增節(jié)點(diǎn)、刪除節(jié)點(diǎn)等操作。
圖16-為矩形增加節(jié)點(diǎn)
通過(guò)鋼筆工具繪制的自定義矢量圖形和元件庫(kù)中的矩形、圓擁有同樣的樣式屬性，通過(guò)右側(cè)樣式面板可以對(duì)它們的位置、尺寸、顏色、線條、陰影、圓角和文字排版等樣式進(jìn)行靈活設(shè)置。
案例：emoji表情
（1）按下字母O鍵，按住Shift鍵拖拽鼠標(biāo)，繪制一個(gè)大圓形作為人物的頭部。
（2）按照同樣的方法繪制一個(gè)小圓形，按住Alt鍵+Shift鍵并水平拖拽小圓行，復(fù)制另外一個(gè)圓。兩個(gè)小圓作為人物的眼睛。
（3）按下P鍵，準(zhǔn)備繪制嘴型，鼠標(biāo)點(diǎn)擊畫(huà)布空白處，確定起點(diǎn)，鼠標(biāo)點(diǎn)擊確定節(jié)點(diǎn)，在節(jié)點(diǎn)處按住鼠標(biāo)拖拽將路徑上的直線轉(zhuǎn)為曲線，最后連接起始點(diǎn)，閉合路徑，完成嘴型的繪制。
圖17-繪制頭
圖18-繪制眼睛
圖19-繪制嘴
（4）選中兩個(gè)小圓，鼠標(biāo)右鍵單擊選擇“編輯連接點(diǎn)”，向內(nèi)移動(dòng)節(jié)點(diǎn)位置，使得兩個(gè)眼睛看上去像一個(gè)橢圓。
（5）選中所有圖形，鼠標(biāo)右鍵單擊選擇“變換形狀>去除”，完成表情繪制。
圖20-調(diào)整器官節(jié)點(diǎn)
圖21-布爾運(yùn)算，去除
#專欄作家#
拼搏的80后，人人都是產(chǎn)品經(jīng)理專欄作家。10年互聯(lián)網(wǎng)從業(yè)經(jīng)歷，具有各類型B端、C端產(chǎn)品的設(shè)計(jì)經(jīng)驗(yàn)，關(guān)注區(qū)塊鏈及人工智能的技術(shù)發(fā)展及應(yīng)用場(chǎng)景探索。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自Unsplash，基于CC0協(xié)議
簡(jiǎn)書(shū)互聯(lián)網(wǎng)優(yōu)秀作者，高級(jí)產(chǎn)品經(jīng)理
評(píng)論
求助：axure做的矢量圖如何保存出來(lái)