本文轉(zhuǎn)載自：https://www.uisdc.com/business-product-design?

感謝作者 :Arche阿北

轉(zhuǎn)載，僅自行查閱使用犁钟。

后臺產(chǎn)品設計規(guī)范

以下數(shù)值為參考醋粟，請結(jié)合特定產(chǎn)品靈活運用育苟。

1. 頁面布局

統(tǒng)一尺寸

據(jù)統(tǒng)計漱竖，目前 PC 端用戶屏幕分辨率占比排名前三的是 1920*1080讼积、1366*768、1440*900猎醇，以 1440 來設計的話沦疾，向上適配或者向下適配誤差會比較小。

適配方案：面向多個客戶家凯，后臺產(chǎn)品設計功能型頁面的尺寸統(tǒng)一為 1440*900，按照柵格系統(tǒng)原則向上或向下適配偎快。展示型頁面以 1440*900 為主丐怯，同時設計出極端情況（寬度為 1280 以及寬度為 1920）的效果圖荡短，力求實現(xiàn)前端實現(xiàn)效果和高保真設計圖誤差最小烫映。面向公司內(nèi)部的后臺系統(tǒng)，由于各個職工電腦屏幕是統(tǒng)一采購、統(tǒng)一尺寸，所以開發(fā)適配的分辨率可以統(tǒng)一尺寸進行設計弯予，這個尺寸根據(jù)公司內(nèi)部采購屏幕的尺寸和分辨率選擇即可（提前和前端溝通好）。

頁面框架

頁面框架主要分為左右欄布局和上下欄布局慌植，還有其他的布局。左右欄布局包括頂部欄允华、左側(cè)菜單欄、主體內(nèi)容三大區(qū)域蜜宪，其中頂部菜單欄、左側(cè)菜單欄為固定結(jié)構(gòu)，右側(cè)主體內(nèi)容根據(jù)分辨率進行動態(tài)縮放歇僧；上下欄布局包括頂部菜單欄和主體內(nèi)容兩大區(qū)域，其中頂部菜單欄為固定結(jié)構(gòu)鄙陡，主體內(nèi)容進行動態(tài)縮放且需定義主體內(nèi)容左右兩邊空白區(qū)域最小值毫捣；左右欄布局時蹲诀，左側(cè)菜單可收縮展開，收縮狀態(tài)下固定寬度。

柵格布局

柵格系統(tǒng)的使用是為了解決自適應和響應式問題耗跛，從而更好地進行產(chǎn)品設計和產(chǎn)品開發(fā)。響應式柵格采用 24 列柵格系統(tǒng)實現(xiàn)趾访，以滿足 2态秧，3，4扼鞋，5申鱼，6 分比布局等多種情況珊擂。固定寬度 Column曲横，將間隔 Gutter 進行動態(tài)縮放鸳玩。

需要柵格化處理的內(nèi)容的總寬度=23列（1列=1寬度Column+1間隔Gutter）+1寬度Column=24寬度Column+23間隔Gutter椎椰。

谷歌規(guī)定模塊和結(jié)構(gòu)之間要以 8px 為基準用含，布局間相對間距可采用 8px 以及 8 的倍數(shù)酌予，但一些小組件（按鈕布朦、間隔煞烫、輸入框）可以以 4 為基準竿痰。柵格布局是為了輔助設計脆粥，靈活運用，不要被它所局限影涉。

尺寸設定

一般在整體區(qū)域左上角放置產(chǎn)品 LOGO 及產(chǎn)品名稱变隔，大部分系統(tǒng)頂部欄高度 48+8n，側(cè)邊欄寬度? 200+8n蟹倾。我常用的是頂部欄高度 56px匣缘，側(cè)邊欄寬度 200px猖闪，側(cè)邊欄收縮狀態(tài)寬度 56px，右側(cè)的側(cè)浮窗寬度 400px肌厨。

相對間隔

定義主體內(nèi)容的上下左右邊距培慌，定義主體區(qū)域內(nèi)各模塊的邊距及安全寬度，超出內(nèi)容區(qū)域的部分采用區(qū)域內(nèi)滾動或整屏滾動柑爸，視情況固定導航欄吵护。

2. 標準色

顏色分為品牌色、輔助色表鳍、中性色馅而。根據(jù)不同產(chǎn)品的不同需求，可能也會將統(tǒng)計圖譬圣、標簽等進行統(tǒng)一標準色設定瓮恭。

品牌色即產(chǎn)品主色，產(chǎn)品主色的設定直接影響產(chǎn)品氣質(zhì)和直觀感受厘熟，也是產(chǎn)品直接對外的形象屯蹦。品牌色要根據(jù)產(chǎn)品特性、用戶使用場景绳姨、產(chǎn)品定位等進行選取登澜，盡量做好色彩的延伸性，可支持換膚飘庄。品牌色的應用場景包括操作狀態(tài)帖渠、按鈕色、可操作圖標等竭宰。

輔助色用于提示其他場景，比如成功份招、失敗切揭、警告、無效等锁摔。

中性色常用于文本廓旬、背景、邊框谐腰、分割線等孕豹，需要考慮深色背景和淺色背景的差異，可以選擇同一色相控制透明度變化十气，用來表現(xiàn)不同的層級結(jié)構(gòu)励背。

其他色如統(tǒng)計圖、數(shù)據(jù)可視化砸西、多個標簽的不同配色方案根據(jù)項目情況單獨設定叶眉。

3. 標準字

后臺系統(tǒng)常用的字體：windows 系統(tǒng)址儒，中文 Microsoft YaHei，英文 Arial衅疙；Mac 字體莲趣，中文 PingFang SC，英文 Helvetica饱溢；除此之外可以選擇的字體還有 segoe UI喧伞、思源黑體、Hiragino Sans GB等绩郎。

后臺系統(tǒng)中常用字體大小為 12px潘鲫、13px、14px嗽上、16px次舌、18px、20px兽愤、24px彼念、30px。

行高設定浅萧，根據(jù)文字大小及使用場景設置行高逐沙，一般行高=文字大小+6px/8px。

4. 圖標

圖標是 UI 設計中重要組成部分洼畅，一般分為功能圖標和應用圖標吩案，以圖形的方式傳達概念，可以降低理解成本帝簇，使得界面更加協(xié)調(diào)美觀徘郭。在后臺產(chǎn)品中，圖標的功能則更偏向輔助性丧肴，輔助用戶對功能的認識残揉。

除了某些常用的圖標，有一些專業(yè)性的操作和詞匯則需要設計師進行繪制芋浮，現(xiàn)在比較高效方便的方法是在 iconfont 提供的圖標模板上用 AI 繪制抱环，畫板 1024*1024，提供圓形纸巷、正方形镇草、矩形形狀。圖標尺寸按照 8 的倍數(shù)進行延展瘤旨，繪制完成后生成 svg 格式文件梯啤，提交到阿里巴巴矢量圖標庫的項目組里，方便前端調(diào)用裆站，調(diào)整大小和顏色更為方便条辟，且能夠優(yōu)化系統(tǒng)內(nèi)存和性能黔夭。

5. 按鈕

按鈕是后臺產(chǎn)品進行交互設計是重要元素，提供給用戶進行點擊操作羽嫡，是視覺上最引人注目的控件本姥，具有一定的視覺受范性。常用按鈕可分為填充按鈕杭棵、線性按鈕婚惫、文字按鈕。

按鈕的交互狀態(tài)包括默認魂爪、懸停先舷、點擊和不可用。

按鈕根據(jù)需求分為不同尺寸滓侍，大中小三個級別用在不同的場景蒋川，一般按照 8 的倍數(shù)設定。如高度分別設定為 24撩笆、32捺球、40px。

規(guī)范整理時要規(guī)定不同類型按鈕的寬高夕冲、圓角及文字大小氮兵，同時還要將按鈕的不同狀態(tài)展現(xiàn)出來。

填充按鈕之間間距最小為 10px歹鱼。

6. 導航

導航的類型有很多種泣栈，常用的比如頂欄菜單、側(cè)欄菜單弥姻、折疊菜單南片、下拉菜單、面包屑庭敦、分頁铃绒、步驟條、時間軸螺捐、tab標簽頁、膠囊菜單矮燎、徽標數(shù)等定血。

各類導航中的字體大小可進行統(tǒng)一設定。

頂欄菜單多為一級菜單诞外，點擊切換澜沟，或作為下拉菜單的父級，將子級菜單合理分類峡谊。

側(cè)欄菜單為垂直導航菜單茫虽，可以內(nèi)嵌子菜單刊苍。

下拉菜單的觸發(fā)方式一般有鼠標懸停和鼠標點擊兩種。

步驟條引導用戶按照流程來完成任務濒析，一般步驟不得少于兩步正什。

分頁的高度設定為 24px、30px号杏、32px婴氮，根據(jù)應用場景適當增減內(nèi)容，比如設定每頁展示數(shù)據(jù)的條數(shù)盾致、跳轉(zhuǎn)至指定頁等主经。

面包屑用于說明層級結(jié)構(gòu)，使用戶明確當前所在位置庭惜，并且可以回到任一上級頁面罩驻。

徽標數(shù)用來通知用戶當前有未讀消息，一般出現(xiàn)在圖標的右上角或者跟在文字后面护赊。

7. 表單

表單多由一條或多條列表項組成惠遏，單一列表項的類型有字段輸入框、條件選擇器百揭。

字段輸入框的標題和輸入框分布方式包括左右爽哎、上下、無標題器一。左右分布是常見的對齊方式课锌，比較適合 PC 端的使用；上下分布增加了表單的整體高度祈秕，視情況選擇使用渺贤；無標題經(jīng)常應用在登錄注冊，雖然減少了面積请毛，但是增加了理解難度志鞍。

輸入框的交互狀態(tài)包括默認、輸入結(jié)果方仿、提示錯誤固棚、禁用、獲取焦點仙蚜。

輸入框的尺寸可按照8的倍數(shù)進行設定此洲，比如 24px、32px委粉，也可根據(jù)系統(tǒng)實際情況進行設定呜师，我常用的輸入框高度為 30px，寬度視情況而定贾节，無圓角汁汗。上下布局的多個輸入框上下間距為 20px衷畦，有錯誤提示時候豎向增加 10px 或橫向顯示在輸入框右側(cè)（預留出位置）。

表單中標題文字左對齊知牌，輸入框左對齊祈争，標題文字距離輸入框20px（多個長度不同的輸入框算最長的）；標題文字右對齊送爸，輸入框左對齊铛嘱，也是常用的方式。輸入框內(nèi)正文字體 14px袭厂，文字和左右兩邊邊框的邊距 10px墨吓。

選擇器包括單選、多選纹磺、時間選擇帖烘、開關(guān)切換、下拉選擇橄杨、滑塊選擇秘症、旋鈕等。單選框多為圓形式矫，復選框多為方形乡摹。

搜索框和選擇框的高度為 30px 或按照 8 的倍數(shù)自行設定，通常和輸入框保持一致采转。搜索框距離右側(cè)按鈕 4px聪廉，內(nèi)部文字 14px。

單選多選框尺寸 16*16px故慈，多個選項橫向排列間距 16px板熊，縱向排列間距 8px。

開關(guān)按鈕外框 40*20px察绷，內(nèi)部圓形 16*16px干签。

8. 表格

表格在后臺產(chǎn)品 UI 設計中占比非常大，用來展示數(shù)據(jù)拆撼、統(tǒng)一管理容劳、作為詳情入口，是最清晰闸度、高效的形式之一鸭蛙。在設計規(guī)范中需設定表頭高度、表格行高筋岛、表格列寬范圍，同時也包括表格中的按鈕樣式晒哄、標簽樣式睁宰。

表格主要分為五大區(qū)域：選擇搜索區(qū)肪获、操作區(qū)、表頭柒傻、正文孝赫、底欄。選擇搜索區(qū)放置篩選框和搜索框红符，為用戶提供按需搜索青柄，可以大大提高用戶效率；操作區(qū)指各種對表格內(nèi)容進行增刪改查预侯、批量處理致开、配置列的動作；表頭展示列標題萎馅，一般具有排序功能双戳；正文主要展示各種各樣的數(shù)據(jù)，要注意行高糜芳、對齊飒货、分割、信息層級等峭竣，要考慮是否提供行內(nèi)操作塘辅；底欄顯示分頁、總數(shù)統(tǒng)計等皆撩。

表格信息一般主要功能為增刪改查扣墩，查看和編輯是最基本的功能，表格信息支持篩選毅访、搜索沮榜、排序、分頁喻粹。對可批量操作的表格數(shù)據(jù)在第一列增加多選框蟆融。

行高

表格行高可設置為表格內(nèi)字體高度的 2~3 倍，主表格會間隔顯示不同顏色守呜，用于區(qū)分不同行數(shù)據(jù)型酥、加強視覺流引導，展開單行的內(nèi)置表格可采用純色查乒，選中行應有視覺上的反饋弥喉。表頭要和表格內(nèi)容有視覺上的區(qū)分。表格行高可采用 36玛迄、40由境、48、60 等。

行數(shù)

表格行數(shù)太多加載速度會降低虏杰，延長用戶等待時間讥蟆；行數(shù)太少會導致用戶不斷翻頁，降低使用效率纺阔。比較合適的默認表格行數(shù)是 20 或 50瘸彤，用戶可以根據(jù)自己需求選擇默認的行數(shù)。設定行數(shù)之后笛钝，如果每頁行數(shù)多于每屏行數(shù)质况，可在表格內(nèi)引入滾動條，這時可以固定表頭滾動內(nèi)容玻靡。

列寬

列寬根據(jù)內(nèi)容字段長短需要有不同且合理的默認值结榄，使得表格字段有良好的展示效果。列內(nèi)容的長度固定時啃奴，列寬應大于固定寬度（比如時間潭陪、MD5、SHA1）最蕾；列內(nèi)容不固定時依溯，能預判最大寬度的按照最大寬度設定列寬（比如IP地址、MAC地址瘟则、姓名）黎炉，不能預判最大寬度的設定列寬按照常用寬度，多于內(nèi)容省略以「…」展示醋拧，鼠標懸停出現(xiàn)完整內(nèi)容（比如詳情慷嗜、描述）。

列數(shù)

表格列不應過多丹壕，列數(shù)比較多的情況下應該合理進行合并庆械、隱藏、刪除或進行優(yōu)先級處理菌赖。常用的方法有引入配置列缭乘，用戶可自定義展示必需列以外的其他列；只展示重要信息琉用，下拉展開列查看完整信息堕绩；在表格中引入橫向滾動條，根據(jù)實際情況選擇是否要始終固定基本信息列（如第一列是文件名）和操作列（最后一列的操作）邑时。

對齊方式

表格內(nèi)的文本應按照文本類型不同進行統(tǒng)一規(guī)范奴紧，如金額類數(shù)值保留相同位數(shù)小數(shù)，SHA1 雖然是一串數(shù)字但是其實那并不是數(shù)據(jù)而是一串編碼晶丘，所以可以像文本一樣左對齊黍氮。根據(jù)文本內(nèi)容不同，對齊方式也應靈活調(diào)整，可采用文本左對齊沫浆、數(shù)據(jù)右對齊觉壶、金額小數(shù)點對齊的方式。數(shù)據(jù)前面有標簽的件缸，將標簽前置對齊。類似 IP 地址叔遂、MD5他炊、SHA1、域名這樣的信息已艰，也可以根據(jù)產(chǎn)品需要在文本前面增加「復制」圖標痊末，方便用戶調(diào)用。

詳情入口

表格內(nèi)部數(shù)據(jù)的詳情入口哩掺，將能點擊下鉆查看詳情的內(nèi)容以不同顏色表示凿叠，同時在表格行最后一列操作按鈕部分放置一個查看按鈕。

9. 反饋

包括彈框嚼吞、側(cè)滑框盒件、骨架屏、全局提示舱禽、警告提示炒刁、消息提醒、加載狀態(tài)等誊稚。分為模態(tài)框和非模態(tài)框翔始，區(qū)別是是否會打斷用戶工作流。

彈框又稱對話框里伯，是疊加在應用主窗口上的彈出式窗口城瞎，以對話的方式使用戶參與進來。

彈框

彈框出現(xiàn)時疾瓮，主題內(nèi)容增加一層遮罩 #000脖镀，透明度 50%，避免使用雙層彈框爷贫，可同時采用有關(guān)閉圖標的彈框和無關(guān)閉圖標的彈框认然，引導用戶對內(nèi)容進行正確操作。如果設定系統(tǒng)內(nèi)所有彈框均可以點擊彈框外區(qū)域關(guān)閉漫萄， 則需要為用戶新增或編輯內(nèi)容的彈框彈出二級確認的彈框卷员，或者再次進行交互梳理。

側(cè)滑框

側(cè)滑框又稱抽屜腾务，出現(xiàn)在右側(cè)毕骡，固定寬度 400px，高度覆蓋在主題內(nèi)容之上，點擊側(cè)滑框以外的區(qū)域則收起側(cè)滑框未巫。

骨架屏

為某些特定數(shù)據(jù)提供數(shù)據(jù)加載等待時的占位圖形組合窿撬。

全局提示

建議停留時間 3s，可根據(jù)文字字數(shù)調(diào)整停留時間叙凡，文字內(nèi)容限制在 30 以內(nèi)劈伴。

警告提示

用不同顏色和樣式展示需要關(guān)注的信息。

通知提醒

消息通知和警告信息用通知提醒框握爷，單個消息從頁面右側(cè)以抽屜的方式劃出跛璧，用戶可手動關(guān)閉，或停留 3s 后自動關(guān)閉新啼。

10. 缺省狀態(tài)

繪制不同類型的情感化插畫表示缺省狀態(tài)追城，如404、500燥撞、暫時沒有數(shù)據(jù)座柱、沒有新消息等。

頁面需要一個默認的底色物舒，錯誤文字使用 14px色洞，與情感化插畫間距 20px，與按鈕間距 30px茶鉴。

11. 數(shù)據(jù)可視化

數(shù)據(jù)可視化部分可能是后臺產(chǎn)品中對視覺設計要求較高的部分锋玲，使用情境為各類統(tǒng)計圖、大屏展示頁面等涵叮。

功能型頁面的數(shù)據(jù)可視化可以引入圖形化設計組件惭蹂，Echarts、G2割粮、d3等盾碗；展示型頁面的數(shù)據(jù)可視化則可以做得更有趣，比如立體的統(tǒng)計圖舀瓢、粒子地球效果廷雅、靈活有趣的網(wǎng)絡拓撲圖等。

考慮到數(shù)據(jù)可視化可能會需要深色淺色不同的背景京髓，在數(shù)據(jù)可視化統(tǒng)計圖的色彩搭配上要注意顏色的拓展性航缀。