Photoshop+PxCook+Cutterman网页UI设计教程

第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 网页图标的应用 ·····································3