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设计师对通过百度图说对图表进行设计
- 结合总体风格设计多套颜色风格
- 设计视觉效果

总结

以上是生活随笔为你收集整理的大数据可视化设计开发方案调研的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。