目前設(shè)計(jì)行業(yè)中小到每個(gè)團(tuán)隊(duì)，大到每個(gè)公司都在致力于建設(shè)服務(wù)于自己的設(shè)計(jì)體系，毫無疑問在行業(yè)背景下，一套有效的設(shè)計(jì)體系能夠幫助團(tuán)隊(duì)或公司快速實(shí)現(xiàn)設(shè)計(jì)的產(chǎn)出。如今自己有幸參與到京東數(shù)坊項(xiàng)目中，開啟了京東數(shù)坊的一段設(shè)計(jì)體系構(gòu)建之旅，在這期間我們經(jīng)過規(guī)劃、建設(shè)、最終服務(wù)于實(shí)際項(xiàng)目中，雖然目前還不完善，但是也有階段性成果可以分享。
顯而易見這個(gè)是一套被充分驗(yàn)證過的，并且能行之有效的指導(dǎo)幫助我們在設(shè)計(jì)過程中，高效的產(chǎn)出并保持產(chǎn)出的一致性，也能讓我們團(tuán)隊(duì)協(xié)作之間更加高效，解放我們重復(fù)畫圖的工具人屬性。
以數(shù)坊為例，數(shù)坊是一個(gè) B 端營銷工具類產(chǎn)品，產(chǎn)品頁面組件復(fù)用率高，而且涉及多人協(xié)同設(shè)計(jì)，一個(gè)有效的系統(tǒng)體系能幫助我們工作更加的高效。我們設(shè)計(jì)體系的建設(shè)并不是從 0 開始的，我們前期有一些積累了，只是沒有完善的歸類到具體的體系中，這種現(xiàn)狀其實(shí)也是大部分設(shè)計(jì)團(tuán)隊(duì)最開始都存在的情況，我們?nèi)绾伟堰@些積累的資產(chǎn)和文檔歸類整理集合成為我們設(shè)計(jì)過程中的“工具包”，“工具包”中具體會集合成為哪一些資產(chǎn)與文檔。然后“工具包”能夠滿足日常需求迭代，能讓我們的精力更專注于去深掘用戶與業(yè)務(wù)，去探索更成熟的設(shè)計(jì)語言與產(chǎn)品發(fā)展創(chuàng)新方向。最后產(chǎn)品獲得用戶一致的好口碑，逐漸積累形成產(chǎn)品影響力，立足于行業(yè)一席之地。
- 利其器：建設(shè)設(shè)計(jì)基礎(chǔ)設(shè)施，完善健全我們手中的“工具包”
- 善其事：專注于去深掘用戶與業(yè)務(wù)，探索產(chǎn)品方向提升團(tuán)隊(duì)創(chuàng)新力
- 立于世：打磨產(chǎn)品體驗(yàn)，依靠用戶口碑形成影響力，立足于行業(yè)
我們計(jì)劃用 3 篇文章來分享以上 3 點(diǎn)。本篇為「高效設(shè)計(jì)體系搭建」系列文章的第一篇，主要分享一下如何去建設(shè)設(shè)計(jì)的基礎(chǔ)設(shè)施，我們在數(shù)坊項(xiàng)目中是怎么樣去一點(diǎn)一點(diǎn)打磨手中工具的過程。目前這套基礎(chǔ)體系也還在完善補(bǔ)充中，文章分享一點(diǎn)經(jīng)驗(yàn)，歡迎大家交流建議與補(bǔ)充。
通常我們擴(kuò)展認(rèn)知的方法是認(rèn)識它、模仿它，超越它。設(shè)計(jì)體系的基礎(chǔ)搭建目前有非常多的參考，這其中包括現(xiàn)成的網(wǎng)站與書籍，Web 端就有 Microsoft Fluent、Shopify 等等優(yōu)秀的設(shè)計(jì)體系庫，書籍《設(shè)計(jì)體系：數(shù)字產(chǎn)品設(shè)計(jì)的系統(tǒng)化方法》也講述了非常系統(tǒng)的方法。有了這些參考與方法，那咱們要做的就是結(jié)合產(chǎn)品自身的需求一步一步去實(shí)踐。
首先我們了解目前現(xiàn)狀，看看自己手里有什么，先把已有的資產(chǎn)完善。其次參考優(yōu)秀設(shè)計(jì)體系庫中包含什么，對自己做搭建補(bǔ)充。最后產(chǎn)品發(fā)展的未來，能儲備的去探索增加。
數(shù)坊整體設(shè)計(jì)體系目前依托于 sketch 搭建，整體思路也從 sketch 提供的變量庫、樣式庫、組件庫來進(jìn)行展開。
1. 色板的搭建：
雖然常用的主色與輔助色能覆蓋大部分產(chǎn)品的 UI 設(shè)計(jì)，但是隨著產(chǎn)品體量的增加，業(yè)務(wù)場景的多元，我們就需要構(gòu)建完整的色彩系統(tǒng)來支撐其發(fā)展。我們常用色板搭建的方法有手動疊加法、公式計(jì)算、工具生成等。
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)隊(duì)都在做組件化的，這種標(biāo)準(zhǔn)化的工作方式能更加高效的達(dá)成產(chǎn)品目標(biāo)，這其中就包括設(shè)計(jì)組件化與前端組件化，這里可以提供一個(gè)非常優(yōu)秀的 UI library 的參考 tetrisly，它包含 sketch 與 figma 的組件，系統(tǒng)學(xué)習(xí)可以參考一下它。
5. 產(chǎn)品全局規(guī)則：
前面提到的基礎(chǔ)樣式與組件其實(shí)都是全局規(guī)則的一部分，為什么需要再單獨(dú)補(bǔ)充呢？因?yàn)樵诖篌w量產(chǎn)品設(shè)計(jì)中，每個(gè)模塊都由不同的同學(xué)負(fù)責(zé)，這樣全局產(chǎn)品的把握就會降低，需要去補(bǔ)充全局規(guī)范說明去維持產(chǎn)品全局通用部分的一致性。
6. 品牌語言的探索：
探索部分通常都是為未來而儲備的，品牌語言是基于產(chǎn)品發(fā)展方向，品牌語言的持續(xù)探索是為產(chǎn)品宣傳增加產(chǎn)品影響力的手段之一，好的語言能夠?qū)?nèi)輻射產(chǎn)品內(nèi)部，對外輻射宣傳推廣。同樣也是下一階段產(chǎn)品改版升級的重要參考。
設(shè)計(jì)體系基礎(chǔ)部分是一個(gè)長期的過程，我們需要花時(shí)間去維護(hù)更新，使之越來越完善，越來越高效。但是它始終是我們維持作戰(zhàn)的工具，我們不能夠沉迷打磨工具而忘記了工具是用來干活的，當(dāng)然如果能做到極致，愿意做個(gè)匠人也未嘗不好，嘿嘿。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。