站在巨人的肩膀上攀登、我們能爬的更高、更遠(yuǎn)。也能讓我們更快速的變強(qiáng)。我在想我應(yīng)該怎么告訴初級(jí)B端設(shè)計(jì)師規(guī)范的重要性呢！

讓你上來(lái)就建一座摩天大廈、那顯然是不現(xiàn)實(shí)?，F(xiàn)實(shí)的是你待先知道什么是摩天大廈吧、然后在看看其他的摩天大廈吧。

1、你先了解一下大廠規(guī)范

在互聯(lián)網(wǎng)大廠中、因?yàn)樗麄兯婕暗臉I(yè)務(wù)很多。為了提升設(shè)計(jì)效率、開(kāi)發(fā)效率。所以基本上都會(huì)有一套自己的設(shè)計(jì)規(guī)范。當(dāng)然他們是各有各的特點(diǎn)。下面我們就介紹幾個(gè)我用的比較多的設(shè)計(jì)規(guī)范吧。

1.1、ant design

Ant Design是一套企業(yè)級(jí)UI設(shè)計(jì)語(yǔ)言和React組件庫(kù)。是螞蟻集團(tuán)體驗(yàn)技術(shù)部交過(guò)大量項(xiàng)目實(shí)踐和總結(jié)，逐步打磨出一個(gè)服務(wù)于企業(yè)級(jí)產(chǎn)品的設(shè)計(jì)體系。

設(shè)計(jì)價(jià)值觀是、自然、確定性、意義感、生長(zhǎng)性。通過(guò)模塊化解決方案，降低沉余的生產(chǎn)成本，讓設(shè)計(jì)者專注于更好的用戶體驗(yàn)。

我們公司就是基于ant design的設(shè)計(jì)規(guī)范創(chuàng)建的符合我們自己業(yè)務(wù)需求和平臺(tái)的設(shè)計(jì)風(fēng)格后臺(tái)系統(tǒng)設(shè)計(jì)規(guī)范。

1.2、arco design

ArcoDesign是基于 Byte Design 升級(jí)而來(lái)，能力全面的企業(yè)級(jí)產(chǎn)品設(shè)計(jì)系統(tǒng)。目標(biāo), 即通過(guò)通用的設(shè)計(jì)系統(tǒng)去解決產(chǎn)品中的體驗(yàn)問(wèn)題, 并為產(chǎn)品設(shè)計(jì)提供指導(dǎo)原則解決業(yè)務(wù)問(wèn)題，同時(shí)它能夠促進(jìn)設(shè)計(jì)部門(mén)和研發(fā)部門(mén)之間協(xié)作, 成為開(kāi)發(fā)者之間溝通的語(yǔ)言。

ArcoDesign 主要服務(wù)于字節(jié)跳動(dòng)旗下中后臺(tái)產(chǎn)品的體驗(yàn)設(shè)計(jì)和技術(shù)實(shí)現(xiàn)，主要由UED設(shè)計(jì)和開(kāi)發(fā)同學(xué)共同構(gòu)建及維護(hù)

他的設(shè)計(jì)價(jià)值觀是、清晰、一致、韻律、開(kāi)放。希望能夠建立務(wù)實(shí)而浪漫的工作方式。

在做我們平臺(tái)的設(shè)計(jì)時(shí)也參考了不少arcodesign規(guī)范和組件、根據(jù)其規(guī)范中的設(shè)計(jì)原則。也對(duì)我們的平臺(tái)做了不少的優(yōu)化。

1.3、Tdesign

TDesign 是騰訊各業(yè)務(wù)團(tuán)隊(duì)在服務(wù)業(yè)務(wù)過(guò)程中沉淀的一套企業(yè)級(jí)設(shè)計(jì)體系。TDesign 具有統(tǒng)一的 價(jià)值觀，一致的設(shè)計(jì)語(yǔ)言和視覺(jué)風(fēng)格，幫助用戶形成連續(xù)、統(tǒng)一的體驗(yàn)認(rèn)知。在此基礎(chǔ)上，TDesign 提供了開(kāi)箱即用的 UI 組件庫(kù)、設(shè)計(jì)指南 和相關(guān) 設(shè)計(jì)資產(chǎn)，以優(yōu)雅高效的方式將設(shè)計(jì)和研發(fā)從重復(fù)勞動(dòng)中解放出來(lái)，同時(shí)方便大家在 TDesign 的基礎(chǔ)上擴(kuò)展，更好的的貼近業(yè)務(wù)需求。

TDesign 為了在開(kāi)源體系的基礎(chǔ)上打造具有自身品牌特色且好?的產(chǎn)品，秉承包容、多元、進(jìn)化、連接的價(jià)值觀。

在Tdesign中也有很多我們可以借鑒的地方、我們?cè)诮⒆约浩脚_(tái)規(guī)范時(shí)也進(jìn)行了少量的參考。

1.4、Element

Element UI 設(shè)計(jì)規(guī)范是一套為開(kāi)發(fā)者、UI/UX設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的采用Vue 3.0作為基礎(chǔ)框架實(shí)現(xiàn)的組件庫(kù)，由餓了么前端團(tuán)隊(duì)開(kāi)發(fā)和維護(hù)。UI設(shè)計(jì)組件庫(kù)Element遵循一致性、反饋、效率、可控的設(shè)計(jì)原則，提供了配套設(shè)計(jì)資源，分為顏色、漸變、字體、按鈕、輸入框、進(jìn)度條等11類，共六十多個(gè)基礎(chǔ)組件，能夠很好地滿足大部分設(shè)計(jì)和開(kāi)發(fā)需求，幫助設(shè)計(jì)快速成型。

我們平臺(tái)上一個(gè)版本是基于這個(gè)框架規(guī)范來(lái)做的。不過(guò)當(dāng)時(shí)還不是Vue 3.0而是2.0在我們平臺(tái)的最新優(yōu)化設(shè)計(jì)版本轉(zhuǎn)用了ant design的框架。

2、使用設(shè)計(jì)規(guī)范

我們先說(shuō)一下大家都好像知道。但又不一定能夠很有邏輯的說(shuō)出來(lái)的。我們?cè)陧?xiàng)目設(shè)計(jì)中為什么要使用設(shè)計(jì)規(guī)范。沒(méi)有設(shè)計(jì)規(guī)范不也能夠做設(shè)計(jì)嗎。是的至少在我剛?cè)胄械牡谝荒昴怯眠^(guò)規(guī)范不照樣混工資嗎。我想現(xiàn)在也有很多設(shè)計(jì)師在做設(shè)計(jì)的時(shí)候就沒(méi)有設(shè)計(jì)規(guī)范。

2.1、B端設(shè)計(jì)規(guī)范的意義

B端設(shè)計(jì)規(guī)范對(duì)于我們?cè)陧?xiàng)目里有這重要的意義、提高設(shè)計(jì)質(zhì)量、提升工作效率、更方便后期維護(hù)、更好的用戶體驗(yàn)都諸多好處。

2.1.1、一致性

設(shè)計(jì)規(guī)范確保了跨多頁(yè)面、多模塊甚至多產(chǎn)品之間的設(shè)計(jì)風(fēng)格、界面元素、交互行為、色彩搭配、字體大小等視覺(jué)表達(dá)的高度一致，有助于塑造清晰、連貫的品牌形象和產(chǎn)品氣質(zhì)。

對(duì)于多設(shè)計(jì)師協(xié)作的大型項(xiàng)目，設(shè)計(jì)規(guī)范能夠避免因個(gè)人風(fēng)格差異帶來(lái)的不一致性，從而提供給用戶更加專業(yè)、可靠的產(chǎn)品體驗(yàn)。

2.1.2、提升工作效率

設(shè)計(jì)師遵循規(guī)范工作可以快速產(chǎn)出設(shè)計(jì)方案、不用做大量的重復(fù)工作。而且也節(jié)省了大量的決策成本。對(duì)于前端開(kāi)發(fā)可以根據(jù)設(shè)計(jì)規(guī)范預(yù)先構(gòu)建和維護(hù)UI組件庫(kù)，通過(guò)復(fù)用標(biāo)準(zhǔn)化的組件加快開(kāi)發(fā)速度，減少代碼冗余，提高開(kāi)發(fā)效率和產(chǎn)品質(zhì)量。

規(guī)范化的實(shí)施也有助于減少設(shè)計(jì)稿到開(kāi)發(fā)實(shí)現(xiàn)階段的反復(fù)溝通和修改，降低了設(shè)計(jì)還原的成本。

2.1.3、提升用戶體驗(yàn)

統(tǒng)一的設(shè)計(jì)語(yǔ)言使得用戶在不同功能區(qū)和業(yè)務(wù)流程中可以輕松理解和熟悉操作方式，減少認(rèn)知負(fù)擔(dān)，提高操作效率。

設(shè)計(jì)規(guī)范通?；谟脩粞芯亢妥罴褜?shí)踐，確保了核心功能的可用性和易用性，即使在復(fù)雜的企業(yè)級(jí)應(yīng)用場(chǎng)景中也能提供良好的用戶體驗(yàn)。

2.1.4、維護(hù)和擴(kuò)展

隨著產(chǎn)品的持續(xù)迭代和發(fā)展，設(shè)計(jì)規(guī)范可以保障新功能的無(wú)縫接入和原有功能的穩(wěn)定更新，保持整體設(shè)計(jì)系統(tǒng)的穩(wěn)健性。

通過(guò)設(shè)計(jì)規(guī)范，企業(yè)可以更好地管理自己的設(shè)計(jì)資產(chǎn)，便于后續(xù)版本的升級(jí)和品牌視覺(jué)的調(diào)整。

2.1.5、團(tuán)隊(duì)協(xié)作和管理

設(shè)計(jì)規(guī)范不僅是一個(gè)技術(shù)文檔，更是設(shè)計(jì)團(tuán)隊(duì)與開(kāi)發(fā)團(tuán)隊(duì)之間、以及與其他職能團(tuán)隊(duì)（如產(chǎn)品經(jīng)理、項(xiàng)目經(jīng)理）有效溝通的橋梁，促進(jìn)多方共識(shí)，形成協(xié)同工作的基礎(chǔ)。

2.2、為什么要使用大廠的設(shè)計(jì)規(guī)范

使用大廠的設(shè)計(jì)規(guī)范有多方面的優(yōu)勢(shì)和原因，這些規(guī)范經(jīng)過(guò)長(zhǎng)時(shí)間的實(shí)踐、迭代和優(yōu)化，為開(kāi)發(fā)者和設(shè)計(jì)師提供了可靠、高效的設(shè)計(jì)解決方案。

2.2.1、用戶習(xí)慣和認(rèn)知一致性

大廠的設(shè)計(jì)規(guī)范通常經(jīng)過(guò)大量的用戶研究和實(shí)踐驗(yàn)證，符合大多數(shù)用戶的使用習(xí)慣，遵循這樣的規(guī)范可以使產(chǎn)品設(shè)計(jì)更加貼近用戶心理模型，降低用戶的學(xué)習(xí)成本和操作難度，提升產(chǎn)品的易用性。

2.2.2、高效協(xié)作提升效率

在團(tuán)隊(duì)協(xié)作中，設(shè)計(jì)規(guī)范可以確保設(shè)計(jì)師和開(kāi)發(fā)者遵循同一套標(biāo)準(zhǔn)，減少設(shè)計(jì)和開(kāi)發(fā)過(guò)程中的溝通成本，提高工作效率。

2.2.3、用戶體驗(yàn)

大廠設(shè)計(jì)規(guī)范往往注重用戶體驗(yàn)，追求簡(jiǎn)潔、直觀和易用。使用這些規(guī)范能夠確保產(chǎn)品界面符合用戶習(xí)慣，降低用戶的學(xué)習(xí)成本，提高用戶滿意度。

2.2.4、社區(qū)支持資源豐富

大廠設(shè)計(jì)規(guī)范通常擁有龐大的用戶群體和活躍的社區(qū)支持，這意味著在使用過(guò)程中遇到問(wèn)題或需要尋求幫助時(shí)，能夠更容易地找到解決方案或獲得支持。

3、建立自己的設(shè)計(jì)規(guī)范

為什么要建立自己的規(guī)范呢。嗯，這好像是一句廢話呀。因?yàn)榍拔囊呀?jīng)說(shuō)了規(guī)范的使用對(duì)我們工作的重要性了。所以作為一個(gè)高質(zhì)量的產(chǎn)品、設(shè)計(jì)規(guī)范是基礎(chǔ)、也是有效提升工作效率和用戶體驗(yàn)的有力手段。畢竟做為設(shè)計(jì)師的你不想每天重復(fù)沒(méi)有意義的工作。用戶也更愿意使用持續(xù)統(tǒng)一的高質(zhì)量產(chǎn)品。

3.1、如何建立設(shè)計(jì)規(guī)范

我在工作中是這樣去做的。在B端設(shè)計(jì)規(guī)范中主要包括三部分、布局、樣式、組件所以我們根據(jù)自己做的業(yè)務(wù)性質(zhì)去一點(diǎn)一點(diǎn)完善就行。當(dāng)然你要知道設(shè)計(jì)規(guī)范不是一下子就建成的。

還有什么時(shí)候適合開(kāi)始建立設(shè)計(jì)規(guī)范呢。這是一個(gè)好問(wèn)題、我以往的經(jīng)驗(yàn)是。在完成項(xiàng)目幾個(gè)核心頁(yè)面的demo過(guò)了審核后（為什么要審核、因?yàn)樵趦?yōu)秀的設(shè)計(jì)如果你的大佬覺(jué)得屎。那么你覺(jué)得設(shè)計(jì)能通過(guò)嗎。用戶的需求是一部分、大佬的需求也相當(dāng)重要雖然你才是專業(yè)的。有的時(shí)候我們還有一部分工作就是把大佬不合理的要求用我們的專業(yè)性把他合理化這個(gè)也很重要）。這樣基礎(chǔ)的規(guī)范和設(shè)計(jì)風(fēng)格就出來(lái)了。后期在根據(jù)業(yè)務(wù)去不斷調(diào)整就可以了。我個(gè)人感覺(jué)這樣是相對(duì)高效的一種方式。

3.1.1、制作demo

在這個(gè)階段，你首先要搞定的是不羈、一個(gè)好的布局頁(yè)面決定了你界面的設(shè)計(jì)風(fēng)格。你可能在想數(shù)據(jù)頁(yè)面可是我想告訴你的是表格頁(yè)面才是你的重點(diǎn)。因?yàn)榇蟛糠值暮笈_(tái)頁(yè)面、表格頁(yè)面要占到80%以上。

我們前面的文章說(shuō)過(guò)柵格化和功能區(qū)的劃分、這里千萬(wàn)不要之間按著大廠的規(guī)范去整。要按著你們的業(yè)務(wù)和大佬的建議去整。比如我們平臺(tái)因我我們大佬對(duì)屏效的執(zhí)著所以雖然我們用的是antdesign的框架，但是頁(yè)面的柵格就不是內(nèi)容區(qū)邊的尺寸就不是24這個(gè)是8的倍數(shù)。我們用的是20px.所以很多東西你是需要站在巨人的肩頭有所修改的。

我的方法是結(jié)合大廠的設(shè)計(jì)規(guī)范的經(jīng)驗(yàn)來(lái)制作自己的初級(jí)設(shè)計(jì)規(guī)范和DEMO經(jīng)驗(yàn)。這樣既有一定的設(shè)計(jì)規(guī)則（也就是我們后期部分的規(guī)范）也可以更統(tǒng)一化規(guī)范化的制作DEMO的設(shè)計(jì)。（更好過(guò)審，過(guò)審的過(guò)場(chǎng)中剛好的反駁那些有，無(wú)聊建議的產(chǎn)品經(jīng)理和技術(shù)大牛）

3.1.2、總結(jié)樣式

樣式通常指界面最基礎(chǔ)的視覺(jué)細(xì)節(jié)，UI 中最基礎(chǔ)的樣式內(nèi)容就包含色彩、字體、圖標(biāo)這三個(gè)大類。如果項(xiàng)目風(fēng)格化強(qiáng)一點(diǎn)，那就還可以整理一些額外的內(nèi)容，如投影、透明度、漸變、毛玻璃效果的具體參數(shù)和使用細(xì)節(jié)等。

樣式是規(guī)范整理中最簡(jiǎn)單的部分，只有在字體整理上存在一定的認(rèn)知歧義，需要設(shè)計(jì)師花比較多的時(shí)間去理清楚具體的參數(shù)和規(guī)則。只要樣式規(guī)范能整理并設(shè)置好，那么就可以快速應(yīng)用到后續(xù)的項(xiàng)目設(shè)計(jì)中去。

3.2、使用和不斷完善

設(shè)計(jì)規(guī)范不是一個(gè)死的規(guī)定、他是一個(gè)不斷地更新的一個(gè)過(guò)程。而不是做個(gè)規(guī)范放 哪里就一成不變了。你要明白。規(guī)范是為我們服務(wù)的而不是框死我們?cè)O(shè)計(jì)創(chuàng)作里條條框框。

3.2.1、設(shè)計(jì)規(guī)范的使用

用相對(duì)就比較簡(jiǎn)單了。把我們之前總結(jié)的樣式和組件整理一下行程我們的設(shè)計(jì)系統(tǒng)規(guī)范（如sketch模板、figma庫(kù)等）直接調(diào)用預(yù)設(shè)的組件、模板和樣式進(jìn)行設(shè)計(jì)，確保每個(gè)元素的尺寸、顏色、間距等都符合規(guī)范。

在設(shè)計(jì)具體界面或元素時(shí)，始終遵循規(guī)范中關(guān)于布局、信息層級(jí)、操作反饋等交互原則，確保用戶體驗(yàn)的一致性。

3.2.2、不斷完善規(guī)范

不斷完善設(shè)計(jì)規(guī)范是一個(gè)持續(xù)迭代和優(yōu)化的過(guò)程，旨在確保規(guī)范能夠適應(yīng)不斷變化的設(shè)計(jì)需求、技術(shù)發(fā)展以及用戶期望。

定期組織設(shè)計(jì)團(tuán)隊(duì)對(duì)現(xiàn)有規(guī)范進(jìn)行系統(tǒng)性審查，評(píng)估其在實(shí)際項(xiàng)目中的適用性、一致性及有效性。識(shí)別可能存在的模糊地帶、冗余部分或缺失項(xiàng)。

收集用戶對(duì)產(chǎn)品界面和交互的反饋，了解他們?cè)谑褂眠^(guò)程中遇到的問(wèn)題、偏好及改進(jìn)建議，這些信息有助于發(fā)現(xiàn)規(guī)范中需要改進(jìn)的部分。

選擇部分項(xiàng)目作為規(guī)范更新的試點(diǎn)，應(yīng)用新規(guī)范進(jìn)行設(shè)計(jì)，通過(guò)實(shí)踐檢驗(yàn)其效果，收集問(wèn)題與改進(jìn)建議。

4、最后

設(shè)計(jì)規(guī)范你可以不會(huì)做但你千萬(wàn)不要不會(huì)用。在過(guò)去的工作經(jīng)歷中、也做過(guò)不少的設(shè)計(jì)規(guī)范。APP的后臺(tái)系統(tǒng)的。但缺沒(méi)有好好的停下來(lái)總結(jié)總結(jié)。

如果在項(xiàng)目里你還不了解設(shè)計(jì)規(guī)范的重要性或者不會(huì)做設(shè)計(jì)規(guī)范。那就先停下來(lái)去看看這些大廠的規(guī)范先用著。他們都提供了豐富的可用資源。是可以為你解決日常工作的。

好了這篇文章就到這里了、春天、適合出去玩不適合工作。哈哈。長(zhǎng)堤春水綠悠悠，畎入漳河一道流。 莫聽(tīng)聲聲催去棹，桃溪淺處不勝舟。

我是KING 我們下次見(jiàn)~

Powered by Froala Editor