# UI 設計稿指南
## 狀態

1. 空狀態 (什麼都沒有時)
2. 一個狀態 (單一內容時)
3. 極限狀態 (999+，或畫面可以顯示的最多)
4. 理想狀態 (發揮產品全力時)
5. 載入狀態
6. 成功狀態
7. 失敗/錯誤狀態

只要能被觸發的都該考慮以上狀態


### Ref

- [[翻譯] 如何修正壞 UI](https://zonble.medium.com/2f972da15d5b)
- [頁面的第 6 種狀態：極限狀態](https://blog.akanelee.me/posts/384307-sixth-state-of-the-page-maximum-state/)

---
## RWD

通常設計師會設計三至四種尺寸：

- 手機
- 平板（直式）
- 筆電
- 寬螢幕

作為一個實作者，應要與設計師討論的是兩個尺寸之間應如何延伸，
可能會是「頁面兩側留空」也可能是「Container 的部分隨寬度延伸」


CSS breakpoint 的設置，可參考 [此篇文章](https://www.freecodecamp.org/news/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862)

---

---

## 給新手的七個建議

1. 光線來自天空
2. 黑白優先
3. 增加空白空間
4. 學會在圖片上呈現文字
5. 做好強調和淡化
6. 只用好的字體
7. 善於借鑒優秀的作品


### Ref

  - [[https://www.inside.com.tw/article/4147|UX 設計師寫給 UI 新手的 7 個法則（上）]]
  - [[https://www.inside.com.tw/article/4158|UX 設計師寫給 UI 新手的 7 個法則（下）]]