从0开始搭建数据产品后台-基础控件（二）

接上篇写的从0开始搭建数据产品后台-基础框架（一），今天稍空些继续总结在做数据产品项目过程中的收获，本篇主要介绍产品需要考虑的基础控件及能力部分。

首先是基础控件，其对于数据产品而言就像是人的基本信息，我们设计产品时，可以首先考虑到全局通用的这些组件，前端在开发时部分可以复用现有的行业案例，部分则需要根据业务定制。

一、基础控件

1、版本：移动端和PC端

移动互联网的告诉发展，移动端以成为主流，公司的数据产品也会根据业务需要，开发移动端仪表盘供员工更方便的查看数据，网页端产品可以补足移动端的局限，数据展示更全面，能适应复杂的计算。

2、日期时间控件

任何数据脱离了取数的日期和时间都是无效的，数据反映的是某段时间内某种状态，我们在引用数据时都需要标注清楚所以时间控件十分重要。日期控件要满足可选择某一天，或者某一段日期，对于常看的时间，可以设置一些快捷键。常会存在对比某两段时间的环比值或同比值的场景，比如上线某个项目，想看下上线后和上线前某指标是否有提升，可以使用对比项，实现2个时间段的比较。按数据的时间维度可以按天，按周，按月，甚至更细粒度。

时间维度

提供对比时间段功能的时间控件

固定选取一周时间的控件

3、城市控件

城市较少时可使用下拉菜单，勾选即可，可增加搜索功能。城市较多且存在城市分级，可增加多级菜单，或使用2个下拉菜单联动实现，网页端使用比较方便；A-Z字母排序城市列表和三级联动式多用于移动端的应用。

4、导航Tab

一般是侧边导航、顶部导航、底部导航，基于业务类别将导航分类并安排好层级关系。网页版导航还涉及到左侧边可以收起仅留下icon，保证数据图表最大展示面积。顶部导航如excel菜单栏一样可以隐藏。

5、下载

Dashboard不仅仅要支持可视化图表的展示，如果用户在使用过程中希望查看原始数据，或者在数据数据基础上做分析处理，则需要支持下载原始数据源和保存图表未图表的功能，方便数据传阅。

6、邮件、微信订阅收藏

网页端的数据看板，可通过订阅功能，实现在移动端看重点关注的数据指标，通知方式可以是公司内部的办公IM，或微信消息，或邮件通知。

7、辅助线

左边的图的辅助线用于帮助我们快速定位节点，浮窗展示该节点下的数据值，右边的图是趋势线图，股票分析类网站应用较多，excel中也可以增加趋势线，两点连线展现折线图的走向。

8、时间放大条

柱状图常会有个问题是想看很长或者很短的一段时间的趋势，则此时图形展示的宽度则需要根据时间进度条来拉伸，以下进度条可以实现此功能，放大缩小范围去查看图形趋势。

9、权限管理

权限管理是每个系统都会涉及到的基础构成，根据公司内部部门小组的分级，采用树形控件完成角色的分布管理。

10、警报（短信、办公IM、提示框）

即可以与公司内部的IM办公系统打通，消息或短信告知数据异常等情况。

11、全屏查看

放大框，支持放大查看全屏展示某个图标，侧面或顶部或底部菜单栏收起。

12、提示框

以下四种框分别用于不同的提示场景，全局通知框用于网页整体的通知，通常在右上角或页面中顶部；气泡提示框和文字提示框用户解释数据指标口径或者用于图标上展示某个节点的述职，气泡确认框则是发生某个危险操作时候的提示确认，以防出错。

作为数据产品经理或者产品运营，在设计数据网页类产品时，需要了解基础的的控件，才能更好的帮你完善原型，以及解决开发过程中的一些想不起来却有十分有用途的小零件。

参考来源：https://ant.design/components/message-cn/