在 UI 設(shè)計(jì)中，B 端系統(tǒng)的規(guī)范主要圍繞組件樣式和 UI 規(guī)范兩個(gè)方面展開(kāi)，以確保系統(tǒng)具有高可用性、易用性和良好用戶體驗(yàn)。

一、組件規(guī)范，包含但不限于按鈕、面包屑、導(dǎo)航菜單、分頁(yè)、下拉菜單、滑條、日期選擇框、樹(shù)、標(biāo)簽頁(yè)、輸入框、表單、上傳、氣泡卡片、表格、警告提示、彈窗/抽屜等。這些組件的設(shè)計(jì)需確保在不同場(chǎng)景下都能提供一致的交互體驗(yàn)，便于用戶操作。

二、UI 規(guī)范，主要涵蓋色彩、字體、布局和圖標(biāo)四個(gè)部分。色彩規(guī)范包括品牌色、輔助色和中性色，品牌色應(yīng)根據(jù)產(chǎn)品特性、用戶使用場(chǎng)景、產(chǎn)品定位等進(jìn)行選擇，確保色彩的延伸性；輔助色用于提示不同場(chǎng)景，如成功、失敗、警告、無(wú)效等；中性色則用于文本、背景、邊框、分割線等，需考慮深淺背景差異。字體選擇中文字體如蘋(píng)方體、思源黑體，英文字體如Helvetica Neue、sanf，并設(shè)定字號(hào)和行高規(guī)則。布局適應(yīng)主流分辨率（1920、1440、1366等），采用動(dòng)態(tài)適配布局，如左右結(jié)構(gòu)或上下結(jié)構(gòu)，并使用24柵格系統(tǒng)。圖標(biāo)設(shè)計(jì)以簡(jiǎn)潔為主，大小統(tǒng)一，便于識(shí)別。

色彩規(guī)范中，品牌色是產(chǎn)品形象的核心，應(yīng)具有良好的延伸性，以支持換膚功能，同時(shí)提供輔助色和中性色以豐富應(yīng)用場(chǎng)景。除了基本色彩外，還需準(zhǔn)備“其它色”以適應(yīng)特殊需求，如統(tǒng)計(jì)圖、數(shù)據(jù)可視化、多個(gè)標(biāo)簽的配色方案等。

字體規(guī)范中，中文字體推薦蘋(píng)方體、思源黑體，英文字體推薦Helvetica Neue、sanf。設(shè)定字號(hào)為14px、16px、18px、20px、24px、26px、28px、30px、36px等，并根據(jù)不同文字大小及使用場(chǎng)景設(shè)定行高，如行高=文字大小+8px 或者乘以1.5倍。

在布局規(guī)范中，B 端系統(tǒng)主要適應(yīng)主流分辨率（1920、1440、1366等），采用動(dòng)態(tài)適配布局，如左右結(jié)構(gòu)或上下結(jié)構(gòu)，并使用24柵格系統(tǒng)。左右結(jié)構(gòu)常用于導(dǎo)航欄固定寬度，頂部欄固定高度（有頂部欄的情況下），對(duì)右邊的內(nèi)容展示區(qū)域進(jìn)行動(dòng)態(tài)縮放。上下結(jié)構(gòu)則用于頂部欄固定，對(duì)下邊的內(nèi)容展示區(qū)域進(jìn)行動(dòng)態(tài)縮放，內(nèi)容區(qū)域左右兩邊固定有最小值。

圖標(biāo)設(shè)計(jì)應(yīng)簡(jiǎn)潔易懂，注重分類標(biāo)識(shí)和點(diǎn)綴效果，并確保圖標(biāo)在大小、描邊、顏色等方面視覺(jué)統(tǒng)一。推薦使用 iconfont.cn等在線圖標(biāo)庫(kù)與開(kāi)發(fā)團(tuán)隊(duì)協(xié)作，或進(jìn)行圖標(biāo)切圖下載。

以上規(guī)范旨在提供一個(gè)統(tǒng)一且高效的設(shè)計(jì)框架，確保 B 端系統(tǒng)在不同場(chǎng)景下都能提供一致的用戶體驗(yàn)。后續(xù)會(huì)持續(xù)整理組件庫(kù)規(guī)范，并上傳實(shí)際項(xiàng)目案例，歡迎持續(xù)關(guān)注和交流。如有疑問(wèn)，可通過(guò)私信進(jìn)行溝通。