本书是一本使用Photoshop CC 2018进行UI界面设计制作的案例教程，语言浅显易懂，配合大量精美的UI界面设计案例，讲解了有关UI界面设计的相关知识和使用Photoshop CC 2018进行UI界面设计制作的方法和技巧。使读者在掌握UI界面设计各方面知识的同时，能够在UI界面设计制作基础上做到活学活用。 本书共分为15章，全面介绍了UI界面设计中的理论设计知识以及具体案例的制作方法，第1章 UI设计基础，第2章 UI设计配色，第3章 图标按钮设计，第4章 应用软件UI设计，第5章 游戏UI设计，第6章 网页UI设计，第7章 淘宝店铺UI设计,第8章 移动端APP设计,第9章 图标按钮综合案例,第10章 UI配色设计综合案例,第11章 应用软件综合案例,第12章 游戏UI综合案例,第13章 网页UI综合案例,第14章 淘宝店铺综合案例,第15章 移动端APP综合案例。

随着硬件技术的发展，用户越来越在意能否比较轻松、快捷地使用软件。也就是说，人们的着眼点在于UI 的易用性和美观性，而UI 的易用性与美观性主要取决于UI 设计的优劣。作为目前流行的UI 设计软件——Photoshop CC 2018，凭借其强大的功能和易学易用的特性深受广大设计师的喜爱。本书从UI 设计的理念出发，**向读者介绍了使用Photoshop CC2018 设计制作UI 的理论知识和相关应用。通过大量UI 设计案例的制作和分析，让读者掌握实实在在的设计思想。
本书章节安排
第1 章 UI 设计基础。本章主要介绍UI 设计的相关基础知识，使读者对UI 设计有深入的认识和理解。
第2 章 UI 设计配色。本章主要介绍软件界面、网站UI 设计等配色技巧及其设计表现方法，通过对各种不同类型的配色案例的制作讲解，使读者快速掌握配色知识与技巧。
第3 章 图标按钮设计。本章主要讲解图标按钮设计的规则和要领，普及了有关图标按钮的发展史，通过对常见图标按钮的设计制作讲解，使读者掌握图标按钮设计的常规思路及步骤。
第4 章 应用软件UI 设计。本章主要讲解应用软件界面的设计特点，包括设计注意事项与设计原则等，也普及了现今软件的界面知识，*后通过对不同软件界面制作过程的讲解，提高读者对软件UI 设计的认识。
第5 章 游戏UI 设计。本章主要介绍游戏UI 的设计元素及设计规范，通过对多种不同游戏UI 设计的讲解，帮助读者了解游戏UI 设计原则和设计要求。
第6 章 网页UI 设计。本章主要介绍网页UI 设计的要点和设计趋势，通过对网页界面中各个模块设计制作的讲解，使读者掌握网页UI 设计方法、设计特点和设计风格。
第7 章 淘宝店铺UI 设计。本章主要介绍淘宝店铺UI 设计中的重要元素、设计理念和设计原则，通过对专题海报设计和专题广告设计的讲解，让读者掌握淘宝店铺UI 设计的技巧和方法。
第8 章 移动端App 设计。本章主要介绍移动端App 的设计特点、移动端App 的各种屏幕尺寸、移动端App 界面布局及视觉设计规范等，让读者充分了解移动端App 界面的多样性以及具体的表现形式。
第9 章 图标按钮设计综合案例。本章主要通过各种图标按钮的设计与制作让读者充分了解图标按钮的作用和特点。
第10 章 UI 配色设计综合案例。本章主要介绍四种UI 配色方案：同色系配色方案、对比配色方案、邻近色配色方案和互补色配色方案，通过对各种海报的设计与制作让读者充分了解配色方案的重要性及具体使用方法。
第11 章 应用软件设计综合案例。本章主要介绍播放器等软件界面的设计要点、设计趋势，以及软件界面设计中的人性化及其重要性，通过各种播放器的设计与制作让读者充分了解应用软件界面的设计，以及具体的表现形式。
第12 章 游戏UI 设计综合案例。本章主要介绍游戏界面的设计要求和设计流程，通过绘制游戏帮助界面、桌球网页游戏界面、拼图网页游戏界面和马会游戏界面等案例，让读者充分了解游戏界面的设计需求，以及具体的表现形式。
第13 章 网页UI 设计综合案例。本章主要通过设计制作企业网站界面、咖啡网站界面和淘宝促销网页界面等案例，让读者了解各种网页UI 的设计需求以及具体的表现形式。
本书特点
本书内容丰富、条理清晰，通过13 章的内容，为读者全面、系统地介绍了各种软件界面的设计知识，以及使用Photoshop 进行软件界面设计的方法和技巧。
● 语言通俗易懂，同时配有精美案例，通过对软件界面设计知识的讲解，帮助读者深入了解软件界面设计。
● 实例涉及面广，几乎涵盖了UI 设计的各个领域。
● 注重设计知识点和案例制作技巧的归纳总结，在讲解过程中穿插了大量的软件操作技巧和提示等，使读者更好地对知识点进行归纳吸收。
● 书中案例均配有相关视频教程和素材源文件，步骤详细，使读者轻松掌握。

第1 章 关于UI 设计…………………………………………………………… 1 1.1 关于UI 设计……………………………………………………………………… 2 1.1.1 UI 设计概念 ………………………………………………………………… 2 1.1.2 设计类别 ……………………………………………………………………… 2 1.1.3 UI 设计流程 ………………………………………………………………… 6 1.2 了解UI 设计师…………………………………………………………………… 8 1.2.1 研究界面——图形设计师 …………………………………………………… 8 1.2.2 研究人与界面的关系——交互设计师 ……………………………………… 8 1.2.3 研究人——用户测试/ 研究工程师 ………………………………………… 9 1.3 UI 设计应用软件………………………………………………………………… 9 1.3.1 图片处理——Photoshop……………………………………………………… 9 1.3.2 矢量绘图——Illustrator …………………………………………………… 10 1.3.3 矢量绘图——Sketch ……………………………………………………… 10 1.3.4 交互效果——Axure RP …………………………………………………… 11 1.3.5 小动画——Flash …………………………………………………………… 11 1.4 UI 设计的构成元素…………………………………………………………… 12 1.4.1 文字元素 …………………………………………………………………… 12 1.4.2 图形符号元素 ……………………………………………………………… 13 1.4.3 图像元素 …………………………………………………………………… 13 1.4.4 多媒体元素 ………………………………………………………………… 13 1.4.5 色彩元素 …………………………………………………………………… 13 1.5 UI 设计的重要原则…………………………………………………………… 14 1.5.1 清晰明了的设计 …………………………………………………………… 14 1.5.2 记忆负担*小化 …………………………………………………………… 14 1.5.3 设计的一致性 ……………………………………………………………… 15 1.5.4 美观大方的设计 …………………………………………………………… 15 Ⅵ 1.5.5 从用户习惯考虑 …………………………………………………………… 15 1.5.6 **性 ……………………………………………………………………… 16 1.5.7 灵活性 ……………………………………………………………………… 16 1.5.8 人性化 ……………………………………………………………………… 16 1.6 专题讨论… …………………………………………………………………… 17 1.6.1 为什么要培养设计师的产品思维？ ……………………………………… 17 1.6.2 产品层面思考 ……………………………………………………………… 18 1.7 本章小结… …………………………………………………………………… 18 第2 章 UI 设计配色… ……………………………………………………… 19 2.1 初识色彩… …………………………………………………………………… 20 2.1.1 色彩属性 …………………………………………………………………… 20 2.1.2 基础配色 …………………………………………………………………… 21 2.2 软件界面中的色彩搭配… …………………………………………………… 23 2.2.1 色调的一致性 ……………………………………………………………… 23 2.2.2 保守地使用色彩 …………………………………………………………… 24 2.2.3 色彩的选择尽可能符合人们的视觉习惯 ………………………………… 24 2.2.4 使用色彩作为功能分界的识别元素 ……………………………………… 25 2.2.5 用户拥有调整界面的配色方案 …………………………………………… 25 2.2.6 色彩搭配要便于阅读 ……………………………………………………… 26 2.2.7 控制色彩的使用数量 ……………………………………………………… 26 2.3 色彩在网站UI 设计中的作用………………………………………………… 26 2.3.1 突出主题 …………………………………………………………………… 27 2.3.2 划分视觉区域 ……………………………………………………………… 27 2.3.3 吸引用户 …………………………………………………………………… 28 2.3.4 增强艺术性 ………………………………………………………………… 35 2.4 网站UI 设计中的色彩搭配…………………………………………………… 36 2.4.1 网站UI 设计配色基础 …………………………………………………… 36 2.4.2 网站UI 设计配色原则 …………………………………………………… 38 2.5 网站UI 设计配色方法………………………………………………………… 40 2.5.1 主色 ………………………………………………………………………… 40 2.5.2 背景色 ……………………………………………………………………… 40 2.5.3 辅色 ………………………………………………………………………… 41 2.5.4 点缀色 ……………………………………………………………………… 42 2.6 网站文本配色… ……………………………………………………………… 50 2.6.1 网页与文本的配色关系 …………………………………………………… 51 2.6.2 良好的网页文本配色 ……………………………………………………… 51 2.6.3 网页文本配色要点 ………………………………………………………… 52 2.7 网页元素的色彩搭配… ……………………………………………………… 52 2.7.1 Logo 与广告 ………………………………………………………………… 52 2.7.2 导航菜单 …………………………………………………………………… 53 2.7.3 背景与文字 ………………………………………………………………… 53 2.7.4 链接文字 …………………………………………………………………… 54 2.8 手机游戏界面配色… ………………………………………………………… 55 2.8.1 手机游戏界面设计中的色彩表现 ………………………………………… 55 2.8.2 手机游戏界面设计中的色彩设计方法 …………………………………… 56 2.9 专题讨论… …………………………………………………………………… 57 2.9.1 网站界面配色的基本方法是什么？ ……………………………………… 57 2.9.2 怎样培养对色彩的敏感度？ ……………………………………………… 57 2.10 本章小结……………………………………………………………………… 58 第3 章 图标按钮设计……………………………………………………… 59 3.1 图标按钮设计概述… ………………………………………………………… 60 3.1.1 图标按钮的起源 …………………………………………………………… 60 3.1.2 图标按钮的分类 …………………………………………………………… 61 3.2 软件图标按钮设计… ………………………………………………………… 63 3.2.1 图标设计规范 ……………………………………………………………… 63 3.2.2 图标常用格式 ……………………………………………………………… 65 3.2.3 软件按钮设计 ……………………………………………………………… 66 3.3 图标设计风格… ……………………………………………………………… 66 3.3.1 简约化软件图标 …………………………………………………………… 66 3.3.2 扁平化软件图标 …………………………………………………………… 70 3.3.3 拟物化软件图标 …………………………………………………………… 76 3.4 网页图标按钮设计… ………………………………………………………… 77 3.4.1 网页中按钮的设计规则 …………………………………………………… 77 3.4.2 网页中常见的按钮类型 …………………………………………………… 79 3.4.3 网页中按钮的特点 ………………………………………………………… 80 3.4.4 网页图标的应用 …………………………………………………………… 86 3.5 网页中按钮的实际作用… …………………………………………………… 87 3.5.1 具有提交功能的按钮 ……………………………………………………… 87 3.5.2 具有链接功能的按钮 ……………………………………………………… 88 3.6 游戏界面中的按钮设计… …………………………………………………… 89 3.6.1 按钮元素 …………………………………………………………………… 89 3.6.2 游戏按钮的视觉表现 ……………………………………………………… 90 3.7 专题讨论… …………………………………………………………………… 96 3.7.1 图标的常用尺寸有哪些？ ………………………………………………… 96 3.7.2 如何设计出好的图标或按钮？ …………………………………………… 96 3.8 本章小结… …………………………………………………………………… 97 第4 章 应用软件UI 设计…………………………………………………… 99 4.1 了解软件UI 设计……………………………………………………………… 100 4.1.1 软件UI 设计基础 ………………………………………………………… 100 4.1.2 软件UI 设计原则 ………………………………