热门标签 | HotTags
当前位置:  开发笔记 > 程序员 > 正文

【UI】视频上云/网络穿透/网络映射上云服务EasyNTS上云网关管理平台功能归整及页面优化

在我们的认知里,后台系统主要是给开发者看的,以往开发者更注重后台的功能性,但是随着技术的发展,以及大众审美的普遍提升

在我们的认知里,后台系统主要是给开发者看的,以往开发者更注重后台的功能性,但是随着技术的发展,以及大众审美的普遍提升,用户对于后台系统也有了更高的要求,不仅要美观、使用人性化,还要功能逻辑流畅,这不仅增加了产品的吸引力、使用户获得流畅的体验,还能简化用户流程,节省人力物力。

为了给用户带来更好的使用体验,我们决定对EasyNTS上云网关管理平台进行UI优化。

NTS2.png

一、存在的问题

通过对旧版问题的整理分析,发现就目前后台界面上色觉语言不统一,颜色老旧,没有考虑到用户的年龄层次;用户体验差,功能信息不够完善,且功能放置位置分散,很多功能性入口没有目的性,随意摆放;交互逻辑差,不能让人一目了然,难以理解。

164.png

二、优化设计

功能模块

  • 设备管理
    包括设备管理、组网服务和设备分组,其中设备管理既有设备的基本信息、端口透传、文件管理,同时又把原网站的流量监测、远程监控和设备组网整合到设备管理的列表里,使用户一目了然的知道这个设备的所有情况及功能。而原来的组网服务的设计形式弹框太多,层次不明显,优化后的层次明显简单明了很多;
  • 设备分组
    设备分组功能的增加是为了方便在设备数量较多的情况下分配的问题,解决由于设备较多而产生的工作量。
  • 组织管理
    在原有的用户管理逻辑的基础上,我们再次站在用户的角度上,改变了一个设备只能由一个用户观看、管理,现在的设备可以由多个用户同时观看和管理。
  • 系统管理
    主要包括基础配置和版本信息,基础配置中我们给了一些设置的默认字段,方便用户查看和填写。

165.png

UI设计:

  • 布局
    采用24栅格化体系,建立了适配的概念;以左右布局的结构形式,左侧菜单栏为深色,内容部分为浅色,明确划分了菜单栏和内容部分。
  • 色彩
    此次设计的最大亮点就是化繁为简,页面色彩搭配干净明亮,能保持页面的平衡感,搭配红色、黄色、绿色的辅助色,用于信息提示,比如成功、在线、失败、删除等。
  • 交互
    梳理通顺模块、功能,保持了简单明了的交互设计,让用户不会在使用中迷路,让用户可以“一键到底”。

总结

在此次的EasyNTS界面优化中,我们充分考虑了用户的使用需求,从用户的角度多方面考虑操作性和管理性,同时也从布局方面优化了前端展示,对于我们来说,这是变化,也是一次新的尝试。往后我们也会继续带着这种思维来对TSINGSEE青犀视频其他产品进行优化整改,将产品变得更加完美。


推荐阅读
  • Google在I/O开发者大会详细介绍Android N系统的更新和安全性提升
    Google在2016年的I/O开发者大会上详细介绍了Android N系统的更新和安全性提升。Android N系统在安全方面支持无缝升级更新和修补漏洞,引入了基于文件的数据加密系统和移动版本的Chrome浏览器可以识别恶意网站等新的安全机制。在性能方面,Android N内置了先进的图形处理系统Vulkan,加入了JIT编译器以提高安装效率和减少应用程序的占用空间。此外,Android N还具有自动关闭长时间未使用的后台应用程序来释放系统资源的机制。 ... [详细]
  • 解决Cydia数据库错误:could not open file /var/lib/dpkg/status 的方法
    本文介绍了解决iOS系统中Cydia数据库错误的方法。通过使用苹果电脑上的Impactor工具和NewTerm软件,以及ifunbox工具和终端命令,可以解决该问题。具体步骤包括下载所需工具、连接手机到电脑、安装NewTerm、下载ifunbox并注册Dropbox账号、下载并解压lib.zip文件、将lib文件夹拖入Books文件夹中,并将lib文件夹拷贝到/var/目录下。以上方法适用于已经越狱且出现Cydia数据库错误的iPhone手机。 ... [详细]
  • 小程序自动授权和手动接入的方式及操作步骤
    本文介绍了小程序支持的两种接入方式:自动授权和手动接入,并详细说明了它们的操作步骤。同时还介绍了如何在两种方式之间切换,以及手动接入后如何下载代码包和提交审核。 ... [详细]
  • Java和JavaScript是什么关系?java跟javaScript都是编程语言,只是java跟javaScript没有什么太大关系,一个是脚本语言(前端语言),一个是面向对象 ... [详细]
  • 在Docker中,将主机目录挂载到容器中作为volume使用时,常常会遇到文件权限问题。这是因为容器内外的UID不同所导致的。本文介绍了解决这个问题的方法,包括使用gosu和suexec工具以及在Dockerfile中配置volume的权限。通过这些方法,可以避免在使用Docker时出现无写权限的情况。 ... [详细]
  • 安装mysqlclient失败解决办法
    本文介绍了在MAC系统中,使用django使用mysql数据库报错的解决办法。通过源码安装mysqlclient或将mysql_config添加到系统环境变量中,可以解决安装mysqlclient失败的问题。同时,还介绍了查看mysql安装路径和使配置文件生效的方法。 ... [详细]
  • 本文详细介绍了SQL日志收缩的方法,包括截断日志和删除不需要的旧日志记录。通过备份日志和使用DBCC SHRINKFILE命令可以实现日志的收缩。同时,还介绍了截断日志的原理和注意事项,包括不能截断事务日志的活动部分和MinLSN的确定方法。通过本文的方法,可以有效减小逻辑日志的大小,提高数据库的性能。 ... [详细]
  • 本文介绍了Python高级网络编程及TCP/IP协议簇的OSI七层模型。首先简单介绍了七层模型的各层及其封装解封装过程。然后讨论了程序开发中涉及到的网络通信内容,主要包括TCP协议、UDP协议和IPV4协议。最后还介绍了socket编程、聊天socket实现、远程执行命令、上传文件、socketserver及其源码分析等相关内容。 ... [详细]
  • Linux服务器密码过期策略、登录次数限制、私钥登录等配置方法
    本文介绍了在Linux服务器上进行密码过期策略、登录次数限制、私钥登录等配置的方法。通过修改配置文件中的参数,可以设置密码的有效期、最小间隔时间、最小长度,并在密码过期前进行提示。同时还介绍了如何进行公钥登录和修改默认账户用户名的操作。详细步骤和注意事项可参考本文内容。 ... [详细]
  • 本文介绍了在Python3中如何使用选择文件对话框的格式打开和保存图片的方法。通过使用tkinter库中的filedialog模块的asksaveasfilename和askopenfilename函数,可以方便地选择要打开或保存的图片文件,并进行相关操作。具体的代码示例和操作步骤也被提供。 ... [详细]
  • Iamtryingtomakeaclassthatwillreadatextfileofnamesintoanarray,thenreturnthatarra ... [详细]
  • 本文介绍了使用kotlin实现动画效果的方法,包括上下移动、放大缩小、旋转等功能。通过代码示例演示了如何使用ObjectAnimator和AnimatorSet来实现动画效果,并提供了实现抖动效果的代码。同时还介绍了如何使用translationY和translationX来实现上下和左右移动的效果。最后还提供了一个anim_small.xml文件的代码示例,可以用来实现放大缩小的效果。 ... [详细]
  • Spring源码解密之默认标签的解析方式分析
    本文分析了Spring源码解密中默认标签的解析方式。通过对命名空间的判断,区分默认命名空间和自定义命名空间,并采用不同的解析方式。其中,bean标签的解析最为复杂和重要。 ... [详细]
  • VScode格式化文档换行或不换行的设置方法
    本文介绍了在VScode中设置格式化文档换行或不换行的方法,包括使用插件和修改settings.json文件的内容。详细步骤为:找到settings.json文件,将其中的代码替换为指定的代码。 ... [详细]
  • 安卓select模态框样式改变_微软Office风格的多端(Web、安卓、iOS)组件库——Fabric UI...
    介绍FabricUI是微软开源的一套Office风格的多端组件库,共有三套针对性的组件,分别适用于web、android以及iOS,Fab ... [详细]
author-avatar
凯蜜斯特
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有