第1章 網頁設計之初體驗 009
1.1 設計的意義 010
1.1.1 什麼是設計 010
1.1.2 設計的目的 011
1.2 網頁設計的前世今生 012
1.2.1 誕生——第一個網站 012
1.2.2 探索——表格佈局 013
1.2.3 發展——Flash的“崛起” 014
1.2.4 漸入佳境——DIV與CSS的誕生 015
1.2.5 劃時代——移動端興起與回應式佈局 017
1.3 網頁設計師的審美培養 019
1.3.1 審美的差異 019
1.3.2 日韓設計行業的現狀 019
1.3.3 如何培養審美 024
1.4 專業的設計網站推薦 026
1.4.1 國內設計網站推薦 026
1.4.2 國外設計網站推薦 028
第2章 以用戶為中心的設計思維 031
2.1 什麼是用戶體驗 032
2.1.1 生活中的用戶體驗 032
2.1.2 互聯網產品中的使用者體驗 034
2.2 挖掘用戶需求 035
2.2.1 需求層次論 035
2.2.2 用戶需求解析 036
2.3 令人愉悅的設計 038
2.3.1 Google Doodle 038
2.3.2 國內設計師的嘗試 039
2.4 漸進式創新思維 041
2.4.1 產品設計中的嘗試 041
2.4.2 設計中的反覆運算 042
2.5 細節決定成敗 044
2.5.1 細節習慣的養成 044
2.5.2 設計中的細節體驗 045
第3章 網頁設計中的配色 049
3.1 色彩的種類 050
3.1.1 無彩色 050
3.1.2 有彩色 050
3.2 色彩三要素 051
3.2.1 色相 051
3.2.2 明度 051
3.2.3 飽和度 051
3.3 色彩的情感 052
3.3.1 紅色 052
3.3.2 黃色 053
3.3.3 藍色 053
3.3.4 綠色 054
3.3.5 紫色 055
3.4 配色的法則 056
3.4.1 色彩的關係 056
3.4.2 單色搭配 057
3.4.3 類似色搭配 058
3.4.4 鄰近色搭配 059
3.4.5 中差色搭配 060
3.4.6 對比色搭配 061
3.4.7 互補色搭配 063
3.4.8 色彩的對比 064
3.5 常用色彩搭配 065
3.5.1 商務促銷類 065
3.5.2 門戶類 068
3.5.3 兒童類 070
3.5.4 母嬰類 071
第4章 網頁設計前的準備工作 073
4.1 有規矩成方圓 074
4.1.1 網頁設計的基本規範 074
4.1.2 網頁設計的標注規範 079
4.2 網頁設計的流程 081
4.2.1 設計前期 081
4.2.2 原型製作 082
4.3 網頁設計的工具 085
4.3.1 常用軟體的介紹 085
4.3.2 軟體的基本操作 087
4.3.3 效果圖的展現方式 097
4.4 關於切片 103
4.4.1 切片工具的使用方法 103
4.4.2 圖片命名規範及保存格式 106
第5章 網頁設計模擬練習 111
5.1 草圖及原型圖的製作 112
5.1.1 概念圖的繪製 114
5.1.2 原型圖的製作方法 116
5.2 確立基本風格和規範 117
5.2.1 根據風格確定配色 117
5.2.2 確立設計規範 118
5.3 網頁製作的基本方法 120
5.3.1 新建畫布與設置輔助線 120
5.3.2 巡覽列的設計 120
5.3.3 主內容區的設計 122
5.4 二級頁設計 127
5.4.1 巡覽列的設計 127
5.4.2 “線上選購”介面的製作 128
5.4.3 產品介紹欄的設計 129
5.5 標注的方法 131
第6章 網頁設計實戰解析 135
6.1 個人工作室網頁設計 136
6.1.1 設計需求的確定 136
6.1.2 確立設計規範 138
6.1.3 導航與Banner設計 138
6.1.4 文字與圖集板塊的設計 141
6.1.5 表單與輔助資訊 145
6.2 酒店預訂網頁設計 147
6.2.1 設計需求的確定 147
6.2.2 確立設計規範 149
6.2.3 導航設計 149
6.2.4 Banner設計 151
6.2.5 圖文排版設計 153
6.2.6 圖集設計 154
6.2.7 企業資訊設計 158
6.3 旅遊工作室網頁設計 161
6.3.1 設計需求的確定 161
6.3.2 首頁設計 164
6.3.3 二級頁：新聞列表設計 168
6.3.4 二級頁：新聞詳情頁設計 176
6.3.5 二級頁：促銷資訊清單頁設計 179
6.3.6 視覺效果圖的展示 184
第7章 設計師的經驗分享 193
7.1 設計師整理術 194
7.1.1 學習資料的整理 194
7.1.2 個人設計作品的整理 195
7.2 好用的設計工具推薦 196
7.2.1 自動填充工具——Craft 196
7.2.2 柵格工具——GuideGuide 197
7.2.3 圓角圖形工具——Corner Editor 198
7.2.4 APP學習工具 198
7.3 必備的圖片處理工具推薦 201
7.3.1 圖片壓縮工具——智圖 201
7.3.2 免費商用圖庫工具 201
7.4 寫給設計新人的話 205
7.4.1 圈子的選擇 205
7.4.2 設計師發展的四大階段 206
7.4.3 設計大師修煉法則 211
7.4.4 設計中的溝通技巧 213
7.4.5 繞開設計路上的“陷阱” 217
結束語 220