設計規(guī)范：由設計原則倒淫、設計語言、組件庫構成镜硕，在設計原則的指導下使用設計語言和組件庫創(chuàng)造使用感一致的用戶界面
設計原則：整個設計規(guī)范需要遵循的全局規(guī)則返干，為設計提供方向指導。親密性矩欠、對比悠夯、對齊峰伙、統(tǒng)一、及時反饋瞳氓、簡化交互
設計語言：色彩、文字店诗、圖標音榜。。赠叼。。瞬场。
組件：基礎組件（按鈕涧郊、下拉。妆艘。。）和業(yè)務組件（商品模塊）
做設計語言和組件庫時遵循“少即是多”的原則幌陕，用盡可能少的樣式來實現設計目標，例如按鈕提供三種尺寸即可汽煮，在適應不同場景要求的同時保證體驗是一致性，同時搬卒，保持克制的設計規(guī)范能減少設計師的決策時間，提高設計效率契邀。
原子設計：是構成設計規(guī)范的核心指導理論
原子：構成界面的最小元素：文字失暴、線條微饥、圖標古戴、顏色
分子：原子按照一定規(guī)律組成的，如：下拉现恼、按鈕
組織：由原子和分子構成的模塊：卡片
模板：在界面中體現為原型圖，是頁面的基本形態(tài)
頁面：在模板的基礎上將占位符轉化為真實內容始锚，進行視覺優(yōu)化
B端設計是偏向于排版的設計
文字：字重喳逛、字號、顏色
色彩規(guī)范：在B端產品中润文，色彩不僅是為了展示品牌，更是為了傳達信息：反饋信息：綠色-成功曙砂、紅色-失斣ā乔夯；突出信息：通過色彩將內容分層級展示，提高用戶獲取信息的效率末荐；表明狀態(tài)：通過顏色區(qū)分事物所處的狀態(tài)
色彩組成：品牌色-在需要用顏色強調且沒有其他要求時，一般選用主色：tab選中狀態(tài)眶熬，圖表顏色块请；語義色=功能色：借助顏色心理幫助用戶快速獲取信息（綠色：成功、通過墩新，紅色：失敗、禁止绵疲、錯誤，橙色：警示）盔憨；中性色：文字、分割線婿奔、背景驯用、邊框
色彩規(guī)范的原則：理性的、可擴展的蝴乔、和諧的
陰影：分為：S（0，2片酝，4，0）突出組件懸停效果雕沿，表示可供性（看到某個事物就知道該如何使用它）M（0猴仑，3，6辽俗，0）給下拉列表和氣泡提示使用的；L（0榴捡，4朱浴，8，0）模態(tài)組件陰影：彈窗
圓角規(guī)范：圓角具有親和感翰蠢、辨識度梁沧，直角在自然界給人構成威脅板丽，圓角越大，親和感越高
設計規(guī)范：盒子模型猖辫、導航
導航分類：頂部導航：優(yōu)點-符合人眼瀏覽網頁的視覺動線砚殿，沉靜式體驗；缺點：擴展性差似炎，頂部的空間有限，無法承載太多的層級贩毕，菜單的字數被嚴格限制仆嗦。適用于廣度和深度較簡單，且后期不會增加更多功能的產品
側邊導航：側邊導航以樹狀方式展示谆甜，擴展性好，方便尋找规辱；但用戶在瀏覽內容時栽燕，視線會被側邊導航打斷，降低了瀏覽的沉靜感碍岔，適用于目前結構不復雜后期會迭代增加很多功能的產品
混合導航：擴展性最好付秕；但每個菜單項都需要點擊頂部和側邊導航侍郭，交互路徑長，操作效率低亮元；占用空間多；適用于結構復雜的龐大產品
水槽
間距：4 8 16 24奉瘤，在大模塊的縱向間距可以與水槽的大小一致
設計規(guī)范：文字 色彩 陰影 圓角 布局 導航 圖標 文案
原文：https://www.zcool.com.cn/article/ZMTIxODExMg==.html
