填一下之前挖的坑，上一篇文章也提到了，圖標畫法從標準化角度考慮會分為兩種：一種是采用IOS的標準，一種是谷歌的Material Design標準。谷歌的Material Design圖標規(guī)范又分為：產(chǎn)品圖標和系統(tǒng)圖標。那今天先講一下谷歌的產(chǎn)品圖標。先來理解下谷歌是如何規(guī)范的產(chǎn)品圖標，如何繪制產(chǎn)品圖標。

目錄

1.1 什么是產(chǎn)品圖標

1.2 尺寸與網(wǎng)格

1.3 關鍵線

1.4 繪制產(chǎn)品圖標

1.1什么是產(chǎn)品圖標

產(chǎn)品圖標是品牌和產(chǎn)品的視覺表現(xiàn)。圖標以簡單、大膽、友好的方式傳達產(chǎn)品的核心理念和意圖。雖然每個圖標在視覺上是不同的，但是一個品牌的所有產(chǎn)品圖標都應該通過概念和執(zhí)行來統(tǒng)一。這些指南是一個起點，以確保您的產(chǎn)品圖標顏色和關鍵元素反映您的品牌身份。以上是谷歌MD對產(chǎn)品圖標的釋義。我覺得可以簡單理解為應用程序的Logo（標識），如下圖所示。

1.2尺寸與網(wǎng)格

創(chuàng)建產(chǎn)品圖標時的基礎尺寸是48px，這里的48px是1:1的尺寸，也是原始尺寸。在谷歌的Material Design中使用的尺寸單位是"dp"不是"Px"。Px（像素）相對比較好理解我就用Px來進行說明了。至于為什么要用48這個尺寸做基礎尺寸，谷歌官方也沒有做明確的解釋說明，我個人猜測與“DPI”關系很大，不擅長的知識就不敢亂講了。

那當我們實際設計一個圖標時，并不是按照48px這個基礎尺寸標準來做的，而是要把48px這個尺寸放大4倍來做，就得到了192px這個尺寸，我們的所有圖標繪制的操作都是在192px這個尺寸里面進行繪制的。由于整體尺寸被放大了4倍，網(wǎng)格基準也由1px變?yōu)榱?px，因此就非常方便我們?nèi)ヒ?guī)范圖標里的各個形狀了。

1.3關鍵線

當我們把圖標的設計尺寸和網(wǎng)格都設置好，就要約束設計尺寸192px里面的圖標的形狀了，所有形狀隨便畫就缺少了統(tǒng)一性，大小不一形狀各異，又不美觀又不實用就不規(guī)范了。那要如何約束形狀呢，這里就要用到關鍵設計線了，簡稱關鍵線（keyline）。大家按照下圖給出的參數(shù)來繪制出這四種關鍵線，一定要繪制在一個文檔里！如下圖所示。

標注1（正方）：152px*152px，曲率為8px；線1px；

標注2（正圓）：176px*176px，正圓；線1px；

標注3（垂直矩形）：高176px，寬128px；曲率為8px；線1px；

標注4（水平矩形）：高128px，寬176px；曲率為8px；線1px；

繪制完成之后，我們將繪制好的四條關鍵線水平垂直居中對齊，并且按照最外圍（192px*192px）的矩形框來繪制對角線，水平線和垂直線。之后就得到了下面的圖。

1.4繪制產(chǎn)品圖標

這篇文章會非常的長，圖片縮小了怕大家不好理解，遺漏部分細節(jié)也怕大家不好理解，沒辦法只能增加篇幅了。我可能只會講解一個產(chǎn)品圖標的繪制方法了，講多少取決于篇幅長度。我是以谷歌的產(chǎn)品圖標來做示例，谷歌的圖標較為規(guī)范，先講一下“谷歌郵箱”這個產(chǎn)品圖標應該怎么畫。

先來繪制一下矩形框，矩形框的尺寸跟上面繪制的“水平矩形關鍵線”的尺寸相同，但這里的曲率取決于框內(nèi)形狀的曲率。就像這個谷歌郵箱的圖標的“M形”，是由“I”“V”“I”組成的，矩形框的曲率就取決于IVI這些形狀的曲率。

把谷歌郵箱中包含的M要素拆開，就得到了形狀“I”V“I”，我們先來繪制一下“形狀I”。形狀I的高度是關鍵線的高度，而寬度設置的是20px（5個網(wǎng)格單位），也可以設置16px或24px，差別在于看上去寬一點或窄一點。

形狀I的寬度是20px，它這里是圓角，所以它的曲率設置為10px。我們在軟件中設置的曲率是矩形的“一個角度的曲率”，一般我們用到的矩形是四角矩形（有四個角）。如果這個形狀的高度是20px，那單個角度的曲率設置為10px，就會形成一個半圓。如下圖所示，左上、右上、左下的曲率均為10px，而右下角的角是直角，所以要把它的值設置為0。

那這樣的話呢M形狀中的I形狀部分大致就畫好了，接下來填補一下細節(jié)。谷歌郵箱這個產(chǎn)品圖標中把所有形狀加了個輪廓線，那具體為啥要加輪廓線呢，我猜測可能是加強質(zhì)感細節(jié)，或使各個輪廓變得更清晰吧。不管怎么樣他加了我們就做一下吧。做輪廓線可以直接復制一層出來然后添加一個邊，但我個人建議用“布爾運算”的減去來做輪廓線，這樣做后期修改、導出SVG也更標準。這里對輪廓線的粗細也有一定的標準，我這里建議用2px，線設置粗了很粗糙。

當我們把一個形狀I畫好，直接再重新復制一個圖層，然后“水平翻轉”就得到了另一頭的形狀I了。那這樣兩邊的I就畫好了，接下來畫上面的形狀V。

繪制形狀V并不是簡單的繪制一個矩形，調(diào)整一個角度然后水平翻轉一下就行了。谷歌郵箱這個圖標他加了自然陰影，這個陰影是與形狀V相互關聯(lián)的。如果形狀V的“”和“/”部分沒有落在陰影上，就會顯得十分的不自然，非常不規(guī)范。所以我們在繪制形狀V之前，需要把自然陰影的輔助線給畫出來。首先要找到“水平矩形關鍵線”的“對角線”，如下圖所示。

由于這個自然陰影的位置是在“形狀I”直角部分的末端，所以我們要下移“對角線”至形狀I直角部分處。這樣的話自然陰影的輔助線就做好了。

接著我們再畫“形狀V”部分。垂直著在繪制一個跟“形狀I”一樣規(guī)格的形狀，把下面的兩個角的曲率都設為直角。并把這個形狀旋轉至54°（只有這個角度能跟對角線對上）。

接下來沿用上述加輪廓線的方法，把輪廓線加上去就可以了。在重復一下，這里的輪廓線建議用兩個矩形結合布爾運算去減，而不要直接繪制一個矩形邊。

之后再復制一個圖層組并水平翻轉它，兩邊的形狀用布爾運算加到一起，把多余的點去除，整個V型就做好了，再把它按照輔助線的位置拼到I形的位置上，那整個“M形”就做好了。

我們再按照之前畫的自然陰影輔助線，來繪制小陰影。小陰影肯定是能與M形完美對上的，如果角度沒有對上，就說明輔助線的繪制角度有問題。

繪制大陰影稍微有點麻煩，需要再使用“垂直矩形關鍵線”，我們需要找到“垂直矩形關鍵線 - 半徑的一半”，如下圖所示這個位置，然后在這里標一個點。

找到這個點后，再找到與左面的下移對角線產(chǎn)生的輔助線的起始點，然后再把它與上面找到的點相連，如下圖所示。

找到這兩個點并進行連線后，再根據(jù)大體的輪廓進行繪制，大陰影就被繪制出來了，如下圖所示。

最后我們看一下最終效果。所有的形狀我都是根據(jù)谷歌的規(guī)范來進行繪制的，當然了具體的一些細節(jié)谷歌是沒有講的，谷歌只做的大體規(guī)范，里面的細節(jié)完全要根據(jù)自身理解去進行解析。

作者：羅耀_UI

原文鏈接：https://www.zcool.com.cn/article/ZOTk4NDUy.html