第一部分 知识准备

第1章 UI设计相关知识 1

1.1 UI设计 1

1.1.1 UI设计的概念 1

1.1.2　UI设计的流程 2

1.1.3　UI设计的规范 4

1.1.4 UI设计常用工具 6

1.2 UI设计与用户体验 7

1.2.1 UI设计与用户体验概述 7

1.2.2 影响用户体验的因素 8

1.3 知识拓展 9

1.3.1 Photoshop CC 2017入门 9

1.3.2 Photoshop CC 2017精彩新功能 9

1.3.3 图像常用基本操作 12

1.3.4 选区的基本操作 15

1.3.5 画笔工具的应用 17

本章小结 19

第2章 UI设计的常用方法 20

2.1 UI设计中的设计方法 20

2.1.1 方法与方法论 20

2.1.2 设计方法学 20

2.1.3 UI设计中实用的设计方法 21

2.2 UI设计中实用的构成方法 23

2.2.1 什么是构成 23

2.2.2 形式美法则 23

2.2.3 构成的思维方式 29

2.3 UI设计中实用的色彩搭配技巧 31

2.3.1 色彩的基本理论 31

2.3.2 色彩搭配法则 33

2.4 知识拓展 45

2.4.1 扁平化设计风格 45

2.4.2 拟物化设计风格 47

2.4.3 卡通化设计风格 47

2.5 能力拓展 47

2.5.1 图层类别 47

2.5.2 图层的基础操作 47

2.5.3 图层样式 48

2.5.4 混合模式 49

2.5.5 Photoshop中的蒙版 50

2.5.6 渐变工具 54

本章小结 56

第二部分 牛刀小试

第3章 各种UI常用元素制作 57

3.1 常用背景制作 57

3.1.1 壁纸 57

3.1.2 图标背板 62

3.2 常见控件制作 64

3.2.1 按钮的制作 64

3.2.2 下拉选择框的制作 65

3.2.3 滑动条的制作 68

3.2.4 TAB切换块的制作 70

3.2.5 气泡对话框的制作 72

3.3 创意图标设计与制作 73

3.3.1 图标设计的基本知识 73

3.3.2 利用Photoshop打造拟物化图标 77

3.3.3 利用Photoshop打造扁平化图标 82

3.3.4 利用Photoshop打造单色图标 85

3.3.5 利用Photoshop打造线性图标 87

3.4 知识拓展 87

3.4.1 图标设计的趋势—响应式图标 87

3.4.2 路径与形状工具 88

3.4.3 擦除类工具 90

3.5 能力拓展 91

3.5.1 设计制作简单网页 91

3.5.2 独立实践 97

本章小结 98

第三部分 UI设计典型实战

第4章 操作型APP—计算器界面设计 99

4.1　UI设计任务分析 99

4.2　学习目标 100

4.3　制作步骤详解 100

4.3.1 新建文件，确定尺寸规范 100

4.3.2 制作背景 100

4.3.3 制作状态栏区域 101

4.3.4 制作显示区细节 101

4.3.5 制作功能键区和数字键区细节 101

4.3.6 定稿输出有效的设计方案 102

4.4 知识拓展 103

4.4.1 图层组 103

4.4.2 APP界面设计概述 104

4.4.3 APP界面布局设计 105

4.4.4 Photoshop外部素材的载入使用 105

4.5 能力拓展 106

4.5.1 设计制作水平仪UI 106

4.5.2 设计制作拼拼乐APP界面 107

4.5.3 独立实践 111

本章小结 111

第5章 实用型软件—播放器界面设计 112

5.1　UI设计任务分析 112

5.2 学习目标 112

5.3 制作步骤详解 112

5.3.1　创建播放器 112

5.3.2　制作播放器专辑信息部分 114

5.3.3　制作播放器播放按钮部分 117

5.4 知识拓展 121

5.4.1 色彩的搭配 121

5.4.2 Photoshop中的色彩调整 121

5.5 能力拓展 122

5.5.1 设计制作DVD光盘图标 122

5.5.2 设计制作金属按钮 123

5.5.3 为黑白照片调色 123

5.5.4 独立实践 126

本章小结 126

第6章 手机主题UI设计 127

6.1 UI设计任务分析 127

6.2 学习目标 128

6.3 制作步骤详解 128

6.3.1 制作主题形象 128

6.3.2 制作手机壁纸 129

6.3.3 制作锁屏界面 130

6.3.4 制作天气插件 131

6.3.5 制作桌面图标 136

6.4 知识拓展 142

6.4.1 手机界面设计原则 142

6.4.2 手机常用尺寸与图标格式 143

6.5 能力拓展 144

6.5.1 设计制作ico图标 144

6.5.2 设计制作伪扁平化手机主题界面 145

6.5.3 独立实践 146

本章小结 146

第7章 Web界面设计实例—儿童节专题网页设计 147

7.1　UI设计任务分析 147

7.2 学习目标 148

7.3 制作步骤详解 148

7.3.1 制作头部主图 148

7.3.2 制作装饰图形 161

7.3.3 制作栏目“书籍系列” 167

7.3.4 制作栏目“服饰系列” 175

7.3.5 制作栏目“玩具系列” 178

7.3.6 制作底部区域 181

7.4 知识拓展 183

7.4.1 网站界面设计基本原则 183

7.4.2 网站界面的功能美与形式美 183

7.5 能力拓展 184

7.5.1 打造照射在透明玻璃窗上的效果 184

7.5.2 打造倾盆大雨效果 185

7.5.3 设计制作电子商务网页界面 185

7.5.4 强化全局观念 198

7.5.5 独立实践 198

本章小结 198

第8章 智能电视界面设计 199

8.1　UI设计任务分析 199

8.2　学习目标 199

8.3 制作步骤详解 199

8.3.1 制作主界面 199

8.3.2 制作影视剧列表页 205

8.3.3 制作影视剧详情页 207

8.3.4 制作播放页 209

8.4 知识拓展 211

8.4.1 智能电视界面设计 211

8.4.2 智能电视界面设计的原则 212

8.5 能力拓展 212

8.5.1 设计制作乐视TV界面 212

8.5.2 独立实践 213

本章小结 213

参考文献 2142100433B

本书按照高职高专计算机多媒体技术专业教学大纲的要求编写，是一本全面的UI界面设计与制作的基础教程。本书以培养学生的UI设计理念、方法为基本，结合Photoshop软件中常用的各种工具和方法，有针对性地剖析设计制作的实施策略与过程，以训练和提高学生UI界面设计制作技能。全书共8章，分为3个部分。第一部分是UI界面设计相关知识的介绍，包括什么是UI界面设计、UI界面设计的常用方法和设计工具、UI设计与用户体验的关系等基本知识。第二部分是各种UI界面常用元素的制作。第三部分是UI界面设计典型实战，通过5个递进的设计实例，从任务分析、功能定位、制作步骤入手对界面设计制作进行全过程讲解。本书适合作为高等院校计算机类专业的教材，也可供平面设计人员、美工人员和对UI设计感兴趣的读者阅读和参考，还可帮助UI设计师迅速进入职场角色。为方便教学，本书提供电子课件等教学资源，请登录华信教育资源网免费下载。

第1章 界面设计概述

1．1 绪论

1．2 界面设计基本原则

1．3 界面设计研究范畴

1．3．1 网页UI设计

1．3．2 移动端UI设计

1．3．3 智能设备UI设计

1．3．4 游戏及其他领域UI设计

1．4 界面设计平台及设计风格

1．4．1 智能手机及其平台发展历程

1．4．2 移动应用界面设计风格发展历程

1．4．3 界面设计流行趋势变化

1．4．4 移动应用界面设计人才需求

文中参考文献

推荐阅读文献

思考题

第2章 界面设计流程与模式

2．1 UI设计工作流程

2．2 结构设计

2．2．1 界面流程图设计

2．2．2 界面模式原型设计

2．3 交互设计

2．3．1 手势互动

2．3．2 界面跳转互动

2．3．3 基于界面优化的交互设计原则

2．4 视觉设计

推荐阅读文献

思考题

第3章 AxureRP概述

3．1 AxureRP8介绍

3．2 AxureRP8的主界面

3．2．1 菜单栏区域

3．2．2 工具栏区域

3．2．3 样式工具栏

3．2．4 页面编辑区域

3．2．5 元件库区域

3．2．6 母版库区域

3．2．7 工作区域

3．2．8 检视器区域

3．2．9 页面元素大纲区域

思考题

……

第4章 应用Axure进行界面原型设计

第5章 综合实战应用——“爱彼迎”App低保真原型设计

第6章 Adobe川ustrator概述

第7章 应用Adobe川ustrator进行界面图标设计

第8章 综合实战应用——国标设计

第9章 PhotoshopCC概述

第10章 应用PhotoshopCC进行界面美化设计

第11章 综合实战应用——界面美化设计

第12章 界面动态效果制作2100433B

本书通过大量的案例制作,详细地向用户介绍了Sketch在设计网页界面时的使用方法。分别针对Sketch绘制线框原型、设计图标、Android界面设计、iOS界面设计、PC端网站UI和UI的输出与交互进行了讲解。通过学习读者应该熟悉移动UI设计和PC端UI设计的规范和设计要点。同时掌握网页界面的输出以及交互动效的添加方法。

序

前言

第1章 移动互联网UI设计

1.1 移动端UI设计概念

1.2 移动UI的特性

1.3 移动产品界面设计的常用工具

1.4 UI设计尺寸

第2章 什么是Photoshop

2.1 初识UI设计软件之Photoshop

2.2 Photoshop应用领域

2.2.1 在UI设计领域上的一把手

2.2.2 在数码图像处理上的佼佼者

2.2.3 在动画与图像后期制作上的认可

2.3 色彩模式的认识

2.3.1 RGB色彩模式

2.3.2 CMYK色彩模式

2.3.3 灰度色彩模式

2.3.4 通道色彩模式

2.3.5 色彩模式的选择2.3.6色彩模式的切换

2.4 基本单位的认识

2.4.1 像素

2.4.2 分辨率

2.4.3 位图图像

2.4.4 矢量图图像

2.4.5 位图与矢量图的区别

2.5 储存格式的应用

2.5.1 PSD格式

2.5.2 JPEG格式

2.5.3 GIF格式

2.5.4 PNG格式

第3章 界面设定

3.1 界面介绍

3.1.1 界面组成部分

3.1.2 活动面板的使用

3.1.3 图层面板初识3.2文档基本操作

3.2 文档基本操作

3.2.1 新建空白画布

3.2.2 存储使用格式

第4章 建立选区

4.1 建立正常规则选框

4.1.1 矩形选框组

4.1.2 移动变换选框

4.1.3 选框布尔运算

4.1.4 选框快捷键组合

4.2 建立随意不规则选区

4.2.1 套索和多边形套索工具的使用

4.2.2 磁性套索的使用及抠图

4.2.3 iWatch抠图案例详解

4.2.4 人物复杂边缘抠图案例详解

4.2.5 魔棒工具使用方法

4.2.6 容差值设定

4.2.7 手机抠图之魔棒操作

4.2.8 快速选择工具

4.3 羽化和消除锯齿

4.3.1 选定羽化范围

4.3.2 羽化参数设置

4.3.3 羽化的使用方法

4.3.4 优化选区参数操作

第5章 图层深度剖析

5.1 图层组成

5.1.1 图层的使用

5.1.2 图层的分类

5.1.3 新建图层的快捷方式

5.1.4 删除图层的快捷方式

5.1.5 图层的隐藏与显示

5.2 图层填色

5.2.1 前（背）景色填充快捷操作

5.2.2 选区的优先级填色

5.2.3 图层不透明度的调整

5.3 图层顺序调整

5.3.1 图层层级关系

5.3.2 图层置底操作

5.3.3 图层置顶操作

5.4 层编组使用

5.4.1 新建组与子图层

5.4.2 编组方式的快捷运用

第6章 矢量路径操作

6.1 路径和锚点初识

6.1.1 绘制开放路径

6.1.2 绘制闭合路径

6.2 锚点的删除与添加

6.2.1 锚点的添加

6.2.2 锚点的删除

6.3 曲线路径的绘制

6.3.1 把手初识

6.3.2 曲线绘制

6.4 曲线路径分类

6.4.1 直线绘制

6.4.2 贝塞尔S形曲线绘制

6.4.3 贝塞尔C形曲线绘制

6.4.4 贝塞尔U形曲线绘制

6.4.5 Z形曲线绘制

6.4.6 对称水滴形曲线绘制

6.5 路径选择

6.5.1 路径选择工具

6.5.2 直接选择工具

6.5.3 把手及锚点的调整使用

6.6 路径应用

6.6.1 路径转选区

6.6.2 路径转蒙版

6.6.3 路径转形状

6.7 路径抠图方法

6.7.1 瓷器路径抠图

6.7.2 家具路径抠图

第7章 形状操作

7.1 形状工具组

7.1.1 矩形工具

7.1.2 圆角矩形工具

7.1.3 椭圆工具

7.1.4 多边形工具

7.1.5 直线工具

7.1.6 自定义形状工具

7.2 形状工具布尔运算

7.2.1 加法运算

7.2.2 减法运算

7.2.3 相交运算

7.2.4 排除重叠形状运算

7.2.5 合并形状组件

7.3 路径的对齐操作

7.3.1 路径的对齐方式

7.3.2 路径的分布方式

7.4 移动主题图标设计

7.4.1 计算机扁平图标设计

7.4.2 图库扁平图标设计

7.4.3 日历扁平图标设计

第8章 UI设计中文字的应用

8.1 文字工具初识

8.1.1 横排文字

8.1.2 直排文字

8.1.3 横排文字蒙版工具

8.1.4 直排文字蒙版工具

8.2 文字面板参数设置

8.2.1 字符面板

8.2.2 段落面板

8.2.3 文字调整快捷键

8.2.4 文字消除锯齿方式

8.3 文字在画册排版中的应用

8.3.1 标题的排版

8.3.2 版式的设计

第9章 图层样式

9.1 混合选项组

9.1.1 斜面和浮雕

9.1.2 投影与内阴影

9.1.3 内发光与外发光

9.1.4 叠加

9.1.5 描边

9.1.6 光泽

9.2 渐变的样式

9.2.1 线性渐变

9.2.2 径向渐变

9.2.3 角度渐变

9.2.4 对称渐变

9.2.5 菱形渐变

9.3 创建剪贴蒙版

9.3.1 剪贴蒙版的定义

9.3.2 剪贴蒙版与图层蒙版的区别

9.3.3 剪贴蒙版的作用机理

9.3.4 剪贴蒙版的使用方式

9.3.5 剪贴蒙版的使用技巧

9.3.6 剪贴蒙版的快捷操作

9.4 炫酷微拟物UI图标设计

9.4.1 手电筒图标设计

9.4.2 设置图标设计

9.4.3 钟表图标设计

第10章 使用画笔

10.1 画笔的选用

10.1.1 硬度和大小的设置

10.1.2 画笔的快捷键组合

10.1.3 画笔的预设参数

10.2 超写实破壳鸡蛋绘制

第11章 图层蒙版的应用

11.1 初识图层蒙版

11.1.1 图层蒙版的定义

11.1.2 图层蒙版的作用

11.1.3 图层蒙版的建立与删除

11.1.4 图层蒙版的应用与停用

11.2 城市夜景图层蒙版合成案例

第12章 滤镜的高级应用

12.1 素描画像制作

12.2 女人海报—3D

第13章 其他工具应用

13.1 图案的使用

13.1.1 图案的定义

13.1.2 图案的填充方式

13.2 修复工具组

13.2.1 修复画笔工具

13.2.2 修补工具

13.2.3 污点修复画笔工具

13.2.4 内容感知移动工具

13.2.5 红眼工具

13.3 调整色彩

13.3.1 亮度与对比度

13.3.2 曲线和色阶

13.3.3 色相/饱和度

13.3.4 色彩平衡

13.3.5 反相和去色

第14章 综合案列应用

14.1 图像合成

14.1.1 制作逼真木质纹理

14.1.2 制作禁烟公益海报

14.2 肖像处理

14.2.1 欧美人物磨皮教程

14.2.2 人物素描效果制作

14.3 网页设计应用

14.3.1 网站设计的页面构成

14.3.2 网页的设计原则

14.3.3 互联网网页的首页设计

14.4 移动App界面设计

14.4.1 移动界面设计规范

14.4.2 移动界面设计布局

14.4.3 UI界面设计方式

第15章 UI界面设计之Illustrator

15.1 初识AI

15.1.1 AI的界面认识

15.1.2 AI的应用领域

15.1.3 AI的快捷键

15.1.4 AI的文件格式与保存

15.2 矢量图形的绘制

15.2.1 矩形与椭圆的绘制

15.2.2 矩形转圆角

15.2.3 QQ邮箱图标的制作

15.3 描边的应用

15.3.1 剪刀工具的使用

15.3.2 刻刀工具的使用

15.3.3 MBE风格图标的应用

15.4 绘制多彩拟物图标

15.4.1 形状、路径查找器的应用

15.4.2 渐变工具的应用

15.4.3 制作渐变小图标

15.4.4 制作绚丽相册

第16章 AI的高级应用

16.1 扭曲、变换的使用

16.2 变形的使用

16.3 风格化的使用

第17章 UI界面设计之Sketch进阶（一）

17.1 了解Sketch

17.1.1 界面认识

17.1.2 Sketch图层

17.2 Sketch图形

17.2.1 图形概述

17.2.2 矩形与圆角矩形

17.2.3 三角形

17.2.4 椭圆和直线

17.2.5 五角星和多边形

17.2.6 图形转换点操作

17.2.7 布尔运算

17.3 Text文本

17.3.1 文本概述

17.3.2 文本检查器

17.3.3 文本渲染

17.3.4 文本样式

17.4 Image图片

17.4.1 图片概述

17.4.2 位图编辑

17.4.3 色彩矫正

17.5 Styling样式

17.5.1 样式概述

17.5.2 填充

17.5.3 边框

17.5.4 阴影

17.5.5 模糊

17.5.6 渐变

第18章 UI界面设计之Sketch进阶（二）

18.1 Symbols符号定义

18.2 Styling样式

18.3 UI界面中符号和样式的重要应用

18.4 前端开发导出

18.5 导出倍率关系适配

18.6 让设计更加直观、便捷

18.7 iOS Mirror概述

18.8 iOS Mirror设置及使用

第19章 三大利器结合应用

19.1 AI与PS紧密衔接

19.1.1 字体设计（一）

19.1.2 字体设计（二）

19.1.3 AI中快速实现Low Poly制作

19.1.4 移动界面中Low Poly界面设计应用

19.2 AI与PS的跨软件合作之麦克风

19.3 Sketch实现电商类App界面设计

19.4 通过AI进行logo设计

后记2100433B