《UI界面设计》教案.docx

《UI界面设计》教案.docx

《《UI界面设计》教案.docx》由会员分享，可在线阅读，更多相关《《UI界面设计》教案.docx（23页珍藏版）》请在冰豆网上搜索。

《UI界面设计》教案

教案

课程名称：

UI界面设计

授课教师：

制订时间：

1/21

UI界面设计

第一章UI综述

课

题：

UI综述

授课教师：

教学目标：

通过本章学习使学生了解

UI在中国的发展，以及

UI的是什么。

教学重点：

掌握UI在中国的发展，以及UI是什么。

教学难点：

掌握UI是什么。

教学准备：

课本、参考图形

教学方法：

讲授、讨论、案例分析

教

材：

教学时间：

8课时

教学内容：

UI在中国的发展，以及

UI是什么

UI即UserInterface（用户界面）的简称。

UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。

好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由,充分体现软件的定位和特点。

第一节UI是什么

软件设计可分为两个部分：

编码设计与UI设计。

2/21

编码设计大家都很熟悉，但是UI设计还是一个很陌生的词，即使一些专门从事网站与

多媒体设计的人也不完全理解UI的意思。

UI的本意是用户界面，是英文User和interface

的缩写。

从字面上看是用户与界面2个组成部分，但实际上还包括用户与界面之间的交互

关系。

在飞速发展的电子产品中，界面设计工作一点点的被重视起来。

做界面设计的“美工”也

随之被称之为“UI设计师”或“UI工程师”。

其实软件界面设计就像工业产品中的工业造型设计

一样，是产品的重要卖点。

一个电子产品拥有美观的界面会给人带来舒适的视觉享受，拉近

人与商品的距离，为商家创造卖点。

界面设计不是单纯的美术绘画，他需要定位使用者、使

用环境、使用方式并且为最终用户而设计，是建立在科学性之上的艺术设计。

检验一个界面

的标准既不是某个项目开发组领导的意见也不是项目成员投票的结果，而是终端用户的感

受。

所以界面设计要和用户研究紧密结合，是一个不断为最终用户设计满意视觉效果的过程。

第二节UI设计师是做什么的

在中国，UI设计还是一个需要不断成长的设计领域，但eicodesign,Tigocn,lkkuidesign,

Robindesign等国内知名设计机构已经进入了探索UI设计的道路。

UI设计从工作内容上来说分为3个方向。

它主要是由UI研究的3个因素决定的，其

分别是研究工具，研究人与界面的关系，研究人。

研究界面

图形设计师GraphicUIdesigner

国内目前大部分UI工作者都是从事这个行业。

也有人称之为美工，但实际上不是单纯

意义上的美术工人，而是软件产品的产品外形设计师。

3/21

这些设计师大多是美术院校毕业的，其中大部分是有美术设计教育背景，例如工业外形

设计，装潢设计，信息多媒体设计等。

研究人与界面的关系

交互设计师，interactiondesigner

在图形界面产生之前，长期以来UI设计师就是指交互设计师。

交互设计师的工作内容

就是设计软件的操作流程，树状结构，软件的结构与操作规范（spec）等。

一个软件产品

在编码之前需要作的就是交互设计，并且确立交互模型，交互规范。

交互设计师一般都是软件工程师背景居多。

研究人

用户测试/研究工程师Userexperienceengineer

任何的产品为了保证质量都需要测试，软件的编码需要测试，自然UI设计也需要被测

试。

这个测试和编码没有任何关系，主要是测试交互设计的合理性以及图形设计的美观性。

测试方法一般都是采用焦点小组，用目标用户问卷的形式来衡量UI设计的合理性。

这个职

位很重要，如果没有这个职位，UI设计的好坏只能凭借设计师的经验或者领导的审美来评

判，这样就会给企业带来严重的风险性。

用户研究工程师一般是心理学人文学背景比较合适。

综上所述UI设计师就是：

软件图形设计师、交互设计师和用户研究工程师。

其中交互设计师：

“UI的”本义是用户界面，是英文User和interface的缩写。

UI设计师则指从事对软件的人机交互、操作逻辑、界面美观的整体设计工作的人。

工作内容：

负责软件界面的美术设计、创意工作和制作工作；

根据各种相关软件的用户群，提出构思新颖、有高度吸引力的创意设计；对页面进行优化，使用户操作更趋于人性化；

维护现有的应用产品；

4/21

收集和分析用户对于GUI的需求。

5/21

第三节UI设计在中国的现状

目前在国内UI还是一个相对陌生的词，即便是洛可可设计也在

UI设计的道路上不断探

索客户及用户的需求。

我们经常看到一些招聘广告写着：

招聘界面美工、界面美术设计师等

等。

这表明在国内对

UI的理解还停留在美术设计方面，

认为UI的工作只是描边画线，

缺乏

对用户交互的重要性的理解；另一方面在软件开发过程中还存在重技术而不重应用的现象。

许多商家认为软件产品的核心是技术，而

UI仅仅是次要的辅助，这点在人员的比例与待遇

上可以表现出来。

但这不是UI设计真正的价值体现，只是

UI设计发展的一个必经过程。

我们以物质产品手机行业为例，

当手机刚刚进入市场的时候不但价格贵的惊人，

而且除了通

话以外没有什么其他功能。

由于当时的主导是技术，所以大家都把精力放在信号、

待机时间、

寿命等方面，对于产品的造型，

使用的合理性很少关心。

事过境迁，如今技术已经完全的达

到用户的需求，于是商家为了创造卖点，

提高争力，非常重视产品的外观设计，除此之外还

频频推出短信,彩屏，和铉，彩信

摄像头等等。

这样一来产品的美观、个性、易用、易学、

人性化等等都成了产品的卖点。

软件产品与物质产品的发展是相同的。

过去由于计算机硬件

的限制，编码设计成为软件开发的代名词，

美观亲和的图形化界面与合理易用的交互方式都

没有得到充分的重视，实际上这个时期的软件叫作软件程序，而不是软件产品。

现今随着计算机硬件的飞速发展，

过去的软件程序已经不能适应用户的要求。

软件产品

在激烈的市场竞争中，

仅仅有强大的功能是远远不够的，

不足以战胜强劲的对手。

幸运的是

在国内一些高瞻远瞩的民族企业已经开始意识到

UI给软件产品带来的巨大卖点了，例如金

山公司的影霸、词霸、毒霸、网标，由于重视

UI的开发与地位，才使得金山产品在同类软

件产品中首屈一指。

联想软件的

UI部门积极开展用户研究与使用性测试，将易用与美观相

结合，推出的双模式电脑、幸福系列等成功

UI范例，为联想赢得全球消费

PC第三的称号

等等、等等.实践证明，各商家只要在产品美观和易用设计方面很小投入，将会有很大产出。

其投入产出比，要比在功能领先性开发上的投入大得多。

我们不得不承认现阶段中国在很多领域都与西方发达国家有相当大的差距，

如何赶上并

超过他们是我们这代人肩负的历史使命。

软件产品领域不象物质产品那样存在工艺、

材料上

的限制，软件产品核心问题就是人。

提高软件

UI设计师个人能力减小人员上的差距是中国

UI发展首要关键的问题。

目前国内各院校还没有设立相对健全的

UI设计专业，所以提高UI设计师能力关键在于

提供一个良好的学习与交流的资源环境。

国内已经有很多交流设计网站，

介绍工业设计、平

6/21

面设计、服装设计、绘画艺术、多媒体flash等，但是UI设计一直没有受到应有的关注，

仅仅被放在数码设计或者平面网页设计的一个栏目里，这仅有的资源对培养优秀的设计师是

不够的，必须有一个信息快捷、资源丰富、设计水平一流、专业权威的UI设计学习与交流

的地方才能适应日益发展的UI设计师们的需求。

7/21

第二章设计流程

课题：

UI设计流程

授课教师：

汪永吉

教学目标：

通过本章学习使学生了解UI设计原则、流程。

教学重点：

掌握UI设计原则、流程。

教学难点：

掌握UI设计流程。

教学准备：

课本、参考图形

教学方法：

讲授、讨论、案例分析

教材：

教学时间：

8课时

教学内容：

UI设计原则、流程

第一节UI设计原则

1.简易性

界面的简洁

UI设计图片

是要让用户便于使用、便于了解、并能减少用户发生错误选择的可能性。

2.用户语言

界面中要使用能反应用户本身的语言，而不是游戏设计者的语言。

3.记忆负担最小化

人脑不是电脑，在设计界面时必须要考虑人类大脑处理信息的限度。

人类的短期记忆极

不稳定、有限，24小时内存在25%的遗忘率。

所以对用户来说，浏览信息要比记忆更容易。

4.一致性

8/21

是每一个优秀界面都具备的特点。

界面的结构必须清晰且一致，风格必须与游戏内容相

一致。

5.清楚

在视觉效果上便于理解和使用。

6.用户的熟悉程度

用户可通过已掌握的知识来使用界面，但不应超出一般常识。

7.从用户的观点考虑

想用户所想，做用户所做。

用户总是按照他们自己的方法理解和使用。

通过比较两个不同世界（真实与虚拟）的事物，完成更好的设计。

如：

书籍对比竹简。

8.排列

一个有序的界面能让用户轻松的使用。

9.安全性

用户能自由的作出选择，且所有选择都是可逆的。

在用户作出危险的选择时有信息介入

系统的提示。

10.灵活性

简单来说就是要让用户方便的使用，但不同于上述。

即互动多重性，不局限于单一的工

具（包括鼠标、键盘或手柄）。

11.人性化

高效率和用户满意度是人性化的体现。

应具备专家级和初级玩家系统，即用户可依据自

己的习惯定制界面，并

能保存设置。

第二节UI设计的流程

确认目标用户

在洛可可的UI设计过程中，需求设计角色会确定软件的目标用户，获取最终用户和直

接用户的需求。

用户交互要考虑到目标用户的不同引起的交互设计重点的不同。

例如：

对于科学用户和对于电脑入门用户的设计重点就不同。

9/21

采集目标用户的习惯交互方式

不同类型的目标用户有不同的交互习惯。

这种习惯的交互方式往往来源于其原有的针对

现实的交互流程、已有软件工具的交互流程。

当然还要在此基础上通过调研分析找到用户希望达到的交互效果，并且以流程确认下

来。

提示和引导用户

软件是用户的工具。

因此应该由用户来操作和控制软件。

软件响应用户的动作和设定的规则。

对于用户交互的结果和反馈，提示用户结果和反馈信息，引导用户进行用户需要的下一步操作。

一致性原则

设计目标一致

软件中往往存在多个组成部分（组件、元素）。

不同组成部分之间的交互设计目标需要一致。

例如：

如果以电脑操作初级用户作为目标用户，以简化界面逻辑为设计目标，那么该目标需要贯彻软件（软件包）整体，而不是局部。

元素外观一致

交互元素的外观往往影响用户的交互效果。

同一个（类）软件采用一致风格的外观，对于保持用户焦点，改进交互效果有很大帮助。

遗憾的是如何确认元素外观一致没有特别统一的衡量方法。

因此需要对目标用户进行调查取得反馈。

交互行为一致

在交互模型中，不同类型的元素用户触发其对应的行为事件后，其交互行为需要一致。

例如：

所有需要用户确认操作的对话框都至少包含确认和放弃两个按钮。

对于交互行为一致性原则比较极端的理念是相同类型的交互元素所引起的行为事件相

同。

但是我们可以看到这个理念虽然在大部分情况下正确，但是的确有相反的例子证明不按照这个理念设计，会更加简化用户操作流程。

10/21

可用性原则

可理解

软件

要为用户使用，用户必须可以理解软件各元素对应的功能。

如果不能为用户理解，那么需要提供一种非破坏性的途径，使得用户可以通过对该元素的操作，理解其对应的功能。

例如：

删除操作元素。

用户可以点击删除操作按钮，提示用户如何删除操作或者是否确认删除操作，用户可以更加详细的理解该元素对应的功能，同时可以取消该操作。

可达到

用户是交互的中心，交互元素对应用户需要的功能。

因此交互元素必须可以被用户控制。

用户可以用诸如键盘、鼠标之类的交互设备通过移动和触发已有的交互元素达到其它在

此之前不可见或者不可交互的交互元素。

要注意的是交互的次数会影响可达到的效果。

当一个功能被深深隐藏（一般来说超过4

层）那么用户达到该元素的几率就大大降低了。

可达到的效果也同界面设计有关。

过于复杂的界面会影响可达到的效果。

（参考简单导

向原则）

可控制

软件的交互流程，用户可以控制。

功能的执行流程，用户可以控制。

如果确实无法提供控制，则用能为目标用户理解的方式提示用户。

11/21

第三章案例展示欣赏与分析

课

题：

UI设计案例展示欣赏与分析

授课教师：

汪永吉

教学目标：

通过本章学习使学生了解

UI设计案例展示欣赏与分析。

教学重点：

掌握UI设计案例展示欣赏与分析。

教学难点：

掌握UI设计案例展示欣赏与分析。

教学准备：

课本、参考图形

教学方法：

讲授、讨论、案例分析

教

材：

教学时间：

8课时

教学内容：

UI设计图标、输入法、播放器、界面；

第一节图标

图标是具有明确指代含义的计算机图形。

其中桌面图标是软件标识，界面中的图标是功

12/21

能标识。

图标分为广义和狭义两种：

广义

具有指代意义的图形符号，具有高度浓缩并快捷传达信息、便于记忆的特性。

应用范围

很广，软硬件网页社交场所公共场合无所不在，例如：

男女厕所标志和各种交通标志等。

狭义

应用于计算机软件方面，包括：

程序标识、数据标识、命令选择、模式信号或切换开关、

状态指示等。

一个图标是一个小的图片或对象，代表一个文件，程序，网页，或命令。

图标有助于用

户快速执行命令和打开程序文件。

单击或双击图标以执行一个命令。

图标也用于在浏览器中

快速展现内容。

所有使用相同扩展名的文件具有相同的图标。

图标有一套标准的大小和属性格式，且通常是小尺寸的。

每个图标都含有多张相同显示

内容的图片，每一张图片具有不同的尺寸和发色数。

一个图标就是一套相似的图片，每一张

图片有不同的格式。

从这一点上说图标是三维的。

图标还有另一个特性：

它含有透明区域，

在透明区域内可以透出图标下的桌面背景。

在结构上图标其实和麦当劳的巨无霸汉堡差不

多。

一个图标实际上是多张不同格式的图片的集合体，并且还包含了一定的透明区域。

因为

计算机操作系统和显示设备的多样性，导致了图标的大小需要有多种格式。

象素分辨

操作系统在显示一个图标时，会按照一定的标准选择图标中最适合当前显示环境和状态

的图像。

如果你用的是Windows98操作系统，显示环境是800x600分辨率，32位色深，

你在桌面上看到的每个图标的图像格式就是256色32x32象素大小。

如果在相同的显示环

境下，WindowsXP操作系统中，这些图标的图像格式就是：

真彩色（32位色深）、32x32

象素大小。

下面就是Windows各个操作系统中的标准图标格式：

（单位：

大小象素—颜色）

13/21

Windows98SE/ME/2000

48x48-25632x32-25616x16-256

48x48-1632x32-1616x16-16

WindowsXP

48x48-32bit32x32-32bit24x24-32bit*16x16-32bit

48x48-25632x32-25624x24-256*16x16-256

48x48-1632x32-1624x24-16*16x16-16

*这种格式在XP图标中并不是必须的。

注意：

Windows98/2000对24x24格式的图标不兼容。

你可以在相关应用软件中打开

含有这种图像格式的图标，但操作系统却认为是无效的。

你必须确保你所设计的图标中至少

含有以上所列的图像格式来获得良好的显示效果。

如果操作系统在图标中找不到特定的图像

格式，它总是采用最接近的图像格式来显示，比如把大小为48x48的图标缩小为24x24

象素大小。

当然，效果就差些了。

不同的操作系统版本

Windows95，Windows98，WindowsME，Windows2000

·建议：

48x48（256色，16色），32x32（256色，16色），16x16（256

色，

16色）.

·最低：

32x32

（256色，

16色），

16x16（

256色，16色）.

WindowsXP

·建议：

48x48

（RGB/A，

256

色，16

色），32x32（RGB/A，256

色，16

色），24x24（RGB/A，256

色，

16色），16x16

（RGB/A，256色，

16色）

·最低：

32x32

（的RGB/A，256色，16色），

16x16（的RGB/A，

256色，

16色）.

·可选：

128x128（的RGB/A）

WindowsVista?

·建议：

256x256

（RGB/A），64x64

（RGB/A），48x48

（RGB/A，

256

色，16

色），32x32

（RGB/A，256

色，

16色），24x24

（RGB/A，256

色，

16色）

，16x16（RGB/A，256色，

16色）

14/21

·最低：

256x256（RGB/A），48x48（RGB/A，256色），32x32（RGB/A，

256色），16x16（RGB/A，256色）

·可选：

256x256（256色，16色），64x64（256色，16色）

此画面为手机的操作系统的图标。

同学们主要在以下几个方面来考虑：

1造型；

2颜色；

3艺术性；

4创造性；

5统一性；

我收集了一些图标的文件，我们接下来可以分享一下。

第二节输入法设计

输入法是指为了将各种符号输入计算机或其他设备（如手机）而采用的编码方法。

汉字

输入的编码方法，基本上都是采用将音、形、义与特定的键相联系，再根据不同汉字进行组

合来完成汉字的输入的。

中文热门输入法

搜狗拼音输入法：

搜狗拼音输入法是2006年6月由搜狐（SOHU）公司推出的一款Windows平台下的

汉字拼音输入法。

搜狗拼音输入法是基于搜索引擎技术的、特别适合网民使用的、新一代的

输入法产品，用户可以通过互联网备份自己的个性化词库和配置信息。

搜狗拼音输入法为中

国国内现今主流汉字拼音输入法之一，奉行永久免费的原则。

QQ拼音输入法：

QQ拼音输入法是腾讯公司开发的一种方便人们使用和观看的输入法，可下载各种各样

的皮肤来改变自身的皮肤。

15/21

同学们主要在以下几个方面来考虑：

1造型；

2颜色；

3艺术性；

4创造性；

5统一性；

我收集了一些图标的文件，我们接下来可以分享一下。

第三节手机界面设计

同学们主要在以下几个方面来考虑：

16/21

1造型；

2颜色；

3艺术性；

4创造性；

5统一性；

我收集了一些图标的文件，我们接下来可以分享一下。

17/21

第四节播放器

同学们主要在以下几个方面来考虑：

1造型；

2颜色；

3艺术性；

4创造性；

5统一性；

我收集了一些图标的文件，我们接下来可以分享一下。

18/21

第五节系统界面

同学们主要在以下几个方面来考虑：

1造型；

2颜色；

3艺术性；

4创造性；

5统一性；

我收集了一些图标的文件，我们接下来可以分享一下。

19/21

第四章UI界面分析与设计

课题：

UI界面设计分析

授课教师：

汪永吉

教学目标：

通过本章学习使学生了解UI界面设计分析。

教学重点：

掌握UI界面设计分析。

教学难点：

掌握UI界面设计分析。

教学准备：

课本、参考图形

教学方法：

讲授、讨论、案例分析

教材：

教学时间：

16课时

教学内容：

；

第一节主题

第二节要素

第三节分析

第四节制作整合

第五节成形

第六节验证

20/21

第五章创作

课

题：

UI界面设计创作

授课教师：

教学目标：

通过本章学习使学生了解

UI界面设计创作。

教学重点：

掌握UI界面设计创作。

教学难点：

掌握UI界面设计创作。

教学准备：

课本、参考图形

教学方法：

讲授、讨论、案例分析

教

材：

教学时间：

24课时

教学内容：

；

创作

21/21