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

手机平台应用开发 交互设计补充 教师 金星Tel2 内容 用户研究和设计用户研究线框图视觉感知色觉理论配色理论实践版式设计 AJAX之父 JesseJamesGarrett 2000以用户为中心的Web设计流程用户体验的要素框架层按钮 表格 照片和文本区域的位置 用户体验工程模型 用户研究 用户是什么 亨利福特 如果我直接问人们需要什么 回答很可能是 一匹更快的马 绝大部分人不是产品设计师用户只会满足于比现有好一点 用户倾向于 用户只会用到20 左右的软件功能但是往往希望有某些额外功能用户只会使用一种操作模式很少提升他们的技能养成了自己对软件工作原理的理解为什么电脑这么慢 如何找到用户的真实需求 例 场景融入 一个寻找餐馆的手机软件让我看看 附近有什么餐馆 好 有7家 其中两家是快餐店 就不考虑了 2家炒菜 还行 2家提供烧烤 不健康 1家西餐 半成品做的 现在是晚上11点 还开业吗 它们消费水平高吗 排名 我需要它们的排名和评论 小A说这家服务态度好 他的评论可靠吗 4 5星级的 姑且相信吧 我是不是需要一个方向指示 或是一张地图 用例之后 线框图 界面轮廓3R法则RequirementReductionRegularity乔希威廉姆斯75 的设计是在写html之前纸上勾勒 去掉一般性功能 每个新增功能意味着更多的帮助文档 学习 理解和确认更多的自定义选项更多的犯错可能奶牛规则成熟 9 0版本已有用户群体的制约不爱改变 非必要性测试 降低软件中的噪音我的软件主要是用来支持什么情境的 如果这个软件不存在 我想创建一个最简解决方法 是什么 从头重新创建上面的软件需要多长时间 60秒法则这个项目周期已经缩短一半面见客户前我们还有60秒决定保留哪些东西 舍弃哪些东西 案例 提升45 购买人数 表单内容出现时机 10 表单上的可用性研究 11 12 少用一些文字 不是警告 而是允许撤销 智能处理 而非警告 如浏览器地址栏 自动搜索 不要为一个界面附加大段说明性文字 如果无可避免 保证每个按钮都有特定的标签 13 人们通常不会逐字逐句阅读 使用对用户有用的词汇每段只阐明一个主旨各段主旨置于首句概括性标题加亮关键词使用项目符号列表简短 日常化的文字不要过度考虑一致性 不要使用企业口吻 语气不要居高临下 14 图片代替叙述 请在菜单栏点击 编辑 然后出现编辑子菜单 再点击 全选 哪种更简洁 15 测试文字 填空测验从产品界面文字中选出长125 150字的内容片段五个词之间留一个空测试者补上缺失的词结果分析 若正确率小于40 则重新撰写 若高于60 则可用 界面诊断 邮件管理 17 人的感知 视觉80 的信息听觉仅次于视觉触觉不可低估 尤其对有能力缺陷的人 是至关重要的其他感觉 18 视觉感知过程 受到外部刺激接收信息阶段物理特性决定了人类无法看到某些事物解释信息阶段对不完全信息发挥一定的想象力但也可能有错觉 19 20 两种神经细胞 21 比较 22 视角 23 视敏度 VisualAcuity 人眼对细节的感知能力 通常用被辨别物体最小间距所对应的视角的倒数表示 最佳状况 在6M处辨认出20毫米高的字母 一般 辨认出40毫米高的字母 24 亮度 增强亮度可以提高视敏度亮度增加 闪烁感也会增强 低于50Hz 视觉系统就会感到闪烁在设计交互界面时 要考虑使用者对亮度和闪烁的感知 尽量避免使人疲劳的因素 25 层次感 相对距离和深度 覆盖关系大小比例对物体的熟悉度产生预期 影响对大小 远近的判断 26 色散实验 27 色彩 人能感觉到不同的颜色 这是眼睛接受不同波长的光的结果 色度 强度和饱和度 正常的眼睛可感受到的光谱波长为390纳米 770纳米 实际上 是不同锥细胞的综合感觉 28 视锥细胞的 三原色 445nm接近蓝色 535nm接近绿色 575nm接近黄色 29 色觉抵消机制 七色板色彩抵消 亮度不抵消 颜色混合的原理颜色是3组视信号的差异造成的 红色 绿色 黄色黄色 蓝色 白色蓝色 红色 紫色颜色对比现象 30 色相空间 色相 也称色调 Hue 颜色的首要属性 借以用名称来区别红 黄 绿 蓝等各种颜色 自我测评 你能分辨出多少种不同的色调 人的眼睛可以分辨出约180种不同色相的颜色 色轮 圆形的色图牛顿经典棱镜实验的一部分红 橙 黄 绿 蓝 紫等量混合出相间色 成十二基本色相 31 三原色 PrimaryColor 小学时学过的基本原色 红黄产生橘黄色 黄色和蓝色变成绿色 蓝色和红色成为紫色 事实上 红 黄 蓝只能混合出一个较小的色域 非原色标准的原色集合橙 绿 紫 彩色摄影法Autochrome 1903 C Cyan 青 M Magenta 品红 Y Yellow 黄 我才能混合出广的色域呢 32 三原色 加色与减色 33 三原色色轮 红 黄 蓝 间色 Secondarycolor Primarycolor 第三色 Tertiarycolor 34 连续的色轮 35 色轮 加色vs 减色 RGB CMYK 36 两色搭配是用色的基础 有了白色 红色更注目 有了红色 白色更干净 有了黑色 红色更热情 有了红色 黑色更庄重 无彩色 黑 白 灰 红色 燃烧 燥热 刺眼白色 焦点 37 互补色 色轮上相对的颜色红绿 蓝橙 黄紫色彩之间强烈对比在高纯度的情况下 会引起色彩的颤动和不稳定感 正式设计中比较少见 一种做主色 另一种做小范围强调色 38 三色组 彼此等距的三种颜色红 黄 蓝紫 橙 绿比较协调但一定要选出一种色彩作为主色 另外两种作为辅助色 39 分裂互补三色组 互补色两侧的颜色对比依然非常强烈不会像互补色搭配那样产生颤抖和不安的感觉 对初学者来说 这是种非常好用的搭配 40 类似色 彼此相邻的颜色近似色搭配常常在自然中被找到 所以对眼睛来说 是最舒适的搭配方式 颜色 灰色 亮度 41 配色器 42 亮色和暗色 Brightness Value 亮色向纯色增加白色暗色向纯色增加黑色 暗色 亮色 HSV模型 色调饱和度亮度 画家 加白色改变颜色浓度加黑色改变颜色深度 44 纯度和方形调色板 纯度颜色鲜艳度 饱和度 保持亮度相同时 颜色相对灰色的所占比例 HSV模型用户颜色模型 A R Smith在1978年创建 HueSaturationValue方形调色板横看亮度不变竖看纯度不变 45 亮度界面 高亮度 雅致 刺激少 46 亮色和暗色 改进界面 色质明暗度 深浅度或色调 色质过于接近时影响界面对比度 加强色质差别加强明暗对比使用阴影 47 高纯度设计 强烈艳丽对视觉刺激是迅速的 醒目的效果不易于长时间的观看 48 界面色调理论 界面色调 界面中色彩总的趋向 主色调主要色调 其他配色不能超过该主要色调的视觉面积 辅色调仅次与主色调的视觉面积 烘托 融合主色调 点睛色在小范围内点上强烈的颜色来突出主题效果 使界面更加鲜明生动 49 动动脑 50 颜色心理学 暖色红 黄眼睛更敏感 点缀RGB配色中用于给颜色 加热 冷色蓝大块使用才有效果配色中给颜色 降温 51 从图片中提取色调 52 动起来 myPantone取色配色软件GIMP 美图秀秀 mypaint图片处理软件实践作业 上网找出10个你最喜欢的海报 PPT 网站 指出它们分别采用了怎样的配色设计 53 视错觉 人们总会夸大水平线而缩短垂直线 影响到显示页面的对称性 人们经常把对称页面的中心看得稍微偏上些 如果页面以实际中心为基准排版设计 人们就会感到页面上部比下部分要短 影响视觉效果 54 黄金分割之美 植物叶子中的黄金分割 55 黄金分割的设计 著名画作 最后的晚餐 56 黄金分割的设计 LOGO和界面设计 57 黄金分割实践 移动网页设计和电脑网页设计 58 59 版式设计一般原则 亲密性彼此相关的项应当形成一个视觉单元 实现组织性 对齐每个元素都应与页面上另一个元素有某种视觉联系 重复统一并增强视觉效果 对比避免页面上元素太过相似 60 亲密性 分类整理 得到一个清晰明了的结构 页面留白设计 61 62 亲密性 原则的根本目的 实现组织性 更容易阅读和记忆 使空白更美观 63 实现方法 如何实现眯起眼睛 统计眼睛停顿的次数 控制在不超过3 5个 要点不要仅仅因为有空白就把元素放在角落或者中央 不要在元素之间留同样大小空白 除非属同一子集 在有很近亲密性的元素间建立关系 不属于一组的元素要分开 64 对齐 前面主要体现差异性 对齐则体现统一性 65 灵活的对齐 特别之处 66 表单对齐 67 表单对齐 68 实现方法 每个元素都能找到与之对齐的元素 左对齐 右对齐 居中对齐 两端对齐两端对齐 每行长度一致可以试着有意识的去打破这个规则要避免的问题不要用混合对齐 就是用了右对齐就别用居中了 居中对齐可能导致视线的跳跃性太大 国家电网在建项目 促销策略 事件营销 73 重复原则 提高整体一致性 这是同一本书的两页吗 74 实践技巧 重复的对象字体 字号 颜色 形状 图案 版式等 如何开始背景中创造一个图案然后重复应用重要信息处使用重复的元素 以引导观众视线高度的一致性很有可能会呆板无趣 同样的字体及字号 可以使用不同的颜色 同样的形状 可以使用不同的大小 75 动动脑 有使用重复吗 76 一致的网站标志和导航栏 它们可以说是最体现网站特征的部分 应该对LOGO的颜色 大小 位置等方面都有严格的说明 如果一个网站里面每个网页的LOGO都大小不同 或者位置不统一 或者导航栏在某些页面突然多出两个子选项 给浏览者的感觉一定很不好 77 一致的页面布局 这可以说是一种 包装 如果某些页面的等级是一致的 那么它们的 包装 风格也应是一致的 用户应该使用同样的浏览方式来阅读这些网页 78 一致 但不要高度一致 79 实践思路 可不可以专门做一个图片设计 并且将某些一致元素 如标题 作为这个图片设计的一部分 在每个页面底部或每个标题下面使用一条粗细为1点的线吗 或者是不是使用一条更粗的线 4点 使重复元素显得更明显 更生动 有没有可能增加一些纯粹为建立重复而设计的元素 是不是有一个编号项列表 可不可以使用另外一种字体或逆序数字 然后对出版物中的每一个编号列表都重复同样的处理 80 对比原则 增强页面的效果和组织性平静的海面上有个小岛之类的 吸引住视觉焦点 对比要强烈 字号 加粗 空间 颜色 81 版式设计小结 不要害怕留白 这能让眼睛稍作休息 不要害怕不对称 不居中往往能使效果更强烈 不要害怕把字体设置得非常大或非常小 借取 其他理念 寻找灵感 如果你在设计一个传单 可以先找一份你确实非常喜欢的传单 采用它的布局 找一个你喜欢的企业名片 把它调整为你自己的名片 82 阅读 分三个阶段页面上文字的形状被人眼感知 文字被编码成相关的内部语言表示 语言在人脑中被解释成有语法和语义的单词或句子 每分钟平均阅读350字影响因素大写字母 字体白底黑字比黑底白字要好 83 文字的可用性 视觉元素vs 文字实时跟踪用户浏览屏幕时的视觉路径测试中发现 文字通常是用户寻找的第一个目标 用户对网页的意见反馈 集中在文字方面有好文字 才有好设计大多数人试图逃避阅读 看到有错误信息吗 我怎么知道 我把它点跑了 当用户点击OK时 12 用户看了文字 23 出于习惯 42 只想清除 表单设计 表单往往是文字最多的部分横亘在用户和他 她 的目标面前没有人喜欢填写表单改进表单表单完成率可提高10 40 84 眼动跟踪 Eye GazeTracking 早期的视线跟踪技术首先应用于心理学研究 助残等领域 后来被应用于图像压缩及人机交互技术 视线跟踪技术有强迫式与非强迫式 穿戴式与非穿戴式 接触式与非接触式之分 视线追踪主要用于军事领域 如飞行员观察记录 阅读及帮助残疾人通信等 1 眼动的主要形式 眼动有三种主要形式 在人机交互中 眼动跟踪主要利用跳动和注视 跳动 Saccades 在正常的视觉观察过程中 眼动表现为在一系列被观察目标上的停留及在这些停留点之间的飞速跳跃 在注视点之间的飞速跳跃称为眼跳动 注视 Fixations 停留时间至少持续100ms以上的称为注视 在注视中 眼也不是绝对静止不动 会有微小运动 但大小一般不会超过1 视角 绝大多数信息只有在注视时才能获得并进行加工 平滑尾随跟踪 SmoothPursuit 缓慢 联合追踪的眼动通常称为平滑尾随跟踪 2 眼动跟踪的基本要求 在人机交互中眼动跟踪技术必须满足以下几点要求 才能满足实际需求 不能妨碍视野 不要与用户接触 对用户基本无干扰 精度要高 动态范围要从1弧分 六十分之一弧度 到45 反映速度要快 实时响应 能与获取的身体和头部运动相配合 定位校正简单 可作为计算机的标准外设 3 一个眼动跟踪系统示例 图3 14眼动跟踪系统 眼动跟踪系统工作原理 首先 用四个L形的红外线发光器 在眼睛里产生一些亮点 然后利用一个广角摄像头获取脸部图像 快速确定眼睛的位置 再利用一个视野较小 分辨率较高的摄像头拍摄眼睛的高分辨率图像 最后 分析眼睛的图像 计算瞳孔中心和亮点的位置 通过计算瞳孔中心和亮点确定的矢量 确定视线方向 眼动跟踪用于主动人机交互 与视觉有关的人机交互自始至终都离不开视线的控制 眼动跟踪人机交互方式允许用户仅仅通过凝视的手段来控制计算机选择物体 如果能通过视线的用户盯着感兴趣的目标 计算机便 自动 将光标置于其上 人机交互将更为直接 也省去了上述交互过程中的大部分步骤 4 米达斯接触问题与解决方法 米达斯接触 MidasTouch 问题如果鼠标器光标总是随着用户的视线移动 可能会引起用户的厌烦 因为用户可能希望能随便看着什么而不必非 意味着 什么 更不希望每次转移视线都可能启动一条计算机命令 避免 米