《UI视觉设计案例教程》教案 第5章 软件界面设计.docxVIP

PAGE2

PAGE2

PAGE3

PAGE3

课题

软件界面设计

课时

6课时（270min）

教学目标

知识目标：

（1）了解软件界面的布局

（2）了解软件的基本界面

（3）了解软件界面设计的要点

（4）了解软件界面设计的尺寸规范

（5）了解软件界面设计的字体运用

（6）掌握软件界面的一般制作方法

素质目标：

（1） 加强基础知识的学习，养成脚踏实地、精益求精的良好品质

（2）不断实践练习，逐步提高自身的动手能力和创新能力

教学重难点

教学重点：软件界面的布局，软件的基本界面，软件界面设计的要点、尺寸规范和字体运用，软件界面的一般制作方法

教学难点：软件界面设计的要点

教学方法

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

教学用具

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

教学过程

主要教学内容及步骤

考勤

【教师】使用APP进行签到

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

问题导入

【教师】提出问题

我们电脑上常见的软件有哪些？这些软件的界面有哪些特点？

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

传授新知

【教师】总结学生的回答、引入新的知识点，讲解软件界面的布局，软件的基本界面，软件界面设计的要点、尺寸规范和字体运用等知识

5.1软件界面设计的基础知识

5.1.1软件界面的布局

【教师】通过多媒体展示“软件界面布局”图片（详见教材），并讲解新知

许多软件界面都参考传统的Windows操作系统中资源管理器的布局方式，将界面分成标题栏、主菜单区、工具栏区、功能树、状态信息区和内容展示/操作区。

【教师】通过多媒体展示“Word2013软件界面”图片（详见教材），并讲解新知

……（详见教材）

【教师】通过多媒体展示“优酷软件界面”图片（详见教材），并讲解新知

根据实际情况，软件界面的布局也可在上述布局的基础上适当调整，如合并标题栏、主菜单区和工具栏区，或者将功能树区域向下延伸至界面底部等。

……（详见教材）

5.1.2软件的基本界面

软件的功能和用途不同，界面的尺寸和呈现的效果也不同，但几乎所有软件都包括启动页、安装引导页、登录/注册页、主/细节页和详细信息页等基本界面。

1．启动页

【教师】通过多媒体展示“Photoshop软件的启动页”图片（详见教材），并讲解新知

在启动大型制图或办公软件时往往需要花费一些时间（远长于App的启动时间），一般软件都会利用启动页来缓解用户因等待而产生的焦虑，提升用户对软件的好感。

……（详见教材）

2．安装引导页

软件的安装引导页会在用户安装软件时出现，其作用是介绍软件的主要功能及显示软件的安装进度。

【教师】通过多媒体展示“upupoo软件的安装引导页”图片（详见教材），并讲解新知

引导页的尺寸没有具体规范，设计时可根据需要自由安排。

3．登录/注册页

社交类、网盘类等软件只对注册用户开放，用户如果想要使用，就必须在登录/注册页完成登录或注册。

【教师】通过多媒体展示“TIM软件的登录/注册页”图片（详见教材），并讲解新知

区别于App界面，在PC端软件的登录/注册页中，用户不但可以使用账号密码和第三方账号登录，还可通过扫描二维码登录。

4．主/细节页

【教师】通过多媒体展示“QQ音乐软件的主/细节页”图片（详见教材），并讲解新知

主/细节页的布局基本符合软件界面的常规布局方式，其中主区域（指功能树区）和细节区域（指内容展示/操作区）彼此相连，内容较多时可垂直滚动，当用户切换主区域导航项时，细节区域的内容会随之改变。

5．详细信息页

【教师】通过多媒体展示“网易云音乐软件的详细信息页”图片（详见教材），并讲解新知

详细信息页是专门显示某一特定信息的页面。当用户需要查看详细信息时，可单击对应按钮，此时会弹出一个独立的页面（即详细信息页）。

5.1.3软件界面设计的要点

软件界面设计应该以方便用户操作、浏览为基本原则，具体来说，应做到用词简练易懂、版块位置安排合理、界面整体配色舒适和关键内容位置固定。

1．用词简练易懂

【教师】通过多媒体展示“向日葵远程控制软件界面”图片（详见教材），并讲解新知

软件的导航项和按钮名称要简练、易懂，尽量使用“登录”“打开”“关闭”“领取”等一目了然的词语，不能使用模棱两可的词语。

2．版块位置安排合理

【教师】通过多媒体展示“WeGame网站首页”图片（详见教材），并讲解新知

通常界面中心位置和正上方四分之一处是最容易吸引用户注意力的区域，导航栏或Banner等重要内容应安排在此处。

3．界面整体配色舒适

软件界面的配色可以根据用户群体及软件功能来确定，总体要求是主色最好不要超过三种，不宜太过花哨鲜艳。

【教师】通过多媒体展示“AdobeIllustrator软件界面”图片（详见教材），并讲解新知

对于用户长时间使