系統圖標背后的Material基礎規范

Sponsor

前面通過Gmail的案例讓大家初步了解產品圖標的繪制，這篇文章則闡述Android的系統圖標基礎規范，讓大家掌握Android下的圖標風格、尺寸和網格布局。通過本文的學習，大家可以繪制簡單的系統圖標。

上一篇文章講到了谷歌的Material Design產品圖標規范。谷歌的Material Design圖標規范分為：產品圖標和系統圖標。今天來講一下系統圖標，系統圖標比較復雜，分為上下兩章來講，第一章主要講系統圖標的基礎認知，第二章講系統圖標的繪制方法與解析。

谷歌規范相對過于范式化，他們只告訴大家界面的大體規范，而具體里面的為什么要這么做完全沒有講，思維和思考一點沒提。很多細節都是自己根據自身經驗去做的補充，很多細節也都有相應的描述，希望能幫助到大家提升些設計認知吧。

目錄

1. 什么是系統圖標

1.1 基礎圖標
1.2 棱角圖標
1.3 線性圖標
1.4 曲率圖標
1.5 深淺圖標
1.6 絕對棱角圖標

2. 尺寸與網格

2.1 視圖放大10倍
2.2 矢量工具繪制
2.3 避免小數位

3.圖標區域

3.1 圖標尺寸
3.2 尺寸24px
3.3 尺寸20px

4.關鍵線

4.1 24px關鍵線
4.2 20px關鍵線

5.繪制系統圖標

1.什么是系統圖標

谷歌的Material Design把下圖中所示的這些圖標習慣稱作系統圖標，系統圖標會根據不同的系統/應用的需求來繪制相應的圖標。系統圖標中包含基礎圖標，上箭頭、單選圖標、復選圖標、設置和位置等，都屬于基礎圖標。在谷歌規范中系統圖標有5種不同的主題樣式，分別是有棱角圖標、線性圖標、曲率圖標、深淺圖標和絕對棱角圖標。我們來一個一個來解析并理解它們之間的差異。

1.1 基礎圖標

基礎圖標屬于整個系統圖標里的一個小分支，主要由“基礎的圖標”組成的。如上下左右箭頭、時間、位置、搜索、設置等都屬于基礎圖標，基礎圖標應用最廣也最為常用。在建立圖標體系時應先考慮建立基礎圖標，這樣利用帕累托定律就能減少80%的研發成本并帶來20%的實際價值。

不是所有基礎圖標都是一種樣式，不同的公司和業務對基礎圖標的定義均不同。

1.2 棱角圖標

有棱角的圖標并不是所有輪廓和細節全部都是直角的沒有曲率的，是大體輪廓是有曲率的，而里面具體的細節是直角的。輪廓指的是圖標中最大圖形的邊角；具體細節指的是圖標中的最小單位、端點和末端。棱角圖標的特點是外輪廓有曲率，而里面的細節是直角，如下圖所示。

棱角圖標的視覺表現有輪廓圓潤細節棱角，個人感覺有包容性和親和力的同時又能體現專注和專業性，非常適合中國人的思維表達（外有圓滑內有己見）。這類圖標應用較廣也最為常用。

1.3 線性圖標

線性圖標就比較好理解了，即圖形不做全部填充的圖標。圖標不全部填充外輪廓就會形成條線，進而形成線性圖標。線性圖標也不一定就是完全閉合的，斷開部分輪廓線也是可以的。線性圖標的特點是視覺表現更輕盈、更精致、更清爽、更有活力等。但它的缺點也很明顯，線條過于纖細會給人一種信賴感不強的感覺。如下圖所示，線性圖標（左圖）與棱角圖標（右圖）的對比圖。

線性圖標從細節上應該分為兩種，一種是圖標中的最小單位、端點和末端有曲率，一種則沒有曲率（直角）。細節上的差異會給用戶帶來視覺感官上的不同，并影響著整個產品的性格與風格。

線性圖標的視覺表現給人感覺更精致，更細膩，常用于時尚產品、電商、女性產品/商品和年輕化產品等。在移動端設計中常用于狀態切換來突出層級關系。

1.4 曲率圖標

曲率圖標指的是不管是圖標中最大圖形的邊角，還是圖標中的最小單位，只要是矩形就都會有一定的曲率。曲率圖標中矩形的曲率并不是絕對的，只是說正常情況下圖標所包含的矩形都有一定的曲率。有些圖標內部矩形的構成就是需要直角，強行把這些直角轉換為有曲率的矩形，就是失去這些矩形所帶來的固有印象。如下圖所示。

曲率圖標的視覺表現給人感覺更柔和，更有親和力，常用于較為年輕化的產品、母嬰產品、具有親和力印象的產品中。如果產品要傳達一種“專業性”，用曲率圖標就不是很合適了。

1.5 深淺圖標（雙色圖標）

谷歌稱這種圖標為“Two-Tone”，深淺圖標 / 雙色圖標。怎么叫它都行，只要明白它的含義問題就不大。我個人認為一個系統圖標中不可能有相同的明度/飽和度兩種同級的顏色，圖標中的顏色一定是有層級關系，顏色同級會顯得很雜亂，所以我個人習慣稱為深淺圖標。深淺圖標的特點一般由外輪廓的線條和較淺顏色的矩形填充而成的。如下圖所示。這類圖標的特點是充滿個性和趣味性的，十分有趣和多樣性。

深淺圖標 / 雙色圖標的視覺表現給人感覺很有活力，有個性、有趣味和不單調。

1.6 絕對棱角圖標

上面講到了“棱角圖標”的特點是外輪廓有曲率，而絕對棱角的圖標是圖標中所有矩形均無任何曲率，全部都是方方正正的，這就是絕對棱角圖標了。絕對棱角圖標的特點是棱角過于尖銳，厚重并穩重，但沒有親和感和親和力，相反卻給人一種十分冷峻和專業的感覺。

絕對棱角圖標的視覺表現給人感覺太冷峻，太有機械感了，不適合用于表達情感的設計中，也不適合用于營造人文氣息的設計中。常用于傳統企業、男性產品、專業性產品中。

2.尺寸與網格

系統圖標與產品圖標的尺寸是不同的，系統圖標的設置會更繁瑣一些，圖標尺寸分別有24px和20px這兩種，不會像產品圖標那樣放大4倍，都是按照1:1來進行繪制的。每一種尺寸中又包含“安全區域”和“裁剪區域”，安全區域中還有相應的4種關鍵線來約束圖標，繪制起來較為復雜。

2.1 視圖放大10倍

在我們用繪圖工具繪制系統圖標時，原尺寸24px/20px顯得太小了。當我們創建好一個24px*24px大小的圖標畫布時，需要把這個畫布的視圖比例放大10倍至1000%，這樣就能看清局部的細節了。而圖標網格基數可以設置為2px，繪制線條較細較為精確的圖標可以設置為1px。

2.2 矢量工具繪圖

我們繪制圖標時盡量用矢量繪圖工具來繪制圖標，而不要用位圖工具，如矢量工具Sketch、AI、Affinity Designer，用位圖工具Photoshop來繪制圖標時，只要有曲率就會存在雜邊，尤其是圖標被放大以后，這種效果更加明顯，這樣也就無法精確的繪制一個圖標系統了。

2.3 避免小數位

我們在用矢量工具繪制圖標時，要仔細看好圖標的尺寸和位置避免產生小數位。正確的數值如圖標大小24px*24px，要是繪制成23.9px*23.7px這樣的尺寸就是不對的，一定要仔細看好圖標的尺寸避免產生小數。在我們把圖標實際應用到頁面中時，還需要留意（x,y）坐標的位置和數值，同樣也要避免小數位，要做到精確無誤，0.1個像素也不能放過。如下圖所示。

3.圖標區域

圖標區域指的是圖標的安全區域與裁剪區域的集合，也就是整個圖標畫布的區域。谷歌是這么解釋的，圖標內容應該保持在安全區域內。在安全區域內，圖標有足夠的顯示空間，不會被視圖截斷。裁剪區域指的是除安全區域外的區域。如下圖所示。

3.1 圖標尺寸

當我們繪制系統圖標時，所有形式的圖標必須繪制在指定圖標的區域中，這樣就可以使所有系統圖標得到一定的統一和規范。谷歌定義了兩種尺寸的系統圖標，分別是24px和20px，因為圖標尺寸的不同會導致安全距離和裁剪區域的相對變化，所以得把兩個圖標的尺寸都講明白。至于為什么要規定這兩種尺寸而不是其他尺寸谷歌是沒有講的，可能是數據、可行性、兼容性測試的結果吧。接來下我們根據這兩種圖標進行詳細的解析。

3.2 尺寸24px

先來理解一下24px這個尺寸的圖標的安全區域。圖標內容被限制在20px*20px的安全區域中，四周留有2px的留白。四周2px的留白構成了內邊距，圍繞著20px*20px的安全區域。

3.3 尺寸20px

再來講一下20px這個尺寸的圖標的安全區域。圖標內容被限制在16px*16px的安全區域中，四周留有2px的留白。四周2px的留白構成了內邊距，圍繞著16px*16px的安全區域。圖標尺寸20px相對較小，可以應用在緊湊型的頁面布局中。

4.關鍵線

當我們把圖標的設計尺寸和網格都設置好，就要約束設計尺寸24px/20px里面的圖標的形狀了，所有形狀隨便畫就缺少了統一性，大小不一形狀各異，又不美觀又不實用就不規范了。由于系統圖標不像產品圖標那樣有一個固定的尺寸（48放大4倍），就會導致兩種尺寸的產品圖標中均包含4種關鍵線形狀，還是得一個一個來講。

4.1 24px關鍵線

大家按照下圖給出的參數來繪制出這四種關鍵線，一定要繪制在一個文檔里！線段的寬度用于展示時可以設置為0.1px或0.2px，如下圖所示。

標注1（正方）：18px*18px，曲率2px；線0.1/0.2px；
標注2（正圓）：20px*20px，正圓；線0.1/0.2px；
標注3（垂直矩形）：高20px，寬16px；曲率2px；線0.1/0.2px；
標注4（水平矩形）：高16px，寬20px；曲率2px；線0.1/0.2px；

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

4.2 20px關鍵線

跟上面繪制24px圖標的方法一致，只是要重新修改一下數值。線段的寬度用于展示時可以設置為0.1px或0.2px，如下圖所示。

標注1（正方）：14px*14px，曲率2px；線0.1/0.2px；
標注2（正圓）：16px*16px，正圓；線0.1/0.2px；
標注3（垂直矩形）：高16px，寬12px；曲率2px；線0.1/0.2px；
標注4（水平矩形）：高12px，寬16px；曲率2px；線0.1/0.2px；

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

5.繪制系統圖標

當我們掌握了圖標的風格特性、圖標的尺寸與網格、圖標的區域和關鍵線等重要規則后，就可以繪制出一些較為簡單的圖標了。但往深了研究，繪制系統圖標不僅于此，還需要去理解并分解圖標的構成，包括圖標的筆劃末端、拐角、內部區域、筆劃、內部筆劃和邊界區域等等，不同的繪制方法均有不同的規則約束，如線的寬度、角的曲率、間隔數值、筆畫傾斜角度與視覺修正等等。這章篇幅也過長了，我就把這些內容分為兩章來講。這章主要講解系統圖標的基礎認知，下一章講解系統圖標的解析與局部細節的掌控。

謝謝閱讀
感謝支持

結尾我想與大家分享一下新的感悟。我們生活在三維（長寬深）的物質世界中，能感知到的全部都是“物質”形態，所以才會重視物質，渴望體驗物質上的需求來慰藉精神所需。正因為我們處于三維世界中，而感知不到其他維度，也不會存在其他維度的認知，我們才會深陷于物質世界中。

最近我在想一種設想，人是由“意識”和“肉身”構成的，例如我們在睡覺或者冥想，我們的肉身是靜止不動的，而意識卻在發生變化，所以我覺得肉身與意識本是一體卻不分離。那有沒有一種可能，我們用一種方法來訓練或者提升我們的意識，讓我們的意識去感知萬物。人的肉身和科技是無法穿越時空來揭開宇宙奧秘的，但意識不同，人是否能使意識脫離本體來打破三維的約束，進入到五維空間（意識體），是不是就可以利用人的意識去控制四維時空（時間），就可以憑意識穿越到任何一個時間點，這樣就能解開宇宙的奧秘與人類的起源了呢。

我目前就有這么一個設想，為了找到我想要的答案我就查找了一些宗教知識，發現很多知識與我的設想都不謀而合，也找到了一個關鍵詞“靈修”，靈修的目的就是讓人的意識從三維世界中脫離出來，并進入更高維度的空間中，只是稱呼不一樣。

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

贊助商鏈接

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