界面交互设计

前端demo
为什么要对各阶段输出物的名称进行修正？
更加形象化的表达，体现专业性，减少歧义
UE体验设计交付物标准与原则
分析用户类型和用户目标 以及我们能提供的功能 交互设计师+决策人员 （商业价值提议）+策划 （功能性提议）
为各类型用户目标设计完 整的宏观通路
交互设计师（流程图+说 明文档）
分别详细进行每种用户的 各个目标的流程
UI设计
UI设计
UI如何设计
UI设计
UI的应用范围
• 电脑的软件界面。
– 比如操作系统 、软件界面、网页、多媒体光盘。
• • • • •
手机的界面。 数字电视的界面。 空调等家电摇控器上的界面。 银行、移动等柜员机上的界面。 ……
UI设计
UI设计在中国的现状
目前在国内UI还是一个相对陌生的词，即便是一些设计人员也对 这个词不太了解。 我们经常看到一些招聘广告写着：招聘界面美工、界面美术设计 师等等。这表明在国内对UI的理解还停留在美术设计方面，认为UI的 工作只是描边画线，只是做一些图标，配下颜色等工作，缺乏对用户 交互的重要性的理解，事实上UI设计的工作包括更广泛的内容。 另一方面在软件开发过程中还存在重技术而不重应用的现象。许 多商家认为软件产品的核心是技术，而UI仅仅是次要的辅助，忽视了 良好的UI设计是提升用户体验的主要途径，是提升产品竞争力的重要 法宝。
UE体验设计基本流程
• 腾 讯 I S D 组 织 架 构
UE体验设计基本流程
• 腾讯ISD网站组-网站设计流程
UE体验设计基本流程
• 阿里巴巴用户体验部项目流程
UE体验设计基本流程
• 阿里巴巴用户体验部项目流程
UE体验设计交付物标准与原则
prototype
交互原型
mockup
视觉稿
demo
标准化是为了： 帮助交互设计师明确方案需要提供的内容及 范围，减少遗漏 减少沟通和衔接成本、提高工作效率
怎样做好体验设计UE
• 同理心、目标明确、高效、优雅
同理心：
从合乎常理的角度观察问题；
目标明确：
带着明确的设计目的；
高效：
主导注重实效的项目设计讨论；
优雅：
设计出优雅统一的用户界面交互。
进行视觉UI设计，页面排版
设计部分结束
UE体验设计交付物标准与原则
进行技术实现 技术支持（开发）+交互设计 师（技术与设计有冲突的地方 随时讨论）
产品完成 上线检测
交互设计师+技术人员 （调整修改） 其余人员+用户（参与测试）
UE体验设计交付物标准与原则
“输出物是用以表述观点和描述设计方案，本身不是设计的目的。”
UI设计
UI设计
用户身边充斥着专业术语
UI设计
万能软件
UI设计
不良的交互实例
取款机上查询工资余额，但是排队的人 太多了，不过还有电话银行嘛，一边拿出 手机，拨通了电话银行的号码：
UI设计
一个温柔礼貌的语音提示：“您好，欢 迎使用建设银行电话银行系统，1，自动语 音服务，2人工服务；” vivi把手机从耳边拿下来，找到1号键， 按了一下； “1个人银行服务，2公司银行服务，3 银证通功能，4个人外汇买卖服务，5基金 服务，0退出；”
什么是用户体验： 从一个倒霉的一天开始： 当你醒来时阳光已经照进你的窗户，而你的闹钟并 没有响。 匆忙起床后打开咖啡机，却发现壶里没有咖啡。 出门开车发现车没有了，匆忙加油却发现油卡没用， 去排队付现满满都是人。 加油后又因为路上一起事故而堵车了，千辛万苦到 单位后发现最终还是迟到。
界面交互设计
设计学院
现代数字媒体—杨毅
学时安排
第一章
讲 授 第二章 第三章 实 验 第一章 第二章 第三章
界面的定义
UI界面设计 界面交互设计与制作 界面的定义 UI界面设计 界面交互设计与制作
4
4 8 4 4 8
界面交互设计
？
交互界面设计基本定义
“启发式交互-让创新的界面具有教学功能。”
什么是交互设计：
UI设计
“1帐务查询，2转账，3修改密码，4电话 挂失，5通讯业务，6自助贷款，7自助缴费 及一卡通上网，8神州行充值服务，9凭证 式国债，0退出” 汗……这都是些什么呀？
UI设计
好的交互实例
• 名片上印相片 • 招商银行电话语音 • 多功能汽车方向盘
UI设计
UI从构思到修正的例子
修改前
UI设计
UI的分类
图形用户界面 • 图形用户界面(GUI-Graphics User Interface)是当前
• • • •
用户界面的主流，广泛应用于各档台式微机和图形工作站。 比较成熟的商品化系统有 Apple的Macintosh、IOS IBM的PM(Presentation Manager)、 Microsoft的Windows 当前各类图形用户界面的共同特点是以窗口管理系统为核 心，使用键盘和鼠标器作为输入设备。图形用户界面和人 机交互过程极大地依赖视觉和手动控制的参与，因此具有 强烈的直接操作特点。
• 从事该行业的人，我们称之为“交互设计师”，主要做的工作内容就是设计 软件的操作流程，树状结构，软件的结构与操作规范等。 • 一个软件产品在编码之前需要作的就是交互设计，并确立交互模型，交互规 范。
– 研究界面的视觉效果。
• 国内目前大部分UI工作者都是从事这个行业。也有人称之为“美工”， 但实际上不是单纯意义上的美术工人，而是软件产品的产品外形设计 师。从事该行业的人，我们可以称之为“软件图形设计师 ”。
“以用户为中心设计-设计必须是满足用户需求的、可行的，其次才是可产生商业价值的。”
什么是用户体验：
用户体验是一个测试产品满意度与使用度的词语。在大多 数情况下，产品软体测试或是商业行销测试时，会用到用 户体验这个词。有时在探讨设计价值时，也会用到此新设 计是否导出更差的用户体验，来评估其好坏。
除了用户能完成必须的任务之外，应该还提供积极的体验， 而应用设计和交互流程也应令用户感到愉悦。
UI设计
一个温柔礼貌的语音提示：“您好，欢 迎使用招商银行电话银行系统，1，自动语 音服务，2人工服务；” vivi把手机从耳边拿下来，找到1号键， 按了一下； “1个人银行服务，2公司银行服务，3 银证通功能，4个人外汇买卖服务，5基金 服务，0退出；”
UI设计
又按了1； “1存折户，2一卡通户，3个人信用卡 户，4新旧卡号查询 0 退出；” vivi按下了1旁边的2号键； “请输入一卡通卡号，以#号结束；” “1080 80699”，vivi连忙输入了卡号， 按#号键； “请输入查询密码，以#号结束；”
UI设计
本章节主要学哪些？
• UI设计的基本原则与禁忌。 • UI的视觉效果设计。
– 手机图标设计练习
– 手机完整界面制作练习 • 交互设计的基本原则与禁忌。 – 使用FLASH或AXURE完成整个手机操作系统 • UI设计团队管理原则与禁忌。 • 根据进度，如果还有时间，我们再继续讲网站设计。
UI设计
为什么电子商务网站用户体验设计师有时也把用户体验称作顾客体验？
这里特指用户访问一个网站或者使用一个产品时的全部体验。他们的印象和感觉，是否成功，是否享受，是否还想再 来/使用。他们能够忍受的问题，疑惑和BUG的程度。—— Uigarden.net
用户体验在交互设计中的重要性
“当产品满足人们的需要时，产品才是真正的称之为产品”
交互设计，又称互动设计，(英文Interaction Design, 缩写
IxD 或者 IaD),是定义、设计人造系统的行为的设计领域。人 造物，即人工制成物品，例如，软件、移动设备、人造环境、 服务、可佩带装置以及系统的组织结构。交互设计在于定义
人造物的行为方式(the "interaction",即人工制品在特定场
交互输出物（Prototype）：
用以表达交互设计内容
是产品原型设计过程中的阶段性成果、过渡型交付 通过可视化产出使各方对设计范围和内容有形象化的、统 一的认知
什么时候提交输出物？
在向视觉设计或前端开发提交需求时，应附带上传完整的输出物文档，并在变更时保持附件更新
UE体验设计交付物标准与原则
UI的范畴（工作内容）
– 研究用户。
• 我们所开发的软件等产品，最终都是为人而做的，所谓以人为本，这 不能是句空话，所以我们UI设计，必须研究人，研究我们的用户，要 了解我们的用户想要什么，要利用我们的产品解决什么问题，喜欢什 么，不喜欢什么等等。
– 研究用户与界面的关系。
• 即人机交互，研究如何让用户更好的更方便的使用软件，则是我们常 说的“易用性”。
UI的分类
UI的分类
• 传统界面介绍 • 传统界面是指可视化的实物界面，比如电视机的按钮、电源排插的 插孔、键盘、汽车飞机的操控台、食堂的打卡机刷卡界面、相机的按 钮界面、门上的把手界面、仪器的拆装提醒界面、交通指示牌、手机 键盘界面等。 • 诸如此类的“硬件”界面就是我们所熟知的传统界面，他们的共同 特点是看得见摸得着，不同的是有些界面你可以直接对它进行操作， 通过正确的程序或者指令去完成操作过程，实现目的，比如插上插排 就可以通电，打开电视机就可以看电视。有些界面则不行，例如拆装 提醒界面、交通指示牌，这些是不能对它们进行直接操作的界面，它 们的主要功能是提醒使用者去执行某件事情，它是不具有可操作性。
交互设计师+决策人员 （商业价值提议）+策划 （功能性提议）+技术 （是否能实现判断）
UE体验设计交付物标准与原则
设计每个流程中的细节流程 交互设计师+决策人员 （商业价值提议）+策划 （功能性提议）+技术 （是否能实现判断）
美术设计师（图标设计， 排版、配色、说明设计及 思路）+交互设计师（是否符 合用户习惯提议，不参与美 观讨论） 美术设计师+交互设计师+ 决策+策划
wenku.baidu.com
什么是界面视觉设计：
如果说设计=解决问题的话， 那么界面视觉设计，就是用视觉语言去解决逻辑问题。 色彩选择，决定了人们在第一眼看到网站时的感觉。 因此，色彩是Web设计者手中最普遍，也是最强大的 工具。
为什么当人们开始喜欢某些界面的时候，它们事实上会变得更可用？
积极的情感增强了创造性和广度优先的思考，而负面的情感集中在认知上，增强深度优先处理并把干扰降到最少；积 极的情感让人们更能容忍一些困难，在寻找解决方案的时候变得更灵活而有创造性。——Donald Norman
修改后
UI设计
修改后
课堂小练习
UI设计
1.拿出自己的手机，分析下自己手机上的UI，列出好的地方 与不好的地方，越多越好，越全面越好。 2.与同学交换手机，按同样的方法分析。
• 我们可以考虑的方面（仅供参考）：
– – – – – – – – 欠缺的功能 经常出错或不好用的功能 不方便的操作 图标或界面问题 除了打电话和发短信外，最常用的功能 最想要的功能。 理想的操作方式 等等……
UI的分类
图形用户界面 • 图形用户界面当前最流行的为触屏系统
• APPLE的IOS系统 • 谷歌的ANDROID系统 • 微软的win8系统
• 摆脱传统的键盘以及鼠标，从而执行更 • 精简的操作， 直观的交互。
UI的分类
UI设计决定了交互的方式
界面交互UI
用户体验UE
？
用户体验 UE设计
UE体验设计基本概念
景下的反应方式)相关的界面。——Wikipedia.org
什么样的人更适合做交互设计师？
交互设计师需要具备凭空想象复杂行为的能力，交互设计应当在任何代码编写之前做。交互设计师必须能够在代码被 写出来之前，想象它是做什么的。——Alan Cooper
交互界面设计基本定义
“让色彩更具有可读性-用最少的颜色表达最准确的内容。”
UI设计的基本原则
可以说，UI设计的所有基本原则，都是建立在“易用性”的基础上。
那什么是“易用性”？ 包括三个方面，按重要程度排列如下： 1.产品执行用户所需的功能。（快速使用） 2.快速安全地执行这些功能。（相对无错） 3.容易掌握使用这些功能。（易于学习）
UI设计
易用性不佳的例子
UI设计
易用性不佳的例子
用户体验在交互设计中的重要性
“当产品满足人们的需要时，产品才是真正的称之为产品”
什么是用户体验：分析是不是可以避免这些 交通事故：事故是一个司机为了调收音机音量而视 线离开了前方。 收银机：收银排队是因为收银系统过于复杂 加油机：插卡插反了，加油机没有提示 咖啡机：匆忙中没有把开关按到底，自动开启功能 始终没学会。 闹钟：因为你的猫半夜踩了闹钟一脚。