Photoshop+PxCook+Cutterman網(wǎng)頁UI設(shè)計教程

第1章 網(wǎng)頁UI設(shè)計初體驗
1.1 初識網(wǎng)頁UI ···································1
1.2 網(wǎng)頁UI的分類 ································2
1.3 網(wǎng)頁UI設(shè)計的工作流程 ····················5
1.3.1 網(wǎng)頁產(chǎn)品調(diào)研 ···············································.5
1.3.2 網(wǎng)頁原型設(shè)計 ···············································.6
1.3.3 設(shè)計網(wǎng)頁UI ··················································.7
1.3.4 網(wǎng)頁UI 標(biāo)注 ·················································.8
1.3.5 網(wǎng)頁UI 切圖輸出 ·········································.8
1.4 深刻理解網(wǎng)頁UI設(shè)計原則 ·················8
1.4.1 視覺美觀 ·······················································.8
1.4.2 主題明確 ·······················································.9
1.4.3 內(nèi)容與形式相統(tǒng)一 ·····································.10
1.4.4 整體性 ·························································.11
1.4.5 快速加載 ·····················································.11
1.4.6 為用戶考慮 ·················································.12
1.5 網(wǎng)頁UI的設(shè)計風(fēng)格 ························13
1.5.1 擬物化風(fēng)格 ·················································.13
1.5.2 扁平化風(fēng)格 ·················································.13
1.5.3 極簡化風(fēng)格 ·················································.14
1.5.4 3D 風(fēng)格 ·······················································.14
1.5.5 插畫風(fēng)格 ·····················································.15
1.5.6 低多邊形風(fēng)格 ·············································.15
1.5.7 無邊框風(fēng)格 ·················································.15
1.5.8 縱向分割風(fēng)格 ·············································.16
1.5.9 超級頭版風(fēng)格 ·············································.17
1.6 設(shè)計網(wǎng)頁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 本章小結(jié) ····································24
第2章 合理的網(wǎng)頁版式與布局
2.1 了解網(wǎng)頁布局 ······························25
2.1.1 網(wǎng)頁布局的目的 ·········································.25
2.1.2 網(wǎng)頁布局的操作流程 ·································.26
2.2 網(wǎng)頁布局的基本方法 ·····················27
2.2.1 網(wǎng)頁的布局設(shè)計 ·········································.27
2.2.2 網(wǎng)頁布局的原則 ·········································.28
2.3 網(wǎng)頁布局的常見類型 ·····················29
2.3.1 國字型 ·························································.30
2.3.2 拐角型 ·························································.30
2.3.3 標(biāo)題正文型 ·················································.31
2.3.4 左右框架型 ·················································.31
2.3.5 上下框架型 ·················································.31
2.3.6 封面型 ·························································.32
2.3.7 變化型 ·························································.33
2.4 根據(jù)內(nèi)容位置決定網(wǎng)頁布局方式 ······33
2.4.1 滿屏式網(wǎng)頁布局 ·········································.33
2.4.2 一欄式網(wǎng)頁布局 ·········································.34
實戰(zhàn)練習(xí)01——設(shè)計并制作白酒網(wǎng)頁 ···············.35
2.4.3 兩欄式網(wǎng)頁布局 ·········································.40
實戰(zhàn)練習(xí)02——布局啤酒網(wǎng)站 ···························.42
2.4.4 三欄式網(wǎng)頁布局 ·········································.45
2.4.5 水平和垂直居中的網(wǎng)頁布局 ·····················.47
2.5 頁面分割方向的布局方式 ···············48
2.5.1 縱向分割 ·····················································.48
2.5.2 橫向分割 ·····················································.49
實戰(zhàn)練習(xí)03——布局家居網(wǎng)站 ···························.49
2.5.3 縱向與橫向復(fù)合型 ·····································.52
2.5.4 運用固定區(qū)域的設(shè)計 ·································.53
2.6 網(wǎng)頁布局的特性 ···························53
2.7 PC端與移動端網(wǎng)頁布局的區(qū)別 ········55
2.8 本章小結(jié) ····································56
第3章 奠定基礎(chǔ)的網(wǎng)頁構(gòu)成元素
3.1 網(wǎng)頁中的線條 ······························57
3.1.1 點、線、面的關(guān)系 ·····································.57
3.1.2 網(wǎng)頁中應(yīng)用的線條風(fēng)格 ·····························.58
3.1.3 線條在網(wǎng)頁UI 中的作用 ···························.62
3.2 網(wǎng)頁中的標(biāo)志 ······························66
3.2.1 網(wǎng)頁標(biāo)志的尺寸 ·········································.66
3.2.2 網(wǎng)頁標(biāo)志的特點 ·········································.66
3.2.3 網(wǎng)頁標(biāo)志的設(shè)計規(guī)范 ·································.67
實戰(zhàn)練習(xí)01——設(shè)計并制作網(wǎng)頁標(biāo)志 ···············.69
3.2.4 網(wǎng)頁標(biāo)志的表現(xiàn)形式 ·································.71
3.3 網(wǎng)頁中的圖標(biāo)和按鈕 ·····················73
3.3.1 網(wǎng)頁圖標(biāo)的概念 ·········································.73
3.3.2 網(wǎng)頁圖標(biāo)的設(shè)計原則 ·································.73
3.3.3 網(wǎng)頁圖標(biāo)的應(yīng)用 ·····································3