交互设计细节案例分析

【响应原则】这不是我的错 - 3 进阶篇
操作原则
响应原则 帮助原则 习惯原则
差异化提示，让你 产生思维停顿；拟 人化语气，让你欲 罢不能
退出界面加入频道 推荐，好似说“你 不再来点儿别的”
【响应原则】这不是我的错 - 4 高级篇
针对用户误操作产生的 困惑，及时给予了相关 说明和解决方案；并巧 妙地淡化了用户的误操 作，增加了趣味性
滑动手势实现热词 切换，结合动态效 果，感觉很有趣
响应原则——所见即所得
预见 让用户操作前有一定的
“可预见性”
感性
让用户感受到正在交流的是 “感性的朋友”
有效
让用户感受到“他”的操作是 有反应的、有效果的
【响应原则】这不是我的错 - 1 问题篇
操作原则
响应原则 帮助原则 习惯原则
提示用户改正错误时， 应该礼貌。他们在用你应用 的时候，需要被认为是聪明 的。如果出错了，不要将错 误的判断和解决丢给用户
【操作原则】减轻操作的负担 - 2 扩展按键面积
操作原则
响应原则 帮助原则 习惯原则
滑屏时显示滑动块， 方便用户上下拉动 进行快速定位
扩大字符的显示和 接触区域，所选字 符不会被手指挡住
【操作原则】保持任务的连贯 - 1
操作原则
响应原则 帮助原则 习惯原则
Chrome考虑到用户连续关闭标签的场景： 关闭某个标签，其后剩余标签并没有及时地调 整尺寸，而是整体向前移动，用户鼠标会自然 落在下一个标签的关闭按钮上
赞！你发现了会话窗 口拖动的秘密。按住 头像还可以拖回去哦， 快试试吧
操作原则
响应原则 帮助原则 习惯原则
【响应原则】别让我等待 - 1 原理篇
操作原则
响应原则 帮助原则 习惯原则
超过10秒，需要将任务进行拆解
1秒是用户保持不间断思维流的限 定时间，超过情况下用户会想在等 待期间去处理其他事务，所以需要 显示将要完成的时间或进度
【帮助原则】只在我需要的时候 - 1
操作原则
响应原则 帮助原则 习惯原则
提示上次刷新时间， 避免重复刷新、节 省流量和时间
对于刷新时间较近的，可以直 接提示时间间隔，如“上次刷新： 15分钟前”，想想，为什么呢？
①
更多细节，根据手
指下拉的行程给出
②
不同的提示
【帮助原则】只在我需要的时候 - 2
操作原则
IE8则没有考虑此种应用场景：要关闭某 个标签，必须先激活；其次，关闭后，将马上 重新计算各标签的宽度
【操作原则】保持任务的连贯 - 2
操作原则
响应原则 帮助原则 习惯原则
考虑到输入时键盘 会遮挡下半部，自 动将按钮位置上提
【操作原则】保持任务的连贯 - 3
操作原则
响应原则 帮助原则 习惯原则
操作按钮置于导航 栏，较之前一处理 孰优孰劣？
【帮助原则】适度引导我的焦点
操作原则
响应原则 帮助原则 习惯原则
通过动态效果将用 户视觉从登陆引导 到这里
用户不会关注页 面上的所有内容
大块的红色背景突 出了拍照上传功能
习惯原则——符合用户习惯
地上本没有路，走的人多了，也便成了路
——鲁迅
假如你做的是创新性产品，就需要在这点上多下些功夫； 假如是借鉴型产品，最好是沿用常见的方式； 重要的是，你的设定是有绝对理由支撑的，切忌不要挑战用户习惯
【习惯原则】隐藏不必要的 - 1
操作原则
响应原则 帮助原则 习惯原则
滑动浏览分类时自 动隐藏搜索，回到 顶部后再取消隐藏
【习惯原则】隐藏不必要的 - 2
操作原则
响应原则 帮助原则 习惯原则
打开某个分类并在 其下的人员列表滑 动时，会自动将分 类移到屏幕顶端
如果一打开某个分类，就 自动将其移到屏幕顶端，岂不 更好？
谢 谢 聆 听！
下期预告：视觉认知与交互设计
下期预告：视觉认知与交互设计
做个小测试 …
观察右侧的应用图标，快速记忆 如下细节： 1、是否有日历？标识的日期是 几号？ 2、是否有记事本？其上的文字 是什么？
下期预告：视觉认知与交互设计
再来一次！！
下
观察右侧的应用图标，
期 预
快速记忆如下细节：
告 ：
操作原则
响应原则 帮助原则 习惯原则
用笑话来减缓用户 等待的烦躁情绪
等待过程中心形会 不断跳动，非常有 趣，有助于缓解用 户紧张的情绪
帮助原则——适量的帮助
源自文库多、繁
适量
少、简
过多或过繁，会让用户感到烦躁、不能清晰的找到准确的帮助； 过少或过简，则可能无法覆盖用户的问题、让用户无从下手
要考虑应用场景和用户行为来给出
交 互
操作 响应
微
设 计 案
帮助 习惯
云 即 趣 产 品
例
部
—
分
其它
施
享
平
操作原则——围绕用户目标
化繁 为简
连贯 顺畅
帮助用户 高效完成
任务
轻松 有趣
【操作原则】减轻操作的负担 - 1 选择替代输入
操作原则
响应原则 帮助原则 习惯原则
自动补全邮箱地址 后缀，简化了用户 操作
用转轮方式进行选 择，替代输入的不 便
1、是否有日历？标识
视 觉
认
的日期是几号？
知
与
2、是否有记事本？其
交
互
上的文字是什么？
设 计
什么是视觉认知？ 它对设计意味着什么？ 格式塔原理包含哪些？ 如何运用视觉结构？ 敬请期待 … … 视觉认知与交互设计
【习惯原则】符合我的认知 - 1
文字一致性
操作原则
响应原则 帮助原则 习惯原则
图标一致性
设计对话框时，要注意： 1. 标题简洁、明确，不能有疑问语气 2. 标题、内容、按钮文本要一致，尽
量用“确认”、“取消”字眼
【习惯原则】符合我的认知 - 2
操作原则
响应原则 帮助原则 习惯原则
为什么要先输入用 户名，而不是输入 邮箱或手机号？
顺序一致性
猜猜这是干什么的？
动作一致性
【习惯原则】参考生活习惯
操作原则
响应原则 帮助原则 习惯原则
手机象棋游戏采用了和现实中象棋 的棋子轮廓和棋盘格子，源自生活实物 元素的提取和临摹，提升了易学性
【习惯原则】不要产生歧义
操作原则
响应原则 帮助原则 习惯原则
如何获取用户账号及密码
你以为是重置密码 或修改账号，但实 际上是……
两种输入框显示方 式，哪种更自然？
【操作原则】保持任务的连贯 - 4
阅读模式开启后， 到页尾处会自动加 载下页内容，确保 用户阅读的流畅性
操作原则
响应原则 帮助原则 习惯原则
自动加载不宜过多， 控制在若干屏内
【操作原则】轻松惬意的体验
操作原则
响应原则 帮助原则 习惯原则
摇一摇加好友，感 觉新奇刺激
响应原则 帮助原则 习惯原则
等待过程中给出更 多帮助及提示信息
本意是利用等待时间让 用户了解操作帮助和相关信 息，并让用户等待过程不至 于太枯燥，但实际效果好吗？ 颇有强推的意思
【帮助原则】告诉我在哪里、该干什么
利用导航栏显示用 户当前所处的位置
操作原则
响应原则 帮助原则 习惯原则
布丁优惠用黄色文 字+灰色图片，提 示用户该优惠券需 要打印后使用
其它关于交互设计
人文
简约
【简约风格】Metro – 返朴归真 1
【简约风格】Metro – 返朴归真 2
【人文关怀】真实鲜活的气息 - 1
启动界面，背景采 用更加生活化的图 片，投射出生活的 气息和人文的情怀
【人文关怀】真实鲜活的气息 - 2
趣味十足的启动画 面 – 来自Zaker
首界面展示玩家对 应用的评价，让你 直观了解、引发使 用欲望
0.1秒内显示反馈用户是可以接受 的，超过情况下没有特别的信息反 馈时，用户是会产生疑惑的
加载过程没有任何 时间进度显示
【响应原则】别让我等待 - 2 基础篇
进度条加文字方式 明确告知当前状态
操作原则
响应原则 帮助原则 习惯原则
明确告知进度、剩 余时间、当前速率
【响应原则】别让我等待 - 3 进阶篇
提示信息过于简单， 没有原由说明，让 用户无所适从
有错误原由，但含 混笼统，用户仍不 能明确问题所在
【响应原则】这不是我的错 - 2 基础篇
操作原则
响应原则 帮助原则 习惯原则
错误信息要尽量准确、 通俗易懂，告知用户为什么 操作被中断，以及出现了什 么错误，并提供解决方案以 使用户能够进行修复
明确给出错误原因， 有效地指导用户后 续操作