在制作原型中，經(jīng)常會(huì)有些圖形或者icon滿足不了實(shí)際的需要，今天就簡(jiǎn)單講一下如何使用Axure中的布爾運(yùn)算完成圖形的自定義。

首先來(lái)熟悉一下布爾運(yùn)算的幾個(gè)命令：

• Unite（合并）：將兩個(gè)圖形合并為同一個(gè)圖形，并填充下層圖形的顏色。
• Subtract（去除）：去除上層的圖形以及上層圖形中下層圖形重疊的部分。
• Intersect（相交）：保留兩個(gè)圖形相交的部分，并填充下層圖形的顏色。
• Exclude（排除）：排除掉兩個(gè)圖形的相交部分，并填充下層圖形的顏色。

下面將使用兩個(gè)常見的圖標(biāo)WIFI、SET進(jìn)行講解。

一、WIFI圖形的制作

我們觀察這個(gè)WIFI圖形，可以看出是由幾個(gè)圓的四分之一組成的，那接下來(lái)就開始制作。

Step 1：拖拽兩個(gè)圓形，并填充需要的顏色。這兩個(gè)圓形一大一小，居中。

Step 2：將兩個(gè)圓形全部選中，并右鍵，選擇Transform Shape命令中的布爾運(yùn)算：Subtract（去除，減去），即去除兩個(gè)圖形的相同部分，得到一個(gè)圓環(huán)的圖形。

Step 3：接下來(lái)就根據(jù)自己的需要繼續(xù)重復(fù)Step 2的方法，需要幾個(gè)就重復(fù)幾次操作。

Step 4：重復(fù)幾次之后，不要忘記在中間再增加一個(gè)實(shí)心圓。

Step 5：將Step 4之后獲得的圖形進(jìn)行合并，使用命令Unite（合并），即將多個(gè)圖形合并為一個(gè)圖形。合并后成為一個(gè)圖形。

Step 6：拖拽一個(gè)矩形，并將矩形修改為正方形，旋轉(zhuǎn)45°。

Step 7：將矩形框和圓形疊放。

Step 8：右鍵，選擇取矩形和圓形的相交部分，使用命令I(lǐng)ntersect（相交），即取兩個(gè)圖形相交的區(qū)域。

注意事項(xiàng)：在制作過(guò)程中，需要注意的是，圓形最好不要帶邊框，帶了邊框之后會(huì)導(dǎo)致圖形的邊框虛。另外，旋轉(zhuǎn)角度、布爾運(yùn)算的命令在控件的STYLE中也可以實(shí)現(xiàn)。

二、SET圖形的制作

SET圖形，可以看出是由圓以及矩形組成的。這個(gè)圖形比較簡(jiǎn)單，且上面已經(jīng)講過(guò)詳細(xì)的步驟了，這個(gè)圖形不再那么細(xì)致的講解，只給出幾個(gè)主要的步驟和注意事項(xiàng)。

Step 1：選擇原型和矩形，根據(jù)需要調(diào)整好位置和大小。使用命令Unite。

注意：在矩形的制作過(guò)程中，最好都使用同一個(gè)矩形，通過(guò)復(fù)制、粘貼的方式，將新的矩形放在與復(fù)制矩形行相同的位置上，使用旋轉(zhuǎn)角度的方式完成45°、90°、135°位置的矩形，否則使用拖拽的方式會(huì)導(dǎo)致位置很難調(diào)整。

Step 2：拖拽一個(gè)新的圓形，放在圖形的中央，并使用命令Exclude（排除），即將兩個(gè)圖形的公共的部分去除。

三、總結(jié)

布爾運(yùn)算雖然比較簡(jiǎn)單，但如果利用得當(dāng)，可以制作出很多獨(dú)具特色的圖形。

為了更直觀的說(shuō)明幾個(gè)命令的差異，我們使用一個(gè)矩形和一個(gè)圓形來(lái)做示例。

1、Unite：將兩個(gè)圖形合并為同一個(gè)，并填充下層圖形的顏色。

2、Subtract：去除上層的圖形以及上層圖形中下層圖形重疊的部分。

3、Intersect：保留兩個(gè)圖形相交的部分，并填充下層圖形的顏色。

4、Exclude：排除兩個(gè)圖形的相交部分，并填充下層圖形的顏色。

本文由 @awai827 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 Pexels ，基于 CC0 協(xié)議