《UI设计技术与应用案例解析》以案例为指引，以理论做铺垫，全面系统地对UI设计的方法与技巧进行了讲解。书中用通俗易懂的语言、图文并茂的形式对Photoshop、Illustrator、MasterGo软件在UI设计中的应用进行了细致的剖析。 全书共8章，遵循由浅入深、从基础知识到案例进阶的学习原则，对UI设计的基础知识、图像处理相关知识、图形元素的设计技能、产品设计交互工具、组件与图标设计、App界面设计、网页界面设计以及软件界面设计等内容进行了逐一讲解。 《UI设计技术与应用案例解析》结构合理、内容丰富、易学易懂，既有鲜明的基础性，也有很强的实用性。《UI设计技术与应用案例解析》既可作为高等院校相关专业的教学用书，又可作为培训机构以及图形设计爱好者的参考书。
《UI设计技术与应用案例解析》紧密围绕素养、知识、技能三位一体的教学目标，从爱国情怀、社会责任、法治思维、职业素养等维度落实课程思政；提高学生的创新意识、合作意识和效率意识，培养学生精益求精的工匠精神，弘扬社会主义核心价值观。
全书共8章，遵循由浅入深、从基础知识到案例进阶的学习原则，对UI设计的基础知识、图像处理相关知识、图形元素的设计技能、产品设计交互工具、组件与图标设计、App界面设计、网页界面设计以及软件界面设计等内容进行了逐一讲解。
UI设计是指对软件的人机交互、操作逻辑、界面布局的整体设计。其中，界面设计是本书的重点介绍方向。界面设计不只是单纯的美术绘画，而是需要根据使用者、使用环境、使用方式，为最终用户进行的设计，是纯粹的、科学性的艺术设计。
根据设计者需求，可以在Illustrator软件中设计矢量图形，然后调入Photoshop、MasterGo等软件中做进一步处理。同时，也可将AI、JPG等文件导入Photoshop软件中进行编辑处理。除此之外，MasterGo软件还可以多人协同地进行产品设计，从而节省时间，提高工作效率。
随着软件版本的不断升级，目前Photoshop、Illustrator等软件的技术已逐步向智能化、人性化、实用化方向发展，旨在让设计师将更多的精力和时间都用在创新上，以便给大家呈现出更完美的设计作品。
本教材从读者的实际出发，以浅显易懂的语言和与时俱进的图示来进行说明，理论与实践并重，注重职业能力的培养。党的二十大精神贯穿素养、知识、技能三位一体的教学目标，从爱国情怀、社会责任、法治思维、职业素养等维度落实课程思政，提高学生的创新意识、合作意识和效率意识，培养学生精益求精的工匠精神，弘扬社会主义核心价值观。
内容概述
本书共8章，各章内容如下。
章 内容导读 难点指数
第1章 主要介绍UI设计的概念、设计流程、设计方向、设计原则以及设计规范 ★★☆
第2章 主要介绍Photoshop软件的基础知识、图形的绘制与填充、文本的创建与编辑、蒙版和通道、图像的色彩调整以及图像的特效应用 ★★☆
第3章 主要介绍Illustrator软件的基础知识、基础图形的绘制与填充、路径的绘制与编辑、对象的选择与变换、文本的创建与编辑以及特效与样式的添加 ★★☆
第4章 主要介绍MasterGo软件的工作界面、基础工具、组件和样式、原型交互、协同评论以及切图和导出 ★★☆
第5章 主要介绍UI控件、组件的构成，按钮的组成、设计类型与设计风格，图标的类型、设计风格以及设计规范 ★★★
第6章 主要介绍App的界面类型、界面视觉设计、ios系统和Android系统手机设计规范 ★★★
第7章 主要介绍网页常用界面类型、界面设计原则、界面布局以及界面设计规范 ★★★
第8章 主要介绍PC客户端软件界面的常用类型、界面设计原则、界面框架类型以及界面设计规范 ★★★
本书特色
本书采用案例解析 理论讲解 课堂实战 课后练习 拓展赏析的结构进行编写，内容由浅入深，循序渐进，让读者带着疑问去学习知识，并从实战应用中激发学习兴趣。
1）专业性强，知识覆盖面广
本书主要围绕UI设计的相关知识点展开讲解，并对不同类型的案例制作进行解析，让读者了解并掌握该行业的一些设计原则与设计要点。
2）带着疑问学习，提升学习效率
本书首先对案例进行解析，然后再针对案例中的重点工具进行深入讲解，可让读者带着问题去学习相关的理论知识，从而有效提升学习效率。此外，本书所有的案例都经过了精心的设计，读者可将这些案例应用到实际工作中。
3）行业拓展，以更高的视角看行业发展
本书在每章结尾部分都安排了拓展赏析板块，旨在让读者掌握了本章相关技能后，还可了解到行业中一些有意思的设计方案及设计技巧，从而开拓思维。
4）多软件协同，呈现完美作品
一份优秀的设计作品，通常是由多个软件共同协作完成的。UI设计也不例外，在创作本书时，添加了Photoshop、Illustrator、MasterGo软件协作章节，即图像处理、图形设计和产品设计，让读者可以根据需要选择最合适的软件进行操作。
读者对象
从事UI设计的工作人员。
高等院校相关专业的师生。
培训班中学习版面设计的学员。
对平面设计有着浓厚兴趣的爱好者。
想通过知识改变命运的有志青年。
想掌握更多技能的办公室人员。
本书由邹平吉编写，在编写过程中力求严谨细致，但由于编者水平有限，疏漏之处在所难免，望广大读者批评指正。
编者
素材文件 课件、教案、视频
第1章
UI设计基础知识
1.1UI设计概述 2 1.1.1UI设计的概念 2 1.1.2UI设计的基本原则 3 1.1.3UI设计的流程 6 1.1.4UI设计的常用软件 7 1.2UI设计方向 8 1.2.1用户研究 8 1.2.2交互设计 8 1.2.3界面设计 8 1.3UI界面设计原则 9 1.3.1一致性原则 9 1.3.2准确性原则 9 1.3.3可读性原则 9 1.3.4布局合理化原则 10 1.3.5系统操作合理性原则 10 1.3.6系统响应时间原则 11 1.4UI设计规范 11 1.4.1文字应用规范 11 1.4.2图片应用规范 12 1.4.3色彩应用规范 13 课后练习 收集不同类别的UI界面设计 19 拓展赏析 中国的榫卯工艺 20
第2章
图像处理知识准备
2.1基础知识详解 22 2.1.1案例解析：制作九宫格效果 22 2.1.2认识工作界面 23 2.1.3图像的辅助调整 24 2.1.4图像的显示调整 27 2.1.5图像的变形与变换 29 2.1.6图像的修饰与修复 31 2.2图形的绘制与填充 35 2.2.1案例解析：重构图像显示 35 2.2.2选框工具组 36 2.2.3画笔工具组 36 2.2.4钢笔工具组 37 2.2.5形状工具组 38 2.2.6取样、填充颜色 39 2.2.7渐变工具 40 2.3文本的创建与编辑 40 2.3.1案例解析：制作电商Banner 40 2.3.2认识文本工具 42 2.3.3创建文本 42 2.3.4编辑文本 43 2.4蒙版和通道 44 2.4.1案例解析：制作圆角方形头像 44 2.4.2认识通道 45 2.4.3认识蒙版 45 2.5图像的色彩调整 46 2.5.1案例解析：提取图像线稿 46 2.5.2色阶 47 2.5.3曲线 47 2.5.4色相/饱和度 48 2.5.5色彩平衡 49 2.5.6去色 49 2.6图像的特效应用 50 2.6.1案例解析：制作动感飞驰效果 50 2.6.2图层样式 50 2.6.3独立滤镜组 51 2.6.4特效滤镜组 53 课堂实战 制作平铺背景效果 55 课后练习 制作千图成像效果 57 拓展赏析 传世名画：清明上河图 58
第3章
图形元素的设计技能
3.1基础知识详解 60 3.1.1案例解析：快速调整图像尺寸 60 3.1.2认识工作界面 61 3.1.3画板的尺寸调整 63 3.2基础图形的绘制与填充 63 3.2.1案例解析：绘制卡通云朵 63 3.2.2绘制线段和网格 64 3.2.3绘制几何形状 65 3.2.4构建新的形状 67 3.2.5设置填充与描边 68 3.3路径的绘制与编辑 72 3.3.1案例解析：绘制手账本简笔画 72 3.3.2绘制路径 73 3.3.3调整路径 74 3.3.4编辑路径 75 3.4对象的选择与变换 76 3.4.1案例解析：制作流动的山脉 76 3.4.2对象的选择 78 3.4.3对象的对齐和分布 79 3.4.4对象的排列 80 3.4.5 对象的变换 80 3.4.6 对象的高级编辑 82 3.5文本的创建与编辑 84 3.5.1案例解析：制作网站Banner 84 3.5.2创建文本 87 3.5.3编辑文本 88 3.6特效与样式的添加 89 3.6.1案例解析：制作多重文字描边效果 89 3.6.2Illustrator效果 91 3.6.3Photoshop效果 91 3.6.4外观与图形样式 92 课堂实战 制作拆分文字效果 94 课后练习 制作立体按钮 95 拓展赏析 中国的水墨动画 96
第4章
产品设计交互工具
4.1认识MasterGo 98 4.1.1MasterGo工作界面 99 4.1.2视图选项调整 100 4.1.3标尺和参考线 101 4.2MasterGo基础工具 103 4.2.1案例解析：绘制半圆效果 103 4.2.2选择工具 104 4.2.3容器工具 105 4.2.4形状工具 106 4.2.5钢笔工具 107 4.2.6文本工具 108 4.3MasterGo组件和样式 108 4.3.1案例解析：应用预设样式 108 4.3.2创建组件 110 4.3.3应用预设组件 111 4.3.4创建样式 111 4.4MasterGo原型交互 114 4.4.1案例解析：原型内容的固定与滚动 114 4.4.2了解原型模式 116 4.4.3交互触发和动作 117 4.4.4交互动画和效果 118 4.4.5溢出行为 119 4.4.6约束设置 119 4.4.7原型演示 119 4.5MasterGo协同评论 120 4.5.1文件分享 120 4.5.2了解标注模式 121 4.5.3评论工具 122 4.6MasterGo切图和导出 123 4.6.1创建切图 123 4.6.2导出预设 123 4.6.3导出Sketch格式 124 课堂实战 制作网站登录界面 125 课后练习 制作App首页界面 127 拓展赏析 中国喜庆的装饰艺术：年画 128
第5章
组件与图标设计
5.1 UI的控件、组件 130 5.1.1UI控件详解 130 5.1.2UI组件详解 131 5.2按钮的设计 133 5.2.1按钮的组成 133 5.2.2按钮的设计类型 133 5.2.3按钮的设计风格 136 5.3图标的设计 137 5.3.1图标的类型 137 5.3.2图标的设计风格 138 5.3.3图标的设计规范 140 课堂实战 音乐应用图标设计 143 课后练习 制作便签图标 148 拓展赏析 中国古代三大印花工艺 149
第6章
App界面设计
6.1App常用界面类型 152 6.1.1闪屏页 152 6.1.2引导页 153 6.1.3注册登录页 154 6.1.4空白页 155 6.1.5首页 155 6.1.6个人中心页 157 6.2App界面视觉设计 159 6.2.1颜色规范 160 6.2.2图片规范 161 6.2.3边距和间距 161 6.3ios设计规范指南 162 6.3.1界面尺寸 162 6.3.2文字规范 164 6.4Android设计规范指南 165 6.4.1界面尺寸 165 6.4.2文字规范 166 课堂实战 音乐App界面设计 167 课后练习 制作App首页界面 174 拓展赏析 中国传统玩具 175
第7章
网页界面设计
7.1网页常用界面类型 178 7.1.1首页 178 7.1.2栏目页 179 7.1.3详情页 179 7.1.4专题页 180 7.2网页界面设计详解 181 7.2.1网页设计原则 182 7.2.2网页的界面布局 184 7.3网页界面设计规范 187 7.3.1界面尺寸 188 7.3.2字体规范 189 7.3.3颜色规范 190 7.3.4图片规范 190 课堂实战 音乐网站设计 191 课后练习 制作家居网站界面 201 拓展赏析 中国四大国粹 204
第8章
软件界面设计
8.1软件界面常用类型 206 8.1.1启动页 206 8.1.2着陆页 206 8.1.3集合页 207 8.1.4主/细节页 207 8.1.5详细信息页 207 8.1.6表单页 208 8.2软件界面设计详解 208 8.2.1软件界面设计原则 209 8.2.2软件界面框架类型 210 8.3软件界面设计规范 212 8.3.1界面尺寸 212 8.3.2字体规范 213 8.3.3图标规范 215 课堂实战 音乐软件界面设计 215 课后练习 制作视觉设计平台软件界面 226 拓展赏析 中国名山 227 参考文献 228
书单推荐
