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

羅聆瑗 尹璇

摘要：為了完善數(shù)字孿生大屏設計體系及通用方法，更好地滿足數(shù)字孿生大屏的界面視覺需求與設計落地實踐。研究數(shù)字孿生大屏UI設計目標和格式塔心理學組織律，根據(jù)設計目標匹配格式塔心理學視覺組織律的視知覺結(jié)論，細化成設計要點，并轉(zhuǎn)化為符合視知覺規(guī)律的詳細UI設計路徑。完成了從設計目標到設計細節(jié)呈現(xiàn)的數(shù)字孿生大屏。基于格式塔心理學理論，完善了數(shù)字孿生大屏設計通用方法，并進行了有效實踐。

關鍵詞：格式塔心理學 視知覺規(guī)律 數(shù)字孿生 可視化大屏 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、大數(shù)據(jù)、云計算等新一代信息技術的蓬勃發(fā)展，計算機仿真技術與擬真軟件的成熟運用，讓數(shù)字孿生技術開始蔓延滲透到“互聯(lián)網(wǎng)+”相關的產(chǎn)業(yè)中。數(shù)字孿生大屏給予了可視化的數(shù)據(jù)直觀窗口，其中展現(xiàn)的動態(tài)映射與實時數(shù)據(jù)讓業(yè)務流轉(zhuǎn)效率得到了有效提升，管理、運營和決策都能高效實踐。為了將龐雜的數(shù)據(jù)和復雜的孿生體圖像快速精準地傳達給用戶，提升大屏交互窗口的用戶體驗是有效且必要的。在用戶體驗中，通過UI設計達到視覺提升往往是直觀且行之有效的，而格式塔心理學闡釋了人類本能情況下視知覺的運轉(zhuǎn)心理過程，能幫助設計圍繞目標落地。因此，基于格式塔心理學的設計方法在數(shù)字孿生大屏UI設計中值得探究，以達到數(shù)據(jù)信息快速精準傳達的目的。

一、數(shù)字孿生大屏概述

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

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

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

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

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

（一）數(shù)字孿生大屏UI設計目的

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

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

（二）數(shù)字孿生大屏UI設計必要性

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

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

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

格式塔心理學是現(xiàn)代西方重要的心理學派之一，其思想主要圍繞視知覺思維領域，美籍德裔心理學家?guī)鞝柼乜挤蚩ǎ↘urt Koffka）認為，我們自然而然觀察到的經(jīng)驗，都帶有格式塔的特點。根據(jù)格式塔的總綱，派生出的視覺組織律廣泛運用在相關各類視覺表現(xiàn)的設計活動中，常常提及的規(guī)則內(nèi)容有以下幾個方面：

1.圖形與背景

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

2.接近性和連續(xù)性。

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

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

3.完整和閉合傾向

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

4.相似性

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

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

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

四、結(jié)合格式塔理論的數(shù)字孿生大屏界面UI設計架構(gòu)

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

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

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

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

中移（成都）信息通信科技有限公司的醫(yī)療專網(wǎng)智慧孿生大屏產(chǎn)品，旨在通過5G專用網(wǎng)絡與邊緣云計算服務，將院區(qū)重資產(chǎn)的數(shù)字化信息融合到全景模型中，從而快速、精準調(diào)度院內(nèi)資源，實現(xiàn)智慧化的院區(qū)資產(chǎn)管理。

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

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

（一）數(shù)據(jù)分級降噪 /孿生信息精確定位

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

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

（二）信息準確易辨

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

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

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

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

（三）清晰美觀得體

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

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

（四）設計呈現(xiàn)

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

結(jié)語

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

參考文獻

[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]竇金花，覃京燕，李瑞琦.基于數(shù)字孿生的單兵作戰(zhàn)系統(tǒng)設計研究[J].包裝工程，2021，42（20）：59-65.

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

[5]陶飛，劉蔚然，劉檢華等.數(shù)字孿生及其應用探索[J].計算機集成制造系統(tǒng)，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.