云端数据管理平台
产品简介
刷新云端数据管理系统是基于物联网、大数据分析、智能硬件研发的一套管理平台,为企业提供数据可视化、监控分析的信息处理。
设计思路
用户分析
企业员工是使用B端产品最多的人,他们只会在“工作”的场景下使用它,有些还是强制使用,个人没有选择余地,因为付费者是企业领导,而不是基层员工,而使用最多的反而是基层员工,领导层则使用较少,因而专家型用户偏多,他们也更加追求产品的效率。
设计目标
B端产品的实用性大于美观性,能解决问题、配置资源的B端产品才是一个好的B端产品。
高效
业务流程简单易用,减少不必要的操作,操作过程中少跳转少弹窗。
统一
统一界面所有视觉语言,保持交互的统一性,建立设计规范与组件库,便于后期开发复用。
清晰
专注功能,减少“多余”的设计,优化视觉层级,更加方便用户快速找到相应的功能区域。
硬件
现在PC主流的分辨率占比排名前三的是1920 * 1080、1366 * 768、1440 * 900,以1440来设计的话,向上适配或者向下适配误差会比较小。
布局
常见的布局可以分为三种:
- 水平导航布局
- 垂直导航布局
- 混合导航布局
考虑到功能模块较多、较复杂,这里采用混合导航布局。左侧为菜单栏,管理功能入口,右侧是内容展示区,提供数据信息及工作管理。
关于栅格
12栅格适用于业务信息分组较少,单个盒子信息体积较大的中后台页面设计。
24栅格适用于业务信息量大、信息分组较多、单个盒子内信息体积较小的中后台页面设计。
24栅格与12栅格对比,24栅格更加灵活,更适合内容比较多样复杂的场景。这里根据业务情况选择24栅格体系。
颜色
品牌色、功能色、中性色三部分色彩,以及衍生出的相关色板,可基本满足目前后台所需的颜色系统。
主色
以蓝色为品牌色,用于主要的场景
辅助色
用于主色以外的场景使用,如成功、出错、失败、提醒等,专色专用
中性色
用于标题,正文,辅助文字等
字体
在B端系统中优先使用系统默认的界面字体,同时定义文字的行高,如:字号(font-size)12px,行高(line-height)为22px.
层级 | 粗细 | 字号 |
---|---|---|
一级标题 | bold | 20px |
二级标题 | bold | 18px |
三级标题 | normal | 16px |
正文 | normal | 14px |
辅助文字 | normal | 12px |
失效文字 | normal | 12px |
链接文字 | normal | 12px |
字体行高,参考蚂蚁金服设计
Font Size | Line Height |
---|---|
12 | 20 |
14 | 22 |
16 | 24 |
18 | 26 |
20 | 28 |
24 | 32 |
30 | 38 |
组件
分析总结页面中的共性,与开发共同完成产品的组件库
按钮
常用的操作按钮
基础按钮
禁用状态
输入框
基础的表单组件
导航菜单
顶部导航和左侧导航