界面交互设计

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