本书从用户研究、交互设计入手，到视觉设计理念的分析，再结合实例对UI 界面设计全过程进行剖析、归纳和演绎，将“理论知识”“软件技术”与“艺术设计”“美育思政”各项元素充分融合,是一本全面的UI界面设计与制作的基础教程。本书结构合理、内容翔实、图文并茂，结合Photoshop、Illustrator 软件中常用的工具和方法，有针对性地剖析UI 界面设计设计与制作的实施策略与过程，精选了图标设计、手机主题界面设计、App 界面设计、网页界面设计、智能电视界面设计、其他类型人机界面设计等典型UI 界面设计项目，将艺术设计与软件操作技巧融入其中，引导学生进行思考及操作实践，提升学生的审美、审艺能力。本书适合作为高等职业院校计算机数字媒体/艺术类相关专业的教材，也可供平面设计人员、美工和对UI 设计感兴趣的读者阅读和参考。为了方便教与学，本书提供全套教学资料（案例操作视频、教纲、考纲、学时安排、课件集、教案、拓展资源等），请扫描书中二维码或登录华信教育资源网（http://www.hxedu.com.cn）免费注册后下载。

如今，融媒体、多终端的发展，使得UI 界面设计行业备受关注。UI 设计师是目前中国信息产业中最为抢手的人才之一，他们进行的工作集科学性与艺术性于一身。 本书遵循职业教育特点进行内容设计，着力于培养高素质劳动者和技术技能人才，经过多年教学实践经验编写而成，贴合移动互联时代的发展，实践项目类型丰富，知识更新及时，能更好满足教学所需。本书基于“产教融合”和“技艺融合”的教学理念,突出职业技能实际训练，强化岗位技艺综合能力。在艺术方面，将美学、设计方法、色彩搭配等艺术设计知识融入每个项目中，引导学生进行思考及操作实践，提升学生的审美、审艺能力。在技术方面，以Photoshop 为主，做界面综合处理，优化色彩，丰富质感；辅以Illustrator 做界面图标、创意图形等矢量图形处理。书中充分体现理论够用、加强实践的高职教学理念，从用户研究、交互设计入手，到灌输视觉设计理念，再结合实例对UI 界面设计全过程进行剖析、归纳和演绎，将“理论知识”“软件技术”与“艺术设计”“美育思政”各项元素充分融合。 本书采用“基于工作过程导向”的项目任务驱动法编写，充分结合新知识、新技术及行业新标准，突出职业技能实际训练，强化岗位技艺综合能力，凸显了职业特色。精选了图标设计、手机主题界面设计、App 界面设计、网页界面设计、智能电视界面设计、其他类型人机界面设计等典型UI 界面设计项目。本书具有以下特点。 （1）案例经典，呈现形式符合认知规律。在介绍理论知识之后，本书设计了案例学习和典型实战，由简单到复杂、逐步递进地讲述UI 设计经典案例，在案例教学中深入对理论知识的学习理解，透视UI 设计整个流程及技巧。、（2）技艺融合，突出职业性，强化综合适应能力的培养。本书将Photoshop、Illustrator软件设计制作技术、艺术设计能力和产品策划、用户体验融合在一起，采用任务驱动的教学模式，按照项目任务工作流程构建教学体系，利于学生构建自身技艺融合的经验体系。在任务之后，设计了知识拓展与能力拓展模块，保证知识的拓展性和丰富性，同时培养学生对知识的综合运用能力和行业意识。 （3）产教结合，结合企业实际项目编写，突出实用性、实践性。编写过程中，结合部分实际商业项目，保证项目的实用、实践性强。 （4）采用“基于工作过程导向”的项目任务驱动法编写，充分结合新知识、新技术及行业新标准，突出职业技能实际训练，强化岗位技艺综合能力，凸显了职业特色。 （5）为了方便教与学，本书提供全套教学资料（案例操作视频、教纲、考纲、学时安排、课件集、教案、拓展资源等），请扫描书中二维码或登录华信教育资源网（http://www.hxedu.com.cn）免费注册后下载。 重庆工程学院张小玲、彭赟任主编，杨桂宇、李欣欣、陶薇薇任副主编。张小玲负责全书的架构设计、部分章节的编写及全书审稿；彭赟负责部分章节的编写、统稿及部分教材资源开发；杨桂宇、李欣欣、陶薇薇参与了部分章节的编写。本书的编写得到了重庆工程学院全体教师的大力支持和帮助，也得到了许多学生的支持，在此感谢他们对本书形成过程中提供的各种贡献。 由于编者水平有限，书中难免会有疏漏和不足之处，敬请大家批评指正，以期共同进步。 编 者

第一部分 知识准备 第1章 UI设计相关知识 1.1 UI设计概述 1 1.1.1 UI设计的概念 1 1.1.2　UI设计的流程 2 1.1.3　UI设计的规范 4 1.2 UI设计与用户体验 6 1.2.1 用户体验的含义 6 1.2.2 影响用户体验的因素 6 1.3 UI设计常见风格 7 1.3.1 扁平化风格 8 1.3.2 拟物化风格 10 1.3.3 卡通化风格 10 1.3.4 立体风格 10 1.3.5 几何风格 11 1.3.6 渐变风格 11 第2章 UI设计的常用方法 2.1 UI设计中的设计方法 12 2.1.1 方法与方法论 12 2.1.2 设计方法学 12 2.1.3 UI设计中实用的设计方法 13 2.2 UI设计中实用的构成方法 13 2.2.1 什么是构成 13 2.2.2 形式美法则 14 2.2.3 构成的思维方式 17 第3章 UI设计的配色方法 3.1 色彩基础 21 3.1.1　色彩的基本理论 21 3.1.2　常用颜色模式 23 3.2 色彩搭配 23 3.2.1 界面中不同色彩的象征与联想 23 3.2.2 色彩搭配方法 27 3.2.3 色彩搭配的其他原则 28 3.3 设计软件中的色彩调整 31 3.3.1 Photoshop中的色彩调整 31 3.3.2 Illustrator中的色彩调整 31 第4章 UI设计常用工具 4.1 Photoshop 33 4.1.1 初识Photoshop 33 4.1.2 图像常用基本操作 34 4.1.3 选区的基本操作 36 4.1.4 矢量绘制类工具的应用 38 4.1.5 画笔工具的应用 40 4.1.6 图层相关知识 42 4.1.7 蒙版相关知识 46 4.1.8 擦除类工具的应用 48 4.1.9 外部素材的载入 49 4.1.10 小练手 50 4.2 Illustrator 52 4.2.1 初识Illustrator 52 4.2.2 界面设计常用图形 53 4.2.3 绘制对象的常用操作 55 4.2.4 填色和描边 55 4.2.5 直角变圆角 56 4.2.6 路径查找器与形状生成器 56 4.2.7 通过扩展路径描边让线变成面 57 4.2.8 Illustrator 工具箱中的比例缩放工具 57 4.2.9 旋转与镜像打造对称图形 58 4.2.10 图像描摹 58 4.2.11 小练手 59 4.3 其他辅助工具 62 第5章 UI界面常用壁纸与控件制作 5.1 常用壁纸制作 64 5.1.1 摄影像素壁纸 64 5.1.2 设计构成壁纸 64 5.1.3 综合图像壁纸 65 5.1.4 小练手：多种壁纸设计 65 5.2 常见控件制作 70 5.2.1 按钮 70 5.2.2 下拉选择框 72 5.2.3 进度条 74 5.2.4 TAB切换块 78 5.2.5 气泡对话框 79 5.2.6 步进器 80 5.2.7 开关 80 第6章 图标设计 6.1 图标的设计与制作概述 82 6.1.1 图标设计概述 82 6.1.2 图标的背板 83 6.1.3 图标的分类 83 6.1.4 图标的规格 87 6.1.5 图标的统一性 89 6.2 线性图标 89 6.2.1 利用Illustrator打造线性图标 89 6.2.2 多种线性图标风格 98 6.3 面性图标 102 6.3.1 面性图标设计制作思路 102 6.3.2 多种面性图标风格 102 6.4 2.5D图标 104 6.4.1 利用Illustrator打造2.5D图标 104 6.4.2 使用Photoshop打造2.5D图标 107 6.5 MBE图标 107 6.6 利用Photoshop打造拟物化图标 108 6.7 延伸阅读与练习 111 6.7.1 利用Illustrator批量导出图标 111 6.7.2 拓展练习： 利用Photoshop打造扁平化图标 114 6.7.3 拓展练习： 利用Photoshop打造单色图标 116 6.7.4 拓展练习： 利用Photoshop打造线性图标 117 6.7.5 拓展练习：利用Photoshop打造样式图标 118 6.8 独立实践 118 第7章 手机主题界面设计 7.1 手机主题界面设计概述 119 7.1.1 手机常用尺寸与图标格式 119 7.1.2 手机主题界面设计内容 120 7.1.3 手机界面设计的原则 120 7.2 项目实作：卡通小熊手机主题界面设计 121 7.2.1 界面设计任务分析 121 7.2.2 学习目标 122 7.2.3 制作步骤详解 122 7.3 项目实作：伪扁平手机主题界面设计 136 7.3.1 界面设计任务分析 136 7.3.2 学习目标 136 7.3.3 关键步骤提示 136 7.4 独立实践 137 7.5 本章小结 137 第8章 App界面设计 8.1 App界面设计概述 138 8.1.1 手机App界面视觉设计 138 8.1.2 手机App界面用户体验设计 139 8.1.3 App界面布局设计 139 8.2 项目实作：操作型App—计算器界面设计 140 8.2.1 界面设计任务分析 140 8.2.2 学习目标 141 8.2.3 制作步骤详解 141 8.3 项目实作：拼拼乐App界面设计 143 8.3.1 界面设计任务分析 143 8.3.2 学习目标 143 8.3.3 制作步骤详解 144 8.4 项目实做：水平仪App界面设计 148 8.5 独立实践 148 8.6 本章小结 148 第9章 网页界面设计 9.1 网页界面设计概述 149 9.1.1 网页界面设计基本原则 149 9.1.2 网站页面的功能美与形式美 149 9.2 项目实作：一栏式简单网页设计与制作 150 9.2.1 界面设计任务分析 150 9.2.2 学习目标 151 9.2.3 制作步骤详解 151 9.3 项目实作：多栏式电子商务网页设计与制作 156 9.3.1 界面设计任务分析 156 9.3.2 学习目标 157 9.3.3 制作步骤详解 157 9.4 项目实作：自由版式专题网页设计与制作 169 9.4.1 界面设计任务分析 169 9.4.2 学习目标 171 9.4.3 制作步骤详解 171 9.5 独立实践 203 9.6 本章小结 203 第10章 智能电视界面设计 10.1 智能电视界面设计概述 204 10.1.1 智能电视界面设计 204 10.1.2 智能电视界面设计的原则 204 10.2 项目实作：智能电视界面设计 205 10.2.1 界面设计任务分析 205 10.2.2 学习目标 205 10.2.3 制作步骤详解 206 10.3 独立实践 217 10.4 本章小结 217 第11章 其他类型人机界面设计 11.1 人机界面设计概述 218 11.1.1 人机界面概述 218 11.1.2 人机界面设计的要点 220 11.1.3 人机界面设计的原则 221 11.2 项目实作：播放器界面设计 221 11.2.1 界面设计任务分析 221 11.2.2 学习目标 222 11.2.3 制作步骤详解 222 11.3 独立实践 229 11.4 本章小结 229