基于格式塔心理學的數字孿生大屏UI設計研究

羅聆瑗 尹璇

摘要：為了完善數字孿生大屏設計體系及通用方法，更好地滿足數字孿生大屏的界面視覺需求與設計落地實踐。研究數字孿生大屏UI設計目標和格式塔心理學組織律，根據設計目標匹配格式塔心理學視覺組織律的視知覺結論，細化成設計要點，并轉化為符合視知覺規律的詳細UI設計路徑。完成了從設計目標到設計細節呈現的數字孿生大屏?；诟袷剿睦韺W理論，完善了數字孿生大屏設計通用方法，并進行了有效實踐。

關鍵詞：格式塔心理學 視知覺規律 數字孿生 可視化大屏 UI設計 設計路徑

中圖分類號：TP311.5 文獻標識碼：A文章編號：1003-0069（2023）13-0139-05

Abstract：In order to improve the digital twin large screen design system and general methods，and better meet the interface visual requirements and design practice of the digital twin large screen.Research on the design goals of digital twin large-screen UI and the organization law of Gestalt psychology，match the visual perception conclusion of Gestalt psychology law according to the design goals，refine them into design points，and convert them into detailed UI design that conforms to the laws of visual perception path.The digital twin screen presented from design goals to design details is completed.Based on the Gestalt psychology theory，the general method of digital twin large screen design has been improved，and effective practice has been carried out.

Keywords：Gestalt psychology Visual perception law Digital twin Visual large-screen UI design path

引言

近年來，5G、大數據、云計算等新一代信息技術的蓬勃發展，計算機仿真技術與擬真軟件的成熟運用，讓數字孿生技術開始蔓延滲透到“互聯網+”相關的產業中。數字孿生大屏給予了可視化的數據直觀窗口，其中展現的動態映射與實時數據讓業務流轉效率得到了有效提升，管理、運營和決策都能高效實踐。為了將龐雜的數據和復雜的孿生體圖像快速精準地傳達給用戶，提升大屏交互窗口的用戶體驗是有效且必要的。在用戶體驗中，通過UI設計達到視覺提升往往是直觀且行之有效的，而格式塔心理學闡釋了人類本能情況下視知覺的運轉心理過程，能幫助設計圍繞目標落地。因此，基于格式塔心理學的設計方法在數字孿生大屏UI設計中值得探究，以達到數據信息快速精準傳達的目的。

一、數字孿生大屏概述

數字孿生是以虛擬的形式表現或是描述一個或多個真實存在的數字形式的仿制品，并以此進行現實狀態下環境、條件和狀態的模擬仿真。通過虛實交互反饋、數據融合分析、決策迭代優化打造全場景全信息模型，幫助企業管理者解決與經營決策相關的問題[1]。

普通數據大屏僅僅收集傳感器數據或后臺歷史數據，將這些龐雜的數據以數據圖表為主的可視化展示手段展示出來，如圖1所示為典型的數據大屏。然而，普通的數據可視化大屏常常無法展示當前業務狀況和趨勢，造成決策滯后、無法隨機應變，導致難以真正實現智能化管理。另外，僅通過圖表展示整體系統較為抽象，無法對監測目標當前全貌全面掌握。

而數字孿生是對復雜對象進行的多物理、多尺度、概率綜合模擬，并使用最佳可用模型和實時傳感器數據等來反映其對應的孿生體信息[2] ，是物理世界和數字世界的雙向動態映射，通過建立相關實體的全場景信息和全要素模型進行可視化虛擬表現，達到指導真實目標的管理和運營。如圖2所示的京東數據中心現場運營指揮大屏就是通過數字孿生技術實時直觀展現監控目標的情況。

數字孿生大屏突破了僅對可視化數據信息進行非直觀信息獲取的局限性，從物理實體量化數據展示變成了對孿生體全生命周期監測，使得展示性和交互性更加直觀、信息關聯性更強、業務運轉效率更高。目前國內許多領域都應用數字孿生助力相關產業的發展：在單兵作戰系統中，提出數字孿生單兵作戰系統設計模型，面向物理空間設計過程的需求等方面進行構建，為新型單兵作戰系統創新設計提供了新的路徑[3]；在文史方面，基于數字孿生技術，建立VR孿生校史館，實現虛擬交互，動態保存[4]。另外，數字孿生還能深入到產業全流程周期中，陶飛等人根據數字孿生技術現狀，對車間設計等14類應用提出了概念方案，為進一步落地應用提供了參考[5]。

二、數字孿生大屏UI設計的目的與必要性

（一）數字孿生大屏UI設計目的

數字孿生大屏作為業務的監控視覺窗口，目前已逐漸應用在各類產業中，特別是傳統行業進行數字化轉變的過程中，企業希望有數字化智能手段聚合信息，進行快速決策和運營。

數字孿生大屏通常有特定的受眾群體和特定類型的業務場合，更多存在于B端產品設計中，讓使用者更有效率地解決大型業務流程和統籌決策。為了滿足使用需求，在數字孿生大屏中的UI設計有著下列較為明確的目的：第一，UI設計需要在功能滿足的基礎上完成對視覺信息呈現的重組優化。設計中要符合視覺認知規律，盡可能有效提高信息閱讀效率；第二，UI設計作為服務性質的行業，需要針對性地滿足B端產品的業務流程，滿足用戶客戶的目的，讓數據為人所用，為復雜晦澀的信息搭一座具象的橋梁；第三，數字孿生作為新興技術，UI設計還需要保證大屏美觀統一，提升臨場感和專業性，更好地傳達科技感。

（二）數字孿生大屏UI設計必要性

企業對數字孿生的需求不僅擴展了創新設計的邊界，而且進一步提高了數字信息獲取的視覺要求。高效、實時、可控是數字孿生大屏的主旨。因此，信息的視覺感知速度決定了管理運營中的決策速度。

大屏中的數據信息雖然是實時反饋的，但因視覺呈現沒有符合用戶視知覺認知，信息傳達效率受到了影響。如果沒有進行系統性的UI設計，大屏界面中的數據是零散的，而數據圖表信息艱難晦澀，不符合人的思維邏輯和閱讀習慣。界面交互需要根據用戶認知進行重組排列，為了更好地發揮數字孿生大屏的優勢，需要讓UI設計介入，讓信息功能合理分布。其次，高科技智能5G的引領，喚醒了用戶新的美學需求，讀圖時代對于視覺的要求更多更廣，人們更喜歡看到符合秩序和語義的產品，追求身臨其境，觸發自己對美的聯想和感悟。而設計能彌補純數字或文字信息的視覺單調感，帶給用戶更好的體驗，提升產品的競爭力，助力商業價值增長。

三、格式塔心理學視知覺理論

格式塔心理學是現代西方重要的心理學派之一，其思想主要圍繞視知覺思維領域，美籍德裔心理學家庫爾特考夫卡（Kurt Koffka）認為，我們自然而然觀察到的經驗，都帶有格式塔的特點。根據格式塔的總綱，派生出的視覺組織律廣泛運用在相關各類視覺表現的設計活動中，常常提及的規則內容有以下幾個方面：

1.圖形與背景

圖形與背景是視知覺中最基礎的關系，是對觀察物最初的整體認知。在一定的可視區域范圍內，有的對象突現出來成為焦點形成圖形，有些對象則逐漸淡化作為襯托地位形成背景。一般說來，圖形與背景需要區分清晰，需要圖形具有較為清晰的外輪廓、圍合區域所占比例較小，顏色與亮度具有更明顯的差異。

2.接近性和連續性。

在同一空間區域范圍內的元素，距離較短或互相接近的部分，容易組成整體，這就是接近性。另外，在視知覺范圍內，讓人們覺得觀察對象在空間中具有一定趨于延展或有邏輯關聯的現象，稱作連續性，在圖3中，視覺上看到的不是離散的圓點，而是連續的線條。

通過接近性規律，每個分段形成了整體，增強了前后邏輯順序，讓內容從框架到細節都容易讓人理解。

3.完整和閉合傾向

視覺心理有完整和閉合傾向，人們可以把不連貫有缺口的圖像盡可能在知覺印象中進行彌補，從而隨環境呈現最為完善的形式，如圖4，人們會自動把圖中的矩形區域補全，在感知中形成一個完整的圖案而不是零碎的4個三角形。這種傾向為知覺圖形提供了完善的定界、對稱和形式。

4.相似性

在同一空間區域范圍內的相同或相似特征的元素，會被人們認為有關聯性，并被視作為整體。一般而言，特征包含多種刺激要素條件，例如顏色、形狀，或是包含同一視覺元素等。

當前，格式塔心理學對于視覺方向的設計指導能力是巨大的：OConnor 指出利用格式塔完形感知理論，策略性使用色彩和對比度的差異能很好地提升信息的傳達[6]；在工業設計的視覺表現上，將車前臉實體三維造型轉化為平面視覺進行研究，根據格式塔心理學規則，總結出了轎車前臉設計的一般規律[7]；

在UI設計領域，格式塔心理學的應用較為成熟：Martin Hicks 指出在UI設計中，格式塔原則支持的知覺組織強調了用戶預注意的潛在機制，可以通過設計讓用戶更容易識別有用信息[8]。另外，移動端的UI設計研究中，分析了格式塔心理學的部分規律在App中的應用，指出了格式塔心理學可以幫助設計師更好地完善使用體驗[9]。因此，格式塔心理學闡釋了在一些特定情況下，可以通過改變視覺要素來影響本能的視知覺感受，從而讓觀者達到我們設想的行為與認知。數字孿生大屏作為UI設計載體，同樣也能形成可復制的設計方法。

四、結合格式塔理論的數字孿生大屏界面UI設計架構

數字孿生大屏的一般是為業務或商務群體服務的，比起面向大眾用戶或一般用戶的產品，它的總體目標不以個人用戶的意志和喜愛偏好而轉移。目前在UI設計的實例中，對于可視化大屏或數字孿生大屏的案例較為少見，在數字化、智能化日益發展的今天，企業對于視覺效率的需求不斷攀升，洶涌的數據如何能更好地傳達與呈現，這是大屏發展所亟需解決的視覺問題。

大屏作為業務性較強的產品形式，為了達到效率最優設計，需要依照人的認知本能進行視知覺適應性設計。格式塔心理學規律揭示了人的視知覺本能反映，不摻雜個人偏好，更純粹地研究本能心理導向。因此格式塔心理學所包含的視知覺規律能很好地指導數字孿生大屏在UI設計細節的處理，并轉化成可以明確實施的設計方法。它不是零散分塊的設計，而是傾向于視知覺的整體感設計，更符合用戶的心理本能認知。

在產品全流程設計中，設計師會得到數字孿生大屏用戶需求和產品需求，之后提煉出相應的大屏設計目標，結合格式塔心理學組織律，可以較好地完成從抽象描述到具象呈現的全部流程。如圖5所示，設計師可以從產品需求和用戶需求中提取數字孿生大屏的UI設計目標，根據目標導向匹配格式塔心理學視覺組織律的知覺結果，并以該結果相對應的視覺因素為指導，拆解設計目標，從而進一步細化成設計要點。其中，設計要點旨在幫助設計師明確詳細的目標達成路徑，例如設計目標為增加閱讀效率，需要將重點信息對象突現出來成為焦點，通過圖形與背景規律進行視覺優化。之后，再將設計要點細化成UI設計模塊，例如詳細描述設計按鈕時，色相調節的范圍等，從而將概括性的、抽象的目標轉化為可操作的、符合人視知覺規律的詳細操作步驟，逐次完成UI設計模塊后，最終鋪開成為完整的數字孿生大屏界面。

五、格式塔心理學在數字孿生大屏UI設計的運用

中移（成都）信息通信科技有限公司的醫療專網智慧孿生大屏產品，旨在通過5G專用網絡與邊緣云計算服務，將院區重資產的數字化信息融合到全景模型中，從而快速、精準調度院內資源，實現智慧化的院區資產管理。

通過精準匹配用戶與業務需求，可得出醫療專網智慧孿生大屏的設計目的為數據分級降噪、信息準確易辨和清晰美觀得體。根據上文設計方法架構圖，可以得出如圖6所示設計路徑架構圖。

首先，通過圖形與背景原則可以幫助數據完成分級降噪，讓裝飾圖形和信息主體圖形有差異化。其次，完整和閉合傾向能夠讓信息準確定位，邏輯合理，設計中通過提供完善的邊界形圖案或是按網格布局有序排列來達到此目的；接近性和連續性讓信息能夠更好辨認信息分組或是判斷信息邏輯，在設計中通過距離較短或互相接近，并且有整齊的視覺動線規劃來實現。最后相似性原則可以讓整體美觀一致，同時可以清晰表現分組信息，得出相應的設計要點。

（一）數據分級降噪 /孿生信息精確定位

在產品設計階段，數據能夠根據重要程度區分清楚焦點信息、主要信息和次要信息，而在視覺表現上則需要將這些信息按順序表達清楚。為了讓大屏所表現的信息完成分級降噪，需要引導觀看者去閱讀實質的數據圖表，因此，如果可視化過于混亂，則應在不影響數據的情況下簡化設計：即是需要突出重點的同時，弱化不重要的要素[10]。

根據格式塔圖像與背景規則，整個大屏信息的重中之重需要作為圖像凸顯出來，而場景、環境等信息需求度弱的要素，需要弱化成為輔助背景，這樣才能讓圖形更突出。通常而言，對比度水平有助于我們檢測圖形與背景的分離和細節，能夠很好地提高可讀性[6]。大屏設計通常以暗色調進行設計，一般利用明暗對比可以很好地突出圖像。除此之外，具有透明度的光效設計和色彩差異也能突出重點信息。醫療專網智慧孿生大屏中，為了突出孿生體，在視覺上需要著重強調色相和明度的差別，使視覺由四周向孿生體部分包圍，集中于交互重心點，如圖7所示。醫療專網智慧孿生大屏設計中，樓棟采用純白和亮藍進行設計，同時輔以3D流動光線以突出體積及邊界感，從而形成明顯的視覺對比差別。

（二）信息準確易辨

在數字孿生大屏中，UI設計服務于業務，因此將業務中各個環節、各個場合所產生的分散數據，整合并有序排列在屏幕上，從而使信息準確易辨，是需要經過細致安排和設計的。而格式塔的接近性和連續性、完整和閉合傾向能很好指導。

數據板塊進行排版時，同一分類項目下的數據模塊需按照邏輯羅列，因此在視知覺上它們需要形成緊密的組合。而不同項目下的數據應該留出一定的柵格距離，這里的距離像素需多于同一分類項目下所設定的距離像素。以不同種類的醫療關鍵數據模塊為例，為了讓后勤關鍵數據看起來是一個整體，需要和相鄰的分類項目設計出一定距離。如圖8所示，紅色框為同一數據分類項目，它們之間的柵格距離較大，而紅色框內部的數據元素柵格距離較小，在不設計外輪廓的情況下，能很好地把相關部分組成邏輯整體，使得信息傳遞時精準有序。

連續性規律讓我們可以通過構圖來解釋方向和運動，讓用戶視覺在頁面中流暢移動，有效提高信息傳達效率。在構圖中，常常會考慮用戶閱讀習慣，設定一條抽象的連續動線串聯起信息關系。醫療專網智慧孿生大屏的態勢感知信息由圖標、名稱和實時數據三個部分構成，人閱讀習慣為從上至下、從左至右的順序，因此將最易被錨定的圖標信息放在靠左，詳細解釋在右上，保證捕捉到想要的數據。同時設計板塊視覺動線上下左右均為直線，如圖9所示，信息易閱讀易捕捉，用戶按照本能邏輯即可快速得到想要的數據。

然而，當多組數據所表現的信息是同一類別或屬性時，在視覺上無法形成整體的情況下，需要考慮完整和閉合傾向規律，讓整體圍合與貼近。如圖10所示，在關鍵欄目數據，圖表較為零散，難以將四組圖表聯系起來。因此，需要通過具有包圍性的圖形將四組圖表聚合起來，從而給用戶傳達“組”的概念，讓整體業務邏輯清晰。在設計中選擇了藍色角標框，將圍合概念體現出來的同時，不失科技簡潔性，讓“組”的概念存在的同時，減弱了“框”所帶來的拘束感和醒目感。

（三）清晰美觀得體

設計的介入，在解決界面信息交互和傳輸的細節問題的同時，還需要讓大屏富有和諧統一的美感，符合產品和業務的隱喻。根據相似性規律，相同或相似特征的元素，會被人們認為有關聯性。為了讓大屏在視覺上是成體系的，需要讓各個要素在顏色、大小、形狀特征等方面具有一定的相似程度，因此在正式設計前需要有一套完整的設計規范，如圖11所示，它能對相似的視覺特征進行很好的規范，形成具有整體感的設計。

除此之外，信息邏輯的清晰也能夠通過相似性規律進行展示，可以將用戶的注意力吸引到特定的內容，同時有助于提高可掃描性和閱讀效率。如圖12所示，為了區別不同類目下的人流數量趨勢，選擇了規范中的3種顏色及其衍生色，賦給同一類目下的圖表和文字標題，從而讓用戶利用顏色相似性來找到圖表相對應的數據內容。

（四）設計呈現

設計以格式塔心理學規律為指導依據，通過對設計目標的分析與分解，利用格式塔心理學的數字孿生大屏UI設計方法架構，以醫療專網智慧孿生大屏為案例進行驗證，完成了從設計目標到設計細節呈現的具象落地。讓UI設計路徑有跡可循，讓大屏信息遵循和適配人的視覺本能，有效降低認知成本，滿足用戶需求，凸顯“設計服務用戶”理念，最終的設計如圖13所示。本項目進行了試點運用與測試，用戶反饋圖像效果清晰，信息傳達準確易讀，整體風格符合業務語義。

結語

技術的進步與潮流的更迭讓獲取信息的方式日新月異，但是用戶體驗的提升不是依賴技術的增長，在于不斷探索人的心智規律，并應用這些規律設計出更符合人認知習慣的產品。在新一代智能科技和用戶體驗至上理念的碰撞下，格式塔心理學規律在設計實踐中發揮著日趨重要的作用。本文以格式塔心理學為設計理論指導，通過醫療專網智慧孿生大屏項目的設計實踐，形成了一套完善的數字孿生大屏UI設計方法，在實際工作中可以運用在設計構思、設計實現和設計走查中。本文仍存在如下不足：首先，設計未完整考慮大屏所處環境光源所帶來的影響，其次，僅僅在視覺上提出了一般設計方案，并未進一步綜合考慮交互影響。在未來的工作中，將會持續補充相關格式塔心理學的設計路徑方案，以便更廣泛地適配各類設計項目。

參考文獻

[1]Tao F ， Cheng J ， Qi Q ， et al. Digital twin-driven product design， manufacturing and service with big data[J]. The International Journal of Advanced Manufacturing Technology 94 （2018）： 3563-3576.

[2] Glaessgen E ， Stargel D . The Digital Twin Paradigm for Future NASA and U.S. Air Force Vehicles[C]// Aiaa/asme/asce/ahs/asc Structures， Structural Dynamics & Materials Conference Aiaa/asme/ahs Adaptive Structures Conference Aiaa. 2012. AIAA （p. 1818）.

[3]竇金花，覃京燕，李瑞琦.基于數字孿生的單兵作戰系統設計研究[J].包裝工程，2021，42（20）：59-65.

[4]馮于天韞，蔡駿，蔣正清.基于數字孿生技術的校史館VR導覽設計研究[J].設計，2021，34（16）：54-56.

[5]陶飛，劉蔚然，劉檢華等.數字孿生及其應用探索[J].計算機集成制造系統，2018，24（01）：1-18.

[6]OConnor， Zena. Colour， Contrast and Gestalt Theories of Perception： The Impact in Contemporary Visual Communications Design[J]. Color Research & Application 40.1 （2015）： 85-92.

[7]周西望，沙強.基于格式塔心理學的轎車前臉造型設計研究[J].設計，2021，34（15）：14-17.

[8]Hicks M . Perceptual and Design Principles for Effective Interactive Visualisations[J]. 2009.

[9]孫韻琦.格式塔心理學視角下的移動端UI設計研究[J].設計，2021，34（08）：115-118.

[10]Fayers R . The Visual Display of Quantitative Information by E. R. Tufte[J]. Journal of the Royal Statistical Society，1990，153（1）：118-119.