設(shè)計系統(tǒng)的介紹與構(gòu)成:B端設(shè)計系統(tǒng)應(yīng)該怎么做?

0 評論 9338 瀏覽 33 收藏 11 分鐘

編輯導語:B端產(chǎn)品即為組織提供商業(yè)價值的產(chǎn)品或服務(wù),B端產(chǎn)品的設(shè)計能力是產(chǎn)品經(jīng)理必須具備的能力之一。那么,B端設(shè)計系統(tǒng)應(yīng)該怎么做呢?本文作者為我們針對設(shè)計系統(tǒng)做了介紹,分析了其優(yōu)勢和內(nèi)容,并且列舉了一些優(yōu)秀實踐的案例。

一、前言

酷家樂作為saas服務(wù)公司,含有多種B端產(chǎn)品。

對于B端產(chǎn)品的體驗設(shè)計:一方面需要進行體驗洞察;另一方面非常適合利用設(shè)計系統(tǒng)來提升設(shè)計效率與產(chǎn)品一致性。

設(shè)計系統(tǒng)可以幫助產(chǎn)品和服務(wù)飛速發(fā)展,在全球范圍內(nèi)有廣泛的應(yīng)用。

本文將介紹設(shè)計系統(tǒng)及其優(yōu)勢,設(shè)計系統(tǒng)的組成部分和優(yōu)秀實踐案例,帶你全面了解設(shè)計系統(tǒng)相關(guān)理論和常用內(nèi)容,希望閱讀過后有助于展開對設(shè)計系統(tǒng)更深一步的學習。

B端設(shè)計系統(tǒng)怎么做? ---- 設(shè)計系統(tǒng)的介紹與構(gòu)成

二、什么是設(shè)計系統(tǒng)?

在1977年,Christopher Alexander在《A Pattern Language》中首次提出模式的概念,之后工程師Brad Forst提出了Atomic Design,分層建立設(shè)計系統(tǒng);Alla Kholmatova在《Design systems》中歸納、提出了完整的設(shè)計系統(tǒng)的概念。

B端設(shè)計系統(tǒng)怎么做? ---- 設(shè)計系統(tǒng)的介紹與構(gòu)成

設(shè)計系統(tǒng)的核心,是通過可重用的各種組件、規(guī)則、約束和原則幫助使用者建立規(guī)劃化的設(shè)計思維。通過標準規(guī)范使團隊合作更加緊密一致,鼓勵崗位之間的合作,提升合作的效率,減少錯誤的發(fā)生。

一個好的設(shè)計系統(tǒng)指南可以幫助設(shè)計人員和開發(fā)人員了解已有的設(shè)計工作箱,并指導他們?nèi)绾握_使用規(guī)則。

三、設(shè)計系統(tǒng)的有哪些優(yōu)勢?

近些年來,設(shè)計系統(tǒng)在互聯(lián)網(wǎng)公司中不斷被提及,促使著設(shè)計向規(guī)?;姆较蜻M行。公司為了提升用戶體驗,開始向設(shè)計中投入越來越多的資源,在這類公司中設(shè)計團隊常常有以下特征:

  1. 設(shè)計團隊有一定的重要程度
  2. 設(shè)計團隊服務(wù)公司大部分產(chǎn)品
  3. 設(shè)計團隊正在發(fā)展中

如果你的設(shè)計團隊符合以上的特征,那么你的團隊常常需要設(shè)計系統(tǒng)來提升設(shè)計的表達和工作效率。下面,讓我們來了解一下設(shè)計系統(tǒng)有何優(yōu)勢,讓眾多公司都進行了設(shè)計系統(tǒng)的開發(fā)。

1. 設(shè)計統(tǒng)一化

隨著公司和團隊的發(fā)展,設(shè)計團隊往往需要讓設(shè)計師專注合作某一業(yè)務(wù)或產(chǎn)品團隊。久而久之,設(shè)計師會專注于業(yè)務(wù)需求的探索,忽略了公司層面的設(shè)計一致性,這就會導致用戶在面對公司產(chǎn)品時一系列的體驗不一致。

每個設(shè)計師都使用著自己習慣的一套設(shè)計語言和組件,也會導致跨組合作的項目出現(xiàn)沖突,當矛盾出現(xiàn)時,聽你的還是聽我的,又會造成團隊內(nèi)合作的問題。

沒有共同的設(shè)計語言來約束設(shè)計,用戶體驗和團隊合作就會出現(xiàn)問題,工作流程也因為變得低效。

因此,要解決以上問題,就需要團隊通過系統(tǒng)化思維,從底層到表層達成一致,使用同一套已經(jīng)約定過的規(guī)則和工具庫,通過公認的最佳實踐來保證。

此外,需要說明的是,這套公認的規(guī)則并非一成不變,需要跟隨業(yè)務(wù)和產(chǎn)品的變化同步、及時更新,當然這一點也需要團隊內(nèi)成員達成共識。

B端設(shè)計系統(tǒng)怎么做? ---- 設(shè)計系統(tǒng)的介紹與構(gòu)成

使用組件能夠避免頁面元素的混亂

2. 管理設(shè)計體驗

隨著公司和團隊的快速增長,設(shè)計師在產(chǎn)品中積累的問題也會隨之增長,產(chǎn)生設(shè)計負債。

設(shè)計負債一方面包括一些歷史原因存在的不可復(fù)用的設(shè)計模式,另一方面也指因為一些短期壓力設(shè)計師考慮不周產(chǎn)生的不可復(fù)用的低效的設(shè)計模式。

設(shè)計負債導致用戶體驗不佳的同時,也會導致設(shè)計系統(tǒng)的維護負擔變得越來越重,公司新設(shè)計師因為不了解歷史情況需要不斷學習老舊的設(shè)計模式,從而不斷堆積負債,形成惡性循環(huán)。

通過設(shè)計系統(tǒng),設(shè)計系統(tǒng)就像汽車工業(yè)的標準化組件,可以讓團隊的設(shè)計和執(zhí)行過程更有秩序性和計劃性。

通過對設(shè)計系統(tǒng)的統(tǒng)一管理,減少負債產(chǎn)生的可能。同時通過設(shè)計系統(tǒng)的內(nèi)容也可以快速替換已經(jīng)存在的歷史負債,清掃遺留問題,幫助產(chǎn)品和代碼減少弊病,從另一方面有效促進產(chǎn)品迭代。

B端設(shè)計系統(tǒng)怎么做? ---- 設(shè)計系統(tǒng)的介紹與構(gòu)成

酷家樂商家后臺組件化前后對比

3. 提升設(shè)計效率

設(shè)計新人常常會沉浸在設(shè)計樣式的糾結(jié)中,而事實上,界面的設(shè)計表達并非saas類產(chǎn)品的關(guān)鍵。

通過設(shè)計系統(tǒng),可以為界面設(shè)計“減負”,讓界面設(shè)計更統(tǒng)一,也更容易理解,幫助專業(yè)設(shè)計師們更加專注于需求的挖掘與如何構(gòu)建更好的用戶體驗。

四、設(shè)計系統(tǒng)含有哪些內(nèi)容?

B端設(shè)計系統(tǒng)怎么做? ---- 設(shè)計系統(tǒng)的介紹與構(gòu)成

1. 公認的設(shè)計價值觀

在共有團隊需要的價值觀建立前,需要和團隊成員對齊共同的目標?;诠餐哪繕耍恢碌膬r值觀會指引所有人以同樣的尺度與方向做事,保證設(shè)計的結(jié)果不會相互違背,齊心協(xié)力完成工作。

2. 設(shè)計原則

設(shè)計原則是設(shè)計價值觀在設(shè)計實踐時的具體指南,通常是一些指引性的話語。設(shè)計原則是設(shè)計系統(tǒng)必不可少的一部分,因為它直接規(guī)定了設(shè)計時什么能做與什么不能做。

例如:ant design的“親密性”原則,就直接指導了界面設(shè)計中的間距關(guān)系,避免了多種文字間距在界面上出現(xiàn)。

3. 視覺語言

視覺語言需要依賴品牌,因此定義視覺語言時,應(yīng)該和品牌保持一致。基于品牌,設(shè)計語言包括:顏色、字體、空間、布局、投影、圖標、插畫、動效、文案規(guī)范等。

B端設(shè)計系統(tǒng)怎么做? ---- 設(shè)計系統(tǒng)的介紹與構(gòu)成

4. 組件和模式庫

組件和模式是設(shè)計系統(tǒng)最直觀、最實用的關(guān)鍵組成,設(shè)計價值觀、原則與視覺語言在組件中得以落地,通過組件和模式庫形成一致的產(chǎn)品體驗。

組件就像是積木,通過拼搭形成稍復(fù)雜的模式庫,而模式庫則是一組有邏輯的使用組件的方式。

B端設(shè)計系統(tǒng)怎么做? ---- 設(shè)計系統(tǒng)的介紹與構(gòu)成

5. 最佳實踐

設(shè)計系統(tǒng)需要向使用者提供在產(chǎn)品中已經(jīng)落地的實踐案例,通過最佳實踐案例將設(shè)計系統(tǒng)在團隊內(nèi)推廣。

五、設(shè)計系統(tǒng)的優(yōu)秀實踐

Google Material Design:完善、全面的設(shè)計系統(tǒng),覆蓋多端

B端設(shè)計系統(tǒng)怎么做? ---- 設(shè)計系統(tǒng)的介紹與構(gòu)成

螞蟻金服的Ant Design:國內(nèi)使用廣泛的設(shè)計系統(tǒng)

B端設(shè)計系統(tǒng)怎么做? ---- 設(shè)計系統(tǒng)的介紹與構(gòu)成

Shopify的Polaris:成熟的設(shè)計系統(tǒng),在全球范圍內(nèi)存在使用

B端設(shè)計系統(tǒng)怎么做? ---- 設(shè)計系統(tǒng)的介紹與構(gòu)成

六、總結(jié)

本文對于設(shè)計系統(tǒng)的定義、優(yōu)勢、內(nèi)容、案例進行了介紹,同時酷家樂自身也在逐步進行著設(shè)計系統(tǒng)的搭建。

需要強調(diào)的是,設(shè)計系統(tǒng)和產(chǎn)品一樣,也需要不斷的迭代和更新,需要設(shè)計師和工程師們動態(tài)同步,為用戶們提供好的體驗。

參考:

設(shè)計協(xié)同工作流:設(shè)計系統(tǒng):http://www.aharts.cn/pd/3436738.html

6個問題,深入探討設(shè)計系統(tǒng)是什么:http://www.aharts.cn/pd/3362977.html

設(shè)計系統(tǒng)是什么?https://zhuanlan.zhihu.com/p/63797765

關(guān)于設(shè)計系統(tǒng),所有你需要知道的全在這里:https://zhuanlan.zhihu.com/p/91019351

 

作者:啊咦;公眾號:酷家樂用戶體驗設(shè)計,歡迎關(guān)注,交流探討。

本文由 @酷家樂用戶體驗設(shè)計 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自 Unsplash,基于 CC0 協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!