电子工业出版社-网上书店

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

目　　录
第一部分  知识准备
第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
参考文献	214

UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计，主要包括3个部分：交互设计、用户研究、界面设计。UI设计就像工业产品中的工业造型设计一样，是产品的重要卖点。一个友好、美观的界面会给人带来舒适的视觉享受，拉近人与产品的距离，为产品创造卖点。UI设计不是单纯的美术绘画，需要定位使用者、使用环境、使用方式，并且配合软件实现出来，为最终用户而设计，是纯粹的、科学性的艺术设计。随着科技不断发展，互联网迅猛发展和普及，各类电子设备功能越来越强大，基于计算机、手机、平板电脑等电子终端系统的相关软件应运而生，这些产品设计的人性化已不仅仅局限于硬件的外观，软件系统已成为用户直接操作和应用的主体，它会因美观实用、操作便捷而为用户所青睐。作为人机对话的主要途径，UI设计的重要性不言而喻。
本书是重庆市教育科学规划课题“社会主义核心价值观融入动画专业课程教学的路径和策略研究”的阶段成果之一。本书结构合理、内容翔实、图文并茂，在项目中讲述Photoshop CC的使用要点和难点，将艺术设计的知识与技巧融入其中，引导读者进行思考及软件操作实践，提升读者的审美、审艺能力。书中充分体现理论够用、加强实践的高职教学理念，针对UI设计，从用户研究、交互设计入手，到灌输视觉设计理念，再结合实例对设计全过程进行剖析、归纳和演绎，将“理论知识”、“软件技术”与“艺术设计”各项元素充分融合。通过课题组的精心准备，精选了图标设计、APP界面设计、UI主题设计、电视界面设计、网页界面设计等案例。本书具有以下特点：
（1）案例经典，呈现形式符合认知规律。在介绍理论知识之后，本书设计了案例学习和典型实战，由简单到复杂、逐步递进地讲述UI设计经典案例，在案例教学中深入对理论知识的学习理解，透视UI设计整个流程及技巧。
（2）技艺融合，突出职业性，强化综合适应能力的培养。本书将Photoshop CC软件设计制作技术、艺术设计能力和产品策划、用户体验融合在一起，采用任务驱动的教学模式，按照项目任务工作流程构建教学体系，利于读者构建自身技艺融合的经验体系。在任务之后，设计了知识拓展与能力拓展模块，保证知识的拓展性和丰富性，同时培养学生对知识的综合运用能力和行业意识。 
（3）产教结合，结合企业实际项目编写，突出实用性、实践性。编写过程中，结合部分实际商业项目，保证项目的实用、实践性强。
本书提供了63个彩色图片二维码，以便查看效果。为方便教学，除电子课件、案例素材、源文件外，本书还提供下述拓展资源，请登录华信教育资源网（www.hxedu.com.cn）免费注册后下载。
? 界面色调—主色及辅助用色的设定；
? 表情包的设计与制作；
? 炫酷界面的快速设计；
? 常用字体规范的科普。
 
在本书的编写过程中，重庆工程学院张小玲任主编，负责全书的架构设计、部分章节的编写及全书审稿、统稿，李欣欣、陶薇薇、杨桂宇任副主编，参与了部分章节的编写。本书的编写得到了重庆工程学院全体教师的大力支持和帮助，也得到了许多学生的支持，在此感谢他们对本书形成过程中提供的各种贡献。
由于编者水平有限，书中难免会有疏漏和不足之处，敬请大家批评指正，以期共同进步。


编  者

UI设计

张小玲，2007.12至今就职于重庆正大软件职业技术学院（现升本改名为重庆工程学院），先后担任专业教师、教研室主任等职，兼任正大恒领网络公司设计总监，主要教研方向为艺术学、数字媒体设计。

本书配套资源下载

对不起，暂无音视频资源！

UI界面设计（第2版）