ui设计教案18个课时

1、备 课 本Lesson Preparation _2013_-_2014_学年 第_一_学期Academic Year - Semester 课 程 名 称 UI设计 Course教材名称及版本 UI设计 Textbook and Edition授 课 班 级 2011平面1班 Class教 师 姓 名 黎 丹 Teacher审 核 人 周 增 辉 Approver填写说明1、此备课本用来书写教案，适用于所有专职教师、兼职教师和兼课教师。2、所有承担教学任务的教师需书写纸质版教案，如因使用多媒体教学需要和教学任务繁重，可用电子版教案，但格式必须按纸质版格式，且所有教案的书写应与学期授课计划相符

2、合。3、备课过程中的各个环节和要素可根据实际授课内容进行填写。如：授课课题：（教学章、节、标题或项目名称）教学目标和要求：（教学目标一般说应包含知识教学、能力发展和思想教育三方面内容，教学要求是指识记、理解、简单应用、综合应用等层次）教学重点和难点：教学重点，是为了达到确定的教学目的而必须着重讲解和分析的内容；教学难点，是就学生的接受情况而言的，学生经过自学还不能理解或理解有困难的地方，即可确定为教学难点。教学方法：（讨论、启发、演示、辩论、讲练结合、案例教学、情境模拟等）教学手段：（多媒体教学、录像带、挂图、幻灯片等）授课时间：第     &

3、#160;    周课时累计：教学过程：（体现教学步骤，包括时间分配和教学内容教学进程）作业布置：（含思考题、讨论题）课后反思：（因为课后反思是教案实施效果追记，课前还不能打印，只能课后用笔手写）4、 备课本的审核人为各教研室（项目中心）主任。授课课题认识界面门UI设计说课教学目标和要求通过本章学习使学生了解UI在中国的发展，以及UI的是什么教学重点和难点教学重点：掌握UI在中国的发展，以及UI是什么。教学难点：掌握UI是什么。教学方法案例教学教学手段多媒体授课时间第 九 周课时累计2教 学 过 程教学步骤及教学内容时间分配导入新课:UI即User In

4、terface(用户界面)的简称。UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由,充分体现软件的定位和特点。第一节 UI是什么软件设计可分为两个部分：编码设计与UI设计。教学步骤及教学内容时间分配编码设计大家都很熟悉，但是 UI设计还是一个很陌生的词，即使一些专门从事网站与多媒体设计的人也不完全理解UI的意思。UI的本意是用户界面，是英文User和 interface的缩写。从字面上看是用户与界面2个组成部分，但实际上还包括用户与界面之间的交互关系。在飞速发展的电子产品中，界面设计工作一点点的被重视起

5、来。做界面设计的“美工”也随之被称之为“UI设计师”或“UI工程师”。其实软件界面设计就像工业产品中的工业造型设计一样，是产品的重要卖点。一个电子产品拥有美观的界面会给人带来舒适的视觉享受，拉近人与商品的距离，为商家创造卖点。界面设计不是单纯的美术绘画，他需要定位使用者、使用环境、使用方式并且为最终用户而设计，是建立在科学性之上的艺术设计。检验一个界面的标准既不是某个项目开发组领导的意见也不是项目成员投票的结果，而是终端用户的感受。所以界面设计要和用户研究紧密结合，是一个不断为最终用户设计满意视觉效果的过程。第二节 UI设计师是做什么的在中国，UI设计还是一个需要不断成长的设计领域，但eico

6、design,Tigocn, lkkui design, Robin design等国内知名设计机构已经进入了探索UI设计的道路。UI设计从工作内容上来说分为3个方向。它主要是由UI 研究的3个因素决定的， 其分别是研究工具，研究人与界面的关系，研究人。研究界面图形设计师Graphic UI designer国内目前大部分UI工作者都是从事这个行业。也有人称之为美工，但实际上不是单纯意义上的美术工人，而是软件产品的产品外形设计师。这些设计师大多是美术院校毕业的，其中大部分是有美术设计教育背景，例如工业外形设计，装潢设计，信息多媒体设计等。研究人与界面的关系交互设计师，interaction d

7、esigner在图形界面产生之前，长期以来UI设计师就是指交互设计师。交互设计师的工作内容就是设计软件的操作流程，树状结构，软件的结构与操作规范（spec）等。一个软件产品在编码之前需要作的就是交互设计，并且确立交互模型，交互规范。交互设计师一般都是软件工程师背景居多。研究人用户测试/研究工程师User experience engineer任何的产品为了保证质量都需要测试，软件的编码需要测试，自然UI设计也需要被测试。这个测试和编码没有任何关系，主要是测试交互设计的合理性以及图形设计的美观性。测试方法一般都是采用焦点小组，用目标用户问卷的形式来衡量UI设计的合理性。这个职位很重要，如果没有这

8、个职位，UI设计的好坏只能凭借设计师的经验或者领导的审美来评判，这样就会给企业带来严重的风险性。用户研究工程师一般是心理学人文学背景比较合适。综上所述UI设计师就是：软件图形设计师、交互设计师和用户研究工程师。其中交互设计师：“UI”的本义是用户界面，是英文User和interface的缩写。UI设计师则指从事对软件的人机交互、操作逻辑、界面美观的整体设计工作的人。工作内容：负责软件界面的美术设计、创意工作和制作工作；根据各种相关软件的用户群，提出构思新颖、有高度吸引力的创意设计；对页面进行优化，使用户操作更趋于人性化；维护现有的应用产品；收集和分析用户对于GUI的需求。第三节 UI设计在中国

9、的现状目前在国内UI还是一个相对陌生的词，即便是洛可可设计也在UI设计的道路上不断探索客户及用户的需求。我们经常看到一些招聘广告写着：招聘界面美工、界面美术设计师等等。这表明在国内对UI的理解还停留在美术设计方面，认为UI的工作只是描边画线，缺乏对用户交互的重要性的理解；另一方面在软件开发过程中还存在重技术而不重应用的现象。许多商家认为软件产品的核心是技术，而UI仅仅是次要的辅助，这点在人员的比例与待遇上可以表现出来。 但这不是UI设计真正的价值体现，只是UI设计发展的一个必经过程。我们以物质产品手机行业为例，当手机刚刚进入市场的时候不但价格贵的惊人，而且除了通话以外没有什么其他功能。由于当时

10、的主导是技术，所以大家都把精力放在信号、待机时间、寿命等方面，对于产品的造型，使用的合理性很少关心。事过境迁，如今技术已经完全的达到用户的需求，于是商家为了创造卖点，提高争力，非常重视产品的外观设计，除此之外还频频推出短信,彩屏，和铉，彩信,摄像头等等。这样一来产品的美观、个性、易用、易学、人性化等等都成了产品的卖点。软件产品与物质产品的发展是相同的。过去由于计算机硬件的限制，编码设计成为软件开发的代名词，美观亲和的图形化界面与合理易用的交互方式都没有得到充分的重视，实际上这个时期的软件叫作软件程序，而不是软件产品。现今随着计算机硬件的飞速发展，过去的软件程序已经不能适应用户的要求。软件产品在

11、激烈的市场竞争中，仅仅有强大的功能是远远不够的，不足以战胜强劲的对手。幸运的是在国内一些高瞻远瞩的民族企业已经开始意识到UI给软件产品带来的巨大卖点了，例如金山公司的影霸、词霸、毒霸、网标，由于重视UI的开发与地位，才使得金山产品在同类软件产品中首屈一指。联想软件的UI部门积极开展用户研究与使用性测试，将易用与美观相结合，推出的双模式电脑、幸福系列等成功UI范例，为联想赢得全球消费 PC第三的称号等等、等等.实践证明，各商家只要在产品美观和易用设计方面很小投入，将会有很大产出。其投入产出比，要比在功能领先性开发上的投入大得多。我们不得不承认现阶段中国在很多领域都与西方发达国家有相当大的差距，如

12、何赶上并超过他们是我们这代人肩负的历史使命。软件产品领域不象物质产品那样存在工艺、材料上的限制，软件产品核心问题就是人。提高软件UI设计师个人能力减小人员上的差距是中国UI发展首要关键的问题。目前国内各院校还没有设立相对健全的UI设计专业，所以提高UI设计师能力关键在于提供一个良好的学习与交流的资源环境。国内已经有很多交流设计网站，介绍工业设计、平面设计、服装设计、绘画艺术、多媒体flash等，但是UI设计一直没有受到应有的关注，仅仅被放在数码设计或者平面网页设计的一个栏目里，这仅有的资源对培养优秀的设计师是不够的，必须有一个信息快捷、资源丰富、设计水平一流、专业权威的UI设计学习与交流的地方

13、才能适应日益发展的UI设计师们的需求。教学步骤及教学内容时间分配作业布置课后反思授课课题认识界面门教学目标和要求界面的概述教学重点和难点重点：了解什么UI,什么是界面难点：界面的概述教学方法案例教学教学手段多媒体授课时间第 九 周课时累计4教 学 过 程教学步骤及教学内容时间分配导入新课:随着硬件技术的飞速发展，使计算速度与存储容量不再成为软件开发人员所担心的问题，用户关心的主要问题是能否比较容易和舒适地使用软件。换言之，人们的着眼点在于软件的易用性和美观，而易用与美观主要取决于用户界面，即UI的优劣。本课主要讲解UI的基本理论和设计属性，以期在具体学习UI设计技巧和制作技术之前对UI设计有一

14、个整体的了解。什么事UI呢？UI的本意是用户界面，是英文User和interface的缩写。从字面上看是用户与界面2个组成部分，但实际上还包括用户与界面之间的交互关系，所以这样可分为3个方向，他们分别是：用户研究、交互设计、界面设计。教学步骤及教学内容时间分配1、用户研究    用户研究包含两个方面：一是可用性工程学（usability Engineering），研究如何提高产品的可用性，使得系统的设计更容易被人使用、学习和记忆；二是通过可用性工程学的研究，发掘用户的潜在需求，为技术创新提供另外一条思路和方法（consumer insight）。 

15、60;  用户研究是一个跨学科的专业，涉及可用性工程学、人类功效学、心理学、市场研究学、教育学、设计学等学科。用户研究技术是站在人文学科的角度来研究产品，站在用户的角度介入到产品的开发和设计中。   用户研究通过对于用户的工作环境、产品的使用习惯等研究，使得在产品开发的前期能够把用户对于产品功能的期望、对设计和外观方面的要求融入到产品的开发过程中去，从而帮助企业完善产品设计或者探索一个新产品概念。    他是得到用户需求和反馈的途径，也是检验界面与交互设计是否合理的重要标准。2、交互设计    这部分指人

16、与机之间的交互工程，在过去交互设计也由程序员来做，其实程序员擅长编码，而不善于与最终用户交互。所以，很多的软件虽然功能比较齐全，但是交互方面设计很粗糙，繁琐难用，学习困难。使用这样的软件后，不是使人聪明与进步而是让人感到愚弄与羞辱。许多人因为不能操作电脑软件而下岗失业，这样的交互使电脑成为让人恐惧的科技怪兽。于是我们把交互设计从程序员的工作中分离出来单独成为一个学科，也就是人机交互设计。他的目的在于加强软件的易用、易学、易理解，使计算机真正成为方便地为人类服务的工具。3、界面设计    在漫长的软件发展中，界面设计工作一直没有被重视起来。做界面设计的人也被贬义的称

17、为“美工”。其实软件界面设计就像工业产品中的工业造型设计一样，是产品的重要买点。一个友好美观的界面会给人带来舒适的视觉享受，拉近人与电脑的距离，为商家创造卖点。界面设计不是单纯的美术绘画，他需要定位使用者、使用环境、使用方式并且为最终用户而设计，是纯粹的科学性的艺术设计。检验一个界面的标准即不是某个项目开发组领导的意见也不是项目成员投票的结果，而是最终用户的感受。所以界面设计要和用户研究紧密结合，是一个不断为最终用户设计满意视觉效果的过程什么是UI? 常识 UI行业常用名词及缩写定义 - 什么是 UI ： UI的本意是用户界面，是英文User和 interface的缩写。 - 什么是 GUI

18、Graphics User Interface 图形用户界面 有时也称为WIMP=Window/Icon/Menu/Pointing Device 窗口、图标、菜单、指点设备 - 什么是 HUI Handset User Interface 手持设备用户界面 - 什么是WUI Web User Interface 网页风格用户界面 - 什么是用户界面设计： 在人和机器的互动过程（Human Machine Interaction）中，有一个层面，即我们所说的界面（interface）。从心理学意义来分，界面可分为感觉（视觉、触觉、听觉等）和情感两个层次。用户界面设计是屏幕产品的重要组成部分。界

19、面设计是一个复杂的有不同学科参与的工程，认知心理学、设计学、语言学等在此都扮演着重要的角色。用户界面设计的三大原则是：置界面于用户的控制之下；减少用户的记忆负担；保持界面的一致性。教学步骤及教学内容时间分配作业布置课后反思授课课题认识界面门界面设计原则和分类教学目标和要求了解和掌握界面设计原则和分类教学重点和难点重点：掌握界面设计的基本原则和分类难点：掌握界面设计的基本原则能熟练运用到设计当中教学方法案例教学教学手段多媒体授课时间第 九 周课时累计6教 学 过 程教学步骤及教学内容时间分配本节课我们来说UI艺术性设计的原则方面的问题。在结构设计的基础上，参照目标群体的心理模型和任务达成进行视觉

20、设计。包括色彩啊、字体呀、页面哪等。视觉设计的原则主要有以下这么几点，同学们一定要注意喽！1）界面清晰明了，尤其导航要明确。最好允许用户定制界面，如下图：简单的界面设计比如像一些音频软件、3D软件他们的界面参数比较多，其复杂的窗口结构就更需要逻辑清晰的设计思路，这个时候呢，科学性肯定要远远大于艺术性！  ! l% x7 N$ N% E0 r% a2）减少短期记忆的负担。就是说让计算机帮助记忆，例如IE进入界面地址等可以让机器记住。3 e#教学步骤及教学内容时间分配3）依赖认知而非记忆。譬如打印图标的记忆，下拉菜单列表中的选择等要符合业界习惯。4）提供视觉线索。界面要有吸引力

21、，如下图：5）提供默认(default)、撤消(undo)、恢复(redo)等功能。这方面好多同学可能不是很了解，但是你要做好一个真正的UI设计师，那么功能方面你还是要有一定的掌握喔！当然啦，同学也不用怕，只要你用心，其实很简单的！Just do it!6）提供界面的快捷方式。7）尽量去使用真实事物的类比。如电话、打印机等的图标设计，尊重用户以往的使用经验和使用习惯。: r: F1 A7 ' A9 8）完美视觉的清晰度。条理清晰，图片、文字的布局和隐喻不要让用户去猜。如图9）界面要协调一致。如手机界面按钮摆放，习惯左键肯定、右键否定或按内容摆放。10）同样功能用同样的图形表示。11）色

22、彩与内容。整体软件尽量不要超过5个色系（特殊需要例外），近似的颜色表示近似的意思。二、界面的分类界面依据其在人与界面互动过程中的作用方式，分为操作界面和显示界面两大类。通常操作界面起到的是控制作用，用户通过操作界面发出信息，操作机器执行命令，同时也通过操作界面对机器的反馈信息作出反应动作。操作界面主要包括：触控屏幕、鼠标、键盘、操作手柄、遥控器等。显示界面主要的职能是信息显示。用户通过显示界面监控机器对于指令的执行状况，同时也通过显示了解机器在执行命令后状况。包括图、文、声、光等可释读要素。一般情况下，显示界面和操作界面是共存的。操作界面为人机互动提供了动作平台，而显示界面则为人机互动提供了信

23、息平台，这两个平台构成了人机互动的基本环境。根据界面的用户特征，我们又可以将界面分为网页用户界面、游戏用户界面、软件用户界面等几大类。这样分类的方式体现了“以用户为中心”的核心理念，而整个界面设计教学步骤及教学内容时间分配的过程都是围绕“用户”这个中心展开的。作业布置课后反思授课课题认识界面门设计界面的通用性的分析教学目标和要求进一步认识界面，了解设计界面的通用性并进行分析教学重点和难点重点：设计界面的通用性的分析难点：设计界面的功能、情感、环境的共通教学方法案例教学教学手段多媒体授课时间第 九 周课时累计8教 学 过 程教学步骤及教学内容时间分配导入新课随着硬件技术的飞速发展，使计算速度与存

24、储容量不再成为软件开发人员所担心的问题，用户关心的主要问题是能否比较容易和舒适地使用软件。换言之，人们的着眼点在于软件的易用性和美观，而易用与美观主要取决于用户界面，即UI的优劣。本课主要讲解UI的基本理论和设计属性，以期在具体学习UI设计技巧和制作技术之前对UI设计有一个整体的了解。1.1 UI设计基本介绍众所周知，在当今的硬件与软件环境下，一个软件没有很好的界面设计就不能算是成功的软件，因为不管它内部有多么精巧的技术，只要用户不愿意使用它，它的优越性就得不到发挥，它的价值和作用也就无从谈起。于是一个不涉及技术而着眼于易用和美观的用户界面显得越来越重要，这就是软件UI设计。教学步骤及教学内容

25、时间分配UI的本意是用户界面(User Interface)，概括成一句话就是-人和工具之间的界面。这个界面实际上体现在我们生活中的每一个环节，例如同学们切菜的时候，刀把手就是这个界面;开车的时候方向盘啊仪表盘也是为个界面;看TV的时候遥控器亦是这个界面;用电脑的时候更不用说。于是乎，我们把UI分成两大类：硬件界面和软件界面。我们的教程所涉及的皆为软件界面，同学们注意了，所以我们也可以称之为特殊的或者狭义的UI设计。n! 软件设计可分为两个部分：编码设计与UI设计。编码设计相信同学们都比较熟悉，但UI设计对许多猫来说可能还比较陌生，可能连一些专门从事网站多媒体设计的人员也不是很理解UI的含义。

26、前面说了，UI是英文User和Interface的缩写。从字面上看有用户和界面两个组成部分，但实际上还包括用户与界面之后的交互关系，所以这样可分为3个方向，分别是：用户研究，交互设计和界面设计。后面我为同学们分描述。UI设计教程 1.2 设计界面通用性简单分析 其实呢，按照界面的不同可以将其划分为功能性界面、情感性界面以及环境性界面。将界面分为这3类有助于考察设计界面的诸多因素。当然啦，设计界面的划分并不是完全绝对的喽，这三类界面的涵义和内家可能也会有交差和重叠，这个同学们应该比较好理解，譬如宗教文化是一种环境性因素，但它带给信仰的人更多一层的肯定是情感的因素。嘿嘿！虽然说环境与情感

27、性不好区分，但是并不妨碍不同分类之间所存在的实质性的差异。下面我带着同学们分别来了解这三类界面。$ W; _1 I  E6 y7 7 W同学们不要着急喔！学习是循序渐进的，对UI设计来说，理论很重要喔！/ 功能性界面. o6 V/ M% V  F 功能性界面主要是来实现使用性内容，因为呢，任何一件产品或内外环境或平面视觉传达作品，它们存在的价值和意义首先在于使用性，再由使用性牵涉到多种功能因素的分析及实现功能的技术方法与材料运用。在这一方面，分析思维将作为一种更改思维存在。不难理解吧，同学？嘿嘿！如果作为一种处理方式来设计产品，那么这种产品会使多种特征性

28、（譬如民族性，纯粹性）因素中性化，如果去除产品商标，就很难认出是哪国的或哪个公司的产品。当然，这方面也说明了产品中存在着共同性因素，它使全人类做出同样的反应。人的感觉和判断能力存在国际性的、客观性的特征。$ e: Y7 |8 8 Q/ v4 其实呢，功能性的界面是要建立在符号学的基础上的。同学不知道什么是符号学？国际符号学会对符号学是这样定义的：“符号是关于信号标志系统（PS:也就是通过某种渠道传递信息的系统呗！）的理论，它研究自然符号系统的人造符号系统的特征。”广义地说呢，就是能够代表其他事物的东西都是符号，如字母、数字、仪式、意识、动作等，最复杂的一种符号系统可能就是语言喽。设计功能界面，

29、不可避免地要让使用者明白功能操作界面的功能性标志一定要很鲜明，这个很重要。5 : : c1 T! c! k; T/ 2 情感性界面8 y& M/ j/ D1 H( z3 _% I* Z5 一个family装饰要赋予家居温馨，一副design work要以情动人，and so on.其实呢，任何一件产品或者portiflio只有与人的情产生共鸣才能为我们所接受，像爱屋及乌也体现了人的感情寄托。所以呢，一件好设计作品设计作品是有相当大的魅力在。我们现代icon的设计发展也一直在朝着这一领域在开拓。符号学日渐被应用到广告学，宗教学，神话学，民俗学等比较多的领域。譬如国外符号学界把符号学用于认

30、识论的研究，考察认识知觉，认识过程的符号学问题。同时，符号学还用于分析利用人体感官进行的交流，并将music 服装等都作为符号系统加以分析研究，这都为设计艺术提供了宝贵借鉴价值的情感界面设计方法和手段。j" X# K; H" G!环境性界面; V, x4 z9 p9 ?+ S- x) b就不说UI，任何的设计都要与环境这个因素相联系。它包括比较多，例如社会、政治和文化，科技，民族等等等等。人处于外界环境中，是以社会群体而不是以个体为基础的，所以环境性因素一般牌非受控与难以预见的变化状态中。联系到设计的历史，我们可以利用艺术社会学的观点去认识各时期的设计潮流。其实呢，从18世

31、纪的时候，西方的一批艺术家们已经注意到艺术创造与审美趣味深受地理，气候，民族以及历史条件等环境因素的影响。这不难理解，因为这大抵就是同学们会看到不同国家民族的作品面大相径庭的原因喽。记得，法国有外比较著名的老外，嘿嘿，貌似是个学者，他说物质文明和精神文明的性质面貌都取决于种族，环境，时代三大因素。也就是这个理儿。无论是工艺美术运动，同学们熟知的包豪思现代主义还是我提起来都抖擞的80年代的反设计，乃至现代的多元化等等都很明显地反应了环境因素对咱们设计的影响。! k! $ G# F) 同学们都玩游戏，其实呢，游戏中的界面设计就是最典型的环境性界面。其实呢，成功的作品都能够完美地把以上三种界面结合的

32、作品。爱好设计的同学们肯定听说过著名的卢浮宫扩建工程，貌似是贝聿铭设计的，功能性处理的那是相当的牛，并没有屈于形式而损害功能。人们参观卢浮宫，不是回到古代，而是以新的价值观去重新审视与欣赏，尤其是它的三角形外教学步骤及教学内容时间分配观符合了人们的心理期望，但是他又把情感性界面处理到极致，嘿嘿，我在这里就不附图了，同学们可以搜索看看。作业布置课后反思授课课题人本界面回归人性的界面设计教学目标和要求理解“认知摩擦”和“可用性”两个概念教学重点和难点重点：理解“认知摩擦”和“可用性”两个概念难点：理解“认知摩擦”和“可用性”两个概念教学方法案例教学教学手段多媒体授课时间第 十 周课时累计10教 学

33、 过 程教学步骤及教学内容时间分配导入新课:人类的认知水平在随着问题的变化而变化过程中所遇到的阻力就是认知摩擦。在软件硬件不断升级的过程中，认知摩擦时刻存在。例如:我们在面对一个升级到新版本的软件时，通常需要花上一段时间才能熟悉掌握它，而升级所带来的新功能又很少能用到，或者是通过一段时间的学习后才能正确使用，这其实就是“认知摩擦”在作祟。 当然，少量的认知摩擦对于提升我们的认知能力是有帮助的，因此我们提倡回归人性的界面设计，就是通过各种方法让这种认知摩擦控制在一定范围之内。但在实际操作中要做到这一点并不容易。比如，在设计微波炉的界面时，是不是让按钮和把手都更加适合人的眼睛和手指，让信息更容易被

34、读取就解决了认知摩擦的问题呢？教学步骤及教学内容时间分配为用户而设计-可用性可用性的标准对任何的人实施中心的活动都有效，界面设计尤其如此。 在一组可用性不错的手机图标设计中，通过图形我们就能明白其意义而不需要翻阅说明书。可用性是评估用户界面是否容易使用的程度属性。一般来说，可用性由5个属性组成。（1） 可学习性，也就是初次接触界面时，用户在没有任何经验的情况下使用界面完成基本任务的难易程度。（2） 效率，当用户熟悉了这个界面后，其完成任务的速度。（3） 可记忆性，在一段时间没有使用之后再次使用界面，用户重新熟练操作的难易程度。（4） 出错，用户在使用界面是除了多少错误，这些错误的严重程度，以及

35、是否能够方便迅速的觉察错误并恢复。（5） 满意度，用户使用这个界面的满意程度。实现可用性的途径有如下5个方面。（1） 为用户的实际工作而设计。（2） 学会与客户沟通。（3） 避免为创新而创新。（4） 努力建立有效的交互。（5） 用实际工作来测试界面。 操作界面的类型与特征 操作界面可以分为连续性和不连续性操作界面两大类，其中不连续性操作界面可分为三种情况：一是开关，如电灯开关等；二是不连续性调整控制。如电视机的频道按钮；三是符号输入按钮，如电脑键盘。 连续性操作界面也可以分为两种情况:一是定量调节控制，其作用是调节机器到莫一种状态，如收音机上的电台波段调谐钮；二是连续调节控制，其作用是不断调节

36、机器状态，使其沿理想方向运行，如方向盘。教学步骤及教学内容时间分配作业布置课后反思授课课题人本界面教学目标和要求通过本章学习使学生了解UI设计案例展示欣赏与分析教学重点和难点教学重点：掌握UI设计案例展示欣赏与分析。教学难点：掌握UI设计案例展示欣赏与分析。教学方法案例教学教学手段多媒体授课时间第 十 周课时累计12教 学 过 程教学步骤及教学内容时间分配导入新课第一节 图标图标是具有明确指代含义的计算机图形。其中桌面图标是软件标识，界面中的图标是功能标识。教学步骤及教学内容时间分配图标分为广义和狭义两种：广义具有指代意义的图形符号，具有高度浓缩并快捷传达信息、便于记忆的特性。应用范围很广，软

37、硬件网页社交场所公共场合无所不在，例如：男女厕所标志和各种交通标志等。狭义应用于计算机软件方面，包括：程序标识、数据标识、命令选择、模式信号或切换开关、状态指示等。一个图标是一个小的图片或对象，代表一个文件，程序，网页，或命令。图标有助于用户快速执行命令和打开程序文件。单击或双击图标以执行一个命令。图标也用于在浏览器中快速展现内容。所有使用相同扩展名的文件具有相同的图标。图标有一套标准的大小和属性格式，且通常是小尺寸的。每个图标都含有多张相同显示内容的图片，每一张图片具有不同的尺寸和发色数。一个图标就是一套相似的图片，每一张图片有不同的格式。从这一点上说图标是三维的。图标还有另一个特性：它含有

38、透明区域，在透明区域内可以透出图标下的桌面背景。在结构上图标其实和麦当劳的巨无霸汉堡差不多。一个图标实际上是多张不同格式的图片的集合体，并且还包含了一定的透明区域。因为计算机操作系统和显示设备的多样性，导致了图标的大小需要有多种格式。象素分辨 操作系统在显示一个图标时，会按照一定的标准选择图标中最适合当前显示环境和状态的图像。如果你用的是Windows98操作系统，显示环境是 800x600分辨率，32位色深，你在桌面上看到的每个图标的图像格式就是256色32x32象素大小。如果在相同的显示环境下，Windows XP操作系统中，这些图标的图像格式就是：真彩色（32位色深）、32x32象素大小

39、。下面就是Windows各个操作系统中的标准图标格式：（单位：大小象素颜色）Windows 98 SE/ME/200048 x 48 - 256 32 x 32 - 256 16 x 16 - 25648 x 48 - 16 32 x 32 - 16 16 x 16 - 16Windows XP48 x 48 - 32bit 32 x 32 - 32bit 24 x 24 - 32bit * 16 x 16 - 32bit48 x 48 - 256 32 x 32 - 256 24 x 24 - 256 * 16 x 16 - 25648 x 48 - 16 32 x 32 - 16 24 x

40、 24 - 16 * 16 x 16 - 16* 这种格式在XP图标中并不是必须的。注意：Windows98/2000对24 x 24格式的图标不兼容。你可以在相关应用软件中打开含有这种图像格式的图标，但操作系统却认为是无效的。你必须确保你所设计的图标中至少含有以上所列的图像格式来获得良好的显示效果。如果操作系统在图标中找不到特定的图像格式，它总是采用最接近的图像格式来显示，比如把大小为48 x 48的图标缩小为24 x 24象素大小。当然，效果就差些了。不同的操作系统版本Windows 95， Windows 98， Windows ME， Windows 2000· 建议： 48

41、x48 （ 256色， 16色） ， 32x32 （ 256色， 16色） ， 16x16 （ 256色， 16色）.· 最低： 32x32 （ 256色， 16色） ， 16x16 （ 256色， 16色）.Windows XP· 建议： 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色，

42、 16色）.·可选： 128x128 （的RGB /A）Windows Vista?· 建议： 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色）· 最低： 256x256 （RGB /A） ， 48x48 （RGB /A， 256色） ， 32x32 （RGB /A， 256色） ， 16x16 （RGB /A， 256色）&

43、#183; 可选： 256x256 （ 256色， 16色） ， 64x64 （ 256色， 16色）此画面为手机的操作系统的图标。同学们主要在以下几个方面来考虑：1 造型；2 颜色；3 艺术性；4 创造性；5 统一性；我收集了一些图标的文件，我们接下来可以分享一下。第二节 输入法设计输入法是指为了将各种符号输入计算机或其他设备（如手机）而采用的编码方法。汉字输入的编码方法，基本上都是采用将音、形、义与特定的键相联系，再根据不同汉字进行组合来完成汉字的输入的。中文热门输入法搜狗拼音输入法：搜狗拼音输入法是2006年6月由搜狐（SOHU）公司推出的一款Windows平台下的汉字拼音输入法。搜狗拼

44、音输入法是基于搜索引擎技术的、特别适合网民使用的、新一代的输入法产品，用户可以通过互联网备份自己的个性化词库和配置信息。搜狗拼音输入法为中国国内现今主流汉字拼音输入法之一，奉行永久免费的原则。QQ拼音输入法：QQ拼音输入法是腾讯公司开发的一种方便人们使用和观看的输入法，可下载各种各样的皮肤来改变自身的皮肤。同学们主要在以下几个方面来考虑：1 造型；2 颜色；3 艺术性；4 创造性；5 统一性；我收集了一些图标的文件，我们接下来可以分享一下。第三节 手机界面设计同学们主要在以下几个方面来考虑：1 造型；2 颜色；3 艺术性；4 创造性；5 统一性；我收集了一些图标的文件，我们接下来可以分享一下。

45、第四节 播放器同学们主要在以下几个方面来考虑：1 造型；2 颜色；3 艺术性；4 创造性；5 统一性；我收集了一些图标的文件，我们接下来可以分享一下。第五节 系统界面教学步骤及教学内容时间分配同学们主要在以下几个方面来考虑：1 造型；2 颜色；3 艺术性；4 创造性；5 统一性；我收集了一些图标的文件，我们接下来可以分享一下。作业布置课后反思授课课题界面的整体设计教学目标和要求界面设计的重要性,设计原则教学重点和难点重点：界面设计的重要性,设计原则难点：掌握界面设计的重要性,设计原则进行界面设计教学方法案例教学教学手段多媒体授课时间第 九 周课时累计14教 学 过 程教学步骤及教学内容时间分配

46、提问导入:用户界面设计为什么这么重要呢?下面带着大家一起来了解界面设计.用户界面设计从字面上来说 ,是面向用户的 。用户界面的发展经历了从低级到高级的过程，用户界面在软件系统中的价值比重也越来越高，用户假面设计不仅要美观，而且要实用。用户界面是人机之间交流、沟通的层面，用户界面设计是以人为中心，使产品达到逾越使用的设计。教学步骤及教学内容时间分配界面设计的重要性界面是用户与网页交互的窗口，用户通过界面想计算机输入信息进行控制、查询和操作；网页则通过界面想用户提供信息，以供阅读、分析、判断。所以界面设计在网页中占有重要的位置。界面设计的原则界面设计是浏览者与网络交流的平台，由于它在网络中具有特殊

47、位置，所以其设计要遵循一定的原则。首先是简易性，简易是为了方便用户使用，了解网页内容。其次是清楚安全，指在用户出现危机的选择时有信息介入系统的提示。最后是灵活人性化，指让用户轻松快捷的使用。界面设计的要求界面设计师浏览者浏览网页的第一印象，所以它的设计风格要与整体页面相一致，颜色的搭配要符合人们的视觉习惯，并与页面的整体色调想协调。其中，字体的选择不要过于花哨，选用平常字体即可。一什么是界面设计界面设计是为了满足专业化、标准化需求而对软件的使用界面进行美化、优化、规范化的设计分支，具体包括软件启动封面设计、软件框架设计、按钮设计、面板设计、菜单设计、标签设计、图标设计、滚动条及状态栏设计、安装

48、过程设计、包装及商品化。如下图：直观的按钮设计 二图形界面的分类随着科技的发展，人们对信息的需求量也在不断的增多，所以图形界面也越来越多样化和细分化，不同的图形界面在设计上也会有不同的特点。图形界面可以分为以下几类：l 软件用户界面：软件只是一种工具，然而人们与软件的交互性操作都是通过软件界面来进行的，所以软件界面的设计不仅要美观而且要易用。l 网络界面：网络的发展带来的网站界面设计的繁荣，随着网络的发展，网站设计已经从最初的纯文字内容发展到现在的包含图像、视频、动画等多种媒体的形式。网站界面必须具有独立性和创意性。在网站界面设计中，最重要的是使用户方便地查找信息，并能够感受到方便操作带来的乐

49、趣。如下图的咖啡网站页面l 手机界面：随着科技的发展，手机的功能也越来越强大，手机界面的设计要人性化，不仅要方便使用，还要美观。如下图l 游戏界面：游戏软件界面的制作通常比较华丽、主题鲜明，三维效果十分普遍，所以游戏中的人物或物品为主体，视觉效果占十分重要的地位。 l 播放器界面：在激烈的市场竞争中，软件产品仅有强大的功能是远远不够的，将易用性与美观相结合，才能适应用户的需要，从而创造出更高的价值。教学步骤及教学内容时间分配作业布置课后反思授课课题界面的整体设计- UI设计流程教学目标和要求通过本章学习使学生了解UI设计原则、流程。教学重点和难点教学重点：掌握UI设计原则、流程。教学难点：掌握

50、UI设计流程。教学方法案例教学教学手段多媒体授课时间第 十 周课时累计16教 学 过 程教学步骤及教学内容时间分配导入新课: 第一节 UI设计原则1.简易性界面的简洁  UI设计图片是要让用户便于使用、便于了解、并能减少用户发生错误选择的可能性。教学步骤及教学内容时间分配2.用户语言界面中要使用能反应用户本身的语言，而不是游戏设计者的语言。3.记忆负担最小化人脑不是电脑，在设计界面时必须要考虑人类大脑处理信息的限度。人类的短期记忆极不稳定、有限，24小时内存在25%的遗忘率。所以对用户来说，浏览信息要比记忆更容易。4.一致性是每一个优秀界面都具备的特点。界面的结构必须清晰且

51、一致，风格必须与游戏内容相一致。5.清楚在视觉效果上便于理解和使用。6.用户的熟悉程度用户可通过已掌握的知识来使用界面，但不应超出一般常识。7.从用户的观点考虑想用户所想，做用户所做。用户总是按照他们自己的方法理解和使用。通过比较两个不同世界(真实与虚拟)的事物，完成更好的设计。如：书籍对比竹简。8.排列一个有序的界面能让用户轻松的使用。9.安全性用户能自由的作出选择，且所有选择都是可逆的。在用户作出危险的选择时有信息介入系统的提示。10.灵活性简单来说就是要让用户方便的使用，但不同于上述。即互动多重性，不局限于单一的工具(包括鼠标、键盘或手柄)。11.人性化高效率和用户满意度是人性化的体现。应具备专家级和初级玩家系统，即用户可依据自己的习惯定制界面，并能保存设置。第二节 UI设计的流程确认目标用户在洛可可的UI设计过程中，需求设计角色会确定软件的目标用户，获取最终用户和直接用户的需求。用户交互要考虑到目标用户的不同引起的交互设计重点的不同。例如：对于科学用户和对于电脑入门用户的设计重点就不同。采集目标用户的习惯交互方式不同类型的目标用户有不同的交互习惯。这种习惯的交互方式往往来源于其原有的针对现实的交互流程、已有软件工具的交互流程。当然还要在此基础上通过调研分析找到用