手机平台应用开发-交互设计补充.ppt

1、1手机平台应用开发手机平台应用开发交互设计补充交互设计补充教师：金星Tel ：189711427712内容内容 用户研究和设计 用户研究 线框图 视觉感知 色觉理论 配色理论 实践 版式设计 “AJAX之父”Jesse James Garrett，2000 以用户为中心的Web设计流程 用户体验的要素 框架层 按钮、表格、照片和文本区域的位置。用户体验工程模型用户体验工程模型用户研究用户研究 用户是什么？ 亨利福特：如果我直接问人们需要什么，回答很可能是：“一匹更快的马”。 绝大部分人不是产品设计师 用户只会满足于比现有好一点发现问题发现问题找到方法找到方法人们目前正在做的更高效、更方便地完成

2、人们不喜欢做却不得不做的变得有趣一些想要做的变为现实用户倾向于用户倾向于 用户只会用到20%左右的软件功能 但是往往希望有某些额外功能 用户只会使用一种操作模式 很少提升他们的技能 养成了自己对软件工作原理的理解 为什么电脑这么慢？ 如何找到用户的真实需求？例：场景融入例：场景融入 一个寻找餐馆的手机软件 让我看看，附近有什么餐馆？好，有7家。其中两家是快餐店，就不考虑了，2家炒菜，还行，2家提供烧烤，不健康，1家西餐，半成品做的。 现在是晚上11点，还开业吗？它们消费水平高吗？ 排名，我需要它们的排名和评论。 小A说这家服务态度好，他的评论可靠吗？4.5星级的，姑且相信吧！ 我是不是需要一个

3、方向指示，或是一张地图？用例之后：线框图用例之后：线框图 界面轮廓 3R法则 Requirement Reduction Regularity 乔希 威廉姆斯 75%的设计是在写html之前纸上勾勒。去掉一般性功能去掉一般性功能 每个新增功能意味着 更多的帮助文档、学习、理解和确认 更多的自定义选项 更多的犯错可能 奶牛规则 成熟：9.0版本 已有用户群体的制约 不爱改变时间时间目标市场目标市场成本成本非必要性测试非必要性测试 降低软件中的噪音 我的软件主要是用来支持什么情境的？ 如果这个软件不存在，我想创建一个最简解决方法，是什么？ 从头重新创建上面的软件需要多长时间？ 60秒法则 这个项目

4、周期已经缩短一半 面见客户前我们还有60秒决定保留哪些东西、舍弃哪些东西。案例：提升案例：提升45%购买人数购买人数 表单内容 出现时机10删除文件删除文件取消取消购买购买前登前登录录登登录录注注册册电子邮箱密码忘记了密码？表单上的可用性研究表单上的可用性研究1112少用一些文字少用一些文字 不是警告，而是允许撤销。 智能处理，而非警告。 如浏览器地址栏，自动搜索。 不要为一个界面附加大段说明性文字。 如果无可避免 保证每个按钮都有特定的标签确认框确认框删除文件删除文件取消取消你要删除文件吗？你要删除文件吗？确认确认取消取消13人们通常不会逐字逐句阅读人们通常不会逐字逐句阅读 使用对用户有用的

5、词汇 每段只阐明一个主旨 各段主旨置于首句 概括性标题 加亮关键词 使用项目符号列表 简短、日常化的文字 不要过度考虑一致性，不要使用企业口吻，语气不要居高临下。14图片代替叙述图片代替叙述 请在菜单栏点击“编辑”，然后出现编辑子菜单，再点击“全选”。 哪种更简洁？15测试文字测试文字 填空测验 从产品界面文字中选出长125150字的内容片段 五个词之间留一个空 测试者补上缺失的词 结果分析： 若正确率小于40%，则重新撰写。 若高于60%，则可用。界面诊断界面诊断邮件管理邮件管理17人的感知人的感知 视觉 80%的信息 听觉 仅次于视觉 触觉 不可低估，尤其对有能力缺陷的人，是至关重要的 其

6、他感觉18视觉感知过程视觉感知过程 受到外部刺激接收信息阶段物理特性决定了人类无法看到某些事物 解释信息阶段对不完全信息发挥一定的想象力但也可能有错觉1920两种神经细胞两种神经细胞21比较比较视干细胞视锥细胞在低水平照明时（如夜间）起作用在高水平照明时（如白天）起作用区别黑白445/535/575nm，综合对光谱中绿色最敏感，视网膜外围处最多对550nm黄绿最敏感，视网膜中部最多对极弱的刺激敏感主要在识别空间位置和要求敏锐地看物体时起作用22视角视角23视敏度（视敏度（Visual Acuity） 人眼对细节的感知能力，通常用被辨别物体最小间距所对应的视角的倒数表示。 最佳状况：在6M处辨认

7、出20毫米高的字母。 一般：辨认出40毫米高的字母。24亮度亮度 增强亮度可以提高视敏度 亮度增加，闪烁感也会增强。低于50Hz，视觉系统就会感到闪烁 在设计交互界面时，要考虑使用者对亮度和闪烁的感知，尽量避免使人疲劳的因素。25层次感：相对距离和深度层次感：相对距离和深度 覆盖关系 大小比例 对物体的熟悉度产生预期，影响对大小、远近的判断。26色散实验色散实验27色彩色彩 人能感觉到不同的颜色，这是眼睛接受不同波长的光的结果。 色度、强度和饱和度。正常的眼睛可感受到的光谱波长为390纳米-770纳米。实际上，是不同锥细胞的综合感觉。28视锥细胞的视锥细胞的“三原色三原色”445nm接近接近蓝

8、蓝色色535nm接近接近绿绿色色575nm接近接近黄黄色色29色觉抵消机制色觉抵消机制 七色板 色彩抵消，亮度不抵消。 颜色混合的原理 颜色是3组视信号的差差异异造成的。 红色 + 绿色 = 黄色 黄色 + 蓝色 = 白色 蓝色 + 红色 = 紫色 颜色对比现象30色相空间色相空间 色相，也称色调 ( Hue ) 颜色的首要属性，借以用名称来区别红、黄、绿、蓝等各种颜色。 自我测评：你能分辨出多少种不同的色调？ 人的眼睛可以 分辨出约180种不同色相的颜色。 色轮：圆形的色图 牛顿经典棱镜实验的一部分 红、橙、黄、绿、蓝、紫 等量混合出相间色，成十二基本色相。31“三原色三原色”(Primar

9、y Color) 小学时学过的基本原色： “红黄产生橘黄色，黄色和蓝色变成绿色，蓝色和红色成为紫色”。 事实上，红，黄，蓝只能混合出一个较小的色域。 非原色标准的原色集合 橙，绿，紫：彩色摄影法Autochrome（1903） C（Cyan，青），M（Magenta，品红） Y（Yellow，黄）。我才能混合出我才能混合出广的色域呢！广的色域呢！32“三原色三原色”：加色与减色：加色与减色33三原色色轮三原色色轮红红黄黄蓝蓝间间色色Secondary Secondary colorcolorPrimary Primary colorcolor第三色第三色Tertiary Tertiary co

10、lorcolor34连续的色轮连续的色轮35色轮：加色色轮：加色 vs. 减色减色RGBCMYK36两色搭配是用色的基础有了白色，红色更注目；有了白色，红色更注目；有了红色，白色更干净。有了红色，白色更干净。有了黑色，红色更热情；有了黑色，红色更热情；有了红色，黑色更庄重。有了红色，黑色更庄重。无彩色：黑，白，灰无彩色：黑，白，灰红色：燃烧，燥热，刺眼红色：燃烧，燥热，刺眼白色：焦点白色：焦点37互补色互补色 色轮上相对的颜色 红绿，蓝橙，黄紫 色彩之间强烈对比在高纯度的情况下，会引起色彩的颤动和不稳定感，正式设计中比较少见。 一种做主色，另一种做小范围强调色。38三色组三色组 彼此等距的三种

11、颜色 红、黄、蓝 紫、橙、绿 比较协调 但一定要选出一种色彩作为主色，另外两种作为辅助色。39分裂互补三色组分裂互补三色组 互补色两侧的颜色 对比依然非常强烈 不会像互补色搭配那样产生颤抖和不安的感觉。 对初学者来说，这是种非常好用的搭配。40类似色类似色 彼此相邻的颜色 近似色搭配常常在自然中被找到，所以对眼睛来说，是最舒适的搭配方式。颜色颜色+灰色灰色=亮度。亮度。41配色器配色器42亮色和暗色亮色和暗色 Brightness ( Value ) 亮色 向纯色增加白色 暗色 向纯色增加黑色暗色暗色亮色亮色HSV模型模型:色调色调 饱和度饱和度 亮度亮度 画家: 加白色改变颜色浓度 加黑色改

12、变颜色深度44纯度和方形调色板纯度和方形调色板 纯度 颜色鲜艳度、饱和度。 保持亮度相同时，颜色相对灰色的所占比例。 HSV模型 用户颜色模型，A. R. Smith在1978年创建。 Hue Saturation Value 方形调色板 横看亮度不变 竖看纯度不变45亮度界面亮度界面高亮度高亮度雅致雅致刺激刺激少少46亮色和暗色：改进界面亮色和暗色：改进界面 色质 明暗度、深浅度或色调。 色质过于接近时 影响界面对比度。 加强色质差别 加强明暗对比 使用阴影47高纯度设计高纯度设计 强烈艳丽 对视觉刺激是迅速的，醒目的效果 不易于长时间的观看48界面色调理论界面色调理论 界面色调： 界面中色

13、彩总的趋向。 主色调 主要色调，其他配色不能超过该主要色调的视觉面积。 辅色调 仅次与主色调的视觉面积，烘托、融合主色调。 点睛色 在小范围内点上强烈的颜色来突出主题效果，使界面更加鲜明生动。49动动脑动动脑50颜色心理学颜色心理学 暖色 红、黄 眼睛更敏感，点缀 RGB配色中用于给颜色“加热” 冷色 蓝 大块使用才有效果 配色中给颜色“降温”51从图片中提取色调从图片中提取色调52动起来动起来 myPantone 取色配色软件 GIMP/美图秀秀/mypaint 图片处理软件 实践作业： 上网找出10个你最喜欢的海报、PPT、网站，指出它们分别采用了怎样的配色设计。53视错觉 人们总会夸大水

14、平线而缩短垂直线。 影响到显示页面的对称性。 人们经常把对称页面的中心看得稍微偏上些。如果页面以实际中心为基准排版设计，人们就会感到页面上部比下部分要短，影响视觉效果。54黄金分割之美黄金分割之美 植物叶子中的黄金分割55黄金分割的设计黄金分割的设计 著名画作最后的晚餐56黄金分割的设计黄金分割的设计 LOGO和界面设计57黄金分割实践黄金分割实践 移动网页设计和电脑网页设计5859版式设计一般原则版式设计一般原则 亲密性 彼此相关的项应当形成一个视觉单元，实现组织性。 对齐 每个元素都应与页面上另一个元素有某种视觉联系。 重复 统一并增强视觉效果。 对比 避免页面上元素太过相似。60亲密性亲

15、密性 分类整理，得到一个清晰明了的结构。 页面留白设计6162“亲密性亲密性”原则的根本目的原则的根本目的 实现组织性。更容易阅读和记忆，使空白更美观。63 实现方法n 如何实现 眯起眼睛，统计眼睛停顿的次数，控制在不超过3-5个；n 要点 不要仅仅因为有空白就把元素放在角落或者中央； 不要在元素之间留同样大小空白，除非属同一子集； 在有很近亲密性的元素间建立关系；不属于一组的元素要分开。64对齐对齐 前面主要体现差异性，对齐则体现统一性。65灵活的对齐灵活的对齐 特别之处66表单对齐表单对齐67表单对齐表单对齐68实现方法实现方法 每个元素都能找到与之对齐的元素。 左对齐、右对齐、居中对齐、

16、两端对齐 两端对齐：每行长度一致 可以试着有意识的去打破这个规则 要避免的问题 不要用混合对齐，就是用了右对齐就别用居中了。 居中对齐可能导致视线的跳跃性太大。他是源自欧洲的百年品牌他起步于纯粹的机械工业他的血液里融会了关爱与责任他饱经磨砺却风采依旧 他没有大多数后起之辈的张扬与高调，却有着自己独特的稳重与深邃 他的历史也是汽车制造业的历史这就是Skoda6月6月1日6月10日6月15日6月20日6月30日2011年度新生篮球赛2011研究生篮球对抗赛篮球校队集训教师运动会多人多足竞走比赛体育部户外拓展运动国家电网在建项目建设项目四基地两中心800千伏特高压直流输电工程660Kv直流输电工程运

17、行项目800千伏高压直流电示范工程特高压交流试验示范工程输变电示范工程计划项目500千伏输变电工程特高压交流输电示范工程500千伏输变电工程项目促销策略促销策略事件营销事件营销互联网软文，微博，视频配合震区模拟演习提供产品免费试用共青团委，教育局整合事件营销电台热线问答+微访谈+优惠促销合作单位新闻报道推广传统媒体73重复原则重复原则 提高整体一致性。这是同一本书的两页吗？74实践技巧实践技巧 重复的对象 字体、字号、颜色、形状、图案、版式等。 如何开始 背景中创造一个图案然后重复应用 重要信息处使用重复的元素，以引导观众视线 高度的一致性很有可能会呆板无趣。 同样的字体及字号，可以使用不同的

18、颜色；同样的形状，可以使用不同的大小。75动动脑动动脑 有使用重复吗？76n一致的网站标志和导航栏 它们可以说是最体现网站特征的部分。应该对LOGO的颜色、大小、位置等方面都有严格的说明。如果一个网站里面每个网页的LOGO都大小不同，或者位置不统一，或者导航栏在某些页面突然多出两个子选项，给浏览者的感觉一定很不好。77n一致的页面布局 这可以说是一种“包装”。如果某些页面的等级是一致的，那么它们的“包装”风格也应是一致的，用户应该使用同样的浏览方式来阅读这些网页。78n一致，但不要高度一致79实践思路实践思路 可不可以专门做一个图片设计，并且将某些一致元素（如标题）作为这个图片设计的一部分？

19、在每个页面底部或每个标题下面使用一条粗细为1点的线吗？或者是不是使用一条更粗的线（4点），使重复元素显得更明显，更生动？ 有没有可能增加一些纯粹为建立重复而设计的元素。是不是有一个编号项列表？可不可以使用另外一种字体或逆序数字，然后对出版物中的每一个编号列表都重复同样的处理？80对比原则对比原则 增强页面的效果和组织性 平静的海面上有个小岛之类的，吸引住视觉焦点。 对比要强烈！字号、加粗、空间、颜色。81版式设计小结版式设计小结 不要害怕留白，这能让眼睛稍作休息。 不要害怕不对称，不居中往往能使效果更强烈。 不要害怕把字体设置得非常大或非常小。 “借取”其他理念，寻找灵感。 如果你在设计一个传

20、单，可以先找一份你确实非常喜欢的传单，采用它的布局。 找一个你喜欢的企业名片，把它调整为你自己的名片。82阅读阅读 分三个阶段 页面上文字的形状被人眼感知， 文字被编码成相关的内部语言表示， 语言在人脑中被解释成有语法和语义的单词或句子。 每分钟平均阅读350字 影响因素 大写字母、字体 白底黑字比黑底白字要好！83文字的可用性文字的可用性 视觉元素 vs. 文字 实时跟踪用户浏览屏幕时的视觉路径测试中发现：文字通常是用户寻找的第一个目标。 用户对网页的意见反馈：集中在文字方面 有好文字，才有好设计 大多数人试图逃避阅读 “看到有错误信息吗？”“我怎么知道？我把它点跑了。” 当用户点击OK时

21、12%用户看了文字，23%出于习惯，42%只想清除。表单设计表单设计 表单往往是文字最多的部分 横亘在用户和他（她）的目标面前 没有人喜欢填写表单 改进表单 表单完成率可提高10%40%84眼动跟踪眼动跟踪（Eye-Gaze Tracking） 早期的视线跟踪技术首先应用于心理学研究、助残等领域，后来被应用于图像压缩及人机交互技术。 视线跟踪技术有强迫式与非强迫式、穿戴式与非穿戴式、接触式与非接触式之分。 视线追踪主要用于军事领域（如飞行员观察记录），阅读及帮助残疾人通信等。 1.眼动的主要形式 眼动有三种主要形式(在人机交互中，眼动跟踪主要利用跳动和注视: 跳动（Saccades） 在正常的

22、视觉观察过程中，眼动表现为在一系列被观察目标上的停留及在这些停留点之间的飞速跳跃。 在注视点之间的飞速跳跃称为眼跳动。 注视（Fixations） 停留时间至少持续100ms以上的称为注视。在注视中，眼也不是绝对静止不动，会有微小运动，但大小一般不会超过1视角。 绝大多数信息只有在注视时才能获得并进行加工。 平滑尾随跟踪（Smooth Pursuit） 缓慢、联合追踪的眼动通常称为平滑尾随跟踪。 2.眼动跟踪的基本要求 在人机交互中眼动跟踪技术必须满足以下几点要求，才能满足实际需求： 不能妨碍视野。 不要与用户接触，对用户基本无干扰。 精度要高。 动态范围要从1弧分（六十分之一弧度）到45。

23、反映速度要快，实时响应。 能与获取的身体和头部运动相配合。 定位校正简单。 可作为计算机的标准外设。 3.一个眼动跟踪系统示例一个眼动跟踪系统示例图 3-14 眼动跟踪系统眼动跟踪系统眼动跟踪系统工作原理工作原理 首先，用四个L形的红外线发光器，在眼睛里产生一些亮点；然后利用一个广角摄像头获取脸部图像，快速确定眼睛的位置，再利用一个视野较小，分辨率较高的摄像头拍摄眼睛的高分辨率图像；最后，分析眼睛的图像,计算瞳孔中心和亮点的位置，通过计算瞳孔中心和亮点确定的矢量，确定视线方向。眼动跟踪用于主动人机交互眼动跟踪用于主动人机交互 与视觉有关的人机交互自始至终都离不开视线的控制。 眼动跟踪人机交互方

24、式允许用户仅仅通过凝视的手段来控制计算机选择物体。 如果能通过视线的用户盯着感兴趣的目标，计算机便“自动”将光标置于其上，人机交互将更为直接，也省去了上述交互过程中的大部分步骤。4.米达斯接触问题与解决方法米达斯接触问题与解决方法 “米达斯接触（Midas Touch）”问题 如果鼠标器光标总是随着用户的视线移动，可能会引起用户的厌烦，因为用户可能希望能随便看着什么而不必非“意味着”什么，更不希望每次转移视线都可能启动一条计算机命令。 避免“米达斯接触”问题的方法：在理想情况下，应当在用户希望发出控制时，界面及时地处理其视输入，而在相反的情况下则忽略其视线的移动。 可采用其他通道（如键盘或语音

25、）进行配合。92听觉听觉 听觉可以捕捉各个方向的信息听觉可以感知大量的信息，但被视觉关注掩盖了许多。 范围 20Hz20kHz，播放设备一般为60Hz20k赫兹 超过140dB时，所引起的不再是听觉而是痛觉。 敏感区 1000Hz4000Hz 500Hz以下和5000Hz以上的声音，强度很大时才能被听到，可辨认的语音频率范围是2605600Hz。93听觉原理听觉原理 音频超过140dB时，所引起的不再是听觉而是痛觉。94疲劳和压力之下疲劳和压力之下 这是我第二次写这个部分了。 我写文章使用的文字处理器是基于菜单的，“保存”和“关闭”选项是相邻放在文件菜单中。我不小心就选择了“关闭”而不是“保存

26、”。 “关闭”选项会弹出一个确认框，确认你是真的放弃保存而直接退出。 遗憾的是：“保存”选项也有一个相似的确认框。 在点击确认框中的“确认”后我才注意到确认框标题的“关闭”字样95疲劳的神经生理模型疲劳的神经生理模型96疲劳（疲劳（Fatigue） 注意失调 分散、游移不定 感觉失调 不停歇地长时间读书，视线会模糊 动觉紊乱 动作节律失调、缓慢、不准确或者忙乱。 记忆和思维故障 逻辑、计算混乱 意志衰退97人机交互启示人机交互启示 长时间连续任务之间有适当休息时间。 避免单调乏味、无刺激性的任务，提高休息间隙。 避免强刺激、强噪音，以免感官负荷导致疲劳。 提高敏感操作的注意程度，避免失误。98再见！再见！