2022-2-27 鶴鶴
什么是設(shè)計系統(tǒng)？
設(shè)計系統(tǒng) = 設(shè)計價值觀和原則+設(shè)計規(guī)范+場景定義+工具包
為什么要構(gòu)建設(shè)計系統(tǒng)？
問題1:
隨著業(yè)務的拓展，產(chǎn)品和項目數(shù)量不斷增加，發(fā)展中期設(shè)計和交互上不一致性的問題浮出水面，需要采取措施確保產(chǎn)品或產(chǎn)品線之間保持統(tǒng)一的品牌傳達、外觀和體驗，以滿足用戶預期并向其傳達統(tǒng)一的品牌認知。
問題2:
無統(tǒng)一的設(shè)計規(guī)范和交互原則，沒有統(tǒng)一的UI組件庫和代碼庫，各團隊設(shè)計和前端需花費大量資源陷于低質(zhì)量溝通協(xié)作和重復造輪子，拖慢產(chǎn)品和項目設(shè)計和開發(fā)節(jié)奏。
問題3：
產(chǎn)品項目數(shù)量 vs 產(chǎn)品設(shè)計師，人員配比嚴重不足的情況下，團隊的設(shè)計師們無法從雜/亂/急的日常需求中剝離出來，影響構(gòu)建產(chǎn)品壁壘的質(zhì)量和速度。
設(shè)計系統(tǒng)的價值
產(chǎn)品側(cè)：
設(shè)計側(cè)：
開發(fā)側(cè)：
測試側(cè)：
主流設(shè)計系統(tǒng)-他山之石可以攻玉！
無需猶豫，直接基于現(xiàn)有的優(yōu)秀的開源設(shè)計系統(tǒng)，
設(shè)計系統(tǒng)的打造不必從0-1構(gòu)建， 例如：Ant Design業(yè)界優(yōu)秀的開源設(shè)計系統(tǒng)，我們完全可以站在前人的肩膀，最終生產(chǎn)出符合達觀品牌、業(yè)務特性的設(shè)計系統(tǒng)。
字節(jié)跳動 Semi Design：https://semi.design/zh-CN/
字節(jié)跳動 Arco Design ：https://arco.design/
以原子理論構(gòu)建設(shè)計系統(tǒng)
原子理論設(shè)計介紹
首先原子設(shè)計理論并不是什么高大上的規(guī)則。最早是由國外前端開發(fā)工程師 Brad Frost提出的，他從化學元素周期表中得到啟發(fā)，發(fā)現(xiàn)在化學世界中，所有的物體都是由原子構(gòu)成，原子組合構(gòu)成分子，分子組合構(gòu)成有機物，最終形成了宇宙萬物。根據(jù)他的理論，設(shè)計體系主要包含 5 個層面：原子、分子、組織、模板、頁面。
原子理論設(shè)計不是一個線性的過程， 它更像是一個心理模型，來幫助我們把用戶界面看作是一個連貫的整體，同時也是一些元素的集合。這五個階段的每一個階段都會在我們的界面設(shè)計系統(tǒng)層級中扮演重要角色。下面，讓我們更深入的了解每一個概念哦～
原子是物質(zhì)的基礎(chǔ)組成部分，是構(gòu)成設(shè)計系統(tǒng)的最基礎(chǔ)元素。
在界面中以「元素」的形式存在，例如：顏色、文字、圖標、分割線、間距、圓角、間距、陰影等。
簡單概述下來就五個字：色、形、質(zhì)、構(gòu)、質(zhì)；
在界面中，分子就像是一個由UI元素組成的相對簡單的組織。如：按鈕、彈窗、搜索框等。
以按鈕為例，它的組成元素包含了文字、色塊、圖標和間距。這些抽象的原子從毫無關(guān)聯(lián)原則組合成一個分子，圖標和文字互相配合傳達意義，顏色定義了按鈕的特性，間距為按鈕定義了一個尺寸和規(guī)范。
組織(Organisms)層
分子+原子組合成更復雜和可擴展性的模塊，這個稱之為組織（區(qū)塊組件），如：列表操作區(qū)塊、列表展示區(qū)塊、表單區(qū)塊、數(shù)據(jù)統(tǒng)計卡片區(qū)塊。
以表單為例，一個表單我們可以通過數(shù)量的組合，以及間距的調(diào)整，元素的增減，在界面中表達不同的場景和含義。
模板(Templates)層
由原子+分子+組織構(gòu)成的更復雜更具拓展性的模塊，如：分組表單頁、頁面級表單、詳情頁、列表頁、異常頁、dashborad。本質(zhì)就是線框圖，模版在設(shè)計系統(tǒng)承載的作用就是保證設(shè)計方案在原型階段的多樣性。專注于頁面的底層的內(nèi)容結(jié)構(gòu)，頁面中的信息是占位作用，而不是頁面的最終內(nèi)容。
頁面(Pages)層
帶業(yè)務邏輯的場景案例如：標注詳情場景、抽取詳情場景、權(quán)限管理場景。頁面將真實內(nèi)容應用于模板；
頁面是模板的具體實例，填充了真實的內(nèi)容（圖片、文字等）后形成頁面，也就是常說的帶交互邏輯的「視覺稿」即為高保真原型圖，將占位符替換為有代表性的真實內(nèi)容，使設(shè)計系統(tǒng)有了生命。在模版的基礎(chǔ)上進行優(yōu)化和完善就形成了頁面最終的設(shè)計方案。
關(guān)于設(shè)計系統(tǒng)的常見認知誤區(qū)
誤區(qū)1：設(shè)計體系就是設(shè)計規(guī)范或者組件庫嗎？
許多人認為設(shè)計系統(tǒng)就是單個代碼庫、組件庫、設(shè)計規(guī)范，但實際上他們不是一個層次的東西，準確度的來說設(shè)計體系包含設(shè)計規(guī)范，組件庫也是建立在設(shè)計體系內(nèi)的，組件庫是記錄和共享設(shè)計模式的工具，就是設(shè)計體系工具化和表現(xiàn)層的部分；
誤區(qū)2：設(shè)計體系的存在扼制了組織內(nèi)創(chuàng)造力，會替代掉設(shè)計師？
拋出這個問題，是因為經(jīng)常在不同的場合聽到“設(shè)計系統(tǒng)是扼殺設(shè)計師的創(chuàng)造力”之類的觀點，我個人是很難以認同這個的，對design system的最大誤解就是限制設(shè)計師的想象力。首先設(shè)計系統(tǒng)本身就是一個龐大且復雜的設(shè)計觀集合，需要調(diào)動整個團隊的想象力和創(chuàng)造力，最終達到一個統(tǒng)一共識才有可能被實施和執(zhí)行；
好的設(shè)計系統(tǒng)可以通過流程和機制促進創(chuàng)造力的，而且好的設(shè)計資產(chǎn)可以幫助大家從不必要的、重復的勞動時間內(nèi)節(jié)省出來，當然也不能過度依賴過往的沉淀資產(chǎn)，把自己定位為設(shè)計系統(tǒng)的創(chuàng)造者，而不是使用的工具人，不斷的創(chuàng)造和貢獻好的解決方案被整個組織采用，就不必再擔心那些即將淪為沉沒成本的過往設(shè)計與技術(shù)資產(chǎn)的限制。不會替代掉設(shè)計師，反而是一個企業(yè)內(nèi)部尊重設(shè)計師價值的開始！是企業(yè)對設(shè)計文化的認可！
設(shè)計體系是動態(tài)的，永遠是隨著組織需求和用戶需求而變化的，一切說自己已經(jīng)完成了設(shè)計體系的建設(shè)的人都是錯誤的，都是將將靜態(tài)的設(shè)計規(guī)范曲解成了設(shè)計體系。
正確管理機制：少數(shù)人負責管理，多數(shù)人參與貢獻；避免你做、我用模式，這種生產(chǎn)消費模式非常內(nèi)卷；避免如：我一個設(shè)計師為啥要用你的規(guī)范；這規(guī)范做的太垃圾用處不大，我才不用，用你做的規(guī)范；我苦逼做業(yè)務，你晉升拿結(jié)果的負面心態(tài)；
然設(shè)計系統(tǒng)也不是簡單的靠少數(shù)的人1-2個月用愛發(fā)電就能完成的，設(shè)計系統(tǒng)是一群人，對一種做設(shè)計文化的認可，每個與之相關(guān)的人都應該是設(shè)計體系的貢獻者與布道者！
需要克服的潛在難題
產(chǎn)品業(yè)務復雜性提升，提升建設(shè)難度
難以控制創(chuàng)造與控制間的平衡；
復用與定制間的平衡，刻意追求復用率而容易丟失整體觀，為特定業(yè)務目標服務時不如靈活集中化式方法等
資源問題，容易被當成是輔助項目而缺乏預算等資源….
缺乏良性有效的組件庫更新迭代機制，虎頭蛇尾….
收益短期不明顯，搭建體系的長期收益難以被組織短期內(nèi)察覺；
盡管有一系列潛在的問題，但總的來說設(shè)計體系的帶來的收益是大于這些投入的，總的來說方向是沒錯的，下一個關(guān)鍵問題是：我們?nèi)绾稳ソ⒁粋€更優(yōu)秀的設(shè)計體系。
文章來源：站酷 作者：從你的世界經(jīng)過
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( m.sdgs6788.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務
藍藍設(shè)計的小編 http://m.sdgs6788.com