ui设计 教案 18个课时.docx

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

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

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

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

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

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

7、计软件的操作流程，树状结构，软件的结构与操作规范（spec）等。一个软件产品在编码之前需要作的就是交互设计，并且确立交互模型，交互规范。交互设计师一般都是软件工程师背景居多。研究人用户测试/研究工程师User experience engineer任何的产品为了保证质量都需要测试，软件的编码需要测试，自然UI设计也需要被测试。这个测试和编码没有任何关系，主要是测试交互设计的合理性以及图形设计的美观性。测试方法一般都是采用焦点小组，用目标用户问卷的形式来衡量UI设计的合理性。这个职位很重要，如果没有这个职位，UI设计的好坏只能凭借设计师的经验或者领导的审美来评判，这样就会给企业带来严重的风险性。

8、用户研究工程师一般是心理学人文学背景比较合适。综上所述UI设计师就是：软件图形设计师、交互设计师和用户研究工程师。其中交互设计师：“UI”的本义是用户界面，是英文User和interface的缩写。UI设计师则指从事对软件的人机交互、操作逻辑、界面美观的整体设计工作的人。工作内容：负责软件界面的美术设计、创意工作和制作工作；根据各种相关软件的用户群，提出构思新颖、有高度吸引力的创意设计；对页面进行优化，使用户操作更趋于人性化；维护现有的应用产品；收集和分析用户对于GUI的需求。第三节 UI设计在中国的现状目前在国内UI还是一个相对陌生的词，即便是洛可可设计也在UI设计的道路上不断探索客户及用户

9、的需求。我们经常看到一些招聘广告写着：招聘界面美工、界面美术设计师等等。这表明在国内对UI的理解还停留在美术设计方面，认为UI的工作只是描边画线，缺乏对用户交互的重要性的理解；另一方面在软件开发过程中还存在重技术而不重应用的现象。许多商家认为软件产品的核心是技术，而UI仅仅是次要的辅助，这点在人员的比例与待遇上可以表现出来。 但这不是UI设计真正的价值体现，只是UI设计发展的一个必经过程。我们以物质产品手机行业为例，当手机刚刚进入市场的时候不但价格贵的惊人，而且除了通话以外没有什么其他功能。由于当时的主导是技术，所以大家都把精力放在信号、待机时间、寿命等方面，对于产品的造型，使用的合理性很少关

10、心。事过境迁，如今技术已经完全的达到用户的需求，于是商家为了创造卖点，提高争力，非常重视产品的外观设计，除此之外还频频推出短信,彩屏，和铉，彩信,摄像头等等。这样一来产品的美观、个性、易用、易学、人性化等等都成了产品的卖点。软件产品与物质产品的发展是相同的。过去由于计算机硬件的限制，编码设计成为软件开发的代名词，美观亲和的图形化界面与合理易用的交互方式都没有得到充分的重视，实际上这个时期的软件叫作软件程序，而不是软件产品。现今随着计算机硬件的飞速发展，过去的软件程序已经不能适应用户的要求。软件产品在激烈的市场竞争中，仅仅有强大的功能是远远不够的，不足以战胜强劲的对手。幸运的是在国内一些高瞻远瞩

11、的民族企业已经开始意识到UI给软件产品带来的巨大卖点了，例如金山公司的影霸、词霸、毒霸、网标，由于重视UI的开发与地位，才使得金山产品在同类软件产品中首屈一指。联想软件的UI部门积极开展用户研究与使用性测试，将易用与美观相结合，推出的双模式电脑、幸福系列等成功UI范例，为联想赢得全球消费 PC第三的称号等等、等等.实践证明，各商家只要在产品美观和易用设计方面很小投入，将会有很大产出。其投入产出比，要比在功能领先性开发上的投入大得多。我们不得不承认现阶段中国在很多领域都与西方发达国家有相当大的差距，如何赶上并超过他们是我们这代人肩负的历史使命。软件产品领域不象物质产品那样存在工艺、材料上的限制，

12、软件产品核心问题就是人。提高软件UI设计师个人能力减小人员上的差距是中国UI发展首要关键的问题。目前国内各院校还没有设立相对健全的UI设计专业，所以提高UI设计师能力关键在于提供一个良好的学习与交流的资源环境。国内已经有很多交流设计网站，介绍工业设计、平面设计、服装设计、绘画艺术、多媒体flash等，但是UI设计一直没有受到应有的关注，仅仅被放在数码设计或者平面网页设计的一个栏目里，这仅有的资源对培养优秀的设计师是不够的，必须有一个信息快捷、资源丰富、设计水平一流、专业权威的UI设计学习与交流的地方才能适应日益发展的UI设计师们的需求。教学步骤及教学内容时间分配作业布置课后反思授课课题认识界面

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

14、面上看是用户与界面2个组成部分，但实际上还包括用户与界面之间的交互关系，所以这样可分为3个方向，他们分别是：用户研究、交互设计、界面设计。教学步骤及教学内容时间分配1、用户研究 用户研究包含两个方面：一是可用性工程学（usability Engineering），研究如何提高产品的可用性，使得系统的设计更容易被人使用、学习和记忆；二是通过可用性工程学的研究，发掘用户的潜在需求，为技术创新提供另外一条思路和方法（consumer insight）。 用户研究是一个跨学科的专业，涉及可用性工程学、人类功效学、心理学、市场研究学、教育学、设计学等学科。用户研究技术是站在人文学科的角度来研究产品，站在

15、用户的角度介入到产品的开发和设计中。 用户研究通过对于用户的工作环境、产品的使用习惯等研究，使得在产品开发的前期能够把用户对于产品功能的期望、对设计和外观方面的要求融入到产品的开发过程中去，从而帮助企业完善产品设计或者探索一个新产品概念。 他是得到用户需求和反馈的途径，也是检验界面与交互设计是否合理的重要标准。2、交互设计 这部分指人与机之间的交互工程，在过去交互设计也由程序员来做，其实程序员擅长编码，而不善于与最终用户交互。所以，很多的软件虽然功能比较齐全，但是交互方面设计很粗糙，繁琐难用，学习困难。使用这样的软件后，不是使人聪明与进步而是让人感到愚弄与羞辱。许多人因为不能操作电脑软件而下岗

16、失业，这样的交互使电脑成为让人恐惧的科技怪兽。于是我们把交互设计从程序员的工作中分离出来单独成为一个学科，也就是人机交互设计。他的目的在于加强软件的易用、易学、易理解，使计算机真正成为方便地为人类服务的工具。3、界面设计 在漫长的软件发展中，界面设计工作一直没有被重视起来。做界面设计的人也被贬义的称为“美工”。其实软件界面设计就像工业产品中的工业造型设计一样，是产品的重要买点。一个友好美观的界面会给人带来舒适的视觉享受，拉近人与电脑的距离，为商家创造卖点。界面设计不是单纯的美术绘画，他需要定位使用者、使用环境、使用方式并且为最终用户而设计，是纯粹的科学性的艺术设计。检验一个界面的标准即不是某个

17、项目开发组领导的意见也不是项目成员投票的结果，而是最终用户的感受。所以界面设计要和用户研究紧密结合，是一个不断为最终用户设计满意视觉效果的过程什么是UI? 常识 UI行业常用名词及缩写定义 - 什么是 UI ： UI的本意是用户界面，是英文User和 interface的缩写。 - 什么是 GUI Graphics User Interface 图形用户界面 有时也称为WIMP=Window/Icon/Menu/Pointing Device 窗口、图标、菜单、指点设备 - 什么是 HUI Handset User Interface 手持设备用户界面 - 什么是WUI Web User In

18、terface 网页风格用户界面 - 什么是用户界面设计： 在人和机器的互动过程（Human Machine Interaction）中，有一个层面，即我们所说的界面（interface）。从心理学意义来分，界面可分为感觉（视觉、触觉、听觉等）和情感两个层次。用户界面设计是屏幕产品的重要组成部分。界面设计是一个复杂的有不同学科参与的工程，认知心理学、设计学、语言学等在此都扮演着重要的角色。用户界面设计的三大原则是：置界面于用户的控制之下；减少用户的记忆负担；保持界面的一致性。教学步骤及教学内容时间分配作业布置课后反思授课课题认识界面门界面设计原则和分类教学目标和要求了解和掌握界面设计原则和分类

19、教学重点和难点重点：掌握界面设计的基本原则和分类难点：掌握界面设计的基本原则能熟练运用到设计当中教学方法案例教学教学手段多媒体授课时间第 九 周课时累计6教 学 过 程教学步骤及教学内容时间分配本节课我们来说UI艺术性设计的原则方面的问题。在结构设计的基础上，参照目标群体的心理模型和任务达成进行视觉设计。包括色彩啊、字体呀、页面哪等。视觉设计的原则主要有以下这么几点，同学们一定要注意喽！1）界面清晰明了，尤其导航要明确。最好允许用户定制界面，如下图：简单的界面设计比如像一些音频软件、3D软件他们的界面参数比较多，其复杂的窗口结构就更需要逻辑清晰的设计思路，这个时候呢，科学性肯定要远远大于艺术性

20、！! l% x7 N$ N% E0 r% a2）减少短期记忆的负担。就是说让计算机帮助记忆，例如IE进入界面地址等可以让机器记住。3 e#教学步骤及教学内容时间分配3）依赖认知而非记忆。譬如打印图标的记忆，下拉菜单列表中的选择等要符合业界习惯。4）提供视觉线索。界面要有吸引力，如下图：5）提供默认(default)、撤消(undo)、恢复(redo)等功能。这方面好多同学可能不是很了解，但是你要做好一个真正的UI设计师，那么功能方面你还是要有一定的掌握喔！当然啦，同学也不用怕，只要你用心，其实很简单的！Just do it!6）提供界面的快捷方式。7）尽量去使用真实事物的类比。如电话、打印机等

21、的图标设计，尊重用户以往的使用经验和使用习惯。: r: F1 A7 A9 8）完美视觉的清晰度。条理清晰，图片、文字的布局和隐喻不要让用户去猜。如图9）界面要协调一致。如手机界面按钮摆放，习惯左键肯定、右键否定或按内容摆放。10）同样功能用同样的图形表示。11）色彩与内容。整体软件尽量不要超过5个色系（特殊需要例外），近似的颜色表示近似的意思。二、界面的分类界面依据其在人与界面互动过程中的作用方式，分为操作界面和显示界面两大类。通常操作界面起到的是控制作用，用户通过操作界面发出信息，操作机器执行命令，同时也通过操作界面对机器的反馈信息作出反应动作。操作界面主要包括：触控屏幕、鼠标、键盘、操作手

22、柄、遥控器等。显示界面主要的职能是信息显示。用户通过显示界面监控机器对于指令的执行状况，同时也通过显示了解机器在执行命令后状况。包括图、文、声、光等可释读要素。一般情况下，显示界面和操作界面是共存的。操作界面为人机互动提供了动作平台，而显示界面则为人机互动提供了信息平台，这两个平台构成了人机互动的基本环境。根据界面的用户特征，我们又可以将界面分为网页用户界面、游戏用户界面、软件用户界面等几大类。这样分类的方式体现了“以用户为中心”的核心理念，而整个界面设计教学步骤及教学内容时间分配的过程都是围绕“用户”这个中心展开的。作业布置课后反思授课课题认识界面门设计界面的通用性的分析教学目标和要求进一步

23、认识界面，了解设计界面的通用性并进行分析教学重点和难点重点：设计界面的通用性的分析难点：设计界面的功能、情感、环境的共通教学方法案例教学教学手段多媒体授课时间第 九 周课时累计8教 学 过 程教学步骤及教学内容时间分配导入新课随着硬件技术的飞速发展，使计算速度与存储容量不再成为软件开发人员所担心的问题，用户关心的主要问题是能否比较容易和舒适地使用软件。换言之，人们的着眼点在于软件的易用性和美观，而易用与美观主要取决于用户界面，即UI的优劣。本课主要讲解UI的基本理论和设计属性，以期在具体学习UI设计技巧和制作技术之前对UI设计有一个整体的了解。1.1UI设计基本介绍众所周知，在当今的硬件与软件

24、环境下，一个软件没有很好的界面设计就不能算是成功的软件，因为不管它内部有多么精巧的技术，只要用户不愿意使用它，它的优越性就得不到发挥，它的价值和作用也就无从谈起。于是一个不涉及技术而着眼于易用和美观的用户界面显得越来越重要，这就是软件UI设计。教学步骤及教学内容时间分配UI的本意是用户界面(User Interface)，概括成一句话就是-人和工具之间的界面。这个界面实际上体现在我们生活中的每一个环节，例如同学们切菜的时候，刀把手就是这个界面;开车的时候方向盘啊仪表盘也是为个界面;看TV的时候遥控器亦是这个界面;用电脑的时候更不用说。于是乎，我们把UI分成两大类：硬件界面和软件界面。我们的教程

25、所涉及的皆为软件界面，同学们注意了，所以我们也可以称之为特殊的或者狭义的UI设计。n! 软件设计可分为两个部分：编码设计与UI设计。编码设计相信同学们都比较熟悉，但UI设计对许多猫来说可能还比较陌生，可能连一些专门从事网站多媒体设计的人员也不是很理解UI的含义。前面说了，UI是英文User和Interface的缩写。从字面上看有用户和界面两个组成部分，但实际上还包括用户与界面之后的交互关系，所以这样可分为3个方向，分别是：用户研究，交互设计和界面设计。后面我为同学们分描述。UI设计教程 1.2 设计界面通用性简单分析其实呢，按照界面的不同可以将其划分为功能性界面、情感性界面以及环境性界面。将界

26、面分为这3类有助于考察设计界面的诸多因素。当然啦，设计界面的划分并不是完全绝对的喽，这三类界面的涵义和内家可能也会有交差和重叠，这个同学们应该比较好理解，譬如宗教文化是一种环境性因素，但它带给信仰的人更多一层的肯定是情感的因素。嘿嘿！虽然说环境与情感性不好区分，但是并不妨碍不同分类之间所存在的实质性的差异。下面我带着同学们分别来了解这三类界面。$ W; _1 IE6 y7 7 W同学们不要着急喔！学习是循序渐进的，对UI设计来说，理论很重要喔！/ 功能性界面. o6 V/ M% VF 功能性界面主要是来实现使用性内容，因为呢，任何一件产品或内外环境或平面视觉传达作品，它们存在的价值和意义首先在

27、于使用性，再由使用性牵涉到多种功能因素的分析及实现功能的技术方法与材料运用。在这一方面，分析思维将作为一种更改思维存在。不难理解吧，同学？嘿嘿！如果作为一种处理方式来设计产品，那么这种产品会使多种特征性（譬如民族性，纯粹性）因素中性化，如果去除产品商标，就很难认出是哪国的或哪个公司的产品。当然，这方面也说明了产品中存在着共同性因素，它使全人类做出同样的反应。人的感觉和判断能力存在国际性的、客观性的特征。$ e: Y7 |8 8 Q/ v4 其实呢，功能性的界面是要建立在符号学的基础上的。同学不知道什么是符号学？国际符号学会对符号学是这样定义的：“符号是关于信号标志系统（PS:也就是通过某种渠道

28、传递信息的系统呗！）的理论，它研究自然符号系统的人造符号系统的特征。”广义地说呢，就是能够代表其他事物的东西都是符号，如字母、数字、仪式、意识、动作等，最复杂的一种符号系统可能就是语言喽。设计功能界面，不可避免地要让使用者明白功能操作界面的功能性标志一定要很鲜明，这个很重要。5 : : c1 T! c! k; T/ 2 情感性界面8 y& M/ j/ D1 H( z3 _% I* Z5 一个family装饰要赋予家居温馨，一副design work要以情动人，and so on.其实呢，任何一件产品或者portiflio只有与人的情产生共鸣才能为我们所接受，像爱屋及乌也体现了人的感情寄托。所以

29、呢，一件好设计作品设计作品是有相当大的魅力在。我们现代icon的设计发展也一直在朝着这一领域在开拓。符号学日渐被应用到广告学，宗教学，神话学，民俗学等比较多的领域。譬如国外符号学界把符号学用于认识论的研究，考察认识知觉，认识过程的符号学问题。同时，符号学还用于分析利用人体感官进行的交流，并将music 服装等都作为符号系统加以分析研究，这都为设计艺术提供了宝贵借鉴价值的情感界面设计方法和手段。j X# K; H G!环境性界面; V, x4 z9 p9 ?+ S- x) b就不说UI，任何的设计都要与环境这个因素相联系。它包括比较多，例如社会、政治和文化，科技，民族等等等等。人处于外界环境中，

30、是以社会群体而不是以个体为基础的，所以环境性因素一般牌非受控与难以预见的变化状态中。联系到设计的历史，我们可以利用艺术社会学的观点去认识各时期的设计潮流。其实呢，从18世纪的时候，西方的一批艺术家们已经注意到艺术创造与审美趣味深受地理，气候，民族以及历史条件等环境因素的影响。这不难理解，因为这大抵就是同学们会看到不同国家民族的作品面大相径庭的原因喽。记得，法国有外比较著名的老外，嘿嘿，貌似是个学者，他说物质文明和精神文明的性质面貌都取决于种族，环境，时代三大因素。也就是这个理儿。无论是工艺美术运动，同学们熟知的包豪思现代主义还是我提起来都抖擞的80年代的反设计，乃至现代的多元化等等都很明显地反应了环境因素对咱们设计的影响。! k! $ G# F) 同学们都玩游戏，其实呢，游戏中的界面设计就是最典型的环境性界面。其实呢，成功的作品都能够完美地把以上三种界面结合的作品。爱好设计的同学们肯定听说过著名的卢浮宫扩建工程，貌似是贝聿铭设计的，功能性处理的那是相当的牛，并没有屈于形式而损害功能。人们参观卢浮宫，不是回到古代，而是以新的价值观去重新审视与欣赏，尤其是它的三角形外教学步骤及教学内容时间分配观符合了人们的心理期望，但是他又把情感性界面处理到极致，嘿嘿，我在这里就不附图了，同学们可以