《破译Web UI：网页UI设计规范、流程与实战案例》书中资源

内容介绍

本书着重讲解Web UI设计的原则、方法和应用。按照“知识点分析—知识点深入与扩展—归纳与运用（全面案例讲解）—新技术的拓展”的进阶结构来讲解，让读者能够循序渐进地、更科学地学习。

全书共9章，*1～8章内容涵盖工作的准备阶段、线框图设计、Web网格布局、Web界面设计基础参考规范、Web界面设计*级参考规范、Web设计用户体验、Web界面设计实战和网页设计新趋势（MDL），讲解贯穿实际设计案例，帮助读者梳理工作流，融入设计理论，并教会读者如何思考、如何应用理论，进而能以不变应万变。*后一章对设计师的个人发展提出了一些建议，分享了一些经验。

随书附赠书中核心案例的PSD文件，供读者学习、参考。

本书适合有一定Photoshop软件基础的设计初学者、相关专业大学生及想要进阶的Web设计师阅读。

作者介绍

Chuckie Chang（中文名常诚） 一名非科班出身的Web产品设计师。Envato作者，TemplateMonster产品签约供应商，WordPress Slack团队成员、官方平台插件贡献者，曾担任过麦子学院金*讲师。他的部分作品刊登于Behance交互设计专栏，并获Awwwards、CSSDesignAwards等机构网站奖项提名，独立开发的建站产品曾进入Product Hunt网站前10榜单。他擅长网页界面设计、Web产品设计，并能熟练运用适当的前后端技术进行产品开发。

目录

• CHAPTER 01 准备阶段 009
• 1.1 操作准备 010
• 1.1.1 *备的硬件和软件 010
• 1.1.2 工作环境 010
• 1.1.3 知识储备 011
• 1.2 软件*备知识 012
• 1.2.1 了解Photoshop 012
• 1.2.2 切图技巧 020
• 1.2.3 文档标注技巧 024
• 1.3 职业需求 027
• 1.3.1 就业方向 027
• 1.3.2 岗位能力分析 028
• 1.3.3 未来规划建议 028
• 1.4 学习目标 029
• 1.5 基础技能自测 030
• CHAPTER 02 线框图设计指南 031
• 2.1 线框图的重要性 032
• 2.1.1 线框图概念理解 032
• 2.1.2 与原型图的关系 033
• 2.1.3 与效果图的关系 036
• 2.1.4 与设计软件的关系 037
• 2.2 自适应设计与响应式设计 038
• 2.2.1 对比 038
• 2.2.2 运用 038
• 2.3 草图设计 039
• 2.4 构建栅格（网格）系统 040
• 2.4.1 如何理解栅格（网格）这个概念 040
• 2.4.2 运用 041
• 2.5 创建规范线框图 042
• 2.5.1 草图构思 042
• 2.5.2 页面尺寸和安全宽度设计 045
• 2.5.3 首屏高度控制 048
• 2.5.4 基础布局 049
• 2.5.5 文字排版与分屏设计 052
• 2.5.6 线框图细节刻画 067
• 2.5.7 基于线框图的视觉设计 067
• 2.5.8 图片输出 077
• 2.6 线框图自测 078
• CHAPTER 03 Web网格布局指南 079
• 3.1 基础知识 080
• 3.1.1 Web 界面设计中网格的概念 080
• 3.1.2 网格结构 081
• 3.1.3 绘制网格前的准备工作 089
• 3.2 网格的运用 095
• 3.2.1 页面分割方式 095
• 3.2.2 网格的扩展运用 098
• 3.3 网格设计自测 102
• CHAPTER 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
• CHAPTER 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
• CHAPTER 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
• CHAPTER 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
• CHAPTER 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
• CHAPTER 09 Web设计师的个人修养 249
• 9.1 寻找学习动力与兴趣点 250
• 9.1.1 探索设计趋势 250
• 9.1.2 建立个人网站 251
• 9.1.3 跨行业体验 251
• 9.2 赚取第 一桶金 252
• 9.3 自学技巧 254