0. 痛點(diǎn)和方案

當(dāng)前公司內(nèi)部開(kāi)發(fā)的Web應(yīng)用多數(shù)屬于以下類型：
- 數(shù)據(jù)可視化報(bào)表
- 中后臺(tái)管理界面

當(dāng)前項(xiàng)目開(kāi)發(fā)中的痛點(diǎn)有這些：

UI設(shè)計(jì)人員使用PS設(shè)計(jì)的整體布局，開(kāi)發(fā)人員無(wú)法結(jié)合echarts等工具100%還原

UI設(shè)計(jì)的布局通常只考慮到一種分辨率，但實(shí)際情況下客戶顯示器的分辨率種類繁多，設(shè)計(jì)師無(wú)法逐一為之設(shè)計(jì)總體布局

產(chǎn)品工程師根據(jù)行業(yè)經(jīng)驗(yàn)對(duì)UI組件的功能添加很多要求，但開(kāi)發(fā)未必能找到合適的組件庫(kù)，多數(shù)時(shí)候需要進(jìn)行二次開(kāi)發(fā)

產(chǎn)品工程師設(shè)計(jì)了一些圖表的呈現(xiàn)方式，開(kāi)發(fā)無(wú)法100%還原。另外由于數(shù)據(jù)的數(shù)量，長(zhǎng)度等原因都會(huì)影響布局，通常難以在設(shè)計(jì)階段考慮這些復(fù)雜的境況。

因此，為了解決以上痛點(diǎn)，我需要一種方案能做到以下幾點(diǎn)：

UI設(shè)計(jì)師的設(shè)計(jì)是能被前端工程師快速開(kāi)發(fā)實(shí)現(xiàn)的

產(chǎn)品工程師設(shè)計(jì)的UI組件和圖表符合基本的UI最佳實(shí)踐，UI設(shè)計(jì)師可以方便地對(duì)顏色搭配，交互做出調(diào)整，前端人員也能快速開(kāi)發(fā)實(shí)現(xiàn)

產(chǎn)品工程師在設(shè)計(jì)圖表的時(shí)候就可以自己添加各種類型的數(shù)據(jù)，充分考慮數(shù)據(jù)的多樣性帶來(lái)的界面布局問(wèn)題

對(duì)此，我參考了阿里巴巴給出的解決方案：Ant Design和飛冰。
另外，圖表的生成，我們采用主流的echarts，百度對(duì)此也給出自己的快速原型設(shè)計(jì)解決方案 - 百度圖說(shuō)

名詞解釋

• 布局導(dǎo)航,是產(chǎn)品的骨架，是頁(yè)面的重要構(gòu)成模式之一，是作為后續(xù)展開(kāi)頁(yè)面設(shè)計(jì)的基礎(chǔ)，可以為產(chǎn)品奠定交互和視覺(jué)風(fēng)格。
• UI組件 - 業(yè)務(wù)邏輯上組成同一功能的，帶有交互效果的UI組件,如搜索框，輸入框，表格等。
• 圖表 - 以柱狀圖、餅圖、折線圖、熱力圖（不包括表格）等多種方式展示數(shù)據(jù)結(jié)果的組件。
• Angular - Google開(kāi)源的一套前端開(kāi)發(fā)框架
• React - Facebook開(kāi)源的一套JS庫(kù)
• Ant Design - 一個(gè)致力于提升『用戶』和『設(shè)計(jì)者』使用體驗(yàn)的中臺(tái)設(shè)計(jì)語(yǔ)言。它模糊了產(chǎn)品經(jīng)理、交互設(shè)計(jì)師、視覺(jué)設(shè)計(jì)師、前端工程師、開(kāi)發(fā)工程師等角色邊界，將進(jìn)行 UE 設(shè)計(jì)和 UI 設(shè)計(jì)人員統(tǒng)稱為『設(shè)計(jì)者』，利用統(tǒng)一的規(guī)范進(jìn)行設(shè)計(jì)賦能，全面提高中臺(tái)產(chǎn)品體驗(yàn)和研發(fā)效率。
• 飛冰（ICE） - 是一套基于 React 的中后臺(tái)應(yīng)用解決方案，在阿里巴巴內(nèi)部，已經(jīng)有 270 多個(gè)來(lái)自幾乎所有 BU 的項(xiàng)目在使用。經(jīng)過(guò) 2 年的發(fā)展，ICE 已經(jīng)是中后臺(tái) 2.0 體系，這個(gè)階段中阿里的目標(biāo)是賦能企業(yè)、組織搭建自己的中后臺(tái)體系。ICE 包含了一條從設(shè)計(jì)端到開(kāi)發(fā)端的完整鏈路，幫助的用戶快速搭建屬于自己的中后臺(tái)應(yīng)用。
• 百度圖說(shuō) - 業(yè)的大數(shù)據(jù)可視化分析平臺(tái),零編程玩轉(zhuǎn)圖表,大數(shù)據(jù)彰顯魅力。數(shù)據(jù)驅(qū)動(dòng),價(jià)值凸顯。零編程,所見(jiàn)即所得。便捷分享,協(xié)同編輯，直接生成echarts代碼提供給開(kāi)發(fā)人員。

---

1. 完整方案快速參考

之所以說(shuō)是參考，是因?yàn)槲覀儺?dāng)前開(kāi)發(fā)的技術(shù)棧以Angular為主，React較少，所以無(wú)法直接使用人家已經(jīng)現(xiàn)成的代碼，所以更多的是給產(chǎn)品工程師一種總體的思路

• Ant Design給出 Ant Design Pro
• 飛冰給出了幾款不同模板

---

2. 頁(yè)面布局設(shè)計(jì)

頁(yè)面布局設(shè)計(jì)通過(guò)參考ant design中的設(shè)計(jì)標(biāo)準(zhǔn)，由UI設(shè)計(jì)師設(shè)計(jì)，然后由產(chǎn)品工程師實(shí)現(xiàn)
- 設(shè)計(jì)原則參考參考Ant Design布局
- 完整方案參考飛冰中的布局樣例

---

3. 組件設(shè)計(jì)

Ant Design中提供了豐富的組件庫(kù)，具體可以參考：

• Ant Design 資源下載
• Ant Design Libary

---

4. 圖表設(shè)計(jì)

由于我們開(kāi)發(fā)人員主要采用百度的echarts制作圖表，因此結(jié)合百度圖說(shuō)的功能進(jìn)行設(shè)計(jì)可以加快開(kāi)發(fā)效率。
1. 產(chǎn)品工程師通過(guò)百度圖說(shuō)對(duì)需要的圖表進(jìn)行初步功能設(shè)計(jì)。由于實(shí)際開(kāi)發(fā)中圖表在頁(yè)面布局中所處的位置不一樣，建議設(shè)置好期望的圖表大小，以避免重復(fù)設(shè)計(jì)開(kāi)發(fā)
- 選擇圖表的類型
- 添加樣本數(shù)據(jù)
- 設(shè)置圖表功能
2. UI設(shè)計(jì)師對(duì)通過(guò)百度圖說(shuō)對(duì)圖表進(jìn)行設(shè)計(jì)
- 結(jié)合總體風(fēng)格設(shè)計(jì)多套顏色風(fēng)格
- 設(shè)計(jì)視覺(jué)效果

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。