零基礎(chǔ)學網(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?按瀏覽終端不同進行劃分 003
1.2.2?按內(nèi)容功能不同進行劃分 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?運營維護 015
1.5?網(wǎng)頁UI的設(shè)計風格 015
1.5.1?擬物化風格 015
1.5.2?扁平化風格 016
1.5.3?極簡化風格 017
1.5.4?3D風格 017
1.5.5?插畫風格 018
1.5.6?無邊框風格 019
1.5.7?縱向分割風格 019
1.5.8?超級版頭風格 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?舉一反三—分析運動服飾類網(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)頁中的圖標設(shè)計 036
2.3.1?認識網(wǎng)頁圖標 036
2.3.2?移動端圖標設(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?標題正文型 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?十六進制顏色碼 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)頁強調(diào)色 101
4.3?網(wǎng)頁的基礎(chǔ)配色方法 104
4.3.1?單色 104
4.3.2?類似色 104
4.3.3?補色 104
4.3.4?鄰近補色 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)意、感官性強 145
5.5.3?直達產(chǎn)品核心消費群 145
5.5.4?節(jié)省成本 146
5.5.5?具有強烈的互動性 146
5.5.6?準確統(tǒng)計廣告效果 147
5.6?舉一反三—設(shè)計制作APP開屏廣告 150
5.7?本章小結(jié) 150