---
# System prepended metadata

title: 10/3設計規範小聚（30min）與NCKU++討論 （50min）

---

# 10/3設計規範小聚（30min）與NCKU++討論 （50min）

Date: October 3, 2023
NCKU++進度: 共識凝聚：一起來看看NCKU++的主頁哪裡需要改善吧！使用Miro貼貼


主題: 設計規範小聚（30min）與NCKU++討論 （50min）
事前閱讀: 觀看第三週的https://www.coursera.org/learn/high-fidelity-designs-prototype/home/week/3or逐字稿
回家ㄉ小成果: https://medium.com/3pm-lab/internal-usability-testing-for-beginners-1301994c35c2
指派一個任務給兩到三個使用者，記錄他們的基本資訊、使用產品時的行為、想法與感受。
製作一到兩個人物誌。
延伸閱讀: https://uiclub.tw/2021/09/03/how-to-write-a-uidesign-guideline/comment-page-1/
https://tiponet.tipo.gov.tw/TIPO_UIUX/
概要: 初步了解design system存在的意義、用途與好處。並對Material Design有初步的了解。認識Design system在Figma內的應用。
簡單分享上一次回家作業的心得與成果。

**摘要**

[Overview](../%E6%8E%A8%E8%96%A6%E6%96%87%E7%AB%A0%E5%88%97%E8%A1%A8%20c7e1cf4e03044e6b904f278096894fd9/10%20Best%20Design%20Systems%20and%20How%20to%20Learn%20(and%20Steal%2032a915460293434a897e6efb047675a5.md)

**benefits of Design guidelines**

1. design systems create consistency for designers and users
2. help reinforce a company's brand identity
3. **scalable**  a system that's able to maintain performance levels when workload increases
4. save time and money by increasing efficiency for individuals and teams

**實用連結**

icon: [https://fonts.google.com/icons](https://fonts.google.com/icons)

fonts: [https://fonts.google.com/](https://fonts.google.com/)

design kits (m2): [https://www.figma.com/community/file/778763161265841481/material-2-design-kit](https://www.figma.com/community/file/778763161265841481/material-2-design-kit)
design kits (m3): [https://www.figma.com/community/file/1035203688168086460/material-3-design-kit](https://www.figma.com/community/file/1035203688168086460/material-3-design-kit)

字級設定工具：[https://m2.material.io/design/typography/the-type-system.html#type-scale](https://m2.material.io/design/typography/the-type-system.html#type-scale)

material theme builder: [https://m3.material.io/theme-builder#/custom](https://m3.material.io/theme-builder#/custom)

**一些名詞**

- [4dp原則](https://m3.material.io/foundations/layout/understanding-layout/spacing)
    
    [The 4px baseline grid — the present](../%E6%8E%A8%E8%96%A6%E6%96%87%E7%AB%A0%E5%88%97%E8%A1%A8%20c7e1cf4e03044e6b904f278096894fd9/The%204px%20baseline%20grid%20%E2%80%94%20the%20present%20498b327671b941b59847184f28db5a04.md)
    
    ![截圖 2023-10-07 下午1.25.47.png](https://hackmd.io/_uploads/HkXnvjAgp.png
)
    
- Sticker sheets
    
    ![截圖 2023-10-07 下午1.38.26.png](https://hackmd.io/_uploads/r1VcviAgT.png)

    

**documentation**

[https://www.youtube.com/watch?v=Yp_qfB1FA0Y&list=PLXDU_eVOJTx6ZQswH9nVKVMCsK83OzhoV&index=6](https://www.youtube.com/watch?v=Yp_qfB1FA0Y&list=PLXDU_eVOJTx6ZQswH9nVKVMCsK83OzhoV&index=6)

**大家的專案**

維芹：單車節官網

魚魚：某個活動頁面 後端 ＱＲＡＣＯＮ

舒舒：成大線上電子書

名名：美食地圖

關關：NCKU HUB

Lili：誠品線上

**To do**

- [ ]  找NCKU ++設計風格 [https://pin.it/29QEm3I](https://pin.it/29QEm3I)
- [ ]  [分享設計元件](/O7YFp7K7RfWpwiClodJXjg)