内容介绍
本书着重讲解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
