在B端產(chǎn)品設(shè)計中，有效的設(shè)計規(guī)范有利于降低團(tuán)隊溝通成本，提高開發(fā)效率，并在一定程度上保證產(chǎn)品應(yīng)用的一致性，最終推動產(chǎn)品設(shè)計的優(yōu)化。本篇文章里，作者總結(jié)了從0開始搭建B端設(shè)計規(guī)范的注意事項與策略方法，一起來看一下。

前言

哈哈哈哈，最近事情太多了，已經(jīng)快三個月沒更新了，現(xiàn)在也忙的差不多了，咱們更新繼續(xù)~~

今天給大家分享的是關(guān)于如何從零開始搭建 B 端設(shè)計規(guī)范。

時間轉(zhuǎn)眼即逝，掐指一算，我接觸 B 端已有 4 年之久了，當(dāng)年剛接觸的時候，B 端的從業(yè)人員比例還是很少的。近兩年 B 端越來越火熱，無論從設(shè)計風(fēng)格還是產(chǎn)品數(shù)量上，都有了很大的提升。

隨著 B 端的產(chǎn)品越來越完善，要求設(shè)計師的專業(yè)性也要越來越強(qiáng)。設(shè)計規(guī)范作為基礎(chǔ)中的基礎(chǔ)，是大家都要熟練掌握的技能，我們不僅要會運(yùn)用各種規(guī)范，還要會撰寫適合產(chǎn)品的規(guī)范。

分享開始，敲黑板~~

一、設(shè)計規(guī)范的目標(biāo)

在搭建設(shè)計系統(tǒng)之前，我們要想清楚設(shè)計規(guī)范的目標(biāo)是什么？使用者是誰？

• 目標(biāo)：保持產(chǎn)品風(fēng)格統(tǒng)一性、提高設(shè)計輸出效率、減少無效溝通。
• 使用人群：UI、交互、前端、測試。

二、設(shè)計原則

設(shè)計規(guī)范要符合基本的設(shè)計原則，否則你的規(guī)范會雜亂無章。這里我總結(jié)了 6 條原則供大家參考。

1. Unity（統(tǒng)一性）：頁面風(fēng)格、色彩、布局等要保持全局統(tǒng)一，不可為了某一功能的美觀而去破壞整體性。
2. Accessibility（易用性）：易用是首要考慮的因素，能一步解決的事情絕不兩步。
3. Proximity（親密性）：如果信息的關(guān)聯(lián)性強(qiáng)，則他們的距離就要相應(yīng)的縮短，讓他們看起來是一個視覺單元；反之，則距離要加大。要讓用戶對信息的區(qū)域劃分一目了然。
4. Alignment（對齊原則）：在界面中，將元素進(jìn)行對齊，即符合用戶的認(rèn)知，也可以引導(dǎo)視覺流向，讓用戶更加流暢地閱讀信息。
5. Contrast（對比原則）：對比是增加視覺效果最有效方法之一，同時也能在不同元素之間建立一種有組織的層次結(jié)構(gòu)，讓用戶快速識別關(guān)鍵信息。
6. Repetition（重復(fù)原則）：相同的元素在整個界面中不斷重復(fù)，不僅可以有效降低用戶的學(xué)習(xí)成本，也可以幫助用戶識別出這些元素之間的關(guān)聯(lián)性。

三、框架布局

這里一般采用柵格布局。說到柵格，有好多小伙伴又要再回顧一下知識點了。我今天再把柵格知識幫大家復(fù)習(xí)一遍，如果之前不是很了解柵格的，拿個小本本記下來，要考~~

柵格布局能夠適應(yīng)各種屏幕尺寸及分辨率，確保整體布局的一致性。

柵格建議使用 1、2、3、4、6 切分布局，可以進(jìn)行多種布局組合，并在整個設(shè)計中保持布局的結(jié)構(gòu)的一致性。

頁面中一般采用 24 列自適應(yīng)網(wǎng)格，你可以使用它為各種屏幕尺寸創(chuàng)建靈活的布局。

邊距 Margins、列 Columns、間隔 Gutters 分別是什么？

邊距 Margins：邊距是內(nèi)容與左右邊緣之間的空間。

控制臺內(nèi)容區(qū)的邊距選用 8 的倍數(shù)為設(shè)定值，一般采用 16/24px 的居多。

需要注意的是：

• 減去 margin 后，列在頁面區(qū)域均分，保證每列的寬度是一致的；
• 在區(qū)域有 margin 的情況下，劃分列的區(qū)域不能包含 margin。

列 Columns：在電腦端列的數(shù)量是個常量（24列），每一列寬度的尺寸隨屏幕大小進(jìn)行自適應(yīng)調(diào)整。

間隔 Gutters：間隔是列與列之間的空隙，控制臺產(chǎn)品 gutter 使用固定值也要是 8 的倍數(shù)，一般采用 16/24px。

需要注意的是：

• 布局的左右兩邊的分界線 gutter 可以為 0；
• 必須保證 column 的寬度是一致的。

邊距 Padding：padding 指一個元素的內(nèi)容和其邊界之間的空間，padding 最小值是 4px，然后其余均為 8px 的倍數(shù)，建議值為 8/16/24px。

內(nèi)容區(qū)定寬：此場景常用于用戶歡迎頁、結(jié)果頁等需要將內(nèi)容區(qū)寬度設(shè)置為固定值的頁面。此時 column 和 gutter 保持不變，根據(jù)頁面寬度改變 margin 的值。

四、設(shè)計風(fēng)格

1. Color（顏色）

色彩內(nèi)容主要包含基礎(chǔ)色（如品牌色、黑色、白色）和功能色（如鏈接色、提醒色等）。圖表配色為單獨(dú)的配色體系。

在前期制定顏色規(guī)范的時候，精益求精的設(shè)定顏色，切忌顏色過多。

顏色的狀態(tài)色盡量用原色進(jìn)行轉(zhuǎn)換，設(shè)置一個合理的變色公式，讓所有顏色的狀態(tài)色都根據(jù)這個公式進(jìn)行轉(zhuǎn)換。例：

• Hover：H不變 S加10 B減5；
• Click：H不變 S加20 B減10；
• Disable：HSB均不變，不透明度 30%。

在設(shè)計規(guī)范中，盡量把顏色的色值和 rgba 值都寫出來（這里是強(qiáng)迫癥患者要標(biāo)的，因為有時候色值完全一樣，但 rgba 數(shù)值略有不同，雖然效果一樣，但是對于強(qiáng)迫癥的你來說，舒服嗎）。

狀態(tài)色有 4 狀態(tài)色：Normal、Hover、Click、Disable。

在設(shè)定圖表顏色的時候，要考慮不同的使用樣式（柱狀圖、環(huán)形圖、餅圖等……），同時也要考慮它的延展性，比如你設(shè)定 12 個 chart 色值，在使用的時候按著順序來使用，當(dāng)超過 12 個后可以為同一個顏色。

2. Font（文字）

設(shè)定統(tǒng)一的字體規(guī)范，使用非襯線字體在各個操作系統(tǒng)下都有最佳展示效果。

首先，要設(shè)置一個字體家族，保證產(chǎn)品界面的最優(yōu)展示。

例如（僅作為展示，不是建議）：font-family： “Chinese Quote”， -apple-system，BlinkMacSystemFont，“Segoe UI”，“PingFang SC”，“Hiragino Sans GB”，“Microsoft YaHei”，“Helvetica Neue”，Helvetica，Arial，sans-serif，“Apple Color Emoji”，“Segoe UI Emoji”，“Segoe UI Symbol”。

1）字號

現(xiàn)在主流的產(chǎn)品中，主體字為 12px / 14px 的居多，可根據(jù)自身的產(chǎn)品定位以及用戶的習(xí)慣進(jìn)行設(shè)定。字號不要出現(xiàn)奇數(shù)，否則在一些顯示器上會有對不齊像素的狀況發(fā)生。

2）行高

行高常規(guī)的有兩種規(guī)范：

• 字號+8px；
• 1.5倍 / 2倍 * 字號。

我喜歡用第一種，就是字號大小 + 8px 作為行高的規(guī)范。行高是不可被忽略的重要細(xì)節(jié)之一，因為在算間距的時候，行高是要被算進(jìn)去的。

3）字重

字重有很多，但是在真正的產(chǎn)品使用中，字重盡量不要太多種，2~3 種即可。

4）字體顏色

字體顏色數(shù)量建議在 3~4 個，不宜過多，但是每個層級之間區(qū)分要大一些。

文本應(yīng)該保持至少 4.5：1 （基于亮度值計算）的對比度以保持文本清晰；最佳對比度為 7：1。

測試對比度的網(wǎng)站：https://contrast-ratio.com

WCAG 2.0 中將顏色對比等級分為 3 種，A級、AA級、AAA級，等級越高意味著顏色的對比度越高，呈現(xiàn)出來的視覺壓力越大。

• A級：對比度 3：1，是普通觀察者可接受的最低對比；
• AA級：對比度 4.5：1，是普通視力損失的人可接受的最低對比度；
• AAA級：對比度 7：1，是嚴(yán)重視力損失的人可接受的最低對比度。

3. icon（圖標(biāo)）

設(shè)定統(tǒng)一的圖標(biāo)使用規(guī)范，讓視覺效果更和諧。

1）icon 大小

icon 的常用尺寸有很多，需要注意的是 icon 的大小中，相鄰的兩個尺寸至少相差 4px，否則你會在后期用的時候會有選擇困難癥。

同時功能 icon 盡量貼邊或盡量貼邊繪制，保證展現(xiàn)的視覺統(tǒng)一性（操作 icon 除外）。

單獨(dú) icon 使用的時候，盡量不要太小，最小值建議為 12px。

2）icon 熱區(qū)

icon 的熱區(qū)經(jīng)常被設(shè)計師和開發(fā)所忽略，本身 icon 的尺寸一般就很小，再加上如果沒有設(shè)置熱區(qū)的話，操作體驗極差。

所以一定一定要設(shè)置 icon 的熱區(qū)，設(shè)置的值我建議為 icon 大小的 2倍。例：icon 大小為 14 * 14px，則熱區(qū)大小為 28 * 28px。

4. size（尺寸）

頁面內(nèi)布局間、模塊間、模塊內(nèi)的各部件距離。

尺寸大部分規(guī)范中都用的是 8 的倍數(shù)，不用糾結(jié)，直接用就行。我這里有個公式：Sn = 8px * n，n為正整數(shù)。

特殊：最小支持4px。

五、交互

交互我分為兩個方面：交互方式和交互狀態(tài)。

1. 交互方式

交互方式指的是對某一個操作所進(jìn)行的具體行為，比如刷新方式有下拉、上滑、按壓點擊等方式，這就是所謂的交互方式。交互方式有很多種，沒有最優(yōu)，只有最適合。

交互方式要保持產(chǎn)品的統(tǒng)一性，同類別的交互不可有不同的操作感受。同時交互方式要符合大眾的認(rèn)知習(xí)慣，可創(chuàng)新但不可違背潛意識。

隨著時代的發(fā)展，交互方式也在不斷的更新。比如最開始的手機(jī)是按鍵式的，隨著大眾對屏幕大小的需求不斷提升，到了現(xiàn)在的全面屏手機(jī)，如果這個時候你再去做當(dāng)年火爆的按鍵手機(jī)，那你就只能跟市場說拜拜。

總結(jié)交互方式的幾個關(guān)鍵點：創(chuàng)新、統(tǒng)一、緊跟趨勢。

2. 交互狀態(tài)

一個完整的產(chǎn)品生態(tài)是不會遺漏每一個交互狀態(tài)的。

同樣是做售票的軟件，為什么高鐵管家就比 12306 做的好呢？是因為高鐵管家把很多交互狀態(tài)友好地做了展現(xiàn)反饋，而不是冰冷的數(shù)據(jù)吞吐。

同類產(chǎn)品中，每個都有自己獨(dú)特的交互狀態(tài)，可能你一直用某個軟件的原因只是有個功能的交互狀態(tài)打動了你，從此你就深深愛上了它。

現(xiàn)在工作中，我們都在講人效，拼命地去更新迭代，去研發(fā)新功能，開拓新產(chǎn)品，往往會忽略交互狀態(tài)這個點，因為很多時候付出收獲比是很低的，但是真正好的產(chǎn)品，這部分是不可或缺的。

交互真的太大了，單獨(dú)寫一篇文章都寫不完，這篇我只能拋磚引玉，勾起你的思維，如果有任何要探討的，歡迎來叨擾。

六、引導(dǎo)

引導(dǎo)分為 5 種：Newbie guide（新手引導(dǎo)）、Steps guide（步驟引導(dǎo)）、Help / Operation guide（幫助/操作引導(dǎo)）、New function guide（新功能引導(dǎo)）、Blank guide（空白頁引導(dǎo)）。

1. Newbie guide（新手引導(dǎo)）

新手引導(dǎo)是針對新用戶的，首次進(jìn)入產(chǎn)品的時候，我們要著重地把自己產(chǎn)品的亮點以及操作快速的介紹給新用戶，讓他用最短的時候上手我們的產(chǎn)品。

新手引導(dǎo)要言簡意賅，并且如果非必要的話，盡量給用戶一個可以直接關(guān)閉的按鈕，讓用戶有選擇權(quán)。我就非常討厭有一些產(chǎn)品的新手引導(dǎo)，必須走完全部流程后才能關(guān)閉，惡心得不行。

2. Steps guide（步驟引導(dǎo)）

步驟引導(dǎo)一般用在有固定操作步驟的場景下，指引用戶一步一步地完成想要的結(jié)果。常規(guī)的步驟引導(dǎo)建議在 3~5 步之間為合理。

3. Help/Operation guide（幫助/操作引導(dǎo)）

幫助/操作引導(dǎo)的展現(xiàn)方式是比較豐富多彩的，可以是提示語、輔助性文本、tooltips 等等，它的作用就是輔助用戶去了解并且知道如何操作這個功能。

這個也是在產(chǎn)品中使用頻率最高的，運(yùn)用好它，可以讓你的產(chǎn)品事半功倍。

4. New function guide（新功能引導(dǎo)）

它就是常用在新功能上線后，用戶第一次登陸相關(guān)頁面后做的一些引導(dǎo)，目的是為了告訴用戶我們做了新東西，你快來試試吧。

5. Blank guide（空白頁引導(dǎo)）

空白頁引導(dǎo)一般用在在缺省頁，對用戶進(jìn)行一些操作指引，讓無信息的頁面變得更有價值。

比如百度在一些缺省頁上就放了一些關(guān)于失蹤兒童的信息，就因為做了這個引導(dǎo)，幫助了千萬個家庭找到了失散的孩子。

七、組件

組件是設(shè)計系統(tǒng)里面最為龐大的東西。組件可以分為了 5 類：

1. Navigation（導(dǎo)航）；
2. Data Entry（數(shù)據(jù)錄入）；
3. Data Display（數(shù)據(jù)顯示）；
4. Feedback（反饋）；
5. Other（其它）。

基本上這幾類已經(jīng)覆蓋了多數(shù)的組件，下面我把我自己整理的這幾類分別都包含哪些組件、以及組件的簡單介紹給列出來，快來保存吧。

1. Navigation（導(dǎo)航）

• Affix（固釘）：將頁面元素釘在可視范圍。
• Breadcrumb（面包屑）：顯示當(dāng)前頁面在系統(tǒng)層級結(jié)構(gòu)中的位置，并能向上返回。
• Menu（導(dǎo)航菜單）：為頁面和功能提供導(dǎo)航的菜單列表。
• Pagination（分頁）：采用分頁的形式分隔長列表，每次只加載一個頁面。
• Steps（步驟條）：引導(dǎo)用戶按照流程完成任務(wù)的導(dǎo)航條。

2. Data Entry（數(shù)據(jù)錄入）

• Checkbox（多選框）：可選擇多個。
• Radio（單選框）：只可選擇一個。
• Switch（開關(guān)）：開關(guān)選擇器。
• Form（表單）：具有數(shù)據(jù)收集、校驗和提交功能的表單，包含復(fù)選框、單選框、輸入框、下拉選擇框等元素。
• Input（輸入框）：通過鼠標(biāo)或鍵盤輸入內(nèi)容，是最基礎(chǔ)的表單域的包裝。
• Select（選擇器）：下拉選擇器。
• Skeleton（加載占位圖）：在需要等待加載內(nèi)容的位置提供一個占位圖。
• Time selectors and sliders（日期時間選擇過濾器）：當(dāng)用戶需要輸入一個時間或日期，可以點擊標(biāo)準(zhǔn)輸入框，彈出時間面板進(jìn)行選擇。
• Transfer（穿梭框）：雙欄穿梭選擇框。
• Upload（上傳）：文件選擇上傳和拖拽上傳控件。

3. Data Display（數(shù)據(jù)顯示）

• Badge（微標(biāo)）：圖標(biāo)右上角的圓形徽標(biāo)數(shù)字。
• Card（卡片）：通用卡片容器。
• Collapse（折疊面板）：可以折疊/展開的內(nèi)容區(qū)域。
• Popover（氣泡卡片）：點擊/鼠標(biāo)移入元素，彈出氣泡式的卡片浮層（可操作）。
• Tabs（標(biāo)簽頁）：選項卡切換組件。
• Table（表格）：展示行列數(shù)據(jù)。
• Tag（標(biāo)簽）：進(jìn)行標(biāo)記和分類的小標(biāo)簽。
• Timeline（時間軸）：垂直展示的時間流信息。
• Tooltip（文字提示）：簡單的文字提示氣泡框。
• Tree（樹形控件）：文件夾、組織架構(gòu)、生物分類、國家地區(qū)等等，世間萬物的大多數(shù)結(jié)構(gòu)都是樹形結(jié)構(gòu)。使用樹控件可以完整展現(xiàn)其中的層級關(guān)系，并具有展開收起選擇等交互功能。

4. Feedback（反饋）

• Alert（警告提示）：警告提示，展現(xiàn)需要關(guān)注的信息。
• Notification（通知提示框）：全局展示通知提醒信息。
• Drawer（抽屜）：抽屜從父窗體邊緣滑入，覆蓋住部分父窗體內(nèi)容。用戶在抽屜內(nèi)操作時不必離開當(dāng)前任務(wù)，操作完成后，可以平滑地回到到原任務(wù)。
• Modal（對話框）：模態(tài)對話框和非模態(tài)對話框。
• Progress（進(jìn)度）：展示操作的當(dāng)前進(jìn)度。
• Spin（加載）：用于頁面和區(qū)塊的加載中狀態(tài)。

5. Other（其它）

• Button（按鈕）：按鈕用于開始一個即時操作。
• chart（圖表）：圖標(biāo)數(shù)據(jù)顯示。
• Copyright（版權(quán)）：版權(quán)信息。
• Divider（分割線）：區(qū)隔內(nèi)容的分割線。
• logo（標(biāo)志）：logo 的使用。
• LocaleProvider（國際化）：為組件內(nèi)建文案提供統(tǒng)一的國際化支持。
• Text link（文字鏈）：點擊有鏈接跳轉(zhuǎn)的文字。
• Scrollbar（滾動條）：在特定界面區(qū)域內(nèi)進(jìn)行內(nèi)容的更多展示。

以上組件可根據(jù)自己的產(chǎn)品進(jìn)行增刪，把組件規(guī)范設(shè)計完成后，整個設(shè)計規(guī)范就完成了 90% 以上，可以算一個比較完整的設(shè)計規(guī)范了。

八、總結(jié)

每一個設(shè)計規(guī)范都是有靈魂的，規(guī)范是為了更好地做設(shè)計，而不是限制設(shè)計師雙手的枷鎖。

設(shè)計規(guī)范也不是一成不變的，它在落地使用的時候多少都會有問題，需要慢慢地去反復(fù)檢驗規(guī)范的合理性，發(fā)現(xiàn)不合理的及時更正。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

文章來源：人人都是產(chǎn)品經(jīng)理   作者：友設(shè)青年

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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