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

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

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

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

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

NTS2.png

一、存在的问题

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

164.png

二、优化设计

功能模块

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

165.png

UI设计:

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

总结

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


推荐阅读
  • HTML中用于创建表单的标签是什么
    本文将详细介绍HTML中用于创建表单的标签及其基本用法,包括表单的主要特性和常用的属性设置。如果您正在学习HTML或需要了解如何在网页中添加表单,这将是一个很好的起点。 ... [详细]
  • Kafka组件详解及工作原理
    本文介绍了Apache Kafka的核心组件及其工作方式,包括生产者(Producer)、消费者(Consumer)、主题(Topic)、代理(Broker)、分区(Partition)、消费者组(Consumer Group)和偏移量(Offset),并探讨了这些组件之间的交互机制。 ... [详细]
  • OpenWrt 是一款高度可定制的嵌入式 Linux 发行版,广泛应用于无线路由器等领域,拥有超过百个预装软件包。本文详细探讨如何在 OpenWrt 上通过 Luci 构建自定义模块,以扩展其功能。 ... [详细]
  • 探索PWA H5 Web App优化之路(Service Worker与Lighthouse的应用)
    本文探讨了如何通过Service Worker和Lighthouse工具来优化PWA H5 Web App,旨在提升用户体验,包括提高加载速度、增强离线访问能力等方面。 ... [详细]
  • 使用 NDB 提升 Node.js 应用调试体验
    本文介绍了由 Google Chrome 实验室推出的新一代 Node.js 调试工具 NDB,旨在为开发者提供更加高效和便捷的调试解决方案。 ... [详细]
  • Spring Boot 中的拦截器应用与配置
    本文详细介绍了如何在 Spring Boot 项目中设置和使用拦截器,包括创建基础的 Web 工程、定义用户模型类、实现自定义拦截器以及配置拦截规则等步骤。 ... [详细]
  • 本文详细探讨了电脑重装操作系统后无法访问网络邻居的原因及解决方案,包括检查网络配置、权限设置等多个方面。 ... [详细]
  • 深入解析RAID0、RAID1和RAID5的不同特性及其安全性
    本文详细探讨了RAID0、RAID1和RAID5三种磁盘阵列技术的特点、优势以及它们在数据安全方面的表现。RAID0通过数据条带化提升性能,但牺牲了数据冗余;RAID1利用镜像技术确保数据的高可用性;而RAID5则结合了数据条带化和分布式奇偶校验,提供了较好的性能和数据保护。 ... [详细]
  • 本文详细介绍了如何在Windows系统中安装并使用JEB逆向工具,包括必要的环境配置和基本操作指南。 ... [详细]
  • Android 手机安全应用首屏布局设计
    本文详细介绍了如何构建一个功能丰富的手机安全应用的首个导航界面布局。通过实例代码和效果展示,帮助开发者快速理解和实现相关功能。 ... [详细]
  • 本文介绍如何利用Python中的Epoll机制构建一个高效的Web服务器,该服务器能够处理多个并发连接,并向每个连接的客户端返回预定义的响应文本。通过使用Epoll,服务器可以实现高性能的I/O多路复用。 ... [详细]
  • 本文介绍了Android中常见的动画类型及其应用场景,通过具体的代码示例展示了如何在Activity跳转时添加平滑过渡效果,提升用户体验。 ... [详细]
  • Linux磁盘管理指南:标准分区与Swap交换区配置
    本文详细介绍了在Linux系统中如何进行磁盘的标准分区以及Swap交换区的设置方法,包括新增硬盘、分区创建、格式化及挂载等关键步骤。 ... [详细]
  • 下面根据配置文件,来说明一些底层与webservices的关系:回顾一下servlet的映射模式。我们知道,servlet是从javax.servlet.http.HttpServ ... [详细]
  • 多版本CUDA共存与即时切换方案
    本文探讨了在同一台机器上安装并管理多个CUDA版本的方法,以适应不同软件或项目的需求。特别是在使用旧版PyTorch等依赖特定CUDA版本的软件时,该方法尤为实用。 ... [详细]
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社区 版权所有