产品界面设计

1、总学分总学分：2 总学时总学时：32课程教学目的及教学内容课程教学目的及教学内容教学目的教学目的：通过本课程的学习，使学生能够掌握界面设计的基本原理与方法教学内容教学内容：图形界面设计与交互概念设计 GUI视觉设计 项目实践重点难点重点难点：GUI视觉设计产品界面设计 参考书籍 周陟.UI进化论 移动设备人机交互界面设计.北京：清华大学出版社，2010 李世国.体验与挑战 产品交互设计.南京：江苏美术出版社，2008 (美)Alan Copper等.About Face 3.0交互设计精髓.刘松涛等译.北京：电子工业出版社，2008 李乐山.人机界面设计(实践篇).北京：科学出版社，2009

2、李四达.交互设计概论.北京：清华大学出版社，2009产品界面设计第一章 交互概念设计与图形界面设计1.1 交互概念设计它关注如何通过了解人们的潜在需求、行为和期望来提供设计的新方向（包括产品、服务、空间、媒体和基于软件的交互）1.1.1 交互设计概念 交互设计由IDEO的一位创始人比尔莫格里奇（Bill Moggridge）在1984年的一次设计会议上提出，他一开始给它命名为“软面（Soft Face）”，后来他把它更名为“Interaction Design”。 作为学科上的定义，交互设计（Interaction Design）是被这样解释的：“-人与设备、系统、网络等的直接和间接地通信过程

3、，设计用于支持人们日常工作、生活的交互式产品-”比尔莫格里奇艾伦库珀1.1.2 产品交互系统PACT-P 人（People） 人的行为（Activity） 产品使用时的场景（Context） 产品中融合的技术（Technology） 最终完成的产品（Product）交互化空间 视频EPK_Cheoptics360_XL.wmv交互设计的发展 命令语言用户界面 图形用户界面 直接操纵的用户界面 多媒体用户界面 多通道用户界面 虚拟现实技术marroAirtrav Nokia 888 OnyxYuno PC PS100 PhotoskinFrames1.2 图形界面设计图形用户界面或图形用户接口（

4、Graphical User Interface ,GUI）是指采用图形方式显示的计算机操作环境用户接口1.2.1 图形界面发展历程1973年4月，第一个可操作的Alto电脑在Xerox PARC完成。Alto是第一个把计算机所有元素结合到一起的图形界面操作系统。它使用3键鼠标、位运算显示器、图形窗口、以太网络连接1980年Three Rivers公司推出Perq图形工作站1981年7月，Xerox推出Star系统，它是Alto的商用版本。特点：双击图标技术、多窗口、对话框概念、1024*768的分辨率。1983年1月，Apple推出Lisa系统。特点：下拉菜单和菜单条技术1983年，Visi

5、推出Visi On，它是第一款为IBM PC设计的集成图形软件环境1983年，微软宣布它为IBM PC设计的Windows程序，不过这个系统到1985年才发布。特点：多窗口、可改变大小窗口。1984年苹果公司推出Macintosh1984年9月，Digital Research针对8086和DOS计算机推出GEM icon/desktop用户界面系统，这个系统稍后演变为AtariST。1984年7月，MIT推出“Window System X”。它16版本使用单色画，使用DEC VS100显示器。810版本开始使用彩色显示。VAXstation II/GPX.X10是第一个被广泛使用的版本。第

6、11个版本被设计成一个很高性能的系统，有很好的窗口管理风格，良好的图形表现和系统扩展能力。1985年，Geos发布Commodore 64，稍后又发布了Apple II。1985年7月，Commodore推出Amiga 100（Amiga Workbench Version 1.0）。1985年8月，微软最终发布第一个Windows版本。特点：窗口不可重叠，但可平铺；窗口不会覆盖屏幕下方的图标区域。1986年，Apple表示会控告Digital Research，因为其GEM桌面系统跟自己的Macintosh非常相像。Digital Reseach最终修改了自己的桌面系统。新的桌面系统现在只有

7、用两个无法移动、无法改变大小的窗口来浏览文件。1987年，Apple推出Macintosh II，它是第一款彩色Mac系统。特点：640*480，56色，24位显卡。1987年，微软发布第二个Windows版本，V2.03。特点：可改变大小/可重叠的窗口、加进了其他窗口控制功能。1987年，Acorn发布应用于Acorn电脑的Arthur系统，它是RISC系统的基础，RISC OS 2和3和它有类似的外观，但有很大的改善。1988年9月，Apple发布GS/OS，是为Apple IIGS设计的16位操作系统，这个系统跟Macintosh的外观很相像。1988年10月，IBM发布OS/2 1.1

8、0 Standard Edition。OS2增加了叫做“Presentation Manager”的图形用户界面。1.10 GUI是由微软开发的，看上去有点像Windows 2。1988年10月，NeXT Computer发布了，价格为6500美元。它使用25MHz30 processor/8MB RAM/250MB optical disk drive，数字处理器，声卡、fax modem、17寸显示器。1990年，Commodore发布Amiga Workbench 2 for A3000。特点：新3D效果，可定制菜单。1990年5月，微软发布Windows 3.0。特点：程序管理SHEL

9、L。1990年11月，GeoWorks发布PG-GEOS。1992年春，IBM发布OS/2 version2.0，真正的32为操作系统。特点：Workplace SHELL、面向对象的用户界面。1992年3月，微软推出Windows 3.1，界面跟3.0差不多，但这个版本包含了多媒体支持。1992年5月，Amiga Workbench 3发布。特点：使用图片做背景、色彩调节。1993年5月，微软发布Windows NT的第一个版本，是32位操作系统。同样使用3.1的版本号，它为Intel，Power PC，Alpha和MIPS系统设计。1994年QNX Software Systems发布他们

10、第一个微核心窗口操作系统：Photon microGUI 。1995年8月24日，微软发布Windows 95。1995年，BeOS发布，这是第一个为定制的多处理器系统（BeBox）开发的1996年，New Deal发布New Deal Office 2.5，它的前身是PC-GEOS。1996年，IBM发布OS/2 Warp 4，这个系统上Workplace Shell技术有重大应用。1996年，微软发布Windows NT 4.0，它使用和Windows 95相同的用户界面1997年6月，Mac OS 8发布。在两周内销售125万套，是那个时期销售最好的操作系统。1998年7月25日，微软发

11、布Windows 98。特点：IE，浏览器取代了Windows shell和帮助系统。1998年11月22日，Shane Brooks发布98 Lite，这个版本移去了IE。特点：没有IE，与win98相同的硬件支持，快速启动。1999年，Apple发布Mac OS X Server，是基于UNIX的操作系统，使用Macintosh GUI。1999年7月，RISC OS Ltd发布RISC OS 4，使用于RiscPC A7000 或 A7000+。2000年1月5日，Apple发布Aqua，界面风格有很大改善。2000年2月17日，微软发布Windows 2000（Windows NT 5

12、）。2001年10月25日，微软发布Windows XP（Windows NT 5.1）。特点：激活技术 2003年4月24日，微软发布Windows Server 2003（Windows NT 5.2，也叫Windows.NET SERVER）。特点：只发布服务器版本。2006年微软发布Windows Vista2009年微软发布windows 7操作系统。1.2.2 用户使用系统就是使用界面 用户并不关心你使用了什么技术，而是关心这个技术带来的结果 不要用技术作为你的产品卖点 用户只使用产品帮助自己生活，不会把产品当成生活 对于用户来说，产品的外观和交互界面等于产品的所有 比起图标的大小

13、和颜色，用户更关心界面切换的速度1.2.3 用户界面不是绘画绣花 用户的界面设计是有一定限制的，这种限制来源于不同用户对于所使用的产品的理解和期望 用户界面设计不是艺术创作，但其中需要艺术性的视角和技能，来表现出更丰富的细节与视觉性指引 用户界面的设计会采用多种多样的方式，但最终的设计输出必须适合可用性的原则1.2.4 UCD的设计思想 UCD (User-Centered Design)，即以用户为中心的设计 在进行产品设计时从用户的需求和用户的感受出发，围绕用户为中心设计产品，而不是让用户去适应产品。无论产品的使用流程、产品的信息架构、人机交互方式等，都需要考虑用户的使用习惯、预期的交互方

14、式、视觉感受等方面UCD的维度 产品在特定使用环境下为特定用户用于特定用途时所具有的有效性（effectiveness） 效率（efficiency）和主观满意度（satisfaction） 延伸开来还包括产品的易学程度、对用户的吸引程度、用户在体验产品前后时的整体心理感受等1.2.5 必备的软件分析 Adobe Photoshop Adobe Illustrator CS4 Adobe Flash CS4 Maxon Cinema 4D R11 IconCool Studio v2.8 JPEG Optimizer1.3 交互概念设计与图形界面设计的关系用户需求分析确定产品设计概念候选方案设

15、计原型设计用户测试和评估1.3.1 理解用户的需求和分析需求 用户需求分析的根本目的是了解用户的行为，并获得市场分析数据，用于指导这个产品的需要与价值。研究用户的行为可从四个方向出发： 它是什么产品 看上去如何 解决什么问题 其他心理要求1.3.2 设计一些候选方案和概念 视频Helio Ocean-Creation.flv 视频Helio Ocean-Messaging.flv 视频Helio Ocean-Music.flv1.3.3 进行原型设计 原型表达方式 白纸、铅笔、橡皮 Word PPT Flash HTML1.3.2 用户测试与评估 确认交互概念和界面设计模型是否准确 确认设计的

16、原型是否能有效地完成功能 评估设计的原型在技术层面和市场商业模式上的可行性（重点是概念的创意和差异化） 视频surface界面操作示意1.flv 视频surface界面操作示意2.flv1.3.3 两者的关系和应用 交互设计和图形界面设计是一个完整的设计流程中不可分割的两个部分，虽然在工作细分中有流程前后差别，但是设计思想和设计目的是一致的 交互和界面的综合演示 视频BumpTop交互演示.flv（在桌面上实现了排序、翻转、惯性特征等物理反馈）1.4 交互概念与图形界面设计新趋势1.4.1 不同的感知和感觉 视觉：可见性、可识别性、美观、提示 听觉：音乐、提示音、声音长短、符合人耳特性、噪音

17、肤觉：触感、防滑、防尘、无伤害、大小适中 嗅觉与味觉：范围、保留时间、变异性、健康影响、真实性1.4.2 不同使用环境 公司 快捷设置“会议模式”环境 优雅成熟的外观 商务性和职业性特征明显 日程表、备忘录、世界时间、事件功能提醒 学校 外观新颖、漂亮，能够吸引异性的注意 有趣的图片、音乐、视频、游戏，蓝牙共享 短消息的快速和多字符处理 视频法国鳄鱼牌2083年概念网球服.flv 家庭 家庭 亲友分组和详细信息记录 对重要亲友的快速拨号，收发信息等快捷设置 家务时间提醒 共同娱乐时拒绝打扰设置 个性化闹钟功能 公共场所 声音比较突出的音乐提示功能 通话质量的保证 参与性突出 网络功能的提供 共

18、同活动 半公共场所 不同情境模式的快速切换 快速接听和取消模式设置 随时记录工具，便签功能 日期和时间的查看提醒 提供持续照明模式1.4.3 移动设备概念设计要素 外观 材料 技术 环保 减量 再使用 回收再利用 人文 品牌 产品或服务的形象 话题1.4.4 界面设计风格 Ryan Han设计的Bello Concept PMP播放器（多点触摸技术）【提示】 首先确定自己的风格是什么 评估这个风格是已经在使用的，还是自己独特的 界面设计要以用户需求为前提 风格不是万能的，只有易用性最重要 界面、图标要服务于设计风格样式 风格需要大量的技术支持，先确定可行性 如果用户接受，坚持自己的风格，不要随

19、意变化 风格是一种流行趋势，一个流行的风格也是快要过时的风格1.5 设计的产品化视频手机进化史.flv1.5.1 产品设计的目的是为使用产品的用户 用户数量产生市场需求 用户喜好直接影响产品的生命周期 大部分用户有挑选不同产品的能力 现实用户将会影响潜在的用户1.5.2 设计是如何产品化的 市场研究 明确市场研究的目的以及对最终结果的假设 获取对用户（消费者）的需求购买决策驱动因素的深刻认识 定义目标市场及规划策略 市场类型细分 地理位置 人口特征 使用行为 利润潜力 价值观/生活方式 需求/动机/购买因素 态度 产品/服务的使用场合 用户研究 身份 场合 感觉 情感 目的 视频cellula

20、rsouth.flvBasil Tsedik的作品 文化内涵研究通用设计的七大原则公平的使用灵活使用简单而直观能感觉到的信息容错能力减少体力付出提供足够的空间和尺寸 项目确定 风险评估 关键点路径交互概念设计低保真设计低保真评估高保真设计高保真评估与审核高保真修改设计整体评估第二章 图形用户界面设计2.1 图标设计2.1.1 图标设计的意义 概念 图标的广义概念可以说是研究人类如何使用符号来传达意义的，包括文字、讯号、密码、文明符号、图腾、手语等，称为“符号”（symbol） 狭义的图标概念指计算机屏幕上表示的命令、程序的符号、图像，称为“图标”（icon）视觉设计的重要组成部分，用于提示与强

21、调使产品功能具象化，更容易理解使产品的人机界面更有吸引力，富含娱乐性 Indestudio工作室图标作品形成产品的统一特征，给用户以信赖感，便于功能记忆创造差异化、个性化的美，强化装饰性图标设计是一种艺术创作，能提高产品的品味图标设计的表现方式灵活，可以传达不同的产品理念图标设计也可以展现产品2.1.2 好的图标设计有什么特点 视觉感受精美、细腻、结构合理兼容各种应用尺寸，主体与细节对比合适风格统一、整体性强传达含义清晰、准确、 容易记忆有一定的主题文化蕴含其中不同的文化背景和社会背景的用户均可理解2.1.3 手持设备的图标设计 认识到不同图标显示方式的区别：lcd分辨率 矢量作图 显示载体瓶

22、颈：色彩选择安全色域 可以使用标准色标中的颜色2.2 图形界面设计理解不同地域、文化背景、社会环境中的界面风格 欧洲手机：界面设计的延续性很强，变化比较少，以诺基亚等品牌为代表 韩国手机：界面设计风格大胆，对图标和图形的表现使用多种手法 日本手机：在外观、图形、技术、交互方式上较有新意，界面设计清新、简洁界面设计应清晰、简明的解释功能界面尺寸趋势 2009年来说，LCD分辨率显示向240px320px大小或更高的数值发展 16：9的比例模式是目前流行的趋势风格一致性是成功的关键注意与ID设计的匹配 产品按键的字体应与界面内出现的字体一致 产品的质感应延伸到界面的质感中 产品的颜色和界面的颜色需

23、有一定的联系让界面设计更易懂、易用界面具有吸引力，愉悦身心 视频istation T7.flv案例 手机MP3播放器的界面设计产品定义 定义：一款可以下载、自定义并兼容互动功能的音乐播放器 产品关键词：音乐、播放器、下载功能、歌词显示、音乐搜索、歌曲识别、讨论社区入口交互流程设计界面原型搜索歌词进度条歌曲列表控制面板色彩设定绘制界面细节 界面细节的绘制体现整体质感和界面最后的视觉品质，建议界面的质感尽量简单而突出2.3 图形界面的创意升级图形界面不只是画图 让设备变得人性化 视频nokia charging.flv 情感化因素不可忽视 视频牛人短片：我的手机是变形金刚.flv 视频tronic

24、_axa-evolution.flv 视频syndrome_boost.flv 视频se z610.flv 视频htc-free your fingers.flv 交互特效的引入 视频perceptive pixel.flv 视频Optimus.flv 产品=体验=品牌 视频Samsung_HandsBrand.flv 视频IQ500.flv 视频IQ500-art.flv 临场的体验决定购买意愿 视频universaleverything.flv 用户体验视觉设计的原则 界面清晰明了，允许用户定制界面 减少短期记忆负担 依赖认知而非记忆 提供视觉线索 提供默认（default）、撤销（und

25、o）和恢复（redo）的功能 提供界面的快捷方式 尽量使用真实世界的比喻 完善视觉的清晰度 界面的协调一致 同样功能用同种图形 色彩与内容。整体设计不超过5个色系，近似的颜色表示近似含义 生活中的情景模拟 视频SE x1-female.flv 视频SE x1-female(1).flv 视频SE x1-female(2).flv 视频SE x1-female(3).flv 视频SE x1-female(4).flv 视频SE x1-female(5).flv 视频SE x1-female(6).flv 视频SE x1-female(7).flv 视频SE x1-female(8).flv 视频

26、Global CF_30s.flv 让用户再方便一点 视频iEye.flv 突出产品的少量特点形成强烈印象 视频Yepp p2.flv 视频Yepp p2(1).flv 视频Yepp p2(2).flv 视频Yepp p2(3).flv 视频Yepp p2(4).flv 视频Yepp p2(5).flv 视频Yepp p2(6).flv 视频Yepp p2(7).flv第三章 项目实践3.1 制定设计流程制定设计流程会议纪要 产品原则 设计原则 项目时间 弹性情况处理面向整个产品过程的设计流程3.2 第一次项目会议 会议目的 会议人员与职责 会议前期准备 会议内容3.3 图标设计 图标设计背景 进行手绘草稿的创作： 明确图标的结构和含义 确定图标的立体外形 区分明暗区域 形成统一的风格样式，以指导后续设计 考虑图标可能