界面交互设计.ppt

界面交互设计 现代数字媒体 杨毅 设计学院 学时安排 讲授 实验 界面交互设计 交互界面设计基本定义 交互设计 又称互动设计 英文InteractionDesign 缩写IxD或者IaD 是定义 设计人造系统的行为的设计领域 人造物 即人工制成物品 例如 软件 移动设备 人造环境 服务 可佩带装置以及系统的组织结构 交互设计在于定义人造物的行为方式 the interaction 即人工制品在特定场景下的反应方式 相关的界面 Wikipedia org 启发式交互 让创新的界面具有教学功能 什么是交互设计 什么样的人更适合做交互设计师 交互设计师需要具备凭空想象复杂行为的能力 交互设计应当在任何代码编写之前做 交互设计师必须能够在代码被写出来之前 想象它是做什么的 AlanCooper 交互界面设计基本定义 如果说设计 解决问题的话 那么界面视觉设计 就是用视觉语言去解决逻辑问题 色彩选择 决定了人们在第一眼看到网站时的感觉 因此 色彩是Web设计者手中最普遍 也是最强大的工具 让色彩更具有可读性 用最少的颜色表达最准确的内容 什么是界面视觉设计 为什么当人们开始喜欢某些界面的时候 它们事实上会变得更可用 积极的情感增强了创造性和广度优先的思考 而负面的情感集中在认知上 增强深度优先处理并把干扰降到最少 积极的情感让人们更能容忍一些困难 在寻找解决方案的时候变得更灵活而有创造性 DonaldNorman UI设计 UI设计 UI如何设计 UI设计 UI的应用范围 电脑的软件界面 比如操作系统 软件界面 网页 多媒体光盘 手机的界面 数字电视的界面 空调等家电摇控器上的界面 银行 移动等柜员机上的界面 UI设计 UI设计在中国的现状 目前在国内UI还是一个相对陌生的词 即便是一些设计人员也对这个词不太了解 我们经常看到一些招聘广告写着 招聘界面美工 界面美术设计师等等 这表明在国内对UI的理解还停留在美术设计方面 认为UI的工作只是描边画线 只是做一些图标 配下颜色等工作 缺乏对用户交互的重要性的理解 事实上UI设计的工作包括更广泛的内容 另一方面在软件开发过程中还存在重技术而不重应用的现象 许多商家认为软件产品的核心是技术 而UI仅仅是次要的辅助 忽视了良好的UI设计是提升用户体验的主要途径 是提升产品竞争力的重要法宝 UI的范畴 工作内容 研究用户 我们所开发的软件等产品 最终都是为人而做的 所谓以人为本 这不能是句空话 所以我们UI设计 必须研究人 研究我们的用户 要了解我们的用户想要什么 要利用我们的产品解决什么问题 喜欢什么 不喜欢什么等等 研究用户与界面的关系 即人机交互 研究如何让用户更好的更方便的使用软件 则是我们常说的 易用性 从事该行业的人 我们称之为 交互设计师 主要做的工作内容就是设计软件的操作流程 树状结构 软件的结构与操作规范等 一个软件产品在编码之前需要作的就是交互设计 并确立交互模型 交互规范 研究界面的视觉效果 国内目前大部分UI工作者都是从事这个行业 也有人称之为 美工 但实际上不是单纯意义上的美术工人 而是软件产品的产品外形设计师 从事该行业的人 我们可以称之为 软件图形设计师 UI设计 本章节主要学哪些 UI设计的基本原则与禁忌 UI的视觉效果设计 手机图标设计练习手机完整界面制作练习交互设计的基本原则与禁忌 使用FLASH或AXURE完成整个手机操作系统UI设计团队管理原则与禁忌 根据进度 如果还有时间 我们再继续讲网站设计 UI设计 UI设计的基本原则 可以说 UI设计的所有基本原则 都是建立在 易用性 的基础上 那什么是 易用性 包括三个方面 按重要程度排列如下 1 产品执行用户所需的功能 快速使用 2 快速安全地执行这些功能 相对无错 3 容易掌握使用这些功能 易于学习 UI设计 易用性不佳的例子 UI设计 易用性不佳的例子 UI设计 UI设计 用户身边充斥着专业术语 UI设计 万能软件 UI设计 不良的交互实例 取款机上查询工资余额 但是排队的人太多了 不过还有电话银行嘛 一边拿出手机 拨通了电话银行的号码 UI设计 一个温柔礼貌的语音提示 您好 欢迎使用建设银行电话银行系统 1 自动语音服务 2人工服务 vivi把手机从耳边拿下来 找到1号键 按了一下 1个人银行服务 2公司银行服务 3银证通功能 4个人外汇买卖服务 5基金服务 0退出 UI设计 一个温柔礼貌的语音提示 您好 欢迎使用招商银行电话银行系统 1 自动语音服务 2人工服务 vivi把手机从耳边拿下来 找到1号键 按了一下 1个人银行服务 2公司银行服务 3银证通功能 4个人外汇买卖服务 5基金服务 0退出 UI设计 又按了1 1存折户 2一卡通户 3个人信用卡户 4新旧卡号查询0退出 vivi按下了1旁边的2号键 请输入一卡通卡号 以 号结束 108080699 vivi连忙输入了卡号 按 号键 请输入查询密码 以 号结束 UI设计 1帐务查询 2转账 3修改密码 4电话挂失 5通讯业务 6自助贷款 7自助缴费及一卡通上网 8神州行充值服务 9凭证式国债 0退出 汗 这都是些什么呀 UI设计 好的交互实例 名片上印相片招商银行电话语音多功能汽车方向盘 UI设计 UI从构思到修正的例子 修改前 UI设计 修改后 UI设计 修改后 UI设计 课堂小练习 1 拿出自己的手机 分析下自己手机上的UI 列出好的地方与不好的地方 越多越好 越全面越好 2 与同学交换手机 按同样的方法分析 我们可以考虑的方面 仅供参考 欠缺的功能经常出错或不好用的功能不方便的操作图标或界面问题除了打电话和发短信外 最常用的功能最想要的功能 理想的操作方式等等 UI的分类 UI的分类 传统界面介绍传统界面是指可视化的实物界面 比如电视机的按钮 电源排插的插孔 键盘 汽车飞机的操控台 食堂的打卡机刷卡界面 相机的按钮界面 门上的把手界面 仪器的拆装提醒界面 交通指示牌 手机键盘界面等 诸如此类的 硬件 界面就是我们所熟知的传统界面 他们的共同特点是看得见摸得着 不同的是有些界面你可以直接对它进行操作 通过正确的程序或者指令去完成操作过程 实现目的 比如插上插排就可以通电 打开电视机就可以看电视 有些界面则不行 例如拆装提醒界面 交通指示牌 这些是不能对它们进行直接操作的界面 它们的主要功能是提醒使用者去执行某件事情 它是不具有可操作性 UI的分类 图形用户界面图形用户界面 GUI GraphicsUserInterface 是当前用户界面的主流 广泛应用于各档台式微机和图形工作站 比较成熟的商品化系统有Apple的Macintosh IOSIBM的PM PresentationManager Microsoft的Windows当前各类图形用户界面的共同特点是以窗口管理系统为核心 使用键盘和鼠标器作为输入设备 图形用户界面和人机交互过程极大地依赖视觉和手动控制的参与 因此具有强烈的直接操作特点 UI的分类 图形用户界面图形用户界面当前最流行的为触屏系统APPLE的IOS系统谷歌的ANDROID系统微软的win8系统摆脱传统的键盘以及鼠标 从而执行更精简的操作 直观的交互 UI的分类 UI设计决定了交互的方式 界面交互UI用户体验UE 用户体验UE设计 UE体验设计基本概念 用户体验是一个测试产品满意度与使用度的词语 在大多数情况下 产品软体测试或是商业行销测试时 会用到用户体验这个词 有时在探讨设计价值时 也会用到此新设计是否导出更差的用户体验 来评估其好坏 除了用户能完成必须的任务之外 应该还提供积极的体验 而应用设计和交互流程也应令用户感到愉悦 以用户为中心设计 设计必须是满足用户需求的 可行的 其次才是可产生商业价值的 什么是用户体验 为什么电子商务网站用户体验设计师有时也把用户体验称作顾客体验 这里特指用户访问一个网站或者使用一个产品时的全部体验 他们的印象和感觉 是否成功 是否享受 是否还想再来 使用 他们能够忍受的问题 疑惑和BUG的程度 U 用户体验在交互设计中的重要性 从一个倒霉的一天开始 当你醒来时阳光已经照进你的窗户 而你的闹钟并没有响 匆忙起床后打开咖啡机 却发现壶里没有咖啡 出门开车发现车没有了 匆忙加油却发现油卡没用 去排队付现满满都是人 加油后又因为路上一起事故而堵车了 千辛万苦到单位后发现最终还是迟到 当产品满足人们的需要时 产品才是真正的称之为产品 什么是用户体验 用户体验在交互设计中的重要性 交通事故 事故是一个司机为了调收音机音量而视线离开了前方 收银机 收银排队是因为收银系统过于复杂加油机 插卡插反了 加油机没有提示咖啡机 匆忙中没有把开关按到底 自动开启功能始终没学会 闹钟 因为你的猫半夜踩了闹钟一脚 当产品满足人们的需要时 产品才是真正的称之为产品 什么是用户体验 分析是不是可以避免这些 UE体验设计基本流程 腾讯ISD组织架构 UE体验设计基本流程 腾讯ISD网站组 网站设计流程 UE体验设计基本流程 阿里巴巴用户体验部项目流程 UE体验设计基本流程 阿里巴巴用户体验部项目流程 UE体验设计交付物标准与原则 为什么要对各阶段输出物的名称进行修正 更加形象化的表达 体现专业性 减少歧义 prototype mockup demo 交互原型 视觉稿 前端demo UE体验设计交付物标准与原则 分析用户类型和用户目标以及我们能提供的功能 为各类型用户目标设计完整的宏观通路 分别详细进行每种用户的各个目标的流程 交互设计师 决策人员 商业价值提议 策划 功能性提议 交互设计师 流程图 说明文档 交互设计师 决策人员 商业价值提议 策划 功能性提议 技术 是否能实现判断 UE体验设计交付物标准与原则 设计每个流程中的细节流程 进行视觉UI设计 页面排版 设计部分结束 交互设计师 决策人员 商业价值提议 策划 功能性提议 技术 是否能实现判断 美术设计师 图标设计 排版 配色 说明设计及思路 交互设计师 是否符合用户习惯提议 不参与美观讨论 美术设计师 交互设计师 决策 策划 UE体验设计交付物标准与原则 进行技术实现 产品完成上线检测 技术支持 开发 交互设计师 技术与设计有冲突的地方随时讨论 交互设计师 技术人员 调整修改 其余人员 用户 参与测试 UE体验设计交付物标准与原则 用以表达交互设计内容是产品原型设计过程中的阶段性成果 过渡型交付通过可视化产出使各方对设计范围和内容有形象化的 统一的认知 输出物是用以表述观点和描述设计方案 本身不是设计的目的 交互输出物 Prototype 什么时候提交输出物 在向视觉设计或前端开发提交需求时 应附带上传完整的输出物文档 并在变更时保持附件更新 UE体验设计交付物标准与原则 帮助交互设计师明确方案需要提供的内容及范围 减少遗漏减少沟通和衔接成本 提高工作效率 标准化是为了 怎样做好体验设计UE 同理心 目标明确 高效 优雅 同理心 从合乎常理的角度观察问题 目标明确 带着明确的设计目的 高效 主导注重实效的项目设计讨论 优雅 设计出优雅统一的用户界面交互 用户体验在交互设计中的重要性 设计者UI用户UE 关注体验 注重细节 界面交互设计与实例 界面交互设计与实例 界面交互设计与实例 按照软件运行的方式 软件可以分为两种类型 桌面软件和网页软件 本次课程主要以网页软件为研究的对象 界面交互设计与实例 http www toyota 界面交互设计与实例 福特MyfordTouch车内控制系统 界面交互设计与实例 界面交互设计与实例 界面交互设计与实例 图形用户界面GUI 1983年 苹果推出的Macintosh 128K 型电脑获得成功 很大程度上归功于其配备了GUI操作系统 System1 0 界面交互设计与实例 界面交互设计与实例 界面交互设计与实例 界面设计的重要性 界面设计的重要性 创造一个友好 易用的使用环境 界面设计的重要性 创造一个友好 易用的使用环境 界面设计的重要性 应对激烈的竞争 界面设计的重要性 应对信息结构的日益复杂 界面设计的重要性 课堂练习对搜狐每户网站进行简化 但不减少信息类别 界面设计的重要性 传递正确的信息 以网站为例 企业建立一个网站 是要传递信息 企业不同 信息也不同 信息不同 网站的界面设计亦会不同 界面设计的重要性 劳力士手表的网站 界面设计的重要性 可口可乐的网站 界面设计的重要性 传递正确的信息 让我们再来看看Nike和Adidas这两个知名的国际运动品牌的官方网站 界面设计的重要性 界面设计的重要性 界面设计的重要性 你会发现即使他们都是运动时尚的典范 其网站却传递出彼此不同的文化内涵 传递正确的信息 这也证明设计师已经成功的把企业文化 产品文化通过界面传递给了终端客户 界面设计的三要素 界面设计的三要素 界面设计的三要素 我们要设计怎样的界面 并以何种形式完成它 要回答好这一问题 我们就必须明确 网站建设的目的 网站信息的内容 我们还是以网站为例 网站设计形式 界面设计 创意 目的策划 信息文化 设计形式 体现 服务 确定 决定 美化 服务 确定 择优 确定 决定 服务 实现 信息文化 信息 没有信息就没有网站 信息的形式不只是文字和图片 网站的视觉设计也是信息内容的一部分 信息文化 当我们确立了网站建设的目的之后 就要围绕这个目的对信息进行筛选与编整 并按照重要程度有秩序地排放在页面上 浏览者可以通过信息的编排 辨析内容的重要程度 接收到来自界面传达的视觉信息 这样 建设方的目的就达到了 信息文化 信息文化 http www moma org exhibitions 2004 tallbuildings index f html 信息与信息空间 信息与信息空间 网站即是信息的容器 也是信息的载体 它就像一个放置信息的立体空间 有着很多的单元格 将信息分门别类的放置其中 从信息的分类 分层 列表 更新可以衍生出网站的栏目 子栏目 文章列表及其它信息功能类别等多种信息属性 做为信息的载体 网站的立意 设计 宣传 发展都和信息内容息息相关 信息与信息空间 信息与信息空间 信息量少 网站就简单 但是设计师可以运用图形 文字 多媒体 版式等手段 巧妙地缓解信息过少给浏览者带来的不信任 不确定感 网站的大小体现出信息量的多少 信息内容也是建立网站的参考 信息与信息空间 信息与信息空间 信息量多 网站就丰富 但是其信息结构就越复杂 建设工程就越浩大 也许会因为信息量过于庞大 而无法把几个门类的信息放在同一个网站中 于是 韩国率先推出了以多个垂直门户并列 形成的家族系列 将多个网站通过同一个品牌形象进行门户墙似的商业推广方案 信息与信息空间 信息与信息空间 信息的形式 信息的形式 常见的信息形式主要有 文字 图形图像 动画 音乐等 作为传播信息的载体 文字和图像承载了90 以上的信息内容 在网站界面上 处理信息形式之间的协调性和空间感 使它们呈现出一种可读性高 易被浏览者接受的状态 是设计师最主要的工作 信息之文字 信息之文字 网站的绝大部分信息是使用文字形式进行传达的 对于信息量较小的网站 页面格局创意和文字段落排版设计可以使界面突破平庸 把文字设计与FLASH动画结合起来 使文字作为视觉元素活用在创意设计中 很多精彩的网站就这样诞生了 除了正文 网站的导航 标题等重要元素 主要是由文字组成的 http www gardens 信息之文字 信息之文字 文字设计的补充 字体设计在商业美术设计领域 属于较难的课题 它是图形设计的一支 在界面设计中 不需要设计者擅长字体设计 但是其应该掌握字体的使用原则 信息之文字 标志及口号性标语 信息之文字 文字设计的补充 如 以方正字体为例 栏目标题是大黑体 文章标题是超粗黑体 正文是平黑体 一般情况下 页面中的字体不要超过三种 如果希望有更多变化 应尽量采用字体相同的字族 信息之文字 文字设计的补充 除此以外 还可以通过色彩对比 大小对比 疏密对比等方法 加强文字排版的审美效果 单一页面上的文字要相互协调 强弱有致 使其产生和谐的美感 信息之文字 信息文化 信息文化 信息之图片 图片是比文字更为直观的信息类型 也是界面设计核心要素 多数视觉作品多是通过优秀的图形设计和图片取得成功的 信息之图片 通过运用好的图形或图片 可以在第一时间抓住浏览者的眼球 信息之图片 信息文化 信息文化 信息文化 信息文化 信息文化 信息文化 信息文化 信息文化 但是如果只有重视视觉美感 只有精美的图形或图片 而忽略了我们建设网站的核心目标 高效准确地传递信息 客户也是很难认可的 信息之图片 信息之图片 初稿方案 信息之图片 信息之图片 定稿方案 信息之图片 信息之图片 信息之图片 信息之动画 从网站建设的角度讲 动画就是要在有限的空间中 把运动的文字信息和图片按一定的逻辑方式组合起来传达给浏览者 信息之动画 它的作用主要有 吸引眼球 如广告条 模拟真实 如产品的360度展示 丰富的视觉形式 如FLASH宣传首页 视频说明书 信息之动画 信息之动画 信息之动画 信息之音乐 信息之音乐 有了动画 自然离不开音乐 信息之音乐 信息之音乐 音乐的魅力在于铺开了想像的空间 相同的画面 配合不同的音乐 可以产生不同的解读 如 红色的画面 配合阴森的曲子 自然会与恐怖的事情联系起来 同样还是红色画面 音乐换成敲锣打鼓的欢快节奏 谁都会知道是喜庆的含义 信息之音乐 信息之音乐 马自达8 信息之音乐 信息之音乐 但是所有的网站都适合放上音乐吗 这需要具体情况具体分析 如 一个生产乐器的企业网站 其目标是推广企业 展示产品 产品不多 以电BASS 电吉他等快节奏的乐器为主 要不要在网站上放一段电吉他的音乐呢 信息之音乐 信息之音乐 设计师问了客户三个问题 乐器是什么年龄层的消费者使用 网站给谁看 网站的目标用户和产品最终消费者一致 音乐是必须放的 还是可放可不放 信息之音乐 信息之音乐 客户是这样回答的 乐器是给一二十岁的年轻人玩的 网站是给国外的经销商看的 音乐虽然重要 但不是必须放出来 信息之音乐 信息之音乐 于是设计师建议不要在网站上放置背景音乐 尤其是快节奏 嘈杂的音乐 这可能会影响目标用户的浏览 对树立品牌形象产生消极作用 信息的创建与管理 信息的创建与管理 首先必须明确 网站并非是依靠信息量巨大而取胜 而是需要信息与目的达成一致才能使网站成功 信息内容的创建与管理必须围绕目的展开工作 信息的创建与管理 信息的排序 信息的排序主要是针对目的而言的 信息的排序表现出了不同信息的重要程度 也就决定了页面信息的分布位置 强调方式的不同 为达到建站目的 哪些信息是必须有的 哪些是希望有的 哪些是可以没有的 信息的创建与管理 信息空间的结构 信息空间可分为序列模式和树型模型 信息的创建与管理 序列模式 序列模式通常针对的是文章列表或项目展示 文章与文章 项目与项目间是平等的 信息内容的模式比较相似 页面设计的版式也比较接近 设计师只需要考虑如何安排它们的布局 整理出相同的模板即可 这种模式常见于信息量非常少的网站 信息的创建与管理 http www madebyjarno nl 信息的创建与管理 信息的创建与管理 树型模式 树型模式是针对信息结构的分类分层来说的 它体现除了信息间的逻辑关系 树型模型首先分出频道 频道内再划分信息块 信息块还能进一步划分 依此类推 就形成了树型的模式 对几乎所有的网站来说 信息内容之间都存在树型关系 信息的创建与管理 树型模式 信息的创建与管理 树型模式 信息的创建与管理 树型模式 信息的创建与管理 树型模式 信息的创建与管理 信息的编辑 营销领域有一句话 不是说什么 而是怎么说 怎样让自己网站的信息从网络中脱颖而出 信息标题和摘要就成为最重要的一环 相同的信息 怎样才能让浏览者更好理解和接受呢 信息的创建与管理 信息的编辑 A减价50 下面的三条广告语说得是同一个促销行为 你认为客户会欣然接受哪一种呢 答案是B B买一送一 C打对折 调查显示 这条广告语的销售额胜过另两条40 信息的创建与管理 课堂练习 为江汉大学设计学院手绘一套网站模型设计 目的与策划 目的与策划 目的与策划 目的与策划 目的是我们做事情的源头和动力 目的与策划 明确目标 如果我们要对网站进行界面设计 就必须先明确建设网站的原因 如 建立网站是为了销售产品 还是进行商业服务 你的目标用户是谁 他们能从你的网站上得到什么 你想从网站中获得怎样的回报 即使目标相似 具体的设计方案也会根据客户的不同情况而有所差别 这些差别反映出网站的特殊性 目的与策划 WICKEDSUNGLASSES 是一家专卖眼镜的商务网站 经营多个品牌的产品 目的与策划 同样是眼镜专卖的网站 BLINDE却只有5款产品 均来自于电影 骇客帝国2 目的与策划 那么同样作为销售产品为目的的电子商务网站 如果把WS和BLINDE的界面设计形式相互交换 那是否可行呢 目的与策划 把BLINDE的界面设计形式换成WS的框架式 那是否可行呢 目的与策划 反之 如果WS采用了BLINDE的版式呢 目的与策划 明确目标 明确目标的过程 就是找出客户的优势 特色和行销方式的过程 如果客户并不知道提供什么资料比较好 设计师可以问以下几个问题来引导客户 目的与策划 明确目标 问题1 你要建设网站的目的是什么 参考答案 为业务 服务做广告 电子商务 销售产品 事业宣传 文化 观点传播 为供求双方建立平台式网站 提供公益服务 这个问题能够确定网站媒体的属性 答案多为多选 目的与策划 明确目标 比如 LENOVO联想公司 其网站以介绍产品为主 但也能够在线购买产品 同时还没有忽略对其品牌文化的推广 目的与策划 明确目标 比如 LENOVO联想公司 其网站以介绍产品为主 但也能够在线购买产品 同时还没有忽略对其品牌文化的推广 目的与策划 明确目标 blood 目的与策划 明确目标 问题2 你设想中的网站规模是多大 参考答案 很小 现有的资料能放下就行 以后很少添加新内容 从最小的规模开始 然后逐步扩大 最终网站内容是全面而丰富的 相当复杂 栏目众多 资源丰富 更新快 积累快 不太好说将来怎么发展 走着看的 目的与策划 明确目标 问题2 你设想中的网站规模是多大 网站的规模将决定网站设计时选择怎样的框架结构 如果网站更新快 积累快 框架设计就要针对未来加入的信息多做一些保留 结构要灵活一些 如果网站内容多 就很容易想到使用竖分栏式结构 目的与策划 为展示其丰富的产品系列 联想的网站就采取了竖分栏式结构 目的与策划 让我们再来看看另外一个眼镜品牌RAY BAN的网站 适合随时添加新产品 目的与策划 明确目标 问题3 目标用户的统一特征是什么 或者说 谁在看 参考答案 分销商或是终端用户 15 20岁之间的青少年或是20 30岁的青年 收入在5000元左右的灰领或是万