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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

03 組件庫 / Component Library

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

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

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

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

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

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

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

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

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

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

04 更快的原型 / Prototype Faster

05 提高可用性 / Improve Usability

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

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

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

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

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

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

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

04 更快的原型 / Prototype Faster

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

05 提高可用性 / Improve Usability

頁面樣式的不一致會影響產(chǎn)品的可用性和產(chǎn)生CSS和JavaScript上的沖突。CSS會因為大量的不一致樣式元素和交互增加，使頁面加載時間過長，導(dǎo)致帶來糟糕的用戶體驗。通過構(gòu)建整體的組件庫可以避免這些沖突，有效制作保質(zhì)保量且統(tǒng)一的頁面樣式。

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

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

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

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

05 提高可用性 / Improve Usability

頁面樣式的不一致會影響產(chǎn)品的可用性和產(chǎn)生CSS和JavaScript上的沖突。CSS會因為大量的不一致樣式元素和交互增加，使頁面加載時間過長，導(dǎo)致帶來糟糕的用戶體驗。通過構(gòu)建整體的組件庫可以避免這些沖突，有效制作保質(zhì)保量且統(tǒng)一的頁面樣式。

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

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

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

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

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

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

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

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

當(dāng)前名稱：擁有一套設(shè)計系統(tǒng)，讓企業(yè)走上數(shù)字化轉(zhuǎn)型的ETC
文章位置：http://m.rwnh.cn/news19/172919.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、網(wǎng)站改版、商城網(wǎng)站、定制網(wǎng)站、動態(tài)網(wǎng)站、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)