鏁版嵁鍙鍖?[娼滃叆娼滃嚭]

Posted 2021-04-02 UI璁捐杈句汉

鍜︼紵鏁版嵁鍙鍖栵紵

涓嬮潰涓ゅ紶鍥句綘鑲畾瑙佽繃锛孮Q 鐨勫疄鏃跺湪绾夸汉鏁板湴鍥句互鍙婂ぉ鐚弻11鐨勬暟鎹ぇ灞忥紝铏界劧姣忎釜浜虹殑鍙硶閮戒笉澶竴鏍凤紝浣嗗畠姝ｆ槸浠婂効鐨勮鍎?- 鏁版嵁鍙鍖栥€?/span>

锘?/span>

鏁版嵁鍙鍖栨槸杩戜簺骞存潵姣旇緝鐏殑涓€涓蹇碉紝浣嗕竴鐩存潵缁欎汉涓€绉嶉珮鍐风绉樹笉濂芥帴杩戠殑鎰熻锛屽挨鍏跺嚭鐜拌繖绉嶉珮涓嶅彲鏀€鐨勫浘褰㈡椂锛?/span>

绗竴鐪肩湅鍚婄偢澶╋紝绗簩鐪肩湅鍙戠幇鐪嬩笉鎳傦紝绗笁鐪肩湅瑙夊緱浠€涔堢帺鎰忓効鍟?span class="mq-31">馃槀銆?/span>

鍥犱负涓€浜涙暟鎹彲瑙嗗寲浣滃搧瓒婃潵瓒婂儚涓€涓壓鏈綔鍝侊紝瑙嗚褰㈠紡寰€寰€澶т簬瀹為檯鍔熻兘锛屼絾涓嶅彲鍚﹁锛岀偒鍜岀湅涓嶆噦鏈韩涔熸槸涓€绉嶇敓浜у姏銆?/span>

褰撶劧杩樻槸鏈夊緢澶氫紭绉€鐢氳嚦璁╀汉 WOW 鐨勬暟鎹彲瑙嗗寲浣滃搧锛岃浜烘繁娣辨劅鍙楀埌浜嗘暟鎹箣缇庛€?/span>

姣斿涓嬪浘鐨勫彲瑙嗗寲浣滃搧 A Day in the Life of American (鎼滅储鍓嶉潰鐨勫叧閿瘝灏卞彲鎼滃埌锛屾帹鑽愭闈㈢鏌ョ湅), 鍏剁敤1000涓渾鐐瑰睍鐜颁簡1000涓編鍥戒汉涓€澶╃殑鐢熸椿鐘舵€侊紝浠庡渾鐐圭殑鍔ㄦ€佸彉鍖栦腑鍙互娓呮櫚鍦扮湅鍒板悇涓椂闂寸偣涓嶅悓娲诲姩鐨勫崰姣旀儏鍐碉紝鍙互璇存槸闈炲父褰㈣薄浜嗐€?/span>锘?/span>

鍙﹀鏈変釜鏇存湁瓒ｇ殑鏁版嵁鍙鍖栦綔鍝?nbsp; (瀵撴剰鍍忔矙瀛愮殑鑸炶箞锛岃缁嗚В璇诲彲鐐瑰嚮鏂囧瓧鏌ョ湅)锛屽畠鍏充簬娉板潶灏煎厠鍙凤紝鏉ヨ嚜寰蒋鐨?Visualization and Interaction Team (VIBE)锛岃繖涓彲瑙嗗寲浣滃搧鐨勬暟鎹簱鍏ㄩ儴鏉ユ簮浜庢嘲鍧﹀凹鍏嬪彿锛屽寘鎷敺濂虫瘮渚嬨€佺エ浠风殑鍖洪棿銆佸叏閮ㄨ埞鍛樼殑鑱屼笟銆佹浜′汉鏁扮瓑绛夛紝閫氳繃鍍忔矙瀛愪竴鏍风殑灞曠幇鏂瑰紡灏嗚繖浜涘啺鍐风殑鏁版嵁娲荤伒娲荤幇鍦板睍鐜板湪鐪煎墠锛岀湡姝ｅ仛鍒颁簡璁╃湅鏁版嵁鐨勪汉鑳藉娌夋蹈鍦ㄦ暟鎹墍璁茬殑鏁呬簨涓紝鎴戞兂杩欏簲璇ュ氨鏄暟鎹彲瑙嗗寲鑳藉杈惧埌鐨勫緢妫掔殑澧冪晫锛孭.S. 闈炲父鎺ㄨ崘澶у鍦ㄧ數鑴戠鎵撳紑 SandDance 鎰熷彈涓€涓嬨€?/span>

锘夸负浠€涔堟暟鎹彲瑙嗗寲杩欎箞杩蜂汉锛?span class="mq-65">绌跺叾鍘熷洜锛屽叾鏈韩鏃㈡槸涓€绉嶈壓鏈張鏄竴绉嶄弗璋ㄧ殑绉戝琛ㄨ揪锛屼篃姝ｆ槸鍥犱负鍏舵槸绉戞妧涓庤壓鏈殑缁撳悎锛屾墠鑳藉湪涓婇潰鐪嬪埌鏁版嵁鐨勫畯浼熷拰浜烘€х殑鍏虫€€銆?/span>

鎺ヤ笅鏉ワ紝姝ュ叆姝ｉ銆?/span>

鍝︼紝鏁版嵁鍙鍖栥€?/span>

鏁版嵁鍙鍖栫殑鍘嗗彶灏变笉鍦ㄨ繖閲岃禈杩颁簡锛屾劅鍏磋叮鐨勫彲浠ヨ嚜琛屾悳绱煍?/span>

鏁版嵁鍙鍖栫殑鐩殑鏄瀵规暟鎹繘琛屽彲瑙嗗寲鐨勫鐞嗭紝浣垮叾鑳藉鏄庣‘鍦般€佹湁鏁堝湴浼犻€掍俊鎭紝杩欏彞鐪嬩技鏄竴鍙ュ簾璇濓紝浣嗕粛鏈変袱鐐归渶瑕佽鏄庯紝涓€鏄彲瑙嗗寲鐨?span class="mq-87">鏁版嵁鏈韩瑕佹湁浠峰€?/strong>锛屾湁浠峰€肩殑鏁版嵁灏辨槸鏁版嵁鐨勭淮搴︽竻鏅板苟涓旀牱鏈噺涔熻冻澶燂紱浜屾槸鑳藉寰堝ソ鍦?span class="mq-88">杩借釜鐩爣鏁版嵁锛岃涓嶅悓闇€姹傜殑鐢ㄦ埛鍦ㄤ娇鐢ㄦ椂鑳藉鐭ユ檽鐪嬬殑鏄粈涔堟暟鎹互鍙婃暟鎹墍澶勭殑浣嶇疆銆?/span>

鍦ㄥ疄闄呯殑宸ヤ綔鍦烘櫙涓紝骞舵病鏈夊お澶氭満浼氭帴瑙﹀埌澶绫诲瀷鐨勬暟鎹彲瑙嗗寲浜у搧锛岃€屾棤璁轰綘鍋氫粈涔堢被鍨嬬殑宸ヤ綔锛孌ashboard (鏁版嵁浠〃鐩? 鍩烘湰鏄綘涓€瀹氫細浣跨敤鐢氳嚦鍙備笌璁捐鐨勫彲瑙嗗寲浜у搧锛?瀵逛簬鍚庡彴浜у搧鎴?To B 绔殑浜у搧鏇存槸濡傛锛屾帴瑙﹂鐜囬潪甯镐箣楂樸€?/span>

鍥捐〃鍙鍖栧ぇ甯?Stephen Few 璇磋繃

A dashboard is a visual display of most important information needed to achieve one or more objectives; Consolidated and arranged on a single screen so the information can be monitored at a glance.

Dashboard 鍜屽叾浠栫殑涓€浜涙暟鎹彲瑙嗗寲浜у搧绫讳技锛屾棤璁鸿〃闈㈢湅璧峰涔堝鏉傦紝鍏跺疄閮芥槸婧愪簬涓€涓釜绠€鍗曠殑鍥捐〃锛屽仛濂戒竴涓?Dashboard 褰撶劧鏄粠鍋氬ソ涓€涓?Chart (鍥捐〃) 寮€濮嬶紝鎵€浠ュ墿涓嬬殑閮ㄥ垎涔熷氨浠庢暟鎹彲瑙嗗寲鐨勬渶鍘熺偣鍑哄彂锛岃亰鑱婄畝鍗曚笉绠€鍗曠殑鍥捐〃銆?/span>

鍙﹀涓€涓幇璞″氨鏄幇鍦ㄨ濡?ECharts 鐨勫紑婧愬浘琛ㄥ簱瓒婃潵瓒婂锛屾柟渚夸簡寰堝鐩稿叧浠庝笟鑰咃紝浠庤璁″埌鐩稿叧浠ｇ爜鐩存帴璋冪敤锛屼几鎵嬪氨鏉ュぇ澶ф彁楂樻晥鐜囷紝浣嗕篃甯︽潵浜嗕笉灏戠殑鍓綔鐢紝鏂逛究璁╀汉浜х敓浜嗕緷璧栵紝涔熶骇鐢熶簡鎯版€э紝鐢ㄦ儻浜嗙幇鎴愮殑锛屼篃灏卞共鑴嗘噿寰楁帰绱㈢敋鑷充紭鍖栵紝鏈潵鏄紑婧愬浘琛ㄦ柟渚挎垜浠仛鍑烘洿濂界殑浜у搧锛岀幇鍦ㄥ弽鑰屾垚涓轰簡鍒涙柊鍒涙剰鐨勫埗绾︼紝涔呰€屼箙涔嬪氨浼氬拷瑙嗙敋鑷冲繕璁颁竴涓熀纭€鐨勫浘琛ㄥ簲璇ュ浣曞幓璁捐锛岃繖鏍蜂笅鍘讳笉鏄骇鍝佷綋楠岃秺鏉ヨ秺濂戒簡锛岃€屾槸瓒婃潵瓒婇檲鏃ф鏉跨己涔忓垱鎰忎簡銆?/span>

鎵€浠ユ垜浠湁蹇呰鏆傛椂鍥炲埌鍘熺偣锛屽洖鍒颁竴涓釜鍩虹鐨勫浘琛紝鐜版湁鐙珛鐨勫浘琛ㄥ樊涓嶅鏈変簩鍗佸涓紝鑰屽鏋滅畻涓婂浘琛ㄩ棿鐨勭浉浜掔粍鍚堬紝灏辨湁涓婄櫨绉嶅浘琛紝鎵€浠ュ湪杩欎箞澶氱惓鐞呮弧鐩殑鍥捐〃涓紝濡備綍閫夋嫨锛岀敋鑷冲浣曡璁★紝鍏跺疄涓€鐩撮兘鏄竴涓棶棰樸€?/span>

Andrew Abela 鐢ㄤ竴寮犲浘灞曠ず濡備綍鍘诲睍绀哄浣曟牴鎹嚜宸辩殑闇€姹傚幓閫夋嫨涓€涓悎閫傜殑鍥捐〃锛岃繖寮犲浘鍥惧熀鏈鐩栦簡鍩烘湰鐨勫父鐢ㄥ浘琛紝涓嬩竴绡囨枃绔犱細瀵瑰叾杩涜璇︾粏瑙ｈ銆?/span>

瀹為檯宸ヤ綔涓紝涓嶄竴瀹氳兘澶熻繍鐢ㄥ埌浠ヤ笂鐨勫叏閮ㄥ浘琛紝浣嗗鏋滀粩缁嗙湅锛屽熀鏈笂鎵€鏈夌殑鍥捐〃閮藉拰Column Chart (鏌辩姸鍥?, Pie Chart (楗肩姸鍥?, Line Chart (鏉″舰鍥? 杩欎笁绫诲浘琛ㄦ湁閭ｄ箞鐐瑰叧绯伙紝瀹冧滑璇存槸浣跨敤棰戠巼鏈€楂樼殑涓夌鍥捐〃锛屼篃鍙互璇磋繖涓夌鍥捐〃鏄浘琛ㄧ晫鐢氳嚦鏁版嵁鍙鍖栫殑鈥滀笁鍘熻壊鈥濓紝缁忚繃褰兼鐨勬惌閰嶈繘鍖栨垚涓轰簡鏇村澶嶆潅鐨勫浘琛ㄤ互婊¤冻鏇村鏍风殑闇€姹傘€?/span>

So, 灏卞厛浠ユ渶绠€鍗?Column Chart (鏌辩姸鍥? 涓轰緥娼滃叆娼滃嚭锛?/span>

鍏堢敤涓€涓渶鍩烘湰鐨?Column Chart (鏌辩姸鍥? 寮€濮嬶紝鍏堢湅鐪嬩笅鍥撅細锘匡豢

鑻ユ槸绗竴娆＄湅鍒版鍥撅紝鎰熷彈涔熻浼氫笌鎴戜竴鏍凤紝灏忓皬鏌辩姸鍥剧珶鐒惰繕鏈夎繖涔堝鐨勪笢瑗匡紝铏界劧鍥捐〃鏍峰紡鏈夌偣杩囨椂锛屼絾鍗村緢鍏ㄩ潰锛屼篃璁哥洰鍓嶅疄闄呮儏鍐典笅骞朵笉浼氳繍鐢ㄥ埌涓婇潰鐨勬墍鏈夌殑鍏冪礌锛屽皢涓婇潰鍥剧殑鍏冪礌绠€鍖栦笅鐨勮瘽灏变細寰楀埌浠ヤ笅鐨勫浘锛?/span>

鍙互鎶婃暣涓?Chart 鍒嗕负鍑犱釜閮ㄥ垎锛?/span>

Chart Series (鍥捐〃涓讳綋)

浣滀负琛ㄦ牸鐨勪富浣擄紝涔熸槸鏈€鍚稿紩鐪肩悆鐨勯儴鍒嗭紝涓昏鐨勪綔鐢ㄤ负鍙鍖栨暟鎹紝灏卞儚鐞冨満涓婄姣斾箶涓圭殑瑙掕壊锛屾棦鏄エ鎴夸繚璇佸張鏄悆闃熷埗鑳滄硶瀹濄€?/span>

Title: Chart Title & X/Y-axis Title (鏍囬)

琛ㄦ牸鐨勬爣棰樹篃鏈夐潪甯搁噸瑕佺殑浣滅敤锛岃兘澶熷府鍔╃敤鎴疯繀閫熼攣瀹氱浉鍏充俊鎭紝涓虹敤鎴疯妭鐪佹椂闂达紝鍍忔槸鐞冨満涓婄殑涓绘暀缁冿紝涓嶈兘鐧惧垎鐧句繚璇佺悆闃熻儨鍒╋紝浣嗕竴娆″阀濡欑殑鎴樻湳灏辫兘璧锋鍥炵敓锛屽ず璧拌儨鍒┿€?/span>

Axis: Time Axis & Tick Mark (鍧愭爣杞村拰鍒诲害绾匡紝姣旇緝瀹规槗蹇借涓斾笉鏄撳療瑙夌殑閮ㄥ垎)

鍧愭爣杞村湪鍥捐〃涓線寰€瀹规槗琚汉鎵€蹇借锛屼絾灏戜簡瀹冿紝鏁翠釜鍥捐〃鏍规湰鏃犳硶宸ヤ綔锛屾湁绉峃BA涓摑棰嗙悆鍛樼殑鍛抽亾锛屽叧娉ㄥ害涓嶉珮鏁版嵁涓嶈捣鐪硷紝浣嗗鏋滃皯浜嗕粬浠紝鐞冮槦鐨勮儨鍒╁氨鏃犳硶淇濋殰锛涜€?Tick Mark (鍒诲害绾? 鐨勭缉鏀鹃€昏緫涔熸槸鍥捐〃璁捐涓潪甯搁噸瑕佺殑涓€鐜紝杩欏皢浼氬湪鍚庣画鐨勬枃绔犱腑杩涜涓撻瑙ｈ銆?/span>

Label: X/Y-axis Label & Value Label (鍧愭爣杞寸殑浠ュ強鍚勪釜鍒嗙粍鐨勬暟鍊?

Label: 鍜孉xis鐨勮鑹茬浉浼硷紝涓昏璧疯緟鍔╀綔鐢紝鑳藉澧炲姞鍥捐〃鐨勬槗璇绘€т笌鏄撶敤鎬с€?/span>

Legend (鍥句緥璇存槑)

鍥句緥璇存槑鐨勮鑹叉湁涓€浜涘按灏紝鍦ㄤ竴浜涙儏鍐典笅鐢氳嚦涓嶉渶瑕佸畠锛屼絾涓€涓ソ鐨勫浘渚嬭鏄庤繕鏄兘澶熸彁楂樻晥鐜囧拰鍑忓皯閿欒璇嗗埆鐨勩€?/span>

Grid Line (缃戞牸绾?

瀵逛簬杩芥眰鏋佺畝椋庢牸鐨?Stephen Few 鏉ヨ锛岃儗鏅綉鏍肩嚎灏辨槸澶氫綑鐨勶紝浣嗗畠鍦ㄨ浣庝及鐨勬儏鍐典笅杩樻槸鏈夌伒鍏変竴鐜扮殑鏃跺埢瀛樺湪銆?/span>

涓嬮潰灏卞垎浜竴浜涗紭绉€鐨勭粏鑺傛渚嬶細

1

 

杩欎釜 Dashboard 灏卞緢鑱槑鐨勶紝鍦ㄧ綉鏍肩嚎涓婂仛浜嗕簺鏂囩珷锛屽埄鐢ㄩ檮鐫€鍦ㄧ綉鏍肩嚎涓婇棿闅旂殑缁嗙嚎鏉ュ尯鍒嗕笉鍚屽搴︾殑鏁版嵁锛屾棦娌℃湁寰堢獊鍏€锛屼篃杈惧埌浜嗕骇鍝佺洰鏍囷紝鍙互璇存槸杈惧埌浜嗗洓涓ゆ嫧鍗冩枻鐨勪綔鐢ㄣ€?/span>

2

杩欎釜鍙岃酱鏉″舰鍥剧粏鑺傚仛寰椾篃寰堜笉閿欙紝鐢变簬鏄弻杞达紝寰堝鏄撹浜哄垎涓嶆竻鍝潗鏍囪酱鍜屾暟鍊肩殑瀵瑰簲鍏崇郴锛岃€屽畠浠呬粎鏀瑰彉浜嗕笅鍧愭爣杞存爣棰樼殑棰滆壊锛屽氨寰堣交宸у湴瑙ｅ喅浜嗚繖涓棶棰樸€?/span>

3

杩欎釜鍥捐〃鏄竴涓?Dashboard 鐨勪竴閮ㄥ垎锛岃€屽畠寰堝ソ鐨勭偣鍦ㄤ簬鍥句緥璇存槑锛屽叾鐢ㄤ簡鍜屽浘琛ㄤ富棰樼浉鍚岀殑褰㈢姸鍜岄鑹叉潵璇存槑锛岃繖鏄釜寰堝ソ鐨勪範鎯紝鎻愰珮浜嗚瘑鍒晥鐜囬檷浣庝簡璇瘑鐜囥€?/span>

杩樻湁寰堝浼樼鐨勬暟鎹浘琛ㄥ彲瑙嗗寲妗堜緥锛屼絾鏈変竴鐐规槸姣嬪焊缃枒鐨勶細杩欎簺鐪嬩技寰皬鐨勭粏鑺傜湡鐨勮兘澶熸彁鍗囦骇鍝佺殑浣撻獙锛屽綋鐒跺鏋滆兘璁╀綘鐨勭敤鎴峰湪浣跨敤鏃?span class="mq-279">浼氬績涓€绗?/strong>锛岄偅鍙氨澶編濡欎簡銆?/span>

鍏跺疄浠ュ墠杩樻湁涓€涓緝涓哄按灏殑鍦烘櫙锛屽湪璁捐鍥捐〃鏃讹紝鎯宠鎼滅储鍥捐〃鏌愪竴閮ㄥ垎鐨勮寖渚嬩絾鍙堜笉鐭ラ亾鍏跺叿浣撳懡鍚嶏紝涔熶笉鐭ラ亾涓€浜涘浘琛ㄧ殑姝ｈ鍙硶锛岀灛闂村氨鍔犲ぇ浜嗘悳绱㈢殑鎴愭湰锛屾墍浠ュ笇鏈涜繖涓?nbsp;鏁版嵁鍙鍖?[娼滃叆娼滃嚭] 绯诲垪鑳藉涓轰綘鎻愰珮涓€浜涙晥鐜囷紝褰撶劧杩欏彧鏄紑濮嬸煒?/span>

娆㈣繋鎰熷叴瓒ｇ殑鍚屽娆㈣繋鍏虫敞 404FoundSpace, 鍚庡彴鐣欒█澶氬浜ゆ祦

鍏虫敞銆嶶I璁捐杈句汉銆?/span>

鐪嬫洿澶氱簿閫塙I璁捐鏂囩珷

鈫撯啌鈫?/span>