手机平台应用开发.ppt

《手机平台应用开发.ppt》由会员分享，可在线阅读，更多相关《手机平台应用开发.ppt（98页珍藏版）》请在三一文库上搜索。

1、手机平台应用开发 交互设计补充,教师：金星 Tel ：18971142771,2,内容,用户研究和设计 用户研究 线框图 视觉感知 色觉理论 配色理论 实践 版式设计,“AJAX之父”Jesse James Garrett，2000 以用户为中心的Web设计流程 用户体验的要素 框架层 按钮、表格、照片和文本区域的位置。,用户体验工程模型,用户研究,用户是什么？ 亨利福特：如果我直接问人们需要什么，回答很可能是：“一匹更快的马”。 绝大部分人不是产品设计师 用户只会满足于比现有好一点,用户倾向于,用户只会用到20%左右的软件功能 但是往往希望有某些额外功能 用户只会使用一种操作模式 很少提升他

2、们的技能 养成了自己对软件工作原理的理解 为什么电脑这么慢？ 如何找到用户的真实需求？,例：场景融入,一个寻找餐馆的手机软件 让我看看，附近有什么餐馆？好，有7家。其中两家是快餐店，就不考虑了，2家炒菜，还行，2家提供烧烤，不健康，1家西餐，半成品做的。 现在是晚上11点，还开业吗？它们消费水平高吗？ 排名，我需要它们的排名和评论。 小A说这家服务态度好，他的评论可靠吗？4.5星级的，姑且相信吧！ 我是不是需要一个方向指示，或是一张地图？,用例之后：线框图,界面轮廓 3R法则 Requirement Reduction Regularity 乔希 威廉姆斯 75%的设计是在写html之前纸上勾

3、勒。,去掉一般性功能,每个新增功能意味着 更多的帮助文档、学习、理解和确认 更多的自定义选项 更多的犯错可能 奶牛规则 成熟：9.0版本 已有用户群体的制约 不爱改变,非必要性测试,降低软件中的噪音 我的软件主要是用来支持什么情境的？ 如果这个软件不存在，我想创建一个最简解决方法，是什么？ 从头重新创建上面的软件需要多长时间？ 60秒法则 这个项目周期已经缩短一半 面见客户前我们还有60秒决定保留哪些东西、舍弃哪些东西。,案例：提升45%购买人数,表单内容 出现时机,10,表单上的可用性研究,11,12,少用一些文字,不是警告，而是允许撤销。 智能处理，而非警告。 如浏览器地址栏，自动搜索。

4、不要为一个界面附加大段说明性文字。 如果无可避免 保证每个按钮都有特定的标签,13,人们通常不会逐字逐句阅读,使用对用户有用的词汇 每段只阐明一个主旨 各段主旨置于首句 概括性标题 加亮关键词 使用项目符号列表 简短、日常化的文字 不要过度考虑一致性，不要使用企业口吻，语气不要居高临下。,14,图片代替叙述,请在菜单栏点击“编辑”，然后出现编辑子菜单，再点击“全选”。 哪种更简洁？,15,测试文字,填空测验 从产品界面文字中选出长125150字的内容片段 五个词之间留一个空 测试者补上缺失的词 结果分析： 若正确率小于40%，则重新撰写。 若高于60%，则可用。,界面诊断邮件管理,17,人的感

5、知,视觉 80%的信息 听觉 仅次于视觉 触觉 不可低估，尤其对有能力缺陷的人，是至关重要的 其他感觉,18,视觉感知过程,受到外部刺激接收信息阶段 物理特性决定了人类无法看到某些事物 解释信息阶段 对不完全信息发挥一定的想象力 但也可能有错觉,19,20,两种神经细胞,21,比较,22,视角,23,视敏度（Visual Acuity）,人眼对细节的感知能力，通常用被辨别物体最小间距所对应的视角的倒数表示。 最佳状况：在6M处辨认出20毫米高的字母。 一般：辨认出40毫米高的字母。,24,亮度,增强亮度可以提高视敏度 亮度增加，闪烁感也会增强。 低于50Hz，视觉系统就会感到闪烁 在设计交互界

6、面时，要考虑使用者对亮度和闪烁的感知，尽量避免使人疲劳的因素。,25,层次感：相对距离和深度,覆盖关系 大小比例 对物体的熟悉度 产生预期，影响对大小、远近的判断。,26,色散实验,27,色彩,人能感觉到不同的颜色，这是眼睛接受不同波长的光的结果。 色度、强度和饱和度。 正常的眼睛可感受到的光谱波长为390纳米-770纳米。 实际上，是不同锥细胞的综合感觉。,28,视锥细胞的“三原色”,445nm 接近蓝色,535nm 接近绿色,575nm 接近黄色,29,色觉抵消机制,七色板 色彩抵消，亮度不抵消。 颜色混合的原理 颜色是3组视信号的差异造成的。 红色 + 绿色 = 黄色 黄色 + 蓝色 =

7、 白色 蓝色 + 红色 = 紫色 颜色对比现象,30,色相空间,色相，也称色调 ( Hue ) 颜色的首要属性，借以用名称来区别红、黄、绿、蓝等各种颜色。 自我测评：你能分辨出多少种不同的色调？ 人的眼睛可以 分辨出约180种不同色相的颜色。 色轮：圆形的色图 牛顿经典棱镜实验的一部分 红、橙、黄、绿、蓝、紫 等量混合出相间色，成十二基本色相。,31,“三原色”(Primary Color),小学时学过的基本原色： “红黄产生橘黄色，黄色和蓝色变成绿色，蓝色和红色成为紫色”。 事实上，红，黄，蓝只能混合出一个较小的色域。 非原色标准的原色集合 橙，绿，紫：彩色摄影法Autochrome（190

8、3） C（Cyan，青），M（Magenta，品红） Y（Yellow，黄）。,我才能混合出 广的色域呢！,32,“三原色”：加色与减色,33,三原色色轮,红,黄,蓝,间色,Secondary color,Primary color,第三色,Tertiary color,34,连续的色轮,35,色轮：加色 vs. 减色,RGB,CMYK,36,两色搭配是用色的基础,有了白色，红色更注目； 有了红色，白色更干净。,有了黑色，红色更热情； 有了红色，黑色更庄重。,无彩色：黑，白，灰,红色：燃烧，燥热，刺眼 白色：焦点,37,互补色,色轮上相对的颜色 红绿，蓝橙，黄紫 色彩之间强烈对比在高纯度的情况

9、下，会引起色彩的颤动和不稳定感，正式设计中比较少见。 一种做主色，另一种做小范围强调色。,38,三色组,彼此等距的三种颜色 红、黄、蓝 紫、橙、绿 比较协调 但一定要选出一种色彩作为主色，另外两种作为辅助色。,39,分裂互补三色组,互补色两侧的颜色 对比依然非常强烈 不会像互补色搭配那样产生颤抖和不安的感觉。 对初学者来说，这是种非常好用的搭配。,40,类似色,彼此相邻的颜色 近似色搭配常常在自然中被找到，所以对眼睛来说，是最舒适的搭配方式。,颜色+灰色=亮度。,41,配色器,42,亮色和暗色,Brightness ( Value ) 亮色 向纯色增加白色 暗色 向纯色增加黑色,暗色,亮色,H

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

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

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

13、,61,62,“亲密性”原则的根本目的,实现组织性。更容易阅读和记忆，使空白更美观。,63,实现方法,如何实现 眯起眼睛，统计眼睛停顿的次数，控制在不超过3-5个； 要点 不要仅仅因为有空白就把元素放在角落或者中央； 不要在元素之间留同样大小空白，除非属同一子集； 在有很近亲密性的元素间建立关系； 不属于一组的元素要分开。,64,对齐,前面主要体现差异性，对齐则体现统一性。,65,灵活的对齐,特别之处,66,表单对齐,67,表单对齐,68,实现方法,每个元素都能找到与之对齐的元素。 左对齐、右对齐、居中对齐、两端对齐 两端对齐：每行长度一致 可以试着有意识的去打破这个规则 要避免的问题 不要用

14、混合对齐，就是用了右对齐就别用居中了。 居中对齐可能导致视线的跳跃性太大。,国家电网在建项目,促销策略事件营销,73,重复原则,提高整体一致性。这是同一本书的两页吗？,74,实践技巧,重复的对象 字体、字号、颜色、形状、图案、版式等。 如何开始 背景中创造一个图案然后重复应用 重要信息处使用重复的元素，以引导观众视线 高度的一致性很有可能会呆板无趣。 同样的字体及字号，可以使用不同的颜色；同样的形状，可以使用不同的大小。,75,动动脑,有使用重复吗？,76,一致的网站标志和导航栏,它们可以说是最体现网站特征的部分。应该对LOGO的颜色、大小、位置等方面都有严格的说明。如果一个网站里面每个网页的

15、LOGO都大小不同，或者位置不统一，或者导航栏在某些页面突然多出两个子选项，给浏览者的感觉一定很不好。,77,一致的页面布局,这可以说是一种“包装”。如果某些页面的等级是一致的，那么它们的“包装”风格也应是一致的，用户应该使用同样的浏览方式来阅读这些网页。,78,一致，但不要高度一致,79,实践思路,可不可以专门做一个图片设计，并且将某些一致元素（如标题）作为这个图片设计的一部分？ 在每个页面底部或每个标题下面使用一条粗细为1点的线吗？或者是不是使用一条更粗的线（4点），使重复元素显得更明显，更生动？ 有没有可能增加一些纯粹为建立重复而设计的元素。是不是有一个编号项列表？可不可以使用另外一种字

16、体或逆序数字，然后对出版物中的每一个编号列表都重复同样的处理？,80,对比原则,增强页面的效果和组织性 平静的海面上有个小岛之类的，吸引住视觉焦点。 对比要强烈！字号、加粗、空间、颜色。,81,版式设计小结,不要害怕留白，这能让眼睛稍作休息。 不要害怕不对称，不居中往往能使效果更强烈。 不要害怕把字体设置得非常大或非常小。 “借取”其他理念，寻找灵感。 如果你在设计一个传单，可以先找一份你确实非常喜欢的传单，采用它的布局。 找一个你喜欢的企业名片，把它调整为你自己的名片。,82,阅读,分三个阶段 页面上文字的形状被人眼感知， 文字被编码成相关的内部语言表示， 语言在人脑中被解释成有语法和语义的

17、单词或句子。 每分钟平均阅读350字 影响因素 大写字母、字体 白底黑字比黑底白字要好！,83,文字的可用性,视觉元素 vs. 文字 实时跟踪用户浏览屏幕时的视觉路径测试中发现：文字通常是用户寻找的第一个目标。 用户对网页的意见反馈：集中在文字方面 有好文字，才有好设计 大多数人试图逃避阅读 “看到有错误信息吗？”“我怎么知道？我把它点跑了。” 当用户点击OK时 12%用户看了文字，23%出于习惯，42%只想清除。,表单设计,表单往往是文字最多的部分 横亘在用户和他（她）的目标面前 没有人喜欢填写表单 改进表单 表单完成率可提高10%40%,84,眼动跟踪（Eye-Gaze Tracking）

18、,早期的视线跟踪技术首先应用于心理学研究、助残等领域，后来被应用于图像压缩及人机交互技术。 视线跟踪技术有强迫式与非强迫式、穿戴式与非穿戴式、接触式与非接触式之分。 视线追踪主要用于军事领域（如飞行员观察记录），阅读及帮助残疾人通信等。,1.眼动的主要形式,眼动有三种主要形式(在人机交互中，眼动跟踪主要利用跳动和注视: 跳动（Saccades） 在正常的视觉观察过程中，眼动表现为在一系列被观察目标上的停留及在这些停留点之间的飞速跳跃。 在注视点之间的飞速跳跃称为眼跳动。 注视（Fixations） 停留时间至少持续100ms以上的称为注视。在注视中，眼也不是绝对静止不动，会有微小运动，但大小一

19、般不会超过1视角。 绝大多数信息只有在注视时才能获得并进行加工。 平滑尾随跟踪（Smooth Pursuit） 缓慢、联合追踪的眼动通常称为平滑尾随跟踪。,2.眼动跟踪的基本要求,在人机交互中眼动跟踪技术必须满足以下几点要求，才能满足实际需求： 不能妨碍视野。 不要与用户接触，对用户基本无干扰。 精度要高。 动态范围要从1弧分（六十分之一弧度）到45。 反映速度要快，实时响应。 能与获取的身体和头部运动相配合。 定位校正简单。 可作为计算机的标准外设。,3.一个眼动跟踪系统示例,图 3-14 眼动跟踪系统,眼动跟踪系统工作原理,首先，用四个L形的红外线发光器，在眼睛里产生一些亮点；然后利用一个

20、广角摄像头获取脸部图像，快速确定眼睛的位置，再利用一个视野较小，分辨率较高的摄像头拍摄眼睛的高分辨率图像；最后，分析眼睛的图像,计算瞳孔中心和亮点的位置，通过计算瞳孔中心和亮点确定的矢量，确定视线方向。,眼动跟踪用于主动人机交互,与视觉有关的人机交互自始至终都离不开视线的控制。 眼动跟踪人机交互方式允许用户仅仅通过凝视的手段来控制计算机选择物体。 如果能通过视线的用户盯着感兴趣的目标，计算机便“自动”将光标置于其上，人机交互将更为直接，也省去了上述交互过程中的大部分步骤。,4.米达斯接触问题与解决方法,“米达斯接触（Midas Touch）”问题 如果鼠标器光标总是随着用户的视线移动，可能会引

21、起用户的厌烦，因为用户可能希望能随便看着什么而不必非“意味着”什么，更不希望每次转移视线都可能启动一条计算机命令。 避免“米达斯接触”问题的方法：在理想情况下，应当在用户希望发出控制时，界面及时地处理其视输入，而在相反的情况下则忽略其视线的移动。 可采用其他通道（如键盘或语音）进行配合。,92,听觉,听觉可以捕捉各个方向的信息 听觉可以感知大量的信息，但被视觉关注掩盖了许多。 范围 20Hz20kHz，播放设备一般为60Hz20k赫兹 超过140dB时，所引起的不再是听觉而是痛觉。 敏感区 1000Hz4000Hz 500Hz以下和5000Hz以上的声音，强度很大时才能被听到，可辨认的语音频率

22、范围是2605600Hz。,93,听觉原理,音频超过140dB时，所引起的不再是听觉而是痛觉。,94,疲劳和压力之下,这是我第二次写这个部分了。 我写文章使用的文字处理器是基于菜单的，“保存”和“关闭”选项是相邻放在文件菜单中。我不小心就选择了“关闭”而不是“保存”。 “关闭”选项会弹出一个确认框，确认你是真的放弃保存而直接退出。 遗憾的是：“保存”选项也有一个相似的确认框。 在点击确认框中的“确认”后我才注意到确认框标题的“关闭”字样,95,疲劳的神经生理模型,96,疲劳（Fatigue）,注意失调 分散、游移不定 感觉失调 不停歇地长时间读书，视线会模糊 动觉紊乱 动作节律失调、缓慢、不准确或者忙乱。 记忆和思维故障 逻辑、计算混乱 意志衰退,97,人机交互启示,长时间连续任务之间有适当休息时间。 避免单调乏味、无刺激性的任务，提高休息间隙。 避免强刺激、强噪音，以免感官负荷导致疲劳。 提高敏感操作的注意程度，避免失误。,98,再见！,