在制作原型中，經常會有些圖形或者icon滿足不了實際的需要，今天就簡單講一下如何使用Axure中的布爾運算完成圖形的自定義。

首先來熟悉一下布爾運算的幾個命令：

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

下面將使用兩個常見的圖標WIFI、SET進行講解。

一、WIFI圖形的制作

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

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

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

Step 3：接下來就根據自己的需要繼續重復Step 2的方法，需要幾個就重復幾次操作。

Step 4：重復幾次之后，不要忘記在中間再增加一個實心圓。

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

Step 6：拖拽一個矩形，并將矩形修改為正方形，旋轉45°。

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

Step 8：右鍵，選擇取矩形和圓形的相交部分，使用命令Intersect（相交），即取兩個圖形相交的區域。

注意事項：在制作過程中，需要注意的是，圓形最好不要帶邊框，帶了邊框之后會導致圖形的邊框虛。另外，旋轉角度、布爾運算的命令在控件的STYLE中也可以實現。

二、SET圖形的制作

SET圖形，可以看出是由圓以及矩形組成的。這個圖形比較簡單，且上面已經講過詳細的步驟了，這個圖形不再那么細致的講解，只給出幾個主要的步驟和注意事項。

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

注意：在矩形的制作過程中，最好都使用同一個矩形，通過復制、粘貼的方式，將新的矩形放在與復制矩形行相同的位置上，使用旋轉角度的方式完成45°、90°、135°位置的矩形，否則使用拖拽的方式會導致位置很難調整。

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

三、總結

布爾運算雖然比較簡單，但如果利用得當，可以制作出很多獨具特色的圖形。

為了更直觀的說明幾個命令的差異，我們使用一個矩形和一個圓形來做示例。

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

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

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

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

本文由 @awai827 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Pexels ，基于 CC0 協議