網頁設計概念
內容提要
- 認識網頁
- 網頁 UI 設計
網頁基本認識
- 布局 / Layout
- 響應式設計 / RWD
- 網格系統 / Grid System
- 網頁框架 / Web Freamwork
布局 / Layout
網頁類型
- 一頁式網頁
- 兩欄式網頁
- 三欄式網頁
滿版頁面
- 滿版: 最大寬度 100%
- 非滿版: 最大寬度 1200px
一頁式
兩欄式
三欄式
響應式設計 / RWD
RWD 示意圖
RWD 尺寸
網格系統 / Grid System
HTML 示範
Row: 12, 7, 5
Col: 1 ~ 12
<div class="row-12">
<div class="col-12"><div>
<div class="col-6"><div>
<div class="col-6"><div>
</div>
Breakpoint
- Desktop: 12 Columns
- Pad: 8 Columns
- Phone: 4 Columns
參考 1 - Grid System Libray
參考 2 - RWD Layout Grid
Framework 網頁框架
甚麼是 Framework
通常指完成特定『基本任務』的組件規範
網頁 UI 設計
- 平面與網頁差異
- 網頁設計方針
平面與網頁差異
| 網頁設計 | 平面設計 | |
| 呈現方式 | 動感元素，視覺效果更加生動 引導用戶操作，增加互動 |
靜態的 |
| 視覺焦點 | 受瀏覽器尺寸限制 重要資訊顯示在網站首頁， 完整性比平面設計弱 |
完整性強， 更直觀 |
| 後期製作 | 依靠程式開發，伺服器等 網絡信號和其他第三方資源的支援。 |
依靠印刷， 以及不同的材料和媒體 |
網頁設計方針
- 視覺體驗
- 文字
- 視線
- 顏色
- 注意事項
- Wireframe
- Guideline
保持一致性的設計很重要
色碼類型
- CMYK : 印刷用
- HSB : 網頁用
- RGB : 網頁常用
- HEX : 網頁常用
Wireframe - 線框
UI kit - 用户界面套件
設計方針 - Guideline
你也可以參考 Freamwork
網頁設計工作架構圖
網頁設計工作分配
灰階的諧打錯了
下集待續
網頁設計概念
{"metaMigratedAt":"2023-06-15T01:21:10.075Z","metaMigratedFrom":"YAML","title":"網頁設計概念","breaks":true,"slideOptions":"{\"theme\":\"black\",\"transition\":\"fade\"}","contributors":"[{\"id\":\"5e027714-5a6f-434d-b9bb-0f6fc8ef5998\",\"add\":7121,\"del\":1558}]"}