guide:ui-design
差異處
這裏顯示兩個版本的差異處。
| 兩邊的前次修訂版前次修改 下次修改 | 前次修改 | ||
| guide:ui-design [2022/05/17 14:59] – 移除 - 外部編輯 (Unknown date) 127.0.0.1 | guide:ui-design [2024/12/22 21:17] (目前版本) – 外部編輯 127.0.0.1 | ||
|---|---|---|---|
| 行 1: | 行 1: | ||
| + | # UI 設計稿指南 | ||
| + | ## 狀態 | ||
| + | 1. 空狀態 (什麼都沒有時) | ||
| + | 2. 一個狀態 (單一內容時) | ||
| + | 3. 極限狀態 (999+，或畫面可以顯示的最多) | ||
| + | 4. 理想狀態 (發揮產品全力時) | ||
| + | 5. 載入狀態 | ||
| + | 6. 成功狀態 | ||
| + | 7. 失敗/ | ||
| + | |||
| + | 只要能被觸發的都該考慮以上狀態 | ||
| + | |||
| + | |||
| + | ### Ref | ||
| + | |||
| + | - [[翻譯] 如何修正壞 UI](https:// | ||
| + | - [頁面的第 6 種狀態：極限狀態](https:// | ||
| + | |||
| + | --- | ||
| + | ## RWD | ||
| + | |||
| + | 通常設計師會設計三至四種尺寸： | ||
| + | |||
| + | - 手機 | ||
| + | - 平板（直式） | ||
| + | - 筆電 | ||
| + | - 寬螢幕 | ||
| + | |||
| + | 作為一個實作者，應要與設計師討論的是兩個尺寸之間應如何延伸， | ||
| + | 可能會是「頁面兩側留空」也可能是「Container 的部分隨寬度延伸」 | ||
| + | |||
| + | |||
| + | CSS breakpoint 的設置，可參考 [此篇文章](https:// | ||
| + | |||
| + | --- | ||
| + | |||
| + | --- | ||
| + | |||
| + | ## 給新手的七個建議 | ||
| + | |||
| + | 1. 光線來自天空 | ||
| + | 2. 黑白優先 | ||
| + | 3. 增加空白空間 | ||
| + | 4. 學會在圖片上呈現文字 | ||
| + | 5. 做好強調和淡化 | ||
| + | 6. 只用好的字體 | ||
| + | 7. 善於借鑒優秀的作品 | ||
| + | |||
| + | |||
| + | ### Ref | ||
| + | |||
| + | - [[https:// | ||
| + | - [[https:// | ||