Axure:如何使用布爾運算制作圖形?
在制作原型中,經常會有些圖形或者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 協議
Iconfont了解一下?基本上常用的圖標都能找到,為什么要自己畫?產品經理這么閑?
你以為你在網上下載的那些圖標是誰畫的?
UI 設計師 ??
基礎知識 贊
厲害了,期待新作
感謝,有新的知識就會寫的,分享快樂