亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

過去一年半，兩位工程師和我利用工作業(yè)余時間初步完成了D3數(shù)據(jù)可視化開源庫Britecharts的設計和開發(fā)，終于在上星期，我們把它給放出去了！這一路下來，我學會了從不同角度來考慮一個開源屬性的數(shù)據(jù)可視化圖表庫的設計，不論是圖表設計本身，還是設計開源的不同，對無障礙的測試和考量，Logo設計，甚至是合作流程，這里面有很多東西希望能和大家分享。順便一提我的公司Eventbrite是做活動平臺的，所以下面很多例子都是圍繞活動票務話題。

設計開源 vs 量身訂做

設計師絕大多數(shù)都是走“量身訂做”這條線路的：要么是甲方，要么是產(chǎn)品經(jīng)理，對終稿或產(chǎn)品有一個明確或大概的定位，有相關的市場分析，有數(shù)據(jù)，有商業(yè)目標等等。而以開源為目的的設計則要寬泛很多。因為不知道用你開源庫的對方是誰，使用的目的為何，數(shù)據(jù)結構怎樣，受眾群體有哪些，所以很難制訂出統(tǒng)一的規(guī)則。在這里，圖表的靈活性和可延展性成為了設計數(shù)據(jù)可視化開源庫的關鍵。

以下面這個圖為例：同樣是分組柱狀圖，既可以表現(xiàn)同類別的數(shù)據(jù)（第一組的一場活動各票價按月銷售情況），也可以往上一層級，表現(xiàn)不同分組的數(shù)據(jù)信息（第二組的多場活動按月銷售情況）。

考慮到以上情況，保證圖表可用性的同時，延展性就體現(xiàn)在了顏色和元素等的選擇上。除了默認的一組不同色度的調(diào)色板以外，還提供了八套不同明度的調(diào)色板（下圖），供用戶選擇，當然，用戶也可以自定義圖表的顏色。因為信息太多，圖表的色彩設計這個流程以后會分別寫一篇文章。

靈活性和可延展性對以后每個圖表的設計都起到導航作用，多做參考，腦補每種圖表可能會用到的數(shù)據(jù)類型會對設計起到很大的幫助。

圖表類型

網(wǎng)上對于數(shù)據(jù)可視化最佳實踐（哪種情況用哪種圖表，最多表現(xiàn)幾組數(shù)據(jù)）的好文章很多，我以后可能專門會寫一篇這個話題。這篇我們避開最佳實踐不談，而從開源庫里最可能常用到的圖表說起：

線性圖 (Line chart)

這里我做了三種線性圖：單組數(shù)據(jù)，多組數(shù)據(jù)，可滑動線性圖。單組數(shù)據(jù)的線稍有漸變色，體現(xiàn)了時間軸和y軸之間的關系，也給單調(diào)的線添加了一點個性。多組數(shù)據(jù)則是完全單色，因為多條漸變色會增加信息量，影響圖表的閱讀體驗?？苫瑒泳€性圖的設計則主要針對移動端。為了方便在不同場合的使用，x軸線和y軸線有可開關的設定，根據(jù)圖表的寬度不同這兩個軸線可以幫助閱讀。

柱狀圖 (Bar chart)

百變的柱狀圖即可以和線性圖一樣展示時間連續(xù)的數(shù)據(jù)，方便找到最高值（雖然不善于表現(xiàn)趨勢），也可以代替餅狀圖展示分組，更能集合以上表現(xiàn)分組的時間連續(xù)數(shù)據(jù)。這意味著設計元素需要更加自由，以便適應不同需求。

甜甜圈圖 (Donut chart)

基本上就是餅狀圖中間挖了個洞。這個圖表相對于傳統(tǒng)的餅狀圖來說因為掏出了中間面積變化的雜音而更適合看到每個色塊的占比（雖然相較于柱狀圖還差的遠），又因為中間留白部分可以被利用來放文字和數(shù)據(jù)，再因為考慮到一般面板主頁(Dashboard)會有很多種圖表，餅狀圖色塊太大容易喧賓奪主，所以第一版Britecharts只設計了甜甜圈圖。當然顏色，粗細度，中空部分文字是否顯示都是可以調(diào)節(jié)的。為了方便閱讀，最大值的色塊從正中間的上方向右畫起，第二大值到最小值則在正中間的左邊，這樣視覺上達到平衡，也方便閱讀。

面積圖 (Area chart)

有點像線性圖，但有所不同，面積圖的大面積色塊更適合展示“量”的概念，尤其是層疊面積圖，既是個體在整體中的關系，又是時間連續(xù)。

在這些最常見的圖表基礎上還有方便瀏覽時間跨度長數(shù)據(jù)的導航圖 (Brush chart)，可以和任何展示時間連續(xù)的圖表共同使用; 另外還有展現(xiàn)趨勢，像文字一樣可以閱讀的迷你圖 (Sparkline)，以后還計劃添加表現(xiàn)流程的?；鶊D (Sankey diagram)，展示數(shù)字密度的地圖等等。開源的魅力就在于一直能更新，更會借助他人的建議和幫助讓資源變得更優(yōu)秀，更豐富。

無障礙圖表設計

近一段時間越來越多的人開始對設計無障礙 (Accessible) 的產(chǎn)品產(chǎn)生興趣。作為設計師，很多時候我們會無意間忽視了很多因為年齡，疾病，或是生理上和我們不太一樣的用戶，他們有些對顏色明暗對比不敏感，有些分辨不出顏色的區(qū)別，還有些需要借助屏幕閱讀器來用聲音幫助他們“看”圖表。對于這些用戶，除了借助電腦或手機本身的無障礙功能，工程師可以通過給SVG圖形添加比如ARIA屬性等讓屏幕閱讀器更好識別圖形內(nèi)容，我們設計師也應該力所能及的讓產(chǎn)品本身滿足更多人的使用需求。從視覺設計的角度來看，最能幫上忙的就是保證色彩的明暗對比度，色度對比度，以及對色盲、色弱等的測試。測試的標準，用的工具、方法，操作實例等以后會單獨寫一篇。

Logo設計

因為是業(yè)余時間做的“副牌”，并不能直接掛公司的品牌，但畢竟考慮到Britecharts最初的用戶一定是自己的公司，我決定把Britecharts的logo作為主品牌的一種延伸，從主品牌的標識里提取共同點。最后因為想到“圖表”這個詞最先聯(lián)想到的是線性圖，所以選用了由同粗細的線組成的手寫體版本的Eventbrite logo作為范本。

對照著范本的基準線，字母比例，傾斜度，細節(jié)，先畫出了幾個logo的手稿，然后放到Illustrator里修改細節(jié)，調(diào)整粗細，再考慮到logo縮小后的辨識度，修改了字母B，最后成型。

Github的使用

因為一些個人項目里經(jīng)常使用Github，所以在這個項目上和工程師的設計和開發(fā)合作還是很順手的。我們在Issues頁面里來貼出bug和提出建議等，并通過標簽來給這些問題進行分類。

我們一共使用了12種標簽：
Bug： 使用過程中發(fā)現(xiàn)的bug；
Build：任何和開發(fā)里編譯相關的問題和建議；
Clean-Code：代碼清掃的工作；
Design：設計相關的工作；
Docs：文檔書寫相關工作，尤其對于開源項目至關重要；
Duplicate：當發(fā)現(xiàn)不同的人提交了重復或相似內(nèi)容的ticket，加上這個標簽，并附上相關ticket的鏈接，便于以后梳理；
Enhancement：本質(zhì)上不影響正常運行，但可以有所改進的產(chǎn)品建議；
Help Wanted：自己解決不了需要幫手就加上這個標簽；
Performance：和enhancement有點不同，performance更注重執(zhí)行層面上的質(zhì)量；
Proposal：提議開發(fā)產(chǎn)品里目前不存在的功能，要附上提議原因；
Question：有任何問題用這個；
Won’t-Fix：小組討論過認為不會考慮改進的ticket會被加上這個標簽，以后可能會重新回顧。

舉例說明
上面這個ticket用了設計和提議兩個標簽，建議開發(fā)?；鶊D，第一段交代?；鶊D的功能，可以展示的數(shù)據(jù)類型，以及實例；第二段解釋為什么我們需要?；鶊D，哪里能用上，最后附上參考鏈接。

小結

Britecharts才剛剛起步，作為Eventbrite第一個前端相關的開源項目，很需要更多的設計師和工程師參與進來，讓它成為所有人都能用的數(shù)據(jù)可視化系統(tǒng)。有感興趣的朋友們可以看這里了解一下怎么使用和開發(fā)這個D3開源庫，也希望大家能提出寶貴的意見和建議！下一步我會分享圖表元素設計以及標注的經(jīng)驗，設計師也能懂的D3開發(fā)經(jīng)驗，顏色設計的經(jīng)驗，無障礙UI設計的經(jīng)驗，還有Dashboard用研和設計的經(jīng)驗等。謝謝！