以下內(nèi)容主要分成兩大部分，第一部分是認(rèn)識(shí)布局設(shè)計(jì)中的一些常見(jiàn)問(wèn)題，比如柵格中8的相關(guān)數(shù)原則，分辨率的選擇，以及布局的幾種常用方式，因?yàn)锽端布局是建立B端設(shè)計(jì)規(guī)范的前提。第二部分是結(jié)合營(yíng)銷(xiāo)管理后臺(tái)系統(tǒng)實(shí)際案例，去搭建B端設(shè)計(jì)規(guī)范的詳細(xì)過(guò)程，基本庫(kù)，擴(kuò)展庫(kù)的詳細(xì)展開(kāi)介紹，基本庫(kù)和擴(kuò)展庫(kù)的搭建也是設(shè)計(jì)規(guī)范中的關(guān)鍵。內(nèi)容較多，大家可以根據(jù)上述目錄來(lái)選擇性閱讀。

1.1 如何正確做布局設(shè)計(jì)

如下圖幾個(gè)常見(jiàn)的布局設(shè)計(jì)稿，或者當(dāng)前市場(chǎng)上線的所有B端系統(tǒng)里，僅作為布局大框架來(lái)看，都可以分成以下這6種布局框架。

這六種框架里，我們可以發(fā)現(xiàn)它們?cè)谠O(shè)計(jì)上共性的地方幾乎都是左右布局，并且有側(cè)邊欄。其中細(xì)微的區(qū)別就是有的側(cè)邊欄寬一些，有的側(cè)邊欄窄一些，有一些有頂部的導(dǎo)航欄，有一些有底部的導(dǎo)航欄，還有一些它的側(cè)邊欄和頂部導(dǎo)航欄的層疊關(guān)系不一樣，還有一些只有圖標(biāo)沒(méi)有文字，整個(gè)的布局方式無(wú)非就是這六種，所以不管哪種方式總結(jié)出來(lái)的共性就是左右布局，左邊稱之為側(cè)邊欄，右邊稱之為操作區(qū)。在B端設(shè)計(jì)中我們都采用這樣一種共性的布局方式，有的人想創(chuàng)新不想用這樣的布局方式，但不可以，因?yàn)榻?jīng)過(guò)實(shí)驗(yàn)調(diào)查發(fā)現(xiàn)，從用戶體驗(yàn)角度講，在B端系統(tǒng)中，或者說(shuō)在電腦的操作環(huán)境下，側(cè)邊欄方式，這種左右布局的操作在電腦端是非常有普及性和體驗(yàn)性的，也是最容易操作的。

接下來(lái)我們繼續(xù)把這個(gè)框架細(xì)化一下，如下圖，可以分成很多的區(qū)域，可以看出，左上角更多的是放一些logo或者放一些項(xiàng)目的名稱；在頂部大部分80%左右都會(huì)有頂部的導(dǎo)航欄也叫導(dǎo)航區(qū)；左邊是側(cè)邊欄，一般是系統(tǒng)的主菜單導(dǎo)航，可以分到2級(jí)或者3級(jí)，一般到3級(jí)就顯得不夠友好了，我們一般會(huì)分到1級(jí)或者2級(jí)；然后是底部的狀態(tài)欄，狀態(tài)欄不是所有系統(tǒng)都有，這個(gè)狀態(tài)欄代表當(dāng)前系統(tǒng)運(yùn)行的狀態(tài)，比如數(shù)據(jù)庫(kù)的讀取情況，保存情況；最后是操作區(qū)域，類(lèi)似于我們平時(shí)使用的figma軟件也操作區(qū)域是最大的，在操作區(qū)域操作，選擇區(qū)來(lái)選擇一些功能。這個(gè)就是細(xì)分的框架內(nèi)容，當(dāng)然這些細(xì)分出來(lái)的內(nèi)容也都是有規(guī)范的。

比如頂部導(dǎo)航區(qū)域，可分為一級(jí)導(dǎo)航和二級(jí)導(dǎo)航，一級(jí)導(dǎo)航64px，二級(jí)導(dǎo)航48px，B端系統(tǒng)所有的單位都是像素px（物理像素），在這里補(bǔ)充一個(gè)小常識(shí)，我們平時(shí)在做C端移動(dòng)端設(shè)計(jì)的時(shí)候，IOS單位是pt（點(diǎn)/邏輯像素），安卓單位是dp，其中1dp=1px，平時(shí)UI設(shè)計(jì)師都是基于IOS設(shè)計(jì)稿來(lái)設(shè)計(jì)，因?yàn)樘O(píng)果得交互在整個(gè)設(shè)計(jì)規(guī)范里是最好的，基于IOS出一版，然后安卓進(jìn)行微調(diào)。所以移動(dòng)端開(kāi)發(fā)單位用到的是pt。而B(niǎo)端設(shè)計(jì)中，由于b端系統(tǒng)的技術(shù)架構(gòu)：分c/s和b/s。c/s需要下載客戶端，b/s直接通過(guò)瀏覽器打開(kāi)。所以B端的設(shè)計(jì)用到的單位一定是px（像素）。因此這里我們提到的一級(jí)導(dǎo)航高度和二級(jí)導(dǎo)航高度都指的是像素。

然后頂部導(dǎo)航展示類(lèi)的（放些logo或圖片），一級(jí)導(dǎo)航高度80px，二級(jí)導(dǎo)航高度56px。頂部導(dǎo)航高度的范圍是48+8n，側(cè)邊欄寬度的范圍是200+8n。這里要繼續(xù)補(bǔ)充一個(gè)常識(shí)，在B端的設(shè)計(jì)中，要遵循8的倍數(shù)相關(guān)值來(lái)進(jìn)行設(shè)計(jì)，比如在界面設(shè)計(jì)中我們的間距、邊距、高度或者寬度不知道該怎么確定的時(shí)候，就可以取8的倍數(shù)值來(lái)進(jìn)行確定，8、16、24、32、48等。對(duì)比C端來(lái)看，由于手機(jī)端的柵格化不能體現(xiàn)出特別強(qiáng)的優(yōu)勢(shì)來(lái)，因?yàn)槠聊坏姆秶鷮挾忍×?，最多可設(shè)置6列柵格，反而有約束。在手機(jī)端如果非要做柵格，可以分成6列柵格和4列柵格。移動(dòng)端左右安全距離通常都是16pt，在移動(dòng)端設(shè)計(jì)中如果間距、留白不知道怎么確定的時(shí)候，我們一般會(huì)找4的相關(guān)值。比如4、8、16、20、24、28、32、40、44，這和IOS的規(guī)范是有關(guān)系的，其中44是比較特別的值，44是在IOS中設(shè)計(jì)中是能點(diǎn)到的最小區(qū)域，如果放到44以下，在移動(dòng)端就可能點(diǎn)擊不到，而在安卓中是48最小區(qū)域。提及這些的目的，說(shuō)回來(lái)，是想讓大家加深印象，在移動(dòng)端不知道怎么預(yù)留空間的時(shí)候，就按照4得相關(guān)值去做，在B端就按照8的相關(guān)值去做，就可以做出設(shè)計(jì)的韻律來(lái)。

那么這個(gè)整體的布局方式，屬于layout/容器布局，包括了頂部導(dǎo)航、Header/頂部布局、Sider/側(cè)邊欄、Content/操作區(qū)、Footer/底部操作欄。

這幾個(gè)部分有一個(gè)順序關(guān)系，大致可以分成三種。第一種如圖1，側(cè)邊欄是最高的級(jí)別，然后頂部導(dǎo)航區(qū)、操作區(qū)和底部狀態(tài)欄是保持平等同一個(gè)級(jí)別。第二種如圖2，頂部導(dǎo)航為最高級(jí)別，側(cè)邊欄為次高級(jí)別，然后是操作區(qū)域，底部狀體欄。第三種如圖3，頂部導(dǎo)航欄、操作區(qū)和底部狀態(tài)欄是同一個(gè)級(jí)別。其中這三種情況常見(jiàn)的就是第一種和第二種，第一種最為常見(jiàn)，第二種圖2通欄的導(dǎo)航情況也有。所以我們?cè)谠O(shè)計(jì)的時(shí)候，選擇1和2方案布局就可以。

所以綜上我們可以看出，B端就是左右布局來(lái)進(jìn)行設(shè)計(jì)，而手機(jī)端更多采用上下布局的方式來(lái)設(shè)計(jì)。這也是剛才提到的問(wèn)題，屏幕比例的問(wèn)題，手機(jī)和電腦尺寸的區(qū)別。

這里又延伸出一個(gè)問(wèn)題，B端有沒(méi)有移動(dòng)端？或者說(shuō)什么情況下會(huì)做B端移動(dòng)端的設(shè)計(jì)？其實(shí)，并不是所有的B端都有移動(dòng)端，比如我們常用的一些大量信息的管理，CRM，ERP系統(tǒng)，有一些會(huì)有一定的移動(dòng)端，也是針對(duì)一些快捷的操作來(lái)設(shè)計(jì)的，比如在CRM系統(tǒng)中尋找一個(gè)客戶資料，比如我們?cè)谌魏无k公場(chǎng)景去找一個(gè)用戶資料的時(shí)候，不可能總守著電腦去找，最方便的情況是可以隨時(shí)用手機(jī)去查找，具備這樣的業(yè)務(wù)使用場(chǎng)景的時(shí)候，設(shè)計(jì)師就應(yīng)該和產(chǎn)品經(jīng)理商量，是否去增加移動(dòng)端設(shè)計(jì)，這也是必要的一步。同樣B端有B端的優(yōu)勢(shì)，如果涉及到大型的篩選、數(shù)據(jù)錄入的時(shí)候，很明顯手機(jī)端就不支持了，而且體驗(yàn)效果不好，我們一定會(huì)用電腦來(lái)操作，一般也就是在集中的工作時(shí)間和在工位配合鼠標(biāo)進(jìn)行，面對(duì)大型數(shù)據(jù)還是電腦端好用，所以電腦端主要是B端承載的方式，這也是布局規(guī)范這部分需要了解的知識(shí)點(diǎn)。

2.1 必讀前言

B端系統(tǒng)設(shè)計(jì)規(guī)范的建立，可以分成四部分，第一先建立基本庫(kù)，包括色彩系統(tǒng)、字體系統(tǒng)、圖標(biāo)系統(tǒng)、柵格系統(tǒng)、間距系統(tǒng)、布局系統(tǒng)。當(dāng)建立好幾本庫(kù)后，再根據(jù)自己的公司的實(shí)際業(yè)務(wù)，去建立擴(kuò)展庫(kù)，擴(kuò)展庫(kù)包括導(dǎo)航系統(tǒng)、數(shù)據(jù)錄入、數(shù)據(jù)顯示、反饋系統(tǒng)，這些細(xì)分為又有很多組件，具體如下圖，并不是每一個(gè)都會(huì)做，需要結(jié)合實(shí)際項(xiàng)目去進(jìn)行擴(kuò)展庫(kù)的搭建，也就是缺什么組件就補(bǔ)充到擴(kuò)展庫(kù)里。做完擴(kuò)展庫(kù)后再繼續(xù)做方法庫(kù)和案例庫(kù)，也就是做這些組件的說(shuō)明和最佳之間案例，告訴設(shè)計(jì)同事或者開(kāi)發(fā)人員具體什么時(shí)候用，怎么可以正確的去使用，來(lái)提高設(shè)計(jì)效率。我們接下來(lái)先了解第一步基本庫(kù)的建立過(guò)程。

2.2 基本庫(kù)建立詳解

2.2.1  Gird-柵格化建立

2.2.1.1  認(rèn)識(shí)柵格系統(tǒng)

在做基本庫(kù)建立時(shí)，基本庫(kù)建立的第一步是柵格化的建立。柵格化是我們做B端設(shè)計(jì)規(guī)范的第一步，也是做B端組件庫(kù)的第一步，柵格系統(tǒng)是什么樣子決定了我們接下來(lái)設(shè)計(jì)界面會(huì)進(jìn)行怎么樣的布局，因?yàn)闁鸥窕镆矐?yīng)用到了格式塔原則中的相關(guān)性等原理，所以柵格的結(jié)果是一定是有規(guī)則的。

比如下圖是營(yíng)銷(xiāo)系統(tǒng)的柵格規(guī)范，我們可以看到，兩種情況的柵格，在分辨率1440情況下，一種是24列，間距和邊距都是24，另一種是24列，間距和邊距都是16。當(dāng)然我們還可以把界面設(shè)置其他情況的柵格，比如16、12列柵格。還有一些列數(shù)相對(duì)較少的柵格，與其對(duì)應(yīng)的界面是一些布局簡(jiǎn)單的界面。但話說(shuō)回來(lái)，通常在B端系統(tǒng)中，大家都把柵格做成24列，24列柵格可以做到一些復(fù)雜的排版布局，同時(shí)在做響應(yīng)式適配的時(shí)候也最方便，小于24柵格或者說(shuō)柵格列數(shù)越少，基本在B端系統(tǒng)中就失去了靈活布局的意義，所以在B端系統(tǒng)，通常情況下，就分成了以24列柵格，不同間距邊距的以下兩種柵格，這也符合我們公司后臺(tái)系統(tǒng)的布局，同時(shí)可以更好的做響應(yīng)式適配。

剛才分成的那兩種柵格，有人會(huì)產(chǎn)生疑惑，畫(huà)這么多條線是干什么的呢？那么接下來(lái)最佳案例實(shí)踐來(lái)了，通過(guò)第三個(gè)案例圖就可以看出。我們可以使用4列的方式來(lái)進(jìn)行布局，各占25%；也可以使用2列各占50%，或者75%和25%分；也可以占全列；也可以各占三分之一。所以用這樣的方法去指導(dǎo)我們使用，我們很容易按照這樣的方式去拍版布局的，我們也可以使用更多，但推薦這么多，再多可能就不好看了。

包括移動(dòng)端的柵格系統(tǒng)，我們?cè)趺慈ナ褂?，比如做金剛區(qū)的時(shí)候，分成四列的金剛區(qū)各占25%。所以為了更好的靈活布局，我們就能做這樣的柵格布局的規(guī)則。

補(bǔ)充知識(shí)點(diǎn)1: 柵格中Col指的是列，都分成為24列，Gutter指列間距也叫溝槽為24，Margin指兩邊邊距為24。

所以關(guān)于柵格，B端設(shè)計(jì)中，左側(cè)是固定的，只需把右側(cè)操作區(qū)域做成柵格就可以，全屏柵格是沒(méi)有意義的，比如現(xiàn)在的寬度是這么寬，有可能換了電腦使用的情況下瀏覽器的寬度會(huì)拉的很寬。

我們就會(huì)看到如下圖，當(dāng)右側(cè)拉伸了，同時(shí)右側(cè)響應(yīng)區(qū)域的柵格也變寬了。

這里就有了推薦的設(shè)計(jì)尺寸模板，在1440尺寸下的兩種設(shè)計(jì)，第一種是最常用的，也是我們這次設(shè)計(jì)的尺寸，第二種有部分系統(tǒng)需要尺寸變寬的時(shí)候，就需要這樣的設(shè)計(jì)。

2.2.1.2  為什么選用1440*900分辨率設(shè)計(jì)

通過(guò)調(diào)查發(fā)現(xiàn)，我們使用的電腦顯示器尺寸和分辨率大部分是1920*1080px這個(gè)主流分辨率，那其余的主流分辨率還有1440*900，1466*768等等。（tips：像素是指照片的點(diǎn)數(shù)單位是px，表示照片是由多少點(diǎn)構(gòu)成，分辨率是指照片像素點(diǎn)的密度，是用單位尺寸內(nèi)的像素點(diǎn)，一般用每英寸多少點(diǎn)表示，單位是dpi，也就是分辨率越高圖像就越清晰。）我們也可以去京東電腦屏幕銷(xiāo)量的排行來(lái)看，銷(xiāo)量最高的也就是主流分辨率，大部分銷(xiāo)量在23～27英寸的顯示器，比例為16:9，分辨率就是1920*1080px，所以我們?cè)谠O(shè)計(jì)的時(shí)候一定要滿足大部分人使用的屏幕分辨率。但是我們也不能按照1920*1080px尺寸來(lái)設(shè)計(jì)，因?yàn)檫@只是市場(chǎng)買(mǎi)賣(mài)的情況，作為B端工作者或者真正的用戶，這不是一個(gè)絕對(duì)的數(shù)據(jù)。通過(guò)對(duì)百度流量研究院數(shù)據(jù)的調(diào)查，B端中實(shí)際用戶更多采用的設(shè)計(jì)分辨率是1440*900px，所以我們作為設(shè)計(jì)師通常是以這個(gè)尺寸下來(lái)進(jìn)行設(shè)計(jì)的，我們選擇一個(gè)1440*900px的分辨率它不是最高，也不是最低分辯率，屬于中間值，原因就是可以做到更好的向上和向下兼容適配。

前面我們提到，B端柵格化遵循8像素8的倍率來(lái)進(jìn)行設(shè)計(jì)韻律。如圖，列了五個(gè)B端主流的分辨率，如果用這些分辨率除以4、6、8、12這些隨機(jī)的偶數(shù)，就發(fā)現(xiàn)，其中1920*1080都可以整除顯示為綠色點(diǎn)，由于它是最大的分辨率，我們不考慮選用，繼續(xù)往下看，除不盡的為紅點(diǎn)表示，可以直觀的看出除不盡的點(diǎn)數(shù)占比最少的就是1440*900的分辨率，而1440*900又是眾多分辨率中居中的一個(gè)值容易兼容適配最高和最低分辨率，且遵循了8的倍數(shù)設(shè)計(jì)原則，容易做柵格化設(shè)計(jì)。所以我們通常會(huì)選擇1440*900這樣的分辨率來(lái)進(jìn)行做B端的設(shè)計(jì)界面。

在沒(méi)有得到數(shù)據(jù)支撐的時(shí)候就按照行業(yè)慣例1440*900來(lái)進(jìn)行設(shè)計(jì)，這樣做肯定沒(méi)有錯(cuò)，但如果做的系統(tǒng)可以確定只是少部分人進(jìn)行使用，那我們應(yīng)該做一些適當(dāng)?shù)恼{(diào)研，去獲知更合適的尺寸分辨率，比如公司集體辦公配備的統(tǒng)一尺寸是多少，經(jīng)常在這個(gè)電腦下查看工作的話，我們就應(yīng)該用這個(gè)尺寸去設(shè)計(jì)，如圖，我們就應(yīng)該按照如圖順序進(jìn)行調(diào)研選擇合適的分辨率。

所以在認(rèn)識(shí)了柵格包括建立了柵格布局后，接下來(lái)就是色彩系統(tǒng)。

2.2.2  Color-色彩

2.2.2.1 如何正確確定系統(tǒng)主色和輔助色

在設(shè)計(jì)中色彩占了很大一部分，首先要確定主色，主色只要一個(gè)就夠了。主色往往和行業(yè)和企業(yè)的VI色要有關(guān)聯(lián)度，同時(shí)主色要和其他的顏色脫引而出要有強(qiáng)調(diào)感，通常我們根據(jù)行業(yè)屬性和企業(yè)VI可以大致確定主色的色相范圍，但不知道怎么去精確色值，這時(shí)可以借助Antdesign中的色板來(lái)找精確色值，比如上品的VI品牌色為橙色，可以對(duì)應(yīng)找到Antdesign中色板“火山”模塊兒，在這組色階中我們通常會(huì)選擇中間“色階6”的色值作為最佳色值，因?yàn)樯A6的顏色更飽和更純凈，可以上下進(jìn)行兼容色值。所以我們就確定了主色為“色階6”，色值為#fa541c。

當(dāng)設(shè)置完主色后再建立輔助色。輔助色的原則是要和主色能夠搭配起來(lái)，也就是說(shuō)幾種輔助色放在一起，我們看起來(lái)要統(tǒng)一和諧而不是比較奇怪感受起來(lái)給人不協(xié)調(diào)的感覺(jué)。比如我確定了三個(gè)輔助色，由于上品VI色中提及了輔助色為青色，所以我以青色來(lái)延展其他的輔助色，青色、紫薇、粉色，當(dāng)這三種顏色放在一起，它們看起來(lái)還是比較和諧的，為什么會(huì)看起來(lái)比較和諧？我們通過(guò)觀察拾色器中輔助色色值的位置可以看出，他們幾乎都在同一個(gè)位置，或者他們除了色相不同外，他們幾乎都在同一個(gè)緯度，保持在同一個(gè)區(qū)間，所以他們看起來(lái)才比較協(xié)調(diào)，這也是配色的一個(gè)小技巧，通過(guò)在拾色器中同一緯度下去更改色相來(lái)達(dá)到顏色之間的統(tǒng)一協(xié)調(diào)。那有人會(huì)問(wèn)，如果企業(yè)VI沒(méi)有確定可延展的輔助色怎么辦？同理，調(diào)色的方法和剛才提到的方法是一樣的，以主色的拾色器色值維度，來(lái)更改出不同的色相，直到自己感覺(jué)彼此搭配協(xié)調(diào)為止，這個(gè)方法屢試不爽，經(jīng)過(guò)多次驗(yàn)證，可以快速找到我們適合的配色。

2.2.3  Space-標(biāo)準(zhǔn)間距

所有的基本庫(kù)第一做柵格，第二做色彩，第三步就是間距，間距一般和柵格是可以同時(shí)做出來(lái)的，因?yàn)闁鸥褡裱?得倍數(shù)原則來(lái)建立得，所以我們可以看到間距也取得是8得相關(guān)值，最小是4，接下來(lái)是8，16，24，32，48，64，所以現(xiàn)在只是確定了我們B端排版時(shí)間距的這樣的一個(gè)設(shè)計(jì)韻律，如果以后有的頁(yè)面模塊兒間距是128，那就把128這個(gè)間距加進(jìn)去，加到間距規(guī)范里。

2.2.4  Typography-字體

當(dāng)做出色彩后，接下來(lái)重要的就是字體規(guī)范。在B端字體中文用PingFangSC（也可以是思源黑體或者微軟雅黑，B端中字體比較受限制，也就這三種字體可用，這里我選擇PingfangSC），英文用SF，常規(guī)數(shù)字用PingFangSC，涉及到特殊數(shù)字比如一些數(shù)據(jù)信息用DIN字體。這里的字體尺寸規(guī)范，常用的一般就是正文，小標(biāo)題，標(biāo)題都是14px，和注釋的字號(hào)為12px，所以最小字號(hào)12px，14px，18px，這樣的字號(hào)大小選擇。字重一種是常規(guī)體，一種是加粗。至于H1，H2, H3這些，H標(biāo)簽也叫Heading標(biāo)簽，HTML語(yǔ) 言里一共有六種大小的heading 標(biāo)簽，是網(wǎng)頁(yè)html 中對(duì)文本標(biāo)題所進(jìn)行的著重強(qiáng)調(diào)的一種標(biāo)簽，UI中一般用不上，雖然很少用到，但需要定義到。

同時(shí)字體有它的色彩規(guī)范，字體的尺寸規(guī)范對(duì)應(yīng)的是字體的色彩規(guī)范，我們可以看到很多界面標(biāo)題字，小標(biāo)題，正文字有不同的大小，同時(shí)有不同的字體顏色，這種對(duì)比的使用，這些細(xì)節(jié)的使用才會(huì)使界面看起來(lái)正確和諧。比如它的副標(biāo)題和描述用的就是比較淡的顏色。如果有顏色的區(qū)別，就把它放進(jìn)去，這個(gè)色彩我們稱之為中性色，它不偏色彩，偏的是灰，但這里字體的顏色用的是偏藍(lán)灰色，偏藍(lán)的顏色，不仔細(xì)看還是趨向于灰色，這種藍(lán)灰色可以讓界面看起來(lái)更靈動(dòng)一點(diǎn)。同樣字體可以定義它的色階，透明度20%去遞減選擇不同位置不同的字體顏色。

2.2.5  Icon-圖標(biāo)

接下來(lái)是圖標(biāo)，可以使用Antdedign的icon，因?yàn)锳ntdesign的icon是開(kāi)源的，這里用的是IBM carbon的圖標(biāo)，也是開(kāi)源的圖標(biāo)，但設(shè)計(jì)師在平時(shí)還是建議去自己畫(huà)圖標(biāo)，用戶經(jīng)歷C端的視覺(jué)沖擊的洗禮，對(duì)視覺(jué)的品味越來(lái)越高，慢慢慢慢B端C化只是時(shí)間問(wèn)題，用戶對(duì)B端的視覺(jué)要求也會(huì)越來(lái)越高，所以我們還需要多練習(xí)設(shè)計(jì)自己的圖標(biāo)，B端能體現(xiàn)設(shè)計(jì)師視覺(jué)功底的的地方一般也就圖表的設(shè)計(jì)和圖標(biāo)的設(shè)計(jì)，其他就是表單之類(lèi)的很難體現(xiàn)視覺(jué)方面的東西。所以設(shè)計(jì)好后放到圖標(biāo)庫(kù)里，這里只是一個(gè)占位，如果想快速出圖，那用這些開(kāi)源的圖標(biāo)也是沒(méi)有問(wèn)題。

在實(shí)際操作的時(shí)候，可以在柵格里直接畫(huà)，也就是在這個(gè)大小范圍內(nèi)直接畫(huà)，或者先畫(huà)完再放到柵格里調(diào)整大小，線寬，圓角等細(xì)節(jié)。

做到這一步，柵格、色彩、字體、圖標(biāo)，我們的基礎(chǔ)的模板就已經(jīng)做完了，也就是基本庫(kù)，接下來(lái)就需要做擴(kuò)展庫(kù)。擴(kuò)展庫(kù)包含了各種組件和按鈕。并不是所有項(xiàng)目都會(huì)用到按鈕，開(kāi)關(guān)，滑動(dòng)條這些組件，所以擴(kuò)展庫(kù)根據(jù)我們需要去建立，接下來(lái)我們?cè)敿?xì)了解一下?tīng)I(yíng)銷(xiāo)系統(tǒng)案例擴(kuò)展庫(kù)的建立方法。

2.3.1  Button-按鈕

比如擴(kuò)展庫(kù)里的按鈕，按鈕是這個(gè)主色， 有很多情景需要我們?nèi)ソ?，按鈕有三種樣子小的、中號(hào)、大號(hào)的，其實(shí)它們代表著不同的情景；按鈕有三種狀態(tài)，通常、懸停、禁用；包括按鈕的類(lèi)型，有文字按鈕，圖標(biāo)+文字按鈕在左，圖標(biāo)+文字按鈕在右，只有圖標(biāo)按鈕；包括按鈕在功能樣式上的分類(lèi)，有主要按鈕、次要按鈕、形狀按鈕、全圓角按鈕，這些分類(lèi)，對(duì)應(yīng)的狀態(tài)形狀都羅列了出來(lái)，這些種類(lèi)一定會(huì)在我們的界面中不同地方體現(xiàn)，所以具體界面中用到的，到時(shí)候把這內(nèi)容再補(bǔ)全，補(bǔ)到我們的按鈕規(guī)范中，下次再使用的時(shí)候具體放什么樣式，長(zhǎng)什么樣子就可以直接使用。

2.3.2  Navigation-導(dǎo)航菜單

接下來(lái)擴(kuò)展庫(kù)里的導(dǎo)航菜單，和表單的詳細(xì)制作方法都在后面的案例圖中有詳細(xì)制作步驟和過(guò)程，這里就不一一展開(kāi)介紹了，大家可以根據(jù)如下圖結(jié)合自己業(yè)務(wù)進(jìn)行響應(yīng)設(shè)計(jì)規(guī)范的建立。實(shí)際難度其實(shí)在figma的正確使用上，比如創(chuàng)建組件，母組件和子組件的結(jié)合應(yīng)用，自動(dòng)布局（shifr+A）的規(guī)范使用等，重在多做練習(xí)，實(shí)際動(dòng)手操作。

2.3.2.1  Menu 導(dǎo)航菜單

2.3.2.2  Tabs  標(biāo)簽導(dǎo)航

2.3.2.3  Breadcrumb 面包屑

2.3.2.4  Pagination 分頁(yè)導(dǎo)航

2.3.2.5  Dropdowns 下拉菜單

2.3.3  Form-表單

2.3.3.1  Input 輸入/查詢表單

2.3.3.2  Checks & Radios & Switches 多選框 & 單選 & 開(kāi)關(guān)

以上為B端設(shè)計(jì)規(guī)范基本庫(kù)和擴(kuò)展庫(kù)的建立思路，其中基本庫(kù)里的色彩或者字體、柵格規(guī)范等等，根據(jù)常用分辨率設(shè)備的調(diào)研，和企業(yè)品牌VI關(guān)聯(lián)色，我們都可以很輕松的定義出來(lái)。其實(shí)設(shè)計(jì)規(guī)范的搭建核心在于組件庫(kù)的搭建，舉個(gè)例子，比如Iput輸入框規(guī)范，我們需要先定義一個(gè)輸入框的高度，以及文字與輸入框的間距，線框的顏色，文字大小，文字顏色，這些是定義一個(gè)輸入框組件規(guī)范的關(guān)鍵，我們會(huì)發(fā)現(xiàn)當(dāng)規(guī)范的做圖做好這個(gè)輸入框的時(shí)候，也就是確定了它的組件規(guī)范，做好后，我們就需要把這個(gè)輸入框形成組件，為了方便后面界面中進(jìn)行復(fù)用，我們就可以把它創(chuàng)建組件。因?yàn)槭墙M件嘛，他要方便在不同場(chǎng)景下使用，會(huì)需要拉伸，所以就需要把文字與輸入框加上自動(dòng)布局（shift+A）進(jìn)行調(diào)整。有了之前提到的整體設(shè)計(jì)規(guī)范建立思路，再結(jié)合剛才提到的基本的設(shè)計(jì)規(guī)范操作步驟，就形成了以上自己業(yè)務(wù)系統(tǒng)的設(shè)計(jì)規(guī)范落地，以上內(nèi)容供大家參考，感謝閱讀，thanks～

文章來(lái)源：站酷   作者：_C魚(yú)

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)