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

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

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

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

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

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

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

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

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

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

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

2.1 必讀前言

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

2.2 基本庫建立詳解

2.2.1  Gird-柵格化建立

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

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

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

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

包括移動端的柵格系統(tǒng)，我們怎么去使用，比如做金剛區(qū)的時候，分成四列的金剛區(qū)各占25%。所以為了更好的靈活布局，我們就能做這樣的柵格布局的規(guī)則。

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

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

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

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

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

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

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

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

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

2.2.2  Color-色彩

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

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

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

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

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

2.2.4  Typography-字體

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

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

2.2.5  Icon-圖標(biāo)

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

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

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

2.3.1  Button-按鈕

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

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

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

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 分頁導(dǎo)航

2.3.2.5  Dropdowns 下拉菜單

2.3.3  Form-表單

2.3.3.1  Input 輸入/查詢表單

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

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

文章來源：站酷   作者：_C魚

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

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

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