第 1 章 UI设计基础知识
1.1 UI 设计基础 ........................... 002
1.1.1 什么是 UI 设计....................002
1.1.2 UI 设计的基本原则..............004
1.1.3 UI 设计的发展趋势..............005
1.1.4 UI 设计的常用工具..............008
1.1.5 UI 设计中的相关术语 ..........008
1.2 UI 设计要素 ............................ 010
1.2.1 点、线、面 .........................010
1.2.2 色彩....................................012
1.2.3 文字....................................016
1.2.4 风格....................................017
1.2.5 构图....................................018
1.2.6 布局....................................019
1.3 UI 设计流程 ............................ 021
1.3.1 需求分析.............................021
1.3.2 原型设计.............................021
1.3.3 视觉设计.............................023
1.3.4 切图与标注 .........................024
1.4 课后练习................................. 024
第 2 章 Photoshop基础知识
2.1 熟悉 Photoshop ..................... 027
2.1.1 Photoshop 的工作界面 ......027
2.1.2 Photoshop 的基本操作 ......029
2.2 选择与绘制图像 ....................... 031
2.2.1 创建选区.............................031
2.2.2 编辑选区.............................031
2.2.3 绘制图像.............................032
2.2.4 绘制矢量图形......................032
2.3 应用图层................................. 033
2.3.1 图层的常见类型 ..................033
2.3.2 图层的基本操作 ..................034
2.3.3 图层混合模式......................034
2.3.4 图层样式.............................035
2.4 合成图像................................. 036
2.4.1 添加文字.............................036
2.4.2 添加蒙版.............................037
2.4.3 添加滤镜.............................038
2.5 课后练习................................. 040
第 3 章 图标设计
3.1 行业知识：图标设计基础 .......... 044
3.1.1 图标的优势 .........................044
3.1.2 图标的设计风格 ..................044
3.1.3 图标的设计规范 ..................045
3.1.4 图标的设计要点 ..................047
3.2 实战案例：设计线性图标 .......... 048
3.2.1 绘制天气图标......................049
3.2.2 绘制日历图标......................052
3.2.3 绘制地图图标......................053
3.3 实战案例：设计面性图标 .......... 054
3.3.1 绘制邮件图标......................055
3.3.2 绘制搜索图标......................056
3.3.3 绘制定位图标......................057
3.4 实战案例：设计具象图标 .......... 058
3.4.1 绘制外卖功能图标...............059
3.4.2 绘制自取功能图标...............061
3.5 实战案例：设计 2.5D 图标........ 062
3.5.1 绘制“挥墨”应用图标........063
3.5.2 绘制礼品图标......................065
3.6 拓展训练................................. 067
实训 1 设计商务系列图标............067
实训 2 设计果蔬系列图标............068
3.7 AI 辅助设计............................. 069
通义万相 生成小袁宠物软件应用图标..........................069
Midjourney中文站 生成家居系统图标..........................069
3.8 课后练习 .................................. 070
第 4 章 UI控件设计
4.1 行业知识：控件设计基础 .......... 074
4.1.1 滑块的类型及设计要点........074
4.1.2 表单的类型及设计要点........075
4.1.3 按钮的类型及设计要点........076
4.2 实战案例：设计滑块................. 077
4.2.1 绘制播放控制线条滑块........078
4.2.2 绘制播放加载滑块...............079
4.3 实战案例：设计表单................. 081
4.3.1 设计旅游行程表单...............082
4.3.2 设计日历选择表单...............083
4.4 实战案例：设计按钮................. 085
4.4.1 设计播放和暂停按钮 ...........086
4.4.2 绘制点击进入按钮...............088
4.5 拓展训练................................. 090
实训 1 设计开关滑块...................090
实训 2 设计点击参与按钮............091
4.6 AI 辅助设计............................. 092
Vega AI 生成预约表单............092
Midjourney中文站 生成音量调节按钮.........................092
4.7 课后练习................................. 093
第 5 章 网页界面设计
5.1 行业知识：网页界面设计基础.... 097
5.1.1 网页界面的组成 ..................097
5.1.2 网页界面常见的类型 ...........097
5.1.3 网页界面的布局方式 ...........098
5.1.4 网页界面的设计要求 ...........099
5.1.5 网页界面的尺寸规范 ...........100
5.2 实战案例：设计家装公司官网首页 ....................................... 101
5.2.1 设计标志和导航 ..................104
5.2.2 设计 Banner.......................105
5.2.3 设计中间区域......................108
5.2.4 设计页尾区域......................110
5.3 实战案例：设计家装公司官网内页 ....................................... 111
5.3.1 设计整屋案例网页...............114
5.3.2 设计登录页 .........................117
5.4 实战案例：切片与输出家装公司网页 ....................................... 118
5.4.1 切片网页界面......................119
5.4.2 输出网页界面......................121
5.5 拓展训练................................. 122
实训 1 设计水乡土特产网站首页..122
实训 2 设计水乡土特产网站登录页....................................123
5.6 AI 辅助设计............................. 123
文心一言 获取网页设计思路和灵感123
即时 AI 生成完整智能家居页面...124
5.7 课后练习................................. 125
第 6 章
129 App 界面设计
6.1 行业知识：App 界面设计基础 ... 131
6.1.1 App 界面的组成..................131
6.1.2 App 界面常见的类型...........131
6.1.3 App 界面设计要求 ..............133
6.1.4 App 界面尺寸规范 ..............133
6.1.5 界面标注的规范 ..................134
6.2 实战案例：设计教育 App
启动页.................................... 135
6.2.1 设计启动页背景 ..................136
6.2.2 设计启动页内容 ..................138
6.2.3 设计启动页动画 ..................140
6.3 实战案例：设计教育 App
首页 ....................................... 142
6.3.1 设计状态栏和导航栏 ...........143
6.3.2 设计内容区域......................144
6.3.3 设计标签栏 .........................147
6.3.4 标注 App 首页界面 .............148
6.4 实战案例：设计教育 App 其他
页面 ....................................... 151
6.4.1 设计登录页 .........................153
6.4.2 设计个人中心页 ..................155
6.4.3 设计视频播放页 ..................157
6.5 拓展训练................................. 158
实训 1 设计读书 App 启动页.......158
实训 2 设计家居 App 首页 ..........159
6.6 AI 辅助设计............................. 160
Pixso 设计音乐 App 界面........160
MODAO 墨刀 设计食堂 App 取餐
界面.......................160
6.7 课后练习................................. 161
第 7 章 软件界面设计
7.1 行业知识：软件界面设计基础.... 166
7.1.1 软件界面的组成 ..................166
7.1.2 软件界面常见的类型 ...........166
7.2 实战案例：设计数据分析软件启动页.................................... 168
7.2.1 设计启动页背景 ..................169
7.2.2 设计启动页内容 ..................171
7.3 实战案例：设计数据分析软件着陆页.................................... 172
7.3.1 设计命令区 .........................174
7.3.2 设计导航栏 .........................174
7.3.3 设计内容区 .........................175
7.4 实战案例：设计其他页面 .......... 179
7.4.1 设计内页.............................181
7.4.2 设计详情信息页 ..................183
7.4.3 设计表单页 .........................185
7.5 拓展训练................................. 188
实训 1 设计办公软件启动页.........188
实训 2 设计办公软件内页............189
7.6 AI 辅助设计............................. 190
TreeMind 树图 快速生成公司发展时间线图.......................190
ProcessOn 生成图书管理系统原型图.......................191
7.7 课后练习................................. 193
第 8 章 综合案例：“宛木居”UI 设计项目
8.1 “宛木居”官网界面设计 .......... 197
8.1.1 设计官网首页......................197
8.1.2 设计官网内页......................199
8.1.3 设计官网登录页 ..................201
8.1.4 切片与输出网页 ..................202
8.2 “宛木居”App 界面设计.......... 203
8.2.1 设计 App 启动页.................203
8.2.2 设计启动页动效 ..................204
8.2.3 设计 App 图标 ....................204
8.2.4 设计 App 首页 ....................205
8.2.5 设计 App 发现页.................206
8.2.6 设计个人中心页 ..................207
8.2.7 标注 App 界面 ....................208
8.3 “宛木居”软件界面设计 .......... 209
8.3.1 设计软件启动页 ..................209
8.3.2 设计软件着陆页 ..................210
8.3.3 设计软件内页......................211