Web端數據管理平臺的可視化界面設計研究

王廣文，范佳悅，韓劍武

（河北工業大學，建筑與藝術設計學院，天津 300130）

引言

計算機、互聯網和物聯網等科技的發展，改變了人們的生活方式。互聯網擁有海量的數據，人們通過互聯網獲取對自己有用的信息，需要對大量的信息進行篩選?？梢暬臄祿畔⒁蚱渲庇^性，能使用戶快速識別哪些數據是有價值的，因此出現了對數據進行管理與視覺化處理的需求。基于這一需求，Web端數據管理平臺的開發與使用為管理、分析、處理大量數據提供了新思路。Web端又稱網頁端。在Web端所建立的大部分的數據管理平臺，主要是看重Web端的方便、快捷，能滿足平臺用戶對使用便捷、節省內存、提高效率等的訴求；數據指管理平臺中的圖片、音頻、文字以及交互功能等所有信息要素。如今，Web端數據管理平臺中的數據可視化還存在一些問題。本文對數據在平臺界面的數據可視化進行分析研究，找出數據可視化在界面中的設計原則。

一、管理平臺存在的數據可視化問題

目前，Web端數據管理平臺在設計時，沒有一個統一的標準，導致管理平臺界面的整體布局有多種的可視化方式，使管理平臺整體視覺混亂，找不到平臺布局規律，因此用戶在使用管理平臺時，存在整個使用過程不流暢、用戶工作效率降低、影響工作進度等問題。針對上述問題，需要從用戶角度出發，通過“構建心智模型”，使平臺數據可視化的設計方式在一定的范圍內使用相似的整體布局標準。

圖1

現在Web端存在大量數據管理平臺的功能按鈕等內外部不統一、對于平臺內的數據管理與處理的可視化設計不一致、數據信息傳達不準確、頁面之間相關性低下等一系列界面元素問題。通過“用戶體驗要素”中的框架層，從頁面之間元素種類出發，統一管理平臺的內部外部一致性等。

部分管理平臺頁面中的數據可視化，沒有重點，存在難找到所需要的信息、數據信息傳達模糊、數據排版樣式及管理平臺配色混亂等問題。使用“用戶體驗要素”中的框架層，從數據重要層級出發，決定各種數據在平臺中的可視化的位置大小動態和平臺配色。

二、構建心智模型理論

（一）基本概念

心智模型理論在上個世紀末就出現了，第一個對心智模型進行較全面概括的人是蘇珊·凱里（Susan Carey）：心智模型展現的是一個人對于某樣東西是如何運作的思考過程，例如一個人對于周遭世界的理解。心智模型是基于不全面的事實、過往的經驗，甚至直覺。心智模型會幫助塑造行為舉止。當人們處于復雜的環境中時，心智模型會影響人們關注什么，并且影響人們解決問題的方法和途徑①。

在本文的管理平臺數據可視化領域中，心智模型是指人們對于平臺中的功能或數據的呈現方式的思考，這個思考主要包括在平臺中怎樣合適地對數據進行可視化，盡管人們腦海中的心智模型是復雜的，不斷變化的，但設計師本身需要知道如何從復雜的心智模型中提取有用的信息，使設計師心中的模型無限接近用戶心中的模型，讓兩者在心中建立的模型是相匹配的，這有助于設計師們在最終的設計平臺上于一定范圍內使用相似的標準。心智模型的建立，也有助于設計師對平臺進行改進，對系統的升級迭代也具有指引的作用。

（二）設計原則

管理平臺數據可視化與“心智模型”有著共通的邏輯，根據蘇珊·凱里所概述的“心智模型”，梳理心智模型與平臺數據可視化之間的關系，建立出適合于平臺數據可視化的新的“心智模型”理念。通過圖1中所舉的例子，來解釋新的“心智模型”理念，在本文的數據管理平臺可視化領域中，心智模型是指在對平臺中的功能或數據進行可視化設計時，設計師心中的模型呈現在平臺上的樣子和用戶心中的模型是否匹配或相似。圖中以“數據”舉例，在設計師心中是圖1（左）的模型樣式，在用戶心中是圖1（右）的模型樣式，最后在不考慮其他訴求的情況下，設計師通過對自身心中的模型和用戶心中的模型進行信息提取與優化，最后設計出與用戶心中的模型相同或相似的平臺模型。

三、用戶體驗要素

（一）基本概念

《用戶體驗要素》②是一本有關設計思路的書，它清晰地解釋了產品設計的工作內容，全書用簡潔的語言系統詮釋了“用戶”“商業”“技術”三者之間錯綜復雜的關系，以及三者融合才是最重要的發展趨勢。用戶體驗要素包含了戰略層、范圍層、結構層、框架層、表現層五個層面，全書主要講述了用戶體驗為什么重要，如何認識這些要素以及要素的應用。比起工具或技術更關注于思路，最終提高體驗的流程質量。

（二）結構層設計

通過對平臺數據可視化與結構層和表現層中的方法理論進行綜合分析總結，根據兩者之間的互通點，找出符合平臺數據可視化的設計原則，加以應用。通過分析，結構層中的界面外觀、信息設計與平臺數據可視化之間存在聯系，總結得出設計原則（結構層）：考慮在Web端的平臺上一些細節元素與其他軟件存在不同之處，在此基礎上，根據平臺數據信息的內容，以及其希望達到的目的，選擇正確且合適的界面元素，以及要統一不同界面之間相同或類似元素的一致性。對于復雜的文字數據，可先為數據分出層級，再根據產品及用戶的訴求，使用合適的排版方式。

（三）表現層設計

通過分析，表現層中的視覺注意力和配色方案與平臺數據可視化之間存在相關性，總結得出設計原則（表現層）：在了解人類視覺路線的基礎上，基于刪格線等方法，確定平臺中數據可視化的位置大小等。根據平臺所屬公司或相關行業及用戶訴求，決定平臺主色相關輔助色，最終決定配色方案和排版樣式。在對平臺數據進行可視化設計時，通過使用以上的設計原則，最終統一管理平臺內部外部數據可視化的一致性，決定平臺的配色方案與排版方式，以及接下來平臺數據可視化可能發展的方向。

四、設計原則可行性分析

以北京曠視科技公司中Data++團隊的越影數據管理平臺來論證該設計原則的可行性。根據設計原則對平臺進行設計，首先，因平臺用戶為公司員工及與公司業務相關人員，所以對以上人群進行了用戶調研，分析調研結果得出，用戶最主要的訴求是希望平臺可以使用簡單，快捷，提升工作效率及相關功能效率，同時也希望平臺不要太死板等。根據以上訴求，確定平臺開發在使用快捷的Web端上。

結合設計原則第一條，設計師在心中規劃平臺整體模型，根據調研取得用戶心中的平臺模型，兩者相互結合，如圖2中的第一條所顯示的，設計出更接近用戶心中的平臺模型，只有越接近用戶心中的模型，設計出的平臺在用戶使用時，才能實現上手快，提高工作效率的目的。

圖2

結合設計原則第二條，因Web端自帶返回按鈕并且平臺頁面層級不多，所以平臺不必做返回按鈕。平臺目的是希望員工通過平臺可以更快地完成工作，如圖2中的第二條所顯示的，減少了平臺中的裝飾元素，單純以文字及文字顏色來促進用戶更明確更快速地分辨功能作用和當前所在頁面。平臺中的文字數據信息進行了分層級處理，以左對齊的排版方式，使辨識度更高。

結合設計原則第三條，如圖2中的第三條所顯示的，以平臺整體進度和階段進度的數據為例，為使數據比重更清晰，數據進行餅狀圖可視化后，以人類的從上到下，從左到右的視覺路線為基礎，以重要的整體進度數據放左，稍次一級的階段進步數據在右，因階段進步數據比整體進度數據更為復雜，在以一定程度上對數據進行了放大處理。

在設計原則的指導下，設計出一套越影數據管理平臺界面，優化了平臺的使用方式，提高平臺的使用效率。論證了該設計原則的可行性。

五、結語

此研究對心智模型、用戶體驗要素結構層和表現層與Web端平臺數據可視化的聯系進行了分析總結，最終得出一套符合平臺數據可視化的設計原則。并以北京曠視科技公司中Data++團隊的越影數據管理平臺為例子，討論了此設計原則的可行性。然而這種設計原則只適用于Web端平臺的數據可視化設計，在其他環境下，由于互聯網界面的復雜性，導致設計原則無法適用于其他情況，因此還需要更進一步的研究。

注釋：

①蘇珊·凱里（Susan Carey）.《認知科學與科學教育》（Cognitive Scienceand Science Education），1986年.

② Jesse James Garrett.用戶體驗要素（中文版）[M].范曉燕，譯.北京：機械工業出版社，2008.