艺术设计必修课：UI设计

在生活中我们经常会遇到与ui设计相关的东西，例如网购、使用app、登陆企业网页、登陆游戏时使用的交互界面等。好的ui设计可以一下子抓住观者的注意力，有效地推广自己的产品和理念，让浏览者迅速找到自己要找的信息。本书针对视觉传达设计专业的师生，解决如何将ui界面设计得舒适、吸引人的问题，从布局、文字、图片、色彩等内容讲起，对基础内容的讲解较为深入，与实际使用接轨，并列举了正误案例，使读者牢靠地掌握版式设计的基础知识。

UI 是user interface（用户界面）的缩写，人们在计算机、手机或操作屏上看到的界面都属于UI。简单来说，UI 就是为人和互联网或设备互动交流提供的一种更便捷的方式。
在目前这个由互联网、新媒体和交互技术支撑的信息时代，软件产品界面内的信息结构使界面呈现出层层递进、相互嵌套或彼此交错的状态，反映到UI 上就是界面的信息层级，其对于用户获取信息的效果和效率具有重要意义。在UI设计中，主要通过对人机交互操作界面的视觉艺术设计进行优化，将各种视觉艺术元素进行组合，为用户提供更为舒心的界面，实现用户满意度的提升。在开展UI 设计的过程中，需要在用户群体的基础上，满足不同用户的风格需求。在视觉元素应用中，需要对用户的视觉体验进行分析，以更好地提升用户获取信息的效率。因此，可以通过分析视觉艺术元素在UI 设计中的应用，对其中的视觉元素进行优化，在文字元素、图标样式以及布局设计等方面进行优化以便改善用户的满意度。在最初的UI 优化中，更多的是进行图片的装饰，但是在人们意识不断提升的情况下，用户界面设计的内容更为丰富，能够在对用户习惯进行分析的同时，结合用户的审美习惯，更好地开展视觉元素设计，实现用户应用体验的增强。在物质生活条件不断提升的情况下，人们对于UI 设计的要求更高，特别是在美观性方面，用户体验更为明显。通过实现视觉艺术元素的应用，能够实现各项用户体验的改善，推动UI 设计水平的提升。在进行UI 设计特别是界面要素组合编排设计中，设计师需要对其中的众多视觉艺术元素进行优化，对其中的文本、色彩以及图形等进行重新组织架构，从而在不同艺术设计手法下，进行操作信息的传递。
综上所述，在UI 设计的过程中，应该将视觉艺术元素的作用充分发挥出来，在进行视觉形式表达的同时，为用户营造一个优质的使用环境。本书正是以此为编写的出发点，努力为读者提供良好的UI 设计及要素组合编排的解决方案。同时融入课程思政元素，帮助读者建立良好的文化自信。

刘春雷
2023年冬，写于沈阳航空航天大学艺术馆

UI设计即界面设计，本书由UI编排基础、UI编排中的图标、UI编排中的布局与构图、UI编排中的文字和图片、UI编排中的配色五章内容构成。书中注重UI设计的新思维、新观念、新知识和新技巧，同时融入了课程思政元素，利于读者树立文化自信，并运用跨学科思维以拓宽学生视野，以简明的文字和大量国内外优秀设计案例介绍UI设计的方法和在实际设计中的运用。
本书既可作为各类院校UI设计专业的教材，也可作为UI设计相关领域从业人员的参考用书。

第一章 UI 编排基础 001	
一、UI 设计概述 002
1 UI 设计的定义 
2 UI 设计相关术语 
3 手势交互方式
二、UI 设计的视觉规范 006
1 度量单位 
2 界面尺寸
三、界面类型 012
1 引导页 
2 引导页类型 
3 首页 
4 个人中心页 
5 列表页
6 音视频播放页 
7 详情页 
8 注册登录页面 
9 侧导航页 
10 图表页
四、游戏界面类型 028
1 登录界面 
2 加载界面 
3 关卡界面 
4 情景提示界面 
5 地图界面
6 结算界面
五、网页界面设计 034
1 网站 
2 组成网页的对象 
3 网页的基本编排方式
六、网页界面分类 040
1 个人型网页 
2 门户型网页 
3 企业型网页 
4 功能型网页
5 娱乐型网页 
6 机构型网页
	
第二章 UI 编排中的图标 045
一、UI 中的图标设计 046
1 图标的含义 
2 图标设计规范 
3 图标设计中常见的问题
二、UI 图标中的常用图形  050
1 圆形、椭圆形 
2 正方形、长方形 
3 三角形
三、图标的风格种类  052
1 拟物化图标 
2 扁平化图标 
3 MBE 风格图标 
4 像素风格图标
5 线性风格图标 
6 立体风格图标
四、游戏界面中的图标  058
五、游戏界面图标分类  060
1 功能性图标 
2 道具性图标
六、网页界面中的图标 062

第三章 UI 编排中的布局与构图 063
一、UI 编排中的点、线、面  064
1 UI 编排中的点 
2 UI 编排中的线 
3 UI 编排中的面
二、UI 编排中的视觉规律 068
1 视觉中心 
2 视觉重心 
3 视域 
4 视觉流程 
5 版面率
三、UI 编排设计的方式 074
1 标准式 
2 定位式 
3 斜置式 
4 中轴式 
5 文字式
6 图片式 
7 水平式 
8 指示式
四、UI 编排中的黄金比例 080
1 黄金比例 2 UI 设计中的黄金比例
五、网格化构图 084
六、三角形构图  087
七、对角线构图  089
八、放射形构图  091
九、S 形构图  093
十、对齐元素  095
1 齐左 
2 居中 
3 齐行
十一、满版式构图 097
十二、标准式构图  098
十三、体现条理  099
十四、倒L形构图 101
十五、F形浏览模式  103
	
第四章　UI 编排中的文字和图片 105
一、UI 编排中的文字  106
1 字体基础 
2 字体样式
二、文字编排专业术语  111
1 中文字符与字体大小 
2 英文字符与字体大小 
3 字符空格和字距
4 行空格和行距 
5 复合字体
三、 UI 字体规范 114
1 系统字体 
2 字体色彩
四、合适的字距与行距 116
五、强调和区分  118
六、选用合适的字体  120
1 游戏界面字体 
2 强调文字
七、文字图像化 124
八、界面编排中的图片  126
1 位图和矢量图 
2 常见的位图图片格式 
3 常见的矢量图图片格式
九、图片的形态与处理方法 131
1 大面积使用图片 
2 图片的裁剪处理 
3 图片的局部提取运用
4 图片的装饰效果
十、合理裁切图片 134
十一、图片最大化  136
十二、 添加装饰元素 138
	
第五章　UI 编排中的配色 139
一、色彩的基础知识  140
1 三原色 
2 间色 
3 复色
二、色彩三要素 141
1 要素1： 色相 
2 要素2： 明度 
3 要素3： 纯度
三、色彩模式  146
1 RGB 色彩模式 
2 CMYK 色彩模式
四、色彩的感觉 148
1 色彩的温度感 
2 色彩的距离感 
3 色彩的体量感
4 色彩的重量感
五、界面中的常用色及意象表达 151
1 红色 
2 橙色 
3 黄色 
4 绿色 
5 蓝色 
6 紫色 
7 黑色 
8 白色
六、利用色彩增加文本可读性  159
七、利用色彩表现食欲  161
八、利用黑色渲染高品质氛围 163
九、为页面增加趣味性  165
十、利用色彩表现浪漫感  167
十一、利用色彩表现年龄 169
十二、利用色彩制造对比 171
十三、利用色彩提高界面视觉度 173
十四、利用色彩表现压迫感 175
十五、利用色块区分界面信息 177

附录　各类界面参考模板 179	

参考文献 192