本篇為如何從零構(gòu)建UI組件及設(shè)計(jì)規(guī)范之設(shè)計(jì)全局樣式篇，主要介紹在組件和界面設(shè)計(jì)中，涉及全局樣式的最基礎(chǔ)構(gòu)成元素，基礎(chǔ)樣式的使用及規(guī)則內(nèi)容。

《如何從零構(gòu)建UI組件及設(shè)計(jì)規(guī)范》共分為5個(gè)系列，分別為《一：介紹篇》、《二：設(shè)計(jì)原則》、《三：全局樣式》、《四：基礎(chǔ)組件》、《五：通用模版》

本篇介紹涉及全局樣式的最基礎(chǔ)構(gòu)成元素，基礎(chǔ)樣式的使用及規(guī)則內(nèi)容，它是定義設(shè)計(jì)規(guī)范中的最基礎(chǔ)條件，決定了整個(gè)產(chǎn)品的風(fēng)格及調(diào)性。

1. Color 顏色
2. Font 字體
3. Icon 圖標(biāo)
4. Shadow 投影
5. Voicce 文案
6. Space 間距

01 Color 顏色

顏色的應(yīng)用能夠?yàn)榫乓返漠a(chǎn)品和界面帶來(lái)統(tǒng)一且可識(shí)別的一致性。

品牌色

平臺(tái)使用九曳新品牌綠色作為主色調(diào)，其中 Light 常用于 hover，Dark 常用于 active。一般情況下，按鈕、標(biāo)簽頁(yè)等除特別標(biāo)注組件外，組件的顏色以「輔助品牌色」為準(zhǔn)。

中性色

中性色常用于文本、背景、邊框、陰影等，可以體現(xiàn)出頁(yè)面的層次結(jié)構(gòu)。整體中性色偏一點(diǎn)點(diǎn)藍(lán)，讓其在視覺(jué)體現(xiàn)上更加干凈。根據(jù)使用場(chǎng)景，中性色主要被定義為3類：文字、線框、背景。

輔助色

輔助色為界面設(shè)計(jì)中的特殊場(chǎng)景顏色，常用于信息提示，比如成功、警告和失敗。

錯(cuò)誤案例

在產(chǎn)品本身中使用到品牌的色彩數(shù)量較少，一般除按鈕以外，基本還是「輔助品牌色」，即鈷藍(lán)色調(diào)為準(zhǔn)。

02 Font 字體

字體系統(tǒng)遵循一致、靈活的原則推薦 macOS（iOS）優(yōu)先的策略，在不支持蘋方字體的情況，使用備用字體。

字體規(guī)范

中文優(yōu)先級(jí)： ? ?PingFang SC、Hiragino Sans GB、Microsoft YaHei

英文優(yōu)先級(jí)： ? ?Helvetica Neue、Helvetica、Arial

字體代碼

-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif

主字體

為了更好的閱讀體驗(yàn)，和一個(gè)屏幕展示更多的信息，我們將原先的 14 更改為 13 大小。

考慮到我們系統(tǒng)的使用對(duì)象非常注重效率的提升，第一個(gè)屏幕可容納的信息量是非常重要，13 大小既能滿足用戶的可讀性，信息之間的距離也能間接的變大，給用戶更舒適、清晰的閱讀感受。

字號(hào)

正文和輔助字號(hào)使用 Regular 字重。所有的標(biāo)題使用 Medium，以突出層次，讓信息清晰。字體加粗的代碼是600。

字階與行高

行高是影響用戶閱讀體驗(yàn)的重要因素之一，一般英文的基本行高通常是字號(hào)的1.2em左右，而中文因?yàn)樽址^為復(fù)雜，所以中文相對(duì)英文行高更大，現(xiàn)在中文的公認(rèn)行高為1.6em之間會(huì)有一個(gè)比較好的視覺(jué)閱讀效果。通過(guò)計(jì)算，定義了5種字號(hào)的大小以及相對(duì)應(yīng)的行高：

錯(cuò)誤案例

需要考慮字體顏色，將易讀性和可訪問(wèn)性作為首要考慮因素。在運(yùn)行的文本中保持顏色的中性，將藍(lán)色用于某一些操作。

03 Icon 圖標(biāo)

圖標(biāo)可以更好的幫助用戶理解界面信息，給予正確、友好的指引。

設(shè)計(jì)原則

簡(jiǎn)約 ? ?造型簡(jiǎn)單不繁雜，不做過(guò)多的裝飾，有較高的易讀性和辨識(shí)性。

一致 ? ?圖標(biāo)的設(shè)計(jì)風(fēng)格，采用的圓角需要保持一致性。

設(shè)計(jì)規(guī)范

圖標(biāo)尺寸 ? ?尺寸為 24x24px，包含2px溢出區(qū)域。

造型簡(jiǎn)約 ? ?避免過(guò)多的筆畫，保持圖標(biāo)簡(jiǎn)約、干凈。

尺寸大小 ? ?產(chǎn)品設(shè)計(jì)中使用的icon實(shí)存需要按照制定的規(guī)則尺寸設(shè)計(jì)。

圖標(biāo)用法

顏色 ? ?標(biāo)準(zhǔn)圖形應(yīng)該是字形，并應(yīng)使用單一的純色填充，且不應(yīng)該帶有陰影。

樣式 ? ?選擇清晰而不是好看或者個(gè)性的風(fēng)格。

隱喻 ? ?不要單獨(dú)使用有歧義的圖標(biāo)。使用正確的用戶可以識(shí)別的圖標(biāo)（表格和文件刪除除外）。

04 Shadow 投影

通過(guò)投影反映給用戶，當(dāng)前的元素與底層背景的距離來(lái)反應(yīng)層次關(guān)系。

投影類型

小投影 ? ?主要用于小模塊及小元素之間，輕量級(jí)提示或刪除。

中投影 ? ?主要用于一些較大模塊以及激活需要操作的元素，例如下拉選項(xiàng)、氣泡提示等。

大投影 ? ?主要應(yīng)用于一些大模塊，例如輕提示、通知消息、模態(tài)彈窗等。

投影代碼

小投影

box-shadow:1px 1px 4px 0px rgba(35,40,48,0.2);

中投影

box-shadow:1px 1px 8px 0px rgba(35,40,48,0.2);

大投影

box-shadow:2px 2px 16px 0px rgba(35,40,48,0.2);

05 Voicce 文案

為更好的統(tǒng)一標(biāo)準(zhǔn)和使用體驗(yàn)，九曳設(shè)計(jì)規(guī)范為此提供了一套常用的文案集合。

標(biāo)準(zhǔn)詞匯庫(kù)

在產(chǎn)品設(shè)計(jì)中需按照標(biāo)準(zhǔn)的用法使用。

錯(cuò)誤案例

感嘆號(hào) ? ?一般情況下，正面用于使用感嘆號(hào)，負(fù)面使用句號(hào)。所以「你的訂單量已超過(guò)限制?！故褂镁涮?hào)，需注意確保在上下文（包括標(biāo)題等）中使用不超過(guò)一個(gè)感嘆號(hào)。

禮貌用語(yǔ) ? ?禮貌性語(yǔ)言用不好會(huì)給用戶傳達(dá)一些錯(cuò)的語(yǔ)調(diào)和感受。需謹(jǐn)慎使用“請(qǐng)”和“謝謝”之類的術(shù)語(yǔ)。

說(shuō)明出錯(cuò)原因 ? ?明確告知用戶，發(fā)生了生么，并告知是何原因。

給出建議 ? ?完整闡述信息，并給出建議。

直接使用「你」 ? ?直接使用你、我和用戶進(jìn)行對(duì)話，避免使用「您」，讓用戶感覺(jué)過(guò)于客套和討好。

尊重用戶 ? ?給用戶支持和鼓勵(lì)，不強(qiáng)迫命令。

使用阿拉伯?dāng)?shù)字 ? ? 人對(duì)于數(shù)字的感知速度更快，使用數(shù)字表述更加有效，所以統(tǒng)計(jì)的數(shù)據(jù)使用阿拉伯?dāng)?shù)字。

06 Space 間距

信息之間的關(guān)聯(lián)度越高，它們之間的距離就應(yīng)該更加接近，讓給感覺(jué)更像是一個(gè)視覺(jué)單元；反之，則是多個(gè)視覺(jué)單元。通過(guò)通知控制間距，實(shí)現(xiàn)頁(yè)面信息頁(yè)面的結(jié)構(gòu)和信息層次。

間距使用

我們的比列是以8px（1rem）單位為基礎(chǔ)。使用 8 的倍數(shù)來(lái)定義模塊間距于元素的尺寸。

舉例說(shuō)明

設(shè)計(jì)頁(yè)面 ? ?表格頁(yè)面和新增頁(yè)面。

文字間距 ? ?文字間距需要考慮行高。

#相關(guān)閱讀#

如何從零構(gòu)建UI組件及設(shè)計(jì)規(guī)范（一）：介紹篇

如何從零構(gòu)建UI組件及設(shè)計(jì)規(guī)范（二）：設(shè)計(jì)原則

本文由 @徐銀高 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議