本篇為如何從零構建UI元件及設計規範之設計全域性樣式篇，主要介紹在元件和介面設計中，涉及全域性樣式的最基礎構成元素，基礎樣式的使用及規則內容。
《如何從零構建UI元件及設計規範》共分為5個系列，分別為《一：介紹篇》、《二：設計原則》、《三：全域性樣式》、《四：基礎元件》、《五：通用模版》
本篇介紹涉及全域性樣式的最基礎構成元素，基礎樣式的使用及規則內容，它是定義設計規範中的最基礎條件，決定了整個產品的風格及調性。
顏色的應用能夠為九曳的產品和介面帶來統一且可識別的一致性。
平臺使用九曳新品牌綠色作為主色調，其中 Light 常用於 hover，Dark 常用於 active。一般情況下，按鈕、標籤頁等除特別標註元件外，元件的顏色以「輔助品牌色」為準。
中性色常用於文字、背景、邊框、陰影等，可以體現出頁面的層次結構。整體中性色偏一點點藍，讓其在視覺體現上更加乾淨。根據使用場景，中性色主要被定義為3類：文字、線框、背景。
輔助色為介面設計中的特殊場景顏色，常用於資訊提示，比如成功、警告和失敗。
在產品本身中使用到品牌的色彩數量較少，一般除按鈕以外，基本還是「輔助品牌色」，即鈷藍色調為準。
字體系統遵循一致、靈活的原則推薦 macOS（iOS）優先的策略，在不支援蘋方字型的情況，使用備用字型。
中文優先順序：PingFang SC、Hiragino Sans GB、Microsoft YaHei
英文優先順序：Helvetica Neue、Helvetica、Arial
字型程式碼
為了更好的閱讀體驗，和一個螢幕展示更多的資訊，我們將原先的 14 更改為 13 大小。
考慮到我們系統的使用物件非常注重效率的提升，第一個螢幕可容納的資訊量是非常重要，13 大小既能滿足使用者的可讀性，資訊之間的距離也能間接的變大，給使用者更舒適、清晰的閱讀感受。
正文和輔助字號使用 Regular 字重。所有的標題使用 Medium，以突出層次，讓資訊清晰。字型加粗的程式碼是600。
行高是影響使用者閱讀體驗的重要因素之一，一般英文的基本行高通常是字號的1.2em左右，而中文因為字元較為複雜，所以中文相對英文行高更大，現在中文的公認行高為1.6em之間會有一個比較好的視覺閱讀效果。透過計算，定義了5種字號的大小以及相對應的行高：
需要考慮字型顏色，將易讀性和可訪問性作為首要考慮因素。在執行的文字中保持顏色的中性，將藍色用於某一些操作。
圖示可以更好的幫助使用者理解介面資訊，給予正確、友好的指引。
簡約造型簡單不繁雜，不做過多的裝飾，有較高的易讀性和辨識性。
一致圖示的設計風格，採用的圓角需要保持一致性。
圖示尺寸尺寸為 24x24px，包含2px溢位區域。
造型簡約避免過多的筆畫，保持圖示簡約、乾淨。
尺寸大小產品設計中使用的icon實存需要按照制定的規則尺寸設計。
顏色標準圖形應該是字形，並應使用單一的純色填充，且不應該帶有陰影。
樣式選擇清晰而不是好看或者個性的風格。
隱喻不要單獨使用有歧義的圖示。使用正確的使用者可以識別的圖示（表格和檔案刪除除外）。
透過投影反映給使用者，當前的元素與底層背景的距離來反應層次關係。
小投影主要用於小模組及小元素之間，輕量級提示或刪除。
中投影主要用於一些較大模組以及啟用需要操作的元素，例如下拉選項、氣泡提示等。
大投影主要應用於一些大模組，例如輕提示、通知訊息、模態彈窗等。
小投影
中投影
大投影
為更好的統一標準和使用體驗，九曳設計規範為此提供了一套常用的文案集合。
在產品設計中需按照標準的用法使用。
感嘆號 一般情況下，正面用於使用感嘆號，負面使用句號。所以「你的訂單量已超過限制。」使用句號，需注意確保在上下文（包括標題等）中使用不超過一個感嘆號。
禮貌用語 禮貌性語言用不好會給使用者傳達一些錯的語調和感受。需謹慎使用“請”和“謝謝”之類的術語。
說明出錯原因 明確告知使用者，發生了生麼，並告知是何原因。
給出建議 完整闡述資訊，並給出建議。
直接使用「你」 直接使用你、我和使用者進行對話，避免使用「您」，讓使用者感覺過於客套和討好。
尊重使用者 給使用者支援和鼓勵，不強迫命令。
使用阿拉伯數字 人對於數字的感知速度更快，使用數字表述更加有效，所以統計的資料使用阿拉伯數字。
資訊之間的關聯度越高，它們之間的距離就應該更加接近，讓給感覺更像是一個視覺單元；反之，則是多個視覺單元。透過通知控制間距，實現頁面資訊頁面的結構和資訊層次。
我們的比列是以8px（1rem）單位為基礎。使用 8 的倍數來定義模組間距於元素的尺寸。
設計頁面 表格頁面和新增頁面。
文字間距文字間距需要考慮行高。
如何從零構建UI元件及設計規範（一）：介紹篇
如何從零構建UI元件及設計規範（二）：設計原則
本文由 @徐銀高 原創釋出於人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基於CC0協議