破译WebUI网页UI设计规范流程与实战案例PDF电子书下载

01 准备阶段 9

1.1 操作准备 10

1.1.1 必备的硬件和软件 10

1.1.2 工作环境 10

1.1.3 知识储备 11

1.2 软件必备知识 12

1.2.1 了解Photoshop 12

1.2.2 切图技巧 20

1.2.3 文档标注技巧 24

1.3 职业需求 27

1.3.1 就业方向 27

1.3.2 岗位能力分析 28

1.3.3 未来规划建议 28

1.4 学习目标 29

1.5 基础技能自测 30

02 线框图设计指南 31

2.1 线框图的重要性 32

2.1.1 线框图概念理解 32

2.1.2 与原型图的关系 33

2.1.3 与效果图的关系 36

2.1.4 与设计软件的关系 37

2.2 自适应设计与响应式设计 38

2.2.1 对比 38

2.2.2 运用 38

2.3 草图设计 39

2.4 构建栅格（网格）系统 40

2.4.1 如何理解栅格（网格）这个概念 40

2.4.2 运用 41

2.5 创建规范线框图 42

2.5.1 草图构思 42

2.5.2 页面尺寸和安全宽度设计 45

2.5.3 首屏高度控制 48

2.5.4 基础布局 49

2.5.5 文字排版与分屏设计 52

2.5.6 线框图细节刻画 67

2.5.7 基于线框图的视觉设计 67

2.5.8 图片输出 77

2.6 线框图自测 78

03 Web网格布局指南 79

3.1 基础知识 80

3.1.1 Web界面设计中网格的概念 80

3.1.2 网格结构 81

3.1.3 绘制网格前的准备工作 89

3.2 网格的运用 95

3.2.1 页面分割方式 95

3.2.2 网格的扩展运用 98

3.3 网格设计自测 102

04 Web界面设计参考规范（基础篇） 103

4.1 关于规范 104

4.1.1 概念 104

4.1.2 学习Web设计规范的重要性 105

4.1.3 导致Web设计差异的常见因素 105

4.2 屏幕尺寸与分辨率 111

4.2.1 知识点 111

4.2.2 运用 114

4.3 页面安全宽度 116

4.3.1 知识点 116

4.3.2 运用 117

4.4 页面首屏高度 118

4.4.1 知识点 118

4.4.2 运用 119

4.5 栅格（网格）系统 120

4.5.1 知识点 120

4.5.2 运用 122

4.6 页面组成部分 123

4.6.1 知识点 123

4.6.2 运用 124

4.7 中英文字体规范 125

4.7.1 知识点 125

4.7.2 运用 128

4.8 布局规范 129

4.8.1 知识点 129

4.8.2 运用 130

4.9 色彩 130

4.9.1 知识点 130

4.9.2 运用 134

4.10 图片与多媒体输出 136

4.10.1 知识点 136

4.10.2 运用 136

05 Web界面设计参考规范（提高篇） 139

5.1 深入理解设计规范 140

5.2 留白 141

5.2.1 知识点 141

5.2.2 运用 142

5.3 页脚信息 144

5.3.1 知识点 144

5.3.2 运用 145

5.4 图标 146

5.4.1 知识点 146

5.4.2 运用 147

5.5 命名 148

5.5.1 知识点 148

5.5.2 运用 149

5.6 可读性和对比度 150

5.6.1 知识点 150

5.6.2 运用 151

5.7 窗体布局 154

5.7.1 知识点 154

5.7.2 运用 156

5.8 设计规范自测 158

06 了解常用的Web用户体验 159

6.1 用户体验基础知识 160

6.1.1 概念 160

6.1.2 核心要素 161

6.2 提升网站用户体验的方式 162

6.2.1 减少不必要的交互动画 162

6.2.2 增加对比度，提高可读性 164

6.2.3 运用留白 165

6.2.4 减少页面加载时间 166

6.2.5 有吸引力的视觉引导 167

6.2.6 超链接的差异化 169

6.2.7 合理使用图像 170

6.2.8 保持风格元素的一致性 172

6.2.9 优化404页面 174

6.2.10 满足响应式需求 175

6.2.11 导航清晰，广告适度 176

6.2.12 使网站信息层次分明 177

6.2.13 总结 180

6.3 用户体验研究自测 180

07 以不变应万变——个人主页界面设计实战 181

7.1 前奏 182

7.2 项目分析 184

7.2.1 制作流程 184

7.2.2 分析过程 185

7.3 草图绘制 188

7.4 素材整理与处理 190

7.5 配色方案 190

7.6 线框图设计 192

7.6.1 建立网格 192

7.6.2 首屏 196

7.6.3 导航 197

7.6.4 内容主体 198

7.6.5 表单 201

7.6.6 横幅和标语 202

7.6.7 页脚 202

7.7 效果图设计 205

7.7.1 首屏效果 205

7.7.2 时间轴处理 211

7.7.3 作品模块包装 217

7.7.4 表单细节 219

7.7.5 横幅设计 222

7.7.6 页脚设计 224

7.7.7 细节调整 225

7.7.8 隐藏模态窗设计 226

7.8 手机版效果图设计 227

7.9 个人主页自测 230

08 网页设计新趋势——Material Design 231

8.1 理解Material Design Lite（MDL） 232

8.1.1 概念理解 232

8.1.2 优势 232

8.2 MDL基础规范运用 234

8.2.1 字体 234

8.2.2 调色板 236

8.2.3 阴影 237

8.2.4 图标 238

8.2.5 部分组件 240

8.3 MDL基础自测 248

09 Web设计师的个人修养 249

9.1 寻找学习动力与兴趣点 250

9.1.1 探索设计趋势 250

9.1.2 建立个人网站 251

9.1.3 跨行业体验 251

9.2 赚取第一桶金 252

9.3 自学技巧 254