擁有一套設(shè)計(jì)系統(tǒng)，讓企業(yè)走上數(shù)字化轉(zhuǎn)型的ETC

2021-08-13

3358

設(shè)計(jì)系統(tǒng)，讓企業(yè)數(shù)字化轉(zhuǎn)型像玩經(jīng)營游戲一樣簡單。

在開發(fā)一套新產(chǎn)品的時(shí)候，你是不是也總會碰到這些？

設(shè)計(jì)師Amy：修圖5分鐘，找圖1小時(shí)。糟糕！我又改錯(cuò)文件了......

開發(fā)Prateek：整個(gè)團(tuán)隊(duì)并沒有人能聽懂我們在說啥......

產(chǎn)品經(jīng)理Daniel：不是在去和Amy溝通的路上，就是在準(zhǔn)備去和Jason溝通，天天擔(dān)心產(chǎn)品到底如何能準(zhǔn)時(shí)上線......

Amy、Prateek和Daniel所面臨的這些煩惱與難題，時(shí)常充斥在產(chǎn)品研發(fā)的各個(gè)環(huán)節(jié)。而隨著企業(yè)對數(shù)字化產(chǎn)品快速迭代的需求不斷上漲，企業(yè)開始擴(kuò)張內(nèi)部團(tuán)隊(duì)，優(yōu)化工具，導(dǎo)致這些問題不減反增，同時(shí)又隱形增加了不少設(shè)計(jì)債務(wù)或技術(shù)債務(wù)。

而Design System 的出現(xiàn)與應(yīng)用，則巧妙解決了上述問題，并為企業(yè)整體提質(zhì)、增效，保持并擴(kuò)大企業(yè)競爭力。

什么才是設(shè)計(jì)系統(tǒng)的真諦？

就像一千個(gè)人心中有一千個(gè)哈姆雷特，每個(gè)人對設(shè)計(jì)系統(tǒng)的理解看法不同，所以對設(shè)計(jì)系統(tǒng)的定義也都不盡相同。

「空集設(shè)計(jì)」認(rèn)為設(shè)計(jì)系統(tǒng)其實(shí)是在系統(tǒng)化思維指導(dǎo)下，利用可復(fù)用的組件、模式、規(guī)范去統(tǒng)一設(shè)計(jì)語言，并滿足數(shù)字化產(chǎn)品所需的大規(guī)模設(shè)計(jì)的一種解決工具，也是企業(yè)實(shí)現(xiàn)數(shù)字化轉(zhuǎn)型的必要手段。

我們從諸多給設(shè)計(jì)系統(tǒng)所下的定義與實(shí)際的例子當(dāng)中，發(fā)現(xiàn)定義中都不約而同的提到并囊括了像“規(guī)范、組件、模式”等關(guān)鍵詞匯。所以，我們可以從這幾個(gè)詞入手來更全面仔細(xì)的了解設(shè)計(jì)系統(tǒng)。

風(fēng)靡全球的設(shè)計(jì)系統(tǒng)究竟都包含什么？

根據(jù)對目前企業(yè)所推出的設(shè)計(jì)系統(tǒng)的觀察，我們發(fā)現(xiàn)雖然每個(gè)企業(yè)在對構(gòu)成部分的命名上加入了企業(yè)特性與創(chuàng)新，但是在內(nèi)容上實(shí)際上都包含了設(shè)計(jì)理念、設(shè)計(jì)規(guī)范、組件庫與設(shè)計(jì)方法論。

01 設(shè)計(jì)理念 / Design Principle

設(shè)計(jì)理念是整個(gè)設(shè)計(jì)的核心，是構(gòu)建視覺體系的理論基礎(chǔ)。對于產(chǎn)品發(fā)展與迭代來說，設(shè)計(jì)理念是視覺革新的旗幟與標(biāo)桿。

在上圖的例子中，Salesforce的設(shè)計(jì)系統(tǒng)遵循清晰 (Clarity)、效率（Efficiency）、連貫（Consistency）、美觀（Beauty）的設(shè)計(jì)理念去構(gòu)建其視覺設(shè)計(jì)。這些理念貫穿所有對外輸出的設(shè)計(jì)物料，保證視覺表達(dá)與品牌調(diào)性的一致性。

02 設(shè)計(jì)規(guī)范 / Style Guide

設(shè)計(jì)規(guī)范包含用于創(chuàng)建界面或其他設(shè)計(jì)交付物的特定實(shí)施指南、視覺參考和設(shè)計(jì)原則，是保持品牌形象穩(wěn)定輸出的重要支撐。設(shè)計(jì)規(guī)范包括但不限于：品牌標(biāo)識、色彩、字體、圖標(biāo)系統(tǒng)、插畫、網(wǎng)格系統(tǒng)、按鈕系統(tǒng)、圖片使用等。

設(shè)計(jì)規(guī)范對內(nèi)統(tǒng)一風(fēng)格、提高效率，而對外可以帶來一致的品牌個(gè)性和特征，加深用戶對品牌的認(rèn)知度。

03 組件庫 / Component Library

組件庫包含了已歸類的目錄和可重復(fù)使用在應(yīng)用程序的UI元素，在一定的設(shè)計(jì)工具支持下，可實(shí)現(xiàn)在更改時(shí)，自動跨設(shè)計(jì)文件同步，保持信息的實(shí)時(shí)性與品牌視覺體系活力，提高設(shè)計(jì)組件的使用效率。

“組件庫”和“模式庫”有時(shí)可能會作為同義詞在設(shè)計(jì)系統(tǒng)中進(jìn)行使用。而通常模式庫是用于包含供設(shè)計(jì)師使用的頁面內(nèi)容結(jié)構(gòu)、排版布局和模版等。

04 設(shè)計(jì)方法論 / Design Method

設(shè)計(jì)方法論是當(dāng)設(shè)計(jì)師在進(jìn)行設(shè)計(jì)時(shí)，從自身理論和方法上總結(jié)出的實(shí)質(zhì)性建議。當(dāng)遇到各種設(shè)計(jì)需求時(shí)，優(yōu)秀的設(shè)計(jì)方法論可為設(shè)計(jì)師提供明確的流程指導(dǎo)與設(shè)立清晰的項(xiàng)目里程碑。

通常，我們的設(shè)計(jì)方案需要做到條理清晰，邏輯嚴(yán)謹(jǐn)且具有說服力，所以設(shè)計(jì)方法論也是整個(gè)團(tuán)隊(duì)在打造產(chǎn)品時(shí)的指南針。

設(shè)計(jì)系統(tǒng)，一勞永逸？一勞永益！

在我們使用設(shè)計(jì)系統(tǒng)時(shí)，它不但能解決掉許多企業(yè)內(nèi)部棘手的問題，同時(shí)也能為企業(yè)獲得不小的價(jià)值，其中，最顯著的6大優(yōu)勢為：

01 擴(kuò)展式設(shè)計(jì) / Scale Design

02 管理設(shè)計(jì)債務(wù) / Manage Design Debt

03 一致的設(shè)計(jì) / Design Consistently

04 更快的原型 / Prototype Faster

05 提高可用性 / Improve Usability

06 易用性設(shè)計(jì) / Build In Accessibility

01 擴(kuò)展式設(shè)計(jì) / Scale Design

設(shè)計(jì)系統(tǒng)用統(tǒng)一、系統(tǒng)化的設(shè)計(jì)語言去設(shè)計(jì)產(chǎn)品，用戶體驗(yàn)的質(zhì)量得到提升。與設(shè)計(jì)系統(tǒng)同時(shí)建立的設(shè)計(jì)系統(tǒng)站點(diǎn)，保證了設(shè)計(jì)系統(tǒng)可以及時(shí)更新，并記錄設(shè)計(jì)系統(tǒng)的所有方面，包括組件、指南和交互的最佳使用場景等，使團(tuán)隊(duì)成員工作保持一致和同步。

02 管理設(shè)計(jì)債務(wù) / Manage Design Debt

設(shè)計(jì)債務(wù)是由大量不可復(fù)用和不一致的樣式和組件構(gòu)成的。設(shè)計(jì)系統(tǒng)可以使設(shè)計(jì)和代碼保持簡潔和可復(fù)用，并且持續(xù)升級和迭代。通過管理設(shè)計(jì)債務(wù)，可以減少一部分設(shè)計(jì)和代碼上的時(shí)間與金錢開銷，保持預(yù)算，使產(chǎn)品能夠有更多發(fā)展空間與維持更新迭代。

03 一致的設(shè)計(jì) / Design Consistently

設(shè)計(jì)系統(tǒng)內(nèi)一致且重復(fù)使用的標(biāo)準(zhǔn)化組件，提升了應(yīng)用程序的易用性。標(biāo)準(zhǔn)化的組件還能讓設(shè)計(jì)師花更少的時(shí)間關(guān)注樣式，將精力更專注于在提升用戶體驗(yàn)上。

04 更快的原型 / Prototype Faster

在設(shè)計(jì)系統(tǒng)下工作，就像玩樂高一樣，能夠快速拼湊流程和交互，同時(shí)構(gòu)建無數(shù)的原型和方案進(jìn)行快速驗(yàn)證，從而幫助團(tuán)隊(duì)快速獲得數(shù)據(jù)和結(jié)論。

05 提高可用性 / Improve Usability

頁面樣式的不一致會影響產(chǎn)品的可用性和產(chǎn)生CSS和JavaScript上的沖突。CSS會因?yàn)榇罅康牟灰恢聵邮皆睾徒换ピ黾樱鬼撁婕虞d時(shí)間過長，導(dǎo)致帶來糟糕的用戶體驗(yàn)。通過構(gòu)建整體的組件庫可以避免這些沖突，有效制作保質(zhì)保量且統(tǒng)一的頁面樣式。

06 易用性設(shè)計(jì) / Build In Accessibility

為實(shí)現(xiàn)程序或產(chǎn)品整體的易用性，在設(shè)計(jì)系統(tǒng)內(nèi)建立組件時(shí)就可以添加相關(guān)屬性并體現(xiàn)包容性設(shè)計(jì)。這使程序或產(chǎn)品在使用組件構(gòu)建時(shí)，可以始終保持易用性。并在程序和產(chǎn)品最終面向用戶時(shí)，保持良好的用戶體驗(yàn)。

設(shè)計(jì)系統(tǒng)，遠(yuǎn)遠(yuǎn)不止于此

目前國內(nèi)越來越多的企業(yè)開始把設(shè)計(jì)系統(tǒng)作為提升內(nèi)部效率的主要工具之一，比如螞蟻金服的ANT Design，餓了么的Element UI和小紅書的ReDS。而設(shè)計(jì)系統(tǒng)不僅僅是企業(yè)內(nèi)部增效的工具，其所具有的云端性、共享性、一致性、可控性也為企業(yè)數(shù)字化轉(zhuǎn)型做了充足的準(zhǔn)備和鋪墊。

05 提高可用性 / Improve Usability

頁面樣式的不一致會影響產(chǎn)品的可用性和產(chǎn)生CSS和JavaScript上的沖突。CSS會因?yàn)榇罅康牟灰恢聵邮皆睾徒换ピ黾?，使頁面加載時(shí)間過長，導(dǎo)致帶來糟糕的用戶體驗(yàn)。通過構(gòu)建整體的組件庫可以避免這些沖突，有效制作保質(zhì)保量且統(tǒng)一的頁面樣式。

06 易用性設(shè)計(jì) / Build In Accessibility

設(shè)計(jì)系統(tǒng)，遠(yuǎn)遠(yuǎn)不止于此

「空集設(shè)計(jì)」為企業(yè)客戶提供的數(shù)字化轉(zhuǎn)型服務(wù)將圍繞設(shè)計(jì)系統(tǒng)展開，其包含以下三個(gè)方面：

1. 塑造數(shù)字化產(chǎn)品：深耕體驗(yàn)，為企業(yè)打造具有競爭力的數(shù)字化產(chǎn)品；

2. 構(gòu)建資產(chǎn)庫：打造專屬設(shè)計(jì)資產(chǎn)庫，更新企業(yè)內(nèi)部數(shù)字化產(chǎn)品迭代的工作流程；

3. 定制創(chuàng)新體驗(yàn)：結(jié)合AR/VR等高新科技，為企業(yè)定制獨(dú)一無二的數(shù)字化體驗(yàn)。

上一篇：2021年15+種背景設(shè)計(jì)趨勢和風(fēng)格

下一篇：設(shè)計(jì)師如何洞察用戶需求？

相關(guān)文章