Photoshop+PxCook+Cutterman網頁UI設計教程

李曉斌，多年視頻剪輯與特效製作工作背景與設計經驗，精通視頻講解與特效相關軟件，熟練掌握After Effect軟件的各項功能與操作技巧，能夠完成視頻特效的添加與優化。
優秀的團隊合作精神，對工作認真負責，積極主動，思維嚴謹，具有較高的技術水平和豐富的工作經驗。
曾出版多本相關教材，參與多所院校的視頻剪輯的培訓工作。

第1章 網頁UI設計初體驗
1.1 初識網頁UI 1
1.2 網頁UI的分類 2
1.3 網頁UI設計的工作流程 5
1.3.1 網頁產品調研 5
1.3.2 網頁原型設計 6
1.3.3 設計網頁UI 7
1.3.4 網頁UI 標註 8
1.3.5 網頁UI 切圖輸出 8
1.4 深刻理解網頁UI設計原則 8
1.4.1 視覺美觀 8
1.4.2 主題明確 9
1.4.3 內容與形式相統一 10
1.4.4 整體性 11
1.4.5 快速加載 11
1.4.6 為用戶考慮 12
1.5 網頁UI的設計風格 13
1.5.1 擬物化風格 13
1.5.2 扁平化風格 13
1.5.3 極簡化風格 14
1.5.4 3D 風格 14
1.5.5 插畫風格 15
1.5.6 低多邊形風格 15
1.5.7 無邊框風格 15
1.5.8 縱向分割風格 16
1.5.9 超級頭版風格 17
1.6 設計網頁UI的常用工具 17
1.6.1 Axure RP 9 17
1.6.2 Photoshop 和Illustrator 18
1.6.3 Sketch 和Adobe XD 21
1.6.4 PxCook 和Cutterman 23
1.7 本章小結 24

第2章 合理的網頁版式與佈局
2.1 了解網頁佈局 25
2.1.1 網頁佈局的目的 25
2.1.2 網頁佈局的操作流程 26
2.2 網頁佈局的基本方法 27
2.2.1 網頁的佈局設計 27
2.2.2 網頁佈局的原則 28
2.3 網頁佈局的常見類型 29
2.3.1 國字型 30
2.3.2 拐角型 30
2.3.3 標題正文型 31
2.3.4 左右框架型 31
2.3.5 上下框架型 31
2.3.6 封面型 32
2.3.7 變化型 33
2.4 根據內容位置決定網頁佈局方式 33
2.4.1 滿屏式網頁佈局 33
2.4.2 一欄式網頁佈局 34
實戰練習01——設計並製作白酒網頁35
2.4.3 兩欄式網頁佈局 40
實戰練習02——佈局啤酒網站 42
2.4.4 三欄式網頁佈局 45
2.4.5 水平和垂直居中的網頁佈局 47
2.5 頁面分割方向的佈局方式 48
2.5.1 縱向分割 48
2.5.2 橫向分割 49
實戰練習03——佈局家居網站 49
2.5.3 縱向與橫向複合型 52
2.5.4 運用固定區域的設計 53
2.6 網頁佈局的特性 53
2.7 PC端與移動端網頁佈局的區別 55
2.8 本章小結 56

第3章 奠定基礎的網頁構成元素
3.1 網頁中的線條 57
3.1.1 點、線、面的關係 57
3.1.2 網頁中應用的線條風格 58
3.1.3 線條在網頁UI 中的作用 62
3.2 網頁中的標誌 66
3.2.1 網頁標誌的尺寸 66
3.2.2 網頁標誌的特點 66
3.2.3 網頁標誌的設計規範 67
實戰練習01——設計並製作網頁標誌69
3.2.4 網頁標誌的表現形式 71
3.3 網頁中的圖標和按鈕 73
3.3.1 網頁圖標的概念 73
3.3.2 網頁圖標的設計原則 73
3.3.3 網頁圖標的應用 75
實戰練習02——設計並製作簡易圖標76
3.3.4 網頁按鈕的概念 80
3.3.5 網頁按鈕的功能 80
3.3.6 設計出色的網頁按鈕 81
實戰練習03——設計並製作簡單的網頁元素 83
3.4 網頁中的導航 88
3.4.1 佈局網頁導航 88
3.4.2 網頁導航的設計技巧 91
實戰練習04——設計並製作家居網頁的主體廣告和導航 92
3.5 網頁中的文字 96
3.5.1 網頁中的文字設置 96
3.5.2 網頁文字的設計原則 100
3.5.3 網頁文字的排版規則 100
3.6 網頁中的圖片 103
3.6.1 網頁中的圖片設置 103
3.6.2 網頁圖片的應用 104
3.7 網頁中的富媒體106
3.8 本章小結 106

第4章 美觀的網頁配色
4.1 配色的基礎107
4.1.1 色彩的概念 107
4.1.2 色彩的三要素 107
4.1.3 顏色模式 110
4.1.4 十六進制顏色碼 111
4.2 網頁配色的基本要素 112
4.2.1 網頁的主題色 112
實戰練習01——設計並製作家具網站的登錄頁面 113
4.2.2 網頁的背景色 115
4.2.3 網頁的輔助色 116
4.2.4 網頁的文本色 117
4.2.5 網頁的強調色 117
4.3 網頁元素的色彩搭配 118
4.3.1 網頁標誌與廣告 118
4.3.2 網頁導航 118
實戰練習02——設計並製作圖片資源網頁 118
4.3.3 背景色與文字 120
4.3.4 鏈接文字 121
4.4 根據色調進行網頁配色122
4.5 利用色彩對比進行網頁配色 123
4.5.1 色彩的冷暖對比 123
4.5.2 色彩的大小對比 124
4.5.3 色彩的色相對比 124
4.6 網頁中的配色技巧 128
4.6.1 突出網頁主題 128
實戰練習03——設計並製作咖啡網頁 131
4.6.2 融合整體配色 132
4.7 本章小結 134

第5章 iOS系統UI設計
5.1 iOS系統簡介135
5.2 iOS系統的元素設計 136
5.2.1 尺寸單位 136
5.2.2 尺寸大小 137
5.2.3 組件尺寸 138
5.2.4 圖標 138
5.3 iOS系統的邊距和間距設計140
5.3.1 全局邊距 140
實戰練習01——設計並製作運動App 的主頁 141
5.3.2 卡片間距 143
5.3.3 內容間距 144
5.4 iOS系統的文字設計 146
5.4.1 字體 146
5.4.2 字號與字重 146
實戰練習02——設計並製作旅遊App 的“我的”界面 147
5.5 iOS系統的圖片設計 151
5.5.1 圖片的比例 151
5.5.2 圖片的格式 152
5.6 iOS系統的網頁佈局 153
5.6.1 列表式佈局 153
5.6.2 陳列館式佈局 153
5.6.3 宮格式佈局 154
5.6.4 卡片式佈局 154
5.7 iOS系統UI的設計原則 155
5.7.1 親密性 155
5.7.2 對齊、對比和重複 156
5.7.3 直截了當 158
5.7.4 提供邀請 160
5.8 本章小結 162

第6章 Android系統UI設計
6.1 Android系統簡介 163
6.2 Android系統的元素設計 163
6.2.1 設計單位 164
6.2.2 界面尺寸 165
6.2.3 組件尺寸 165
實戰練習01——設計並製作App 的登錄界面166
6.3 Android系統的文字設計 168
6.3.1 字體和字重 168
6.3.2 字號 169
6.4 Android系統的圖標設計 170
6.4.1 啟動圖標 170
6.4.2 標籤欄/ 系統通知圖標170
6.4.3 上下文圖標 171
6.4.4 圖標尺寸 171
實戰練習02——設計並製作App 界面中的上下文圖標 172
6.5 Android系統UI的設計原則 174
6.5.1 一步到位 174
6.5.2 即時反應 177
6.5.3 簡化交互 179
實戰練習03——設計並製作Android 系統App“我的”界面181
6.6 本章小結 184

第7章 適配輸出網頁UI設計
7.1 PC端網頁的適配輸出185
7.1.1 PC 端的適配方法 185
7.1.2 適配時需要注意的點 185
7.2 iOS系統界面的適配輸出 186
7.2.1 界面標註 186
7.2.2 標註工具——PxCook188
實戰練習01——標註iOS 系統App 界面191
7.2.3 適配輸出 193
7.3 Android系統界面的適配輸出195
7.3.1 界面標註 195
7.3.2 適配輸出 196
7.3.3 .9 切圖法 198
7.3.4 輸出工具——Cutterman 插件201
實戰練習02——輸出Android 系統的App 界面 201
7.4 本章小結 203

第8章 綜合案例
8.1 設計PC端的家居網頁204
8.1.1 家居網頁案例分析 204
8.1.2 家居網頁色彩分析 205
8.1.3 家居網頁製作步驟 206
8.2 設計iOS系統的旅遊App界面 209
8.2.1 旅遊App 界面案例分析209
8.2.2 旅遊App 界面色彩分析210
8.2.3 旅遊App 界面製作步驟211
8.3 設計Android系統的家居App界面215
8.3.1 家居App 界面案例分析215
8.3.2 家居App 界面色彩分析217
8.3.3 家居App 界面製作步驟218
8.4 本章小結 222