当前位置:首页 > 冰箱 > 文章正文

一篇讲清B端产品设计反馈篇

编辑:[db:作者] 时间:2024-08-25 03:43:55

失落踪人口回归啦,前一段韶光忙着生活,最近一个项目比较多被问反馈设计的各类问题,创造网上的文章都讲不全讲不透,我还是从UI设计师的角度出发将会穷举反馈设计中用到的所有内容,争取让大家一篇就能理解所有的反馈设计规则。

一、关于反馈1. 定义

是指为用户与系统之间有效沟通而设计的一系列界面元素、动效、交互机制。

一篇讲清B端产品设计反馈篇

它旨在让用户知道当前在做什么,将要做什么,会产生什么结果,如何处理。
不同的交互,利用不同的模式来反馈信息或结果。

2. 浸染

反馈设计对付B端产品的成功至关主要。
它可以改进用户体验,减少用户的困惑和缺点,并提高产品的可用性和可靠性。
通过供应有效的反馈,产品可以增强用户对产品的信赖感,从而提升用户的满意度和忠实度。

3. 设计原则

1)贴切

该当与用户事情流程和任务需求紧密结合,准确及时反馈,向用户通报精确的,从而提高事情效率和用户满意度。

2)适当

反馈信息简洁,只展示必要的信息,避免给用户带来不必要的滋扰。
对付那些能够即时看到结果的大略操作,可以省略反馈提示。

4. 何时利用

须要用户感知主要状态和更新,相应用户的特定操作涌现,例如提交表单、导出数据。

二、反馈分类1. 按状态分类

1)正向反馈

提醒用户操作已完成,可进行其他操作。

2)提示反馈

提醒用户系统正在处理的操作、勾引将要进行的操作,可等待、放弃、跟随、进行其他操作。

3)非常反馈

提醒用户操作失落败,可重试、放弃、考试测验其他操作。

2. 按利用过程分类

1)提示反馈

操作条件醒用来见告用户须要知道什么,为用户的下一步操作增加成功率。

2)过程反馈

操作过程中的即时交互反馈,为用户增加信赖感。

3)结果反馈

操作结束后提醒用户操作结果,成功、失落败、以及指向性勾引。
为用户增加安全感。

3. 按组件分类关照横幅:由操作引发的关照,一样平常在以条状进行展示。
关照框:由操作引发的较为主要的关照,须要用户关闭消逝。
全局提示:一种反馈浮层,用来反馈不太紧要的信息,一样平常3秒后消逝。
对话框:由操作引发的较为主要的关照,一样平常以对话框的形式关照并须要用户关闭。
气泡:在目标元素周围浮起的小气泡用来供应非必要的高下文信息而不打断用户。
交互反馈:指一样平常的交互状态给用户的反馈例如“点击、悬停、失落焦等”。
表单校验:用于表单填写须要即时校验的反馈,例如用户名、密码、手机号等。
徽标:视觉指示器用来传达干系组件的状态或描述。
加载器:用可视化的办法提示当前组件处于什么状态。
进度指示:用可视化办法提示当前组件的加载进度。
骨架屏:大略的框架让用户知道界面正在努力加载,缓解焦虑。
空状态:空页面视觉添补,让用户清晰感知当前页面是什么状态并勾引下一步操作。

三、组件用法1. 关照横幅

何时利用:用于全页面的状态与关照展示,例如:提醒功能(信息或即将到来的活动)、缺点处理(缺点或非常情形)、新勾引用户(勾引他们熟习的界面、理解操作流程和功能模块)、用户反馈(用于网络用户反馈和建议)等情形下利用。

如何利用:常日以横幅形式在页面顶部中间涌现,跟随页面滚动,为常驻信息,需用户关闭。

把稳事变:

关照横幅在页面内指定位置露出,为用户供应不特定的任务与关照,不影响用户操作;关照横幅可以通过操作触发,不会自动消逝,一贯存在直到被用户关闭;横幅跟随页面内容滚动;一个页面只管即便只展示一条横幅、只管即便保持一行展示;标题只管即便避免利用标点符号,疑问句结尾可利用问号;正文描述不要重复解释标题内容。

2. 关照框

何时利用:用于主动向用户发出关照。

如何利用:常日以卡片的形式在页面四角弹出非模态弹窗,不跟随页面滚动,给用户供应及时且较主要的信息,用户关闭后消逝的常驻关照框。

把稳事变:

关照框悬浮于页面上常驻需用户关闭;标题只管即便避免利用标点符号,疑问句结尾可利用问号;正文描述不要重复解释标题内容,只管即便简洁1-2句话即可;操作按钮的文本需展示详细含义。

3. 全局提示

何时利用:提示一些临时性的反馈,例如用户完成创建、编辑、删除等操作后提示的成功、缺点、运行中的状态,显示在固定位置且不跟随页面滚动而消逝,固定时长后自动消逝,不阻断用户的轻量提示。

如何利用:提示被及时查看又不打扰用户,文案大略清晰,可有一个功能按钮,3s或以上自动关闭。

把稳事变:

全局提示位置固定(参考:在页面顶部居中);全局提示消逝韶光不能小于3秒。
标题句尾不该用句号文案格式推举名词+动词,例如“删除成功”非“成功删除”干系操作要故意义,不该用“已读”类似操作。

4. 对话框

1)模态弹窗

何时利用:须要供应反馈信息、确认操作等场景时,对话框会中断当前任务流以是常用于快捷且不须要频繁操作的任务,例如大略的信息网络事情如表单填写,利用户在当前页面可以快速完成任务。

如何利用:对话框为模态,须要吸引用户全部的把稳的关照或操作,宽度按规范定出2-4个(参考:360px、640px、800px、960px),高度适应内容(最小高度参考:200x\最大高度根据页面留出边距参考:80px),背景蒙层参考:色彩#000000,透明度45%。

把稳事变:

对话框属于强反馈,会打扰用户不要随意利用;对话框按钮布局规则参考:主按钮居右,次要按钮在主按钮左侧,按钮组整体位于内容区的左下方(设计大原则主按钮贴边固定,设计实例中有按钮组居左的,主按钮就贴最左边);内容区超过弹窗最大高度可以涌现滚动条,但最好不要利用滚动。
蒙层区域不跟随滚动条滚动;支持弹窗套叠,套叠弹窗不超过3层,关闭/返回规则为返回上一级弹窗,套叠时蒙层也依次叠加;信息录入类对话框不建议点击蒙层关闭;标题命名利用动词+名词,结尾不该用句号,疑问句可利用问号。
操作按钮命名利用标题内的动词即可。

2)侧边抽屉

何时利用:信息的快速录入与页面赞助信息查看时利用,例如信息展示、信息录入、帮助中央、详情页等,用于补充弹窗无法知足展示需求时。

如何利用:从屏幕侧边(高下旁边)滑出的浮层面板,同时有蒙层覆盖背景的模态抽屉。
高下抽屉尺寸规范参考:宽度充满容器,高度根据规范固定1-2种(480);旁边抽屉尺寸参考:宽度根据规范固定2-3种(480、720),高度充满容器。
背景蒙层参考:色彩#000000,透明度45%。

把稳事变:

信息录入类抽屉不建议点击蒙层关闭;主体内容超过抽屉高度是利用滚动体展示,不支持横向滚动条;支持弹窗套叠,套叠抽屉不超过3层,关闭/返回规则为返回上一级抽屉,套叠时蒙层也依次叠加;无论上、下、左、右那种类型,标题统一左对齐,操作按钮右对齐;内容较少,不是高频操作的情形建议利用弹窗,不该用抽屉。

5. 气泡

何时利用:当目标元素可能引起用户疑问时,用于显示阐明功能、帮助文案等的赞助信息展示,也可以承载链接、按钮等功能的非打断性提示。

如何利用:点击/鼠标移入元素,弹出气泡式的卡片浮层。

把稳事变:

气泡时浮层,跟随页面滚动,悬浮或点击展示,鼠标划走或点击空缺区域气泡消逝。

6. 一样平常交互反馈

何时利用:为了确保用户的利用体验,每个组件都应利用不同的交互让用户感知鼠标操作的效果,一样平常有“常规、禁用、校验、悬停、点击、失落焦”6种交互样式,失落焦与常规常日是相同的这里不做谈论,校验反馈的内容下一模块单独讲解,这里不做谈论,由于全体B端组件过于弘大,我们只列举一二种进行剖析。

如何利用:当鼠标产生交互时利用,例如悬停、点击、校验、失落焦等情形时。

把稳事变:

无论哪种状态都要担保笔墨图案的可阅读性。

7. 表单校验

何时利用:以确保用户输入的数据准确、同等、安全,并符合哀求时利用,例如必填项、电子邮件、电话号码的格式验证、密码的同等性、内容的安全检讨不包含恶意代码等。

如何利用:校验前给提示,校验中给进度或加载器,考验后给修正提示或成功提示。

把稳事变:

组件失落去焦点后进行前端规则校验,若校验未通过,显示缘故原由到下方。
组件提示文本在获取焦点后消逝。
设计尽可能大略和易于理解,以便用户能够轻松地利用和理解。

8. 徽标

何时利用:未读或关照、状态提示(进行中、已完成等)、属性提示(热销、限免等)、功能提示(新功能等)、数据呈现(关键数据加标)。

如何利用:一样平常涌如今图标或笔墨的右上角。
供应及时、主要的信息提示。

把稳事变:

用于状态标识的徽标,例如数字徽标、小圆点,当用户对该信息已经感知或后台数字发生变革,应及时更新微标中的数字或小圆点的显示状态;可视区域内少量的利用徽标,避免多个徽标视觉疲倦;徽标利用要保持统一,同一层级要用一样的样式;当内容进行操作后徽标自动刷新状态(类处理后刷新、状态类开通后刷新)。

9. 加载器

何时利用:内容须要一段不愿准时长的加载时利用加载器,让用户感知当前操作正在处理,能够对结果有直不雅观的预期。

如何利用:加载器组件适用于短时加载场景,建议大于1秒不超过4秒;当笔墨按钮须要更新时利用加载器过度,避免溘然涌现笔墨的变革。

把稳事变:

尽可能描述加载状态,例如“保存中…”“确认中…”等;等待韶光超过4秒建议利用带百分比的进度,给用户确定性。

10. 进度指示

何时利用:文件上传或下载(向用户展示当前的上传/下载状态和速率,以及估量的剩余韶光)、安装程序(表示安装进度)、数据加载(须要较永劫光来加载数据)、任务进度(某个任务或者全体项目的完成进度)、表单填写(用户当前的位置,以及还须要完成哪些步骤)。

如何利用:须要较历久待时,用百分比的进度条展示当前的的状态。

把稳事变:

进度时长过永劫,利用文本赞助解释,减少焦虑;同功能类型模块利用相同的进度样式;成功或者失落败的进度反馈利用颜色明显的组件进行结果反馈;如果不能度量准确的百分比进度,请利用加载器。

11. 骨架屏

何时利用:须要等待加载的组件部分利用的占位符,按照内容部分的架构抽离出信息骨架图进行展示,让用户对加载的内容有一定认知。

如何利用:用户操作后,内容加载出来前,在加载区域利用骨架图展示,合营wave动画利用。

把稳事变:

固定不变的内容在刷新时不须要利用骨架展示。
骨架的表达要与展示内容保持同等,保持简洁,不须要展示细节。

12. 空状态

何时利用:所加载内容为空、加载缺点平分歧状态时利用的占位符。

如何利用:利用占位图像、笔墨描述、操作按钮等元素对所在区域进行展示。

把稳事变:

避免空提示的涌现,要给予至少笔墨的提示。

四、小结

反馈设计很随意马虎被产品和UI忽略,然而却是用户体验中不可短缺的关键,对用户的操作样样有反馈是基本的产品原则。
上面的总结涵盖的方面已只管即便全面,有我个人的间接也有对其他文章内容的总结,希望对你有一点点帮助。

下次想看什么可以留言见告我~期待你的反馈!

本文由 @大星星 原创发布于大家都是产品经理,未经容许,禁止转载

题图来自 Unsplash,基于 CC0 协议

该文不雅观点仅代表作者本人,大家都是产品经理平台仅供应信息存储空间做事。

本站所发布的文字与图片素材为非商业目的改编或整理,版权归原作者所有,如侵权或涉及违法,请联系我们删除,如需转载请保留原文地址:http://www.baanla.com/bx/105087.html

XML地图 | 自定链接

Copyright 2005-20203 www.baidu.com 版权所有 | 琼ICP备2023011765号-4 | 统计代码

声明:本站所有内容均只可用于学习参考,信息与图片素材来源于互联网,如内容侵权与违规,请与本站联系,将在三个工作日内处理,联系邮箱:123456789@qq.com