《UI界面设计》教案.docx

UI界面设计教案课程名称UI界面设计 授课教师 制订时间 UI界面设计 第一章 UI综述 课 题UI综述 授课教师 教学目标通过本章学习使学生了解UI在中国的发展以及UI的是什么。 教学重点掌握UI在中国的发展以及UI是什么。 教学难点掌握UI是什么。 教学准备课本、参考图形 教学方法讲授、讨论、案例分析 教 材 教学时间8课时 教学内容UI在中国的发展以及UI是什么 UI即User Interface(用户界面)的简称。UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味还要让软件的操作变得舒适、简单、自由,充分体现软件的定位和特点。 第一节 UI是什么 软件设计可分为两个部分编码设计与UI设计。 编码设计大家都很熟悉但是 UI设计还是一个很陌生的词即使一些专门从事网站与多媒体设计的人也不完全理解UI的意思。UI的本意是用户界面是英文User和 interface的缩写。从字面上看是用户与界面2个组成部分但实际上还包括用户与界面之间的交互关系。 在飞速发展的电子产品中界面设计工作一点点的被重视起来。做界面设计的“美工”也随之被称之为“UI设计师”或“UI工程师”。其实软件界面设计就像工业产品中的工业造型设计一样是产品的重要卖点。一个电子产品拥有美观的界面会给人带来舒适的视觉享受拉近人与商品的距离为商家创造卖点。界面设计不是单纯的美术绘画他需要定位使用者、使用环境、使用方式并且为最终用户而设计是建立在科学性之上的艺术设计。检验一个界面的标准既不是某个项目开发组领导的意见也不是项目成员投票的结果而是终端用户的感受。所以界面设计要和用户研究紧密结合是一个不断为最终用户设计满意视觉效果的过程。 第二节 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设计流程 授课教师汪永吉 教学目标通过本章学习使学生了解UI设计原则、流程。 教学重点掌握UI设计原则、流程。 教学难点掌握UI设计流程。 教学准备课本、参考图形 教学方法讲授、讨论、案例分析 教 材 教学时间8课时 教学内容UI设计原则、流程第一节 UI设计原则 1.简易性 界面的简洁 UI设计图片 是要让用户便于使用、便于了解、并能减少用户发生错误选择的可能性。 2.用户语言 界面中要使用能反应用户本身的语言而不是游戏设计者的语言。 3.记忆负担最小化 人脑不是电脑在设计界面时必须要考虑人类大脑处理信息的限度。人类的短期记忆极不稳定、有限24小时内存在25%的遗忘率。所以对用户来说浏览信息要比记忆更容易。 4.一致性 是每一个优秀界面都具备的特点。界面的结构必须清晰且一致风格必须与游戏内容相一致。 5.清楚 在视觉效果上便于理解和使用。 6.用户的熟悉程度 用户可通过已掌握的知识来使用界面但不应超出一般常识。 7.从用户的观点考虑 想用户所想做用户所做。用户总是按照他们自己的方法理解和使用。 通过比较两个不同世界(真实与虚拟)的事物完成更好的设计。如书籍对比竹简。 8.排列 一个有序的界面能让用户轻松的使用。 9.安全性 用户能自由的作出选择且所有选择都是可逆的。在用户作出危险的选择时有信息介入系统的提示。 10.灵活性 简单来说就是要让用户方便的使用但不同于上述。即互动多重性不局限于单一的工具(包括鼠标、键盘或手柄)。 11.人性化 高效率和用户满意度是人性化的体现。应具备专家级和初级玩家系统即用户可依据自己的习惯定制界面并 能保存设置。 第二节 UI设计的流程 确认目标用户 在洛可可的UI设计过程中需求设计角色会确定软件的目标用户获取最终用户和直接用户的需求。 用户交互要考虑到目标用户的不同引起的交互设计重点的不同。 例如对于科学用户和对于电脑入门用户的设计重点就不同。 采集目标用户的习惯交互方式 不同类型的目标用户有不同的交互习惯。这种习惯的交互方式往往来源于其原有的针对现实的交互流程、已有软件工具的交互流程。 当然还要在此基础上通过调研分析找到用户希望达到的交互效果并且以流程确认下来。 提示和引导用户 软件是用户的工具。因此应该由用户来操作和控制软件。软件响应用户的动作和设定的规则。 对于用户交互的结果和反馈提示用户结果和反馈信息引导用户进行用户需要的下一步操作。 一致性原则 设计目标一致 软件中往往存在多个组成部分组件、元素。不同组成部分之间的交互设计目标需要一致。 例如如果以电脑操作初级用户作为目标用户以简化界面逻辑为设计目标那么该目标需要贯彻软件软件包整体而不是局部。 元素外观一致 交互元素的外观往往影响用户的交互效果。同一个类软件采用一致风格的外观对于保持用户焦点改进交互效果有很大帮助。遗憾的是如何确认元素外观一致没有特别统一的衡量方法。因此需要对目标用户进行调查取得反馈。 交互行为一致 在交互模型中不同类型的元素用户触发其对应的行为事件后其交互行为需要一致。 例如所有需要用户确认操作的对话框都至少包含确认和放弃两个按钮。 对于交互行为一致性原则比较极端的理念是相同类型的交互元素所引起的行为事件相同。但是我们可以看到这个理念虽然在大部分情况下正确但是的确有相反的例子证明不按照这个理念设计会更加简化用户操作流程。 可用性原则 可理解 软件 要为用户使用用户必须可以理解软件各元素对应的功能。 如果不能为用户理解那么需要提供一种非破坏性的途径使得用户可以通过对该元素的操作理解其对应的功能。 例如删除操作元素。用户可以点击删除操作按钮提示用户如何删除操作或者是否确认删除操作用户可以更加详细的理解该元素对应的功能同时可以取消该操作。 可达到 用户是交互的中心交互元素对应用户需要的功能。因此交互元素必须可以被用户控制。 用户可以用诸如键盘、鼠标之类的交互设备通过移动和触发已有的交互元素达到其它在此之前不可见或者不可交互的交互元素。 要注意的是交互的次数会影响可达到的效果。当一个功能被深深隐藏一般来说超过4层那么用户达到该元素的几率就大大降低了。 可达到的效果也同界面设计有关。过于复杂的界面会影响可达到的效果。参考简单导向原则 可控制 软件的交互流程用户可以控制。 功能的执行流程用户可以控制。 如果确实无法提供控制则用能为目标用户理解的方式提示用户。 第三章 案例展示欣赏与分析 课 题UI设计案例展示欣赏与分析 授课教师汪永吉 教学目标通过本章学习使学生了解UI设计案例展示欣赏与分析。 教学重点掌握UI设计案例展示欣赏与分析。 教学难点掌握UI设计案例展示欣赏与分析。 教学准备课本、参考图形 教学方法讲授、讨论、案例分析 教 材 教学时间8课时 教学内容UI设计图标、输入法、播放器、界面 第一节 图标 图标是具有明确指代含义的计算机图形。其中桌面图标是软件标识界面中的图标是功能标识。 图标分为广义和狭义两种 广义 具有指代意义的图形符号具有高度浓缩并快捷传达信息、便于记忆的特性。应用范围很广软硬件网页社交场所公共场合无所不在例如男女厕所标志和各种交通标志等。 狭义 应用于计算机软件方面包括程序标识、数据标识、命令选择、模式信号或切换开关、状态指示等。 一个图标是一个小的图片或对象代表一个文件程序网页或命令。图标有助于用户快速执行命令和打开程序文件。单击或双击图标以执行一个命令。图标也用于在浏览器中快速展现内容。所有使用相同扩展名的文件具有相同的图标。 图标有一套标准的大小和属性格式且通常是小尺寸的。每个图标都含有多张相同显示内容的图片每一张图片具有不同的尺寸和发色数。一个图标就是一套相似的图片每一张图片有不同的格式。从这一点上说图标是三维的。图标还有另一个特性它含有透明区域在透明区域内可以透出图标下的桌面背景。在结构上图标其实和麦当劳的巨无霸汉堡差不多。 一个图标实际上是多张不同格式的图片的集合体并且还包含了一定的透明区域。因为计算机操作系统和显示设备的多样性导致了图标的大小需要有多种格式。 象素分辨 操作系统在显示一个图标时会按照一定的标准选择图标中最适合当前显示环境和状态的图像。如果你用的是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 统一性 我收集了一些图标的文件我们接下来可以分享一下。 第二节 输入法设计 输入法是指为了将各种符号输入计算机或其他设备如手机而采用的编码方法。汉字输入的编码方法基本上都是采用将音、形、义与特定的键相联系再根据不同汉字进行组合来完成汉字的输入的。 中文热门输入法 搜狗拼音输入法 搜狗拼音输入法是XX年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 统一性 我收集了一些图标的文件我们接下来可以分享一下。 第四章 UI界面分析与设计 课 题UI界面设计分析 授课教师汪永吉 教学目标通过本章学习使学生了解UI界面设计分析。 教学重点掌握UI界面设计分析。 教学难点掌握UI界面设计分析。 教学准备课本、参考图形 教学方法讲授、讨论、案例分析 教 材 教学时间16课时 教学内容 第一节 主题 第二节 要素 第三节 分析 第四节 制作整合 第五节 成形 第六节 验证 第五章 创作 课 题UI界面设计创作 授课教师 教学目标通过本章学习使学生了解UI界面设计创作。 教学重点掌握UI界面设计创作。 教学难点掌握UI界面设计创作。 教学准备课本、参考图形 教学方法讲授、讨论、案例分析 教 材 教学时间24课时 教学内容 创作