合理復用組件，解鎖數據圖表設計新姿勢
來自專欄 BorderDesign
「 你遲早會遇到, 枯燥乏味又複雜的後台設計項目 「
在UI設計工作中，我們都會接觸到 "後台數據管理系統" 的界面設計，
你是否又想起了:
那些重複的表單，生硬的圖表，繁雜的數據百分比，
以及研發同事面對設計圖中可視化圖表時，那衝動的眼神和手中的40米大刀。
#閱讀本文，我將與你分享：
1. 避免重複造輪子，與工程師一起效率工作；
2.找一個好「輪子」，你應該知道的這些數據可視化網站；
3. 一些經驗分享和Sketch Dashboard文件共享；
#避免重複造輪子
現在各個埠的設計語言已經相當成熟，大膽的去使用那些你能找到的源文件和組件，復用它們，並逐漸形成自己的組件庫；
尊重並充分了解我們的行業規範，將創意發揮在更有價值的地方，避免在一些無效細節上，浪費設計和研發成本，甚至挑戰用戶習慣。
在項目設計初期，我們便應該與研發同事達成共識，在一套他們或彼此都熟悉的規則上展開設計是一個不錯的方法！
但是，一些規則是我們前期必須提前給出的（間距字型大小顏色等等，我們搭配的每一隻猿不一定都是老司機），這能極大的節省我們後期走查中花費的時間成本。
*推薦參考的設計語言及規範：
1. AntDesign，普遍研發同事都熟悉的一套設計語言及組件
A UI Design Language
這是一套完善的解決方案，詳細的閱讀它的設計語言，對後台系統設計接觸不多的朋友，熟悉規則能讓你更快上手。
你還可以在AntDesign PRO 中查看這些方案的實現效果（左右拉伸邊界，查看它們如何自適應的）
Antdesign 的設計語言與組件已經整理相對比較完善，不過多瀏覽其他的設計語言，熟百家之長總是好的
2.UIkit ，這是一款輕量級前端框架，你可以瀏覽它的豐富組件，並且熟悉研發隊友們常提到的組件名稱。
UIkit
3.Element，這是一套基於Vue2.0的桌面端組件庫，查看它的設計指南和組件庫！多多益善，如果你想將其中的組件復用在自己的設計中，別猶豫，將代碼複製給你的小夥伴，他會喜歡上你的貼心！
Element
#找到「輪子」，你得知道哪些我們能實現
在我們與夥伴達成「共識」後，我們能很輕鬆的推進工作。
作為一枚設計師，我們在設計中，總是靈感爆棚，希望作品與眾不同，且眼前一亮！
但限制我們的，多是研發的時間成本，以及前端小哥的實現能力，我們的很多想法會被產品和開發扼殺，即使某一些確實很棒；作為同事，我們需要換位考慮研發夥伴的工作量，以一個較低的代價實現我們想要的效果，在這個時候，有現成的的組件能使用時，那真是極好的！
*推薦參考的海量組件庫：
1.Echarts，當你的項目中擁有許多表格時，你一定會常常用到的網站，擁有異常豐富的組件庫，大膽的挑選想要的效果！
ECharts Demo
找到符合你預期的樣式，並告訴你的開發夥伴！
2.HighCharts，國際友人們喜歡用的組件庫！瀏覽它，有許多你希望實現的效果都包含在內
Interactive JavaScript charts for your webpage
3.D3，專業且強大…你可以經常瀏覽它並找尋靈感，它的所有東西看起來都足夠的酷..but，這裡的東西對你的研發夥伴也有一定的技術要求…
D3.js - Data-Driven Documents
#一些經驗分享：
1.臨門第一腳：「屏幕設計尺寸問題」
許多的新手喜歡文的問題，如果你的用戶群體較為「保守」，和你的夥伴約定最小寬度「1200px」（2018年這已經足夠了）進行設計，並且在設計中注意響應式布局，並且明確的告訴你的研發夥伴適應規則。but，你最好使用dp作為單位，以確保你的頁面在不同屏幕看起來都一毛一樣；
2.數據的可視化
「一圖頂千言」，沒有多少運營，運維人員喜歡長時間盯著一串串的表格和數字找尋問題，有「目的性」的圖表是他們的最愛，但記得他們需要有完整數據的導入導出，即使他們並不常用…
3.複雜的許可權分配問題
一個後台系統中總會有很的角色設置和許可權分配，在前期充分考慮到使用的人群，注意布局的合理性不會因為缺失或者 多了某幾塊內容而尷尬…
4.針對結果進行展示
後台系統中，包含有各種繁雜的數據結果，嘗試隱藏過程，但需要讓用戶能快速找到它的來源和計算方式；
5.不要放棄那些表單樣式設計
那些重複的表單也可以設計搭配得很清爽…不要放任研發夥伴自行決定…
6.快速的繪製表單的方法
你肯定討厭很多的表單，哪怕藉助插件進行表單的繪製也讓我們頭疼，
有效的辦法是在Number/Excle 進行編輯，然後複製粘貼到你的sketch/PS 中…這很迅速，但記得修改它的細節…
最後，我們追求美，但不代表我們應該追求一些高風險的視覺圖表，找到合適的方法，完成你的工作，這是我們團隊的使命和目標，切記和你的同事保持緊密的聯繫溝通，UI的及時走查是界面高還原的有效保障….如果可以…請坐到前端旁邊…就像產品喜歡坐在你身旁一樣…. ：）
#一些 Sketch Dashboard 素材資源分享：
https://pan.baidu.com/s/1-ZFZ_FpvWBDC4KwWP7UfwA
密碼:dtg5
最後，希望我的文章能帶給大家幫助，也歡迎各位在下方留言，將你喜歡或常用的資源分享給我。祝各位工作順利！
推薦閱讀：
※史上最全的設計師裝備攻略①--iMac電腦篇
※四月設計白瓷盤
※UI設計的工作範疇有哪些？UI設計是做什麼的？
※文件命名最詳細的規範——新手轉向資深的必經之路（上）