ui设计 教案 18个课时

ui 设计 领导形象设计圆作业设计ao工艺污水处理厂设计附属工程施工组织设计清扫机器人结构设计 教案 中职数学基础模块教案 下载北师大版¥1.2次方程的根与系数的关系的教案关于坚持的教案初中数学教案下载电子教案下载 18个课时 Lesson Preparation _2013__--__2014_学年 第_一_学期 Academic Year - Semester 课 程 名 称 UI设计 Course 教材名称及版本 UI设计 Textbook and Edition 授 课 班 级 2011平面1班 Class 教 师 姓 名 黎 丹 Teacher 审 核 人 周 增 辉 Approver 填写说明 1、此备课本用来 书 关于书的成语关于读书的排比句社区图书漂流公约怎么写关于读书的小报汉书pdf 写教案～适用于所有专职教师、兼职教师和兼课教师。 2、所有承担教学任务的教师需书写纸质版教案～如因使用多媒体教学需要和教学任务繁重～可用电子版教案～但格式必须按纸质版格式～且所有教案的书写应与学期授课 计划 项目进度计划表范例计划下载计划下载计划下载课程教学计划下载 相符合。 3、备课过程中的各个环节和要素可根据实际授课内容进行填写。如: 授课课题:,教学章、节、标题或项目名称, 教学目标和要求:,教学目标一般说应包含知识教学、能力发展和思想教育三方面内容～教学要求是指识记、理解、简单应用、综合应用等层次, 教学重点和难点:教学重点～是为了达到确定的教学目的而必须着重讲解和分析的内容,教学难点～是就学生的接受情况而言的～学生经过自学还不能理解或理解有困难的地方～即可确定为教学难点。 教学方法:,讨论、启发、演示、辩论、讲练结合、案例教学、情境模拟等, 教学手段:,多媒体教学、录像带、挂图、幻灯片等, 授课时间:第 周 课时累计: 教学过程:,体现教学步骤～包括时间分配和教学内容教学进程, 作业布臵:,含思考题、讨论题, 课后反思:,因为课后反思是教案实施效果追记～课前还不能打印～只能课后用笔手写, 4、备课本的审核人为各教研室,项目中心,主任。 授课课题 认识界面门—UI设计说课 教学 通过本章学习使学生了解UI在中国的发展，以及UI的是目标和要求 什么 教学 教学重点:掌握UI在中国的发展，以及UI是什么。 重点和难点 教学难点:掌握UI是什么。 教学方法 案例教学 教学手段 多媒体 授课时间 第 九 周 课时累计 2 教 学 过 程 时间分配 教学步骤及教学内容 导入新课: UI即User Interface(用户界面)的简称。UI设计则是指对软 件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计 不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、 简单、自由,充分体现软件的定位和特点。 第一节 UI是什么 软件设计可分为两个部分:编码设计与UI设计。 教学步骤及教学内容 时间分配 编码设计大家都很熟悉，但是 UI设计还是一个很陌生的词，即使一些专门从事网站与多媒体设计的人也不完全理解UI的意思。UI的本意是用户界面，是英文User和 interface的缩写。从字面上看是用户与界面2个组成部分，但实际上还包括用户与界面之间的交互关系。 在飞速发展的电子产品中，界面设计工作一点点的被重视起来。做界面设计的“美工”也随之被称之为“UI设计师”或“UI工程师”。其实软件界面设计就像工业产品中的工业造型设计一样，是产品的重要卖点。一个电子产品拥有美观的界面会给人带来舒适的视觉享受，拉近人与商品的距离，为商家创造卖点。界面设计不是单纯的美术绘画，他需要定位使用者、使用环境、使用方式并且为最终用户而设计，是建立在科学性之上的艺术设计。检验一个界面的 标准 excel标准偏差excel标准偏差函数exl标准差函数国标检验抽样标准表免费下载红头文件格式标准下载 既不是某个项目开发组领导的意见也不是项目成员投票的结果，而是终端用户的感受。所以界面设计要和用户研究紧密结合，是一 个不断为最终用户设计满意视觉效果的过程。 第二节 UI设计师是做什么的 在中国，UI设计还是一个需要不断成长的设计领域，但eicodesign,Tigocn, lkkui design, Robin design等国内知名设计机构已经进入了探索UI设计的道路。 UI设计从工作内容上来说分为3个方向。它主要是由UI 研究的3个因素决定的， 其分别是研究工具，研究人与界面的关系，研究人。 研究界面 图形设计师Graphic UI designer 国内目前大部分UI工作者都是从事这个行业。也有人称之为美工，但实际上不是单纯意义上的美术工人，而是软件产品的产品外形设计师。 这些设计师大多是美术院校毕业的，其中大部分是有美术设计教育背景，例如工业外形设计，装潢设计，信息多媒体设计等。 研究人与界面的关系 交互设计师，interaction designer 在图形界面产生之前，长期以来UI设计师就是指交互设 计师。交互设计师的工作内容就是设计软件的操作流程，树状结构，软件的结构与操作规范(spec)等。一个软件产品在编码之前需要作的就是交互设计，并且确立交互模型，交互规范。 交互设计师一般都是软件工程师背景居多。 研究人 用户测试/研究工程师User experience engineer 任何的产品为了保证质量都需要测试，软件的编码需要测试，自然UI设计也需要被测试。这个测试和编码没有任何关系，主要是测试交互设计的合理性以及图形设计的美观性。测试方法一般都是采用焦点小组，用目标用户问卷的形式来衡量UI设计的合理性。这个职位很重要，如果没有这个职位，UI设计的好坏只能凭借设计师的经验或者领导的审美来评判，这样就会给企业带来严重的风险性。 用户研究工程师一般是心理学人文学背景比较合适。 综上所述UI设计师就是:软件图形设计师、交互设计师和用户研究工程师。 其中交互设计师: “UI”的本义是用户界面，是英文User和interface的缩写。UI设计师则指从事对软件的人机交互、操作逻辑、界面美观的整体设计工作的人。 工作内容: 负责软件界面的美术设计、创意工作和制作工作; 根据各种相关软件的用户群，提出构思新颖、有高度吸引力的创意设计; 对页面进行优化，使用户操作更趋于人性化; 维护现有的应用产品; 收集和分析用户对于GUI的需求。 第三节 UI设计在中国的现状 目前在国内UI还是一个相对陌生的词，即便是洛可可设计也在UI设计的道路上不断探索客户及用户的需求。我们经常看到一些招聘广告写着:招聘界面美工、界面美术设计师等等。这表明在国内对UI的理解还停留在美术设计方面，认为UI的工作只是描边画线，缺乏对用户交互的重要性的理解;另一方面在软件开发过程中还存在重技术而不重应用的现象。许多商家认为软件产品的核心是技术，而UI仅仅是次要的辅助，这点在人员的比例与待遇上可以表现出来。 但这不是UI设计真正的价值体现，只是UI设计发展的一个必经过程。我们以物质产品手机行业为例，当手机刚刚进入市场的时候不但价格贵的惊人，而且除了通话以外没有什么其他功能。由于当时的主导是技术，所以大家都把精力放在信号、待机时间、寿命等方面，对于产品的造型，使用的合理性很 少关心。事过境迁，如今技术已经完全的达到用户的需求，于是商家为了创造卖点，提高争力，非常重视产品的外观设计，除此之外还频频推出短信,彩屏，和铉，彩信,摄像头等等。这样一来产品的美观、个性、易用、易学、人性化等等都成了产品的卖点。软件产品与物质产品的发展是相同的。过去由于计算机硬件的限制，编码设计成为软件开发的代名词，美观亲和的图形化界面与合理易用的交互方式都没有得到充分的重视，实际上这个时期的软件叫作软件程序，而不是软件产品。 现今随着计算机硬件的飞速发展，过去的软件程序已经不能适应用户的要求。软件产品在激烈的市场竞争中，仅仅有强大的功能是远远不够的，不足以战胜强劲的对手。幸运的是在国内一些高瞻远瞩的民族企业已经开始意识到UI给软件产品带来的巨大卖点了，例如金山公司的影霸、词霸、毒霸、网标，由于重视UI的开发与地位，才使得金山产品在同类软件产品中首屈一指。联想软件的UI部门积极开展用户研究与使用性测试，将易用与美观相结合，推出的双模式电脑、幸福系列等成功UI范例，为联想赢得全球消费 PC第三的称号等等、等等.实践证明，各商家只要在产品美观和易用设计方面很小投入，将会有很大产出。其投入产出比，要比在功能领先性开发上的投入大得多。 我们不得不承认现阶段中国在很多领域都与西方发达国 家有相当大的差距，如何赶上并超过他们是我们这代人肩负的历史使命。软件产品领域不象物质产品那样存在工艺、材料上的限制，软件产品核心问题就是人。提高软件UI设计师个人能力减小人员上的差距是中国UI发展首要关键的问题。 目前国内各院校还没有设立相对健全的UI设计专业，所以提高UI设计师能力关键在于提供一个良好的学习与交流的资源环境。国内已经有很多交流设计网站，介绍工业设计、平面设计、服装设计、绘画艺术、多媒体flash等，但是UI设计一直没有受到应有的关注，仅仅被放在数码设计或者平面网页设计的一个栏目里，这仅有的资源对培养优秀的设计师是不够的，必须有一个信息快捷、资源丰富、设计水平一流、专业权威的UI设计学习与交流的地方才能适应日益发展的UI设计师们的需求。 时间分配 教学步骤及教学内容 作业布置 课后反思 授课课题 认识界面门 教学 界面的概述 目标和要求 教学 重点:了解什么UI,什么是界面 重点和难点 难点:界面的概述 教学方法 案例教学 教学手段 多媒体 授课时间 第 九 周 课时累计 4 教 学 过 程 教学步骤及教学内容 时间分配 导入新课:随着硬件技术的飞速发展～使计算速度与存储容量 不再成为软件开发人员所担心的问题～用户关心的主要问题是能 否比较容易和舒适地使用软件。换言之～人们的着眼点在于软件 的易用性和美观～而易用与美观主要取决于用户界面～即UI的 优劣。 本课主要讲解UI的基本理论和设计属性～以期在具体学习UI设 计技巧和制作技术之前对UI设计有一个整体的了解。 什么事UI呢,UI的本意是用户界面～是英文User和 interface的缩写。从字面上看是用户与界面2个组成部分～但实际上还包括用户与界面之间的交互关系～所以这样可分为3个方向～他们分别是:用户研究、交互设计、界面设计。 教学步骤及教学内容 时间分配 1、用户研究 用户研究包含两个方面:一是可用性工程学,usability Engineering,～研究如何提高产品的可用性～使得系统的设计更容易被人使用、学习和记忆,二是通过可用性工程学的研究～发掘用户的潜在需求～为技术创新提供另外一条思路和方法,consumer insight,。 用户研究是一个跨学科的专业～涉及可用性工程学、人类功效学、心理学、市场研究学、教育学、设计学等学科。用户研究技术是站在人文学科的角度来研究产品～站在用户的角度介入到产品的开发和设计中。 用户研究通过对于用户的工作环境、产品的使用习惯等研究～使得在产品开发的前期能够把用户对于产品功能的期望、对设计和外观方面的要求融入到产品的开发过程中去～从而帮助企业完善产品设计或者探索一个新产品概念。 他是得到用户需求和反馈的途径～也是检验界面与交互设计是否合理的重要标准。 2、交互设计 这部分指人与机之间的交互工程～在过去交互设计也由程 序员来做～其实程序员擅长编码～而不善于与最终用户交互。所以～很多的软件虽然功能比较齐全～但是交互方面设计很粗糙～繁琐难用～学习困难。使用这样的软件后～不是使人聪明与进步而是让人感到愚弄与羞辱。许多人因为不能操作电脑软件而下岗失业～这样的交互使电脑成为让人恐惧的科技怪兽。于是我们把交互设计从程序员的工作中分离出来单独成为一个学科～也就是人机交互设计。他的目的在于加强软件的易用、易学、易理解～使计算机真正成为方便地为人类服务的工具。 3、界面设计 在漫长的软件发展中～界面设计工作一直没有被重视起来。做界面设计的人也被贬义的称为“美工”。其实软件界面设计就像工业产品中的工业造型设计一样～是产品的重要买点。一个友好美观的界面会给人带来舒适的视觉享受～拉近人与电脑的距离～为商家创造卖点。界面设计不是单纯的美术绘画～他需要定位使用者、使用环境、使用方式并且为最终用户而设计～是纯粹的科学性的艺术设计。检验一个界面的标准即不是某个项目开发组领导的意见也不是项目成员投票的结果～而是最终用户的感受。所以界面设计要和用户研究紧密结合～是一个不断为最终用户设计满意视觉效果的过程 什么是UI? [常识] UI行业常用名词及缩写定义 - 什么是 UI : UI的本意是用户界面～是英文User和 interface的缩写。 - 什么是 GUI Graphics User Interface 图形用户界面 有时也称为WIMP=Window/Icon/Menu/Pointing Device 窗口、图标、菜单、指点设备 - 什么是 HUI Handset User Interface 手持设备用户界面 - 什么是WUI Web User Interface 网页风格用户界面 - 什么是用户界面设计: 在人和机器的互动过程,Human Machine Interaction,中～有一个层面～即我们所说的界面,interface,。从心理学意义来分～界面可分为感觉,视觉、触觉、听觉等,和情感两个层次。用户界面设计是屏幕产品的重要组成部分。界面设计是一个复杂的有不同学科参与的工程～认知心理学、设计学、语言学等在此都扮演着重要的角色。用户界面设计的三大原则是:臵界面于用户的控制之下,减少用户的记忆负担,保持界面的一致性。 时间分配 教学步骤及教学内容 作业布置 课后反思 授课课题 认识界面门—界面设计原则和分类 教学 了解和掌握界面设计原则和分类 目标和要求 教学 重点:掌握界面设计的基本原则和分类 重点和难点 难点:掌握界面设计的基本原则能熟练运用到设计当中 教学方法 案例教学 教学手段 多媒体 授课时间 第 九 周 课时累计 6 教 学 过 程 教学步骤及教学内容 时间分配 本节课我们来说UI艺术性设计的原则方面的问题。在结 构设计的基础上～参照目标群体的心理模型和任务达成进行视觉 设计。包括色彩啊、字体呀、页面哪等。视觉设计的原则主要有 以下这么几点～同学们一定要注意喽: 1,界面清晰明了～尤其导航要明确。最好允许用户定制界面～ 如下图: 简单的界面设计比如像一些音频软件、3D软件他们的界面参数 比较多～其复杂的窗口结构就更需要逻辑清晰的设计思路～这个 时候呢～科学性肯定要远远大于艺术性: 2,减少短期记忆的负担。就是说让计算机帮助记忆～例如IE进入界面地址等可以让机器记住。 时间分配 教学步骤及教学内容 3,依赖认知而非记忆。譬如打印图标的记忆～下拉菜单列表 中的选择等要符合业界习惯。 4,提供视觉线索。界面要有吸引力～如下图: 5,提供默认(default)、撤消(undo)、恢复(redo)等功能。这方面好多同学可能不是很了解～但是你要做好一个真正的UI设计师～那么功能方面你还是要有一定的掌握喔:当然啦～同学也不用怕～只要你用心～其实很简单的:Just do it! 6,提供界面的快捷方式。 7,尽量去使用真实事物的类比。如电话、打印机等的图标设计～尊重用户以往的使用经验和使用习惯。 8,完美视觉的清晰度。条理清晰～图片、文字的布局和隐喻不要让用户去猜。 如图 9,界面要协调一致。如手机界面按钮摆放～习惯左键肯定、右键否定或按内容摆放。 10,同样功能用同样的图形表示。 11,色彩与内容。整体软件尽量不要超过5个色系,特殊需要例外,～近似的颜色表示近似的意思。 二、界面的分类 界面依据其在人与界面互动过程中的作用方式～分为操作界面和显示界面两大类。 通常操作界面起到的是控制作用～用户通过操作界面发出信息～操作机器执行命令～同时也通过操作界面对机器的反馈信息作出反应动作。操作界面主要包括:触控屏幕、鼠标、键盘、操作手柄、遥控器等。 显示界面主要的职能是信息显示。用户通过显示界面监控机器对于指令的执行状况～同时也通过显示了解机器在执行命令后状况。包括图、文、声、光等可释读要素。 一般情况下～显示界面和操作界面是共存的。操作界面为人机互动提供了动作平台～而显示界面则为人机互动提供了信息平台～这两个平台构成了人机互动的基本环境。 根据界面的用户特征～我们又可以将界面分为网页用户界面、游戏用户界面、软件用户界面等几大类。这样分类的方式体现了“以用户为中心”的核心理念～而整个界面设计 教学步骤及教学内容 时间分配 的过程都是围绕“用户”这个中心展开的。 作业布置 课后反思 授课课题 认识界面门—设计界面的通用性的分析 教学 进一步认识界面～了解设计界面的通用性并进行分析 目标和要求 教学 重点:设计界面的通用性的分析 重点和难点 难点:设计界面的功能、情感、环境的共通 教学方法 案例教学 教学手段 多媒体 授课时间 第 九 周 课时累计 8 教 学 过 程 教学步骤及教学内容 时间分配 导入新课 随着硬件技术的飞速发展～使计算速度与存储容量不再成 为软件开发人员所担心的问题～用户关心的主要问题是能否 比较容易和舒适地使用软件。换言之～人们的着眼点在于软件的易用性和美观～而易用与美观主要取决于用户界面～即 UI的优劣。 本课主要讲解UI的基本理论和设计属性～以期在具体学习UI设计技巧和制作技术之前对UI设计有一个整体的了解。 1.1 UI设计基本介绍 众所周知～在当今的硬件与软件环境下～一个软件没有很好的界面设计就不能算是成功的软件～因为不管它内部有多么 精巧的技术～只要用户不愿意使用它～它的优越性就得不到 发挥～它的价值和作用也就无从谈起。于是一个不涉及技术而着眼于易用和美观的用户界面显得越来越重要～这就是软件UI设计。 时间分配 教学步骤及教学内容 UI的本意是用户界面(User Interface)～概括成一句话 就是------人和工具之间的界面。这个界面实际上体现在我们生活中的每一个环节～例如同学们切菜的时候～刀把手就是这个界面;开车的时候方向盘啊仪表盘也是为个界面;看TV的时候遥控器亦是这个界面;用电脑的时候更不用说。于是乎～我们把UI分成两大类:硬件界面和软件界面。我们的教程所涉及的皆为软件界面～同学们注意了～所以我们也可以称之为特殊的或者狭义的UI设计。 软件设计可分为两个部分:编码设计与UI设计。编码设计相信同学们都比较熟悉～但UI设计对许多猫来说可能还比较陌生～可能连一些专门从事网站多媒体设计的人员也不是很理解UI的含义。前面说了～UI是英文User和Interface的缩写。从字面上看有用户和界面两个组成部分～但实际上还包括用户与界面之后的交互关系～所以这样可分为3个方向～分别是:用户研究～交互设计和界面设计。后面我为同学们分描述。 UI设计教程 1.2 设计界面通用性简单分析 其实呢～按照界面的不同可以将其划分为功能性界面、情感性界面以及环境性界面。将界面分为这3类有助于考察设计界面的诸多因素。当然啦～设计界面的划分并不是完全绝对的喽～这三类界面的涵义和内家可能也会有交差和重叠～ 这个同学们应该比较好理解～譬如宗教文化是一种环境性因素～但它带给信仰的人更多一层的肯定是情感的因素。嘿嘿:虽然说环境与情感性不好区分～但是并不妨碍不同分类之间所存在的实质性的差异。下面我带着同学们分别来了解这三类界面。 同学们不要着急喔:学习是循序渐进的～对UI设计来说～理论很重要喔: 功能性界面 功能性界面主要是来实现使用性内容～因为呢～任何一件产品或内外环境或平面视觉传达作品～它们存在的价值和意义首先在于使用性～再由使用性牵涉到多种功能因素的分析及实现功能的技术方法与材料运用。在这一方面～分析思维将作为一种更改思维存在。不难理解吧～同学,嘿嘿:如果作为一种处理方式来设计产品～那么这种产品会使多种特征性,譬如民族性～纯粹性,因素中性化～如果去除产品商标～就很难认出是哪国的或哪个公司的产品。当然～这方面也说明了产品中存在着共同性因素～它使全人类做出同样的反应。人的感觉和判断能力存在国际性的、客观性的特征。 其实呢～功能性的界面是要建立在符号学的基础上的。同学不知道什么是符号学,国际符号学会对符号学是这样定义的:“符号是关于信号标志系统,PS:也就是通过某种渠道传 递信息的系统呗:,的理论～它研究自然符号系统的人造符号系统的特征。”广义地说呢～就是能够代表其他事物的东西都是符号～如字母、数字、仪式、意识、动作等～最复杂的一种符号系统可能就是语言喽。设计功能界面～不可避免地要让使用者明白功能操作界面的功能性标志一定要很鲜明～这个很重要。 情感性界面 一个family装饰要赋予家居温馨～一副design work要以情动人～and so on.其实呢～任何一件产品或者portiflio只有与人的情产生共鸣才能为我们所接受～像爱屋及乌也体现了人的感情寄托。所以呢～一件好设计作品设计作品是有相当大的魅力在。 我们现代icon的设计发展也一直在朝着这一领域在开拓。符号学日渐被应用到广告学～宗教学～神话学～民俗学等比较多的领域。譬如国外符号学界把符号学用于认识论的研究～考察认识知觉～认识过程的符号学问题。同时～符号学还用于分析利用人体感官进行的交流～并将music 服装等都作为符号系统加以分析研究～这都为设计艺术提供了宝贵借鉴价值的情感界面设计方法和手段。 环境性界面 就不说UI～任何的设计都要与环境这个因素相联系。它包括比较多～例如社会、政治和文化～科技～民族等等等等。人 处于外界环境中～是以社会群体而不是以个体为基础的～所以环境性因素一般牌非受控与难以预见的变化状态中。 联系到设计的历史～我们可以利用艺术社会学的观点去认识各时期的设计潮流。其实呢～从18世纪的时候～西方的一批艺术家们已经注意到艺术创造与审美趣味深受地理～气候～民族以及历史条件等环境因素的影响。这不难理解～因为这大抵就是同学们会看到不同国家民族的作品面大相径庭的原因喽。记得～法国有外比较著名的老外～嘿嘿～貌似是个学者～他说物质文明和精神文明的性质面貌都取决于种族～环境～时代三大因素。也就是这个理儿。无论是工艺美术运动～同学们熟知的包豪思现代主义还是我提起来都抖擞的80年代的反设计～乃至现代的多元化等等都很明显地反应了环境因素对咱们设计的影响。 同学们都玩游戏～其实呢～游戏中的界面设计就是最典型的环境性界面。 其实呢～成功的作品都能够完美地把以上三种界面结合的作品。爱好设计的同学们肯定听说过著名的卢浮宫扩建工程～貌似是贝聿铭设计的～功能性处理的那是相当的牛～并没有屈于形式而损害功能。人们参观卢浮宫～不是回到古代～而是以新的价值观去重新审视与欣赏～尤其是它的三角形外 时间分配 教学步骤及教学内容 观符合了人们的心理期望～但是他又把情感性界面处理到极 致～嘿嘿～我在这里就不附图了～同学们可以搜索看看。 作业布置 课后反思 授课课题 人本界面—回归人性的界面设计 教学 理解“认知摩擦”和“可用性”两个概念 目标和要求 教学 重点:理解“认知摩擦”和“可用性”两个概念 重点和难点 难点:理解“认知摩擦”和“可用性”两个概念 教学方法 案例教学 教学手段 多媒体 授课时间 第 十 周 课时累计 10 教 学 过 程 教学步骤及教学内容 时间分配 导入新课:人类的认知水平在随着问题的变化而变化过程中 所遇到的阻力就是认知摩擦。在软件硬件不断升级的过程中～认 知摩擦时刻存在。例如:我们在面对一个升级到新版本的软件时～ 通常需要花上一段时间才能熟悉掌握它～而升级所带来的新功能 又很少能用到～或者是通过一段时间的学习后才能正确使用～这 其实就是“认知摩擦”在作祟。 当然～少量的认知摩擦对于提升我们的认知能力是有帮助 的～因此我们提倡回归人性的界面设计～就是通过各种方法让这 种认知摩擦控制在一定范围之内。但在实际操作中要做到这一点 并不容易。比如～在设计微波炉的界面时～是不是让按钮和把手都更加适合人的眼睛和手指～让信息更容易被读取就解决了认知摩擦的问题呢, 教学步骤及教学内容 时间分配 为用户而设计--可用性 可用性的标准对任何的人实施中心的活动都有效～界面设计尤其如此。 在一组可用性不错的手机图标设计中～通过图形我们就能明白其意义而不需要翻阅说明书。可用性是评估用户界面是否容易使用的程度属性。 一般来说～可用性由5个属性组成。 ,1, 可学习性～也就是初次接触界面时～用户在 没有任何经验的情况下使用界面完成基本 任务的难易程度。 ,2, 效率～当用户熟悉了这个界面后～其完成任 务的速度。 ,3, 可记忆性～在一段时间没有使用之后再次使 用界面～用户重新熟练操作的难易程度。 ,4, 出错～用户在使用界面是除了多少错误～这 些错误的严重程度～以及是否能够方便迅速 的觉察错误并恢复。 ,5, 满意度～用户使用这个界面的满意程度。 实现可用性的途径有如下5个方面。 ,1, 为用户的实际工作而设计。 ,2, 学会与客户沟通。 ,3, 避免为创新而创新。 ,4, 努力建立有效的交互。 ,5, 用实际工作来测试界面。 操作界面的类型与特征 操作界面可以分为连续性和不连续性操作界面两大类～其中不连续性操作界面可分为三种情况:一是开关～如电灯开关等,二是不连续性调整控制。如电视机的频道按钮,三是符号输入按钮～如电脑键盘。 连续性操作界面也可以分为两种情况:一是定量调节控制～其作用是调节机器到莫一种状态～如收音机上的电台波段调谐钮,二是连续调节控制～其作用是不断调节机器状态～使其沿理想方向运行～如方向盘。 时间分配 教学步骤及教学内容 作业布置 课后反思 授课课题 人本界面 教学 通过本章学习使学生了解UI设计案例展示欣赏与分析 目标和要求 教学重点:掌握UI设计案例展示欣赏与分析。 教学 教学难点:掌握UI设计案例展示欣赏与分析。 重点和难点 教学方法 案例教学 教学手段 多媒体 授课时间 第 十 周 课时累计 12 教 学 过 程 时间分配 教学步骤及教学内容 导入新课 第一节 图标 图标是具有明确指代含义的计算机图形。其中桌面图标是软件标识，界面中的图标是功能标识。 教学步骤及教学内容 时间分配 图标分为广义和狭义两种: 广义 具有指代意义的图形符号，具有高度浓缩并快捷传达信息、便于记忆的特性。应用范围很广，软硬件网页社交场所公共场合无所不在，例如:男女厕所标志和各种交通标志等。 狭义 应用于计算机软件方面，包括:程序标识、数据标识、命令选择、模式信号或切换开关、状态指示等。 一个图标是一个小的图片或对象，代表一个文件，程序，网页，或命令。图标有助于用户快速执行命令和打开程序文件。单击或双击图标以执行一个命令。图标也用于在浏览器中快速展现内容。所有使用相同扩展名的文件具有相同的图标。 图标有一套标准的大小和属性格式，且通常是小尺寸的。每个图标都含有多张相同显示内容的图片，每一张图片具有不同的尺寸和发色数。一个图标就是一套相似的图片，每一张图片有不同的格式。从这一点上说图标是三维的。图标还有另一个特性:它含有透明区域，在透明区域内可以透出图标下的桌面背景。在结构上图标其实和麦当劳的巨无霸汉堡差不多。 一个图标实际上是多张不同格式的图片的集合体，并且还包含了一定的透明区域。因为计算机操作系统和显示设备的多样性，导致了图标的大小需要有多种格式。 象素分辨 操作系统在显示一个图标时，会按照一定的标准选择图标中最适合当前显示环境和状态的图像。如果你用的是Windows98操作系统，显示环境是 800x600分辨率，32位色深，你在桌面上看到的每个图标的图像格式就是256色32x32象素大小。如果在相同的显示环境下，Windows XP操作系统中，这些图标的图像格式就是:真彩色(32位色深)、32x32象素大小。下面就是Windows各个 操作系统中的标准图标格式:(单位:大小象素—颜色) Windows 98 SE/ME/2000 48 x 48 - 256 32 x 32 - 256 16 x 16 - 256 48 x 48 - 16 32 x 32 - 16 16 x 16 - 16 Windows XP 48 x 48 - 32bit 32 x 32 - 32bit 24 x 24 - 32bit * 16 x 16 - 32bit 48 x 48 - 256 32 x 32 - 256 24 x 24 - 256 * 16 x 16 - 256 48 x 48 - 16 32 x 32 - 16 24 x 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 ? 建议: 48x48 ( 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色， 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色) ? 可选: 256x256 ( 256色， 16色) ， 64x64 ( 256色， 16色) 此画面为手机的操作系统的图标。 同学们主要在以下几个方面来考虑: 1 造型; 2 颜色; 3 艺术性; 4 创造性; 5 统一性; 我收集了一些图标的文件，我们接下来可以分享一下。 第二节 输入法设计 输入法是指为了将各种符号输入计算机或其他设备(如手机)而采用的编码方法。汉字输入的编码方法，基本上都是采用将音、形、义与特定的键相联系，再根据不同汉字进行组合来完成汉字的输入的。 中文热门输入法 搜狗拼音输入法: 搜狗拼音输入法是2006年6月由搜狐(SOHU)公司推出的一款Windows平台下的汉字拼音输入法。搜狗拼音输入法是基于搜索引擎技术的、特别适合网民使用的、新一代的输入法产品，用户可以通过互联网备份自己的个性化词库和配置信息。搜狗拼音输入法为中国国内现今主流汉字拼音输入法之一，奉行永久免费的原则。 QQ拼音输入法: QQ拼音输入法是腾讯公司开发的一种方便人们使用和观看的输入法，可下载各种各样的皮肤来改变自身的皮肤。 同学们主要在以下几个方面来考虑: 1 造型; 2 颜色; 3 艺术性; 4 创造性; 5 统一性; 我收集了一些图标的文件，我们接下来可以分享一下。 第三节 手机界面设计 同学们主要在以下几个方面来考虑: 1 造型; 2 颜色; 3 艺术性; 4 创造性; 5 统一性; 我收集了一些图标的文件，我们接下来可以分享一下。 第四节 播放器 同学们主要在以下几个方面来考虑: 1 造型;2 颜色;3 艺术性;4 创造性;5 统一性; 我收集了一些图标的文件，我们接下来可以分享一下。 第五节 系统界面 时间分配 教学步骤及教学内容 同学们主要在以下几个方面来考虑: 1 造型; 2 颜色; 3 艺术性; 4 创造性; 5 统一性; 我收集了一些图标的文件，我们接下来可以分享一下。 作业布置 课后反思 授课课题 界面的整体设计 教学 界面设计的重要性,设计原则 目标和要求 重点:界面设计的重要性,设计原则 教学 难点:掌握界面设计的重要性,设计原则进行界面设计 重点和难点 教学方法 案例教学 教学手段 多媒体 授课时间 第 九 周 课时累计 14 教 学 过 程 时间分配 教学步骤及教学内容 提问导入:用户界面设计为什么这么重要呢?下面带着大家 一起来了解界面设计. 用户界面设计从字面上来说 ,是面向用户的 。用户界面的 发展经历了从低级到高级的过程～用户界面在软件系统中的价值比重也越来越高～用户假面设计不仅要美观～而且要实用。用户 界面是人机之间交流、沟通的层面～用户界面设计是以人为中心～ 使产品达到逾越使用的设计。 教学步骤及教学内容 时间分配 界面设计的重要性 界面是用户与网页交互的窗口～用户通过界面想计算机输入信息进行控制、查询和操作,网页则通过界面想用户提供信息～以供阅读、分析、判断。所以界面设计在网页中占有重要的位臵。 界面设计的原则 界面设计是浏览者与网络交流的平台～由于它在网络中具有特殊位臵～所以其设计要遵循一定的原则。首先是简易性～简易是为了方便用户使用～了解网页内容。其次是清楚安全～指在用户出现危机的选择时有信息介入系统的提示。最后是灵活人性化～指让用户轻松快捷的使用。 界面设计的要求 界面设计师浏览者浏览网页的第一印象～所以它的设计风格要与整体页面相一致～颜色的搭配要符合人们的视觉习惯～并与页面的整体色调想协调。其中～字体的选择不要过于花哨～选用平常字体即可。 一(什么是界面设计 界面设计是为了满足专业化、标准化需求而对软件的使用界面进行美化、优化、规范化的设计分支～具体包括软件启动封面设计、软件框架设计、按钮设计、面板设计、菜单 设计、标签设计、图标设计、滚动条及状态栏设计、安装过程设计、包装及商品化。如下图:直观的按钮设计 二(图形界面的分类 随着科技的发展～人们对信息的需求量也在不断的增多，所以图形界面也越来越多样化和细分化，不同的图形界面在设计上也会有不同的特点。图形界面可以分为以下几类: , 软件用户界面:软件只是一种工具，然而人们与软件 的交互性操作都是通过软件界面来进行的，所以软件 界面的设计不仅要美观而且要易用。 , 网络界面:网络的发展带来的网站界面设计的繁荣， 随着网络的发展，网站设计已经从最初的纯文字内容 发展到现在的包含图像、视频、动画等多种媒体的形 式。网站界面必须具有独立性和创意性。在网站界面 设计中，最重要的是使用户方便地查找信息，并能够 感受到方便操作带来的乐趣。如下图的咖啡网站页面 , 手机界面:随着科技的发展，手机的功能也越来越强 大，手机界面的设计要人性化，不仅要方便使用，还 要美观。如下图 , 游戏界面:游戏软件界面的制作通常比较华丽、主题 鲜明，三维效果十分普遍，所以游戏中的人物或物品 为主体，视觉效果占十分重要的地位。 , 播放器界面:在激烈的市场竞争中，软件产品仅有强 大的功能是远远不够的，将易用性与美观相结合，才 能适应用户的需要，从而创造出更高的价值。 教学步骤及教学内容 时间分配 作业布置 课后反思 授课课题 界面的整体设计-- UI设计流程 教学 通过本章学习使学生了解UI设计原则、流程。 目标和要求 教学重点:掌握UI设计原则、流程。 教学 教学难点:掌握UI设计流程。 重点和难点 教学方法 案例教学 教学手段 多媒体 授课时间 第 十 周 课时累计 16 教 学 过 程 时间分配 教学步骤及教学内容 导入新课: 第一节 UI设计原则 1.简易性 界面的简洁 UI设计图片 是要让用户便于使用、便于了解、并能减少用户发生错误选择的可能性。 教学步骤及教学内容 时间分配 2.用户语言 界面中要使用能反应用户本身的语言，而不是游戏设计者的语言。 3.记忆负担最小化 人脑不是电脑，在设计界面时必须要考虑人类大脑处理信息的限度。人类的短期记忆极不稳定、有限，24小时内存在25%的遗忘率。所以对用户来说，浏览信息要比记忆更容易。 4.一致性 是每一个优秀界面都具备的特点。界面的结构必须清晰且一致，风格必须与游戏内容相一致。 5.清楚 在视觉效果上便于理解和使用。 6.用户的熟悉程度 用户可通过已掌握的知识来使用界面，但不应超出一般常识。 7.从用户的观点考虑 想用户所想，做用户所做。用户总是按照他们自己的方法理解和使用。 通过比较两个不同世界(真实与虚拟)的事物，完成更好的设计。如:书籍对比竹简。 8.排列 一个有序的界面能让用户轻松的使用。 9.安全性 用户能自由的作出选择，且所有选择都是可逆的。在用户作出危险的选择时有信息介入系统的提示。 10.灵活性 简单来说就是要让用户方便的使用，但不同于上述。即互动多重性，不局限于单一的工具(包括鼠标、键盘或手柄)。 11.人性化 高效率和用户满意度是人性化的体现。应具备专家级和初级玩家系统，即用户可依据自己的习惯定制界面，并 能保存设置。 第二节 UI设计的流程 确认目标用户 在洛可可的UI设计过程中，需求设计角色会确定软件的目标用户，获取最终用户和直接用户的需求。 用户交互要考虑到目标用户的不同引起的交互设计重点的不同。 例如:对于科学用户和对于电脑入门用户的设计重点就不同。 采集目标用户的习惯交互方式 不同类型的目标用户有不同的交互习惯。这种习惯的交互方式往往来源于其原有的针对现实的交互流程、已有软件工具的交互流程。 当然还要在此基础上通过调研分析找到用户希望达到的交互效果，并且以流程确认下来。 提示和引导用户 软件是用户的工具。因此应该由用户来操作和控制软件。软件响应用户的动作和设定的规则。 对于用户交互的结果和反馈，提示用户结果和反馈信息，引导用户进行用户需要的下一步操作。 一致性原则 设计目标一致 软件中往往存在多个组成部分(组件、元素)。不同组成部分之间的交互设计目标需要一致。 例如:如果以电脑操作初级用户作为目标用户，以简化界面逻辑为设计目标，那么该目标需要贯彻软件(软件包)整体，而不是局部。 元素外观一致 交互元素的外观往往影响用户的交互效果。同一个(类) 软件采用一致风格的外观，对于保持用户焦点，改进交互效果有很大帮助。遗憾的是如何确认元素外观一致没有特别统一的衡量方法。因此需要对目标用户进行调查取得反馈。 交互行为一致 在交互模型中，不同类型的元素用户触发其对应的行为事件后，其交互行为需要一致。 例如:所有需要用户确认操作的对话框都至少包含确认和放弃两个按钮。 对于交互行为一致性原则比较极端的理念是相同类型的交互元素所引起的行为事件相同。但是我们可以看到这个理念虽然在大部分情况下正确，但是的确有相反的例子证明不按照这个理念设计，会更加简化用户操作流程。 可用性原则 可理解 软件 要为用户使用，用户必须可以理解软件各元素对应的功能。 如果不能为用户理解，那么需要提供一种非破坏性的途径，使得用户可以通过对该元素的操作，理解其对应的功能。 例如:删除操作元素。用户可以点击删除操作按钮，提示用户如何删除操作或者是否确认删除操作，用户可以更加详细的理解该元素对应的功能，同时可以取消该操作。 可达到 用户是交互的中心，交互元素对应用户需要的功能。因此交互元素必须可以被用户控制。 用户可以用诸如键盘、鼠标之类的交互设备通过移动和触发已有的交互元素达到其它在此之前不可见或者不可交互的交互元素。 要注意的是交互的次数会影响可达到的效果。当一个功能被深深隐藏(一般来说超过4层)那么用户达到该元素的几率就大大降低了。 可达到的效果也同界面设计有关。过于复杂的界面会影响可达到的效果。(参考简单导向原则) 可控制 软件的交互流程，用户可以控制。 功能的执行流程，用户可以控制。 如果确实无法提供控制，则用能为目标用户理解的方式提示用户。 时间分配 教学步骤及教学内容 作业布置 课后反思 授课课题 界面的整体设计——导航栏和按钮的设计要点 教学 导航栏和按钮的设计 目标和要求 教学 重点:掌握导航栏和按钮的设计要点 重点和难点 难点:掌握导航栏和按钮的设计要点并应用 教学方法 案例教学 教学手段 多媒体 授课时间 第 十一 周 课时累计 18 教 学 过 程 教学步骤及教学内容 时间分配 导入:导航栏和按钮都是我们在网页设计中经常看到的～使 得我们的操作更加方便～接下来了解一下他们的设计要点 一导航栏 导航栏如果设计得恰到好处～会给网页增色很多。导航栏 的设计不能太花哨～因为导航栏书籍功能物件～喧宾夺主就不好 了。导航栏的设计主要有一下几个要点: , 在导航栏目不多的情况下～通常是一排～横竖都可以。 若栏目超过六个就可以考虑用两排。 时间分配 教学步骤及教学内容 , 造导航栏目很多的情况下～就可以多排～甚至不规 则的多排,一排个数不同或者长度不同,.商业设计 或者门户网站通常会有多个频道～在设计的时候需 要考虑横向双排～因为使用竖排会占用太多空间。 , 通常在内容不多的情况下～可能无所谓栏目～站点 就包括了导航的具体内容。 , 双排导航未必要挨在一起～可以发挥想象～自由排 列。 , 图片式导航比较美观～但占用的空间比较大。 , 目前网站中使用较多的栏目是用FLASH制作的网站 导航～其体积小～视觉效果强烈。 , 内容小丰富的站点～可以考虑快捷导航～即框架快 捷导航。因为不管你进入到哪个页面都可以快速跳 转到另外的栏目～更加方便自己的操作。 时间分配 教学步骤及教学内容 二 、按钮 如今按钮的设计要求 越来越高,网页中按钮的设计主要有以下几个要点: , 设计的按钮要与整体的风格相协调～不能太抢眼。 , 有些单调的页面～要靠花哨的按钮来点缀。 , 插图与字的搭配～要考虑字迹清楚～色彩简单～不能 超过4种。 , 很长的按钮可能是框架的分解～应该尽量纤细一些～ 否则页面会显得很臃肿。 作业布置 课后反思