- VisualStudio2022插件的安装及使用-编程手把手系列文章
- pprof-在现网场景怎么用
- C#实现的下拉多选框,下拉多选树,多级节点
- 【学习笔记】基础数据结构:猫树
从 0 开始搭建一套后台管理系统,成本巨大,所以都会选择一套成熟的组件库,基于此,再堆叠业务逻辑。我们公司的组件库基于 Ant Design。Ant Design 包含一套完整的后台解决方案,不仅提供了 75 个组件,还开源了整套设计方案,配色、字体、图标、布局等,还分享了众多的用户体验案例。官方基于 Ant Design 中的组件,还提供了一套开箱即用的中台前端/设计解决方案:Ant Design Pro,更贴近于页面研发,缩短开发时间。本文的很多优化思想,都来源于这两套开源库,不过也增加了很多自己的理解.
在将系统呈现给用户之前,有必要用专业的眼光来为系统做一次初步的优化。下图是基于上述 2 个库整理的一张思维导图,包含了一个管理后台常用的几个部分,完善这几部分,可以让用户在使用系统时有较好的体验,像图表可视化之类较为特殊的模块并没有列出.
1)基础结构 。
管理后台的全局结构比较固定,包括侧边顶部的 Logo、侧边菜单、顶部菜单、面包屑导航.
侧边菜单可以隐藏,若要有更好的体验,还可以将宽度变为可自定义,例如左右拖动修改宽度。后台用户的页面权限也会集中到侧边栏,有权限的展示,无权限的隐藏.
在顶部菜单中,不仅仅可以用于导航(修改资料、登出等),还可以增加快捷的检索按钮,例如输入用户 ID,得到一个弹框,展示用户详情,包括基础资料、订单、操作记录、相册、设备等,将这些信息聚合在一起,便于查询.
当一个页面中有比较多的内容时,可以用标签页来分离,一个标签对应一个子页面.
回到顶部,在比较长的页面中比较实用,这个按钮也应该是管理系统不可获取的一个组成部分.
2)反馈 。
当用户和系统需要交互时,就得为用户在各个阶段提供必要、积极、即时的反馈。但同时要避免过度反馈,以免给用户带来不必要的打扰,对于能够及时看到效果的简单操作,可以省略反馈提示,下面是一组反馈示例.
常见的结果反馈可以分为两种:顶部全局提示和对话框提示(上图所示)。顶部全局提示就是 Toast,比较轻度,过几秒后会自动隐藏。而对话框提示就比较重,会终止用户操作,用于传递非常重要的信息.
表单的操作过程中可通过不同的校验规则给用户提供表单校验提示(上图所示),让他们及时的纠正错误。在表单中,对于比较复杂的字段,可以用气泡卡片的方式提供补充说明(下图所示).
交互的操作过程中尽可能将状态反馈给用户,即时的响应会给用户增加信赖感。在操作需要较长时间才能完成时,显示该操作的当前进度和状态。若加载时间较长,应提供取消操作.
当目标元素的操作需要用户进一步的确认时,可以通过气泡确认框在目标元素附近弹出浮层提示,以此来询问用户,常见于数据列表操作一列中的按钮.
3)数据列表 。
数据列表在整个管理系统中占比非常重,其结构也比较固定,最上边是数据过滤(即查询条件),然后是数据统计(可选项),再有是数据列表(即表格区域),其中还包含列表工具栏(新建、刷新、排序等功能),后面是分页栏(图中没有画出),最后是批量操作.
在 Ant Design Pro 中有专门的组件实现查询条件,内置查询和重置两个按钮,当条件比较多时,还能自动隐藏。在下图中,就能看到列表工具栏(贴在表格上边),提供的是批量导入、导出数据、创建应用等,这些按钮都可自定义。由于列表的字段较多,还提供了左右滚动,并且第一列和最后一列固定。批量操作是固定在页面底部的,并且会显示选中的数量.
在列表的加载过程中,可以提供骨架屏过渡,加载完成后,显示数据。当没有数据时,要提供空状态占位,而不是空白一片.
数据加载完成后,在悬停时,可以为当前那一行增加底色辨识.
文字链的点击范围受到文字长短影响,可以设置整个单元格为热区,以便用户触发.
分页器可以让用户清楚的知道自己所要浏览的内容有多少、已经浏览了多少、还剩余多少。当信息条目较多的时候,可以允许用户自定义每页的行数,以提高用户查看和检索信息的效率和灵活性,常与表格、卡片搭配使用。下图展示了分页器的各个部分,以及常用的功能.
上述是比较常见的数据列表,还有几类比较特殊的数据列表。第一种是行内可编辑的表格,点击操作列的编辑后,只读的列变为可操作的控件,比较快捷的编辑方式,适合字段较少的列表。图中最下面的添加一行数据,是一种的特殊的复制按钮.
第二种是可拖动排序的表格,将鼠标左键按住第一行的 icon,然后就能拖动这一行了.
第三种是卡片列表,展现形式与常规列表较为不同。在卡片中,可以根据业务侧重元素,例如提供放大图像的功能.
4)表单 。
表单也是后台系统中不可分割的一部分,现在很多时候不是单独的页面,而是数据列表的一部分。例如点击列表中的某个字段出现浮层表单,浮层的形式可分两种:弹框(Modal)和抽屉(Drawer),弹框适合字段较少的表单,如下所示.
由于抽屉提供的空间比较多,因此能包含更多的字段,如下所示.
除了浮层表单之外,对于较为复杂的表单,可以使用分步表单。将用户需要填写和确认的信息按照线性流程组织,利用步骤条告知用户完整的流程和进度,常常在最后提交前让用户再次确认信息,并在流程结束后给与明确的结果反馈.
登录表单是一种比较特殊的表单,独立于系统的基础布局结构。一般都会简单点,只提供用户名和密码登录,省略短信登录.
常用的表单控件包括输入框、单选框、多选框、下拉框等,这类都比较简单,复杂的有上传、数据联动和复制等。文件上传可以用比较简单的展现形式,如下所示.
而图像上传因为需要预览,所以得提供一块预览区域,常见的就是将按钮区域放大.
还有一种拖动上传,为了更好的体验,在上传的过程中,还需要实时更新进度条.
5)按钮 。
按钮虽然是一个小元素,但是它遍布整个系统,哪都有它。对于按钮,目前也有了一套成熟的设计规范,主要体现在样式和交互两方面。在下图中,1 是次按钮,2 是主按钮,3 是文字按钮,4 是图标按钮,5 是在按钮中添加图标.
主按钮是主色填充,表示高强调,其余按钮的强调级别依次降低.
红色用于警示用户该操作存在风险,通常删除按钮会被赋予红色.
在移动到按钮位置时,需要有个聚焦效果,例如高亮。在点击按钮时,需要有个过渡效果,例如增加阴影,确认点击成功。在通信时,可以有个加载效果.
6)其它 。
响应式是为了让后台可以支持移动设备的访问,在没有电脑的户外情况下,也能浏览后台,操作管理.
暗黑模式是一种体验优化,比较适合夜晚办公,也比较符合程序员的审美。在公司内部上线后,很快得到了业务方的肯定,还督促产品完善客户端的夜间模式.
异常页面也是后台系统不可缺少的一部分,权限不足提示 403,页面不存在提示 404,服务器错误提示 500 等。通过异常页,可以解释发生了什么异常,为用户提供相应的建议或操作,避免用户感到迷失和困惑.
虽然开源库已经扫清了许多的体验障碍,但是在实际业务中,还是会出现各类问题,集中体现在流程、功能、性能等方面。例如流程过于繁琐,需要简化;功能太少,需要补充;页面太卡,难以操作等。不过在优化体验之前,需要保证业务进度不受影响,换句话说,就是要有空闲的人力资源去做体验优化这个工作.
1)解放生产力 。
解放生产力就是为了让更多的人能参与到优化的工作中。我们团队之前在开发管理后台时,会先找一张类似的,然后复制一份,修改文件名称,在此基础上做改动。既然能复制,那就说明有很多共通之处,在整理 200 多张页面后发现,几种常规的布局大概占总页面数的 80% 以上,只有很小一部分的页面需要专门定制,那么接下来就是抽象出常规布局中所包含的组件.
模板组件呼之欲出,经过一周多时间的调试,在组内开始推广。在开发这套组件的时候,预留了许多回调,可根据不同场景做自定义的逻辑。在模板组件上线后,就将页面的开发从3天降低至1天以内,有些简单页面两三个小时就能布局完成。后续在浏览 Ant Design Pro 的组件库时,发现我的模板组件与这些组件类似,但是功能更为的丰富完善,能够适应更多复杂的场景.
这是一次非常典型的降本提效的经历,除此之外,我们还在研发各类工具,让各种业务走可视化的配置,不用再单独研发。例如一个将榜单活动配置化的工具,就是将常用的活动做成可视化配置的形式,目的是减少开发和测试人力,将 2 天的研发时间压缩至 2 小时。这个配置协调了 UI 组、产品组、测试组、前端组、数据组一起,制订出了相关规范,已成功运营了几十场活动.
给我们组自己减负,也是一个目标,那么也需要开发许多趁手的工具。例如设计BFF 平台,在研发完成后的一段时间才开始推广,我们组比较慢热,有段时间,新的业务接口基本都会走此平台,线上已有 70 多个接口在稳定运行着.
为了提升管理后台的开发效率,先后研发了后台页面可视化编辑器(即低代码)第一版和第二版,第一版组员接受度并不理想,第二版已经上线了 2 个菜单。不过,在使用体验上并不理想,后续还需要迭代完善,才能真正使用。 当然,解放生产力和体验优化大部分情况下是并行进行的,在进行一段时间后,获取的收益将会非常高.
2)发现问题 。
接下来谈谈发现问题,像流程、功能、性能等问题都是在深度使用后台系统后,才能遇到,因此想要发现这类问题,需要与相关人员交流。有条件的话,可以进行一对一的交流,提前通知后,让他们准备下。因为是给他们解决实际问题,所以一般情况下,他们都会积极配合。当时一下子收到了几十个问题反馈,经过整理后,修复比较容易实现的问题,诸如换个字体颜色、加个筛选条件、增加一列等。果断上线后,效果非常好,对你来说是一个小改动,但对业务方来说,却是实打实的提升工作幸福感.
另外一个发现问题的方法是发放满意度问卷,相比上一个方法,受众面更广,成本更低。毕竟一对一是要抽出双方时间的,不能频繁使用。但相对来说,一对一耳闻目染的效果肯定是最好的。如果收到的是高质量的问卷,那么收获也是满满的.
问卷的题目形式包括单选和问答,不要包含太多的专业术语,通俗描述,答案也不一定要用标准的五级量表(非常满意、满意、一般、不满意、非常不满意),可以更具象地去描述答案,方便用户选择。例如:
当选择其他时,可以提供文本框,输入具体原因.
除了在这类正式场景中获取问题之外,在日常时刻,其实也可以发掘,例如听到有人在抱怨 XX 功能太难用时,就可以去搭话了、某人在群聊中提到某功能有异常时等等.
有些体验问题也可以自己去发掘,例如某个数据列表中的字段由于太多,导致位置变形了,那么你可以主动去增加左右滚动条。筛选条件太少,就增加几个。日常也可以去观察其他开源管理系统的功能,考虑是否可以增加到自己的系统中,提升体验,响应式和暗黑模式就是在浏览其他系统时得到的灵感.
3)解决问题 。
解决问题的核心本质就是资源成本是否能负担的起。某些比较重要的体验问题,尤其是需要多端协调的,可以将其加到版本迭代中,这样既能引起重视,也能安排一个固定时间分出资源来解决.
不过大部分时候,体验优化上不了台面,提不上日程,优先级比其他需求要低很多。但好在管理后台大部分是由我们全栈管理着,优化工作可以由我们自己承担,不需要找人协作,可控性比较大。可以将那些优化见缝插针,逐个击破.
有些优化难以彻底解决,只能在已有条件下做到最好。例如后台有个审核内容的功能,可以一次性提交 200 条记录,在提交后,服务端会串行的做一系列的逻辑处理,那么不可避免的就会让接口响应会变慢。虽然在接口中,已经做了数据库表的索引,以及尽可能的与数据库少交互,包括一次性从数据库中读取多条记录,将数据缓存到 Redis 中等,但是再要优化,就得改变技术架构,成本会比较大,只能与业务方协商,暂时互相妥协。一般来说,随着业务的迭代,架构也是要跟着调整的,但受限于各种客观条件,有时候不得不搁置.
各个公司的业务都会有所不同,遇到的业务优化问题也会大相径庭,并没有银弹,得根据实际情况分析,在现有资源的前提下,找到最优解(占用的资源最少,得到的效果大家都能认可),这是一个平衡的过程,需要多多尝试.
。
最后此篇关于前端体验优化(5)——后台的文章就讲到这里了,如果你想了解更多关于前端体验优化(5)——后台的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
比较代码: const char x = 'a'; std::cout > (0C310B0h) 00C3100B add esp,4 和 const i
您好,我正在使用 Matlab 优化求解器,但程序有问题。我收到此消息 fmincon 已停止,因为目标函数值小于目标函数限制的默认值,并且约束满足在约束容差的默认值范围内。我也收到以下消息。警告:矩
处理Visual Studio optimizations的问题为我节省了大量启动和使用它的时间 当我必须进行 J2EE 开发时,我很难回到 Eclipse。因此,我还想知道人们是否有任何提示或技巧可
情况如下:在我的 Excel 工作表中,有一列包含 1-name 形式的条目。考虑到数字也可以是两位数,我想删除这些数字。这本身不是问题,我让它工作了,只是性能太糟糕了。现在我的程序每个单元格输入大约
这样做有什么区别吗: $(".topHorzNavLink").click(function() { var theHoverContainer = $("#hoverContainer");
这个问题已经有答案了: 已关闭11 年前。 Possible Duplicate: What is the cost of '$(this)'? 我经常在一些开发人员代码中看到$(this)引用同一个
我刚刚结束了一个大型开发项目。我们的时间紧迫,因此很多优化被“推迟”。既然我们已经达到了最后期限,我们将回去尝试优化事情。 我的问题是:优化 jQuery 网站时您要寻找的最重要的东西是什么。或者,我
所以我一直在用 JavaScript 编写游戏(不是网络游戏,而是使用 JavaScript 恰好是脚本语言的游戏引擎)。不幸的是,游戏引擎的 JavaScript 引擎是 SpiderMonkey
这是我在正在构建的页面中使用的 SQL 查询。它目前运行大约 8 秒并返回 12000 条记录,这是正确的,但我想知道您是否可以就如何使其更快提出可能的建议? SELECT DISTINCT Adve
如何优化这个? SELECT e.attr_id, e.sku, a.value FROM product_attr AS e, product_attr_text AS a WHERE e.attr
我正在使用这样的结构来测试是否按下了所需的键: def eventFilter(self, tableView, event): if event.type() == QtCore.QEven
我正在使用 JavaScript 从给定的球员列表中计算出羽毛球 double 比赛的所有组合。每个玩家都与其他人组队。 EG。如果我有以下球员a、b、c、d。它们的组合可以是: a & b V c
我似乎无法弄清楚如何让这个 JS 工作。 scroll function 起作用但不能隐藏。还有没有办法用更少的代码行来做到这一点?我希望 .down-arrow 在 50px 之后 fade out
我的问题是关于用于生产的高级优化级联样式表 (CSS) 文件。 多么最新和最完整(准备在实时元素中使用)的 css 优化器/最小化器,它们不仅提供删除空格和换行符,还提供高级功能,如删除过多的属性、合
我读过这个: 浏览器检索在 中请求的所有资源开始呈现 之前的 HTML 部分.如果您将请求放在 中section 而不是,那么页面呈现和下载资源可以并行发生。您应该从 移动尽可能多的资源请求。
我正在处理一些现有的 C++ 代码,这些代码看起来写得不好,而且调用频率很高。我想知道我是否应该花时间更改它,或者编译器是否已经在优化问题。 我正在使用 Visual Studio 2008。 这是一
我正在尝试使用 OpenGL 渲染 3 个四边形(1 个背景图,2 个 Sprite )。我有以下代码: void GLRenderer::onDrawObjects(long p_dt) {
我确实有以下声明: isEnabled = false; if(foo(arg) && isEnabled) { .... } public boolean foo(arg) { some re
(一)深入浅出理解索引结构 实际上,您可以把索引理解为一种特殊的目录。微软的SQL SERVER提供了两种索引:聚集索引(clustered index,也称聚类索引、簇集索引)和非聚集索引(no
一、写在前面 css的优化方案,之前没有提及,所以接下来进行总结一下。 二、具体优化方案 2.1、加载性能 1、css压缩:将写好的css进行打包,可以减少很多的体积。 2、css单一样式:在需要下边
我是一名优秀的程序员,十分优秀!