零基礎(chǔ)學(xué)網(wǎng)頁(yè)UI設(shè)計(jì)（人人都是設(shè)計(jì)師）

目錄
第1章　網(wǎng)頁(yè)UI設(shè)計(jì)初體驗(yàn) 001
1.1?了解網(wǎng)頁(yè)UI 002
1.1.1?什么是網(wǎng)站 002
1.1.2?什么是網(wǎng)頁(yè)UI設(shè)計(jì) 002
1.2?網(wǎng)頁(yè)UI設(shè)計(jì)分類 003
1.2.1?按瀏覽終端不同進(jìn)行劃分 003
1.2.2?按內(nèi)容功能不同進(jìn)行劃分 004
1.3?網(wǎng)頁(yè)UI的構(gòu)成元素 008
1.3.1?網(wǎng)頁(yè)中的配色設(shè)計(jì) 008
1.3.2?網(wǎng)頁(yè)中的文字 009
1.3.3?網(wǎng)頁(yè)中的圖像 009
1.3.4?網(wǎng)頁(yè)中的富媒體 010
1.4?網(wǎng)頁(yè)UI制作流程 011
1.4.1?前期策劃 011
1.4.2?交互設(shè)計(jì) 012
1.4.3?視覺設(shè)計(jì) 013
1.4.4?開發(fā)測(cè)試 014
1.4.5?運(yùn)營(yíng)維護(hù) 015
1.5?網(wǎng)頁(yè)UI的設(shè)計(jì)風(fēng)格 015
1.5.1?擬物化風(fēng)格 015
1.5.2?扁平化風(fēng)格 016
1.5.3?極簡(jiǎn)化風(fēng)格 017
1.5.4?3D風(fēng)格 017
1.5.5?插畫風(fēng)格 018
1.5.6?無邊框風(fēng)格 019
1.5.7?縱向分割風(fēng)格 019
1.5.8?超級(jí)版頭風(fēng)格 020
1.6?設(shè)計(jì)網(wǎng)頁(yè)常用軟件 020
1.6.1?Photoshop CC 021
1.6.2?Axure RP 9 022
1.6.3?Adobe XD 023
1.6.4?Px Cook 024
1.7?舉一反三—分析運(yùn)動(dòng)服飾類網(wǎng)頁(yè) 025
1.8?本章小結(jié) 025
第2章　網(wǎng)頁(yè)UI中的元素設(shè)計(jì)初體驗(yàn) 026
2.1?網(wǎng)頁(yè)中的文字設(shè)計(jì) 027
2.1.1?文字在網(wǎng)頁(yè)中的應(yīng)用 027
2.1.2?網(wǎng)頁(yè)中文字的設(shè)計(jì)規(guī)范 030
2.2?網(wǎng)頁(yè)中的圖片設(shè)計(jì) 034
2.2.1?常用圖片格式 034
2.2.2?圖片模式 035
2.3?網(wǎng)頁(yè)中的圖標(biāo)設(shè)計(jì) 036
2.3.1?認(rèn)識(shí)網(wǎng)頁(yè)圖標(biāo) 036
2.3.2?移動(dòng)端圖標(biāo)設(shè)計(jì) 038
2.3.3?網(wǎng)頁(yè)中的按鈕 043
2.4?網(wǎng)頁(yè)中的Logo設(shè)計(jì) 044
2.4.1?網(wǎng)頁(yè)Logo的表現(xiàn)形式 044
2.4.2?網(wǎng)頁(yè)Logo的設(shè)計(jì)規(guī)范 045
2.4.3?網(wǎng)頁(yè)Logo的設(shè)計(jì)特點(diǎn) 049
2.5?網(wǎng)頁(yè)中的導(dǎo)航設(shè)計(jì) 050
2.5.1?網(wǎng)頁(yè)導(dǎo)航概述 050
2.5.2?導(dǎo)航菜單在網(wǎng)頁(yè)中的位置布局 051
2.6?舉一反三—設(shè)計(jì)制作一款簡(jiǎn)約Logo 059
2.7?本章小結(jié) 059
第3章　網(wǎng)頁(yè)布局與版式設(shè)計(jì) 060
3.1? 了解網(wǎng)頁(yè)布局 061
3.1.1?網(wǎng)頁(yè)布局的目的 061
3.1.2?網(wǎng)頁(yè)布局的操作順序 063
3.2?常見的網(wǎng)頁(yè)布局結(jié)構(gòu) 063
3.2.1?“國(guó)”字型 063
3.2.2?拐角型 064
3.2.3?標(biāo)題正文型 065
3.2.4?左右分割型 065
3.2.5?上下分割型 065
3.2.6?綜合型 067
3.2.7?封面型 068
3.3?網(wǎng)頁(yè)布局形式的藝術(shù)表現(xiàn) 069
3.3.1?分割構(gòu)成 069
3.3.2?對(duì)稱構(gòu)成 071
3.3.3?平衡構(gòu)成 072
3.4?網(wǎng)頁(yè)留白設(shè)計(jì)的8個(gè)關(guān)鍵點(diǎn) 076
3.5?移動(dòng)端網(wǎng)頁(yè)元素設(shè)計(jì) 078
3.5.1?界面尺寸 078
3.5.2?組件尺寸規(guī)范 079
3.5.3?移動(dòng)端網(wǎng)頁(yè)的邊距設(shè)計(jì) 080
3.6?移動(dòng)端網(wǎng)頁(yè)的布局設(shè)計(jì) 083
3.6.1?列表式布局 083
3.6.2?陳列館式布局 086
3.6.3?宮格式布局 090
3.6.4?卡片式布局 091
3.7?舉一反三—設(shè)計(jì)一款三欄式布局網(wǎng)頁(yè) 091
3.8?本章小結(jié) 092
第4章　配色設(shè)計(jì)在網(wǎng)頁(yè)中的作用 093
4.1?理解色彩 094
4.1.1?色彩屬性 094
4.1.2?顏色模式 095
4.1.3?Web安全顏色 098
4.1.4?十六進(jìn)制顏色碼 098
4.2?網(wǎng)頁(yè)配色的基本要素 100
4.2.1?網(wǎng)頁(yè)主題色 100
4.2.2?網(wǎng)頁(yè)背景色 100
4.2.3?網(wǎng)頁(yè)輔助色 101
4.2.4?網(wǎng)頁(yè)強(qiáng)調(diào)色 101
4.3?網(wǎng)頁(yè)的基礎(chǔ)配色方法 104
4.3.1?單色 104
4.3.2?類似色 104
4.3.3?補(bǔ)色 104
4.3.4?鄰近補(bǔ)色 105
4.3.5?無彩色 105
4.4?網(wǎng)頁(yè)中的文字配色設(shè)計(jì) 106
4.4.1?背景與文字配色 106
4.4.2?鏈接文字 109
4.5?網(wǎng)頁(yè)元素的色彩搭配 110
4.5.1?網(wǎng)頁(yè)Logo和廣告配色 110
4.5.2?網(wǎng)頁(yè)導(dǎo)航配色 112
4.6?網(wǎng)頁(yè)配色技巧 113
4.6.1?突出主題的配色技巧 113
4.6.2?整體融和的配色技巧 117
4.6.3?整理出色的配色方案 119
4.7?舉一反三—一款居家生活網(wǎng)頁(yè)的配色設(shè)計(jì) 122
4.8?本章小結(jié) 122
第5章　網(wǎng)頁(yè)中的廣告設(shè)計(jì) 123
5.1?網(wǎng)頁(yè)廣告概述 124
5.1.1?網(wǎng)頁(yè)廣告概念 124
5.1.2?網(wǎng)頁(yè)廣告的特征 124
5.1.3?設(shè)計(jì)出色的網(wǎng)頁(yè)廣告樣式 125
5.2?移動(dòng)端網(wǎng)頁(yè)常見的廣告樣式 126
5.2.1?Banner廣告 126
5.2.2?開屏廣告 130
5.2.3?信息流廣告 130
5.2.4?插屏廣告 131
5.2.5?視頻貼片廣告 135
5.3?移動(dòng)端網(wǎng)頁(yè)廣告的設(shè)計(jì)思路 135
5.3.1?Banner廣告的設(shè)計(jì)思路 136
5.3.2?開屏廣告的設(shè)計(jì)思路 136
5.3.3?信息流廣告的設(shè)計(jì)思路 137
5.3.4?插屏廣告的設(shè)計(jì)思路 138
5.3.5?視頻貼片廣告的設(shè)計(jì)思路 139
5.4?PC端網(wǎng)頁(yè)廣告的常用樣式 139
5.4.1?文字廣告 139
5.4.2?Banner廣告 140
5.4.3?對(duì)聯(lián)式浮動(dòng)廣告 143
5.4.4?網(wǎng)頁(yè)漂浮廣告 143
5.4.5?彈出廣告 143
5.5?PC端網(wǎng)頁(yè)廣告的特點(diǎn) 144
5.5.1?傳播范圍廣泛 145
5.5.2?富有創(chuàng)意、感官性強(qiáng) 145
5.5.3?直達(dá)產(chǎn)品核心消費(fèi)群 145
5.5.4?節(jié)省成本 146
5.5.5?具有強(qiáng)烈的互動(dòng)性 146
5.5.6?準(zhǔn)確統(tǒng)計(jì)廣告效果 147
5.6?舉一反三—設(shè)計(jì)制作APP開屏廣告 150
5.7?本章小結(jié) 150