《UI视觉设计案例教程》教案 第2章 常见UI元素设计.docx

PAGE2

PAGE2

PAGE7

PAGE7

课题

常见UI元素设计

课时

8课时（360min）

教学目标

知识目标：

（1）了解UI设计中背景的类型

（2）了解UI设计中常见的控件

（3）了解UI设计中图标的类型、设计流程和要点

（4）掌握设计功能图标和桌面型图标的常用方法

素质目标：

（1）不断完善、优化作品，学习精益求精的工匠精神

（2）坚持理论与实践相结合的原则，提升自己的动手能力，达到学以致用的目的

教学重难点

教学重点：UI设计中背景的类型，常见的控件，图标的类型、设计流程和要点

教学难点：设计功能图标和桌面型图标的常用方法

教学方法

问答法、讨论法、讲授法、多媒体展示法

教学用具

电脑、投影仪、多媒体课件、教材、APP

教学过程

主要教学内容及步骤

考勤

【教师】使用APP进行签到

【学生】按照老师要求签到

问题导入

【教师】提出问题

常见的UI元素有哪些？这些元素对UI设计有哪些影响？

【学生】聆听、思考、主动回答问题

传授新知

【教师】总结学生的回答、引入新的知识点，讲解背景、控件等常见UI元素的相关内容

2.1背景

背景是UI中最基础的视觉元素之一，其作用是丰富界面、衬托界面主要元素。

在实际应用中，背景可以与设备的系统主题配套，也可单独设置，常见的背景类型有图像型和综合图像型等。

【教师】通过多媒体展示“图像型背景”图片（详见教材），并讲解新知

所谓图像型背景，便是直接将照片或插画作为背景，并且可以根据需要调整图像在界面中的显示区域。

【教师】通过多媒体展示“综合图像型背景”图片（详见教材），并讲解新知

综合图像型背景极具个性化，一般是照片+文字，或插画+文字的形式。由于这种背景中用到了文字，因此其效果除了受插画风格、照片风格影响外，还受字体样式和排版风格的影响。

2.2控件

按钮、下拉选框、表单、滑动条和筛选器等，是UI的基本组成元素，又称为控件。

2.2.1按钮

按钮是UI中不容忽视的视觉元素，其面积虽小，却是交互和界面细节的体现。

设计考究的按钮不仅可以提高用户的浏览体验，还可以引导浏览者点击，进而展示更多信息。

在设计按钮时应遵循以下原则：

引人注意

【教师】通过多媒体展示“引人注意的按钮”图片（详见教材），并讲解新知

按钮的颜色应区别于周围环境色，某些关键的按钮可设计鼠标经过、点击和按下的动画效果，从而为浏览者带来最佳的浏览体验。

准确反映功能

【教师】通过多媒体展示“准确反映功能的按钮”图片（详见教材），并讲解新知

按钮的面积一般不大，因此其中的文字需要言简意赅、直截了当。

符合产品风格

【教师】通过多媒体展示“符合页面风格的按钮”图片（详见教材），并讲解新知

按钮的外观应符合产品风格，如游戏网页中的按钮应注重质感的刻画，可以将金属、岩石、玻璃、木头等素材附在按钮上，以表现游戏的风格。

级别分明

页面中通常包含多个按钮，设计师要根据需求区分按钮级别，关键按钮强化处理，对次要按钮弱化处理，让按钮呈现视觉的优先级别，从而使页面逻辑清晰，主次分明。

2.2.2下拉选框

【教师】通过多媒体展示“下拉选框”图片（详见教材），并讲解新知

下拉选框主要用于展示并列级别的信息。作为一个展示信息的控件，下拉选框的外观应与产品风格保持统一，且尽量简洁，以免影响命令的正常显示。

2.2.3表单

【教师】通过多媒体展示“表单”图片（详见教材），并讲解新知

表单常用于接收用户信息的页面中，如登录页和注册页等。

表单中通常包括按钮、单选框、文本框和下拉列表等基本控件，内容以文字为主，设计时应重点区分表单内信息的级别，强化重要信息，弱化次要信息，并将同类信息等距排列，以便用户浏览。

2.2.4滑动条

【教师】通过多媒体展示“滑动条”图片（详见教材），并讲解新知

滑动条由滑轨和滑块组成，是界面中用来调整参数的控件，可用于调整音量、视频进度、界面显示区域等。

2.2.5筛选器

筛选器是界面中用来调整和筛选数据的控件。数据的类型不同，控件的表现形式也有所区别。

【教师】通过多媒体展示“筛选器”图片（详见教材），并讲解新知

时间选择器和地区选择器通常采用上下滚动的方式调整信息。

条件筛选器则让用户从给出的分类条件中选择若干限制条件，从而逐步缩小搜索范围，用户选择的选项越多，搜索结果就越精确。

【课堂互动】

【教师】提出问题：

哪种UI元素能够对UI设计作品的整体效果起到决定性作用？

【学生】思考、主动回答问题

【教师】总结学生的回答

【学生】聆听、思考、理解、记忆

课堂实践1

【教师】利用多媒体展示“矩形按钮”效果图片（详见教材），并简单介绍设计思路，扫码播放“设计矩形按钮”微课，讲解并演示矩形按钮的制作步骤，然后组织学生以小组为单位，完成设计矩形按钮的操作

步骤1启动Ph