基于用戶體驗的云建模平臺界面設計研究

金宇哲，許世虎，董航宇

基于用戶體驗的云建模平臺界面設計研究

金宇哲1，許世虎1，董航宇2

（1.重慶大學 藝術(shù)學院，重慶 401331；2.重慶云圖軟件科技有限公司，重慶 401331）

從用戶體驗視角出發(fā)，探究運用于云建模平臺的界面設計策略。通過用戶在使用云建模平臺時的視覺感知體驗、交互感知體驗和心理感知體驗三個維度，對比和分析兩款云建模平臺（Onshape、Fusion 360）的異同點與優(yōu)缺點，提出基于用戶體驗的云建模平臺界面設計策略，根據(jù)該策略對云圖三維云建模平臺的界面進行優(yōu)化設計，最終以可用性測試檢驗該策略的有效性。通過對兩款云建模平臺在視覺、交互、心理三個維度上的體驗分析，得出以下四類設計策略：強化使用過程的專注度、提升界面使用的友好度、增強實時協(xié)作界面可視化和注重細節(jié)設計的精致化，運用上述四類設計策略指導設計實踐可有效提高云建模平臺的可用性與用戶滿意度，為云建模平臺提供界面設計依據(jù)與新的設計導向。

用戶體驗；云建模平臺；界面設計；遠程辦公

在我國新冠疫情進入常態(tài)化及移動互聯(lián)網(wǎng)和云計算技術(shù)不斷發(fā)展的時代背景下，遠程（居家）辦公逐漸成為新一代工作者所認可的工作方式。繁重的傳統(tǒng)本地端建模軟件已不能適應當今用戶的需求，更加靈活的云建模平臺成為相關行業(yè)用戶的新寵。遠程工作者對在線生產(chǎn)工具提出了新的要求，著重工具的使用體驗。在云建模平臺中，界面設計是人機交互重要的組成部分，其作用不容忽視，良好的界面設計能讓用戶在使用過程中獲取愉悅的體驗，可有效地提高生產(chǎn)效率。因此，云建模平臺的界面設計應以用戶體驗為核心，充分考慮平臺的可用性及用戶的多維需求，推動云建模平臺的完善和發(fā)展。

1 云建模平臺

1.1 云建模平臺概述

云建模平臺是線上CAD（Computer Aided Design）軟件，是新冠疫情常態(tài)化背景下遠程辦公的建模軟件新興應用方式。國外的云建模平臺發(fā)展較早，如美國SolidWorks公司的云平臺Onshape、Autodesk公司的云平臺Fusion 360等，功能強大、多樣；捷克Vectary公司的云平臺Vectary、匈牙利Leonar3Do公司的云平臺Leopoly等，功能相對基礎、較為單一。國內(nèi)的云建模平臺才剛剛興起，基礎薄弱、起步較晚、研發(fā)難度高等，使國內(nèi)自主研發(fā)的云建模平臺數(shù)量較少且發(fā)展速度緩慢，例如：EverCraft、ThingJS、動動三維等，平臺質(zhì)量參差不齊、功能不完善、使用體驗欠佳。這對于當前背景下，我國工程制造業(yè)和其他相關產(chǎn)業(yè)的進一步發(fā)展構(gòu)成了較大阻礙。

1.2 與傳統(tǒng)建模軟件的區(qū)別

傳統(tǒng)建模軟件經(jīng)過40余年的發(fā)展，功能不斷完善與強大，但是在當今受新冠疫情影響遠程辦公的大環(huán)境下，逐漸體現(xiàn)了其不足之處。第一，傳統(tǒng)建模軟件基于固定的終端，如今研發(fā)人員的工作場景不再局限于固定的工位，無法借助不同的終端來完成設計，導致工作效率降低。第二，在大型企業(yè)中，研發(fā)人員遍布全國各地，甚至在國外也有研發(fā)基地。使用傳統(tǒng)建模軟件無法聯(lián)合各地的研發(fā)人員進行協(xié)同工作，研發(fā)人員只能通過“公文流轉(zhuǎn)”的串行工作模式進行交接，工作效率再次降低。第三，隨著CAD功能的逐步豐富，對硬件資源的需求也逐步提高，硬件資源不足將極大地影響工作效率。與此同時，對于硬件上不斷升級的需求，將給企業(yè)帶來經(jīng)濟壓力。

相比之下，云建模平臺展現(xiàn)了其獨特的優(yōu)勢，其特點可以總結(jié)為“2A1C”，分別為“Anydevice”（多端口）、“Anyone”（協(xié)同化）、“Cloud-based”（云端化）。云端建模平臺不僅能夠?qū)崿F(xiàn)基于個人電腦的絕大部分CAD功能，還具備多終端（電腦、手機、平板等都能夠運行）、協(xié)同作業(yè)（多人能夠?qū)崟r對同一個模型進行編輯、批注、評審等）、云存儲（模型存儲在云端、具備版本管理功能等）等特殊功能。傳統(tǒng)建模軟件與云建模平臺的區(qū)別，見表1。

表1 傳統(tǒng)建模軟件與云建模平臺的區(qū)別

Tab.1 Difference between traditional modeling software and cloud modeling platform

2 基于用戶體驗的人機界面設計

2.1 用戶體驗

關于用戶體驗許多學者提出了相關理論：科學管理之父Frederick Winslow Taylor[1]被認為是當今用戶體驗的奠基人，其引入了研究和規(guī)劃工作的概念，對工人行為的計劃與執(zhí)行進行探究，以求更快、更低成本地完成工作的方法，對管理領域中提高人機交互效率做出了杰出貢獻。工業(yè)設計之父Dreyfuss Henry于1955年出版了《Designing for People》，其開創(chuàng)了一種將用戶作為研究核心的設計方法，專注于研究人們的行為和態(tài)度，該書被認為是產(chǎn)品設計領域早期進行用戶體驗研究的代表著作。20世紀末Donald Arthur Norman首次提出并推廣了“用戶體驗”這一概念，其希望將用戶體驗作為核心原則貫穿于產(chǎn)品或服務的創(chuàng)新中[2]。Norman[3]認為滿足以下三個方面才可稱為優(yōu)秀的用戶體驗：在滿足用戶需求的同時，不能干擾和厭煩用戶；所設計的產(chǎn)品要簡潔優(yōu)雅，讓用戶在使用過程中感到愉快；此外，它應該讓用戶感到更多意想不到的驚喜。Virpi Roto[4]認為自豪感、愉快感、功能性和可用性是構(gòu)成用戶體驗的核心要素。楊婉婧[5]在其論文中提及用戶體驗包含用戶價值、情感和可用性，其中用戶價值主要包括自身滿意度、愉悅值、多樣化需求和附屬意義等。Marc Hassenzahl[6]提出，用戶體驗可從操控性、激勵性、認別性、啟發(fā)性等四個方面進行定義，并且與Effie Lai-Chong Law[7]共同對275名來自工業(yè)、學術(shù)界的研究人員進行訪問，其中絕大部分受訪者認同用戶體驗是依賴于具體情境的非靜態(tài)概念，是用戶與產(chǎn)品、系統(tǒng)、服務發(fā)生交互后產(chǎn)生的個體體驗。當前，最為普遍接受的用戶體驗定義是ISO 9241—210—2019標準：“人們對已使用或預期使用的產(chǎn)品、系統(tǒng)或服務的所有反應和結(jié)果。”其指出用戶體驗是在用戶與產(chǎn)品交互過程中產(chǎn)生的[8]。

2.2 人機界面設計

人機界面（Human Computer Interface）是人與電子計算機之間進行信息傳遞和交換的橋梁和對話平臺，它使機器屬性的數(shù)據(jù)與人類可識別形式的信息之間的相互轉(zhuǎn)換成為現(xiàn)實，并存在于人機信息交換所涉及的各個領域[9]。

在設計學領域中，人機界面設計是基于用戶的視角，為了使機器數(shù)字信息以便于用戶理解的形式來呈現(xiàn)，而對人機交互媒介進行規(guī)劃與布置的創(chuàng)造性活動。人機界面設計的重點是需要建立一個用戶與軟件之間的回應渠道，即一個能夠?qū)τ脩裘睢⒕駬褡鞒龇答伒南到y(tǒng)[10]。人機界面設計的一般原則可歸納為一致性原則、簡捷性原則、提示與幫助原則和降低記憶負荷原則等[11]。人機界面設計需要針對產(chǎn)品自身特性以及外部環(huán)境的眾多變化進行考量，其過程主要為了解目標用戶、明確所需執(zhí)行的任務、解決常見的界面設計問題、初步建立界面模型并修改、迭代[12]。Hind Kharoub等[13]針對新型的人機交互媒介（VR）提出了雙層三維人機界面設計，并采用三種不同的交互模式來評估該界面設計的可行性。在當前圖形用戶界面的基礎上，隨著新技術(shù)、新場景的出現(xiàn)，自然用戶界面將以更加人性化、直觀化、自然化等特點成為新一代人機界面的主流[14]，人機界面設計也將朝著以智能化為基礎的多通道、多維度及多模態(tài)方向發(fā)展[15-17]。

3 云建模平臺界面用戶體驗分析

Onshape是當前世界上增長最快的計算機輔助設計（CAD）云平臺，在全球擁有超過200萬用戶。Fusion 360是同類產(chǎn)品中首個基于云端的三維CAD平臺，其被許多國外高校與機構(gòu)廣泛使用的。全球最大的面向軟件和服務的權(quán)威技術(shù)領域評議類網(wǎng)站G2（G2.com）對CAD軟件進行了排名，在十大最佳CAD軟件的排名前五中包含Onshape與Fusion 360，并且在排名前五中僅有該兩款軟件是基于云端所使用。本文選取上述兩款具有代表性的云建模平臺（Onshape、Fusion 360），對上文用戶體驗研究成果進行歸納和分析，結(jié)合Norman對人類大腦活動中本能層、行為層、反思層在用戶體驗領域的研究[18]，擬從視覺感知體驗、交互感知體驗與心理感知體驗三個維度對云建模平臺界面的用戶體驗進行研究。

3.1 視覺感知體驗

感官是感知外界事物刺激的器官，其可以捕捉人們對客觀事物的第一印象，并引起人腦反應。人們所捕獲的各類有意義的外界信息中，80%以上是由視覺通道來感知客觀事物的色彩、形態(tài)、材質(zhì)等屬性，視覺設計不僅能合理地組織各個相關元素、引導用戶明確平臺的使用方法，同時也傳達了許多相關信息，如平臺的功能和特色等。通過比較使用云建模平臺時用戶的視覺體驗，來探索視覺通道在用戶體驗中的作用。

從云建模平臺的主要用戶界面設計來看，兩款云平臺的界面功能布局整體一致，整個界面分為頂部的基礎功能與工具欄區(qū)域，左側(cè)的特征樹區(qū)域，中間的繪制區(qū)域，右上角的導航區(qū)域等。兩者也存在各自的差異化特點，F(xiàn)usion 360的工具集成欄置于界面底部的中間位置，與導航塊距離較遠，產(chǎn)生割裂感。根據(jù)格式塔（Gestalt）接近性原理，相關的控件圖標之間距離相近，用戶更易于感知它們是相關的，產(chǎn)品將會更加易于學習和記憶。Onshape的工具集成欄跟隨在右上方導航塊的右下角位置，因上述功能屬性與導航塊的功能屬性類似，具有較高的功能關聯(lián)性，所以集成在附近是一種較佳的選擇。在風格上，Onshape的整個界面配色簡潔，以藍、白和灰色為主色彩，給用戶沉著、可靠、冷峻的感覺，界面上展現(xiàn)多種簡潔、統(tǒng)一的元件，著重引導處體現(xiàn)了主題色經(jīng)典藍，無論是頂欄的功能性按鈕，還是簡潔通透的坐標軸，都能夠更清晰地突顯內(nèi)容，在使用過程中不會分散用戶的注意力。Fusion 360的界面風格較為活潑，以藍、白加上橘黃色為主要顏色，紫色和綠色為輔助顏色，使其更加親和并具有堅持、包容等正面特征[19]，更能突出其易用性。增大版的功能性按鈕Icon設計更能迎合用戶活躍、簡潔、不拘束的性格特點，其友好的顏色可降低用戶對工具的理解成本。在Fusion 360的首頁界面中，所展現(xiàn)的功能性元件不多，根據(jù)尼爾森（Jakob Nielsen）的美與簡約原則，除去同一層級中需要程度較低的信息，將會降低信息間的競爭，提高有用信息的可見度，因此能更為突顯產(chǎn)品的核心功能，讓用戶更好理解并使用。Onshape與Fusion 360的主要用戶界面見圖1—圖2。

圖1 Onshape的主要用戶界面與部分圖標

圖2 Fusion 360的主要用戶界面與部分圖標

3.2 交互感知體驗

交互即兩個或多個對象之間相互溝通的過程。交互設計重要的衡量標準是平臺的易用性，其主要強調(diào)用戶在使用過程中的交互方式和平臺所特有的功能。同時，平臺中良好的界面交互設計，可以有效地降低用戶為實現(xiàn)預期目標的學習成本，使原有的工作流程得以簡化[20]，提高用戶在使用平臺時的工作效率和總體滿意度。

首先是操作簡捷化。

Onshape的鼠標中鍵拖拽為平移效果、前后滾動為縮放效果，右鍵拖拽為三維動態(tài)觀察效果（見圖3），對常用的操作都是一個行為步驟，簡單易用。

Fusion 360中鍵操作方式一致，右鍵為更多選項效果，如需實現(xiàn)三維動態(tài)觀察需要通過兩個步驟：點擊底欄的動態(tài)觀察按鈕，然后回來進行左鍵拖拽，見圖4。

圖4 Fusion 360三維動態(tài)觀察實現(xiàn)步驟效果

對比兩種交互方式，F(xiàn)usion 360因為動態(tài)觀察按鈕不明顯，所以實現(xiàn)這種常用功能的操作失誤率會大大提升，從而打擊用戶的信心。根據(jù)奧卡姆（William of Occam）剃刀原理，將對象由復雜轉(zhuǎn)化為簡單后，更有利于用戶對事物的認知與操作，同時能有效降低用戶的勞動成本；Onshape實現(xiàn)三維動態(tài)觀察的步驟更少，因此更加便捷易用。兩款云平臺三維動態(tài)觀察交互實現(xiàn)路徑對比見表2。

表2 Onshape和Fusion 360三維動態(tài)觀察交互實現(xiàn)路徑對比

Tab.2 Comparison on interaction implementation paths of Onshape and Fusion 360 3D dynamic viewing

導航塊是三維建模軟件中比較常用的部件，可以實現(xiàn)手動操作不容易設置的觀察視角，例如絕對的正視、左視、俯視等，導航塊的設計也是建模軟件易用性的重要考量元素之一。兩款云建模平臺的導航塊在造型上類似，都采用了正六面體視角進行設計（前后、上下、左右），交互方式上也大致相同，兩款云平臺的導航塊的常規(guī)態(tài)和激活態(tài)效果，見圖5。

圖5 Onshape與Fusion 360導航塊的常規(guī)態(tài)和激活態(tài)效果

從操作細節(jié)上看，Onshape導航塊的反饋更加明顯、柔和和順滑，中空“骰子”型的設計給予用戶更多的需求實現(xiàn)度與控制自由度，可以透過“前”面的縫隙點擊“后”面，實現(xiàn)最遠距離一鍵跳轉(zhuǎn)需求，見圖6。根據(jù)約翰遜（Jeff Johnson）的“為常見情況、為響應度而設計”原則，需盡可能地保證常見的目標結(jié)果容易實現(xiàn)、交互動畫要平滑和清晰，能給用戶帶來更優(yōu)的交互滿足與自由感。

圖6 Onshape導航塊的前后面一鍵跳轉(zhuǎn)效果

在實現(xiàn)模型移動方面，Onshape需要通過草圖畫線確定移動方向，見圖7。Fusion 360則通過一個多功能移動鍵可以實現(xiàn)全部的變換效果，見圖8。

圖7 Onshape模型移動交互實現(xiàn)效果

圖8 Fusion 360模型移動交互實現(xiàn)效果

Onshape需要5個步驟才能完成模型移動，而Fusion 360僅需要3個步驟，并且可以在一種交互體驗下預知多種變換效果的交互方式。Fusion 360的多功能移動鍵可以實現(xiàn)多維度的平移、自由移動、旋轉(zhuǎn)移動等變換效果，自由度更高，見圖9。根據(jù)約翰遜的“與用戶對任務的看法一致”原則，讓用戶執(zhí)行與其目標有明顯聯(lián)系的“自然”操作，更易于用戶學習、難以忘記、節(jié)約時間且令人喜愛，云建模軟件中對模型的移動應當是個簡單且直觀的操作，但Onshape添加了額外的“不自然”操作，使其復雜化。反觀Fusion 360，其通過多功能移動鍵交互形式的設計，不僅更自然、更具人性化，同時卓有成效地提升了用戶工作的效率。兩款交互實現(xiàn)路徑對比見表3。

其次，平臺的功能界面交互設計具有較為顯著的特色，不僅可以改善用戶在操作過程中的情感體驗，同時也可以提高用戶滿意度和增強用戶黏性，從而使平臺通過差異化競爭提升產(chǎn)品競爭力。Onshape與Fusion 360的特色化功能界面如下。

圖9 Fusion 360模型移動多功能鍵交互效果

表3 Onshape和Fusion 360模型移動交互實現(xiàn)路徑對比

Tab.3 Comparison on model movement interaction implementation paths of Onshape and Fusion 360

1）Onshape的多邊形邊數(shù)設置交互。受行業(yè)規(guī)范影響，大多數(shù)傳統(tǒng)建模軟件在設置多邊形邊數(shù)時，是在邊數(shù)框中填寫所需數(shù)值，然后確定后生成多邊形，這種傳統(tǒng)的交互方式可視化程度低，不能夠給用戶帶來不同邊數(shù)的對比效果。如圖10所示，Onshape的多邊形邊數(shù)設置采用鼠標左右移動，便可使邊數(shù)增減的變化、對比直觀地顯示出來。根據(jù)尼爾森的系統(tǒng)可見性原則，當界面中某對象的狀態(tài)發(fā)生變化時，以適當?shù)姆绞浇o予用戶及時反饋，可給用戶帶來產(chǎn)品的可控感和操作的直觀感，促進用戶做出更優(yōu)的決策，Onshape的多邊形邊數(shù)設置的交互方式，不僅給整個平臺的用戶體驗帶來了提升，同時也強化了云建模平臺“輕量”的理念。

圖10 Onshape多邊形邊數(shù)設置交互效果

2）Fusion 360的右鍵更多選項轉(zhuǎn)盤界面。傳統(tǒng)建模軟件右鍵單擊的彈出內(nèi)容以列表樣式為主，該樣式中各功能的信息層級相同且不直觀，用戶難以快速選定預期功能。根據(jù)希克定律，當用戶面臨的選擇越多，特別是同層級的選擇時，其將更難做出正確的決定，將選項進行層級劃分可有效降低用戶在進行選擇時犯錯的概率。Fusion 360右鍵彈出的內(nèi)容是獨特的轉(zhuǎn)盤樣式，轉(zhuǎn)盤中各功能內(nèi)容通過用戶操作習慣來預制位置與所占范圍大小，以劃分信息層級，同時配合使用Icon，讓用戶選擇更為便利，見圖11。

圖11 Onshape與Fusion 360右鍵更多選項交互界面對比

3.3 心理感知體驗

以用戶需求的視角進行分析可知：用戶在視覺感知體驗中，其本能需求得以滿足；用戶在交互感知體驗中，其行為需求得以滿足。接下來，文章將在心理感知體驗中分析平臺的何種設計滿足了用戶的反思需求，從而為平臺的優(yōu)化和設計指明方向。

3.3.1 使用與滿足

“使用與滿足”理論將用戶比作為具有特定需求的人群，該人群為了使自身特定需求得到滿足，從而使用相關工具進行價值創(chuàng)造活動。其模式過程可大致表示為，在需求和心理雙重因素的驅(qū)動下，用戶產(chǎn)生對相關工具的期待，并促使用戶與工具發(fā)生接觸活動，從而滿足用戶需求[21-22]。

隨著新冠疫情常態(tài)化和現(xiàn)代快節(jié)奏生活方式的發(fā)展，Onshape和Fusion 360這樣的云建模平臺可以很好地滿足這一社會變化的用戶需求，即人們通常希望使用片段的時間進行項目的創(chuàng)意設計和展示。兩者的界面設計風格和交互方式體現(xiàn)了輕量、活潑、自由等特點，這些都可以讓用戶在碎片化的時間里回憶起平臺的魅力和使用經(jīng)歷，提高用戶對平臺的整體正印象。初次使用者不僅具有較強烈的表現(xiàn)欲望，同時也希望得到他人的夸贊與關注，心理學之父Sigmund Freud認為，人類天生具有一定程度的自戀行為，需要獲得認可與關注。Onshape和Fusion 360為他們提供了一個展示自身學習能力與價值的平臺，即用戶以最短的時間掌握平臺工具的使用方法，通過易用的操作讓自己的想法在平臺上得到簡單快速的呈現(xiàn)并進行發(fā)布，在被他人關注、評論時，不僅獲得了自身的滿足感與成就感，同時又形成了個體間不斷地互動，在互動的同時也反哺了平臺的傳播率與使用率。

3.3.2 群體與協(xié)作

群體是通過共有的因素，以某種方式相連并相互間存在信息交換的復數(shù)集合體[23]。在工業(yè)制造領域中，工作任務更多的是以龐大、系統(tǒng)的大體量單位出現(xiàn)，工作方式也由簡單、個體的轉(zhuǎn)向復雜、群體的。因此，當今群體協(xié)作生產(chǎn)的理念也越發(fā)突顯。Onshape和Fusion 360的用戶群體在使用平臺的過程中，用戶分享鏈接并進行協(xié)作，在此過程中創(chuàng)造了許多相互認同的行為準則與要求。同時，此用戶群體之間的共有語言和共有理解，也由線上交流與協(xié)作所衍生出的交流方式和各類合作技巧所構(gòu)成。用戶通過以上“共同內(nèi)容”形成群體間的持續(xù)性聯(lián)系與情感共鳴，并信任與依賴平臺。Onshape的在線協(xié)作設計功能見圖12。

圖12 Onshape在線協(xié)作設計功能

4 基于用戶體驗的云建模平臺界面設計策略

通過對文中兩款云建模平臺的多層面對比、分析，并結(jié)合這些理論（“注意”是選擇某些信息進行處理，抑制其他信息的處理，并可有效提高工作效率[24]；友好性在人機交互界面設計中十分重要，高友好性的界面可降低用戶認知負荷[25]；界面可視化是實現(xiàn)高效人機交互的有效手段，其可避免用戶產(chǎn)生認知混亂并引導用戶操作[26]；細節(jié)時刻決定著體驗，細節(jié)可以讓用戶更愉快、更方便地使用產(chǎn)品[27]），提出以下基于用戶體驗的云建模平臺界面設計策略。

4.1 強化使用過程的專注度

專注度主要反映用戶在進行信息處理時“注意”的集中程度。用戶在使用以功能為主的云建模平臺時，因為其周邊場景的多樣性與復雜性，所以更重要的是能夠讓用戶專注于價值創(chuàng)造活動中。首先，界面展示簡潔清晰、一目了然。簡化界面、取消傳統(tǒng)底欄功能模塊，讓用戶的視線在較小范圍內(nèi)掃動，避免視線大幅移動所可能造成的注意力分散。采用可全屏顯示的操作界面，讓用戶專注于工作界面內(nèi)，不被其他非相關的信息窗口干擾。與此同時，在交互中減少為達到既定目標的多余步驟，在提高效率的同時強化專注度。

其次，哈佛大學心理學家George A.Miller認為，由于人類自身神經(jīng)系統(tǒng)的局限，個體對單次信息接收、處理與記憶的容量為5～9比特[28]。對云建模平臺而言，不能夠過多或過少地向用戶呈現(xiàn)相關界面內(nèi)容，內(nèi)容過量將會增加用戶在使用過程中產(chǎn)生的記憶負荷，內(nèi)容缺乏將會提高用戶在使用過程中及時找到目標功能命令的難度。因此，在進行云建模平臺的界面設計時，盡量展示常用的核心內(nèi)容，通過分類的形式減少眾多的功能排布，將繁多平鋪的功能分類群組，每個類別僅展示一個常用的主功能，其余同級功能可收納至群組內(nèi)部，對群組內(nèi)部功能可以根據(jù)用戶使用頻率進行有限的智能調(diào)整排列順序，使平臺界面的功能顯示更為明確。

最后，隨著當今人工智能、云計算、增強現(xiàn)實、虛擬現(xiàn)實等系列新型技術(shù)的日趨完善，在設計云建模平臺時，可嘗試利用多模態(tài)、多維度呈現(xiàn)信息，例如在平臺中加入音頻聲效、采用“真實化”建模等手段，提高用戶的專注度。

4.2 提升界面使用的友好度

傳統(tǒng)建模軟件具有功能復雜、應用性強等特點，其界面中排布許多包含不同功能的命令按鍵。作為符合當今大環(huán)境下的新興生產(chǎn)工具（云建模平臺），其界面設計更需要注重用戶使用時的導向。有效、合理的導向設計能提升界面的友好度，從而提升用戶操作時的體驗。因此，需要對平臺初學者進行有效引導，建立簡單易懂、人性化的功能引導和步驟教學。功能引導設計，當首次使用某功能或鼠標在功能按鍵上懸停時，自動彈出介紹功能使用方式的動圖，可簡單快速地表達該功能的主要使用方法。同時，還應添加更為細化的步驟教學，將復雜的建模目標拆解成數(shù)個簡單易懂的步驟，并配以相應的操作教學視頻，幫助用戶更清晰地了解功能。通過平臺界面的有效引導，可提前或及時解決用戶的操作阻礙，緩解用戶的心理壓力，持續(xù)不斷地建立起用戶對工具使用的信心，從而提升用戶對平臺界面的友好感知。

4.3 增強實時協(xié)作界面可視化

遠程辦公和在線協(xié)作已是如今許多行業(yè)的新常態(tài)，在5G和云計算技術(shù)的不斷發(fā)展下，在線協(xié)作工具層出不窮，各大云建模平臺也紛紛推出云端協(xié)作的功能，方便設計師的協(xié)作與共同管理，如何更好地實現(xiàn)在線協(xié)同設計時的信息可視化已成為云平臺界面設計的重中之重。如圖12所示，Onshape的協(xié)作界面中沒有體現(xiàn)每個設計師所編輯的，各自部件中具體操作過程的可視化效果，只有設計師完成一個功能后才突然出現(xiàn)，會導致與其協(xié)作的其他設計師重復操作與突兀的心理感知。因此，在三維空間中的協(xié)同操作部分，首先，需區(qū)分協(xié)同者的個人狀態(tài)（查看者、編輯者），查看者應顯示正在查看狀態(tài)，如以眼睛形圖標表示，編輯者應顯示正在編輯狀態(tài)，如以筆形圖標表示；其次，每個編輯者的編輯位置、狀態(tài)、目標完成進度等相關信息需實時地反饋于平臺界面中，增強協(xié)同者之間進度的相互了解程度，減少在其他溝通軟件上的切換操作，從而提高工作效率；最后，可通過增加視覺牽引線條解決不同協(xié)作者在三維空間中的三維標識出現(xiàn)的視覺重疊情況。

4.4 注重細節(jié)設計的精致化

由于傳統(tǒng)的社會環(huán)境無法迫使新興生產(chǎn)工具的快速發(fā)展，設計人員沒有對新興生產(chǎn)工具的各類細節(jié)進行考量，從而導致國內(nèi)大多數(shù)現(xiàn)有的云建模平臺的多方面細節(jié)較為簡陋，無法滿足“美即適用”的心理效應。當基本功能需求得以滿足時，精致的細節(jié)可使用戶的操作更為便捷，同時所帶來的體驗提升也是不可忽視的。可從平臺界面的交互操作與視覺表現(xiàn)兩個方面進行細節(jié)精致化，交互操作可分為交互形式、響應及時性和操作流暢度等。例如為了使用戶在工作過程中能夠更加快速、方便地找到所需但不常用的功能命令，可以在平臺中加入一個簡單的命令搜索框，其所占整體界面的范圍并不大，但能夠大幅縮短用戶反復點擊鼠標，尋找所需功能命令所耗費的時間，在提高工作生產(chǎn)效率的同時，避免可能導致的用戶焦躁感，提升用戶體驗。視覺表現(xiàn)可分為色彩、形狀、尺寸等，在界面中功能Icon、反饋提示、操作導航等方面都可以進行深入詳細的設計。例如三維導航塊作為建模區(qū)常用的重要部件，為了使界面和諧統(tǒng)一，展現(xiàn)更為直觀、準確的建模方位，可運用平臺主色彩進行色塊組合，構(gòu)成可展現(xiàn)建模基準面多方位的形體。因此，細節(jié)的注重是云建模平臺界面設計中不可或缺的。

5 云圖三維界面優(yōu)化設計案例

筆者基于以上所提出的云建模平臺界面設計策略，參與了云圖三維云建模平臺的界面優(yōu)化設計實踐。云圖三維是集建模、裝配、工程圖和渲染為一體的云端CAD設計平臺。

建模空間是云建模平臺的操作熱區(qū)，也是其關鍵組成部分，這一部分的交互觸點繁多、交互路徑復雜。首先，平臺界面的整體配色簡潔，讓用戶感到和諧、統(tǒng)一，能進一步突顯產(chǎn)品輕量化的特點，大面積的淡藍色給予用戶清爽、柔和、冷靜等感覺。突出重點的色彩采用與平臺主色彩同色系的深藍色和互補色橙色，讓用戶能夠清晰明了地捕捉到界面中的重要信息點、給予用戶操作指引，同時避免界面色彩過于單調(diào)，為平臺注入活力，例如在繪制草圖過程中的完成和取消命令。其次，平臺界面布局簡潔明了，各功能區(qū)域劃分合理，對頂部的基礎功能與工具欄區(qū)域和底部標簽欄區(qū)域進行了優(yōu)化。最后，對平臺界面中各部分細節(jié)進行了優(yōu)化，例如功能Icon、導航塊及功能的交互形式等。建模空間設計見圖13。

接下來將對建模空間內(nèi)各優(yōu)化部分進行詳細闡述。

圖13 建模空間設計

工具欄是建模空間中的常用部分，用戶通過掃描選擇合適的工具進行三維設計。結(jié)合人的中區(qū)偏見心理和倒金字塔式結(jié)構(gòu)理論，將工具欄調(diào)整至界面中心部分繪制區(qū)域的正上方，并對功能Icon進行重新設計，可提高用戶在建模過程中選擇功能的效率，同時使整體界面更為統(tǒng)一。對比傳統(tǒng)軟件的“廣撒網(wǎng)”式的功能堆疊，在線建模軟件更應該“深挖洞”，即提煉關鍵功能，最大化地提高信噪比，可擴大用戶的操作空間和降低用戶的心理負擔。將所有功能按照使用率進行更加人性化的分類并折疊，以及在界面底部設置標簽欄，不僅滿足所有功能，與傳統(tǒng)軟件同樣強大，而且讓用戶的操作更加自然流暢，符合輕量化特征，見圖14。

在功能面板中，用戶可以更進一步地調(diào)整圖形和模型。將功能面板設計為可拖動的狀態(tài)，可減少面板對用戶操作空間的遮擋，自由度更大，見圖15。

對新用戶而言，學習成本的控制是做好用戶留存的關鍵，設置即時的教學是必要的。當用戶初次使用某一功能時，在不影響用戶使用的前提下，將觸發(fā)教學視頻。在首次使用后，即時教學視頻將收起，如果鼠標懸停（Hover）在功能圖標上3 s，將會再次喚起教學視頻，以防止用戶行為被記憶時效阻斷，見圖16。

圖14 工具欄設計

圖15 功能面板設計

圖16 新手引導設計

三維空間的在線協(xié)同與二維協(xié)作（文檔撰寫、原型設計）有著很大的區(qū)別。二維空間的一切畫面都展示在一個平面上，各協(xié)作者的位置、動態(tài)一目了然。而三維空間的在線協(xié)作則存在空間視覺的死角，比如在多人在線協(xié)同裝配場景中，如果協(xié)作者A的主視角在“前”面，而協(xié)作者B的主視角在“后”面，就無法采用常規(guī)的用外輪廓顏色或模型顏色進行區(qū)分。所以，在設計方案中，采用視覺牽引線的方法來指引協(xié)作者的相互動態(tài)，可以第一時間觀察到協(xié)作者的位置和動態(tài)，見圖17。

圖17 在線協(xié)同設計

傳統(tǒng)的三維導航塊設計往往不追求視覺的美感和交互的精致程度，作為產(chǎn)品使用人員的交互熱區(qū)，需要對導航塊進行設計。導航塊優(yōu)化前鋒利不夠親和，優(yōu)化后圓潤、親和，不僅提供傳統(tǒng)的6面導航（上、下、左、右、前、后），同時也提供斜側(cè)邊及各個斜邊角的導航視角，可交互面從6個提升到26個，視覺美感得到提升的同時，可交互感也進一步增強，見圖18。

6 產(chǎn)品可用性測試

上述云圖三維云建模平臺優(yōu)化后版本已完成開發(fā)，并對其優(yōu)化前后進行可用性測試對比，以評估上述策略的有效性。

6.1 可用性測試簡述

可用性測試是在科學實驗基礎上進行的測試方法，是一個針對目標用戶來評估產(chǎn)品滿足有效性、用戶滿意度、效率等可用性指標程度的過程。常用的可用性測試方法有：專家評審法、觀察法、問卷調(diào)查法、用戶訪談法等。通過對上文測試對象屬性的考量，本文選取John Brooke[29]所提出的系統(tǒng)可用性量表（System Usability Scale）進行可用性測試，其是一種簡單、高效且具有高準確性的問卷調(diào)查量表，廣泛用于評估各類產(chǎn)品或系統(tǒng)的可用性測試之中。

6.2 可用性測試實踐

6.2.1 數(shù)據(jù)處理

在進行數(shù)據(jù)處理之前，需對測試樣本進行選取。根據(jù)Thomas Tullis的研究表明，SUS量表在樣本量為12時的正確結(jié)論百分比為約為100%，往后繼續(xù)增加樣本量，正確結(jié)論百分比無顯著變化[30]，如圖19所示。因此本次測試，邀請12位云圖三維云建模平臺用戶作為測試樣本。在實驗過程中，測試樣本均以標準實驗流程完成對界面優(yōu)化前、后的規(guī)定任務，并處理數(shù)據(jù)。

圖19 SUS量表在測試樣本數(shù)量增加情況下的效果

SUS量表共10道題，并采用5分制，在問卷內(nèi)容中奇數(shù)題（1、3、5、7、9）為正向題，偶數(shù)題（2、4、6、8、10）為負向題，每題間的內(nèi)在聯(lián)系緊密相關。SUS量表的計算標準為，奇數(shù)題（正向題）的轉(zhuǎn)換分為“評分-1”；偶數(shù)題（負向題）的轉(zhuǎn)換分為“5-評分”，然后將所有題目的轉(zhuǎn)換分相加，相加總分與2.5相乘即可得出該SUS量表的最終評分。計算公式如下：

測試樣本A1基于界面優(yōu)化前可用性量表填寫的結(jié)果為：3、3、3、2、4、2、4、3、4、2，根據(jù)公式（1）計算可得SUS最終評分為65，測試樣本A1的測試過程，見圖20。以測試樣本A1為例，依次計算剩余11位測試樣本基于界面優(yōu)化前后SUS量表的整體分值，見表4。

圖20 測試過程

表4 SUS量表的整體分值

Tab.4 Overall SUS scale scores

通過對以上12名測試對象的分值計算可得，優(yōu)化前SUS量表分數(shù)的均值為69.791，優(yōu)化后SUS量表分數(shù)的均值為81.458。

6.2.2 數(shù)據(jù)分析

SUS量表均值分數(shù)反映的是測試產(chǎn)品的總體可用性，學者Aaron Bangor[31]所提出的SUS分數(shù)解析圖由上至下分別表示：可接受范圍、等級比例、形容詞分級與SUS分數(shù)之間的關系，SUS分數(shù)的意義可在圖中得到直觀、清晰的反映。將本次優(yōu)化前、后測試所獲取的SUS量表均值69.791與81.458代入SUS分數(shù)解析圖中，可知云圖三維云建模平臺基于上述界面設計策略進行界面優(yōu)化后，產(chǎn)品總體可用性得到較為顯著的提升，對于用戶而言可接受程度、滿意度也得到較為顯著的提高，見圖21。

圖21 SUS分數(shù)解析圖

7 結(jié)語

隨著新冠疫情常態(tài)化的全面落實，以及中國制造2025、工業(yè)互聯(lián)網(wǎng)進程的不斷推進，以往固有的工作方式和勞動資料已經(jīng)無法滿足當代用戶的需求，遠程協(xié)同辦公的時代已然到來，這將為云建模平臺的發(fā)展提供更為良好的外部條件。同時，用戶也將進一步提高對云建模平臺的要求，云建模平臺的界面設計將成為未來研究的重要部分。本文選取國外兩款具有代表性的云建模平臺，通過對平臺多維度的對比分析，提出了云建模平臺基于用戶體驗的界面設計策略，并對云圖三維云建模平臺的界面進行優(yōu)化設計實踐。只有對用戶的核心需求進行分析、潛在需求進行挖掘，對平臺界面進行優(yōu)化，才能實現(xiàn)云建模平臺從“有用”轉(zhuǎn)變?yōu)椤昂糜谩钡娘w躍，從而支撐我國制造業(yè)更快、更好的發(fā)展，并在未來全球競爭中獲取一席之地。

[1] TAYLOR F W. Scientific Management[M]. London: Routledge, 2004.

[2] NORMAN D, MILLER J, HENDERSON A. What You See, Some of What's in the Future, And How We Go About Doing It: HI at Apple Computer[C]// Conference Companion on Human Factors in Computing Systems. New York: Association for Computing Machinery, 1995: 155.

[3] NORMAN D A. Emotional Design: Why We Love (or Hate) Everyday Things[M]. New York: Basic books, 2004.

[4] ROTO V. User Experience Building Blocks[EB/OL]. (2006-01-07)[2022-08-23]. https://www.researchgate.net/ publication/228415863.

[5] 楊婉婧. 基于用戶體驗的微信小程序微交互設計[J]. 傳媒, 2019(5): 56-58.

YANG Wan-jing. User Experience-Based Micro-Interaction Design for WeChat Applets[J]. Media, 2019(5): 56-58.

[6] HASSENZAHL M. User Experience (UX) towards an Experiential Perspective on Product Quality[C]// Proceedings of the 20th Conference on l'Interaction Homme-Machine. New York: Association for Computing Machinery, 2008: 11-15.

[7] LAW E L C, ROTO V, HASSENZAHL M, et al. Understanding, Scoping And Defining User Experience: a Survey Approach[C]// Proceedings of the SIGCHI Conference on Human Factors in Computing Systems. New York: Association for Computing Machinery, 2009: 719-728.

[8] WIKIPEDIA. User Experience[EB/OL]. (2022-07-17) [2022-08-23]. https://en.wikipedia.org/wiki/User_expe-ri-ence#cite_note-2.

[9] 羅仕鑒, 朱上上, 孫守遷. 人機界面設計[M]. 北京: 機械工業(yè)出版社, 2002.

LUO Shi-jian, ZHU Shang-shang, SUN Shou-qian. Human- Machine Interface Design[M]. Beijing: China Machine Press, 2002.

[10] 邁克爾·厄爾霍夫, 蒂姆·馬歇爾. 設計辭典: 設計術(shù)語透視[M]. 張敏敏, 沈?qū)崿F(xiàn), 王今琪, 譯. 武漢: 華中科技大學出版社, 2016.

ERLHOFF M, MARSHALL T. Design Dictionary: Perspectives on Design Terminology[M]. ZHANG Min-min, SHEN Shi-xian, WANG Jin-qi, Translated. Wuhan: Huazhong University of Science & Technology Press, 2016.

[11] SUTCLIFFE A G. Human-Computer Interface Design[M]. London: Macmillan Press Limited, 1995.

[12] 張凱. 用戶認知視角下的產(chǎn)品體驗設計創(chuàng)新路徑探析[J]. 包裝工程, 2019, 40(22): 28-33.

ZHANG Kai. Innovative Path of Product Experience Design Based on the User's Cognitive Perspective[J]. Packaging Engineering, 2019, 40(22): 28-33.

[13] KHAROUB H, LATAIFEH M, AHMED N. 3D User Interface Design and Usability for Immersive VR[J]. Applied Sciences, 2019, 9(22): 4861.

[14] 范俊君, 田豐, 杜一, 等. 智能時代人機交互的一些思考[J]. 中國科學: 信息科學, 2018, 48(4): 361-375.

FAN Jun-jun, TIAN Feng, DU Yi, et al. Thoughts on Human-Computer Interaction in the Age of Artificial Intelligence[J]. Science China: Information Sciences, 2018, 48(4): 361-375.

[15] REN Fu-ji, BAO Yan-wei. A Review on Human- Computer Interaction And Intelligent Robots[J]. International Journal of Information Technology & Decision Making, 2020, 19(1): 5-47.

[16] WANG Jing, LI Jia-ye, SHI Xiao-tian. Integrated Design System of Voice-Visual VR Based on Multi- Dimensional Information Analysis[J]. International Journal of Speech Technology, 2021, 24(1): 1-8.

[17] HAK R, ZEMAN T. Consistent Categorization of Multimodal Integration Patterns During Human–Computer Interaction[J]. Journal on Multimodal User Interfaces, 2017, 11(3): 251-265.

[18] 唐納德·A. 諾曼. 設計心理學3: 情感化設計[M]. 何笑梅, 歐秋杏, 譯. 北京: 中信出版社, 2015.

NORMAN D A. Desing Psychology 3: Emotional Design[M]. HE Xiao-mei, OU Qiu-xing, Translated. Beijing: China Citic Press, 2015.

[19] 段殳. 色彩心理學與藝術(shù)設計[D]. 南京: 東南大學, 2006.

DUAN Shu. Colour Psychology And Art Design[D]. Nanjing: Southeast University, 2006.

[20] BLAIR-EARLY A, ZENDER M. User Interface Design Principles for Interaction Design[J]. Design Issues, 2008, 24(3): 85-107.

[21] 潘霽. 恢復人與技術(shù)的“活”關系:對“使用與滿足”理論的反思[J]. 國際新聞界, 2016, 38(9): 75-85.

PAN Ji. Restore Human-Media Relationship:A Critique of Uses And Gratifications Theory[J]. Chinese Journal of Journalism & Communication, 2016, 38(9): 75-85.

[22] 姜蘭, 侯婕. “使用與滿足”理論視域下高校圖書館新媒體閱讀推廣的實證研究[J]. 情報科學, 2019, 37(4): 125-129.

JIANG Lan, HOU Jie. Empirical Research on New Media Reading Promotion of Academic Libraries in Perspective of "Use and Satisfaction" Theory[J]. Information Science, 2019, 37(4): 125-129.

[23] 郭湛. 論社會群體及其主體性[J]. 社會科學戰(zhàn)線, 2001(6): 76-81.

GUO Zhan. On Social Groups And Their Subjectivity[J]. Social Science Front, 2001(6): 76-81.

[24] 愛德華·E. 史密斯, 斯蒂芬·M. 科斯林. 認知心理學: 心智與腦[M]. 王乃弋, 羅躍嘉, 譯. 北京: 教育科學出版社, 2017.

SMITH E E, KOSSLYN S M. Cognitive Psychology: Mind And Brain[M]. WANG Nai-yi, LUO Yue-jia, Translated. Beijing: Educational Science Publishing House, 2017.

[25] HONG Chen. Design of Human-Computer Interaction Interface Considering User Friendliness[J]. International Journal of Reasoning-Based Intelligent Systems, 2017, 9(3-4): 162-169.

[26] MACEACHREN A M, TAYLOR D R F. Visualization in Modern Cartography[M]. Amsterdam: Elsevier Science Limited, 2013.

[27] 丹·賽弗. 微交互: 細節(jié)設計成就卓越產(chǎn)品[M]. 李松峰, 譯. 北京: 人民郵電出版社, 2013.

SAFFER D. Microinteractions: Designing with Details[M]. LI Song-feng, Translated. Beijing: The People's Posts and Telecommunications Press, 2013.

[28] MILLER G A. The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information[J]. Psychological Review, 1956, 63(2): 81.

[29] BROOKE J. SUS-A Quick and Dirty Usability Scale[J]. Usability Evaluation in Industry, 1996, 189(194): 4-7.

[30] Tullis T. A Comparison of Questionnaires for Assessing Website Usability[DB/OL]. (2006-06-11)[2022-08-23]. https://www.researchgate.net/publication/228609327.

[31] BANGOR A, KORTUM P, MILLER J. Determining What Individual SUS Scores Mean: Adding an Adjective Rating Scale[J]. Journal of Usability Studies, 2009, 4(3): 114-123.

Interface Design of Cloud Modeling Platform Based on User Experience

JIN Yu-zhe1, XU Shi-hu1, DONG Hang-yu2

(1.School of Art, Chongqing University, Chongqing 401331, China; 2.Chongqing CloudCAD Software Technology Co., Ltd., Chongqing 401331, China)

The work aims to explore the interface design strategies applied to cloud modeling platforms from the perspective of user experience. Through the three dimensions of visual perception experience, interactive perception experience and psychological perception experience when users use the cloud modeling platform, the similarities and differences, advantages and disadvantages of two cloud modeling platforms (Onshape and Fusion 360) were compared and analyzed. An interface design strategy for cloud modeling platform based on user experience was proposed. The interface design of the cloud modeling platform was proposed based on this strategy. And the effectiveness of this strategy was tested by usability testing. Through the experience analysis of the two cloud modeling platforms in visual, interactive and psychological dimensions, the following four types of design strategies are derived: strengthening the concentration of the use process, improving the friendliness of the interface use, enhancing the visualization of the real-time collaboration interface and focusing on the refinement of the detailed design. The use of these four design strategies to guide design practice can effectively improve the usability and user satisfaction of the cloud modeling platform, and provide a basis for interface design and new design orientation for the cloud modeling platform.

user experience; cloud modeling platform; interface design; remote working

TB472

A

1001-3563(2023)04-0277-11

10.19554/j.cnki.1001-3563.2023.04.034

2022–09–12

金宇哲（1994—），男，碩士，主要研究方向為工業(yè)設計與信息交互設計。

許世虎（1956—），男，教授，主要研究方向為工業(yè)設計及其理論。

責任編輯：陳作