应用办公生活信息教育商业
投稿投诉
商业财经
汽车智能
教育国际
房产环球
信息数码
热点科技
生活手机
晨报新闻
办公软件
科学动态
应用生物
体育时事

设计小结如何设计端产品中的操作反馈

  操作反馈的目的是告诉用户其操作的结果、预期、带来的影响或后果。它是产品与用户交互的重要节点。合理的反馈设计,可以在产品和用户之间建立一个良好的互动,以帮助用户更好的了解产品和功能、避免或减少困惑及错误,提升用户的整体使用体验。
  操作反馈,是指在使用产品时,系统对用户的操作,或因户的行为导致的变化,给出的反馈,它是体现人与机交互的关键场景。而反馈一定是包含信息输入和输出两个环节,二者缺一不可;而这里的输入,主要指用户的操作。
  从广义来说,产品设计中的反馈就是指产品对用户的行为作出的即时响应。本文主要主要总结了在B端产品(PC端)设计中,用户操作反馈设计的类型和样式,及在设计中需要注意的问题,希望能对产品相关人员尤其是交互设计师,有一定的帮助。
  需要指出的是,那些类似页面提示、消息、通知、功能引导等功能,更多的是指设计者要告知用户或希望用户了解的信息,从广义来说,也算是系统向用户反馈信息的一种方式,但大多并不是因用户直接的操作而出现的,且不具备即时响应的特点,因此不在本文讨论范围。
  一、按场景分类,可以将操作反馈分为五类
  1、操作确认
  常见的需要用户进行二次确认的场景有:付款、覆盖、退出、删除、提交、离开、修改、替换
  对于一些具有破坏性或不可逆的操作,在用户操作前,我们应当让用户再次确认。除了要让用户二次确认,更重要的是要告知用户当前操作可能带来的危害、对其他模块或未来的使用带来的影响,引导用户慎重决定自己的操作,从而减少用户犯错的可能。另一方面,对于一些金融或企业服务类产品来说,这也是一种必要的免责手段避免因用户操作不慎导致不良后果而与商家产生的矛盾或纠纷。
  可能有些用户觉得这种二次确认会显得繁琐甚至是有些蠢,尤其是那些对产品已经非常熟悉的老用户。但对于那些关联用户财产的特殊产品(如金融理财、企业服务)等,避免和预防用户因一时大意造成的损失,远远比因减少一次点击带来的便捷,更为重要。此外,并不是所有的操作确认都要用带遮罩层的模态弹窗来实现,有的可使用非模态浮层,但最好能显示在操作触发区域旁边,以防止被用户忽略。
  在移动端,有一种交互样式,用户可以通过滑动来呼出删除按钮(当前位置),并在被点击后替换为确认删除按钮,这样的形式可以很好的替代弹窗或浮层,在提高必要的防错设计同时,不会对用户造成过多干扰。但在PC端的产品中,使用弹窗或气泡浮层的形式,可能更符合用户的操作和认知习惯。
  2、操作结果
  常见场景有:提交、添加、删除、保存、发送、搜索、查询、下载、上传
  在这些场景中,当用户通过点击按钮、填写表格等一系列行为并完成最终任务时,设计师需要明确的告知用户任务的结果:失败还是成功。这可以让用户对自己的操作有更多的信心,对当前任务有更多的掌控感。
  如果只是普通的告知用户操作成功(如申请成、删除成功、提交成功),这里建议使用toast提示即可,让用户了解即可(一定时间后自动消失),而不需要用户特别关注和点击关闭。
  但是toast自动消失的特点,决定了其不能承载较为复杂的提示,否则用户很难在有限的时间内了解全部信息,并且会给用户无形的压力。虽然我们提倡文案要尽量简洁,但总有些操作结果很难用一句话说不清楚,有时还要用图片来补充说明,这个时候,就可以考虑使用弹窗、浮层甚至是新的页面来呈现(在电商类APP中尤其常见)。
  一些常见的操作结果提示
  有时在一些复杂的场景中,除了要告知操作结果,还需要让用户明确操作对产品、其他模块和任务的影响;有的还需要引导用户继续进行接下来的任务。如果是操作失败,在告知结果的同时,还需要告知用户失败的原因、要如何处理等。
  除了呈现操作结果,还要告诉用户要如何处理
  用户执行搜索、查询等操作时,产品应该可以及时响应,并直接在页面或搜索框实时告知用户结果。在此类反馈中,搜索框的操作提示是一种比较特殊的提示,已经有很多设计师提出了一些与操作反馈相关的,很棒的小技巧来提升用户的搜索体验,如模糊搜索、关键词推荐、联想、搜索结果即时响应等等,感兴趣的朋友可以去网上搜索相关文章,在此不作赘述。
  3、任务进程
  常见场景有:删除、导入、查询、上传、下载、刷新、安装、更新、卸载
  在这些场景中,可能任务不会马上完成,系统需要有一个加载、校验、查询或计算的过程。在这个过程中,我们必须让用户的操作得到恰当的反馈设计师有必要告诉用户两个事情:
  我的操作(提交、下载、安装)是正常的,产品已经或正在正常运行;
  这个过程需要一点时间,请耐心等候;
  进程动画:
  良好的反馈,可以有效减少用户的疑惑,并缓解用户在等待过程中的焦虑和不耐烦。一些趣味性的加载动画,甚至可以让用户感到愉悦。还有一些网页游戏的加载和转场页面,会设计一些只需要简单点击的小游戏,这让等待过程变得非常欢乐,甚至是一种享受。
  这对于略显严肃的B端产品或许有些过度设计,但这种理念是值得借鉴的:我们可以使用一些简单有趣的小动画,配上准确而不失活泼的文案,这种情感化设计可以让用户在感知到这个进程变得更快了,且能有效地提升用户的愉悦感,进而增加其对产品的好感。
  有趣的过渡动画能减少焦虑,带给用户愉悦感
  数据实时变化:
  在列表添加或删除大量数据时,如果可以让用户实时看到数据和列表行次的增减,可以让用户更放心,并且对这个过程有一种期待,让用户感知到任务已在进行且很快将完成,从而减少用户等待时的焦虑感。
  点击远程获取后,页面数据会实时增加
  4、表单校验:表单状态、字段录入格式、长度;
  用户在填写表单后,点击保存、提交等操作时,我们需要对用户输入的内容进行校验。这样做除了避免或减少用户错误,也可以规范用户的操作,使系统存储的信息可控、规范化、结构化。
  我们可以看到,在很多产品中,在校验表单填入内容是否合法时,产品和开发人员都喜欢使用toast提示。对于多数简单的表单来说,这样做并没有什么不妥,且比那些动不动就使用弹窗的产品来说明细更好,但对于略复杂的表单来说,我们还有更好的设计。如,使用显示在操作对象(如输入框等)附近的高亮文字提示,可以方便用户及时、快速定位到是哪里填写出错。
  那么,用户填写表单的过程中,什么时候校验更好呢?按照校验的先后,我将表单校验分为后置和前置两类。
  后置校验:
  在B端产品的表单中,似乎开发人员更喜欢将校验置后,即在用户最后一步点击提交或保存按钮时才按字段顺序依次校验录入是否符合要求。这样将校验集中在最后用户操作的好处是,可以减少很多前端的控制,同时可以减少用户在输入时对服务器的请求次数(一些简单的如字段长度控制除外),从而减少对后台的压力。
  后置校验:点击提交时校验必填项是否为空
  前置校验:
  这种出发点无可厚非,但据我所知,很多前置的校验并不会消耗过多资源;在这种前提下,我更建议将校验前置,这样用户在输入时,可以更及时地帮他们检查自己输入是否正确,而不是在填完十几个字段后还要回过头来重新审查。
  前置的校验和提示出现的时机,一般是在用户录入或选择后,目标控件失去焦点时。然后在用户修改录入(再次获得焦点)或录入内容变化时,提示消失;在用户完成修改(再次数去焦点)时再次校验。这样的校验应该是一种体验更好的设计。
  多数情况下,我更建议使用与目标关联的校验提示,如显示在输入框上旁边的悬浮层、提示条、高亮文字,亦或是搭配上表单区域、输入框边框或背景的高亮。这样的提示可以很方便用户快速定位出错的地方。
  输入框失去焦点后,立即校验输入内容格式是否正确
  5、操作暗示提示
  常见场景有:指示控件状态、显示隐藏功能、渐进式的信息展示、操作提示
  对于一些可以发生交互的页面元素,除了在视觉上应该与静态元素有所区别之外,在用户鼠标悬停时,鼠标指针及对应的元素应当有变化,以此来告诉用户:当前控件可以被执行点击、拖拽等操作的,最简单如输入框,在鼠标悬停时会变变为手形且在获取焦点时会变为高亮,用来告知用户它是可用的和正在输入状态。
  相对的,当某些控件(如输入框、下拉框等)变为禁用状态时,也可以通过将指针变为禁用图标的形式来提示用户,着也是一种简单直观的解释。
  悬停时出现禁用图标
  有些图文信息或功能按钮,因为页面空间所限,以及简洁设计的要求,不能全部展现在当前区域。这个时候可以使用渐进式的方式来呈现。当用户鼠标悬停到目标范围时,才显示对应的信息、按钮或入口。这种根据用户行为来渐进式展现内容的方式,可以给用户很好的掌控感,同时可以让我们得到一个更简约、清爽的界面。
  鼠标悬停时,显示图标按钮的名称
  还有一种比较特殊的操作反馈形式:操作提示或说明。常见的场景是,用户在点击某个按钮后,系统根据用户当前状态,需提示用户在进行这项操作时,需要注意的问题和事项,或对此事项的步骤给出详尽说明和指引。
  但要注意的是,设计师必须确定这种提示是重要且必要的,会影响用户的认知或任务完成的正确与否,否则这种提示(很多是模态的弹窗)会让用户感觉很啰嗦、粗鲁和被打断,这种体验无疑是非常糟糕的。
  二、按设计样式分类:
  常见的反馈样式有:页面级提示、弹窗、浮层气泡、toast、轻量提示(文字、图标、部件高亮等)、动效、声音和震动等。
  1、页面级提示
  是指在用户操作后,会跳转到一个新的页面并在此通过图文信息来呈现各种操作反馈。这种页面跳转的缺点是会给用户一种断裂感,让他们会感觉产品更复杂了,它更适合用来呈现复杂的操作结果或说明等。
  2、弹窗
  这里一般是指模态的、带遮罩层的浮层样式,包括传统的对话框形式,以及包括文字和手绘图形等元素的浮层。这种形式的反馈一般更为强制性和关键,只适合非常重要的提示和说明,使用时务必谨慎。好的反馈设计应该要尽量减少模态弹窗的使用。
  3、浮层气泡
  这里是指非模态的、与操作对象关联的浮层或气泡,用文字或图片来给用户实时的提示。这种样式反馈相比页面和弹窗会更轻,且可以直接显示在操作对象附近,对用户干扰更弱,且关联性更好。
  4、toast提示
  各种通过用户操作触发,并能够自一定时间自动消失的文字或图形提示。toast提示会自动消息不会打扰到用户,一般适合用来告诉用户简短的、看一下就行的信息,如提交成功、已完成等。使用toast前要确保你想反馈给用户的信息,如果被用户忽略,是否会有严重后果?如果有,那就不应该使用这种形式。
  5、轻量提示
  一般出现在操作对象附近,或是被操作控件的样式变体。如高亮文字、图标、输入框高亮、按钮禁用状态等。这种类型非常适合运用在有大量字段的表单校验中,这样可以方便用户快速定位到哪里填写有问题。
  6、动效
  用户操作后,通过控件、内容或页面的移动、消失等动效来告知用户目前的状态、进度或操作结果等。简单、有趣的动效可以非常直观的告诉用户页面的变化,同时能够有效减少用户的焦虑和等待感,甚至能够增加对产品的好感。
  7、声音和震动
  通过震动或声音的形式来给用户反馈,如QQ的震动(对于PC端来说并非设备的震动而实际上是一种动效)、迅雷下载完成时的声音叮等。声音和震动在移动端使用似乎更多。因为这种样式的反馈显得过于强硬,在PC端的网页设计中,一般不建议使用。
  如何选择设计样式?
  以下是我总结的,在B端产品设计中(PC端),反馈类型和样式的对应关系。我们可以根据反馈的功能类型和实际场景,来选择合理的样式。
  三、小结
  操作反馈的主要目的是告诉用户其操作的结果、预期、带来(或可能带来)的影响或后果。它是产品与用户交互的重要节点。合理的反馈设计,可以在产品和用户之间建立一个良好的互动,以帮助用户更好的了解产品和功能、避免或减少困惑和使用错误,提升用户的整体使用体验。
  在设计用户操作反馈时,有两个基本的原则是:一是在任何时候,好的反馈设计能够减少用户能对产品的困惑、怀疑和对自己操作行为产生担忧;二是要注意,除非是特别重要的提示或说明,这种反馈应该尽量避免过于强硬的打断、干扰用户。
  日常设计小结,不足之处,欢迎拍砖指正。

爱国让生活更美好五星红旗,你是我的骄傲,五星红旗,我为你自豪,为你欢呼每当响起这一首歌时,我便想起自己经历的一些事。那次,我们学校举行六一活动,因为要唱《我和我的祖国》。老师让我们一人带……胃炎造句用胃炎造句大全61、烟能提神,但烟中有很有害物质,经人体吸入后危害人体,如咽喉炎,咽喉癌;支气管炎,哮喘,肺癌;胃炎,胃溃疡,胃癌等。62、当时,她吃了豆浆、大肠面线、烧饼油条等,疑因……早产儿呼吸急促正常吗早产儿呼吸急促正常吗?当宝宝出现呼吸异常的现象时,最可怕的是造成呼吸衰竭或是无法换气,进而缺氧,导致器官组织的伤害甚至死亡。早产儿如何度过危险期?一起和本站看看吧。由于新……种果蔬吃错部位要你命时下,新鲜果蔬已逐渐成为我们餐桌上的主角。我们只担心蔬菜是否有农药化学残留,却忽视了食物本身的天然毒素。不少果蔬都会含有天然有毒物质,有些果蔬的特殊部位还最容易残留农药,每年由……睡眠不好怎么办睡眠不好睡前可以试试这些方法每个人每天都要睡觉,人的一生有三分之一的时间是在睡眠中度过的,所以睡眠不好要尽快调节,那么你知道该如何保持自己的睡眠质量吗?下面大家就跟着小编一起来看看改善睡眠的方法有哪些。……比熊犬能长多大比熊犬原称巴比熊犬,后缩为比熊犬。怀疑是巴比特犬和水猎融犬的后裔。是一种娇小的、强健的白色粉扑型的狗,具有欢快的性格,那么比熊犬能长多大呢?接下来本站来详细为大家介绍一下吧。……参观南京大屠杀纪念馆到来之际,我跟随爸爸妈妈来到南京,前往南京大屠杀纪念馆参观。虽然我知道抗日战争这段历史,但具体细节并不了解。当我来到纪念馆门口排队,透过熙熙攘攘的人群,看到一尊巨大的黑色……引入独立第三方审计高校财务才能真正透明行政权力运行到哪里,监督就要落实到哪里;财政资金运用到哪里,审计就要跟进到哪里。为充分发挥直属高校内部审计的免疫系统作用,教育部印发了《关于加强直属高等学校内部审计工作的意见》……劳动清单助推劳动教育落地落实2018年9月10日,习近平总书记在全国教育大会上强调,学校要培养德智体美劳全面发展的社会主义建设者和接班人。如何贯彻落实总书记重要指示,在中小学生中开展好劳动教育,各地教育行……南瓜籽营养价值高吗南瓜籽的营养价值是很高的,它除了富含多种维生素以外,它的植物脂肪对人体的功效也非常好,是很好的天然抗氧化剂,能够延缓人体衰老。它的微量元素也很高,对人体能够起到补气血的作用,因……无线遥控开关什么品牌好名目繁多的无线遥控开关充斥在各个市场,可见其无线遥控开关的品牌有很多,但是无线遥控开关什么品牌好?今天,本站小编给大家整理了无线遥控开关十大知名品牌及相关知识,与大家分享。……十二星座乖乖男第一名:巨蟹座。巨蟹座的男生非常有家庭观念,而且他不喜欢胆小,他认为外面的花花草草是惹麻烦的根源,他能避就避,但是巨蟹座有一点闷骚,所以他会主动去逗别的女生,对方开心他就会很有……
一个毗邻友好的国家朝鲜所见最近一年,中国人到朝鲜旅游的逐渐多起来了。我在朝鲜虽然只住了几天,在走马观花中让我有所思、有所悟、有所获。回来与朋友交谈、分享,颠覆了一些陈旧的认识。大家最关心的是朝鲜是……选址时别犯浑想开店,选地方是最头疼的事。可这事儿还真得慎重,不能没谱,更不能犯错,否则,你就只能等着哭了。不能急越急越找不到。创业者第一次找门面,没有相关经验,全凭主观判断!在……政府采购与购买服务的绩效管理实施指导框架【摘要】政府采购及政府购买服务的绩效管理应实行个性化、差别化管理。基本指导框架应该总结为:围绕一个实施目的、坚持两个重要原则、突出三个重点内容、把握四个核心要素。【关键词……你知道孩子思维的特点吗如果你是幼儿园的老师、幼儿的父母,或是一贯关心幼儿成长的人,你不妨多了解一下幼儿的思维特点。这些知识或许就是你教育孩子的一个好帮手,不信你试试。模仿思维有一个这样的故事:……无公害杏鲍菇食疗功效杏鲍菇菌肉肥厚,质地脆嫩,特别是菌柄组织致密、结实、乳白,可全部食用,且菌柄比菌盖更脆滑、爽口,被称为平菇王、干贝菇,具有愉快的杏仁香味和如鲍鱼的口感。吃无公害食用菌的好处多吗……有标志性人坐在公交车上显得无聊,拿出手机上微信一摇:啊,有美女就在附近。赶紧:你好美女微信来了:你是帅哥吗?那当然了聊了一阵,感觉不错,发现美女和我的距离没有变:啊,美女也在……历史上的严嵩是奸臣吗揭秘严嵩坏名声是怎么得来的历史上的严嵩是奸臣吗判断一个人是忠臣还是奸臣,一般从他的功绩和品德两方面进行分析,两者相加,功大于过,善大于恶,那就是忠臣,反之则为奸臣。而从严嵩的生平来看,他在这两方面……我是否该爱她有人说过真情是爱情减性是啊激情退却后剩下是爱呢?还是性呢?对于有些人来说剩下的爱会更多一些我不知道我剩下是爱还是性她美丽的象只蝴蝶……厨房装修攻略教你如何实用又省钱家庭装修时,我们能够省钱的话肯定是不会拒绝的,所以不管是客厅装修、卧室装修、厨房装修等等,都有着不同的省钱攻略,其实合理的分配装修预算也是有利于打造一个完美的厨房空间。下面,小……赵匡胤一脉绝了吗赵匡胤为什么不传子宋太祖赵匡胤并没有在儿子里选人来继位,而是让他弟弟来继承皇权。然而,赵光义却先后把赵匡胤的几个儿子逼死,但是赵匡胤一脉并没有因此断绝。赵匡胤死后,他的后代就远离皇权中心,他的几……工业设计实习周记精选作为工业设计专业的大学生,通过进入工业设计专业相关的岗位实习从而让进把所学的知识运用到实际上。以下是精选的工业设计,欢迎阅读!工业设计实习周记精选一2第1周作……礼物我是一个礼物,造型谈不上多精美,甚至有些普通。我被随意地摆在精品店二楼的展示柜里,少有人问津。一天,有人推开了沉寂已久二楼的门,于是我又重新置身于白炽灯的照耀中。那……
友情链接:中准网快好知易事利快百科快传网七猫云快生活中准网快软网聚热点文好找快好找