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設計師對通過百度圖說對圖表進行設計
- 結合總體風格設計多套顏色風格
- 設計視覺效果

總結

以上是生活随笔為你收集整理的大数据可视化设计开发方案调研的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。