新能源汽车网站首页设计与banner设计项目四 教案.pdfVIP

教案四

项目四：健康随行APP的数据展示页制作

一、教学目标

知识目标

1.能列举信息层级的四要素；

2.能掌握信息层级的处理方法；

3.能说出数据可视化的实现过程。

能力目标

1.能制作有主次信息层级划分的UI产品；

2.能制作有主次功能划分的符合产品需求的UI产品；

3.能够应用数据可视化展示数据。

素质目标

1.培养数据信息分析能力；

2.培养树立健康生活的人生观。

二、教学重点

1.明确区分和组织信息的优先级，结合亲密性原则和格式塔原理进行有效的信息分类和整

合。

2.设计时采用合适的字体、字号、颜色和间距来强调信息的重要程度和内容关联性。

3.了解不同操作系统（如iOS、Android）下的默认字体及其替代方案，以及移动端常用

的字号设定和色彩搭配规则。

4.理解数据可视化的概念和重要性，学会根据数据特点和展示目的选取柱状图、饼图、折

线图等合适图表类型。

三、教学难点

1.如何快速识别和划分信息的关键点、次要点和细节信息，并通过设计手法有效传达给用

户。

2.如何选择恰当的数据可视化形式来揭示数据背后的趋势、规律，避免误导性解读，提高

用户的理解和决策效率。

四、教学内容

1.信息层级处理方法

信息整理：引导学生掌握如何对健康随行APP的数据展示页面进行信息分类与整合，确保用

户能够快速识别和理解关键信息。详细讲解亲密性原则与格式塔原理在界面设计中的运用，

例如将相似的信息组织在一起，利用空间、颜色和视觉连接性来建立关联性和逻辑层次。

2.字体规范与应用

字体选择：阐述不同字体（如苹方、思源黑体等）对于界面风格的影响，并根据健康类

APP的定位和目标用户群体选择合适的字体。

字号大小设置：讲解移动端APP中字体大小的一般规律及最佳实践，使学生了解不同字

号在界面中的作用以及如何通过调整字号突出信息的重要性。

字间距与行距设定：介绍字间距和行距在提高阅读舒适度和信息可读性上的重要作用，

指导学生合理配置，避免因间距过紧或过松导致的阅读障碍。

3.色彩与对比创建

色彩层次构建：以黑色、深灰色和灰色为基础，为学生演示如何使用不同的文字颜色来

区分主文、副文和提示文案，强调不同信息的层级关系。

对比效果强化：深入探讨字体大小对比、颜色对比在传达信息优先级方面的功能，鼓励

学生尝试多种对比手段来提升界面的视觉冲击力和易用性。

4.数据可视化设计实践

数据可视化概念：深入解读数据可视化的定义，探讨其在帮助用户理解复杂数据、揭示

内在规律和趋势方面的重要作用。

图表类型选择：介绍柱状图、饼图和折线图等常见图表的特点和适用场景，让学生学会

根据不同健康指标选取最恰当的可视化方式。

数据呈现技巧：教授学生如何结合颜色、形状、标签、坐标轴等元素，让数据可视化结

果更加清晰、直观且具有说服力。

5.项目实施

实战演练：布置实际任务，要求学生设计并制作健康随行APP的数据展示页面，包括个

人收藏步数、健身记录、睡眠时间等内容的展示，以及查看趋势、提要等入口，强调各

部分信息的侧重点和层级关系。

五、教学活动

1.学生活动：

（1）信息层级设计实践

-学生以小组为单位，根据项目需求整理健康随行APP的各部分数据内容，确定信息优

先级，并利用亲密性原则和格式塔原理进行信息分类与布局设计。

-分别尝试不同的字体、字号和颜色组合方案，制作初步的信息层级展示界面草图或原

型。

（2）移动设备界面规范学习与应用

-学生查阅相关资料，了解iOS与Android系统的默认字体及其替代字体，并在移动端

模拟器上实际操作调整字号大小和字间距，确保符合移动端界面设计规范。

-设计并实现一个健康随行APP首页面样例，合理设置字体、字号以及色彩层次，以达

到良好的视觉效果和阅读体验。

（3）数据可视化图表制作

-根据给定的步数、健身记录、睡眠时间等数据，学生使用图表软件独立完成柱状图、

饼图、折线图等数据可视化的图表制作，并将图表嵌入到APP的数据展示页面中。

-学生通过对比分析不同图表类型的特点，讨论并选择最能有效传达健康数据变化趋势

和重要信息的可视化方式。

（4）作品展示与互评

-每位同学完成自