騰訊實戰(zhàn)經(jīng)驗!如何搭建有用的設(shè)計規(guī)范?
從作為 UI/UX 設(shè)計師典范級入門教材的 Human Interface Guidelines 和 Android Design Guideline(已升級為 Material Design),到各個團隊的營業(yè)都有本身的設(shè)計規(guī)范,設(shè)計規(guī)范好像越來越緊張。甚至每做一個項目都會出一套新的規(guī)范,定義好設(shè)計原則,把項目中用到的字號/色值/按鈕/輸入框等悉數(shù)整劃一齊羅列出來。
可是,花這么多精力建立的設(shè)計規(guī)范是為了解決什么題目?有沒有人用?最終的成效如何?這些都是建立規(guī)范的設(shè)計師應(yīng)該反思的題目。
一、設(shè)計「設(shè)計規(guī)范」
經(jīng)歷了多個團隊和項目設(shè)計后,發(fā)現(xiàn)設(shè)計規(guī)范的建立也要像對待一個項目一樣,必要根據(jù)面向的用戶、資源、目的、方法,設(shè)計出合適的設(shè)計規(guī)范。
本文將會結(jié)合一些業(yè)內(nèi)良好的設(shè)計規(guī)范和騰訊視頻過往案例的部分設(shè)計規(guī)范,講述我們團隊在尋求「合適」過程中的一些經(jīng)驗和踩過的坑。
二、設(shè)計規(guī)范是什么
不同的團隊對設(shè)計規(guī)范的定義是不太一樣的,有些設(shè)計規(guī)范重要描述常用控件和色值,而像 Material Design 則涵蓋大至整個平臺設(shè)計的價值觀、小至元素設(shè)計的細節(jié),造成這些差異重要是團隊和營業(yè)的不同。(小我覺得我們尋常使用的設(shè)計規(guī)范用 Design System 來形容可能比 Design Guideline 更為合適,它以適應(yīng)當(dāng)前項目和團隊為前提,可能涵蓋項目設(shè)計的引導(dǎo)原則、設(shè)計標(biāo)準(zhǔn)、設(shè)計控件等。)
常見的不同范圍的設(shè)計規(guī)范有:
1. 平臺規(guī)范
△ Material Design https://material.io
△ Fluent Design https://fluent.microsoft.com
涵蓋整個平臺的特征、世界觀、界面邏輯、設(shè)計模式、設(shè)計控件等,幫助第三方開發(fā)者更清晰地知道在該平臺中怎樣的設(shè)計是吻合平臺風(fēng)俗的、不同界面/內(nèi)容間的關(guān)系、操作體例、設(shè)計細節(jié)等。
2. 企業(yè)對外設(shè)計規(guī)范
△ UBER https://www.uber.design/case-studies/rebrand
△ Dropbox https://www.dropbox.com/branding#use
企業(yè)或營業(yè)的對外設(shè)計規(guī)范(設(shè)計指南)通常針對第三方開發(fā)者或合作伙伴,內(nèi)容重點一樣平常是品牌設(shè)計詮釋或使用規(guī)范,向外部傳遞企業(yè)價值觀及幫助合作伙伴更正確地使用企業(yè)信息,對內(nèi)部統(tǒng)籌多個營業(yè)的同等性、幫助內(nèi)部人員理解設(shè)計原則或引導(dǎo)設(shè)計落地。
3. 營業(yè)對內(nèi)設(shè)計規(guī)范
△ 騰訊視頻移動端設(shè)計規(guī)范
營業(yè)對內(nèi)的設(shè)計規(guī)范一樣平常會更微觀,通常也會涵蓋設(shè)計原則、品牌使用規(guī)范、界面邏輯、設(shè)計控件、元素細節(jié)等,偏向詳細設(shè)計落地的引導(dǎo),幫助營業(yè)設(shè)計更正確和同等,進步團隊協(xié)作服從。
三、建立怎樣的設(shè)計規(guī)范
1. 營業(yè)訴求決定設(shè)計規(guī)范的范圍與形態(tài)
設(shè)計規(guī)范跟項目的設(shè)計一樣,都必要基于當(dāng)前背景下進行設(shè)計,不同的營業(yè)訴求所必要的設(shè)計規(guī)范是不一樣的,如 Google 必要建立 Material Design 來引導(dǎo)和規(guī)范第三方開發(fā)者基于 Android 生態(tài)進行設(shè)計和開發(fā),而初創(chuàng)團隊/項目只必要正確、可復(fù)用的標(biāo)注就能知足協(xié)作訴求。
從設(shè)計規(guī)范的范圍和形態(tài)上來說并沒有絕對的對與錯,不是范圍越廣越過細的規(guī)范就越好,能適應(yīng)當(dāng)前項目和團隊、知足營業(yè)訴求的就是「合適的」設(shè)計規(guī)范。
而規(guī)范中必要涵蓋到哪些信息、以什么體例呈現(xiàn)和協(xié)作,這些都必要基于營業(yè)的訴求決定。我們也可以像拆解設(shè)計需求那樣,通過一些關(guān)鍵點來幫助我們更正確地判斷設(shè)計規(guī)范的范圍和形態(tài)。
2. 拆解背景
以騰訊視頻為例,假如必要建立一套各方面都完備過細的設(shè)計規(guī)范,必要跨多個部門及營業(yè),其中包含品牌規(guī)范、界面設(shè)計、廣告規(guī)范、運營圖規(guī)范等等,其中耗費的人力和資源特別很是重大,在營業(yè)快速上升的時期,相比一次性建立規(guī)范,根據(jù)優(yōu)先級來單點解決可能是更好的辦法。
所以我們在建立移動端設(shè)計規(guī)范時,遵循「合適」的原則,圍繞當(dāng)前的條件和重要題目,通過規(guī)范來解決這些題目:
3. 涉及營業(yè)
騰訊視頻 iOS/Android 端界面設(shè)計,不包括內(nèi)容運營規(guī)范。
4. 必要解決的題目
- 騰訊視頻 iOS/Android 端經(jīng)歷5個大版本和幾十個小版本,存在一些冗余和不同等的控件;
- 界面的通用模塊設(shè)計時服從可以進一步進步;
- 多人協(xié)作設(shè)計和輸出過程中容易產(chǎn)生偏差導(dǎo)致不同等和細節(jié)錯誤;
- 營業(yè)復(fù)雜、模塊數(shù)量多且交叉,每次團體改動都必要耗費大量設(shè)計、研發(fā)、測試資源;
- 設(shè)計、研發(fā)對接成本高,尤其是新設(shè)計師或新研發(fā)介入項目時;
- 1位設(shè)計師必要對接多個研發(fā),并且輸出/溝通所需的工作量較高。
5. 目標(biāo)
- 削減冗余控件;
- 幫助組內(nèi)設(shè)計師快速復(fù)用基礎(chǔ)組件;
- 建立通用的細節(jié)設(shè)計標(biāo)準(zhǔn);
- 進步界面的模塊化通用程度;
- 建立設(shè)計與開發(fā)對接的基礎(chǔ)標(biāo)準(zhǔn);
- 進步設(shè)計輸出對接的服從,降低輸出工作量。
6. 目標(biāo)用戶
- 重要負(fù)責(zé)騰訊視頻 iOS/Android 端界面設(shè)計的設(shè)計師(參與設(shè)計師5人左右)
- 會員等相干營業(yè)的設(shè)計師
- iOS/Android 研發(fā)工程師
7. 資源
- 時間:2周內(nèi),必要兼顧項目進度
- 人力:1設(shè)計師,標(biāo)準(zhǔn)建立后需推動研發(fā)進行對接,預(yù)計 iOS/Android 研發(fā)工程師各1人。
8. 思路
- 在重要界面和柵格定稿后,梳理出重要模塊;
- 建立基礎(chǔ)控件的規(guī)范,并定義使用場景和樣式;
- 規(guī)范字號、色值、圖標(biāo)尺寸等基礎(chǔ)尺寸、間距、位置等信息;
- 建立設(shè)計 – 研發(fā)對照表;
- 建立設(shè)計資源輸出規(guī)范。
9. 載體
因為這套規(guī)范基本不必要與第三方團隊對接,常用的 PDF 設(shè)計規(guī)范更新麻煩且每次修改后都必要所有參與者更新,所以并未使用 PDF 作為規(guī)范的輸出格式。
- PSD 源文件:用于設(shè)計師之間模塊、控件、樣式的對接和復(fù)用;
- Google Docs/內(nèi)部 wiki:用于承載樣式文檔、設(shè)計 – 研發(fā)對照表。
這套規(guī)范的最終輸出物包含通用模塊、控件、設(shè)計樣式、設(shè)計 – 研發(fā)對照表、輸出(標(biāo)注)規(guī)范,能知足團隊現(xiàn)階段對設(shè)計規(guī)范的訴求。
除了比較常見的樣式/模塊/組件等,重點為大家分享是設(shè)計 – 研發(fā)對照表(后來發(fā)現(xiàn)國外的 lightningdesignsystem 也有類似的方法,他們稱這類型設(shè)計樣式與前端結(jié)合的格式為 Design Token,并且把大部分設(shè)計樣式都 Token 化了,但如許必要設(shè)計師掌握更多的重構(gòu)知識以及對Design Token 特別很是認(rèn)識才能有用落地)及輸出規(guī)范,這兩項對團隊協(xié)作服從有較大提拔。
在重要界面視覺框架基本定型的階段就開始定義設(shè)計 – 研發(fā)對照表,梳理框架和組件的間距/尺寸等信息,把視覺轉(zhuǎn)換為正確的數(shù)值和編碼,并且在后續(xù)進行設(shè)計時隨界面設(shè)計賡續(xù)相互迭代。
在這份視覺 – 研發(fā)對照表中重要包含:
- 筆墨
- 色彩
- 尺寸
- 布局
- 通用基礎(chǔ)屬性
10. 迭代優(yōu)化
在使用過程中,發(fā)現(xiàn)布局參數(shù)上,框架間距的代號應(yīng)與通俗間距代號區(qū)分開,否則在界面大改版無法天真地調(diào)整界面框架的間距和尺寸參數(shù)。星散框架代號(#WG)與通俗代號(#W)后,研發(fā)工程師只要修改框架間距代號的數(shù)值就能快速調(diào)整框架,并且不影響界面詳細代號的結(jié)果,極大地降低過往版本迭代中要逐個參數(shù)對比修改的工作量。
四、推動研發(fā)部門建立對接樣式表
設(shè)計 – 研發(fā)對照表能否順利且高效地實行下去,研發(fā)部門的配合特別很是緊張。建立完對照表后,必要推動 iOS/Android 研發(fā)在開發(fā)端建立對應(yīng)的樣式代碼,可以通過 Google Docs 或者內(nèi)部 Wiki 等在線協(xié)作工具進行更新。
并且基于設(shè)計 – 研發(fā)對照表,設(shè)計師在輸出標(biāo)注時使用代號標(biāo)注的方法,重要有幾個上風(fēng):
- 省去過往一大串的標(biāo)注信息,只用幾個代號就能完成一個模塊的標(biāo)注;
- 削減在標(biāo)注過程中出現(xiàn)的人為錯誤導(dǎo)致數(shù)值不正確;
- 客戶端研發(fā)能快速調(diào)用樣式參數(shù),進步代碼復(fù)用和開發(fā)服從;
- 進步服從早點放工。
隨著項目正計劃進行的品牌升級,我們也會漸漸針對當(dāng)前規(guī)范進行迭代,如繼承完美交互規(guī)范、雄厚設(shè)計模塊、完美設(shè)計原則等,使設(shè)計規(guī)范更完備和正確。
除了內(nèi)部規(guī)范,我們也會針對一些合作伙伴輸出有針對性且較為細致的設(shè)計規(guī)范,從使用場景、尺寸、規(guī)則、錯誤案例、輸出格式等都會過細說明。
如給第三方外包設(shè)計的頻道圖標(biāo)設(shè)計規(guī)范:
△ 騰訊視頻移動端頻道圖標(biāo)設(shè)計規(guī)范(節(jié)選)
以及在一些初創(chuàng)型項目中,我們會針對不同設(shè)計的階段和側(cè)重點進行規(guī)范的定義和調(diào)整。如新項目內(nèi)容運營設(shè)計義務(wù)特別很是重,設(shè)計資源難以知足每日多次更新的話題 Banner,于是我們把設(shè)計規(guī)范的重點放在了基礎(chǔ)品牌延展規(guī)則上,幫助運營同事能快速、吻合品牌設(shè)計地輸出 Banner。
△ MOKA 設(shè)計規(guī)范品牌延展部分(節(jié)選)
五、建立設(shè)計規(guī)范常見的誤區(qū)
通過上述案例可見設(shè)計規(guī)范并不是刻舟求劍的固定格式,把所有內(nèi)容按照網(wǎng)上能找到的規(guī)范填一遍是一種偷懶且低成效的辦法,并且在建立設(shè)計規(guī)范很容易陷入一些誤區(qū)導(dǎo)致規(guī)范無法有用落地。
1. 過于口號化
有些設(shè)計規(guī)范會涉及到設(shè)計原則(Design Principles)的定義,它是對詳細設(shè)計的引導(dǎo)性原則,幫助我們判斷設(shè)計方案是否吻合精確或合適??此剖亲詈唵蔚膸拙湓?,現(xiàn)實上是最難并且是最應(yīng)穩(wěn)重決定的,它應(yīng)基于對營業(yè)和設(shè)計的理解提煉出來的規(guī)則。
上面的例子看起來彷佛還挺有道理的,但現(xiàn)實上怎么應(yīng)用?假設(shè)要判斷一個設(shè)計方案是否吻合設(shè)計原則「簡潔優(yōu)雅」,怎樣才夠簡潔夠優(yōu)雅?這些假如離開了提煉過程和團隊中的共識,幾乎沒有任何作用。
2. 為設(shè)計規(guī)范而做設(shè)計規(guī)范
Material Design 是一套特別很是良好的設(shè)計規(guī)范,涵蓋面廣而且過細,它可以作為一個行業(yè)標(biāo)桿,但假如對本身團隊的營業(yè)建立規(guī)范,特別很是不建議參考這個結(jié)構(gòu),由于平臺/營業(yè)特征/用戶群/可調(diào)用的資源全都不一樣,按照 MD 做一遍,很可能大量的時間耗進去了但無法落地,一點成效都沒有。
設(shè)計師在做任何設(shè)計之前都應(yīng)盡量想清楚目標(biāo),避免為設(shè)計規(guī)范而做設(shè)計規(guī)范。
3. 對接成本高
上百頁的 PDF 格式設(shè)計規(guī)范(如很想吐槽的 Android 4.0 設(shè)計規(guī)范)和近動不動幾 GB 的 UIKit,每次只要修改其中一小部分都要悉數(shù)對接的成員更新一遍,這種設(shè)計規(guī)范的對接體例會緊張影響規(guī)范的實效性,很難做到參與者手上都是最新版本,對發(fā)布者來說每次修改一個小點都要悉數(shù)重新導(dǎo)出也是特別很是痛楚的。尤其是針對團隊內(nèi)部協(xié)作的設(shè)計規(guī)范,選擇發(fā)布簡單、實時更新的協(xié)作載領(lǐng)會特別很是大地進步設(shè)計規(guī)范的使用率。
4. 不進行迭代
設(shè)計規(guī)范也要像詳細的產(chǎn)品一樣,必要進行迭代和維護,而不是在項目做完后把設(shè)計規(guī)范整頓完就扔在那落灰,然后再等到每次設(shè)計改版時悉數(shù)重做,如許成本高收益低,并且?guī)缀跗鸩坏剿F(xiàn)實應(yīng)有的作用。
舉上述案例并不完全都是不好的,而是許多時候并不完全適用于國內(nèi)互聯(lián)網(wǎng)設(shè)計團隊,營業(yè)迭代速度快,建立規(guī)范的成本高,難以與產(chǎn)品/研發(fā)等團隊達成共識,落地難,這些都是我們必要面臨的題目。圍繞當(dāng)前階段必要解決的題目,才能更有用地建立規(guī)范并實行下去,起到設(shè)計規(guī)范應(yīng)有的作用。
六、正在進行的一些探索和思考
除了上面的一些規(guī)范,我們團隊還正在進行一些探索,如:
1. 通過轉(zhuǎn)換生產(chǎn)工具來進步協(xié)作服從
Sketch 在界面設(shè)計上確實會更輕量,并且 Library 的團隊共享使得協(xié)作特別很是方便,當(dāng)組件更新了能快速同步到每一位參與者的設(shè)計文檔里,但騰訊視頻的設(shè)計涉及到多個營業(yè)部門,如其它端的設(shè)計師、廣告平臺的設(shè)計師、運營同事等,直接把使用多年并在 Mac 和 Windows 都有的 Photoshop 替代成 Mac only 的 Sketch,短期看來不是分外實際。所以正在嘗試在創(chuàng)新項目上使用 Sketch 進行設(shè)計和協(xié)作,服從有較大進步。
2. 對界面設(shè)計進一步組件化
另一方面是進一步對界面組件化,除了常用的 Patterns 和 Style,正探索跟研發(fā)一路把動效和操作反饋組件化,一方面能進步產(chǎn)品中動效的同等性,另一方面不必要每次添加動效都耗費大量的研發(fā)資源。
結(jié)語
除了產(chǎn)品設(shè)計和體驗,我們也一向在探索和優(yōu)化協(xié)作服從,為團隊爭奪更多時間用于創(chuàng)新和體驗設(shè)計上,不肯定完全精確或適用于所有團隊,盼望這篇文章能為大家?guī)硪恍﹩l(fā)和思路。
作者:
KongZhen@騰訊視頻TVD
迎接署名和標(biāo)記來源轉(zhuǎn)載 : )
騰訊視頻TVD是一個很年輕的團隊,組內(nèi)氛圍好,不無聊,迎接投簡歷或前來勾搭~
本文地址:http://irelandcustomcontracting.com/tutorial/di3997.html