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

目錄

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

1.2 尺寸與網(wǎng)格

1.3 關(guān)鍵線

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

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

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

1.2尺寸與網(wǎng)格

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

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

1.3關(guān)鍵線

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

標(biāo)注1（正方）：152px*152px，曲率為8px；線1px；

標(biāo)注2（正圓）：176px*176px，正圓；線1px；

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

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

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

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

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

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

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

形狀I(lǐng)的寬度是20px，它這里是圓角，所以它的曲率設(shè)置為10px。我們?cè)谲浖性O(shè)置的曲率是矩形的“一個(gè)角度的曲率”，一般我們用到的矩形是四角矩形（有四個(gè)角）。如果這個(gè)形狀的高度是20px，那單個(gè)角度的曲率設(shè)置為10px，就會(huì)形成一個(gè)半圓。如下圖所示，左上、右上、左下的曲率均為10px，而右下角的角是直角，所以要把它的值設(shè)置為0。

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

當(dāng)我們把一個(gè)形狀I(lǐng)畫好，直接再重新復(fù)制一個(gè)圖層，然后“水平翻轉(zhuǎn)”就得到了另一頭的形狀I(lǐng)了。那這樣兩邊的I就畫好了，接下來(lái)畫上面的形狀V。

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

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

接著我們?cè)佼嫛靶螤頥”部分。垂直著在繪制一個(gè)跟“形狀I(lǐng)”一樣規(guī)格的形狀，把下面的兩個(gè)角的曲率都設(shè)為直角。并把這個(gè)形狀旋轉(zhuǎn)至54°（只有這個(gè)角度能跟對(duì)角線對(duì)上）。

接下來(lái)沿用上述加輪廓線的方法，把輪廓線加上去就可以了。在重復(fù)一下，這里的輪廓線建議用兩個(gè)矩形結(jié)合布爾運(yùn)算去減，而不要直接繪制一個(gè)矩形邊。

之后再?gòu)?fù)制一個(gè)圖層組并水平翻轉(zhuǎn)它，兩邊的形狀用布爾運(yùn)算加到一起，把多余的點(diǎn)去除，整個(gè)V型就做好了，再把它按照輔助線的位置拼到I形的位置上，那整個(gè)“M形”就做好了。

我們?cè)侔凑罩爱嫷淖匀魂幱拜o助線，來(lái)繪制小陰影。小陰影肯定是能與M形完美對(duì)上的，如果角度沒(méi)有對(duì)上，就說(shuō)明輔助線的繪制角度有問(wèn)題。

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

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

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

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

作者：羅耀_UI

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