設計系統搭建全流程：全局樣式

之前的文章我們主要講述了搭建設計系統前的一些準備工作，本篇開始我們就進入到具體的搭建內容了。由于筆者是做 HMI 設計的，所以很多內容是針對 HMI 設計來講的，希望大家可以舉一反三，得到自己想要的東西。

上期回顧：

接下來我們進入正題，本篇文章我們主要講述全局樣式的搭建過程，全局樣式按照我構建的組件庫分類來講，包括：柵格系統、顏色樣式、字體樣式、圖標樣式。首先我們先來講述下柵格系統：

一、柵格

柵格是遵循一定的規則，運用固定的網格，進行頁面的布局設計，使布局版面簡潔有規則，提高設計效率與統一性。

簡單來講：就是使用垂直或者水平的參考線，將畫面簡化為有規律的格子，并用這些格子作為參考，以構建秩序性版面的一種設計手法，基于構建的網格來定義信息區域的框架，以保證頁面的每個區域都能夠規則的排布。

1. 基本構成

在柵格的使用中，我們會對不同區域進行定義，一個柵格系統主要由 Container：容器、Columns :列寬、Gutters：水槽、Padding：內邊距 四部分組成。

Container/容器：需要布局信息的版面區域，柵格系統的其他三大元素都要基于該容器的大小去計算。

Columns /列寬：從上到下的垂直空間區域，是承載內容的容器。

Gutters/槽：相鄰兩個欄之間的間距，把控著頁面的留白與呼吸感。

Padding/內邊距：可以視為安全距離。柵格和內容區域的距離間隙。

2. 計算公式

當對區域內的單元格進行柵格標注時，我們可得出公式為：

NC=N*Column+（N-1）*Gutter+2*Padding

當屏幕進行適配時，相同密度下，通過調整柵格中 Column 的數值進行適配。

3. 應用

筆者從事 HMI 設計，所以一般來講，在構建設計系統的時候柵格采用 12 柵格體系，既能保證頁面元素的排列多樣，也可以不至于頁面元素過于凌亂。

元素的排布應落在 Column 上，而不是 Gutter 上。

4. 怎么找到適合的柵格

在做 HMI 的柵格的時候，不同于 PC 端，當一個車機系統架構出來的時候，基本上容器寬高就定義好了，所以對于車機的屏幕來講，它的柵格系統寬高屬性是固定的，那么接下來就是找到一個適合的柵格系統。

首先要說明的是，柵格系統不是臆想出來的，它是為了界面視覺更好呈現，幫助設計師快速布局的。所以我們首先要根據 keypage 界面，判斷出視覺風格，根據視覺風格構建合適的柵格。

上圖是一些車機系統的界面，從其中我們可以看出來，有的界面屬于緊湊型，有的是屬于寬松型，這就是視覺風格的表現，同時也是我們去制作柵格系統需要考慮的問題，對于緊湊型的視覺風格，Gutters 會小一些，對于寬松型的視覺風格，Gutters 就會大一些。

當我們對視覺風格有一個基礎把握以后，接下來就進入到制作柵格體系的過程了。在這里我一般會使用 Numbers 進行柵格體系的構建，通過輸入不同的參數，構建出不同的柵格數據，以供后續進行驗證選擇。比如：對于一個 1728*756 的應用區域來講，我們構建的柵格體系可以有如下幾種：

首先根據柵格計算公式計算出不同 Gutters 下 Column 的極值，然后根據不同的 Gutter 制作不同的柵格參數，以便篩選出符合要求的柵格數據。在這里憑借一些經驗來進行輸入。

1. Gutters 以 8 作為作為柵格中的最小單位，如果無法獲取合適的柵格，可以使用 4 為最小單位。
2. 所有參數數據盡量選 2 的倍數，不可出現小數點，如果無法找到合適的柵格，才考慮進行打破。
3. Margin*2 一般小于 Column*1
4. Gutters 一般不小于 8dp，不大于 48dp
5. ……

根據上面的經驗判斷，選出了十個可以使用的柵格體系，如下圖所示。然后就是對選出來的柵格體系進行具體界面驗證，通過對一些頁面進行柵格布局，來考量哪個柵格體系更合適，以便確定需要的柵格體系。

在本例中，可選擇柵格體系范圍還是比較大的，但是到了具體的項目中，很可能遇到更復雜的情況，發現按照上面的邏輯無法選擇出任何一個柵格體系，那么就需要繼續優化邏輯進行進一步的篩選了。

二、顏色

顏色體系在產品中主要起到傳遞信息、創建層級、表達情感、構建一致性的目的。

1. 構成

一般來講，在構建顏色體系的時候，品牌色已經定義好了，不管是從公司 VI 還是項目風格提煉而來。然后根據定義好的品牌色構建其他色彩，可以是鄰近色、補色等不同的顏色種類共同構建出一套完整的色彩體系。

對于 HMI 設計來講，不需要像很多設計系統那樣子構建那么多色彩，那么多梯度，只需要按照項目來打造自己項目的色彩體系即可，如下圖所示：

色彩體系主要定義了品牌色板、輔助色板、警示色板、中性色板、功能色板 五部分。

品牌色板：常用顏色，作為系統主色彩貫穿整個系統中，是系統中最核心、最高頻使用的顏色，常用于強調信息、引導操作，并在很大程度上決定了系統整體的基調和風格。

輔助色板：用于重要程度較低的的操作或內容。

警示色板：應用于異常、危險操作以及警告提醒等場景。

中性色板：針對正文和圖標，占位符、分割線、背景等元素和組件，根據不同的使用場景使用恰當的正文色彩。

功能色板：功能色是指用于特定場景、表達特殊語義的顏色，例如成功、警告等狀態顏色。

上述色彩體系只是我平時搭建設計系統時候用的分類方式，并不適用于所有項目，大家可以根據自己具體的項目搭建屬于自己的色彩體系。

三、字體

字體是界面設計中最基本的構成之一。一套設計系統中通過合理的使用字號、字重和顏色來強調界面中重要的信息。

一般來講，一套設計系統中只使用一種字體，因為多種字體的混合使用會使界面看起來零散和草率。

不同于移動端和 pc 端，不同的車廠都會有不同的字體需求，所以在制作字體體系的時候，需要根據具體的字體集進行評估。

1. 字重

系統中為了區分界面中信息的重要程度，可以通過不同的字重進行區分。HMI 系統中為了避免界面混亂，一般定義兩種到三種字重等級。

2. 行高

字體行高的引入主要是為了對齊相同字號的不同字體，比如：中英文、字符和數字的混合排版等。所以為了界面統一性，我們會定義每種字號的行高。

3. 字體類型

為了統一視覺和排版效果，會對所有使用的字體進行規范，生成固有的字體類型，設計師使用定好的字體類型進行設計，而不可使用其他的字號和字重。下面的是我常用的字體類型，僅供參考。

四、圖標

圖標作為界面構成的重要元素，并在一定程度上影響著整體界面的設計效果。

車機中的圖標大致可以分為兩種類型：通用型圖標和業務型圖標。我們這里主要聚焦在通用型圖標。

1. 規范

柵格作為圖標繪制的底層結構，設計的基礎。我一般選擇以 160*160 dp 的尺寸作為圖標繪制的統一柵格尺寸。線條的長短粗細、圖標的大小比例等關鍵因素均在其基礎上制定。

2. 風格統一

對于系統設計來講，會充斥著各種不同的圖標類型，那么一套統一視覺風格的圖標就會顯得尤為重要，上面我們通過使用圖標柵格規范來保證視覺重量一致，但是還有很多的細節也會影響到圖標的風格統一，比如：描邊還是填充、線寬粗細、圓角大小、傾斜角度、切口、修飾符位置等等一系列的問題都在影響著圖標的最終展示效果，所以我們在制作圖標規范的時候，這些內容都需要進行定義。

3. 尺寸

由于圖標使用的方式多樣，出現的位置各有不同，所以我們有必要對我們的圖標設定一個大小梯度，這有助于盡可能的減少我們視覺不統一現象。比如：40dp 和 42dp 的圖標使用在 list 中都可以，或者說，從視覺來講，大差不差，如果不對圖標大小進行限制，那么不同的設計同學就可能使用不同大小的圖標。這并不是一個良性的過程，所以我們有必要對圖標的大小梯度進行設定，基于本人 HMI 的經驗來講，一般我會把圖標分為：24*24、32*32、40*40、48*48、64*64、80*80、120*120、160*160 這八種尺寸。

4. 線寬

基于上述圖標尺寸和視覺風格的定義，接下來想和各位探討一個問題，那就是線條粗細。因為顯示設備一般采用方形像素，那么非整數像素會以灰度顯示，所以對齊像素點是影響圖標是否清晰顯示的最重要的因素。

我們既然設定了圖標的大小梯度，那么為了更好的呈現，我們期望可以在每種圖標尺寸下都可以保證清晰顯示，也就是說線寬都是整數，但是現實往往并不那么完美，在圖標放大縮小的時候勢必會出現小數點的情況，那么我們如何去比避免呢？

對于早期的顯示設備來講，屏幕像素質量不高，那么只有一條途徑：對每種不同尺寸下的圖標進行單獨繪制，以保證在每種尺寸下都可以完美展示，這是技術的限制，同時也是解決這個問題最好的方法。

但是對于當下的顯示設備來講，屏幕質量已經極大提升，并且現在版本更新迭代加快，很多時候時間就是效率，所以需要盡快的完成設計工作，所以大家現在更傾向于使用一種尺寸進行放大縮小生成其他的尺寸。

所以在繪制圖標的時候，我們需要去考慮選擇合適的線寬，盡可能的讓圖標可以清晰的展示，尤其對于車機屏幕來講， 并沒有手機或者電腦屏幕像素那么好，所以這件事就會顯得更加重要。在這里我一般還是會用 Numbers 進行圖標不同尺寸線寬計算。如下圖所示：

通過上圖可以看出，為了盡可能保證線寬是整數，在沒有的情況下，盡可能使用.5，減少特殊數值的出現，所以能夠滿足情況的很少。在 160 尺寸下，線寬為 20 dp 是最好的，但是當圖標為 24 dp 時線寬為 3，會顯得太粗，所以下一級合適的就是線寬為 10 dp。

這里只是我的一些經驗之談，大家在制作圖標時，可以參考這種思維模式，而沒必要完全套用，畢竟線寬粗細首先是由視覺風格決定的。

總結

本篇內容主要聚焦在全局樣式的搭建，以及我在具體工作中遇到的一些問題的具體思考，為大家提供一種思路。希望本篇文章可以對你有所幫助。如果大家有什么不同的見解，歡迎留言，我們一起探討，謝謝大家。

后續的文章我將繼續為大家介紹設計系統的控件組件的搭建流程，敬請期待～