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.wnxcall.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.wnxcall.com