Axure:如何使用布爾運算制作圖形?

8 評論 9805 瀏覽 11 收藏 7 分鐘

在制作原型中,經常會有些圖形或者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 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. Iconfont了解一下?基本上常用的圖標都能找到,為什么要自己畫?產品經理這么閑?

    來自廣東 回復
    1. 你以為你在網上下載的那些圖標是誰畫的?

      來自北京 回復
    2. UI 設計師 ??

      來自上海 回復
  2. 基礎知識 贊

    回復
  3. 厲害了,期待新作

    來自上海 回復
    1. 感謝,有新的知識就會寫的,分享快樂

      來自遼寧 回復