超越平凡的視覺設(shè)計(jì)：網(wǎng)頁設(shè)計(jì)原理

目錄
本書的使用方法····························· 8

PART　0 網(wǎng)頁設(shè)計(jì)基礎(chǔ)知識
01 網(wǎng)頁設(shè)計(jì)基礎(chǔ)知識························ 10
02 網(wǎng)頁的結(jié)構(gòu)和工作流程······················ 12
03 在網(wǎng)頁中加入設(shè)計(jì)部件······················ 14
專欄 關(guān)于網(wǎng)頁瀏覽器························· · 14
04 網(wǎng)頁中所用的圖像························ 16
05 網(wǎng)頁設(shè)計(jì)與文字版式······················· 18
專欄 設(shè)計(jì)小竅門···························· 19
06 色彩的基礎(chǔ)知識························· 20
專欄 通過調(diào)整補(bǔ)色讓照片的色調(diào)更加理想················ · 21
專欄 顏色搭配方法的參考網(wǎng)站····················· · 23
專欄 用于判斷色覺異常患者所看顏色效果的工具·············· 23
專欄 在醒目位置或頁面按鈕上反映出顏色的印象·············· 23
07 配色的基礎(chǔ)知識························· 24
專欄 可供參考的網(wǎng)頁設(shè)計(jì)網(wǎng)站···················· ·· 26

PART　1 從風(fēng)格方面進(jìn)行網(wǎng)頁設(shè)計(jì)
01 源自可愛的萌動設(shè)計(jì)······················· 28
02 充滿活力的流行風(fēng)格設(shè)計(jì)····················· 30
03 洋溢著雅致高端氣息的設(shè)計(jì)···················· 32
04 自然柔和的設(shè)計(jì)························· 34
05 炫酷先進(jìn)的設(shè)計(jì)························· 36
06 信任可靠的設(shè)計(jì)························· 38
07 復(fù)古懷舊的設(shè)計(jì)························· 40
專欄 復(fù)古風(fēng)格的字體在CSS中的表現(xiàn)方法·················· 41
08 古典高雅的設(shè)計(jì)························· 42
09 日式和風(fēng)的設(shè)計(jì)························· 44
10 透明感的設(shè)計(jì)·························· 46
11 面向兒童用戶的設(shè)計(jì)······················· 48
12 女人味的設(shè)計(jì)·························· 50
13 男人味的設(shè)計(jì)·························· 52
14 高級感的設(shè)計(jì)·························· 54
15 讓食物看起來更美味的設(shè)計(jì)···················· 56
16 帶有季節(jié)感的設(shè)計(jì)························ 58
專欄 可商用的攝影素材網(wǎng)站·················· ····· 60

PART　2 從配色方面進(jìn)行網(wǎng)頁設(shè)計(jì)
01 基于標(biāo)志、品牌顏色的配色···················· 62
02 以黃色為基調(diào)的配色······················· 64
03 以橙色為基調(diào)的配色······················· 66
04 以紅色為基調(diào)的配色······················· 68
05 以粉色為基調(diào)的配色······················· 70
06 以紫色為基調(diào)的配色······················· 72
07 以藍(lán)色為基調(diào)的配色······················· 74
08 以綠色為基調(diào)的配色······················· 76
09 以茶色為基調(diào)的配色······················· 78
10 以白色和灰色為基調(diào)的配色···················· 80
11 以黑色為基調(diào)的配色······················· 82
12 與色調(diào)相結(jié)合的配色······················· 84
專欄 配色生成器與瀏覽器插件····················· · 86

PART　3 從不同行業(yè)、領(lǐng)域方面進(jìn)行網(wǎng)頁設(shè)計(jì)
01 西餐廳、咖啡店類網(wǎng)站的網(wǎng)頁設(shè)計(jì)················· 88
02 醫(yī)療機(jī)構(gòu)類網(wǎng)站的網(wǎng)頁設(shè)計(jì)···················· 90
03 流行時尚類網(wǎng)站的網(wǎng)頁設(shè)計(jì)···················· 92
04 美容、美發(fā)類網(wǎng)站的網(wǎng)頁設(shè)計(jì)··················· 94
05 藝術(shù)節(jié)、展覽類網(wǎng)站的網(wǎng)頁設(shè)計(jì)·················· 96
06 音樂類網(wǎng)站的網(wǎng)頁設(shè)計(jì)······················ 98
07 動畫、游戲類網(wǎng)站的網(wǎng)頁設(shè)計(jì)··················· 100
08 職業(yè)資格類網(wǎng)站的網(wǎng)頁設(shè)計(jì)···················· 102
09 學(xué)校、幼兒園類網(wǎng)站的網(wǎng)頁設(shè)計(jì)·················· 104
10 藝術(shù)類網(wǎng)站的網(wǎng)頁設(shè)計(jì)······················ 106
11 新聞、門戶類網(wǎng)站的網(wǎng)頁設(shè)計(jì)··················· 108
12 電子商務(wù)類網(wǎng)站的網(wǎng)頁設(shè)計(jì)··············· ···· 110
專欄 電子商務(wù)網(wǎng)站與平臺······················· · 111
13 企業(yè)類網(wǎng)站的網(wǎng)頁設(shè)計(jì)······················ 112
14 體育健身類網(wǎng)站的網(wǎng)頁設(shè)計(jì)···················· 114
15 引導(dǎo)頁的網(wǎng)頁設(shè)計(jì)························ 116
專欄 提供引導(dǎo)頁參考的網(wǎng)站················· ··· ·· 117
專欄 將使用目的與網(wǎng)頁設(shè)計(jì)結(jié)合起來的方法·············· ·· 118

PART　4 從版式、構(gòu)圖方面進(jìn)行網(wǎng)頁設(shè)計(jì)
01 網(wǎng)格型版式··························· 120
專欄 在Photoshop中輕松制作參考線···················· 121
02 卡片、瓷磚型版式························ 122
03 單專欄型版式·························· 124
04 雙專欄型版式·························· 126
05 組合專欄型版式························· 128
06 全屏型版式··························· 130
07 脫離網(wǎng)格型版式························· 132
08 自由型版式··························· 134
專欄 版式設(shè)計(jì)的4個法則························· 136

PART　5 使用素材、字體、程序的設(shè)計(jì)
01 以圖像素材為主體的設(shè)計(jì)····················· 138
專欄 豐富的視差效果帶來的魅力····················· 140
02 使用摳圖照片的設(shè)計(jì)······················· 142
03 使用紋理材質(zhì)的設(shè)計(jì)······················· 144
04 使用裝飾素材的設(shè)計(jì)······················· 146
05 使用手繪插圖的設(shè)計(jì)······················· 148
06 使用文字版式的設(shè)計(jì)······················· 150
07 有效運(yùn)用視頻的設(shè)計(jì)······················· 152
08 帶有動態(tài)特效的設(shè)計(jì)······················· 154
09 展示數(shù)據(jù)圖像的設(shè)計(jì)······················· 156
專欄 能夠輕松制作出統(tǒng)計(jì)圖和圖表的Java Script庫············· 157
專欄 Font Awsome的導(dǎo)入方法······················· 158

PART　6 網(wǎng)頁設(shè)計(jì)的趨勢
01 響應(yīng)式網(wǎng)頁設(shè)計(jì)························· 160
02 網(wǎng)頁字體·········· 162
專欄 提供網(wǎng)頁字體服務(wù)的網(wǎng)站·················· ···· 163
03 分屏式設(shè)計(jì)··························· 164
04 扁平化設(shè)計(jì)和材料設(shè)計(jì)······················ 166
專欄 采用材料設(shè)計(jì)語言的示例網(wǎng)站···················· 167
05 微交互式設(shè)計(jì)·························· 168
專欄 從手機(jī)APP的UI中學(xué)習(xí)微交互的應(yīng)用·················· 169
06 品牌主視覺設(shè)計(jì)························· 170
07 視差設(shè)計(jì)···························· 172
專欄 能夠?qū)崿F(xiàn)視差效果的jQuery插件示例················· 173
08 雙色調(diào)設(shè)計(jì)··························· 174
專欄 雙色調(diào)圖像的制作方法······················· 175
09 文字豎排的版式設(shè)計(jì)······················· 176
專欄 使用可更新編輯的WordPress····················· 178

PART　7 網(wǎng)頁各個要素的設(shè)計(jì)
01 頁眉······························ 180
02 全局導(dǎo)航欄··························· 182
03 標(biāo)題························ ······184
04 按鈕、圖標(biāo)··························· 185
05 表格······························ 186
06 填寫項(xiàng)目···························· 187
07 頁腳····························· ·188
專欄 收藏夾圖標(biāo)的設(shè)置方法······················· 190