教育产品交互设计

1、教育线产品交互设计教育线产品交互设计国泰安教育线技术总监国泰安教育线技术总监 赵海生赵海生为什么出现这样的效果为什么出现这样的效果事情是这样的吗？事情是这样的吗？测试分析完成了？用例也设计完了吧哈哈，你还不知道需求变了在线教育几个界面在线教育几个界面几张看似不相关的图片几张看似不相关的图片几个网站几个网站主要内容主要内容 用户体验？交互设计？设计？ 实现模型和心理模型 用户体验与交互设计基本原则介绍 交互细节案例介绍概念区分概念区分 用户体验：UE 用户体验并不是指产品本身是如何工作的，而是指产品如何和外界联系并发挥作用，也就是人们如何“接触“或者“使用”它。 Web中的用户体验是指用户在访问

2、平台的过程中的全部体验，它包括平台是否有用，疑惑或者bug程度，功能是否易用、简约，界面设计和交互设计是否友好等方面。用户体验的核心是UCD，即“以用户为中心的设计”。 “AJAX之父”的Jesse James Garrett早在2000年就提出了以用户为中心的Web设计的流程和用户体验的要素交互设计交互设计 交互：用户通过某种方式发出指令，且系统对此作出相应的反应 交互设计是关于创建新的用户体验的问题，目的在于增强和扩充人们的工作、通信及交互方式，使他们能够更加有效地进行日常工作和学习。UI设计设计 User Interface Design 用户界面设计，在很大程度上就是在探讨如何让产品的

3、界面更加具有可用性，如何让用户有更良好的体验。这是一种优化后的界面，通过这种界面，用户能更方面地完成任务，获得良好的感觉。 例如：一个按钮的设计，美工设计考虑如何好看，而用户界面设计师则考虑按钮如何摆放，上面显示什么文字，甚至到底要不要这个按钮的问题。用户界面设计用户界面设计 在人和机器的互动过程中，最重要的一个方面就是我们所说的界面（用户界面设计是屏幕产品的重要组成部分。大致界面可分为感觉（视觉、触觉、听觉等）和情感两个层次。)界面设计是一个需要多方面专业知识的工作，认知心理学、设计学、语言学等在此都扮演着重要的角色。用户界面设计的三大原则是：置界面于用户的控制之下；减少用户的记忆负担；保持

4、界面的一致性。从字面上看是用户与界面2个组成部分，但实际上还包括用户与界面之间的交互关系，分为3个方向，分别是： 用户研究、交互设计、界面设计用户研究、交互设计、界面设计用户研究用户研究 1 用户研究包含两个方面：一是可用性研究，研究如何提高产品的可用性，使得网站界面的设计更容易被人接受、使用和记忆；二是通过可用性的研究，发掘用户的潜在需求，为技术创新提供另外一条思路和方法。用户研究是站在人文学科的角度来研究产品，研究用户的需要，站在用户的角度介入到产品的开发和设计中。对于设计师来说就是研究如何使自己的网站页面更收浏览者的欢迎 用户研究通过对于用户的使用环境、浏览习惯等研究，使得在网站界面设计

5、的前期能够把用户对于网站功能的期望、对设计和外观方面的要求融入到网站的开发与设计过程中去。交互设计交互设计 2 人与机之间的交互工程，在过去交互设计也由程序员来做，其实程序员擅长编码，而不善于与最终用户交互。在使用网站的过程中最能给浏览者留下深刻印象的一定是网站的视觉因素，也就是我们所谈论的网站界面。所以，很多的网站虽然功能比较齐全，但是交互方面设计很粗糙，繁琐难用，使用困难。如何使浏览者在使用网站时可以轻松自如的找到自己想要的资源，如何轻松实现网站的功能，给浏览者以愉悦的心情，拉拢浏览者下一次的登陆，这些都需要在网站的交互设计上下足工夫。界面设计界面设计 3 在漫长的软件发展中，界面设计工作

6、一直没有被重视起来。做界面设计的人也被贬义的称为“美工”。其实网站界面设计就像工业产品中的工业造型设计一样，是产品的重要买点。一个友好美观的界面会给人带来舒适的视觉享受，拉近人与电脑的距离，为网站创造卖点。如果把网站比做一个人的话，网站的后台编程好比人的骨骼与肌肉，而界面则是者个人的外表，人人都喜欢美人，同样有着良好视觉感受的网站界面也是网站拉拢人气的关键所在。网站界面是网站灵魂的外在表现，忽略网站的界面设计最终会使你的网站输在起跑线上。界面设计不是单纯的美术绘画，他需要定位使用者、使用环境、使用方式并且为最终用户而设计，是纯粹的科学性的艺术设计。检验一个界面的标准即不是某个项目开发组领导的意

7、见也不是项目成员投票的结果，而是最终用户的感受。软件设计软件设计 设计设计 交互设计交互设计 软件设计的艺术Terry Winograd (2004年度的ACM人机交互院士)开发软件建房子土木工程师装修设计师建筑设计师软件设计设计交互设计实现模型和心理模型实现模型和心理模型心理模型表现模型实现模型容易使用，体验良好记忆负担，体验较差最好的技术是消失在生活当中的技术几个通用的原则几个通用的原则 就进设计原则对功能进行恰当的分类和组织帮助用户探索和尝试帮助用户探索和尝试允许用户犯错误允许用户犯错误 让用户可以撤销动作 在执行具体的破坏性操作中要求用户确认。提供实用的帮助提供实用的帮助 设计帮助系统

8、 入门和学习部分 使用指南 参考手册 疑难解答 术语解释 语言表达：采用具体的例子，帮助用户理解 表达方式：按照使用流程来设计一个优秀的向导式界面设计一个优秀的向导式界面帮助用户高效地完成操作帮助用户高效地完成操作支持批处理操作（google的picasa图像处理软件）提高常用操作的效率4A中的作业模块布置手工作业流程布置手工作业流程使界面符合用户的使用习惯使界面符合用户的使用习惯 被动调整策略：例如功能定制，界面定制 主动自适应调整策略：例如sogou拼音输入法 根据其他用户的使用行为来主动进行自适应调整 购物网中，购买这本书的用户还购买了以下书， 在长尾理论中安德森叫过滤器法则，它是长尾现

9、象形成的一个因素 介于主动自适应和被动调整之间的混合策略减少用户在使用软件时出现错误减少用户在使用软件时出现错误1 让用户能有效地看出或者知道如何进行正确操作 减少用户记忆的负担； 自然匹配和预设用途； 尽可能采取一致性的设计 采用限制级因素防止用户出错减少用户在使用软件时出现错误减少用户在使用软件时出现错误2 利用某种方式提醒用户可能出错 如何设置出错信息 不要只告诉用户操作无法完成或者操作失败 不要仅仅给出出错代码，还应当给出该错误的含义 不要在出错信息中使用用户无法理解的术语 错误要尽可能明确 错误信息要有建设性，要让用户看出怎样才是正确的 不要给出误导性的出错信息 向用户提出解决问题的

10、建议减少用户的等待感减少用户的等待感 Robert B miller 1968 Response time in man-computer conversational transactions 0.1秒钟、1秒钟、10秒钟总结总结 就进设计原则 对功能进行组织和分类 帮助用户探索和尝试 允许用户犯错 提供实用的帮助 设计一个优秀的向导界面 使界面符合用户的使用习惯 减少用户出错 减少等待感界面构成要素界面构成要素 1.文字 2图形 3多媒体网站界面布局网站界面布局 （1）页面尺寸页面尺寸网页设计源于平面设计但又与平面设计有所区别不同，相同的是在设计中多运用平面构成的基本原理，不同的是它的大小

11、比较固定，传载的媒体只限于电子显示器（包括手机、PDA等），这样就为设计者提出了更为苛刻的要求。（一）页面尺寸 由于网页的浏览多是基于显示器实现的，所以显示器的分辨率就决定了网页设计者设计网站页面的大小，目前比较流行的显示器的尺寸为 1024*768、1125*864、1280*720、1280*768、1280*960、1280*1024 而目前主流设计网站页面的大小一般为 600*300、760*420、995*436 网站界面布局网站界面布局 （2）视觉顺序视觉顺序网站界面布局网站界面布局 具有清晰的视觉层次。具有清晰的视觉层次。布局应当让页面各元素之间的关系和重要性一目了然。你可以通过

12、适当使用下列属性来实现视觉层次：焦点：指用户首先关注的区域。形式上被赋予焦点属性的UI元素一定要表达重要的内容。 视觉流：指用户关注区域的顺序。可以根据任务逻辑和用户的浏览习惯来设计恰当的视觉流。好的视觉流应该清晰、合理、顺畅、自然。 关联：在逻辑上相关的UI元素应具有清晰的视觉关系网站界面布局网站界面布局 针对用户的阅读模式来设计布局。针对用户的阅读模式来设计布局。大部分人的阅读习惯是从左向右，至上而下。 阅读分为沉浸式阅读（immersive reading）和扫视（scanning），前者的目的在于理解，后者在于定位。 浏览网站时，用户不会沉浸在UI本身，而是沉浸在他们的目标任务中，因此

13、扫视是最常使用的阅读模式。用户只在确信必要时才仔细阅读大量文本。 针对扫视的布局设计可以适当强调主要的UI元素，弱化次要的。包括： 1)将主UI元素放在扫视路径上。2)避免将重要信息放在左下角或者页面底端或者需要滚动很多的控件上。3)考虑使用渐进展开方式来隐藏次要的UI元素。4)将任务相关的重要信息要直接表现在控件上。用户更倾向于关注交互控件上的标签，而不是辅助型的静态文本。网站界面布局网站界面布局合理利用页面空间。合理利用页面空间。保持页面的视觉平衡。避免拥挤和对空间的浪费。 确保关键数据没有被截断，除非数据特别长网站界面布局网站界面布局 举例举例网站界面布局网站界面布局网站界面布局 （3）

14、布局原则布局原则 平衡原则。注意屏幕上下左右平衡。不要堆挤数据，过分拥挤的显示也会产生视觉疲和接收错误。 预期原则。屏幕上所有对象，如窗口、按钮、菜单等处理应一致化，使对象的动作可预期。 经济原则。即在提供足够的信息量的同时还要注意简明，清昕。特别是媒体，要运用好媒体选择原则。 顺序原则。对象显示的顺序应依需要排列。通常应最先出现对话，然后通过对话将系统分段实现。 规则化。画面应对称，显示命令、对话及提示行在一个应用系统的设计中尽量统一规范。案例一案例一 Tecent 交互设计Dont make me think “返回”的位置和做法很重要：这是整个QQMail的交互的“枢纽”，如同围棋中的“

15、玉柱”，也定义了邮箱的交互风格。 帮用户自动选中：在输入独立密码或加密folder输入密码时错误后，应该把输入框内的内容select上，这样就可以直接打入而不用清除了 光标定位：之前的点回复时光标focus到正文的问题改好了,但却没有注意到点转发时光标,反而应是在收件人处而不是正文处, 因为一般总要填写转发人, 而回复(包括回复全部)则是直接输入内容.交互设计交互设计符合用户习惯与预期符合用户习惯与预期 先字母排序，再优先显示最近联系人，减少键盘操作。交互设计交互设计符合用户习惯与预期符合用户习惯与预期 兼容客户端邮件菜单习惯在用TT或QQ/TM/RTX截屏后的图,mail原来在写信时用Ctr

16、l-V可以贴出来，但右键则不能。 不随意去掉用户正在使用的功能原来mail在做出了“HTML方式查看”后，去掉了“打开”功能 符合用户预期点击其他地方，WEBQQ的浮动窗口隐藏到固定位置交互设计交互设计适时的提醒适时的提醒 没必要的提醒不需要出现 而适时出现的提示或功能，用得好，不但不会骚扰用户，还是对用户的细致的关怀交互设计交互设计操作便利操作便利 QQ魔法表情交互设计交互设计操作便利操作便利 问卷星的设计页面视觉设计视觉设计制定规范制定规范 维持统一维持统一 文字使用要规范，语法，大小，颜色，大小写都需要注意 能用一个词表达的，不用一句话。能用一句话表达清楚的，不用两句话 每个概念都只有唯

17、一一种表达。如”VIP”的概念 能用一种字体颜色的，不多用一种颜色 能用一种字体大小的，不多用一种大小视觉设计视觉设计防止不恰当的低龄化防止不恰当的低龄化在追求“简单”的过程中，QQMail不知不觉的变得“中性”、“成熟”化。当我们更加理性和严谨地设计产品的时候，自然会远离“低龄”倾向。“成熟”源自合理的设计，“低龄”源自不合常理的设计。 不恰当的低龄化用户体验总结用户体验总结Dont make me think符合用户习惯与预期做适时的提醒不强迫用户选择最佳方案操作便利交互设计的十项原则交互设计的十项原则 11.让用户随时了解系统的状态例如导入导出的提示功能2.系统应该与真实世界相符合（使用用户惯用的词汇和概念）3.给用户控制权和自主权当系统出错或者误操作后能够紧急退出。4.提倡一