Material Design圖標規范——產品圖標

Sponsor

UI中的圖標是用戶第一次接觸和后續使用的門面擔當，隨著移動化趨勢的普及，如今說起圖標浮想起的是移動端上的圖標。移動端圖標根據系統平臺的不同有兩種標準：IOS標準和Material Design標準（Android）。

要理解Andorid的Material Design，除了閱讀官方文檔之外，還可以通過模仿Google的產品圖標，學習Google是如何解讀Material Design規范，以此繪制產品圖標。本文將通過一次完整案例讓你了解網格布局技巧和具體繪制實現，下面跟設計達人一起開始學習吧！

圖標畫法從標準化角度考慮會分為兩種：一種是采用IOS的標準，一種是谷歌的Material Design標準。谷歌的Material Design圖標規范又分為：產品圖標和系統圖標。那今天先講一下谷歌的產品圖標。先來理解下谷歌是如何規范的產品圖標，如何繪制產品圖標。

目錄

1. 什么是產品圖標
2. 尺寸與網格
3. 關鍵線
4. 繪制產品圖標

1.什么是產品圖標

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

2.尺寸與網格

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

那當我們實際設計一個圖標時，并不是按照48px這個基礎尺寸標準來做的，而是要把48px這個尺寸放大4倍來做，就得到了192px這個尺寸，我們的所有圖標繪制的操作都是在192px這個尺寸里面進行繪制的。由于整體尺寸被放大了4倍，網格基準也由1px變為了4px，因此就非常方便我們去規范圖標里的各個形狀了。

3.關鍵線

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

標注1（正方）：152px*152px，曲率為8px；線1px；
標注2（正圓）：176px*176px，正圓；線1px；
標注3（垂直矩形）：高176px，寬128px；曲率為8px；線1px；
標注4（水平矩形）：高128px，寬176px；曲率為8px；線1px；

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

4.繪制產品圖標

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

謝謝閱讀
感謝支持

結尾沒有想要寫什么，這里我留一個較為專業性的問題吧，偏平面的。
這個小問題也是我一直考驗他人的一種方法，基本上被問者回答完大致就能清楚這個人的功底與能力。
那這個問題是：

“請解釋一下什么是“空間、形狀、正形、空白、留白”之間的差異”

歡迎大家根據自己的理解在評論區探討~

作者：羅耀_UI ，站酷主頁：https://www.zcool.com.cn/u/14425487

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。