# 10/22設計規範工作坊

Date: October 22, 2023
主題: 設計規範工作坊
概要: 邀請陳羿臻學姊和我們一起練習設計規範！

# 什麼是設計規範
## 設計規範的好處
* 視覺統一、操作模式統一
* 品牌識別
* 降低維護成本、快上手
* Material design 3
* M2
* 工程師也有自己的設計規範：統一前端框架、後端語言
* 舒服的時候，大家不一定感覺得到
## 設計規範要包含
字體、字級
分成中文字體、英文字體
透過觀摩他人的作品集、把她當成一份清單確認自己的設計規範哪裡漏掉
考慮到不同的裝置（筆電），會有不同的字體設計
每種裝置6-8組即可（如果太長、要檢查是否過於瑣碎）

Component
* 按鈕樣式、選單樣式
* 避免更改樣式的時間成本
* 確定圓角數值（放大縮小數值會變）
* 分為初始樣式、Hover、disabled、pressed
* icon也要做小小統一（填滿、框線？）
* primary secondary
* input 注意輸入的狀態
* icon要用一樣類型的
* 顏色
* 代表品牌主視覺、字體色、功能顏色
* 以星巴克為例
* 品牌色可以有一到三個 由色階做選擇
* 輔色 沒有特別規定 黑色、白色
* KISS原則
* 考慮 背景色、主要色、輔助色、警告色、成功色
* 注意紅色和綠色在UI設計中的意涵
* 灰色色階（字不一定是黑色的，看了會比較舒服）

小原則：數字不要出現小數點
段落和段落間 維持4/8px

https://typescale.com/
https://spectrum.adobe.com/page/color-wheel/
https://coolors.co/
https://materialui.co/htmlcolors/
https://color.adobe.com/zh/create/color-wheel
https://primevue.org/