《手机平台应用开发》PPT课件

《《手机平台应用开发》PPT课件》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

手机平台应用开发——交互设计补充教师：金星Tel：18971142771

12内容用户研究和设计用户研究线框图视觉感知色觉理论配色理论实践版式设计2整理ppt

2“AJAX之父”JesseJamesGarrett，2000以用户为中心的Web设计流程用户体验的要素框架层按钮、表格、照片和文本区域的位置。用户体验工程模型3整理ppt

3用户研究用户是什么？亨利福特：如果我直接问人们需要什么，回答很可能是：“一匹更快的马”。绝大部分人不是产品设计师用户只会满足于比现有好一点4整理ppt

4用户倾向于用户只会用到20%左右的软件功能但是往往希望有某些额外功能用户只会使用一种操作模式很少提升他们的技能养成了自己对软件工作原理的理解为什么电脑这么慢？如何找到用户的真实需求？5整理ppt

5例：场景融入一个寻找餐馆的手机软件让我看看，附近有什么餐馆？好，有7家。其中两家是快餐店，就不考虑了，2家炒菜，还行，2家提供烧烤，不健康，1家西餐，半成品做的。现在是晚上11点，还开业吗？它们消费水平高吗？排名，我需要它们的排名和评论。小A说这家服务态度好，他的评论可靠吗？4.5星级的，姑且相信吧！我是不是需要一个方向指示，或是一张地图？6整理ppt

6用例之后：线框图界面轮廓3R法则RequirementReductionRegularity乔希威廉姆斯75%的设计是在写html之前纸上勾勒。7整理ppt

7去掉一般性功能每个新增功能意味着更多的帮助文档、学习、理解和确认更多的自定义选项更多的犯错可能奶牛规则成熟：9.0版本已有用户群体的制约不爱改变时间目标市场成本8整理ppt

8非必要性测试降低软件中的噪音我的软件主要是用来支持什么情境的？如果这个软件不存在，我想创建一个最简解决方法，是什么？从头重新创建上面的软件需要多长时间？60秒法则这个项目周期已经缩短一半面见客户前我们还有60秒决定保留哪些东西、舍弃哪些东西。9整理ppt

9案例：提升45%购买人数表单内容出现时机10删除文件取消购买前登录登录注册电子邮箱密码忘记了密码？10整理ppt

10表单上的可用性研究1111整理ppt

1112少用一些文字不是警告，而是允许撤销。智能处理，而非警告。如浏览器地址栏，自动搜索。不要为一个界面附加大段说明性文字。如果无可避免……保证每个按钮都有特定的标签确认框删除文件取消你要删除文件吗？确认取消12整理ppt

1213人们通常不会逐字逐句阅读使用对用户有用的词汇每段只阐明一个主旨各段主旨置于首句概括性标题加亮关键词使用项目符号列表简短、日常化的文字不要过度考虑一致性，不要使用企业口吻，语气不要居高临下。13整理ppt

1314图片代替叙述请在菜单栏点击“编辑”，然后出现编辑子菜单，再点击“全选”。哪种更简洁？14整理ppt

1415测试文字填空测验从产品界面文字中选出长125——150字的内容片段五个词之间留一个空测试者补上缺失的词结果分析：若正确率小于40%，则重新撰写。若高于60%，则可用。15整理ppt

15界面诊断——邮件管理16整理ppt

1617人的感知视觉80%的信息听觉仅次于视觉触觉不可低估，尤其对有能力缺陷的人，是至关重要的其他感觉17整理ppt

1718视觉感知过程受到外部刺激接收信息阶段物理特性决定了人类无法看到某些事物解释信息阶段对不完全信息发挥一定的想象力但也可能有错觉18整理ppt

181919整理ppt

1920两种神经细胞20整理ppt

2021比较视干细胞视锥细胞在低水平照明时（如夜间）起作用在高水平照明时（如白天）起作用区别黑白445/535/575nm，综合对光谱中绿色最敏感，视网膜外围处最多对550nm黄绿最敏感，视网膜中部最多对极弱的刺激敏感主要在识别空间位置和要求敏锐地看物体时起作用21整理ppt

2122视角22整理ppt

2223视敏度（VisualAcuity）人眼对细节的感知能力，通常用被辨别物体最小间距所对应的视角的倒数表示。最佳状况：在6M处辨认出20毫米高的字母。一般：辨认出40毫米高的字母。23整理ppt

2324亮度增强亮度可以提高视敏度亮度增加，闪烁感也会增强。低于50Hz，视觉系统就会感到闪烁在设计交互界面时，要考虑使用者对亮度和闪烁的感知，尽量避免使人疲劳的因素。24整理ppt

2425层次感：相对距离和深度覆盖关系大小比例对物体的熟悉度产生预期，影响对大小、远近的判断。25整理ppt

2526色散实验26整理ppt

2627色彩人能感觉到不同的颜色，这是眼睛接受不同波长的光的结果。色度、强度和饱和度。正常的眼睛可感受到的光谱波长为390纳米-770纳米。实际上，是不同锥细胞的综合感觉。27整理ppt

2728视锥细胞的“三原色”445nm接近蓝色535nm接近绿色575nm接近黄色28整理ppt

2829色觉抵消机制七色板色彩抵消，亮度不抵消。颜色混合的原理颜色是3组视信号的差异造成的。红色+绿色=黄色黄色+蓝色=白色蓝色+红色=紫色颜色对比现象29整理ppt

2930色相空间色相，也称色调(Hue)颜色的首要属性，借以用名称来区别红、黄、绿、蓝等各种颜色。自我测评：你能分辨出多少种不同的色调？人的眼睛可以分辨出约180种不同色相的颜色。色轮：圆形的色图牛顿经典棱镜实验的一部分红、橙、黄、绿、蓝、紫等量混合出相间色，成十二基本色相。30整理ppt

3031“三原色”(PrimaryColor)小学时学过的基本原色：“红黄产生橘黄色，黄色和蓝色变成绿色，蓝色和红色成为紫色”。事实上，红，黄，蓝只能混合出一个较小的色域。非原色标准的原色集合橙，绿，紫：彩色摄影法Autochrome（1903）C（Cyan，青），M（Magenta，品红）Y（Yellow，黄）。我才能混合出广的色域呢！31整理ppt

3132“三原色”：加色与减色32整理ppt

3233三原色色轮红黄蓝间色SecondarycolorPrimarycolor第三色Tertiarycolor33整理ppt

3334连续的色轮34整理ppt

3435色轮：加色vs.减色RGBCMYK35整理ppt

3536两色搭配是用色的基础有了白色，红色更注目；有了红色，白色更干净。有了黑色，红色更热情；有了红色，黑色更庄重。无彩色：黑，白，灰红色：燃烧，燥热，刺眼白色：焦点36整理ppt

3637互补色色轮上相对的颜色红绿，蓝橙，黄紫色彩之间强烈对比在高纯度的情况下，会引起色彩的颤动和不稳定感，正式设计中比较少见。一种做主色，另一种做小范围强调色。37整理ppt

3738三色组彼此等距的三种颜色红、黄、蓝紫、橙、绿比较协调但一定要选出一种色彩作为主色，另外两种作为辅助色。38整理ppt

3839分裂互补三色组互补色两侧的颜色对比依然非常强烈不会像互补色搭配那样产生颤抖和不安的感觉。对初学者来说，这是种非常好用的搭配。39整理ppt

3940类似色彼此相邻的颜色近似色搭配常常在自然中被找到，所以对眼睛来说，是最舒适的搭配方式。颜色+灰色=亮度。40整理ppt

4041配色器41整理ppt

4142亮色和暗色Brightness(Value)亮色向纯色增加白色暗色向纯色增加黑色暗色亮色42整理ppt

42HSV模型:色调饱和度亮度画家:加白色改变颜色浓度加黑色改变颜色深度43整理ppt

4344纯度和方形调色板纯度颜色鲜艳度、饱和度。保持亮度相同时，颜色相对灰色的所占比例。HSV模型用户颜色模型，A.R.Smith在1978年创建。HueSaturationValue方形调色板横看亮度不变竖看纯度不变44整理ppt

4445亮度界面高亮度雅致刺激少45整理ppt

4546亮色和暗色：改进界面色质明暗度、深浅度或色调。色质过于接近时影响界面对比度。加强色质差别加强明暗对比使用阴影46整理ppt

4647高纯度设计强烈艳丽对视觉刺激是迅速的，醒目的效果不易于长时间的观看47整理ppt

4748界面色调理论界面色调：界面中色彩总的趋向。主色调主要色调，其他配色不能超过该主要色调的视觉面积。辅色调仅次与主色调的视觉面积，烘托、融合主色调。点睛色在小范围内点上强烈的颜色来突出主题效果，使界面更加鲜明生动。48整理ppt

4849动动脑49整理ppt

4950颜色心理学暖色红、黄眼睛更敏感，点缀RGB配色中用于给颜色“加热”冷色蓝大块使用才有效果配色中给颜色“降温”50整理ppt

5051从图片中提取色调51整理ppt

5152动起来myPantone取色配色软件GIMP/美图秀秀/mypaint图片处理软件实践作业：上网找出10个你最喜欢的海报、PPT、网站，指出它们分别采用了怎样的配色设计。52整理ppt

5253视错觉人们总会夸大水平线而缩短垂直线。影响到显示页面的对称性。人们经常把对称页面的中心看得稍微偏上些。如果页面以实际中心为基准排版设计，人们就会感到页面上部比下部分要短，影响视觉效果。53整理ppt

5354黄金分割之美植物叶子中的黄金分割54整理ppt

5455黄金分割的设计著名画作《最后的晚餐》55整理ppt

5556黄金分割的设计LOGO和界面设计56整理ppt

5657黄金分割实践移动网页设计和电脑网页设计57整理ppt

575858整理ppt

5859版式设计一般原则亲密性彼此相关的项应当形成一个视觉单元，实现组织性。对齐每个元素都应与页面上另一个元素有某种视觉联系。重复统一并增强视觉效果。对比避免页面上元素太过相似。59整理ppt

5960亲密性分类整理，得到一个清晰明了的结构。页面留白设计60整理ppt

606161整理ppt

6162“亲密性”原则的根本目的实现组织性。更容易阅读和记忆，使空白更美观。62整理ppt

6263实现方法如何实现眯起眼睛，统计眼睛停顿的次数，控制在不超过3-5个；要点不要仅仅因为有空白就把元素放在角落或者中央；不要在元素之间留同样大小空白，除非属同一子集；在有很近亲密性的元素间建立关系；不属于一组的元素要分开。‘63整理ppt

6364对齐前面主要体现差异性，对齐则体现统一性。64整理ppt

6465灵活的对齐特别之处65整理ppt

6566表单对齐66整理ppt

6667表单对齐67整理ppt

6768实现方法每个元素都能找到与之对齐的元素。左对齐、右对齐、居中对齐、两端对齐两端对齐：每行长度一致可以试着有意识的去打破这个规则要避免的问题不要用混合对齐，就是用了右对齐就别用居中了。居中对齐可能导致视线的跳跃性太大。68整理ppt

6869整理ppt

6970整理ppt

70国家电网在建项目71整理ppt

71促销策略—事件营销72整理ppt

7273重复原则提高整体一致性。这是同一本书的两页吗？73整理ppt

7374实践技巧重复的对象字体、字号、颜色、形状、图案、版式等。如何开始背景中创造一个图案然后重复应用重要信息处使用重复的元素，以引导观众视线高度的一致性很有可能会呆板无趣。同样的字体及字号，可以使用不同的颜色；同样的形状，可以使用不同的大小。74整理ppt

7475动动脑有使用重复吗？75整理ppt

7576一致的网站标志和导航栏‘它们可以说是最体现网站特征的部分。应该对LOGO的颜色、大小、位置等方面都有严格的说明。如果一个网站里面每个网页的LOGO都大小不同，或者位置不统一，或者导航栏在某些页面突然多出两个子选项，给浏览者的感觉一定很不好。76整理ppt

7677一致的页面布局这可以说是一种“包装”。如果某些页面的等级是一致的，那么它们的“包装”风格也应是一致的，用户应该使用同样的浏览方式来阅读这些网页。‘77整理ppt

7778一致，但不要高度一致‘78整理ppt

7879实践思路可不可以专门做一个图片设计，并且将某些一致元素（如标题）作为这个图片设计的一部分？在每个页面底部或每个标题下面使用一条粗细为1点的线吗？或者是不是使用一条更粗的线（4点），使重复元素显得更明显，更生动？有没有可能增加一些纯粹为建立重复而设计的元素。是不是有一个编号项列表？可不可以使用另外一种字体或逆序数字，然后对出版物中的每一个编号列表都重复同样的处理？79整理ppt

7980对比原则增强页面的效果和组织性平静的海面上有个小岛之类的，吸引住视觉焦点。对比要强烈！字号、加粗、空间、颜色。80整理ppt

8081版式设计小结不要害怕留白，这能让眼睛稍作休息。不要害怕不对称，不居中往往能使效果更强烈。不要害怕把字体设置得非常大或非常小。“借取”其他理念，寻找灵感。如果你在设计一个传单，可以先找一份你确实非常喜欢的传单，采用它的布局。找一个你喜欢的企业名片，把它调整为你自己的名片。81整理ppt

8182阅读分三个阶段页面上文字的形状被人眼感知，文字被编码成相关的内部语言表示，语言在人脑中被解释成有语法和语义的单词或句子。每分钟平均阅读350字影响因素大写字母、字体白底黑字比黑底白字要好！82整理ppt

8283文字的可用性视觉元素vs.文字实时跟踪用户浏览屏幕时的视觉路径测试中发现：文字通常是用户寻找的第一个目标。用户对网页的意见反馈：集中在文字方面有好文字，才有好设计大多数人试图逃避阅读“看到有错误信息吗？”“我怎么知道？我把它点跑了。”当用户点击OK时……12%用户看了文字，23%出于习惯，42%只想清除。83整理ppt

83表单设计表单往往是文字最多的部分横亘在用户和他（她）的目标面前没有人喜欢填写表单改进表单表单完成率可提高10%——40%8484整理ppt

84眼动跟踪（Eye-GazeTracking）早期的视线跟踪技术首先应用于心理学研究、助残等领域，后来被应用于图像压缩及人机交互技术。视线跟踪技术有强迫式与非强迫式、穿戴式与非穿戴式、接触式与非接触式之分。视线追踪主要用于军事领域（如飞行员观察记录），阅读及帮助残疾人通信等。85整理ppt

851.眼动的主要形式眼动有三种主要形式(在人机交互中，眼动跟踪主要利用跳动和注视:跳动（Saccades）在正常的视觉观察过程中，眼动表现为在一系列被观察目标上的停留及在这些停留点之间的飞速跳跃。在注视点之间的飞速跳跃称为眼跳动。注视（Fixations）停留时间至少持续100ms以上的称为注视。在注视中，眼也不是绝对静止不动，会有微小运动，但大小一般不会超过1°视角。绝大多数信息只有在注视时才能获得并进行加工。平滑尾随跟踪（SmoothPursuit）缓慢、联合追踪的眼动通常称为平滑尾随跟踪。86整理ppt

862.眼动跟踪的基本要求在人机交互中眼动跟踪技术必须满足以下几点要求，才能满足实际需求：不能妨碍视野。不要与用户接触，对用户基本无干扰。精度要高。动态范围要从1弧分（六十分之一弧度）到45º。反映速度要快，实时响应。能与获取的身体和头部运动相配合。定位校正简单。可作为计算机的标准外设。87整理ppt

873.一个眼动跟踪系统示例图3-14眼动跟踪系统88整理ppt

88眼动跟踪系统工作原理首先，用四个L形的红外线发光器，在眼睛里产生一些亮点；然后利用一个广角摄像头获取脸部图像，快速确定眼睛的位置，再利用一个视野较小，分辨率较高的摄像头拍摄眼睛的高分辨率图像；最后，分析眼睛的图像,计算瞳孔中心和亮点的位置，通过计算瞳孔中心和亮点确定的矢量，确定视线方向。89整理ppt

89眼动跟踪用于主动人机交互与视觉有关的人机交互自始至终都离不开视线的控制。眼动跟踪人机交互方式允许用户仅仅通过凝视的手段来控制计算机选择物体。如果能通过视线的用户盯着感兴趣的目标，计算机便“自动”将光标置于其上，人机交互将更为直接，也省去了上述交互过程中的大部分步骤。90整理ppt

904.米达斯接触问题与解决方法“米达斯接触（MidasTouch）”问题如果鼠标器光标总是随着用户的视线移动，可能会引起用户的厌烦，因为用户可能希望能随便看着什么而不必非“意味着”什么，更不希望每次转移视线都可能启动一条计算机命令。避免“米达斯接触”问题的方法：在理想情况下，应当在用户希望发出控制时，界面及时地处理其视输入，而在相反的情况下则忽略其视线的移动。可采用其他通道（如键盘或语音）进行配合。91整理ppt

9192听觉听觉可以捕捉各个方向的信息听觉可以感知大量的信息，但被视觉关注掩盖了许多。范围20Hz~20kHz，播放设备一般为60Hz——20k赫兹超过140dB时，所引起的不再是听觉而是痛觉。敏感区1000Hz~4000Hz500Hz以下和5000Hz以上的声音，强度很大时才能被听到，可辨认的语音频率范围是260~5600Hz。92整理ppt

9293听觉原理音频超过140dB时，所引起的不再是听觉而是痛觉。93整理ppt

9394疲劳和压力之下……这是我第二次写这个部分了。我写文章使用的文字处理器是基于菜单的，“保存”和“关闭”选项是相邻放在文件菜单中。我不小心就选择了“关闭”而不是“保存”。“关闭”选项会弹出一个确认框，确认你是真的放弃保存而直接退出。遗憾的是：“保存”选项也有一个相似的确认框。在点击确认框中的“确认”后我才注意到确认框标题的“关闭”字样……94整理ppt

9495疲劳的神经生理模型95整理ppt

9596疲劳（Fatigue）注意失调分散、游移不定感觉失调不停歇地长时间读书，视线会模糊动觉紊乱动作节律失调、缓慢、不准确或者忙乱。记忆和思维故障逻辑、计算混乱意志衰退96整理ppt

9697人机交互启示长时间连续任务之间有适当休息时间。避免单调乏味、无刺激性的任务，提高休息间隙。避免强刺激、强噪音，以免感官负荷导致疲劳。提高敏感操作的注意程度，避免失误。97整理ppt

9798再见！98整理ppt

98此课件下载可自行编辑修改，供参考！感谢您的支持，我们努力做得更好！