開篇說：
上一篇，我寫過一篇綜合類的設計規范和適配。
這一次我想重點寫一下：網頁PC端產品設計規范和組的設計拆解，對項目的設計效率提升，有一定價值和意義。
分析項目設計中的組件，設計元素，設計規范與設計稿到開發的最后，盡可能保證產品設計還原的一致性。
思考項目設計的實際場景，團隊來調整優化產品設計整體方案和設計細節、優化產品交互和設計的一個過程。
在這個團隊協作的過程中，團隊包括產品經理、體驗設計師及開發程序員等測試人員，都要積極的參與討論，多方並行參與到最后形成一套可以落地執行，滿足用戶體驗設計和產品設計的規范和組件化設計。
一. 接下來具體思考，作為B端產品設計，為什么需要建立設計規范？
1、保證設計的一致性
對內部：多個設計師合作，依然能保證設計風格的統一，提高設計的效率。
對用戶：提高用戶體驗，提高操作效率，加深對產品的記憶。
2、提高開發效率和還原度
與前端有效溝通的工具，提高設計的還原度，降低對接成本。
開發可以建立公共組件庫，極大的提高了開發效率。
按照設計規范建立他們自己的控件庫，提高復用率。在設計規范的指導下，開發部門在搭建全局共用控件時，產品設計規則就會更加清晰明了，如：產品設計中的按鈕、間距、字體大小、顏色、列表等元素的設計明確。
3、方便產品迭代，輔助設計和開發更好的完成設計的協作
隨着產品設計的業務變化，發現一些問題或者需要優化用戶體驗的時候，針對單個控件進行調整，就可以影響全局，十分便捷，同時大家遵循設計規范，輔助設計師高效的理解業務，方便了開發查看文檔，大家可以更好的進行團隊協作。
B端產品，為什么需要建立設計規范的總結，如下圖所示。
二. 如何做好 B 端產品設計規范 ？
對於項目設計評審前，建議產品設計師，先理解功能邏輯和產品設計思維，構思產品設計解決業務的方案。在項目還沒開始之前，設計師盡量參與到前期的產品調研和競品分析等頭腦風暴中。換位思考，角色扮演的方式，與我們的上游產品經理溝通，公司產品服務的用戶人群是誰、年齡的大致范圍和我們的產品設計，解決了用戶的具體問題是什么等思考點。
做設計規范要遵循一定的設計規則，具體如下：
對於落地實現，我們需要清楚開發適配的分辨率的尺寸，對於后台系統的分辨率，一般基於1440x900來做設計尺寸，然后做其他尺寸的屏幕適配。如下圖所示。
我們了解公司項目背景后，我們就開始定位產品的設計風格，根據產品原型出幾張符合產品風格的設計稿，
主要包括項目的主界面的設計風格，包括界面設計的顏色、按鈕、表格、表單、彈框等元素樣式的設計。
1 確定產品設計的優先級
2 確定設計規范的書寫
3 逐步對單個規范進行整理與書寫，原則上一條說明附加一個界面示例
下圖是具體的設計規范和設計規則的思考：如下圖所示。
接下來先看網頁端通用的設計規則：如下圖所示。
顏色（主色調的確立）
主色調的選擇，根據用戶群、使用場景及產品定位來思考。對后台設計的系統來說，系統可做皮膚功能的擴展，給用戶一個基礎色，然后做配色好的皮膚，讓用戶自由選擇。客戶都想要根據自己品牌色來做自己的設計系統，擁有多套可選擇的方案，比如：百度網盤皮膚的多套方案設計。
建議設計時，整體色彩不宜超過 3 種，並遵循其對比原則，突出色彩的層次感。整套界面的色彩盡量少、思考不同用途的顏色意義。如下圖所示。
中性色包含了黑、白、灰。在螞蟻中后台的網頁設計中被大量使用到，正確的使用中性色能夠讓界面信息具備良好的主次關系，提升用戶好的閱讀體驗。下方中性色板一共包含了從白到黑的 8 個顏色。如下圖所示。
顏色代碼標准
在 CSS 中，所有顏色都以 16 進制色值來進行書寫，如:#a0a0a0
這里以時間軸為例，思考色彩的含義：如下圖所示。
-綠色表示已完成、成功狀態；
-紅色表示警告或錯誤狀態；
-藍色表示當前進行中或其他默認狀態；
-灰色表示未完成或失效狀態；
標准字的選擇，如下圖所示。
后台系統在字體選擇，中文：微軟雅黑；英文：Arial即可。
標題類一律用Medium，以突出層級關系，讓信息更清晰。
原因：字重 Medium 兼容性更強，在用微軟雅黑這種字體時也能較好的顯示正文。
當需要強調的時候，建議使用 Medium 和顏色等設計處理；
另外考慮到數字和西文字體本身面積較小，建議使用 Semibold，使得中西文混排時更加舒適美觀。
字體使用原則
字體以不超過 2 種字體為准，特殊情況除外。
字體大小號的選擇以14px、16px、18px 等偶數字體大小為准。
中文采用標准字體:“微軟雅黑”、“宋體”，英文采用“Arial”，不能使用特殊字體(如 隸書、草書等，特殊情況廣告圖可用圖片替代)，來保證用戶的閱讀體驗。
控件里的文字，盡量使用大小統一的字體屬性。
“微軟雅黑”為主，“宋體”為輔的使用原則，用加粗的方式表達加強突出效果。
菜單標題
菜單標題字體大小:最小取 16px，最大取 20px。
正文標題
正文標題字體大小:最小取 24px，最大取 32px。
正文的字體
一般情況下，正文字體大小以 14px 為准，特殊情況下可以加粗或取 16px 大小的字體。
所有字體樣式顏色組合需要盡量通過 3:1 的 WCAG AA 標准。
圖標的思考：如下圖所示。
圖標現在是制作完成后，上傳到阿里巴巴的字體圖標庫中。前端調用起來更方便，調整圖標的大小和顏色就好。
圖標尺寸的思考：
在制作圖標時，尺寸以偶數尺寸為准。
為保證圖標的顯示效果，最小尺寸為 16px。
為保證 Web 頁面的整體效果，圖標的最大使用以不超過 48px 為准。
滾動圖片的動畫則使用多張 png、jpg格式圖片即可。
圖片文件大小的控制(單位 KB)：
為保證圖片的瀏覽速度，圖片大小以保證圖片質量的前提下越小越好。
圖片大小上限以 100kb 為准，超出 100kb 的，可考慮分成多張圖片顯示。
圖片分辨率：
圖片分辨率：統一為 72 像素。
以居中或居左對齊為准，同一內容區域內的圖片要做到大小統一，對齊方式統一。
頁面布局的框架設計：
我們在設計過程中，需要考慮我們基於什么樣的尺寸進行基礎設計。划分哪些區域需要固定尺寸、哪些需要做適配等。據統計，使用中系統的用戶的主流分辨率主要為 1920、1440 和 1366。
我們一般基於1440設計。
比如：zan design的布局是使用統一的元素和間距來保持各個平台的體驗的一致性。
統一屏幕尺寸的間距和跨平台的設計模式，給用戶帶來更好的體驗感。
設計思考，有如下幾點：
1.保證畫布尺寸的一致性原則。
2.統一的網格單位。
3.統一的柵格系統。
4.視覺元素的統一和對齊等。
目前顯示器分辨率主要有：
16:9 的有：1920×1080 、1600×900 、1366×768
16:10 的有：1920×1200 、1680×1050、 1440×900
一個完整的web頁面必須由以下三部分構成:
頭部區域header 、主體區域main、底部區域footer。如下圖所示。
邊距
為避免頁面元素緊貼邊沿的情況發生，WEB 頁面和其中的表格，應設定邊距，最小邊距值為 “3px”。如下圖所示。
按鈕
按鈕是交互設計中必備的元素，它在用戶和系統的交互中承擔着非常重要的作用。
后台中常見的按鈕類型分為線性按鈕、文字按鈕、圖標按鈕等。如下圖所示。
表單
常見表單是由多個列表項構成的。而每一個列表項都是由最基本的標簽和輸入框組成，常規的表單包括單選、多選、下拉選、輸入框、時間選擇、開關選擇等控件。
左對齊是比較常見的對齊設計，比較符合pc端常規顯示的場景。如下圖所示。
頂部標簽是標簽在控件的上方，標簽可以和控件左對齊，對於橫向空間不足的情況是一種很好的方案。
豎列標簽的使用場景思考：
- 當⻚面的一級功能較多，且存在擴展的需求時，可考慮使⽤豎列樣式；
- 當⻚面的層級較多，為了避免縱向的tab過多，可考慮使⽤豎列樣式作為第一級tab；如下圖所示。
每個標簽都有其優缺點，根據自己的產品選擇一種最適合自己產品的方式，規范中確定標簽的對齊方式，每個控件的寬度、高度。
表格的設計思考：
表格文字和數據，以左對齊為准。
表格內的內容在左對齊時，盡量與左邊表格邊距保持至少 10px 的間距。
表格在后台系統設計中大約占40%左右的比重。
表格的設計規范的設計思考點如下：
操作列按鈕：每個按鈕字數不超過6個字。
列數太多：默認展示范圍：3-8列，若出現更多，可固定重要列，剩余列滾動條展示交互設計。
列表的寬度：寬度自適應，但根據字段的重要性顯示，重要字段優先完整顯示。
列標題：表頭列標題最多輸入 8 個字符。
滾動條：表格內容超過一屏需要顯示豎向滾動條時，需要固定表頭。只需滾動表格內容就好。如下圖所示。
空數據：表格某部分無數據時用 “-” 來填充顯示,對於數據為零的單元格，填上 0 即可。
- 標題欄：標題欄欄高為56PX
- 內容欄：准欄高為56PX，大欄高為80px，內容區和欄水平居中對齊
- 垂直對齊方式：
右對齊：金額、最右側操作列。左對齊：除金額、最右側操作列外其他的表格數據；如下圖所示。
-水平對齊方式，如下圖所示。
當表格所的有欄高小於80px時，內容水平居中對齊；
當表格欄高大於 80px（大欄）時，所有內容都為頂對齊；
- 自適應規則：-表格中欄內容組件是利用占比的方式實現，可以根據欄目字段的長短給予欄目所占的百分比，完成表格占比后，對於實現效果不理想的，可以根據具體字段做微調處理。
表頭的文案，可遵循信息降噪的原則思考，如下圖所示。
進度條的設計思考，如下圖所示。
- 加載中進度條，存在加載中、成功、失敗三種狀態，進度條長度支持自定義。如下圖所示。
彈框，如下圖所示。
彈框主要分為兩個大類模態彈框和非模態彈框，他們最大的區別就是是否強制用戶交互。
- 常規狀態通常出現在頁面的上方。
- 有普通信息、成功信息、失敗信息、警示信息四種icon。
缺省狀態，如下圖所示。
缺省頁面是當頁面沒有數據、用戶沒有建立資料或網絡連接不通暢的情況下所展現的頁面。
為了緩解用戶面對這類情況產生焦慮情緒，設計師可以用一些插畫和文字的結合來引導用戶進行下一步的操作。
標准命名如下：
頭:header 內容:content 尾:footer
導航:nav 側欄:sidebar 欄目:column 登錄條:loginbar 標志:logo 廣告:banner 頁面主體:main
熱點:hot 新聞:news 下載:download 子導航:subnav 菜單:menu 子菜單:submenu
搜索:search 頁腳:footer 內容:content 注冊:regsiter
功能命名：
標志:logo 廣告:banner 登陸:login 登錄條:loginbar 注冊:regsiter 搜索:search 功能區:shop 標題:title 加入:joinus 狀態:status 按鈕:btn 滾動:scroll 標簽頁:tab 文章列表:list 提示信息:msg
一律用小寫
盡量用英文，如需要用到拼音方式的需要完整的拼音方式書寫
關於通用的柵格布局的思考如下：
三.關於數據可視化的設計展示思路如下：
數據可視化的四條核心原則：准確、清晰、有效、美觀，這四條原則按重要等級先后排序，相輔相成且呈遞進關系。
准確，如下圖所示。
可視化設計表達時，精准如實反應數據的特征信息。例：某基金收益率趨勢圖，合理的值域區間可以反映真實的數據波動趨勢。
清晰，如下圖所示。
清晰包括兩個層面，結構清晰與內容清晰。
結構清晰：
數據可視化呈現的是一幅作品，它是制作者分析思路的呈現，其布局決定閱讀者的瀏覽順序。清晰的平面布局以及清晰的數據縱深路徑能很好的幫助閱讀者獲取信息。
下圖展示的是：一個經典的設計布局，上方是搜索功能區，右側是篩選功能區，畫布區是地圖的路線等展示。
內容清晰，如下圖所示。
不讓用戶帶着疑惑看圖是我們始終不變的追求。當圖上有數據日期、數據指標需要說明時，應當在恰當的時間、
合適的位置給予說明，以幫助閱讀者更好地理解數據。
有效，如下圖所示。
信息傳達有重點，克制不冗余，避免信息過載，用最適量的數據-油墨比（Data-ink Ratio）表達對用戶最有用的信息。
美觀是一種克制，合理的利用視覺元素進行去做設計，運用格式塔原理對數據進行分組，既能幫助用戶更有效率的獲取信息，也能在一定程度上建立一種秩序的美感、規律的美感。如下圖所示。
一定克制的美觀的原型圖設計，如下圖所示：
數據可視化的網站推薦如下：
Echarts
數據可視化設計，百度的產品。常應用於軟件產品開發或網頁的統計圖表模塊。可在Web端高度定制可視化圖表，圖表種類多，動態可視化設計效果很棒。
AntV
螞蟻金服出品的一套數據可視化語言，antv帶有一系列的數據處理API，簡單數據的數據歸類，分析的能力，被很多大公司用作自己BI平台的底層工具。
阿里DataV
天貓雙十一大屏就用DataV做的，是阿里雲的拖拽式可視化工具，主要用於業務數據與地理信息融合的大數據可視化，像一些展覽中心，企業管控中心使用。
不需要編程，通過簡單的拖拽配置就能生成可視化大屏。
總結：
我們團隊內的設計師整理好PC端的后台和網頁設計規范，對團隊內開發項目落地實現很重要。
我們需要和前端開發同事進行設計規范的溝通，讓前端開發同事清楚每一塊內容的設計規范。
前端開發團隊也會分好幾個人一起做項目，同時一個大的產品設計，都會分成多個小模塊、按照時間、優先級來逐步開發設計的項目。
所以我們在項目開發的前期，盡量要做好設計的溝通和協調工作，我們就會提高工作的效率和保證公司項目的產出質量和產品設計的一致性，達到提升用戶體驗設計感的目標。
參考文獻如下：
1、ZAN-DESIGN 的有贊網站
2 《CCtalk B端產品設計課》by 美芳老師
3、ANT-DESIGN 螞蟻金服等網站
4、阿里系的數據可視化的設計網站
最后分享一個小故事，與大家共勉 ：
木桶定律是指一只水桶能裝多少水取決於它最短的那塊木板。作為一個設計團隊，需要的也是設計師之間的配合去完成一個個優質的項目。所以設計師在面試或者工作中，一定要把自己的設計優勢展示給面試官，這個優勢可以是插畫或者動效或者交互設計規范，來完善團隊設計中的那塊短板，加上用心的做事，完善團隊設計的最優質量。所以一個好的設計師，往往都有自己特有的優勢標簽，在一個領域內樹立的優勢項，來幫助團隊達到合作共贏的設計效果。
