破译Web UI——网页UI设计规范、流程与实战案例

破译Web UI——网页UI设计规范、流程与实战案例

查阅电子书
手机扫码
  • 微信扫一扫

    关注微信公众号

编辑推荐

×剖析和运用Web 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

破译Web UI——网页UI设计规范、流程与实战案例是2018年由人民邮电出版社出版,作者Chuckie。

得书感谢您对《破译Web UI——网页UI设计规范、流程与实战案例》关注和支持,如本书内容有不良信息或侵权等情形的,请联系本网站。

你可能喜欢
HTML+CSS网页设计与布局从入门到精通 电子书
  6小时HTML CSS关键技术视频教程   6小时网页制作视频教程   书中实例源文件/效果文件/制作素材   资深网页设计师倾心打造,融合多年项目经验和工作心得。   抛弃过时的HTML标记和属性,详细介绍Web标准化网页制作必备的HTML标记和属性   全面讲解CSS控制页面表现的方法,包括控制文字、图像、背景、表格、表单、导航链接等。   深入剖析CSS布局的核心技术和实际操作方法,包括固定宽度布局、变宽度布局。   逐个效果解决IE6/IE7/Fire
全链路UI设计 电子书
本书主要讲解新手设计师需要掌握的技能及练习方法。
数艺社 游戏UI设计实战 电子书
游戏UI设计实用性教程,案例丰富,步骤讲解细致,帮助读者轻松学习游戏UI设计。 游戏图标的设计、游戏界面的设计、界面风格的确定等在本书中均有详细介绍,学习更全面。 小清新、可爱、特效、酷炫,风格多样。设计原则与应用技巧结合,学以致用。
UI设计基础培训教程 电子书
针对零基础的读者编写,入门级读者快速而全面掌握UI界面设计的参考书。
用户至上:移动UI设计实战指南 电子书
一本从用户体验的角度出发,重点讲解移动UI设计方法的专业教程。