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

第1章 網(wǎng)頁UI設計初體驗
1.1 初識網(wǎng)頁UI ···································1
1.2 網(wǎng)頁UI的分類 ································2
1.3 網(wǎng)頁UI設計的工作流程 ····················5
1.3.1 網(wǎng)頁產(chǎn)品調(diào)研 ···············································.5
1.3.2 網(wǎng)頁原型設計 ···············································.6
1.3.3 設計網(wǎng)頁UI ··················································.7
1.3.4 網(wǎng)頁UI 標注 ·················································.8
1.3.5 網(wǎng)頁UI 切圖輸出 ·········································.8
1.4 深刻理解網(wǎng)頁UI設計原則 ·················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的設計風格 ························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 設計網(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)頁的布局設計 ·········································.27
2.2.2 網(wǎng)頁布局的原則 ·········································.28
2.3 網(wǎng)頁布局的常見類型 ·····················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 根據(jù)內(nèi)容位置決定網(wǎng)頁布局方式 ······33
2.4.1 滿屏式網(wǎng)頁布局 ·········································.33
2.4.2 一欄式網(wǎng)頁布局 ·········································.34
實戰(zhàn)練習01——設計并制作白酒網(wǎng)頁 ···············.35
2.4.3 兩欄式網(wǎng)頁布局 ·········································.40
實戰(zhàn)練習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)練習03——布局家居網(wǎng)站 ···························.49
2.5.3 縱向與橫向復合型 ·····································.52
2.5.4 運用固定區(qū)域的設計 ·································.53
2.6 網(wǎng)頁布局的特性 ···························53
2.7 PC端與移動端網(wǎng)頁布局的區(qū)別 ········55
2.8 本章小結(jié) ····································56
第3章 奠定基礎的網(wǎng)頁構(gòu)成元素
3.1 網(wǎng)頁中的線條 ······························57
3.1.1 點、線、面的關系 ·····································.57
3.1.2 網(wǎng)頁中應用的線條風格 ·····························.58
3.1.3 線條在網(wǎng)頁UI 中的作用 ···························.62
3.2 網(wǎng)頁中的標志 ······························66
3.2.1 網(wǎng)頁標志的尺寸 ·········································.66
3.2.2 網(wǎng)頁標志的特點 ·········································.66
3.2.3 網(wǎng)頁標志的設計規(guī)范 ·································.67
實戰(zhàn)練習01——設計并制作網(wǎng)頁標志 ···············.69
3.2.4 網(wǎng)頁標志的表現(xiàn)形式 ·································.71
3.3 網(wǎng)頁中的圖標和按鈕 ·····················73
3.3.1 網(wǎng)頁圖標的概念 ·········································.73
3.3.2 網(wǎng)頁圖標的設計原則 ·································.73
3.3.3 網(wǎng)頁圖標的應用 ·····································3