1、界面交互设计,段静迪,学时安排,讲授,实验,界面交互设计？,交互界面设计基本定义,交互设计，又称互动设计，(英文Interaction Design, 缩写 IxD 或者 IaD),是定义、设计人造系统的行为的设计领域。人造物，即人工制成物品，例如，软件、移动设备、人造环境、服务、可佩带装置以及系统的组织结构。交互设计在于定义人造物的行为方式(the “interaction“,即人工制品在特定场景下的反应方式)相关的界面。Wikipedia.org,“启发式交互-让创新的界面具有教学功能。”,什么是交互设计：,什么样的人更适合做交互设计师？ 交互设计师需要具备凭空想象复杂行为的能力，交互设计
2、应当在任何代码编写之前做。交互设计师必须能够在代码被写出来之前，想象它是做什么的。Alan Cooper,交互界面设计基本定义,如果说设计=解决问题的话， 那么界面视觉设计，就是用视觉语言去解决逻辑问题。 色彩选择，决定了人们在第一眼看到网站时的感觉。 因此，色彩是Web设计者手中最普遍，也是最强大的工具。,“让色彩更具有可读性-用最少的颜色表达最准确的内容。”,什么是界面视觉设计：,为什么当人们开始喜欢某些界面的时候，它们事实上会变得更可用？ 积极的情感增强了创造性和广度优先的思考，而负面的情感集中在认知上，增强深度优先处理并把干扰降到最少；积极的情感让人们更能容忍一些困难，在寻找解决方案的
3、时候变得更灵活而有创造性。Donald Norman,UI设计,UI设计,UI如何设计,UI设计,UI的应用范围,电脑的软件界面。 比如操作系统 、软件界面、网页、多媒体光盘。 手机的界面。 数字电视的界面。 空调等家电摇控器上的界面。 银行、移动等柜员机上的界面。 ,UI设计,UI设计在中国的现状,目前在国内UI还是一个相对陌生的词，即便是一些设计人员也对这个词不太了解。我们经常看到一些招聘广告写着：招聘界面美工、界面美术设计师等等。这表明在国内对UI的理解还停留在美术设计方面，认为UI的工作只是描边画线，只是做一些图标，配下颜色等工作，缺乏对用户交互的重要性的理解，事实上UI设计的工作包括
4、更广泛的内容。另一方面在软件开发过程中还存在重技术而不重应用的现象。许多商家认为软件产品的核心是技术，而UI仅仅是次要的辅助，忽视了良好的UI设计是提升用户体验的主要途径，是提升产品竞争力的重要法宝。,UI的范畴（工作内容）,研究用户。 我们所开发的软件等产品，最终都是为人而做的，所谓以人为本，这不能是句空话，所以我们UI设计，必须研究人，研究我们的用户，要了解我们的用户想要什么，要利用我们的产品解决什么问题，喜欢什么，不喜欢什么等等。研究用户与界面的关系。 即人机交互，研究如何让用户更好的更方便的使用软件，则是我们常说的“易用性”。 从事该行业的人，我们称之为“交互设计师”，主要做的工作内容
5、就是设计软件的操作流程，树状结构，软件的结构与操作规范等。 一个软件产品在编码之前需要作的就是交互设计，并确立交互模型，交互规范。研究界面的视觉效果。 国内目前大部分UI工作者都是从事这个行业。也有人称之为“美工”，但实际上不是单纯意义上的美术工人，而是软件产品的产品外形设计师。从事该行业的人，我们可以称之为“软件图形设计师 ”。,UI设计,本章节主要学哪些？,UI设计的基本原则与禁忌。 UI的视觉效果设计。 手机图标设计练习 手机完整界面制作练习交互设计的基本原则与禁忌。 使用FLASH或AXURE完成整个手机操作系统UI设计团队管理原则与禁忌。根据进度，如果还有时间，我们再继续讲网站设计。
6、,UI设计,UI设计的基本原则,可以说，UI设计的所有基本原则，都是建立在“易用性”的基础上。那什么是“易用性”？包括三个方面，按重要程度排列如下：1.产品执行用户所需的功能。（快速使用）2.快速安全地执行这些功能。（相对无错）3.容易掌握使用这些功能。（易于学习）,UI设计,易用性不佳的例子,UI设计,易用性不佳的例子,UI设计,UI设计,用户身边充斥着专业术语,UI设计,万能软件,UI设计,不良的交互实例,取款机上查询工资余额，但是排队的人太多了，不过还有电话银行嘛，一边拿出手机，拨通了电话银行的号码：,UI设计,一个温柔礼貌的语音提示：“您好，欢迎使用建设银行电话银行系统，1，自动语音服
7、务，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号键；“请输入一卡通卡号，以#号结束；”“1080 80699”，vivi连忙输入
8、了卡号，按#号键；“请输入查询密码，以#号结束；”,UI设计,“1帐务查询，2转账，3修改密码，4电话挂失，5通讯业务，6自助贷款，7自助缴费及一卡通上网，8神州行充值服务，9凭证式国债，0退出”汗这都是些什么呀？,UI设计,好的交互实例,名片上印相片 招商银行电话语音 多功能汽车方向盘,UI设计,UI从构思到修正的例子,修改前,UI设计,修改后,UI设计,修改后,UI设计,课堂小练习,1.拿出自己的手机，分析下自己手机上的UI，列出好的地方与不好的地方，越多越好，越全面越好。2.与同学交换手机，按同样的方法分析。我们可以考虑的方面（仅供参考）： 欠缺的功能 经常出错或不好用的功能 不方便的操
9、作 图标或界面问题 除了打电话和发短信外，最常用的功能 最想要的功能。 理想的操作方式 等等,UI的分类,UI的分类,传统界面介绍传统界面是指可视化的实物界面，比如电视机的按钮、电源排插的插孔、键盘、汽车飞机的操控台、食堂的打卡机刷卡界面、相机的按钮界面、门上的把手界面、仪器的拆装提醒界面、交通指示牌、手机键盘界面等。诸如此类的“硬件”界面就是我们所熟知的传统界面，他们的共同特点是看得见摸得着，不同的是有些界面你可以直接对它进行操作，通过正确的程序或者指令去完成操作过程，实现目的，比如插上插排就可以通电，打开电视机就可以看电视。有些界面则不行，例如拆装提醒界面、交通指示牌，这些是不能对它们进行
10、直接操作的界面，它们的主要功能是提醒使用者去执行某件事情，它是不具有可操作性。,UI的分类,图形用户界面图形用户界面(GUI-Graphics User Interface)是当前用户界面的主流，广泛应用于各档台式微机和图形工作站。比较成熟的商品化系统有 Apple的Macintosh、IOS IBM的PM(Presentation Manager)、 Microsoft的Windows 当前各类图形用户界面的共同特点是以窗口管理系统为核心，使用键盘和鼠标器作为输入设备。图形用户界面和人机交互过程极大地依赖视觉和手动控制的参与，因此具有强烈的直接操作特点。,UI的分类,图形用户界面图形用户界面
11、当前最流行的为触屏系统 APPLE的IOS系统 谷歌的ANDROID系统 微软的win8系统摆脱传统的键盘以及鼠标，从而执行更 精简的操作，直观的交互。,UI的分类,UI设计决定了交互的方式,界面交互UI 用户体验UE？,用户体验 UE设计,UE体验设计基本概念,用户体验是一个测试产品满意度与使用度的词语。在大多数情况下，产品软体测试或是商业行销测试时，会用到用户体验这个词。有时在探讨设计价值时，也会用到此新设计是否导出更差的用户体验，来评估其好坏。 除了用户能完成必须的任务之外，应该还提供积极的体验，而应用设计和交互流程也应令用户感到愉悦。,“以用户为中心设计-设计必须是满足用户需求的、可行
12、的，其次才是可产生商业价值的。”,什么是用户体验：,为什么电子商务网站用户体验设计师有时也把用户体验称作顾客体验？ 这里特指用户访问一个网站或者使用一个产品时的全部体验。他们的印象和感觉，是否成功，是否享受，是否还想再来/使用。他们能够忍受的问题，疑惑和BUG的程度。 U,用户体验在交互设计中的重要性,从一个倒霉的一天开始： 当你醒来时阳光已经照进你的窗户，而你的闹钟并没有响。 匆忙起床后打开咖啡机，却发现壶里没有咖啡。 出门开车发现车没有了，匆忙加油却发现油卡没用，去排队付现满满都是人。 加油后又因为路上一起事故而堵车了，千辛万苦到单位后发现最终还是迟到。,“当产品满足人们的需要时，产品才是
13、真正的称之为产品”,什么是用户体验：,用户体验在交互设计中的重要性,交通事故：事故是一个司机为了调收音机音量而视线离开了前方。 收银机：收银排队是因为收银系统过于复杂 加油机：插卡插反了，加油机没有提示 咖啡机：匆忙中没有把开关按到底，自动开启功能始终没学会。 闹钟：因为你的猫半夜踩了闹钟一脚。,“当产品满足人们的需要时，产品才是真正的称之为产品”,什么是用户体验：分析是不是可以避免这些,UE体验设计基本流程,腾讯ISD组织架构,UE体验设计基本流程,腾讯ISD网站组-网站设计流程,UE体验设计基本流程,阿里巴巴用户体验部项目流程,UE体验设计基本流程,阿里巴巴用户体验部项目流程,UE体验设计
14、交付物标准与原则,为什么要对各阶段输出物的名称进行修正？ 更加形象化的表达，体现专业性，减少歧义,prototype,mockup,demo,交互原型,视觉稿,前端demo,UE体验设计交付物标准与原则,分析用户类型和用户目标 以及我们能提供的功能,为各类型用户目标设计完 整的宏观通路,分别详细进行每种用户的 各个目标的流程,交互设计师+决策人员 （商业价值提议）+策划 （功能性提议）,交互设计师（流程图+说 明文档）,交互设计师+决策人员 （商业价值提议）+策划 （功能性提议）+技术 （是否能实现判断）,UE体验设计交付物标准与原则,设计每个流程中的细节流程,进行视觉UI设计，页面排版,设计
15、部分结束,交互设计师+决策人员 （商业价值提议）+策划 （功能性提议）+技术 （是否能实现判断）,美术设计师（图标设计， 排版、配色、说明设计及 思路）+交互设计师（是否符合用户习惯提议，不参与美 观讨论）,美术设计师+交互设计师+ 决策+策划,UE体验设计交付物标准与原则,进行技术实现,产品完成 上线检测,技术支持（开发）+交互设计师（技术与设计有冲突的地方随时讨论）,交互设计师+技术人员 （调整修改） 其余人员+用户（参与测试）,UE体验设计交付物标准与原则,用以表达交互设计内容是产品原型设计过程中的阶段性成果、过渡型交付通过可视化产出使各方对设计范围和内容有形象化的、统一的认知,“输出物
16、是用以表述观点和描述设计方案，本身不是设计的目的。”,交互输出物（Prototype）：,什么时候提交输出物？ 在向视觉设计或前端开发提交需求时，应附带上传完整的输出物文档，并在变更时保持附件更新,UE体验设计交付物标准与原则,帮助交互设计师明确方案需要提供的内容及范围，减少遗漏减少沟通和衔接成本、提高工作效率,标准化是为了：,怎样做好体验设计UE,同理心、目标明确、高效、优雅,同理心： 从合乎常理的角度观察问题； 目标明确： 带着明确的设计目的； 高效： 主导注重实效的项目设计讨论； 优雅： 设计出优雅统一的用户界面交互。,用户体验在交互设计中的重要性,设计者UI 用户UE,关注体验,注重细
17、节,界面交互设计与实例,界面交互设计与实例,界面交互设计与实例,按照软件运行的方式，软件可以分为两种类型：桌面软件和网页软件。,本次课程主要以网页软件为研究的对象。,界面交互设计与实例,http:/www.toyota- Touch车内控制系统,界面交互设计与实例,界面交互设计与实例,界面交互设计与实例,图形用户界面 GUI,1983年，苹果推出的Macintosh (128K）型电脑获得成功，很大程度上归功于其配备了GUI操作系统：System 1.0,界面交互设计与实例,界面交互设计与实例,界面交互设计与实例,界面设计的重要性,界面设计的重要性,创造一个友好、易用的使用环境,界面设计的重要
18、性,创造一个友好、易用的使用环境,界面设计的重要性,应对激烈的竞争,界面设计的重要性,应对信息结构的日益复杂,界面设计的重要性,课堂练习对搜狐每户网站进行简化，但不减少信息类别,界面设计的重要性,传递正确的信息,以网站为例：,企业建立一个网站，是要传递信息。企业不同，信息也不同。信息不同，网站的界面设计亦会不同。,界面设计的重要性,劳力士手表的网站,http:/ 设计（创意）,目的 策划,信息 文化,设计 形式,体现、服务,确定、决定,美化、服务,确定（择优）,确定、决定,服务、实现,信息 文化,信 息,没有信息就没有网站。,信息的形式不只是文字和图片，网站的视觉设计也是信 息内容的一部分。,
19、信息 文化,当我们确立了网站建设的目的之后，就要围绕这个目的对信息进行筛选与编整，并按照重要程度有秩序地排放在页面上。,浏览者可以通过信息的编排，辨析内容的重要程度，接收到来自界面传达的视觉信息。这样，建设方的目的就达到了。,信息 文化,http:/ 文化,http:/www.moma.org/exhibitions/2004/tallbuildings/index_f.html,信息与信息空间,信息与信息空间,网站即是信息的容器，也是信息的载体。,它就像一个放置信息的立体空间，有着很多的单元格，将信息分门别类的放置其中。,从信息的分类、分层、列表、更新可以衍生出网站的栏目、子栏目、文章列表及
20、其它信息功能类别等多种信息属性。,做为信息的载体，网站的立意、设计、宣传、发展都和信息内容息息相关。,信息与信息空间,信息与信息空间,信息量少，网站就简单。但是设计师可以运用图形、文字、多媒体、版式等手段，巧妙地缓解信息过少给浏览者带来的不信任、不确定感。,网站的大小体现出信息量的多少，信息内容也是建立网站的参考。,http:/ 文化,信息 文化,信息之图片,图片是比文字更为直观的信息类型，也是界面设计核心要素，多数视觉作品多是通过优秀的图形设计和图片取得成功的。,信息之图片,通过运用好的图形或图片，可以在第一时间抓住浏览者的眼球。,http:/ 文化,信息 文化,信息 文化,信息 文化,信息
21、 文化,信息 文化,信息 文化,信息 文化,但是如果只有重视视觉美感，只有精美的图形或图片，而忽略了我们建设网站的核心目标高效准确地传递信息，客户也是很难认可的。,信息之图片,信息之图片,初稿方案,信息之图片,信息之图片,定稿方案,信息之图片,信息之图片,http:/ 减价50%,下面的三条广告语说得是同一个促销行为。你认为客户会欣然接受哪一种呢？,答案是B。,B 买一送一,C 打对折,调查显示，这条广告语的销售额胜过另两条40%。,信息的创建与管理,课堂练习,为定位鞋等产品手绘一套网站模型设计,目的与策划,目的与策划,目的与策划,目的与策划,目的是我们做事情的源头和动力。,目的与策划,明确目
22、标,如果我们要对网站进行界面设计，就必须先明确建设网站的原因。如：,建立网站是为了销售产品，还是进行商业服务。,你的目标用户是谁，他们能从你的网站上得到什么。,你想从网站中获得怎样的回报。,即使目标相似，具体的设计方案也会根据客户的不同情况而有所差别，这些差别反映出网站的特殊性。,目的与策划,WICKED SUNGLASSES，是一家专卖眼镜的商务网站，经营多个品牌的产品。,目的与策划,同样是眼镜专卖的网站，BLINDE却只有5款产品，均来自于电影骇客帝国2。,目的与策划,那么同样作为销售产品为目的的电子商务网站，如果把WS和BLINDE的界面设计形式相互交换，那是否可行呢？,目的与策划,把B
23、LINDE的界面设计形式换成WS的框架式，那是否可行呢？,目的与策划,反之，如果WS采用了BLINDE的版式呢？,目的与策划,明确目标,明确目标的过程，就是找出客户的优势、特色和行销方式的过程。,如果客户并不知道提供什么资料比较好，设计师可以问以下几个问题来引导客户。,目的与策划,明确目标,问题1：你要建设网站的目的是什么？,参考答案：,为业务、服务做广告。,电子商务、销售产品。,事业宣传，文化、观点传播。,为供求双方建立平台式网站。,提供公益服务。,这个问题能够确定网站媒体的属性，答案多为多选。,目的与策划,明确目标,比如，LENOVO联想公司，其网站以介绍产品为主，但也能够在线购买产品，同
24、时还没有忽略对其品牌文化的推广。,目的与策划,明确目标,比如，LENOVO联想公司，其网站以介绍产品为主，但也能够在线购买产品，同时还没有忽略对其品牌文化的推广。,目的与策划,明确目标,blood,目的与策划,明确目标,问题2：你设想中的网站规模是多大？,参考答案：,很小，现有的资料能放下就行，以后很少添加新内容。,从最小的规模开始，然后逐步扩大，最终网站内容是全面而丰富的。,相当复杂，栏目众多。,资源丰富，更新快，积累快。,不太好说将来怎么发展，走着看的。,目的与策划,明确目标,问题2：你设想中的网站规模是多大？,网站的规模将决定网站设计时选择怎样的框架结构。,如果网站更新快，积累快，框架设
25、计就要针对未来加入的信息多做一些保留，结构要灵活一些。,如果网站内容多，就很容易想到使用竖分栏式结构。,目的与策划,为展示其丰富的产品系列，联想的网站就采取了竖分栏式结构。,目的与策划,让我们再来看看另外一个眼镜品牌RAY-BAN的网站。（适合随时添加新产品）,目的与策划,明确目标,问题3：目标用户的统一特征是什么？或者说，谁在看？,参考答案：,分销商或是终端用户。,15-20岁之间的青少年或是20-30岁的青年。,收入在5000元左右的灰领或是万元收入以上的白领。,艺术院校的学生或是艺术爱好者。,男性浏览者居多或是女性居多。,只是给我客户公司的负责人看的，但都是外国人。,目的与策划,明确目标
26、,这个问题非常重要，它决定了网站的定位，也决定了是否能将正确的信息传递给正确的人。,目的与策划,目的与策划,目的与策划,明确目标,问题4：网站的收入来源是哪几个部分？,参考答案：,我不靠网站本身赚钱，仅仅是给国外的客户看，他们需要的话就会下订单。,网站广告、在线游戏。,浏览者可直接在网站上购物，这就是主要来源。,我的网站卖的是信息，VIP会员可以看到更多的东西。,网站没有收入，求个存在感。,目的与策划,明确目标,问题4：网站的收入来源是哪几个部分？,这个答案可以帮助设计师了解客户对于网站的期望值有多高。是否需要在可以创收的环节上多下功夫。,目的与策划,明确目标,问题5：关于网站实现的技术，你的
27、想法是怎样的？,参考答案：,全FLASH实现的，我就要这个派头。,不需要程序，留言本都不需要，全HTML就够了。,先是FLASH欢迎界面，里面是静态的，或者小的动画点缀一下。,三维360度，展示产品，FLASH动画做产品导读。,局部用PHP、ASP或其它动态程序生成。,目的与策划,丰田AYGOD的网站则可以进行360度展示。,目的与策划,而Nike的“23号房”则更加精彩。,目的与策划,明确目标,问题6： 网站的设计风格上，你有什么要求？,参考答案：,比较现代、有时代感，比较大气就行。,专业、严谨、内容丰富。,活泼的，颜色鲜艳的，像水果糖,我不喜欢蓝色，你不用蓝色就可以了,我希望“眼前一亮”,
28、目的与策划,明确目标,同样的词语，每个人的理解不一定相同。,“眼前一亮”究竟指的是什么？,目的与策划,小练习,针对以上问题设置一套手机应用的问卷 (应用类型自选)问卷不低于10到问题，并设置答案每题4个答案,目的与策划,个人网站,目的与策划,商业网站,目的与策划,目标用户,目标用户是指接受并理解网站建设方通过网络媒介传递信息的个体。,网站是为目标用户而存在的。,目的与策划,hdt 互动通,目标用户,目的与策划,hdt 互动通,目标用户,互动通有针对三类不同目标用户（首席执行管、市场专业人士、IT专业人士）的引言指示。,这种明确划分目标用户的方式，可以使目标用户快速的对网站产生兴趣，有益于积累用户资源。,目的与策划,目标用户,对于专题类的网站来说，目标用户会有一些个性和喜好上的共同点，这些共同点是设计网站时的参考材料。,目的与策划,目标用户,目的与策划,目标用户,目的与策划,目标用户,目的与策划,目标用户,目的与策划,目标用户,
