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

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