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