設計規範
為什麼需要設計規範
從有意識地對設計語言進行定義的時候起，它就成為了某種可重複執行和重複使用的標準，人們也逐漸習慣於體系化的設計思維模式。當有一套標準、規範、科學合理的元件庫時，團隊成員不需要再為了元素權重爭論，無需再枯燥地做重複內容。互動設計師不需要再為了不同產品的同一個元素互動形式費盡心思，設計也不需要再為了不同產品設計各種下拉選單的尺寸和样式，設計語言的複用可以讓我們把節省出來的時間更多用於產品調查和用戶分析。
組件化是一種設計方向而不是約束，如果團隊希望遵循一致的特定設計方向和科學規範的互動視覺，那麼能夠被清晰定義、描述和重複使用的設計化模式是必需的。
只有在充分了解和熟悉規則之後，才能打破規則作出無窮無盡的變化。
佈局規範
使用24柵格設計法，規範產品佈局
文字規範
對文字的使用進行規範約束，確保生態體系設計一致性
投影規範
遵循物體色本身顏色，物體本身為黑白灰時投影為灰色，物體本身有顏色時，投影可帶顏色傾向性。投影的作用是區分版塊層次，因此投影理想狀態是「存在，但不會引人注意」。深色模式下投影應加重，屬於特例。
分割線規範
分隔線應考慮奇偶數和位置問題，例如PC端兩個文字之間的分隔線可設定為2px，即上下各1px。若設定為1px，可把分隔線放在內容內。分隔線的作用是區分版塊內內容，因此分隔線的理想狀態也是「存在，但不會引人注意」。
分隔線在內容區域內，此時為1px粗細：
需要對不同板塊和同板塊不同內容的分隔線做樣式區分。例如板塊之間的分隔線應和板塊中用來區分內容的分隔線樣式有所區別。
漸變規範
遵循光線從天上來的現實依據，參考漸變角度45度，漸變的淺色部分不應朝下(深色模式除外)，且應盡量避免某種顏色到白色的漸變（某種顏色到白色的漸變在視覺上容易顯得陳舊）。同一產品內全域漸層方向應盡量保持一致。
視覺平衡規範
同組元素（如icons、卡片等）應保持視覺平衡，同時確保切圖大小一致。
例：同樣尺寸下，長方形的視覺大小比圓形大，因此為了確保視覺平衡，矩形的物理尺寸要小於圓形的物理尺寸。
熱區規範
遵循設計價值中的自然原則，所有可點擊的圖標，均需有「懸停（hover）」狀態，並以範圍框表示熱區。
圖標使用規範
- 圖示應依使用場景區分樣式，且圖示風格差異不應過大。
- 同類型圖示應盡量保持一致的應用場景，盡可能接近的大小尺寸、完全一致的線條粗細、完全一致的圓角度數。
- 圖示必須是向量的。
- 圖示應像素對齊。
- 帶有邊框或外部形狀的圖標，圖標本身佔比不宜過大。
- 盡量避免繪製半像素圖示。
設計切圖規範
- 使用sketch/figma切割同組或同類型圖標，需要切出固定圖標範圍而不是單一圖標直接切圖。目的：既保持同組圖示視覺平衡，又保持同組圖示大小一致。 方法：圖示底部繪製一個無填充無描邊的矩形，編組，匯出。需為4的倍數。
- SVG格式圖示無法辨識描邊、漸層、投影。因此若需匯出SVG格式圖標，描邊需要擴展，圖標為純色，然後單獨給予開發色值和投影等效果參數。
- 所有元素像素對齊，盡量避免半像素出現。
命名規範
icons統一使用英文命名，畫板、狀態和互動說明統一使用中文命名方便查看。命名時若有xx面板或xx按鈕名稱時，建議在名稱上加等符號區分。 橫槓範例： ——（中文全角橫線）、_（底線）、—（中文半角橫線） _（英文輸入法底線）
畫板/Icons命名：頁面名稱_板塊名稱-icons名稱/狀態 命名範例：課程頁屬性面板_確定按鈕_懸停狀態 命名範例：home_tabbar_bg
元件使用規範
- 在產品的第一個版本完成後，建立元件庫，並持續迭代它
- 所有重複使用的元素都需要打組件，並將母組件歸類整理到同一頁。
- 對同一組件不同狀態（例：開關組件有開和關兩種狀態）需設為組件集。
- 任何頁面都不應出現組件顏色外的顏色
- 任何頁面都不應出現組件字號外的字號
交互說明規範
互動說明需要語意明確，合理使用標點符號區分句子，使閱讀者明確訊息和詞彙。
