形、色：網(wǎng)頁設(shè)計(jì)法則及實(shí)例指導(dǎo)

第1章 網(wǎng)頁設(shè)計(jì)之初體驗(yàn) 009
1．1 設(shè)計(jì)的意義 010
1．1．1 什么是設(shè)計(jì) 010
1．1．2 設(shè)計(jì)的目的 011
1．2 網(wǎng)頁設(shè)計(jì)的前世今生 012
1．2．1 誕生——第一個(gè)網(wǎng)站 012
1．2．2 探索——表格布局 013
1．2．3 發(fā)展——Flash的“崛起” 014
1．2．4 漸入佳境——DIV與CSS的誕生 015
1．2．5 劃時(shí)代——移動(dòng)端興起與響應(yīng)式布局 017
1．3 網(wǎng)頁設(shè)計(jì)師的審美培養(yǎng) 019
1．3．1 審美的差異 019
1．3．2 日韓設(shè)計(jì)行業(yè)的現(xiàn)狀 019
1．3．3 如何培養(yǎng)審美 024
1．4 專業(yè)的設(shè)計(jì)網(wǎng)站推薦 026
1．4．1 國內(nèi)設(shè)計(jì)網(wǎng)站推薦 026
1．4．2 國外設(shè)計(jì)網(wǎng)站推薦 028
第2章 以用戶為中心的設(shè)計(jì)思維 031
2．1 什么是用戶體驗(yàn) 032
2．1．1 生活中的用戶體驗(yàn) 032
2．1．2 互聯(lián)網(wǎng)產(chǎn)品中的用戶體驗(yàn) 034
2．2 挖掘用戶需求 035
2．2．1 需求層次論 035
2．2．2 用戶需求解析 036
2．3 令人愉悅的設(shè)計(jì) 038
2．3．1 Google Doodle 038
2．3．2 國內(nèi)設(shè)計(jì)師的嘗試 039
2．4 漸進(jìn)式創(chuàng)新思維 041
2．4．1 產(chǎn)品設(shè)計(jì)中的嘗試 041
2．4．2 設(shè)計(jì)中的迭代 042
2．5 細(xì)節(jié)決定成敗 044
2．5．1 細(xì)節(jié)習(xí)慣的養(yǎng)成 044
2．5．2 設(shè)計(jì)中的細(xì)節(jié)體驗(yàn) 045
第3章 網(wǎng)頁設(shè)計(jì)中的配色 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 藍(lán)色 053
3．3．4 綠色 054
3．3．5 紫色 055
3．4 配色的法則 056
3．4．1 色彩的關(guān)系 056
3．4．2 單色搭配 057
3．4．3 類似色搭配 058
3．4．4 鄰近色搭配 059
3．4．5 中差色搭配 060
3．4．6 對(duì)比色搭配 061
3．4．7 互補(bǔ)色搭配 063
3．4．8 色彩的對(duì)比 064
3．5 常用色彩搭配 065
3．5．1 商務(wù)促銷類 065
3．5．2 門戶類 068
3．5．3 兒童類 070
3．5．4 母嬰類 071
第4章 網(wǎng)頁設(shè)計(jì)前的準(zhǔn)備工作 073
4．1 有規(guī)矩成方圓 074
4．1．1 網(wǎng)頁設(shè)計(jì)的基本規(guī)范 074
4．1．2 網(wǎng)頁設(shè)計(jì)的標(biāo)注規(guī)范 079
4．2 網(wǎng)頁設(shè)計(jì)的流程 081
4．2．1 設(shè)計(jì)前期 081
4．2．2 原型制作 082
4．3 網(wǎng)頁設(shè)計(jì)的工具 085
4．3．1 常用軟件的介紹 085
4．3．2 軟件的基本操作 087
4．3．3 效果圖的展現(xiàn)方式 097
4．4 關(guān)于切片 103
4．4．1 切片工具的使用方法 103
4．4．2 圖片命名規(guī)范及保存格式 106
第5章 網(wǎng)頁設(shè)計(jì)模擬練習(xí) 111
5．1 草圖及原型圖的制作 112
5．1．1 概念圖的繪制 114
5．1．2 原型圖的制作方法 116
5．2 確立基本風(fēng)格和規(guī)范 117
5．2．1 根據(jù)風(fēng)格確定配色 117
5．2．2 確立設(shè)計(jì)規(guī)范 118
5．3 網(wǎng)頁制作的基本方法 120
5．3．1 新建畫布與設(shè)置參考線 120
5．3．2 導(dǎo)航欄的設(shè)計(jì) 120
5．3．3 主內(nèi)容區(qū)的設(shè)計(jì) 122
5．4 二級(jí)頁設(shè)計(jì) 127
5．4．1 導(dǎo)航欄的設(shè)計(jì) 127
5．4．2 “在線選購”界面的制作 128
5．4．3 產(chǎn)品介紹欄的設(shè)計(jì) 129
5．5 標(biāo)注的方法 131
第6章 網(wǎng)頁設(shè)計(jì)實(shí)戰(zhàn)解析 135
6．1 個(gè)人工作室網(wǎng)頁設(shè)計(jì) 136
6．1．1 設(shè)計(jì)需求的確定 136
6．1．2 確立設(shè)計(jì)規(guī)范 138
6．1．3 導(dǎo)航與Banner設(shè)計(jì) 138
6．1．4 文字與圖集板塊的設(shè)計(jì) 141
6．1．5 表單與輔助信息 145
6．2 酒店預(yù)訂網(wǎng)頁設(shè)計(jì) 147
6．2．1 設(shè)計(jì)需求的確定 147
6．2．2 確立設(shè)計(jì)規(guī)范 149
6．2．3 導(dǎo)航設(shè)計(jì) 149
6．2．4 Banner設(shè)計(jì) 151
6．2．5 圖文排版設(shè)計(jì) 153
6．2．6 圖集設(shè)計(jì) 154
6．2．7 企業(yè)信息設(shè)計(jì) 158
6．3 旅游工作室網(wǎng)頁設(shè)計(jì) 161
6．3．1 設(shè)計(jì)需求的確定 161
6．3．2 首頁設(shè)計(jì) 164
6．3．3 二級(jí)頁：新聞列表設(shè)計(jì) 168
6．3．4 二級(jí)頁：新聞詳情頁設(shè)計(jì) 176
6．3．5 二級(jí)頁：促銷信息列表頁設(shè)計(jì) 179
6．3．6 視覺效果圖的展示 184
第7章 設(shè)計(jì)師的經(jīng)驗(yàn)分享 193
7．1 設(shè)計(jì)師整理術(shù) 194
7．1．1 學(xué)習(xí)資料的整理 194
7．1．2 個(gè)人設(shè)計(jì)作品的整理 195
7．2 好用的設(shè)計(jì)工具推薦 196
7．2．1 自動(dòng)填充工具——Craft 196
7．2．2 柵格工具——GuideGuide 197
7．2．3 圓角圖形工具——Corner Editor 198
7．2．4 APP學(xué)習(xí)工具 198
7．3 必備的圖片處理工具推薦 201
7．3．1 圖片壓縮工具——智圖 201
7．3．2 免費(fèi)商用圖庫工具 201
7．4 寫給設(shè)計(jì)新人的話 205
7．4．1 圈子的選擇 205
7．4．2 設(shè)計(jì)師發(fā)展的四大階段 206
7．4．3 設(shè)計(jì)大師修煉法則 211
7．4．4 設(shè)計(jì)中的溝通技巧 213
7．4．5 繞開設(shè)計(jì)路上的“陷阱” 217
結(jié)束語 220