騰訊實(shí)戰(zhàn)經(jīng)驗(yàn)！如何搭建有用的設(shè)計(jì)規(guī)范？

從作為 UI/UX 設(shè)計(jì)師典范級(jí)入門教材的 Human Interface Guidelines 和 Android Design Guideline（已升級(jí)為 Material Design），到各個(gè)團(tuán)隊(duì)的營(yíng)業(yè)都有本身的設(shè)計(jì)規(guī)范，設(shè)計(jì)規(guī)范好像越來(lái)越緊張。甚至每做一個(gè)項(xiàng)目都會(huì)出一套新的規(guī)范，定義好設(shè)計(jì)原則，把項(xiàng)目中用到的字號(hào)/色值/按鈕/輸入框等悉數(shù)整劃一齊羅列出來(lái)。

可是，花這么多精力建立的設(shè)計(jì)規(guī)范是為了解決什么題目？有沒有人用？最終的成效如何？這些都是建立規(guī)范的設(shè)計(jì)師應(yīng)該反思的題目。

一、設(shè)計(jì)「設(shè)計(jì)規(guī)范」

經(jīng)歷了多個(gè)團(tuán)隊(duì)和項(xiàng)目設(shè)計(jì)后，發(fā)現(xiàn)設(shè)計(jì)規(guī)范的建立也要像對(duì)待一個(gè)項(xiàng)目一樣，必要根據(jù)面向的用戶、資源、目的、方法，設(shè)計(jì)出合適的設(shè)計(jì)規(guī)范。

本文將會(huì)結(jié)合一些業(yè)內(nèi)良好的設(shè)計(jì)規(guī)范和騰訊視頻過往案例的部分設(shè)計(jì)規(guī)范，講述我們團(tuán)隊(duì)在尋求「合適」過程中的一些經(jīng)驗(yàn)和踩過的坑。

二、設(shè)計(jì)規(guī)范是什么

不同的團(tuán)隊(duì)對(duì)設(shè)計(jì)規(guī)范的定義是不太一樣的，有些設(shè)計(jì)規(guī)范重要描述常用控件和色值，而像 Material Design 則涵蓋大至整個(gè)平臺(tái)設(shè)計(jì)的價(jià)值觀、小至元素設(shè)計(jì)的細(xì)節(jié)，造成這些差異重要是團(tuán)隊(duì)和營(yíng)業(yè)的不同。（小我覺得我們尋常使用的設(shè)計(jì)規(guī)范用 Design System 來(lái)形容可能比 Design Guideline 更為合適，它以適應(yīng)當(dāng)前項(xiàng)目和團(tuán)隊(duì)為前提，可能涵蓋項(xiàng)目設(shè)計(jì)的引導(dǎo)原則、設(shè)計(jì)標(biāo)準(zhǔn)、設(shè)計(jì)控件等。）

常見的不同范圍的設(shè)計(jì)規(guī)范有：

1. 平臺(tái)規(guī)范

△ Material Design https://material.io

△ Fluent Design https://fluent.microsoft.com

涵蓋整個(gè)平臺(tái)的特征、世界觀、界面邏輯、設(shè)計(jì)模式、設(shè)計(jì)控件等，幫助第三方開發(fā)者更清晰地知道在該平臺(tái)中怎樣的設(shè)計(jì)是吻合平臺(tái)風(fēng)俗的、不同界面/內(nèi)容間的關(guān)系、操作體例、設(shè)計(jì)細(xì)節(jié)等。

2. 企業(yè)對(duì)外設(shè)計(jì)規(guī)范

△ UBER https://www.uber.design/case-studies/rebrand

△ Dropbox https://www.dropbox.com/branding#use

企業(yè)或營(yíng)業(yè)的對(duì)外設(shè)計(jì)規(guī)范（設(shè)計(jì)指南）通常針對(duì)第三方開發(fā)者或合作伙伴，內(nèi)容重點(diǎn)一樣平常是品牌設(shè)計(jì)詮釋或使用規(guī)范，向外部傳遞企業(yè)價(jià)值觀及幫助合作伙伴更正確地使用企業(yè)信息，對(duì)內(nèi)部統(tǒng)籌多個(gè)營(yíng)業(yè)的同等性、幫助內(nèi)部人員理解設(shè)計(jì)原則或引導(dǎo)設(shè)計(jì)落地。

3. 營(yíng)業(yè)對(duì)內(nèi)設(shè)計(jì)規(guī)范

△ 騰訊視頻移動(dòng)端設(shè)計(jì)規(guī)范

營(yíng)業(yè)對(duì)內(nèi)的設(shè)計(jì)規(guī)范一樣平常會(huì)更微觀，通常也會(huì)涵蓋設(shè)計(jì)原則、品牌使用規(guī)范、界面邏輯、設(shè)計(jì)控件、元素細(xì)節(jié)等，偏向詳細(xì)設(shè)計(jì)落地的引導(dǎo)，幫助營(yíng)業(yè)設(shè)計(jì)更正確和同等，進(jìn)步團(tuán)隊(duì)協(xié)作服從。

三、建立怎樣的設(shè)計(jì)規(guī)范

1. 營(yíng)業(yè)訴求決定設(shè)計(jì)規(guī)范的范圍與形態(tài)

設(shè)計(jì)規(guī)范跟項(xiàng)目的設(shè)計(jì)一樣，都必要基于當(dāng)前背景下進(jìn)行設(shè)計(jì)，不同的營(yíng)業(yè)訴求所必要的設(shè)計(jì)規(guī)范是不一樣的，如 Google 必要建立 Material Design 來(lái)引導(dǎo)和規(guī)范第三方開發(fā)者基于 Android 生態(tài)進(jìn)行設(shè)計(jì)和開發(fā)，而初創(chuàng)團(tuán)隊(duì)/項(xiàng)目只必要正確、可復(fù)用的標(biāo)注就能知足協(xié)作訴求。

從設(shè)計(jì)規(guī)范的范圍和形態(tài)上來(lái)說并沒有絕對(duì)的對(duì)與錯(cuò)，不是范圍越廣越過細(xì)的規(guī)范就越好，能適應(yīng)當(dāng)前項(xiàng)目和團(tuán)隊(duì)、知足營(yíng)業(yè)訴求的就是「合適的」設(shè)計(jì)規(guī)范。

而規(guī)范中必要涵蓋到哪些信息、以什么體例呈現(xiàn)和協(xié)作，這些都必要基于營(yíng)業(yè)的訴求決定。我們也可以像拆解設(shè)計(jì)需求那樣，通過一些關(guān)鍵點(diǎn)來(lái)幫助我們更正確地判斷設(shè)計(jì)規(guī)范的范圍和形態(tài)。

2. 拆解背景

以騰訊視頻為例，假如必要建立一套各方面都完備過細(xì)的設(shè)計(jì)規(guī)范，必要跨多個(gè)部門及營(yíng)業(yè)，其中包含品牌規(guī)范、界面設(shè)計(jì)、廣告規(guī)范、運(yùn)營(yíng)圖規(guī)范等等，其中耗費(fèi)的人力和資源特別很是重大，在營(yíng)業(yè)快速上升的時(shí)期，相比一次性建立規(guī)范，根據(jù)優(yōu)先級(jí)來(lái)單點(diǎn)解決可能是更好的辦法。

所以我們?cè)诮⒁苿?dòng)端設(shè)計(jì)規(guī)范時(shí)，遵循「合適」的原則，圍繞當(dāng)前的條件和重要題目，通過規(guī)范來(lái)解決這些題目：

3. 涉及營(yíng)業(yè)

騰訊視頻 iOS/Android 端界面設(shè)計(jì)，不包括內(nèi)容運(yùn)營(yíng)規(guī)范。

4. 必要解決的題目

• 騰訊視頻 iOS/Android 端經(jīng)歷5個(gè)大版本和幾十個(gè)小版本，存在一些冗余和不同等的控件；
• 界面的通用模塊設(shè)計(jì)時(shí)服從可以進(jìn)一步進(jìn)步；
• 多人協(xié)作設(shè)計(jì)和輸出過程中容易產(chǎn)生偏差導(dǎo)致不同等和細(xì)節(jié)錯(cuò)誤；
• 營(yíng)業(yè)復(fù)雜、模塊數(shù)量多且交叉，每次團(tuán)體改動(dòng)都必要耗費(fèi)大量設(shè)計(jì)、研發(fā)、測(cè)試資源；
• 設(shè)計(jì)、研發(fā)對(duì)接成本高，尤其是新設(shè)計(jì)師或新研發(fā)介入項(xiàng)目時(shí)；
• 1位設(shè)計(jì)師必要對(duì)接多個(gè)研發(fā)，并且輸出/溝通所需的工作量較高。

5. 目標(biāo)

• 削減冗余控件；
• 幫助組內(nèi)設(shè)計(jì)師快速?gòu)?fù)用基礎(chǔ)組件；
• 建立通用的細(xì)節(jié)設(shè)計(jì)標(biāo)準(zhǔn)；
• 進(jìn)步界面的模塊化通用程度；
• 建立設(shè)計(jì)與開發(fā)對(duì)接的基礎(chǔ)標(biāo)準(zhǔn)；
• 進(jìn)步設(shè)計(jì)輸出對(duì)接的服從，降低輸出工作量。

6. 目標(biāo)用戶

• 重要負(fù)責(zé)騰訊視頻 iOS/Android 端界面設(shè)計(jì)的設(shè)計(jì)師（參與設(shè)計(jì)師5人左右）
• 會(huì)員等相干營(yíng)業(yè)的設(shè)計(jì)師
• iOS/Android 研發(fā)工程師

7. 資源

• 時(shí)間：2周內(nèi)，必要兼顧項(xiàng)目進(jìn)度
• 人力：1設(shè)計(jì)師，標(biāo)準(zhǔn)建立后需推動(dòng)研發(fā)進(jìn)行對(duì)接，預(yù)計(jì) iOS/Android 研發(fā)工程師各1人。

8. 思路

• 在重要界面和柵格定稿后，梳理出重要模塊；
• 建立基礎(chǔ)控件的規(guī)范，并定義使用場(chǎng)景和樣式；
• 規(guī)范字號(hào)、色值、圖標(biāo)尺寸等基礎(chǔ)尺寸、間距、位置等信息；
• 建立設(shè)計(jì) – 研發(fā)對(duì)照表；
• 建立設(shè)計(jì)資源輸出規(guī)范。

9. 載體

因?yàn)檫@套規(guī)范基本不必要與第三方團(tuán)隊(duì)對(duì)接，常用的 PDF 設(shè)計(jì)規(guī)范更新麻煩且每次修改后都必要所有參與者更新，所以并未使用 PDF 作為規(guī)范的輸出格式。

• PSD 源文件：用于設(shè)計(jì)師之間模塊、控件、樣式的對(duì)接和復(fù)用；
• Google Docs/內(nèi)部 wiki：用于承載樣式文檔、設(shè)計(jì) – 研發(fā)對(duì)照表。

這套規(guī)范的最終輸出物包含通用模塊、控件、設(shè)計(jì)樣式、設(shè)計(jì) – 研發(fā)對(duì)照表、輸出（標(biāo)注）規(guī)范，能知足團(tuán)隊(duì)現(xiàn)階段對(duì)設(shè)計(jì)規(guī)范的訴求。

除了比較常見的樣式/模塊/組件等，重點(diǎn)為大家分享是設(shè)計(jì) – 研發(fā)對(duì)照表（后來(lái)發(fā)現(xiàn)國(guó)外的 lightningdesignsystem 也有類似的方法，他們稱這類型設(shè)計(jì)樣式與前端結(jié)合的格式為 Design Token，并且把大部分設(shè)計(jì)樣式都 Token 化了，但如許必要設(shè)計(jì)師掌握更多的重構(gòu)知識(shí)以及對(duì)Design Token 特別很是認(rèn)識(shí)才能有用落地）及輸出規(guī)范，這兩項(xiàng)對(duì)團(tuán)隊(duì)協(xié)作服從有較大提拔。

在重要界面視覺框架基本定型的階段就開始定義設(shè)計(jì) – 研發(fā)對(duì)照表，梳理框架和組件的間距/尺寸等信息，把視覺轉(zhuǎn)換為正確的數(shù)值和編碼，并且在后續(xù)進(jìn)行設(shè)計(jì)時(shí)隨界面設(shè)計(jì)賡續(xù)相互迭代。

在這份視覺 – 研發(fā)對(duì)照表中重要包含：

• 筆墨
• 色彩
• 尺寸
• 布局
• 通用基礎(chǔ)屬性

10. 迭代優(yōu)化

在使用過程中，發(fā)現(xiàn)布局參數(shù)上，框架間距的代號(hào)應(yīng)與通俗間距代號(hào)區(qū)分開，否則在界面大改版無(wú)法天真地調(diào)整界面框架的間距和尺寸參數(shù)。星散框架代號(hào)（#WG）與通俗代號(hào)（#W）后，研發(fā)工程師只要修改框架間距代號(hào)的數(shù)值就能快速調(diào)整框架，并且不影響界面詳細(xì)代號(hào)的結(jié)果，極大地降低過往版本迭代中要逐個(gè)參數(shù)對(duì)比修改的工作量。

四、推動(dòng)研發(fā)部門建立對(duì)接樣式表

設(shè)計(jì) – 研發(fā)對(duì)照表能否順利且高效地實(shí)行下去，研發(fā)部門的配合特別很是緊張。建立完對(duì)照表后，必要推動(dòng) iOS/Android 研發(fā)在開發(fā)端建立對(duì)應(yīng)的樣式代碼，可以通過 Google Docs 或者內(nèi)部 Wiki 等在線協(xié)作工具進(jìn)行更新。

并且基于設(shè)計(jì) – 研發(fā)對(duì)照表，設(shè)計(jì)師在輸出標(biāo)注時(shí)使用代號(hào)標(biāo)注的方法，重要有幾個(gè)上風(fēng)：

• 省去過往一大串的標(biāo)注信息，只用幾個(gè)代號(hào)就能完成一個(gè)模塊的標(biāo)注；
• 削減在標(biāo)注過程中出現(xiàn)的人為錯(cuò)誤導(dǎo)致數(shù)值不正確；
• 客戶端研發(fā)能快速調(diào)用樣式參數(shù)，進(jìn)步代碼復(fù)用和開發(fā)服從；
• 進(jìn)步服從早點(diǎn)放工。

隨著項(xiàng)目正計(jì)劃進(jìn)行的品牌升級(jí)，我們也會(huì)漸漸針對(duì)當(dāng)前規(guī)范進(jìn)行迭代，如繼承完美交互規(guī)范、雄厚設(shè)計(jì)模塊、完美設(shè)計(jì)原則等，使設(shè)計(jì)規(guī)范更完備和正確。

除了內(nèi)部規(guī)范，我們也會(huì)針對(duì)一些合作伙伴輸出有針對(duì)性且較為細(xì)致的設(shè)計(jì)規(guī)范，從使用場(chǎng)景、尺寸、規(guī)則、錯(cuò)誤案例、輸出格式等都會(huì)過細(xì)說明。

如給第三方外包設(shè)計(jì)的頻道圖標(biāo)設(shè)計(jì)規(guī)范：

△ 騰訊視頻移動(dòng)端頻道圖標(biāo)設(shè)計(jì)規(guī)范（節(jié)選）

以及在一些初創(chuàng)型項(xiàng)目中，我們會(huì)針對(duì)不同設(shè)計(jì)的階段和側(cè)重點(diǎn)進(jìn)行規(guī)范的定義和調(diào)整。如新項(xiàng)目?jī)?nèi)容運(yùn)營(yíng)設(shè)計(jì)義務(wù)特別很是重，設(shè)計(jì)資源難以知足每日多次更新的話題 Banner，于是我們把設(shè)計(jì)規(guī)范的重點(diǎn)放在了基礎(chǔ)品牌延展規(guī)則上，幫助運(yùn)營(yíng)同事能快速、吻合品牌設(shè)計(jì)地輸出 Banner。

△ MOKA 設(shè)計(jì)規(guī)范品牌延展部分（節(jié)選）

五、建立設(shè)計(jì)規(guī)范常見的誤區(qū)

通過上述案例可見設(shè)計(jì)規(guī)范并不是刻舟求劍的固定格式，把所有內(nèi)容按照網(wǎng)上能找到的規(guī)范填一遍是一種偷懶且低成效的辦法，并且在建立設(shè)計(jì)規(guī)范很容易陷入一些誤區(qū)導(dǎo)致規(guī)范無(wú)法有用落地。

1. 過于口號(hào)化

有些設(shè)計(jì)規(guī)范會(huì)涉及到設(shè)計(jì)原則（Design Principles）的定義，它是對(duì)詳細(xì)設(shè)計(jì)的引導(dǎo)性原則，幫助我們判斷設(shè)計(jì)方案是否吻合精確或合適。看似是最簡(jiǎn)單的幾句話，現(xiàn)實(shí)上是最難并且是最應(yīng)穩(wěn)重決定的，它應(yīng)基于對(duì)營(yíng)業(yè)和設(shè)計(jì)的理解提煉出來(lái)的規(guī)則。

上面的例子看起來(lái)彷佛還挺有道理的，但現(xiàn)實(shí)上怎么應(yīng)用？假設(shè)要判斷一個(gè)設(shè)計(jì)方案是否吻合設(shè)計(jì)原則「簡(jiǎn)潔優(yōu)雅」，怎樣才夠簡(jiǎn)潔夠優(yōu)雅？這些假如離開了提煉過程和團(tuán)隊(duì)中的共識(shí)，幾乎沒有任何作用。

2. 為設(shè)計(jì)規(guī)范而做設(shè)計(jì)規(guī)范

Material Design 是一套特別很是良好的設(shè)計(jì)規(guī)范，涵蓋面廣而且過細(xì)，它可以作為一個(gè)行業(yè)標(biāo)桿，但假如對(duì)本身團(tuán)隊(duì)的營(yíng)業(yè)建立規(guī)范，特別很是不建議參考這個(gè)結(jié)構(gòu)，由于平臺(tái)/營(yíng)業(yè)特征/用戶群/可調(diào)用的資源全都不一樣，按照 MD 做一遍，很可能大量的時(shí)間耗進(jìn)去了但無(wú)法落地，一點(diǎn)成效都沒有。

設(shè)計(jì)師在做任何設(shè)計(jì)之前都應(yīng)盡量想清楚目標(biāo)，避免為設(shè)計(jì)規(guī)范而做設(shè)計(jì)規(guī)范。

3. 對(duì)接成本高

上百頁(yè)的 PDF 格式設(shè)計(jì)規(guī)范（如很想吐槽的 Android 4.0 設(shè)計(jì)規(guī)范）和近動(dòng)不動(dòng)幾 GB 的 UIKit，每次只要修改其中一小部分都要悉數(shù)對(duì)接的成員更新一遍，這種設(shè)計(jì)規(guī)范的對(duì)接體例會(huì)緊張影響規(guī)范的實(shí)效性，很難做到參與者手上都是最新版本，對(duì)發(fā)布者來(lái)說每次修改一個(gè)小點(diǎn)都要悉數(shù)重新導(dǎo)出也是特別很是痛楚的。尤其是針對(duì)團(tuán)隊(duì)內(nèi)部協(xié)作的設(shè)計(jì)規(guī)范，選擇發(fā)布簡(jiǎn)單、實(shí)時(shí)更新的協(xié)作載領(lǐng)會(huì)特別很是大地進(jìn)步設(shè)計(jì)規(guī)范的使用率。

4. 不進(jìn)行迭代

設(shè)計(jì)規(guī)范也要像詳細(xì)的產(chǎn)品一樣，必要進(jìn)行迭代和維護(hù)，而不是在項(xiàng)目做完后把設(shè)計(jì)規(guī)范整頓完就扔在那落灰，然后再等到每次設(shè)計(jì)改版時(shí)悉數(shù)重做，如許成本高收益低，并且?guī)缀跗鸩坏剿F(xiàn)實(shí)應(yīng)有的作用。

舉上述案例并不完全都是不好的，而是許多時(shí)候并不完全適用于國(guó)內(nèi)互聯(lián)網(wǎng)設(shè)計(jì)團(tuán)隊(duì)，營(yíng)業(yè)迭代速度快，建立規(guī)范的成本高，難以與產(chǎn)品/研發(fā)等團(tuán)隊(duì)達(dá)成共識(shí)，落地難，這些都是我們必要面臨的題目。圍繞當(dāng)前階段必要解決的題目，才能更有用地建立規(guī)范并實(shí)行下去，起到設(shè)計(jì)規(guī)范應(yīng)有的作用。

六、正在進(jìn)行的一些探索和思考

除了上面的一些規(guī)范，我們團(tuán)隊(duì)還正在進(jìn)行一些探索，如：

1. 通過轉(zhuǎn)換生產(chǎn)工具來(lái)進(jìn)步協(xié)作服從

Sketch 在界面設(shè)計(jì)上確實(shí)會(huì)更輕量，并且 Library 的團(tuán)隊(duì)共享使得協(xié)作特別很是方便，當(dāng)組件更新了能快速同步到每一位參與者的設(shè)計(jì)文檔里，但騰訊視頻的設(shè)計(jì)涉及到多個(gè)營(yíng)業(yè)部門，如其它端的設(shè)計(jì)師、廣告平臺(tái)的設(shè)計(jì)師、運(yùn)營(yíng)同事等，直接把使用多年并在 Mac 和 Windows 都有的 Photoshop 替代成 Mac only 的 Sketch，短期看來(lái)不是分外實(shí)際。所以正在嘗試在創(chuàng)新項(xiàng)目上使用 Sketch 進(jìn)行設(shè)計(jì)和協(xié)作，服從有較大進(jìn)步。

2. 對(duì)界面設(shè)計(jì)進(jìn)一步組件化

另一方面是進(jìn)一步對(duì)界面組件化，除了常用的 Patterns 和 Style，正探索跟研發(fā)一路把動(dòng)效和操作反饋組件化，一方面能進(jìn)步產(chǎn)品中動(dòng)效的同等性，另一方面不必要每次添加動(dòng)效都耗費(fèi)大量的研發(fā)資源。

結(jié)語(yǔ)

除了產(chǎn)品設(shè)計(jì)和體驗(yàn)，我們也一向在探索和優(yōu)化協(xié)作服從，為團(tuán)隊(duì)爭(zhēng)奪更多時(shí)間用于創(chuàng)新和體驗(yàn)設(shè)計(jì)上，不肯定完全精確或適用于所有團(tuán)隊(duì)，盼望這篇文章能為大家?guī)?lái)一些啟發(fā)和思路。

作者：

KongZhen@騰訊視頻TVD

迎接署名和標(biāo)記來(lái)源轉(zhuǎn)載 : )

騰訊視頻TVD是一個(gè)很年輕的團(tuán)隊(duì)，組內(nèi)氛圍好，不無(wú)聊，迎接投簡(jiǎn)歷或前來(lái)勾搭~