大廠案例 | 高效設(shè)計體系搭建之如何利其器
▲點擊"三分設(shè)"關(guān)注，回復(fù)"社群"加入我們
歡迎來到專業(yè)設(shè)計師學(xué)習(xí)交流社區(qū)
三分設(shè)｜連接知識，幫助全球 1 億設(shè)計師成長
作者：京東設(shè)計中心JDC
編輯：張夢如
共 2181 字 12 圖 預(yù)計閱讀 6 分鐘
1. 數(shù)坊設(shè)計體系
以數(shù)坊為例，數(shù)坊是一個 B 端營銷工具類產(chǎn)品，產(chǎn)品頁面組件復(fù)用率高，而且涉及多人協(xié)同設(shè)計，一個有效的系統(tǒng)體系能幫助我們工作更加的高效。我們設(shè)計體系的建設(shè)并不是從 0 開始的，我們前期有一些積累了，只是沒有完善的歸類到具體的體系中，這種現(xiàn)狀其實也是大部分設(shè)計團(tuán)隊最開始都存在的情況，我們?nèi)绾伟堰@些積累的資產(chǎn)和文檔如何歸類整理集合成為我們設(shè)計過程中的 “工具包”，“工具包” 中具體會集合成為哪一些資產(chǎn)與文檔。然后 “工具包” 能夠滿足日常需求迭代，能讓我們的精力更專注于去深掘用戶與業(yè)務(wù)，去探索更成熟的設(shè)計語言與產(chǎn)品發(fā)展創(chuàng)新方向。最后產(chǎn)品獲得用戶一致的好口碑，逐漸積累形成產(chǎn)品影響力，立足于行業(yè)一席之地。
利其器：建設(shè)設(shè)計基礎(chǔ)設(shè)施，完善健全我們手中的 “工具包”
善其事：專注于去深掘用戶與業(yè)務(wù)，探索產(chǎn)品方向提升團(tuán)隊創(chuàng)新力
立于世：打磨產(chǎn)品體驗，依靠用戶口碑形成影響力，立足于行業(yè)
我們計劃用 3 篇文章來分享以上 3 點。本篇為「高效設(shè)計體系搭建」系列文章的第一篇，主要分享一下如何去建設(shè)設(shè)計的基礎(chǔ)設(shè)施，我們在數(shù)坊項目中是怎么樣去一點一點打磨手中工具的過程。目前這個套基礎(chǔ)體系也還在完善補充中，文章止于分享一點經(jīng)驗，歡迎大家交流建議與補充。
2. 利其器：首先配齊工具
通常我們擴(kuò)展認(rèn)知的方法是認(rèn)識它、模仿它，超越它。設(shè)計體系的基礎(chǔ)搭建目前有非常多的參考，這其中包括現(xiàn)成的網(wǎng)站與書籍， Web 端就有 Microsoft Fluent 、 Shopify 等等優(yōu)秀的設(shè)計體系庫，書籍 《設(shè)計體系：數(shù)字產(chǎn)品設(shè)計的系統(tǒng)化方法》 也講述了非常系統(tǒng)的方法。有了這些參考與方法，那咱們要做的就是結(jié)合產(chǎn)品自身的需求一步一步去實踐。
首先我們了解目前現(xiàn)狀，看看自己手里有什么，先把已有的資產(chǎn)完善。其次參考優(yōu)秀設(shè)計體系庫中包含什么，對自己做搭建補充。最后產(chǎn)品發(fā)展的未來，能儲備的去探索增加。
3. 利其器：打磨工具
數(shù)坊整體設(shè)計體系目前依托于 sketch 搭建，整體思路也從 sketch 提供的變量庫、樣式庫、組件庫來進(jìn)行展開。
1. 色板的搭建
雖然常用的主色與輔助色能覆蓋大部分產(chǎn)品的 UI 設(shè)計，但是隨著產(chǎn)品體量的增加，業(yè)務(wù)場景的多元，我們就需要構(gòu)建完整的色彩系統(tǒng)來支撐其發(fā)展。我們常用色板搭建的方法有 手動疊加法、公式計算、工具生成 等。
2. 基礎(chǔ)樣式的完善
基礎(chǔ)樣式也叫感知模式，是一種主觀感受， UI 中每一條線的粗細(xì)、顏色、長短都影響到界面的整體調(diào)性，保持基礎(chǔ)樣式的統(tǒng)一是提升 UI 一致性非常有效的手段。
3. 圖標(biāo)庫的搭建
圖標(biāo)庫我們常以圖標(biāo)文檔的形式存在，用則打開文件取之，我們進(jìn)一步對圖標(biāo)字體化與 Symbols 化，常用圖標(biāo)嵌入 Symbols 。當(dāng)然可以做的更深，例如 iconpark 的可配置化。
4. 組件化
大部分團(tuán)隊都在做組件化的，這種標(biāo)準(zhǔn)化的工作方式能更加高效的達(dá)成產(chǎn)品目標(biāo)，這其中就包括設(shè)計組件化與前端組件化，這里可以提供一個非常優(yōu)秀的 UI library 的參考 tetrisly ，它包含 sketch 與 figma 的組件，系統(tǒng)學(xué)習(xí)可以參考一下它。
5. 產(chǎn)品全局規(guī)則
前面提到的基礎(chǔ)樣式與組件其實都是全局規(guī)則的一部分，為什么需要在單獨補充呢？因為在大體量產(chǎn)品設(shè)計中，每個模塊都由不同的同學(xué)負(fù)責(zé)，這樣全局產(chǎn)品的把握就會降低，需要去補充全局規(guī)范說明去維持產(chǎn)品全局通用部分的一致性。、
6. 品牌語言的探索
探索部分通常都是為未來而儲備的，品牌語言是基于產(chǎn)品發(fā)展方向，品牌語言的持續(xù)探索是為產(chǎn)品宣傳增加產(chǎn)品影響力的手段之一，好的語言能夠?qū)?nèi)輻射產(chǎn)品內(nèi)部，對外輻射宣傳推廣。同樣也是下一階段產(chǎn)品改版升級的重要參考。
總結(jié)
設(shè)計體系基礎(chǔ)部分是一個長期的過程，我們需要花時間去維護(hù)更新，使之越來越完善，越來越高效。但是它始終是我們維持作戰(zhàn)的工具，我們不能夠沉迷打磨工具而忘記了工具是用來干活的，當(dāng)然如果能做到極致愿意做個匠人也未嘗不好，嘿嘿。
好了，以上就是我們的一點點經(jīng)驗積累，希望可以幫助到大家，大家有什么建議或糾正歡迎評論交流。下一篇我們將帶來「高效設(shè)計體系搭建之如何善其事」我們有了高效的工具，那么我們就能集中精力去尋找機會點，去解決那些用戶痛點中的頑疾。
?? 我們一起聊設(shè)計 ???♂?
高質(zhì)量，學(xué)設(shè)計行交流微信群
期待與更多優(yōu)秀用戶體驗設(shè)計師一起成長
PS：歡迎大家關(guān)注三分設(shè)，每天早上9點，準(zhǔn)時充電。分享優(yōu)質(zhì)設(shè)計、創(chuàng)意靈感、新知新識，定期大咖老師直播分享，零距離連麥，答疑解惑。 添加小小蟲微信號【 Lil_Bug 】，備注【 三分設(shè) 】加入！（只面向星標(biāo)了公眾號三分設(shè)的粉絲）