從零開始畫圖示系列：線性圖示設計實戰演示！

設計 · 發表 2019-04-18 22:24:12

摘要：前面兩篇文章我們分別講解了圖示的基礎知識，和工具類圖示的規範。今天這篇就要進入到大家最喜歡的操作演示環節了。主要演示的是線性風格的設計，包含 8 個圖示的繪製實戰過程。往期回顧：《從零開始畫圖示系列：超全面的基礎知識》《從零開始畫圖示系列：工具類圖示...

前面兩篇文章我們分別講解了圖示的基礎知識，和工具類圖示的規範。今天這篇就要進入到大家最喜歡的操作演示環節了。主要演示的是線性風格的設計，包含 8 個圖示的繪製實戰過程。

往期回顧：

線性圖示是所有圖示中最基礎的設計形式，也是最簡單的入門。在我們後續設計其它的風格圖示前，首先要通過練習線性圖示來打下堅實的基礎。

什麼是圖示的基礎，有兩個方面：

製圖的規範性
圖形的合理應用

只要圖形的設計能達到這兩個要求，才能在進一步的創作中施展拳腳。並且，我們的案例演示，也會在每種型別的設計中，通過最基礎的風格演示，一層層遞進演示其它設計風格的設計過程，充分展示任何設計風格與基礎之間的關係。

通過上一篇文章我們知道，線性圖示的設計首先要確定圖示的尺寸、描邊的粗細和繪製圖標的柵格系統，所以我們先確定圖示的規格為 28pt * 28pt，使用 2pt 的內描邊（設計中 PT 可以等同 PX ），然後再畫出柵格，並進行編組。

線形圖示設計演示

1. 搜尋圖示

搜尋圖示是 APP 中最常見的圖示，繪製原理也很簡單，就是一個圓和圓角矩形的結合。

步驟 1：在案例中，設計的風格主要是偏圓潤一點的，那麼鏡片的比例就要偏大。我們使用了尺寸為 20pt 的圓，和一個寬 2pt 高 9pt 的圓角矩形。

步驟 2：將矩形和圓形進行連線並且垂直方向居中、編組，然後旋轉 45 度。之所以要先垂直再旋轉，是因為如果直接畫出一條傾斜的矩形再去連線鏡片，那麼矩形的中軸將很難移動到和圓心相交的位置。

步驟 3：調整搜尋圖示在模版中的位置，因為幾何視覺差的關係，要讓圖示重心平穩，那麼就要向右下角偏移，最終效果見下圖。

2. 聊天圖示

聊天圖示的設計和搜尋圖示一樣，需要通過幾何圖形的組合完成，但不同於搜尋圖示的是，該圖示需要應用到路徑查詢器面板的相關功能。

步驟 1：首先要畫出聊天氣泡的外輪廓，我們可以看出它是由一個圓角矩形和三角形組成，所以第一步要做的就是畫出這兩個元素。

步驟 2：將它們連線並垂直方向居中，然後使用路徑查詢器面板的「聯集」選項，將它們合併成一個圖形。

步驟 3：在輪廓內部畫一長一短兩條 2pt 寬的矩形。

步驟 4：調整圖示在模版中的位置，根據視覺差要將圖示向下偏移，最終效果見下圖。

3. 檢視圖示

檢視圖示的設計也需要應用路徑查詢器的功能，實現過程也非常簡單。

步驟 1：畫兩個 2pt 描邊，垂直方向對齊且相交的圓，並使用路徑查詢器中的「交集」功能獲取它們相交的部分。

步驟 2：將這個圖形置入到模版中，然後可以通過拖動圖形大小的方式，更改它的左右兩邊到畫素對齊的位置（這個形狀的比例發生變化是沒問題的）。

步驟 3：在中央位置新增一個 8pt 大小的圓，就完成了最終的效果。

4. 心形圖示

心形圖示如何繪製，對於新人來說是一個非常常見的問題。很多人都不知道具體該怎麼畫出這個圖形，而心形圖示又幾乎被運用在所有應用中，所以我們就要巧妙運用幾何圖形的組合。

步驟 1：畫兩個矩形，一個豎直一個水平放置，並將上方和右側的兩個邊緣進行圓角處理。

步驟 2：將兩個圖形進行移動相交，並保證上方和右側的兩個半圓正好緊貼在另一個矩形的邊緣，然後使用路徑查詢器中的「聯集」功能，就可以得到一個躺著的心形。

步驟 3：將心形進行旋轉，並置入到模版中，新增圓角細節，略微向下偏移，就可以得到下圖的最終效果。

5. 卡券圖示

卡券圖示有一個外輪廓和內部的虛線部分，外輪廓在上下有兩個半圓的凹槽，要通過兩個圓進行裁切。

步驟 1：畫一個 28pt * 24pt的圓角矩形，並在上下方各畫一個 4pt 大小的圓，與矩形的邊緣相交。

步驟 2：確認兩個小圓圖層順序在矩形的上方，然後選中三個圖層，使用路徑查詢器中的「減去頂層」即可得到外輪廓。

步驟 3：最後，就是畫出卡片中的兩條「虛線」，再置入到模版中，就可以得到下圖的最終效果。

6. 房屋圖示

從房屋圖示的形狀中，我們可以看出它包含了三角、圓和矩形這三個形狀，主要的難點是如何通過三角形和矩形畫出外部的輪廓。

步驟 1：首先畫出一個 28pt * 10pt 的等腰三角形，再畫一個 22pt * 16pt 的矩形，將它們邊緣進行重疊。

步驟 2：三角形三個尖角的圓角依次設定為 3pt、1pt、1pt（上、左、右），再將矩形下半部分的兩個直角新增 4pt 圓角。

步驟 3：執行「聯集」操作，生成完整的外輪廓。之所以先做圓角再執行聯集，是因為提前合併兩個形狀，會導致一些尖角無法使用圓角工具。

步驟 4：畫出房屋中間的圓形，然後將圖形置入模版中，就可以得到下圖的最終效果。

7. 齒輪圖示

齒輪在 UI 中一般作為設定的圖示使用，也是常用圖示中最難畫的圖示之一。

步驟 1：畫一個 28pt 的大圓，然後再畫一個 8pt 的小圓，置於圓的左側。然後使用「旋轉工具」，將小圓旋轉中心固定到大圓的圓心中，按回車鍵，在彈出的對話方塊中選擇 60° 然後點選複製按鈕，生成第二個圓。之後再按 Ctrl / Command +D 重複操作 4 次，就可以得到完整的圓環。

步驟 2：保證周圍的 6 個圓在大圓的上層（一般來說，新畫的六個小圓必然在大圓上層），並將 7 個圓全部選中，執行「減去頂層」操作。

步驟 3：最後，將所有內圓角改為 2pt，再畫一個直徑 8pt 的內圓，然後在模版中調整到正確的位置即可，就可以得到下圖的最終效果。

8. 檔案圖示

檔案圖示也是一個很簡單，但是大多數人就是做不好的圖示，右下角的折角難倒了很多新手，在這裡我們用一個簡單的方法進行實現。

步驟 1：先畫一個 20pt * 23pt 的圓角矩形（高不是偶數，後面會解釋），然後要先把右下角的缺口做出來。這裡如果要使用減去頂層的方法做也可以，但我們要用一個更簡單的操作，在右下角頂點上方和左側 6pt 的位置各新增一個錨點，然後使用「刪除錨點工具」刪除右下角頂點的錨點，就可以得到一個傾斜的切口。

步驟 2：在右下角畫一個圓角為 4pt 的矩形，然後將其中一個邊與上個步驟的缺口相交，相交的部分即為折角的部分。這時候選中兩個矩形，使用「形狀生成器工具」（快捷鍵 Shift + M），點選一下圖示的部分，就會生成一個新的形狀組，接著取消它們的編組，再選中多餘的圖形進行刪除，就可以得到一個完整的折角效果。

步驟 3：最後，設定大圓角（4pt）和小圓角（2pt），並在內部新增3個圓角矩形，再根據幾何的視覺差將圖示置入模版中，向下移動一個畫素，就可以得到下圖的最終效果。

線性圖示操作總結

作為圖文教程，沒辦法精細還原每一步操作，即使我們對第一部分的圖示設計理論已經有了深刻的認識，但在實際操作階段還是有很多小細節會阻撓我們的設計進度。下面，我們會列舉一些具體的問題，幫助大家更好地認識和解決操作過程中的難題。

1. 柵格的使用

針對柵格的使用，為了便於演示，我都給出了具體的數值，在最後一步才置入到模版中。實際上，我們應該在一開始的繪製中就在模版中進行，而往往剛開始畫的圖形尺寸是不能代表最終效果的。

比如最後一個檔案圖示中，為什麼是 23pt，並且偏下 1pt。是因為一開始建立 24pt 高的矩形，在完成最終效果以後會發現重心上移，而且整體偏大了（下圖第一行），這時候縮減高度才能保證視覺的穩定性（下圖第二行）。而房屋屋頂的三角形，我們使用的是 28pt 撐滿畫布，這也是經過了不斷地嘗試，測試了多種寬度和圓角效果後才確定出來的，並不是一蹴而就的。