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