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