手機APP中數據可視化設計分析——以“不繁地理”為例

張璐婷

摘要：地理知識的有效學習一直是中學生面臨的難題，大數據和可視技術的發展，可以為學生及地理愛好者提供學習地理的手機APP平臺。作者首先闡述數據可視化的起源和概念，其次針對“不繁地理”中地理學習的規律性、易學性和可持續性發展這三個特點展開深入的分析，最后探究手機APP中數據可視化設計的應用前景。得出基于大數據時代和網絡技術的蓬勃發展，地理知識數據呈現規律性、易學性與可持續性發展不但能幫助用戶學習與應用，也有利于地理教學、地理空間等相關領域高速發展。在面對大量繁雜、難以記憶的地理數據知識時可視化設計能夠幫助用戶解決實際的地理問題，提高用戶學習的效率和探索能力。

關鍵詢：數據可視化設計 數據共享 可持續性發展 地理空間 地理教學

中圖分類號：TB472

文獻標識碼：A

文章編號：1003-0069 （2020） 04-0108-03

引言

隨著大數據的發展和云計算的推動，數據以更加可視化和交互性的形式運用在手機APP中變得司空見慣，與此同時，用戶對于數據可視化的要求也越來越嚴格，‘c人類的21世紀正在被各種數據形成——計算——反饋——交易的循環中不斷地被接納。”[1]正是由于數據可視化設計在手機APP中的普遍，教育類、體育類、醫療類等的數據可視化設計APP產品層出不窮。然而，數據可視化設計在兒童地理教學方面的研究案例屈指可數，普及地理知識的手機APP產品在市面上幾乎少見，如果將地理知識普及運用到手機APP中，不但能為更多的中小學生探索地理空間數據的知識提供幫助，而且能培養兒童熱愛學習地理的濃厚興趣。

“不繁地理”正是基于以上背景所制作的一款地理知識學習類APP，在APP中將大量難以記憶的地理知識以數據可視化的形式呈現，它解決了書本知識枯燥乏味的弊端，提高用戶學習的自主性和探索能力。最終為用戶提供一個有規律性、易學性和可持續性發展的地理學習移動端平臺。

一、數據可視化設計概述

（一）數據可視化的起源：17世紀，由于大航海時代的到來，笛卡爾發展出了解析幾何和坐標系，在兩個或者三個維度上進行數據分析。于此同時，早期概率論（Pierre de Fermat與Pierre Laplace）和人口統計學（John Graunt）研究開始出現。這些早期的探索，開啟了數據可視化的大門，數據的收集、整理和繪制開始了系統性的發展[2]。

到達21世紀以后，數據可視化有了質的飛越。縱觀幾百年的發展歷程，數據可視化技術精益求精，不斷地運用到科技、政治、經濟和商業等領域當中，成為了社會發展和人類進步的重要驅動力。

（二）數據可視化的概念：數據可視化是指將數據或者大型數據集以圖形圖像的方式進行視覺表達的形式，傳統的數據可視化最普遍的表達形式主要是餅圖、柱狀圖、條形圖、折線圖和散點圖等，此類直觀的圖表能夠有效地傳達出數據的特征，最終使數據更容易被大眾所接納與采用。

隨著計算機領域的蓬勃發展，數據可視化的形式也有所進步，由起初靜態的表達形式逐漸變化為帶有動效和交互的表達形式，這種轉變是一種必然的向上趨勢。當代的數據可視化重視設計與技術的協同合作，其呈現效果，不但關注數據本身的價值與意義，由數據內容指導其表現形式與藝術風格，也重視用戶對數據可視化應用的體驗。

二、“不繁地理”APP中數據可視化的特點

（一）規律性：在地理知識之間具有緊密的規律關系，當學習者掌握了規律性后能夠增強自身的創新思維與邏輯分析能力，激發學習中的求知欲望。作者在軟件開發前運用數據導向圖、競品分析圖及功能需求腦圖將地理知識中的規律性進行展現，使用戶進一步開拓思維，循序漸進地進行地理知識的學習，最終逐步突破地理知識重點與難點。

1.數據導向圖：圖1所示在此款產品當中需要將數據作為核心的數據導向，明確了解這些數據包含哪些、不包含哪些。在明確主要的功能導向后，需要對于數據進行整理，數據的整理過程要求準確性和高效性，在此基礎之上再進行數據本身的解讀和擴展，將數據以一種更高端可視的方式進行融會貫通。

2 競品分析圖：圖2所示競品分析的制作有助于設計者設計出符合自己產品的功能需求方案。本款產品的對比對象為一款名為“高考地理通”的針對于高考地理學習類軟件。在競品中的界面主要以文字的形式進行展示，缺乏對于地理學科中數據知識的可視化設計，使用戶在閱讀大量的文字信息時失去對于學習地理知識的興趣與耐心，較難進行規律性的學習與記憶。

3.功能需求腦圖：圖3所示當設計者完整列出清晰的功能需求腦圖后，就能夠將所有的次要導向圍繞著核心導向，開始進行APP界面的排版與設計。功能需求腦圖有助于數據功能明確完善，使用戶有規律地進行理解和思考，讓用戶明白一組數據的背后不僅僅有著千千萬萬條數據的整合過程，更有著令人深思的數據知識維度。

（二）易學性：大數據時代，在互聯網上形成沒有數據就不真實的信息氛圍;而數據可視化，則形成了數據沒有圖像就沒有藝術的體驗。[3]“不繁地理”中拋棄了沉悶的文字畫面，作者運用數據可視化設計中點、線、面的特征，將圖形圖表和有效數據相互結合，使地理信息得到更妥善的展示和呈現。此種方式降低了用戶對于地理知識的學習難度，使學習者更加集中于產品本身的內容和信息，增加了界面中地理知識的易學性。

1.以焦點為核心的數據可視化設計——點數據可視化：點數據可視化包括散點圖、熱力圖、關系圖和蜂窩圖等。大部分的點數據可視化設計能用于表示地圖上的地理坐標等大量及其復雜的數據，然而也存在著諸多弊端，如圖4所示ECharts（enterprise charts，商業級數據圖表，是由百度公司開源的一款純JavaScript圖表控件庫，并且支持IE，Chrome.Firefox在內的多種瀏覽器。[4]）繪制的1 990與201 5年各國家人均壽命與GDP散點圖。從圖中能夠看出涉及到的信息點多并且錯綜復雜，如果用戶是非專業的數據可視化工作人員，對于數據的敏感程度小，捕捉與觀察數據的速度低。那么將很有可能造成對整個數據的理解模糊、重點偏移的問題。

為解決上述問題作者在“不繁地理”中將點數據進行圖形化的處理，形成點狀圖形化分析圖。如圖5所示以一個人的圖形為一個焦點，許多人堆積在一起形成一條線，也能夠看成一個面。此時的點不是錯綜復雜與難以理解的，這個點是清晰的一個單位，也是畫面的設計基礎。此時的線段與面積不是單一的表達而是組合的產物和畫面的輔助。這種相輔相成的關系最終達到畫面藝術性的體驗效果。

2.以線段為核心的數據可視化設計——線數據可視化：線數據可視化包括折線圖、路徑圖、線熱力圖等。運用線段進行數據可視化設計更容易表現一組數據的上升或者下降的趨勢變化。線數據可視化圖也是眾多公司和企業從業人員進行年度總結報告等匯報工作的首選之一，在日常辦公以及商業洽談的場合當中使用廣泛。線段數據可以有長短之分，也可以有顏色的區分，不同的顏色更容易表達線段不同的屬性，如圖6所示為ECharts繪制的北京空氣質量指數折線圖，在圖中由于數據密集的原因線段的顏色越深所想要表達的數據量越大，線段的顏色明度越亮所想要表達的數據量越小。此種明暗關系能夠進行很好的區分對比，但也僅僅只針對于量化的區間數據而言。在不能夠進行明顯的量化區間面前，單色線段設計才是更好的選擇。

在“不繁地理”中，如圖7所示的折線分析圖則是上述所說的無明顯區間關系的單色線段設計。用一種顏色和一條線段的高低起伏展現出13個人口過億的國家之間人口密度的數據，這種“少就是多”的“簡法”原則增加了畫面的清晰度，減少了用戶的視覺辨析度。

3.以面積為核心的數據可視化設計——面數據可視化：面數據可視化設計包括餅狀圖、柱狀圖和桑基圖等。柱狀圖是點與線融合的最好呈現，是一種最常見的數據可視化設計的表達方式。在柱狀圖當中也需要面與面之間顏色的相互區分，如圖8所示為ECharts繪制的某地區蒸發量和降水量柱狀圖，在圖中通過不同的顏色展現了不同的屬性，準確表達了屬性與屬性之間的比較關系。但是在圖中只標出兩種元素的最大值、最小值與平均值的數據表現，對于每月的數據沒有在圖中給出精確的數字。此種方式不利于用戶獲得精確數據。

在“不繁地理”中借鑒了ECharts的柱狀繪圖形式，將兩種具有關聯性的元素進行結合最終呈現出元素間的數據對比。如圖9所示的柱狀分析圖運用顏色的區分形式進行各個國家之間比例的數據對比，但根據上述無精確數據標簽的問題，作者在圖9中增加了數據表來進行解決，使地理數據知識更利于用戶進行觀察。

（三）可持續性發展：可持續性發展是城市生態文明建設與經濟社會發展的核心推動力。近年來，增強可持續性發展作為國家戰略任務的重中之重，習近平總書記曾深刻指出，“發展必須是遵循經濟規律的科學發展，必須是遵循自然規律的可持續發展。”[5]因此作者在“不繁地理”中將地理知識賦予了可持續性發展的重大涵義，在進行APP的界面設計當中針對可持續性發展這一鮮明特點做了配色上的方法論研究。

1.聯想法則：在“不繁地理”七大洲的圓環圖中以面數據可視化進行設計，面數據可視化離不開顏色與顏色的區分，當人們看到某種顏色時，自然而然地會聯想到某人或某物。如圖10所示在奧運會的五環設計當中運用了聯想的原則，黃色讓人聯想到黃色皮膚的亞洲人;紅色讓人聯想到美洲人熱情的性格;綠色代表大洋洲，使人聯想到大洋洲上草原繁茂，生態環境優美的景色……以此類推。

2.提取法則：借以上原因如圖11所示七大洲的圓環圖顏色設計也以五環的顏色作為了參考色，但五環中沒有涉及南極洲的顏色是由于南極洲上并沒有常駐的人口，常年寒冷被冰雪覆蓋。于是作者從網絡中搜集了眾多南極洲的攝影或繪畫作品，從中觀察這些圖片中主要的顏色，最終提取了能夠代表南極洲的白色進行了配色設計。

通過以上兩種色彩法則的設計具有以下兩大優勢：一是能夠使用戶通過顏色的聯想法則及提取法則對涉及到的地理數據知識形成可持續性和連續性的記憶。二是用戶可持續記憶后再在今后的生活或者學習中遇到此類知識時能夠迅速地從記憶中抽取線索獲得解決方法，最終達到讓地理知識轉化為“以我為源，為我所用”的目的。

三、手機APP中數據可視化設計的應用前景

（一）機遇：19世紀是小說定義了文化，20世紀是電影定義了文化，而21世紀的文化將由界面來決定。我們的生活正被界面中的數據驅動著，所以如何用設計的語言制作讓人驚艷的界面對數據和信息進行生動的講述是未來的機遇。嘲這種機遇需要可視化與數據的相互結合，可視化是更容易幫助人們解決問題和獲取信息知識的媒介，而數據更像是在媒介中無處不在的樞紐。在現有手機APP中的可視化設計展現的形式特點豐富、顏色突出，這是由于用戶對于可視化設計的界面要求更加趨向于精美的設計及充滿藝術感的畫面，但是用戶有時總會覺得缺乏關鍵性的點綴和裝飾，這其中的關鍵問題則是缺少數據的動靜支持。有了數據乃至是大數據動與靜的支持，在動和靜之中可視化設計不再像是缺少了靈魂的軀體，它會變得更加光彩奪目、耐人尋味。

數據共享與共贏的理念正貫穿著網絡和各個國家之間的發展與聯系。各大互聯網巨頭們正思考著如何運用現有的數據進行財富創造，對于用戶而言正渴求一種數據互聯的服務。而真正處于底層的數據鏈由于某種安全問題卻從未向大眾乃至企業開放過，也許現在用戶所掌握的數據量只是冰山一角。這片廣闊的數據庫系統需要嚴格的系統處理才能展現給大眾，通過一層層的篩選和洗滌，最終將會被采納到互聯網的各個角落中，被互聯網用戶所熟知與索取。

（二）挑戰：在地理學習類手機APP中數據可視化設計存在著空間局限眭、數據復雜性以及數據智能化的問題。

1.空間局限性：就空間局限性可以分為手機屏幕尺寸的限制以及用戶對于屏幕中數據的接受程度。數據可視化設計師在使用時需要選擇的既不是“最經典”，也不是“最新潮”，而應該是“最合適”演繹的內容，得思考如何用已有的操作體系和符號的組合來達成最好的交互方式。口1手機屏幕尺寸的變化直接影響著手機分辨率的展現，對于用戶來說，用戶對于屏幕的數據掌握程度不一，更重要的是用戶的視覺維度不同，有時更大的屏幕尺寸也許不能夠幫助用戶更準確地掌握數據，反而誤導了用戶的視覺范圍。所以這就要求設計師在進行不同屏幕尺寸大小的界面設計時，掌握界面中的更多設計細節。

2.數據復雜性：對于數據復雜性方面而言，現在有許多的企業和公司都過于崇尚甚至是依賴數據可視化設計，認為數據可視化設計能解決一切數據問題。但是相反，有時將簡單的數據進行復雜的數據可視化設計反而多此一舉不能被用戶所接受，簡單清晰的數據有時更被用戶所快速掌握。為了解決這一數據復雜性的問題，企業和公司必須做出努力才行。例如，應該規范化地將數據進行分類的篩選，哪些該進行數據可視化設計，哪些數據直接呈現給用戶更好，哪些數據太過于復雜應該怎么簡單化，設計完畢后應該反復地進行測試和修改等。未來任何領域的普通個人均存在著大數據分析的需求，‘c人人都懂大數據、人人都能可視化”將是大數據領域的發展目標之_。[8]因此，數據可視化設計應該圍繞著用戶為使用者所服務。

3.數據的智能化：對于數據的智能化挑戰問題而言，Al（人工智能）是近年互聯網行業最為火熱的主題之一，將新媒體數據可視化技術與人工智能緊密結合便可使該技術能夠進行更深層次化的智能應用。[9]現在數據可視化設計大部分處于靜態的界面設計狀況之下，如果能夠將Al與數據可視化設計相互結合，那么不但能夠帶動手機APP中數據可視化設計與人工智能的共同進步，更能迸發出意想不到的火花，這個火花是數據可視化設計與人工智能共同的福祉。

結語

綜上所述，由于大數據時代和網絡技術的不斷發展，數據可視化設計在手機APP中扮演不可或缺的角色。使“不繁地理”APP中的界面變得更加規律性、易學性與可持續性發展。這些特點體現出視化的技術不但幫助用戶解決實際問題，而且也引導有關決策的判斷，正是用戶所值得擁有的一筆財富。互聯網領域提倡互利共贏的背景之下，數據可視化設計擁有著廣闊的發展前景，特別是對于地理方面的應用前景充滿曙光。在地理教學、地理空間等相關領域數據可視化設計正以一種勢不可擋的態勢在發展。在未來，社會對于數據可視化設計與地理教學相關的高級人才需求將會越來越大。在這一情況之下，需要相關技術部門做出努力，不斷完善數據可視化設計與手機APP之間的交互性與智能性。.

參考文獻

[1]楊寧濤，健康類App的UI界面設計中數據可視化的應用研究[D]江南大學，2017

[2]雷婉婧，數據可視化發展歷程研究[J]電子技術與軟件工程，2018 （12）：195

[3]孫品一，周峰，探討大數據時代下的數據可視化[J]設計，2016 （07）：137

[4]黃宇棟，百度Echuts在數據可視化分析中的應用[J]金融科技時代，2018 （06）：43

[5]趙祥，從十九大報告看習近平總書記可持續發展思想[J]理論參考，2017 （11）：49

[6]席昱倩，大數據時代可視化設計的價值與前景[J]現代商業，2016 （06）：87.

[7]王聞儀，數據可視化設計的應用研究[J]設計，2019 （07）：50

[8]任磊，杜一，馬帥，張小龍，戴國忠大數據可視分析綜述[J]軟件學報，2014，25 （09）：1929.

[9]楊曉文，移動終端下新媒體數據可視化技術應用探究[J]新媒體研究，2018 （21）：38