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

本书以项目导向、任务驱动的方式进行内容设计，基于UI设计岗位的工作流程分析典型工作情境、解构关键工作任务，实操案例采用UI设计主流工具Figma。本书包括认识UI设计、了解UI设计的基本知识、掌握UI设计的风格定位、掌握UI设计中的关键元素、熟悉UI的组合设计、掌握UI设计的标注和切图、天气类App实训、购物类App实训8个项目，带领读者全方位练习UI设计，强化岗位技能。本书既可作为高职院校UI设计类课程的教材，也可作为UI设计师、交互设计师、产品经理等相关工作人员的工具用书。

项目1  认识UI设计	1
1.1  UI设计的概念及分类	1
1.1.1  UI设计的概念	1
1.1.2  UI设计的分类	2
1.2  UI设计的行业现状	4
1.2.1  UI设计的行业近况	4
1.2.2  UI设计的发展趋势	6
1.3  UI设计的工作流程	6
1.3.1  目标确定	7
1.3.2  竞品分析	7
1.3.3  草图设计	8
1.3.4  界面设计	9
1.3.5  用户测试	9
1.3.6  审查批准	9
1.4  UI设计的基本原则	10
1.4.1  统一性原则	10
1.4.2  简洁美观原则	11
1.4.3  布局合理原则	11
1.5  UI设计的常用工具	12
1.5.1  UI设计工具	12
1.5.2  图形编辑工具	14
1.5.3  设计资源库	15
1.6  学习反思	15
1.6.1  项目小结	15
1.6.2  知识巩固	15
项目2  了解UI设计的基本知识	16
2.1  基本分类	16
2.1.1  启动页、闪屏页和引导页	16
2.1.2  首页	19
2.1.3  详情页	23
2.1.4  个人中心页	24
2.2  基本框架	25
2.2.1  状态栏	26
2.2.2  导航栏	26
2.2.3  内容区域	28
2.2.4  标签栏	31
2.3  界面布局	33
2.3.1  宫格式布局	33
2.3.2  卡片式布局	34
2.3.3  列表式布局	34
2.3.4  侧拉式布局	35
2.3.5  混合式布局	35
2.4  平台规范	36
2.4.1  HarmonyOS	36
2.4.2  iOS	39
2.4.3  Android	43
2.5  学习反思	44
2.5.1  项目小结	44
2.5.2  知识巩固	44
项目3  掌握UI设计的风格定位	45
3.1  需求分析和梳理	45
3.1.1  梳理产品属性	46
3.1.2  了解目标用户	46
3.1.3  竞品分析	48
3.2  产品风格创作	49
3.3  制定设计规范	49
3.3.1  色彩规范	49
3.3.2  文字规范	50
3.3.3  图标规范	51
3.4  制作独立界面	51
3.5  学习反思	52
3.5.1  项目小结	52
3.5.2  知识巩固	52
项目4  掌握UI设计中的关键元素	53
4.1  图标的概述	54
4.1.1  图标的概念	54
4.1.2  图标的分类	54
4.1.3  图标的栅格与尺寸	58
4.2  扁平化风格图标设计	59
4.2.1  【消息】图标的制作要求与分析	59
4.2.2  【消息】图标设计实操	60
4.3  毛玻璃风格图标设计	64
4.3.1  【聊天】图标的制作要求与分析	64
4.3.2  【聊天】图标设计实操	64
4.4  组件	67
4.4.1  组件的概念	67
4.4.2  组件的分类	68
4.5  标题栏组件设计	70
4.5.1  标题栏组件的制作要求与分析	70
4.5.2  标题栏组件设计实操	71
4.6  轻拟态开关组件设计	73
4.6.1  轻拟态开关组件的制作要求与分析	73
4.6.2  轻拟态开关组件设计实操	74
4.7  学习反思	76
4.7.1  项目小结	76
4.7.2  知识巩固	77
项目5  熟悉UI的组合设计	78
5.1  优教App登录页设计	79
5.1.1  优教App登录页的制作要求与分析	79
5.1.2  优教App登录页设计实操	80
5.2  优教App首页设计	83
5.2.1  优教App首页的制作要求与分析	83
5.2.2  优教App首页设计实操	84
5.3  优教App课程页设计	94
5.3.1  优教App课程页的制作要求与分析	94
5.3.2  优教App课程页设计实操	95
5.4  优教网页端首页设计	99
5.4.1  优教网页端首页的制作要求与分析	99
5.4.2  优教网页端首页设计实操	100
5.5  学习反思	105
5.5.1  项目小结	105
5.5.2  知识巩固	105
项目6  掌握UI设计的标注和切图	106
6.1  标注的概述	106
6.1.1  标注的概念和作用	106
6.1.2  标注的内容及规范	107
6.2  界面标注	109
6.2.1  优教App首页的标注要求与分析	109
6.2.2  优教App首页标注实操	110
6.3  切图的概述	111
6.3.1  切图的概念和作用	111
6.3.2  切图的规范	112
6.3.3  切图的工具	114
6.4  优教App登录页切图	115
6.4.1  优教App登录页的切图要求与分析	115
6.4.2  优教App登录页切图实操	115
6.5  学习反思	117
6.5.1  项目小结	117
6.5.2  知识巩固	117
项目7  天气类App实训	119
7.1  产品分析与风格定位	120
7.1.1  产品分析	120
7.1.2  风格定位	121
7.2  草图及原型图设计	122
7.2.1  草图绘制	122
7.2.2  原型图设计	123
7.3  启动图标设计	123
7.3.1  知天气App启动图标分析	123
7.3.2  知天气App启动图标参数设置	124
7.3.3  知天气App启动图标实践过程	124
7.4  闪屏页设计	126
7.4.1  知天气App闪屏页分析	126
7.4.2  知天气App闪屏页参数设置	126
7.4.3  知天气App闪屏页实践过程	127
7.5  引导页设计	128
7.5.1  知天气App引导页分析	128
7.5.2  知天气App引导页参数设置	128
7.5.3  知天气App引导页实践过程	129
7.6  首页设计	132
7.6.1  知天气App首页分析	132
7.6.2  知天气App首页参数设置	132
7.6.3  知天气App首页实践过程	132
7.7  预测页设计	137
7.7.1  知天气App预测页分析	137
7.7.2  知天气App预测页参数设置	138
7.7.3  知天气App预测页实践过程	138
7.8  日历页设计	141
7.8.1  知天气App日历页分析	141
7.8.2  知天气App日历页参数设置	141
7.8.3  知天气App日历页实践过程	142
7.9  学习反思	144
7.9.1  项目小结	144
7.9.2  知识巩固	144
项目8  购物类App实训	145
8.1  产品分析与风格定位	146
8.1.1  产品分析	146
8.1.2  风格定位	147
8.2  草图及原型图设计	148
8.2.1  草图绘制	148
8.2.2  原型图设计	149
8.3  启动图标设计	150
8.3.1  艺购App启动图标分析	150
8.3.2  艺购App启动图标参数设置	150
8.3.3  艺购App启动图标实践过程	151
8.4  闪屏页设计	154
8.4.1  艺购App闪屏页分析	154
8.4.2  艺购App闪屏页参数设置	154
8.4.3  艺购App闪屏页实践过程	155
8.5  登录页设计	156
8.5.1  艺购App登录页分析	156
8.5.2  艺购App登录页参数设置	157
8.5.3  艺购App登录页实践过程	157
8.6  首页设计	159
8.6.1  艺购App首页分析	159
8.6.2  艺购App首页参数设置	159
8.6.3  艺购App首页实践过程	160
8.7  详情页设计	163
8.7.1  艺购App详情页分析	163
8.7.2  艺购App详情页参数设置	164
8.7.3  艺购App详情页实践过程	164
8.8  个人中心页设计	168
8.8.1  艺购App个人中心页分析	168
8.8.2  艺购App个人中心页参数设置	169
8.8.3  艺购App个人中心页实践过程	169
8.9  学习反思	172
8.9.1  项目小结	172
8.9.2  知识巩固	172

党的二十大报告中明确提出，加快发展数字经济，促进数字经济和实体经济深度融合，打造具有国际竞争力的数字产业集群。UI设计不仅是一种美学表现，也是增强用户体验的关键因素。本书充分贯彻党的二十大精神，强化现代化建设人才支撑，秉持“尊重劳动、尊重知识、尊重人才、尊重创造”的思想，以企业人才岗位需求为目标，突出知识与技能的有机融合，让学生在学习过程中举一反三，创新思维，以适应高等职业教育人才的建设需求。
UI是User Interface（用户界面）的简称，其具体设计内容是针对智能手机、计算机及其他智能化电子设备的应用程序或网页，展开的一系列对界面交互与界面视觉的设计。随着智能化设备的快速发展，UI设计师的需求量也在不断增大，各大互联网企业、智能化设备企业、科技企业都陆续设立了与UI设计相关的部门，还出现了专门从事UI设计的公司。
本书根据职业教育特点进行内容设计，基于UI设计岗位的工作流程，分析典型的工作情境，解构关键工作任务，根据学生的认知规律和岗位工作流程分解出关键工作任务，在每个工作任务中设置教学内容，以项目式、任务式的方式推进学习，加强对学生的职业技能训练，提高学生的岗位综合能力，凸显职业教育特色。
本书紧跟UI设计领域的最新趋势，及时更新UI设计知识和相关工具，帮助读者了解和应对快速变化的设计需求和发展方向。本书项目1～项目3主要介绍UI设计的概念及分类、行业现状、工作流程、基本原则、常用工具、基本分类、基本框架、界面布局、平台规范，以及UI设计的风格定位；项目4～项目5主要介绍UI设计中的关键元素和UI的组合设计，并通过实际操作演示了相关内容的制作过程；项目6主要介绍UI设计的标注和切图，并通过案例和实际操作演示了实际工作中的标注和切图过程；项目7～项目8基于以上学习内容对天气类App和购物类App进行实战演练，带领读者全方位练习UI设计，强化岗位技能。
本书具有以下特点。
1．配备丰富案例
本书在知识点讲解过程中，配备了大量日常生活中常用的应用程序案例，内容通俗易懂，可以提高读者对学习的兴趣。
2．采用主流工具
据调研，目前腾讯、字节跳动、大疆等企业均已使用Figma软件进行UI设计。因此，本书的实操模块更新了以往的Adobe Photoshop、Adobe Illustrator等基础设计工具，采用当前UI设计业内的主流工具Figma，读者不仅可以学习Figma的使用方法，还可以提高与市场的对接能力。
3．配备实操视频
本书配备实操视频，与书中的实操内容相辅相成，读者可以扫描实操任务中的二维码直接在线观看实操视频，提高学习效率。
本书由广东工贸职业技术学院的教师组织编写，由周翠菊、冼芸安担任主编，由张幼晖、隋嫦婉担任副主编，参编的还有王毓成、漆晟，全书由周翠菊统稿。
为了方便教师教学，本书配有电子课件及相关资源，包括教学PPT、教案、授课计划、实操设计素材等，读者可登录华信教育资源网（www.hxedu.com.cn）注册后免费下载，如有问题可在网站留言板留言或与电子工业出版社联系（E-mail：hxedu@phei.com.cn）。
由于编者水平有限，书中难免存在一些疏漏和问题，不足之处敬请同行专家与广大读者批评指正。



编  者

本书配套资源下载

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

UI设计与实践（微课版）