Categories
程式開發

優酷暗黑模式(二):如何建立設計語言標準化管理體系


伴隨著行業的成熟與競爭加劇,中國互聯網產品中心化、平台化的趨勢越加明顯。越來越多的公司對產品的設計體係與效率提出了更高的要求。為了更高效地服務多樣的業務場景,快速應對未來市場競爭的變化,需要我們跳出設計師的視角,更系統化體系化的看待整個產研過程中的問題。

一、項目背景

消費者端的用戶界面一致性是設計平台需要關注的問題,保證一致性和體驗品質,並實現設計開發的工作提效,是“設計語言標準化管理體系”的建設的核心訴求。

2006年開始,優酷手機客戶端產品經歷了多次迭代,每個業務都依各自的場景有獨特的設計訴求,但作為平台型產品,實則需要對整體的體驗品質做嚴格把控,才能實現有品質和一致性下的個性化。而平台型應用,體量大,承載業務繁多複雜,開發方式多樣,每次視覺改版,都是牽一發而動全身,對設計和開發資源的調動也是極其巨大。

平台級產品的設計團隊和研發團隊在協同工作中的最常見問題有:

  1. 多團隊協作一致性拉齊成本大;
  2. 技術實現不一致復用率不高;
  3. 從視覺設計到開發實現成本較高;

在這種狀況下如何通過有效的設計手段提升優酷的體驗一致性,實現設計開發雙提效,是當前要解決的主要問題。

優酷暗黑模式(二):如何建立設計語言標準化管理體系 1

(優酷App 2018年版本用戶界面)

二、設計目標與策略

核心目標:建立設計語言的標準化管理體系,改變設計與開發生產模式,實現設計與開發的品質和效率提升。

策略:在既定的設計語言和風格的指引下,實現設計語言的規範化、產品化和工具化。

優酷暗黑模式(二):如何建立設計語言標準化管理體系 2

1.規範化

通過規範化的手段,提升產品的一致性。規範化帶來的一致性體驗可以更好的統一視覺語言強化品牌調性,讓用戶對品牌有一個統一的心理認知,增強產品的易用性。

2.產品化

通過設計元素和組件代碼化的手段可以打造低成本可複制的能力,使各個不同顆粒度的設計元素成為一個基礎的產品化能力,來高效靈活的應對未來複雜多變的產品設計形態。

3.工具化

以工具的形式輔助產品的設計與研發,提升協作效率快速響應業務需求。

三、執行過程

“標準化是通過統一、簡化、通用、組合模塊化的手段保證業務的秩序、整體構成精簡合理及使產品功能效率最高化,來滿足業務不斷發展的需要。”

優酷在設計語言標準化管理體系建設中包括三個過程:

  1. 規范建立:認知標準統一
  2. 產品化,代碼化:協作語言統一
  3. 工具化

下面就詳細介紹下,優酷的實踐:

1. 認知標準統一:統一設計和技術對界面元素的認知體系,定義標準

1)統一認知

在自然界中,原子是最小存在的單元,原子結合在一起形成分子,這些分子可以進一步結合形成相對複雜的有機物。而在產品的視覺體系裡最小顆粒度的原子,我們理解是圓角、顏色、文字、柵格尺寸等這些最基礎的視覺的組成要素;利用這些基礎要素,我們形成以組件為單位的設計內容,如標題、按鈕等控件。原子單位(基礎設計要素)、組件、模塊、模板、頁面組成一個設計稿。

Brad Forst 最早把原子設計理論應用在界面設計中,原子設計不是線性過程,而是一種心理模型,可以幫助我們將用戶界面既視為一個整體,又是一部分的集合。設計師與工程師通過原子設計理論形成對頁面的結構的的認知統一。

優酷暗黑模式(二):如何建立設計語言標準化管理體系 3

2)定義標準

俗話說沒有規矩不成方圓,需要一定的規則更好的服務於用戶體驗。

原子(顏色、間距、圓角、柵格等)是影響產品設計風格的核心要素,我們對核心要素的使用規則進行了重新定義,由核心要素構成的所有的基礎規範以及擴展的運營設計、商業化廣告規範都是基於這個設計準則下去設計,保證核心基因的統一。

設計規範的目標重在提升設計質量及一致性,設計側有了統一的設計規範標準,將不規範約束在一定的範圍之內,保證設計輸出的一致性。在一定程度上提高設計效率。

3)建立標準化組件庫

優酷在業務需求迭代過程中積累了大量的組件,相同的組件設計細節不一致,這就需要設計師站在全局角度系統化的對所有的組件進行一次拆解抽象再重組,使每個組件具有唯一性,沉澱一個通用的標準化的設計組件庫,反哺給業務。

優酷暗黑模式(二):如何建立設計語言標準化管理體系 4

2、統一協作語言,組件庫代碼化

以視覺規範為基礎,把設計側的規範文檔及組件庫。通過一種協作語言形成設計與技術的映射關係,實現客戶端設計組件與技術組件的統一拉通,沉澱成統一的SDK共同維護。

優酷暗黑模式(二):如何建立設計語言標準化管理體系 5

1)統一協作語言

什麼是Design Token?它不是一個新的概念,在lighting design system 被應用。

“Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.”

設計令牌是設計系統的視覺設計原子-具體地說,它們是存儲視覺設計屬性的命名實體。我們使用它們代替硬編碼的值(例如,顏色的十六進制值或間距的像素值),以便為UI開發維護可擴展且一致的視覺系統。 ’’

把影響視覺風格的視覺原子(顏色、字號、間距、圓角、柵格)進行語義化命名-Design Token。設計師與工程師通過同一種協作語言,描述視覺樣式。

整個過程需要設計師與工程師共同參與深度合作,確保token名稱可理解性,要根據業務的複雜度及開發實現的最優方式給視覺原子進行命名,我們採用不帶任何業務屬性的命名方式,各業務調用更靈活。

部分命名如圖:

優酷暗黑模式(二):如何建立設計語言標準化管理體系 6

2)組件代碼化

以往開發實現過程中,研發代碼中會寫視覺原子的原始屬性值,研發實現的結果直接影響設計效果,設計師在針對某個原子屬性進行全站一致性拉齊時,涉及到要修改的場景眾多,點對點修改成本高。視覺樣式對於研發來說是一系列參數的表達,參數是否可以統一管理,只需要修改一個就可以做到全站生效呢?答案是肯定的。

研發以引入Design Token的方式對組件庫進行重新標準化開發,把視覺樣式的代碼進行統一管理,形成統一的研發組件庫,各業務線可以直接調用,收攏了散落各處的代碼,基於優酷的業務及開發實現,找到了一個適合優酷的開發實現方式。

視覺標準化之後實現的是一整套設計風格體系化的調整。例如,只需要改一個圓角間距的參數,全站呼應修改。

3、工具化賦能

先進工具代表性先進生產力,在多團隊協作的過程中,如果有工具輔助勢必事半功倍。

設計團隊將設計規範組件封裝在sketch 插件工具中,建立了設計與設計之間的規範協同,方便設計師以所見即所得的方式快速搭建頁面,技術上sketch設計插件導出標註會對屬性的值進行符號化處理,顯示屬性對應的值的同時會顯示對應的design token。從而解決了設計輸出與開發實現的效率問題。

通過將設計工具與開發平台進行拉通,使得設計產出與研發實現保持一致,完成了全流程的研發提效。通過工具云同步的方式進行迭代,改變了以往點對點的溝通模式,減小了大團隊迭代的溝通和協作成本。

優酷暗黑模式(二):如何建立設計語言標準化管理體系 7

四、產生結果和未來展望

伴隨著產品的不停迭代,不一致性正在逐漸的收斂,通過規範化,代碼化,工具化的手段解決了產品的一致性體驗。終結了在老的模式下,設計樣式不斷發散的趨勢。

在2019年優酷App改版的項目中,這種設計與研發的協作模式極大提升了執行效率,在業務需求並行的情況下可以靈活的調整視覺樣式,使設計師的精力得以釋放,更多投入到創造性的工作中。

同時,這種模式為後續優酷Dark mode 的適配,換膚機制提供了很好的基礎能力支持,節省實現成本,更進一步驗證了設計標準化的帶來的便利和工程化的思維模式的可複制性。

設計標準化體系建設是一個長線的工作和課題,我們會持續地進行探索,希望這套視覺標準化體系更完善更加強健,向更多業務賦能。

參考:

http://atomicdesign.bradfrost.com/chapter-2/

https://www.lightningdesignsystem.com/design-tokens/

作者簡介

宓寧,阿里文娛體驗設計專家。

相關閱讀

優酷暗黑模式(一):是什麼、為什麼、如何落地?