2021-5-24 ui設(shè)計分享達人
RayData作為一個系列的可視化工具，內(nèi)容資產(chǎn)作為基礎(chǔ)的構(gòu)成發(fā)揮著重要的作用，在日益更新迭代的過程中，會發(fā)現(xiàn)每條產(chǎn)品線對圖表組件的需求都很繁重，無法避免地重復開發(fā)。通過開發(fā)通用型組件可以一定程度的解決問題，但是存在靈活性差，組件庫維護困難等問題，而且內(nèi)部產(chǎn)品圖表庫各自獨立，缺乏統(tǒng)一的設(shè)計語言。
通過對類似競品的調(diào)研，發(fā)現(xiàn)圖表做為承載數(shù)據(jù)信息的組件，本身只是工具，它的使用體驗優(yōu)劣還往往取決于業(yè)務(wù)需求、數(shù)據(jù)類型、圖表本身的視覺效果接受度等因素。而且圖表類型的豐富和靈活程度，使用的框架及響應(yīng)時間，商業(yè)或免費和開源狀態(tài)也都是評判標準之一。
無論是小而美的個人項目還是大數(shù)據(jù)可視交互管理系統(tǒng)，項目生命周期的前四分之三階段，進行的緩慢糾結(jié)，充斥著大量需求變更，新想法的臨時加入。當多個項目同時展開，圖表組件效果是否靈活多變、復用性的高低對制作人員生產(chǎn)力、客戶方耐力、項目最終達成時雙方的消耗力有極大考驗。
通過對類似競品的調(diào)研，發(fā)現(xiàn)常見的可視化圖表庫都存在自身的局限性，體量大，功能冗余，更新緩慢。最終促成了我們從兩個維度入手，提煉關(guān)鍵詞，簡化并轉(zhuǎn)化成圖表庫系統(tǒng)的功能點。
圖表存在很多分類方式，基于形狀命名、作者命名、抽象概念命名和數(shù)據(jù)結(jié)構(gòu)命名等。
為了更好的幫助使用者快速定位，我們簡化了圖表大分類，依據(jù)人對形狀輪廓最初的感知，調(diào)動直觀的感受來進行分類和命名。
整個圖表庫的設(shè)計層包含顯性和隱性的兩種，顯性的規(guī)范面向用戶，隱性的規(guī)范面向開發(fā)。
通過調(diào)研常見的工具類產(chǎn)品，結(jié)合對產(chǎn)品易用性的理解，我們把產(chǎn)品的顏色方案提出來單獨定義一個全局的顏色方案，以便一套配色貫穿整個項目使用，然后對通用的設(shè)置和個性化設(shè)置分開設(shè)計。
可視化的組合來源有四種：視覺暗示、坐標系、標尺以及背景信息。
其中視覺暗示是比較重要的組成，以直角坐標系結(jié)構(gòu)為例，對大分類下的參數(shù)進行深入挖掘。
從設(shè)計的角度出發(fā)，我們希望賦予圖表樣式更多的可能性，開放高度自定義的調(diào)節(jié)參數(shù)。
通常用戶在初次瀏覽圖表時會把注意力放在圖形的差異化上，比如突出的顏色、突出的圖形，但并沒有及時將所有的數(shù)值聯(lián)系起來，之后才會進行比較，然后再看整體、分布和多變量關(guān)系。在顏色和屬性系統(tǒng)中單獨設(shè)置最大值、最小值的顏色和樣式，可以使得圖表展示信息的信息維度更高一層。
數(shù)據(jù)可視化是基于物理世界反饋的信息，通過用各種視覺變量（例如圖形、顏色、維度）把數(shù)據(jù)進行編碼、再現(xiàn)的過程。
色彩是數(shù)據(jù)可視化中濫用和忽視最嚴重的變量之一，也是所有視覺變量中最富于變化的一種。
信息圖表除圖形外感官最明顯的就是顏色，為了能夠達到圖表設(shè)計的高度自定義，色彩的搭配、自定義的程度，每個圖元都有對應(yīng)的顏色設(shè)置。
從設(shè)計的角度出發(fā)，嘗試在顏色系統(tǒng)中加入陰影、發(fā)光、全局陰影等結(jié)構(gòu)，進一步還原設(shè)計的圖形處理習慣，豐富圖表的表達。
可視化項目的配色一般來源于實際需求和3D場景效果的搭配，通常是不能預判配色的。
在這種情況下如果需要幫助項目的快速搭建，預置方案就要做到覆蓋面廣，適應(yīng)性強，控制取色范圍，由此提出以下原則。
制定規(guī)范時候我們確定了默認的布局方式，綜合實際使用，以柱狀圖為例，寬度滑塊的最大對應(yīng)100%寬度，圖形撐滿，更貼近使用者的直覺，另外考慮到多端融合，涉及到一些放大預覽的功能，默認選用百分比布局更合理。
在實際配置圖表時候，圖形和文字的位置關(guān)系千變?nèi)f化，為了應(yīng)對這種情況我們引入了文字基線位置和相對位置作為位置參照。使用中配合偏移量調(diào)節(jié)基本能覆蓋所有的情況。
為了應(yīng)對項目靈活配置的需求，我們把圖表編輯和Config參數(shù)結(jié)合，可視化控制生成的圖表Config參數(shù)，直接導出到項目使用。
除了勻速動畫，為了達成更自然的動態(tài)效果，引入緩入緩出速度曲線，同時為了達成更豐富的表達，增加了一條簡潔的回彈曲線
動效是圖表數(shù)據(jù)表達的一個重要構(gòu)成，針對圖表的動效，通過總結(jié)圖元的運動方式，結(jié)合Material Design的一些處理方式，整理了一套圖表元素動效規(guī)范集合。
針對缺乏靜態(tài)數(shù)據(jù)等真實數(shù)據(jù)源，檢驗生成圖表的視覺效果的問題，我們?yōu)橛脩籼峁┝酥付ǚ秶S機數(shù)生成功能，可以快速生成與應(yīng)用項目數(shù)據(jù)相類似的效果。
顏色配置方案能在同一項目中起到控制整個顏色風格的作用，可以快速應(yīng)用到圖表上。
圖表庫在項目中的應(yīng)用
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
文章來源：站酷 作者:RayData實驗室
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( tweetduck.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://tweetduck.com