這篇文章來(lái)自于invision出品的書籍，圍繞規(guī)劃、設(shè)計(jì)、構(gòu)建和實(shí)現(xiàn)設(shè)計(jì)系統(tǒng)的實(shí)踐經(jīng)歷來(lái)指導(dǎo)讀者，其中包含了經(jīng)驗(yàn)豐富的專家的真知灼見和一手經(jīng)驗(yàn)。我很喜歡，也分享給大家，推薦閱讀。這將會(huì)會(huì)一個(gè)系列，一共有7章，感興趣的話，持續(xù)關(guān)注吧。

書籍的知識(shí)深度是設(shè)計(jì)短文無(wú)法比的，這篇文章比較長(zhǎng)，但建議耐心看完，假期也別忘記給自己充充電。當(dāng)別人都在刷劇游戲時(shí)，你在學(xué)知識(shí)，肯定賺大了~

譯文：

去開始著手設(shè)計(jì)一個(gè)設(shè)計(jì)系統(tǒng)往往會(huì)讓人感到畏懼，有太多事情需要考慮——設(shè)計(jì)風(fēng)格，怎樣模塊化和可適配化地進(jìn)行設(shè)計(jì)，它將如何被其他團(tuán)隊(duì)使用，以及如何向公司的決策者推動(dòng)這個(gè)想法。到底要從哪一方面開始著手設(shè)計(jì)呢？

要解決大問(wèn)題，可以將它分解成若干小問(wèn)題。在進(jìn)入設(shè)計(jì)流程之前，首先需要考慮好參加設(shè)計(jì)系統(tǒng)的成員以及團(tuán)隊(duì)的協(xié)作方式。一旦找到合適的人組建團(tuán)隊(duì)，你就可以開始思考系統(tǒng)的設(shè)計(jì)語(yǔ)言了，包含顏色排版，間距等等。視覺(jué)設(shè)計(jì)語(yǔ)言將會(huì)是UI樣式庫(kù)的基礎(chǔ)——一系列能被快速組裝并形成界面的組件。

現(xiàn)在我來(lái)分享下，如何開始一步一步設(shè)計(jì)你的設(shè)計(jì)系統(tǒng)吧。

誰(shuí)應(yīng)該參與

在你開始設(shè)計(jì)系統(tǒng)的工作之前，花點(diǎn)時(shí)間考慮一下你需要的團(tuán)隊(duì)，誰(shuí)需要參與。你需要的不僅僅是設(shè)計(jì)師。以下是一份清單，列舉了創(chuàng)建一個(gè)高效的設(shè)計(jì)系統(tǒng)所需要的團(tuán)隊(duì)成員技能：

• 定義設(shè)計(jì)系統(tǒng)視覺(jué)元素的設(shè)計(jì)師
• 創(chuàng)建模塊化、高效代碼的前端工程師
• 確保你的系統(tǒng)符合WCAG等標(biāo)準(zhǔn)的可用性專家
• 能夠幫助團(tuán)隊(duì)確定系統(tǒng)聲音和語(yǔ)調(diào)的內(nèi)容策略師
• 幫助你了解客戶需求的用戶研究員
• 可以確保系統(tǒng)在所有設(shè)備上能快速載入的性能專家
• 確保設(shè)計(jì)系統(tǒng)符合客戶需求的產(chǎn)品經(jīng)理
• 在整個(gè)公司內(nèi)領(lǐng)導(dǎo)和調(diào)整目標(biāo)的領(lǐng)導(dǎo)者

當(dāng)你確保在設(shè)計(jì)系統(tǒng)團(tuán)隊(duì)中擁有上述技能的各類人才后，請(qǐng)確定每個(gè)領(lǐng)域的負(fù)責(zé)人。這些人應(yīng)該能夠確保決策得以推動(dòng)。了解設(shè)計(jì)系統(tǒng)團(tuán)隊(duì)中支撐各自領(lǐng)域的成員。在強(qiáng)有力的領(lǐng)導(dǎo)下，擁有一支由專家組成的團(tuán)隊(duì)，你的下一個(gè)任務(wù)就是建立正確的團(tuán)隊(duì)模式來(lái)幫助你實(shí)現(xiàn)目標(biāo)。

1. 選擇正確的團(tuán)隊(duì)模式

將人們聚集在一起合作的團(tuán)隊(duì)模型與創(chuàng)建設(shè)計(jì)系統(tǒng)團(tuán)隊(duì)一樣重要，在“一個(gè)設(shè)計(jì)系統(tǒng)的團(tuán)隊(duì)模型”中，設(shè)計(jì)系統(tǒng)的資深人士Nathan Curtis概括了3個(gè)被許多公司使用并流行的團(tuán)隊(duì)模型。

獨(dú)立式團(tuán)隊(duì)模型：“霸主”管理設(shè)計(jì)系統(tǒng)。

△ 圖1:獨(dú)立式設(shè)計(jì)系統(tǒng)團(tuán)隊(duì)模型—— 1人控制一切。圖片由Nathan Curtis提供。

集中式團(tuán)隊(duì)模型:單個(gè)團(tuán)隊(duì)將設(shè)計(jì)系統(tǒng)作為全職工作來(lái)維護(hù)。

△?圖2：集中式設(shè)計(jì)系統(tǒng)團(tuán)隊(duì)模型——一個(gè)團(tuán)隊(duì)管理系統(tǒng)。圖片由Nathan Curtis提供。

聯(lián)合式模型:來(lái)自整個(gè)公司的團(tuán)隊(duì)成員聚集在一起開發(fā)系統(tǒng)。

△ 圖3：聯(lián)合式設(shè)計(jì)系統(tǒng)團(tuán)隊(duì)模型——來(lái)自不同團(tuán)隊(duì)的人員聚集在一起管理設(shè)計(jì)系統(tǒng)。圖片由Nathan Curtis提供。

上述的團(tuán)隊(duì)模型都有相應(yīng)的優(yōu)勢(shì)和劣勢(shì)。獨(dú)立式模型固然高效且響應(yīng)迅速，但一個(gè)人管理的事情太多，主負(fù)責(zé)人會(huì)成為完成諸多任務(wù)的瓶頸。另一邊，集中式模型可以很好的維護(hù)系統(tǒng)，但是這個(gè)團(tuán)隊(duì)與客戶需求的溝通可能不如他們對(duì)用戶研究的參與那么緊密。最后，聯(lián)合式團(tuán)隊(duì)模型對(duì)來(lái)自用戶需求和產(chǎn)品特性的需求有很好的洞察力，但這個(gè)小組可能會(huì)忙于除了構(gòu)建設(shè)計(jì)系統(tǒng)以外的工作。

許多團(tuán)隊(duì)正在從獨(dú)立式的模型轉(zhuǎn)向集中式或聯(lián)合式的模型。正如Curtis在他的文章所提及的那樣，單人管理的模式是難以擴(kuò)展的，集中式或聯(lián)合式團(tuán)隊(duì)模型通常更適用于擴(kuò)展設(shè)計(jì)系統(tǒng)。

為了回應(yīng)柯蒂斯的文章，我寫了關(guān)于Salesforce團(tuán)隊(duì)模型的文章。當(dāng)我在Salesforce的Lightning設(shè)計(jì)系統(tǒng)團(tuán)隊(duì)任職期間，我們結(jié)合使用了集中式模型和聯(lián)合式模型。在許多和Salesforce一樣大的企業(yè)組織中，僅憑一個(gè)集中式的設(shè)計(jì)系統(tǒng)團(tuán)隊(duì)是不夠的。由于我們涉及到非常多的關(guān)鍵參與者，而且還跨越了產(chǎn)品和平臺(tái)的范圍，所以需要一種更加可持續(xù)的方法。

△?圖4:我們?cè)赟alesforce中使用的一個(gè)混合式的設(shè)計(jì)系統(tǒng)團(tuán)隊(duì)模型——由一個(gè)核心團(tuán)隊(duì)和來(lái)自其他團(tuán)隊(duì)的成員一起來(lái)管理和維護(hù)設(shè)計(jì)系統(tǒng)。

盡管Lightning設(shè)計(jì)系統(tǒng)有一個(gè)核心團(tuán)隊(duì)，但Salesfore生態(tài)系統(tǒng)中的許多產(chǎn)品和功能領(lǐng)域也有一些核心貢獻(xiàn)者，他們來(lái)自各個(gè)業(yè)務(wù)部門并組成工作小組，提出新的想法，并要求設(shè)計(jì)系統(tǒng)不斷發(fā)展。用戶研究員、可用性專家、產(chǎn)品設(shè)計(jì)師和用戶體驗(yàn)工程師與核心設(shè)計(jì)系統(tǒng)團(tuán)隊(duì)合作，共同使用并幫助建立模塊、組件和整體設(shè)計(jì)系統(tǒng)。工程師完善所有的代碼，以確保系統(tǒng)的性能和保證上線質(zhì)量。

盡管由于主負(fù)責(zé)人可能會(huì)成為團(tuán)隊(duì)的瓶頸，在大多數(shù)團(tuán)隊(duì)中獨(dú)立式模型不那么受歡迎，但在某些情況下它可以很好地發(fā)揮作用。米娜·馬卡姆(Mina Markham)在為希拉里·克林頓(Hillary Clinton)開發(fā)新的宣傳網(wǎng)站時(shí)，幾乎沒(méi)有時(shí)間去爭(zhēng)取任何支援。她創(chuàng)建了一個(gè)名為Pantsuit的設(shè)計(jì)系統(tǒng)，幫助很多地方的團(tuán)隊(duì)加快設(shè)計(jì)和生產(chǎn)物料，同時(shí)保持整個(gè)競(jìng)選運(yùn)動(dòng)品牌的一致性。獨(dú)立式模型讓Markham首先關(guān)注的是速度，第二是周期，這可能與典型企業(yè)采用的做法不一樣。

△?圖5:Pantsuit——米娜·馬卡姆(Mina Markham)創(chuàng)建的一個(gè)給希拉里·克林頓(Hillary Clinton)競(jìng)選運(yùn)動(dòng)的設(shè)計(jì)系統(tǒng)

當(dāng)你需要決定采用什么團(tuán)隊(duì)模型時(shí)，請(qǐng)考慮你的目標(biāo)。如果你想團(tuán)隊(duì)能夠快速響應(yīng)需求，那么最好使用獨(dú)立式團(tuán)隊(duì)模型，盡管以后可能需要做一些工作，以便在其他團(tuán)隊(duì)之間完全采用它。如果你希望團(tuán)隊(duì)不僅能夠快速響應(yīng)，并且一開始就鼓勵(lì)大家都參與進(jìn)來(lái)，可以考慮集中式團(tuán)隊(duì)模型。而為了獲得最大的參與感和共享權(quán)，聯(lián)合式模型是個(gè)不錯(cuò)的選擇。在任何情況下請(qǐng)記住，設(shè)計(jì)系統(tǒng)是一個(gè)產(chǎn)品，所以要把它當(dāng)做一個(gè)產(chǎn)品，而不是一個(gè)項(xiàng)目來(lái)做；你需要的是致力于維護(hù)和發(fā)展它的人。

隨著團(tuán)隊(duì)和協(xié)作模型的建立，現(xiàn)在是時(shí)候開始你的設(shè)計(jì)系統(tǒng)了。就像任何新產(chǎn)品一樣，開啟工作的第一步是與客戶進(jìn)行溝通。

2. 客戶調(diào)研

與任何產(chǎn)品設(shè)計(jì)的過(guò)程一樣，做研究是很重要的。誰(shuí)會(huì)使用你的設(shè)計(jì)系統(tǒng)，怎么用？如果你的設(shè)計(jì)系統(tǒng)是為了配合其他團(tuán)隊(duì)的工作流程而創(chuàng)建的，那么它將會(huì)被頻繁地使用。通過(guò)訪談?dòng)脩簦憧梢蕴崆版i定問(wèn)題，定義有助于他人正確使用系統(tǒng)的原則，并將精力集中在最重要的事情上面。

其中一個(gè)比較少見的調(diào)研群體是你產(chǎn)品開源社區(qū)的成員。這類群體會(huì)出現(xiàn)在為客戶和合作伙伴社區(qū)提供開發(fā)者工具的組織里。如果你計(jì)劃將你的設(shè)計(jì)系統(tǒng)開源（成為一個(gè)潛在的大項(xiàng)目），那么你需要與潛在的貢獻(xiàn)者和消費(fèi)者交流，以發(fā)現(xiàn)你的設(shè)計(jì)系統(tǒng)需要滿足哪些需求和用例。

再有就是高管、領(lǐng)導(dǎo)和管理層。了解他們的想法也很重要。你需要得到他們的支持和資助。傾聽他們的要求，并將其作為可執(zhí)行的目標(biāo)和指標(biāo)來(lái)實(shí)現(xiàn)。這些要求可能是更快、更好的性能，以及提高UI質(zhì)量等等。

提示：通過(guò)實(shí)踐研究，賦能構(gòu)建設(shè)計(jì)規(guī)范

Isaak Hayes和Donna Chan在Clarity大會(huì)上發(fā)表了題為 "用實(shí)踐研究來(lái)賦能構(gòu)建風(fēng)格指南 "的精彩演講。其中提出了一系列有用的技巧，可以幫助你有效地對(duì)設(shè)計(jì)系統(tǒng)進(jìn)行研究。通過(guò)用戶訪談，他們利用數(shù)據(jù)創(chuàng)建設(shè)計(jì)原則、度量標(biāo)準(zhǔn)和用戶故事。

有了從客戶訪談中得到的資料，我們可以開始進(jìn)行整理。有兩種類型的界面內(nèi)容清單需要進(jìn)行整理和規(guī)范。

• 視覺(jué)語(yǔ)言（如間距、顏色和排版）的整理，這將有助于創(chuàng)建一個(gè)統(tǒng)一的視覺(jué)語(yǔ)言。
• 每個(gè)UI元素（如按鈕、卡片和排版）的清單，這將有助于創(chuàng)建一個(gè)UI組件庫(kù)。

首先我們先來(lái)關(guān)注全局視覺(jué)元素的整理。

創(chuàng)建視覺(jué)元素清單

當(dāng)然，如果你正在為一個(gè)還不存在的產(chǎn)品啟動(dòng)設(shè)計(jì)系統(tǒng)，你可以跳過(guò)這一步，直接跳到為新產(chǎn)品創(chuàng)建視覺(jué)語(yǔ)言那一章。

1. 整理視覺(jué)元素

當(dāng)我們開始整理的時(shí)候，最好查看一下CSS，對(duì)應(yīng)上述視覺(jué)清單里面所有元素進(jìn)行整理。使用類似CSS Stats這樣的工具來(lái)看看你的產(chǎn)品樣式表有多少規(guī)則和屬性。更重要的是，它還會(huì)顯示你有多少種獨(dú)特的元素、字體和字號(hào)。它還有統(tǒng)計(jì)圖，可以看到間距和大小值的數(shù)量。這是一個(gè)很好的方法，可以讓你很方便地對(duì)樣式進(jìn)行精簡(jiǎn)。

譯者注：CSS Stats工具的地址https://cssstats.com/

△?圖6:使用CSS Stats發(fā)現(xiàn)Facebook有38種獨(dú)特的文本顏色

如果你在Sketch中整理樣式規(guī)范，可以使用sketchup - style - inventory插件來(lái)整合所有顏色、文本樣式和符號(hào)。它還提供了合并相似樣式的能力。（彩云注：inventory這個(gè)插件原來(lái)挺好用，但作者太忙，好長(zhǎng)時(shí)間沒(méi)更新了，貌似最高只能支持到sketch49）

2. 創(chuàng)建視覺(jué)設(shè)計(jì)語(yǔ)言

必須承認(rèn)，作為一個(gè)藝術(shù)院校畢業(yè)的學(xué)生，設(shè)計(jì)系統(tǒng)中的視覺(jué)設(shè)計(jì)語(yǔ)言是我最喜歡的部分。我喜歡思考色彩理論、排版和布局，這些都是任何設(shè)計(jì)系統(tǒng)的核心。如果將設(shè)計(jì)系統(tǒng)的每個(gè)組件拆開，我們會(huì)發(fā)現(xiàn)這些基本元素構(gòu)成了它的視覺(jué)設(shè)計(jì)語(yǔ)言：

• 顏色
• 排版（大小、字間距、字體等）
• 間距（邊距，填充，定位坐標(biāo)，邊框間距）
• 圖像（圖標(biāo)、插圖）

根據(jù)需求，你還可以加入以下內(nèi)容，進(jìn)一步規(guī)范用戶體驗(yàn)：

• 視覺(jué)形式（深度、層級(jí)、陰影、圓角、紋理）
• 動(dòng)畫
• 聲音

以按鈕這個(gè)簡(jiǎn)單的組件為例，分析這些設(shè)計(jì)元素在其中扮演的角色。一個(gè)按鈕通常會(huì)包含背景顏色，文字的樣式，以及間距。在文字旁邊可能會(huì)有一個(gè)圖標(biāo)用于創(chuàng)建視覺(jué)提示。在邊緣上的描邊可以作為簡(jiǎn)單的裝飾，甚至可以在邊角處做圓角。最后，懸停在按鈕上或點(diǎn)擊按鈕可以觸發(fā)動(dòng)畫或聲音作為反饋給用戶。雖然一個(gè)按鈕看似簡(jiǎn)單，但也需要通過(guò)一系列的設(shè)計(jì)決策才能讓它生動(dòng)地展現(xiàn)出來(lái)。

△?圖7：Buzzfeed Solid設(shè)計(jì)系統(tǒng)中的各種按鈕。按鈕組件應(yīng)用于點(diǎn)擊事件或鏈接，有以下幾種類別：主要、次要、透明、反色、白色、禁用、帶圖標(biāo)、社交分享按鈕、小型按鈕、帶圖標(biāo)的小型按鈕，以及可以根據(jù)自己的需要著色的自定義按鈕。

3. 設(shè)計(jì)標(biāo)簽

在深入探討視覺(jué)設(shè)計(jì)標(biāo)準(zhǔn)之前，我想先討論一下設(shè)計(jì)標(biāo)簽。設(shè)計(jì)標(biāo)簽是設(shè)計(jì)系統(tǒng)實(shí)現(xiàn)原子化的基礎(chǔ)。簡(jiǎn)單來(lái)說(shuō)，設(shè)計(jì)標(biāo)簽是一系列樣式參數(shù)被梳理和歸納后的語(yǔ)義化命名，用于抽象出你要管理的設(shè)計(jì)屬性。由于所有設(shè)計(jì)標(biāo)簽都存儲(chǔ)在同一個(gè)地方，可以更輕松地實(shí)現(xiàn)一致性，同時(shí)減輕管理設(shè)計(jì)系統(tǒng)的負(fù)擔(dān)。

如：SPACING_MEDIUM: 1rem

在設(shè)計(jì)標(biāo)簽中，你可以存儲(chǔ)顏色、間距、尺寸、動(dòng)畫時(shí)長(zhǎng)等數(shù)據(jù)，并將其分發(fā)到各個(gè)平臺(tái)。

△?圖8:Lightning設(shè)計(jì)系統(tǒng)中關(guān)于圓角設(shè)計(jì)標(biāo)簽的例子

4. 顏色

你為設(shè)計(jì)系統(tǒng)選擇的顏色不僅僅是品牌的延伸，UI使用的顏色更多是用來(lái)傳達(dá)以下信息：

• 反饋——錯(cuò)誤和成功的狀態(tài)
• 信息——圖表和導(dǎo)航元素
• 層次——通過(guò)色彩和排版顯示結(jié)構(gòu)和主次

一個(gè)設(shè)計(jì)系統(tǒng)中常見的顏色包括1-3種代表品牌的主色調(diào)。如果這些顏色都不能很好的作為鏈接和按鈕的顏色，那么你最好有另外一個(gè)顏色去代替。在鏈接和按鈕背景中使用相同的顏色是個(gè)好主意，因?yàn)檫@樣可以讓用戶更容易識(shí)別可交互的元素。

此外你還需要中性色用于UI背景和邊框，通常是灰色。最后，你要有一系列如錯(cuò)誤、警告和成功等狀態(tài)的顏色。將這些顏色組合起來(lái)，看看它們?cè)谝黄痫@示的效果如何，然后根據(jù)需要進(jìn)行完善。

△?圖9:Carbon設(shè)計(jì)系統(tǒng)中的色板和對(duì)應(yīng)的標(biāo)簽

較大的設(shè)計(jì)系統(tǒng)有時(shí)會(huì)給對(duì)象和產(chǎn)品添加顏色。例如，在Salesforce，我們對(duì)聯(lián)系人、銷售交易或組織等模塊都有設(shè)計(jì)對(duì)應(yīng)顏色。我們也有針對(duì)產(chǎn)品的顏色，如銷售云、營(yíng)銷云、分析云等。對(duì)于你的用戶，顏色能成為一個(gè)很好的導(dǎo)航工具。

△?圖10：Salesforce中模塊使用的顏色

為了保證產(chǎn)品可用性，使用顏色進(jìn)行區(qū)分也會(huì)有局限性，因?yàn)樯さ娜丝赡軣o(wú)法辨別某些差異。

提示：檢查顏色對(duì)比度

這里有一個(gè)檢查各種顏色對(duì)比度的工具供你使用，以確保所有在你產(chǎn)品上使用的顏色具備可用性，一定要檢查背景和文字顏色搭配的對(duì)比度。

http://www.webaxe.org/color-contrast-tools/

根據(jù)于你對(duì)色板精細(xì)度的要求，你可能會(huì)希望包含一系列的色階，需要與白色混合的輔助顏色以及與黑色混合的陰影顏色。有時(shí)你可能會(huì)用其他顏色代替白色或黑色，以避免顏色變灰，比如用橙色來(lái)使黃色變暗，這樣就不會(huì)出現(xiàn)棕色。

這些顏色的變化讓設(shè)計(jì)師有了選擇。但要注意的是，太多的選擇會(huì)導(dǎo)致與主設(shè)計(jì)不一致的情況出現(xiàn)。保持色調(diào)、陰影和中性調(diào)色板的精簡(jiǎn)，以防止被濫用，同時(shí)又能保持靈活性。當(dāng)你發(fā)現(xiàn)需要的時(shí)候，你可以隨時(shí)在色板范圍內(nèi)增加更多的顏色。

△?圖11:Pivota的UI設(shè)計(jì)規(guī)范選擇用他們的設(shè)計(jì)標(biāo)簽給出廣泛的顏色色調(diào)和陰影。雖然我個(gè)人更傾向于給出一組精簡(jiǎn)的色值范圍就足夠了（如在Sass設(shè)計(jì)規(guī)范中看到的），但有些設(shè)計(jì)系統(tǒng)喜歡提供更多的選擇。仔細(xì)考慮哪種方法更合適自身，因?yàn)槟阈枰胶鈩?chuàng)意自由和規(guī)范一致性等問(wèn)題。

5. 字體

字體和字重

你所選擇的字體會(huì)深深影響你的品牌和用戶體驗(yàn)，所以需要選擇一個(gè)易讀性的系統(tǒng)字體。一般常見的系統(tǒng)字體，如Helvetica、Times New Roman或Verdana是一個(gè)很好的選擇，因?yàn)橛脩魧?duì)它們非常熟悉。一些公司更喜歡定制的網(wǎng)頁(yè)字體去體現(xiàn)他們的品牌，但是用的時(shí)候需要特別注意性能問(wèn)題。

我工作過(guò)的大多數(shù)設(shè)計(jì)系統(tǒng)只包括兩種字體：標(biāo)題和正文都用一種字體，代碼用monospace字體。有時(shí)標(biāo)題還會(huì)額外多加一種字體，與正文字體相得益彰。大多數(shù)設(shè)計(jì)系統(tǒng)沒(méi)有必要再多，除非你的系統(tǒng)支持多個(gè)品牌。保持?jǐn)?shù)量精簡(jiǎn)的字體，不僅是排版設(shè)計(jì)的最佳實(shí)踐，還可以防止過(guò)度使用網(wǎng)頁(yè)字體帶來(lái)的性能問(wèn)題。

△ 圖12:谷歌Roboto字體，顯示著不同的字重

現(xiàn)在流行使用非常細(xì)的字體，但是要注意可讀性的問(wèn)題。如果你想使用輕或細(xì)的字重樣式，盡量在較大的字號(hào)情況下使用。

字體比例

在選擇字體的大小時(shí)，需要考慮可讀性。在大多數(shù)情況下，16px的字體大小相當(dāng)好用。這是大多數(shù)瀏覽器的默認(rèn)字體大小，對(duì)大多數(shù)人來(lái)說(shuō)，它相當(dāng)容易閱讀。我喜歡使用16px，因?yàn)樗咸O果和谷歌使用的基于4為單位的指標(biāo)（已經(jīng)逐漸成為標(biāo)準(zhǔn)方法）。我建議將此作為你的基準(zhǔn)，盡管我會(huì)在基于CSS的系統(tǒng)中使用它的相對(duì)格式，如1rem。

你可以使用比例標(biāo)尺為標(biāo)題或其他元素提供更大或更小的字體大小。比例標(biāo)尺是一組數(shù)字，其中你有一個(gè)基數(shù)，使用一個(gè)比率來(lái)生成下一個(gè)數(shù)字。你不斷地將比率應(yīng)用到新的數(shù)字上，從而得到下一個(gè)數(shù)字。

△圖13:比例標(biāo)尺工具能幫助你找到合適自己的基準(zhǔn)。它甚至提供了的Sass需要的功能，為你添加成套的設(shè)計(jì)標(biāo)簽。

當(dāng)你設(shè)計(jì)字體范圍時(shí)，一定要考慮到它如何應(yīng)對(duì)各種屏幕尺寸以保持可讀性。你不會(huì)希望你的標(biāo)題在移動(dòng)設(shè)備上被放得很大。而對(duì)于其他大得多的顯示器，你有足夠的空間來(lái)提升尺寸。常見的方法是在大屏幕上放大標(biāo)題。你也可以使用視窗單位，根據(jù)屏幕大小的百分比來(lái)縮放字體。

專業(yè)提示：響應(yīng)式排版

人們使用很多方法來(lái)創(chuàng)建響應(yīng)式排版。最近比較值得一查的是帶有CSS Poly Sizing的Fluid方法。Zell Liew的《響應(yīng)式網(wǎng)頁(yè)排版規(guī)則》涵蓋了需要了解的基本原理和系統(tǒng)。

行間距

CSS中的行距或行高可以提升排版的可讀性和美感。雖然最佳的行高會(huì)根據(jù)字體和行長(zhǎng)的不同而有所變化，但一般的經(jīng)驗(yàn)法則是領(lǐng)先于字體大小的1.4–1.5倍。W3C Web Accessibility Initiative建議使用1.5。

段落中的行距至少為半個(gè)空格，并且段落間距至少為行距的1.5倍。——Web內(nèi)容無(wú)障礙指南2.0

這也使你行高的數(shù)值變得更有規(guī)律，但你不需要去計(jì)算它。即使在沒(méi)有度量單位的情況下定義行高，瀏覽器也會(huì)幫你完成這些復(fù)雜的計(jì)算。對(duì)于標(biāo)題的行高，根據(jù)字體將其規(guī)范化。在大多數(shù)情況下，我發(fā)現(xiàn)1.25或1.125的數(shù)值非常好。

△圖15: Tachyons（譯者注：一款 css 框架）也用1.5作為正文，1.25作為標(biāo)題。

6. 間距和尺寸

使用合理的間距和尺寸有利于設(shè)計(jì)系統(tǒng)看起來(lái)更有節(jié)奏感。這意味著你需要選擇基于規(guī)范和比例的單位。通過(guò)計(jì)算比率的方式得出的間距和尺寸，使設(shè)計(jì)系統(tǒng)更容易維護(hù)，布局也更合理。

當(dāng)我設(shè)計(jì)一個(gè)Android應(yīng)用的時(shí)候，我研究了谷歌的設(shè)計(jì)規(guī)范。我注意到一個(gè)規(guī)范，即元素之間使用8dp，外槽使用16dp。這讓我打破了之前使用10作為基準(zhǔn)單位的習(xí)慣，因?yàn)槲野l(fā)現(xiàn)4作為基準(zhǔn)單位的效果更好。

基于4的單位規(guī)范作為推薦單位越來(lái)越受歡迎，原因有很多。首先iOS和Android都使用和推薦被4整除或倍數(shù)的單位。標(biāo)準(zhǔn)的圖標(biāo)大小格式（大多數(shù)操作系統(tǒng)都在使用）往往是基于4的（16、24、32等）單位，這樣它們更容易縮放。瀏覽器的默認(rèn)字體大小通常是16。當(dāng)所有的系統(tǒng)元素都使用了這個(gè)標(biāo)準(zhǔn)的時(shí)候，能讓你的產(chǎn)品看起來(lái)更整齊和規(guī)范，響應(yīng)式的適配效果也會(huì)更好。

△圖16.谷歌的Android設(shè)計(jì)規(guī)范，學(xué)習(xí)這些規(guī)范讓我成為了一個(gè)更好的移動(dòng)設(shè)備設(shè)計(jì)師。

對(duì)于水平間距，以8為基準(zhǔn)的單位相當(dāng)好用。你可以使margin和padding與字體大小相等或成比例。但對(duì)于垂直間距，我傾向于使用基于12的單位尺寸。由之前所說(shuō)的1.5行高（默認(rèn)字體大小為16px）計(jì)算后，得出了24這個(gè)數(shù)字。

偶爾你可能不得不打破這個(gè)規(guī)則。如果你在某些元素上加了1px的描邊，這個(gè)描邊就會(huì)破壞原本的規(guī)范方式，所以你可能需要使用padding或margin去減去這個(gè)數(shù)量。因此請(qǐng)根據(jù)實(shí)際情況去打破這個(gè)規(guī)則。

有時(shí)你希望某個(gè)元素隨著頁(yè)面空間放大或縮小，那么除非必要，應(yīng)該盡量不設(shè)置它的寬度和高度。讓元素的尺寸隨著頁(yè)面空間的變化進(jìn)行適配，以輕松地實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)。

7. 圖片

文件格式

對(duì)于圖標(biāo)和插畫，我發(fā)現(xiàn)使用矢量格式(SVG)更符合可擴(kuò)展式和響應(yīng)式設(shè)計(jì)的效果。偶爾你需要使用到攝影作品，那么就要用類似JPG或PNG這樣的柵格化圖像格式。

對(duì)于大多數(shù)照片、插圖和圖表，你可以讓圖像100%顯示在容器內(nèi)。基于頁(yè)面主動(dòng)適配高度，而不需要限定它，這最適合響應(yīng)式布局。如果你不希望圖片寬度達(dá)到全寬(例如半寬、三分之一或四分之一)，你也可以為圖片設(shè)定一些預(yù)設(shè)寬度并固定好尺寸，這樣圖像就可以縮放到更小的屏幕。

圖標(biāo)設(shè)計(jì)

在繪制你的圖標(biāo)之前，先圍繞它們提出你的設(shè)計(jì)規(guī)則。它們是填充還是描邊？線條粗細(xì)是多少？它們會(huì)使用1種以上的顏色嗎？它們會(huì)是什么尺寸？是否有外部包裹元素？

△ 圖17: Oracle Alta 描述的圖標(biāo)樣式規(guī)范，如透視、間距和顏色。

你可以為不同的圖標(biāo)類型設(shè)計(jì)不同的樣式。例如通用和操作類的圖標(biāo)（如通知或設(shè)置圖標(biāo)）可能是單色的，而導(dǎo)航圖標(biāo)可能是多色、更有創(chuàng)意的。明確的準(zhǔn)則將使你的圖標(biāo)保持統(tǒng)一和規(guī)范。

△?圖18. 蘋果展示了其生態(tài)系統(tǒng)中的不同圖標(biāo)類型：應(yīng)用圖標(biāo)、工具圖標(biāo)以及它使用顏色時(shí)的規(guī)范。

插圖

插圖是為你的產(chǎn)品增添品牌特色的好方法。你可以將其用于空狀態(tài)、加載屏幕、彈窗和其他吸引用戶視覺(jué)興趣的組件。Shopify花了很大力氣為其平臺(tái)的所有空狀態(tài)頁(yè)面設(shè)計(jì)獨(dú)特的插圖，從而傳達(dá)強(qiáng)烈的品牌形象。

△?圖19:Shopify的缺省頁(yè)面插畫設(shè)計(jì)

和圖標(biāo)一樣，插畫的設(shè)計(jì)規(guī)范同樣十分重要。

△?圖20:Al Power的插圖設(shè)計(jì)規(guī)范。

8. 視覺(jué)形象

視覺(jué)形象，又或者叫UI材質(zhì)，與背景圖像、漸變和紋理、陰影和層級(jí)、圓角和邊框有關(guān)。這些視覺(jué)特質(zhì)有助于強(qiáng)調(diào)和裝飾元素，以增加視覺(jué)層次和美感。無(wú)論如何，所有的這些視覺(jué)元素都需要標(biāo)準(zhǔn)化的指導(dǎo)。Google出色地展示了縱深和高程如何與組件分層一起工作（圖21）

△?圖21.通過(guò)z-indexes和陰影實(shí)現(xiàn)的Google材質(zhì)設(shè)計(jì)中的縱深示例。

9. 動(dòng)畫和聲音

當(dāng)你定義視覺(jué)規(guī)范的時(shí)候，第一時(shí)間可能不會(huì)想到動(dòng)畫和聲音。但動(dòng)畫和聲音會(huì)對(duì)產(chǎn)品的使用體驗(yàn)產(chǎn)生很大影響。你會(huì)希望把這些也系統(tǒng)化，以保證一致性。我個(gè)人對(duì)這項(xiàng)領(lǐng)域并不精通，但是有一些很好的例子。

△?圖22. IBM的動(dòng)畫準(zhǔn)則借鑒了他們豐富的產(chǎn)品和技術(shù)歷史。

△?圖23.雖然在視覺(jué)上沒(méi)有特別驚艷，但Microsoft將聲音API也加入到了他們開發(fā)指南里面。

10. 創(chuàng)建用戶界面庫(kù)

在我們整理視覺(jué)語(yǔ)言之前，我們會(huì)查看元素的視覺(jué)質(zhì)量，比如顏色、間距和排版。現(xiàn)在我們需要對(duì)UI界面的實(shí)質(zhì)部分進(jìn)行整理，例如按鈕，卡片，列表、表單等部分。視覺(jué)語(yǔ)言庫(kù)關(guān)注的是視覺(jué)方法和元素在整體視覺(jué)層次下的效果，而用戶界面庫(kù)關(guān)注的是UI界面的實(shí)際組件。

縱觀所有設(shè)計(jì)元素以及它們?cè)谠O(shè)計(jì)系統(tǒng)中所扮演的角色。盤點(diǎn)產(chǎn)品的所有界面元素，看看你到底需要解決多少設(shè)計(jì)債務(wù)，以及哪些元素是最常用的。溫馨提示，這個(gè)步驟可能會(huì)令人抓狂，因?yàn)榇蠖鄶?shù)公司的UI界面里都存在著大量不一致的元素。

創(chuàng)建盤點(diǎn)清單，只需打開企業(yè)的所有產(chǎn)品，截取所有按鈕，表格，各種字體，圖像的圖片，然后將其收集在PPT或整個(gè)團(tuán)隊(duì)可以看到的大黑板上。

你可以通過(guò)打印輸出或截圖來(lái)實(shí)現(xiàn)。聚集你的團(tuán)隊(duì)成員（第二章所述）。讓他們通過(guò)共享演示或動(dòng)手和你一起整理這個(gè)清單。這樣做的目的是收集正在使用的所有不同的組件，并對(duì)它們進(jìn)行分類和合并。

提示：設(shè)計(jì)債務(wù)

如果你有高管或工程師對(duì)設(shè)計(jì)系統(tǒng)的必要性持懷疑態(tài)度，向他們展示你整理的清單，會(huì)成為有力的溝通工具。

有些人喜歡將清單的內(nèi)容劃分為元素，組件，模塊，實(shí)用工具等。原子設(shè)計(jì)理論作為這種思路的例子，是一個(gè)很好的概念模型。但是歸根結(jié)底，所有的內(nèi)容基本上都不會(huì)超出這個(gè)范疇，所以你可以按上述的劃分貼上標(biāo)簽。總的來(lái)說(shuō)，我看到的大多數(shù)設(shè)計(jì)系統(tǒng)一般這樣劃分：

• 元素（又稱基本元素，或原子）--這些都是小的、獨(dú)立的組件，如按鈕和圖標(biāo)。
• 組件（又稱分子，或模塊）--這些通常是由小組件組裝成一個(gè)較大的組件，如搜索表單（包括一個(gè)表單輸入，一個(gè)按鈕，甚至還有搜索圖標(biāo)）。
• 模塊（又稱組織）--這些是用戶界面的一個(gè)區(qū)域，就像側(cè)板導(dǎo)航。
• 布局--內(nèi)容在頁(yè)面上的布局方式(比如頭部區(qū)域，然后是側(cè)邊欄和主要內(nèi)容區(qū)域，然后是頁(yè)腳)

△?圖24:在《In From Pages to Patterns : An Exercise for Everyone》一書中，Charlotte Jackson介紹了進(jìn)行UI盤點(diǎn)的方法。

在完成清單之后，你可以合并和刪除不需要的部分（可以在電子表格里面，如果你想更直接點(diǎn)，甚至可以直接在代碼層面進(jìn)行重構(gòu)）。同時(shí)記錄下組件是什么，什么時(shí)候使用它。這將成為你的UI庫(kù)（又叫樣式庫(kù)、組件庫(kù)，取決于你的團(tuán)隊(duì)喜歡怎么稱呼它）。

△?圖25:美國(guó)政府機(jī)構(gòu)18F有一個(gè)我最喜歡的UI庫(kù)：美國(guó)網(wǎng)頁(yè)設(shè)計(jì)標(biāo)準(zhǔn)。

大部分設(shè)計(jì)系統(tǒng)文檔包含組件的名稱、描述、實(shí)例和代碼。除此之外可能還會(huì)展示代碼、發(fā)布?xì)v史、示例等，最重要的是能夠展示你的團(tuán)隊(duì)完成工作所需要的內(nèi)容。

△?圖26:來(lái)自Lonely Planet的Rizao組件庫(kù)

總結(jié)

打造一個(gè)設(shè)計(jì)系統(tǒng)不僅僅能幫助你團(tuán)隊(duì)的產(chǎn)品更緊跟用戶體驗(yàn)，而且還建立了一條溝通設(shè)計(jì)和開發(fā)的橋梁。通過(guò)創(chuàng)建一個(gè)由設(shè)計(jì)標(biāo)簽定義的通用視覺(jué)語(yǔ)言，以及一系列在組件庫(kù)中的組件和樣式分類，都極大地改善設(shè)計(jì)師和開發(fā)人員之間的溝通，之后你對(duì)UI的編輯和更新都將更可控、靈活和全面。

歡迎關(guān)注譯者的微信公眾號(hào)：「彩云譯設(shè)計(jì)」