交互设计细节案例分析

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