0. 痛点和方案

当前公司内部开发的Web应用多数属于以下类型：
- 数据可视化报表
- 中后台管理界面

当前项目开发中的痛点有这些：

UI设计人员使用PS设计的整体布局，开发人员无法结合echarts等工具100%还原
UI设计的布局通常只考虑到一种分辨率，但实际情况下客户显示器的分辨率种类繁多，设计师无法逐一为之设计总体布局
产品工程师根据行业经验对UI组件的功能添加很多要求，但开发未必能找到合适的组件库，多数时候需要进行二次开发
产品工程师设计了一些图表的呈现方式，开发无法100%还原。另外由于数据的数量，长度等原因都会影响布局，通常难以在设计阶段考虑这些复杂的境况。

因此，为了解决以上痛点，我需要一种方案能做到以下几点：

UI设计师的设计是能被前端工程师快速开发实现的
产品工程师设计的UI组件和图表符合基本的UI最佳实践，UI设计师可以方便地对颜色搭配，交互做出调整，前端人员也能快速开发实现
产品工程师在设计图表的时候就可以自己添加各种类型的数据，充分考虑数据的多样性带来的界面布局问题

对此，我参考了阿里巴巴给出的解决方案：Ant Design和飞冰。
另外，图表的生成，我们采用主流的echarts，百度对此也给出自己的快速原型设计解决方案 - 百度图说

名词解释

布局导航,是产品的骨架，是页面的重要构成模式之一，是作为后续展开页面设计的基础，可以为产品奠定交互和视觉风格。
UI组件 - 业务逻辑上组成同一功能的，带有交互效果的UI组件,如搜索框，输入框，表格等。
图表 - 以柱状图、饼图、折线图、热力图（不包括表格）等多种方式展示数据结果的组件。
Angular - Google开源的一套前端开发框架
React - Facebook开源的一套JS库
Ant Design - 一个致力于提升『用户』和『设计者』使用体验的中台设计语言。它模糊了产品经理、交互设计师、视觉设计师、前端工程师、开发工程师等角色边界，将进行 UE 设计和 UI 设计人员统称为『设计者』，利用统一的规范进行设计赋能，全面提高中台产品体验和研发效率。
飞冰（ICE） - 是一套基于 React 的中后台应用解决方案，在阿里巴巴内部，已经有 270 多个来自几乎所有 BU 的项目在使用。经过 2 年的发展，ICE 已经是中后台 2.0 体系，这个阶段中阿里的目标是赋能企业、组织搭建自己的中后台体系。ICE 包含了一条从设计端到开发端的完整链路，帮助的用户快速搭建属于自己的中后台应用。
百度图说 - 业的大数据可视化分析平台,零编程玩转图表,大数据彰显魅力。数据驱动,价值凸显。零编程,所见即所得。便捷分享,协同编辑，直接生成echarts代码提供给开发人员。

1. 完整方案快速参考

之所以说是参考，是因为我们当前开发的技术栈以Angular为主，React较少，所以无法直接使用人家已经现成的代码，所以更多的是给产品工程师一种总体的思路

Ant Design给出 Ant Design Pro

飞冰给出了几款不同模板

2. 页面布局设计

页面布局设计通过参考ant design中的设计标准，由UI设计师设计，然后由产品工程师实现
- 设计原则参考参考Ant Design布局
- 完整方案参考飞冰中的布局样例

3. 组件设计

Ant Design中提供了丰富的组件库，具体可以参考：

Ant Design 资源下载

Ant Design Libary

4. 图表设计

由于我们开发人员主要采用百度的echarts制作图表，因此结合百度图说的功能进行设计可以加快开发效率。
1. 产品工程师通过百度图说对需要的图表进行初步功能设计。由于实际开发中图表在页面布局中所处的位置不一样，建议设置好期望的图表大小，以避免重复设计开发
- 选择图表的类型
- 添加样本数据
- 设置图表功能
2. UI设计师对通过百度图说对图表进行设计
- 结合总体风格设计多套颜色风格
- 设计视觉效果

大数据可视化设计开发方案调研相关推荐

大数据可视化系统开发的作用
在大数据快速发展的今天,数据正在呈指数快速增长.那么随着数据的积累,如何在海量的数据当中,快速找到并理解数据的信息规律,如何对数据进行归纳总结,这是大数据可视化系统需要解决的问题,下面中琛魔方就带着大 ...
浅谈Web大数据可视化平台开发流程
随着大数据时代的到来和数据分析技术的进步,物联网.云计算.手机.电脑以及各种传感器,无一不是数据来源或者承载的方式.微信.qq等社交平台的普及,让人们的情绪和喜好预测变成可能.在众多复杂的数据背后找到 ...
B端大屏可视化设计参考网站分享、大数据可视化设计
B端大屏可视化设计参考网站分享.大数据可视化设计大屏可视化参考网站: 1. 易知微 https://easyv.cloud/market 浅色风格的大屏可视化可以参考此网站的设计 2. 数字像素(原 ...
大数据可视化设计到底是啥，该怎么用
大数据可视化是个热门话题,在信息安全领域,也由于很多企业希望将大数据转化为信息可视化呈现的各种形式,以便获得更深的洞察力.更好的决策力以及更强的自动化处理能力,数据可视化已经成为网络安全技术的一个重要 ...
以网络安全为例的大数据可视化设计
大数据可视化是个热门话题,在信息安全领域,也由于很多企业希望将大数据转化为信息可视化呈现的各种形式,以便获得更深的洞察力.更好的决策力以及更强的自动化处理能力,数据可视化已经成为网络安全技术的一个重要 ...
大数据可视化设计需遵守什么原则
由于以往的数据分析报告难以快速.清晰地理解大量数据背后的信息,数据可视化能够以可视化图表的形式清晰.有效地传输企业运营过程中产生的重要数据. 数据可视化的设计制作需要遵守的原则有哪些? 1.明确项目目 ...
48页智慧城市大数据可视化平台建设方案
目录 1. 概述 1.1 需求分析 1.2 采取策略 1.3 方案目标 2. 智慧城市解决方案 2.1 架构说明 2.1.1 整体架构 2.1.2 规划架构 2.1.3 云平台架构 2.2 建设内容 ...
数仓第6篇:大数据可视化BI工具
目录导读: 开源BI工具 Superset Redash metabase CBoard Davinci SpagoBI Pentaho 商业BI工具 FineBI QlikView Tableau ...
遇见大数据可视化：【云图】让数据可见
欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 作者:腾讯大数据可视化设计团队导语: 除了手搓,我们还有更好的数据可视化方案今天,即使你不熟悉云计算,大数据是什么.但是这些词汇已经充斥在 ...

大数据可视化设计开发方案调研