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

羅聆瑗 尹璇

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

關(guān)鍵詞：格式塔心理學(xué) 視知覺(jué)規(guī)律 數(shù)字孿生 可視化大屏 UI設(shè)計(jì) 設(shè)計(jì)路徑

中圖分類號(hào)：TP311.5 文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)：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

引言

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

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

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

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

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

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

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

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

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

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

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

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

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

三、格式塔心理學(xué)視知覺(jué)理論

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

1.圖形與背景

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

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

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

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

3.完整和閉合傾向

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

4.相似性

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

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

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

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

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

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

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

五、格式塔心理學(xué)在數(shù)字孿生大屏UI設(shè)計(jì)的運(yùn)用

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

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

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

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

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

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

（二）信息準(zhǔn)確易辨

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

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

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

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

（三）清晰美觀得體

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

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

（四）設(shè)計(jì)呈現(xiàn)

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

結(jié)語(yǔ)

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

參考文獻(xiàn)

[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)設(shè)計(jì)研究[J].包裝工程，2021，42（20）：59-65.

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

[5]陶飛，劉蔚然，劉檢華等.數(shù)字孿生及其應(yīng)用探索[J].計(jì)算機(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]周西望，沙強(qiáng).基于格式塔心理學(xué)的轎車前臉造型設(shè)計(jì)研究[J].設(shè)計(jì)，2021，34（15）：14-17.

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

[9]孫韻琦.格式塔心理學(xué)視角下的移動(dòng)端UI設(shè)計(jì)研究[J].設(shè)計(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.