云端数据管理平台

产品简介

刷新云端数据管理系统是基于物联网、大数据分析、智能硬件研发的一套管理平台,为企业提供数据可视化、监控分析的信息处理。

设计思路

用户分析

企业员工是使用B端产品最多的人,他们只会在“工作”的场景下使用它,有些还是强制使用,个人没有选择余地,因为付费者是企业领导,而不是基层员工,而使用最多的反而是基层员工,领导层则使用较少,因而专家型用户偏多,他们也更加追求产品的效率。

设计目标

B端产品的实用性大于美观性,能解决问题、配置资源的B端产品才是一个好的B端产品。

高效

业务流程简单易用,减少不必要的操作,操作过程中少跳转少弹窗。

统一

统一界面所有视觉语言,保持交互的统一性,建立设计规范与组件库,便于后期开发复用。

清晰

专注功能,减少“多余”的设计,优化视觉层级,更加方便用户快速找到相应的功能区域。

硬件

现在PC主流的分辨率占比排名前三的是1920 * 1080、1366 * 768、1440 * 900,以1440来设计的话,向上适配或者向下适配误差会比较小。

布局

常见的布局可以分为三种:

  1. 水平导航布局
  2. 垂直导航布局
  3. 混合导航布局

考虑到功能模块较多、较复杂,这里采用混合导航布局。左侧为菜单栏,管理功能入口,右侧是内容展示区,提供数据信息及工作管理。

关于栅格

12栅格适用于业务信息分组较少,单个盒子信息体积较大的中后台页面设计。

24栅格适用于业务信息量大、信息分组较多、单个盒子内信息体积较小的中后台页面设计。

24栅格与12栅格对比,24栅格更加灵活,更适合内容比较多样复杂的场景。这里根据业务情况选择24栅格体系。

颜色

品牌色、功能色、中性色三部分色彩,以及衍生出的相关色板,可基本满足目前后台所需的颜色系统。

主色

以蓝色为品牌色,用于主要的场景

辅助色

用于主色以外的场景使用,如成功、出错、失败、提醒等,专色专用

中性色

用于标题,正文,辅助文字等

字体

在B端系统中优先使用系统默认的界面字体,同时定义文字的行高,如:字号(font-size)12px,行高(line-height)为22px.

层级粗细字号
一级标题bold20px
二级标题bold18px
三级标题normal16px
正文normal14px
辅助文字normal12px
失效文字normal12px
链接文字normal12px

字体行高,参考蚂蚁金服设计

Font SizeLine Height
1220
1422
1624
1826
2028
2432
3038

组件

分析总结页面中的共性,与开发共同完成产品的组件库

按钮

常用的操作按钮

基础按钮

禁用状态

输入框

基础的表单组件

导航菜单

顶部导航和左侧导航

界面展示