姜霄

（嘉興學院，浙江 嘉興 314001）

后疫情時代，新型冠狀病毒及其變異毒株仍在給人們的出行安全帶來困擾，出入公共場合驗證健康信息已成為防疫工作的常態(tài)，健康碼逐漸演變?yōu)橐环N新型的數(shù)字化身份[1]。人們通過對數(shù)字界面的操作完成信息的展示與核驗，但操作和失誤延長了正常通行的時間，增加了弱勢群體的負擔，也為竊取隱私和偽碼市場制造了機會。健康碼帶來的數(shù)字鴻溝、隱私泄漏等問題不容忽視[2]。良好可用性的用戶界面能“使用戶快捷、容易且不必經(jīng)過復雜和無關的過程來完成任務”[3]，但當前提高健康碼安檢效率的研究主要聚焦在行政管理、技術和心理等層面，鮮有從界面設計的角度提出優(yōu)化思路。如何構建合理的視覺層級秩序，幫助人們快速地識別關鍵信息，實現(xiàn)流暢操作與高效通行，值得進一步深入探索。

1 健康碼界面問題的產生

健康碼是指以實際真實數(shù)據(jù)為基礎，經(jīng)自行申報和后臺審核后，生成的屬于個人的二維碼[4]。最早出現(xiàn)在浙江杭州，后逐漸推廣到全國，目前各省市均已推出各自的專屬碼。在疫情暴發(fā)初期，健康碼雖然延長了正常的通行時間，但以二維碼為中心的界面布局，極大地方便了掃碼等防疫工作，提高了防控效率。后疫情時期，人們出行頻率升高，界面內地區(qū)切換、核酸檢測和疫苗接種等新功能陸續(xù)上線，不僅增加了操作路徑和出錯概率，更激化了人的流通速度和安檢效率之間的時間矛盾。在某種意義上，健康碼體驗問題更預示著一種數(shù)字鴻溝的出現(xiàn)，體現(xiàn)著“社會共同體對于個體的接納與排斥的考量”[1]。

當信息種類與數(shù)量不斷增加時，必須重新梳理并優(yōu)化界面布局，提高交互效率[5]。通過對醫(yī)院、公交地鐵、高鐵和商場等公共場合的典型人群使用健康碼過程的觀察，發(fā)現(xiàn)整體驗證速度很容易受到持碼者操作效率和工作人員核實方式的影響。以某典型用戶的切換申領人和出示健康碼、行程碼任務為例，運用行為反饋分析法可得出耗時較多的行為主要為：切換家人的健康碼、切換行程卡、程序解鎖、確認真?zhèn)?、誤識別和誤操作等（見圖1）。其中老年人群用時明顯高于年輕人，不得不長期配備志愿者輔助軟件操作，耗時耗力。通過對布局結構的分析，發(fā)現(xiàn)界面因過度以“健康碼和品牌為中心”組織層級的關系，已導致二維碼、品牌元素及其相關的信息長期占用最高層級，用戶行為邏輯在大量的交互結構中被淡化，界面中色彩、圖形和文字的層級邏輯偏離用戶核心目標，使人們在選擇、切換和點擊時經(jīng)常出現(xiàn)反復低效的操作，不僅降低了信息讀取的準確率和行為的規(guī)范性，更方便了隱私的竊取和仿真碼、失效碼的流入。隨著后疫情時期出行防疫逐漸常態(tài)化，界面視覺層級關系將越來越影響到出示和識別健康碼的速度，以及私密信息的安全。

圖1 任務中的行為反饋流程圖Fig.1 Behavioral and feedback flow chart in task

2 視覺層級加工原則對設計的啟示

優(yōu)化層級關系是界面設計的重要環(huán)節(jié)。用戶體驗要素理論認為界面視覺設計是為了解決產品框架層的邏輯排布在視覺上如何呈現(xiàn)的問題[6]。有序的信息視覺層級能“幫助觀眾容易閱讀和理解傳達的內容”[7]，人機交互使視覺信息之間的層級關系和秩序變得重要。由此可見，視覺元素的呈現(xiàn)常受到人與界面組件之間交互關系的影響，用易于理解和使用的方式來處理、布局可視元素，有效地傳達行為和信息，已成為界面視覺設計的重要任務和目標[8]，構建良好的界面視覺層級關系能明顯提升用戶對信息的獲取效率，從而建立快速的操作路徑[9]。

在搭建合理的視覺層次時，設計者需要及時展開視覺元素的處理與安排整合[10]，界面風格類型、色彩、尺寸、字體、窗口形態(tài)和材質等均為影響層級秩序構建的重要因素，各視覺元素需要根據(jù)當前領碼者的核心任務展開布局。視覺是一種主觀生理感覺，人們對這些元素的感知經(jīng)常會受到大腦對視覺信號認知規(guī)律的影響，視覺層次加工原則逐漸成為了構建界面元素顯示邏輯的重要依據(jù)。此原則理論認為人類會運用生理本能關注元素的視覺特征，依次為色彩、形狀和文字，色彩屬于生理性認知，形狀屬于初級層面的認知，文字屬于高級認知，認知成本的級別越高，用戶反應速度越慢，見圖2。通過對色彩、形狀和文字在視覺加工層面的認知[9]，能夠明確當前各元素在界面中的自然層次感和人本能的認知規(guī)律。在設計中，多樣化的視覺元素的重要性也影響著它們到底適合哪一類視覺層次的表現(xiàn)[11]?；谌说囊曈X生理特征，通過實際用戶的任務需求與所強調信息的有效結合來構建秩序的信息層級[12]，有利于降低人認知界面的難度，更是探索層級設計新方法的切入點。

圖2 視覺加工速度層級關系Fig.2 Hierarchical relationship of visual processing speed

領碼人即安檢時健康碼的實際用戶，而非固定的APP 注冊者或持碼者，以“領碼人為中心”的設計更加關注與二維碼領取者相關的信息組織關系。強調清晰、靈活地呈現(xiàn)各類領碼者的防疫信息，不僅有利于進一步界定產品的使用對象，更延續(xù)了以用戶為中心的設計理念。其視覺層級設計思路主要分為信息基礎、等級框架和層級設計三個階段。首先歸納健康碼界面中的基礎信息“點”，并按照任務進行分類，然后以需求的緊迫性和功能的重要性為軸“線”，將基礎元素分為四維等級框架，最后，依據(jù)視覺層級加工原則，對不同重要性的信息進行色彩、形態(tài)和文字的顯示邏輯匹配，從而完成界“面”的設計。新方法旨在一定程度上提高健康碼界面操作和識別的速度，減少冗余步驟，緩解通行與安檢的時間矛盾，如圖3所示。

圖3 健康碼界面視覺層級設計的核心思路Fig.3 The core idea of visual hierarchy design in health code interface

3 健康碼界面的視覺層級設計方法

3.1 構建信息基礎

構建層級秩序的基礎工作是歸納與分類信息點，每個界面通常由大量的視覺信息點組成。歸納能夠迅速全面地了解健康碼界面所包含的信息類型，常見的界面視覺信息類型有圖標、文字、圖形、窗口和背景等。根據(jù)任務異同來分類信息點，便于設計師快速檢索內容。理解行為邏輯是分類的關鍵，它強調用戶在使用產品時所產生的一系列操作行為組織形式的合理性，用戶行為常與用戶類型、所處的場景、達成的目的和使用的媒介息息相關[13]，行為邏輯能夠幫助設計師完整地思考每個任務。此外，構建時還應與業(yè)務邏輯、產品規(guī)劃和市場目標相結合。

3.2 搭建等級框架

信息等級框架的搭建需要以任務行為的重要性和緊迫性為軸線來展開。以時間管理領域的“四象限法則”[14]為參考，可建立四個維度的等級區(qū)。既重要又緊迫區(qū)域為核心信息，主要與健康碼核心任務相關。緊急且不重要區(qū)域主要為多變類信息，如領碼人和各地碼的切換、處理彈出框和突發(fā)型小失誤等，雖然一般不影響核心任務的完成，但容易耗費時間。編輯類信息處于重要且不緊急區(qū)域，其任務適合用戶在空閑時慢慢完成。不緊急也不重要區(qū)域一般是指附件類信息，如使用說明、幫助電話等極低頻操作。清晰的等級分區(qū)降低了界面層級的權重評估與視覺顯示匹配的難度，但此等級均基于典型的場景進行劃分，并不適合所有的場景。

在界面設計流程中，信息歸類和等級劃分屬于前期準備工作，如何利用認知規(guī)律來定義每個信息的界面顯示邏輯，并運用視覺的手段展現(xiàn)出來，將是方法應用的難點和重點。

3.3 設計階段

3.3.1 明確驗證色彩

在視覺層級加工原理中，界面的色彩處于認知的最高層級，常被用于隱喻重要且簡單的事物，色相、面積和位置經(jīng)常會影響人們理解界面的速度。在各省市健康碼界面中，常見主色與核心任務不匹配的現(xiàn)象。如主界面的主色調并非健康碼的驗證色，而是品牌色和其他裝飾元素的色彩，不同地區(qū)的綠碼之間更是色差明顯，見圖4。有效運用高層級的單色調來明確健康碼的驗證色彩體系，同時降低品牌和二維碼圖形的干擾，將有利于突出界面的核心內容，加快核實的速度，降低碼內隱私信息的泄漏風險。

圖4 部分省市的健康碼主界面舉例Fig.4 The health code homepage of some provinces

3.3.2 形態(tài)化任務類別

形狀的識別速度往往優(yōu)于文字，而弱于色彩。將高頻且多變的任務組件與精簡化的形狀相結合，有利于凸顯出不同類型的焦點組件信息，如運用不同結構形態(tài)區(qū)分各地健康碼和領碼者的切換任務。當用戶理解和熟悉精簡的外形和組件的關系后，任務的位置和類型將變得容易記憶，誤操作的可能性將變得更低。任務形態(tài)化的過程中還應注意造型的復雜度和數(shù)量，避免給用戶增加額外的學習負擔。

3.3.3 分層文字結構

文字屬于高級認知，認知速度比較慢，還容易受到字體、字數(shù)和尺寸的影響。在大部分健康碼界面中，文字所占的比例均大于圖形，非常不利于快速操作。如果將文字按照重要性分層展示在不同的頁面中，不僅有利于增加界面空間的利用率，更精簡了健康碼主界面的內容。核心文字主要布局在高層級中，可以幫助人們快速理解核心色彩和圖形，而與核心任務無直接關聯(lián)的說明性文字、編輯類信息和極少使用的客服、求助文字將被設置在中低層級中，呈現(xiàn)出重點突出、層級分明的特點。

4 案例應用

當前全國各地的健康碼界面內容雖大同小異，設計風格和信息的層級關系卻各有不同，如圖4 所示。為了探索快速且低成本的界面操作模式，從層級秩序的角度來探討健康碼界面設計方法將變得更具現(xiàn)實意義。本文以浙江省某城市出行類研究項目為例，對浙江版支付寶健康碼主界面展開視覺設計研究。設計過程成功導入了新方法，弱化了健康碼品牌元素的影響力，強化了領碼人的作用，見圖5。通過對界面層級的重構，使視覺元素在色彩、形態(tài)和文字的顯示邏輯上發(fā)生改變，從而達到預期效果。

圖5 設計思路轉變示意圖Fig.5 The transformation of design thought

4.1 搭建基礎與搭建框架

隨著防疫工作的常態(tài)化，浙江支付寶健康碼界面已從最初單一的二維碼展示區(qū)發(fā)展成為了防疫信息的匯集中心。通過對主界面信息的全面歸納，發(fā)現(xiàn)除了面積較大的二維碼圖標和地圖背景外，其他均為文字類信息，雖然都已分區(qū)布局，但繁多的字體、尺寸和字數(shù)讓健康碼界面的操作和識別難度大大增加。設計中，設計師首先按照用戶行為邏輯對收集的信息進行了分類，如展示二維碼和行程碼、展示防疫身份信息、切換其他人的健康碼、切換地區(qū)碼、幫家人申領健康碼、展示疫苗接種信息和核酸檢測信息等。另外，數(shù)據(jù)更新、求助電話、二維碼和身份信息的真實性驗證等業(yè)務邏輯需求也被融入其中。

基于四象限法則原理，對構建好的基礎信息進行等級分區(qū)，見圖6。重要且緊迫的核心信息層處于框架頂層，需要快速調取與展示，主要包括實時更新的二維碼、個人狀態(tài)信息和實時佐證信息等。多變信息層主要包括切換各地各類碼、切換家人健康碼、彈出框、展示疫苗接種次數(shù)和核酸結果等，雖然并不影響核心任務的完成，但用戶往往需要花更多時間跨多個頁面或展開深入的垂直操作，優(yōu)化多變類信息切換的方式和變化的內容，有利于減少操作步驟，節(jié)省時間。在編輯信息層，替家人申領健康碼、申領各地區(qū)域碼、編輯身份信息已成為其主要任務，用戶往往需要預留更多的時間在跳轉的頁面中進行信息填寫和操作，清晰的編輯結構和準確的圖文入口能幫助用戶快速完成任務。附件信息層處于框架底層，主要涉及問題求助服務、信息注釋、卡包和其他功能，用戶一般很少關注和使用它們。框架分區(qū)有時也會受到特殊場景與動態(tài)的影響，如當某場合同時需要身份證和健康碼認證時，卡包里的身份證件信息則需要升級到核心層。同時，由于出行碼的內容常受到各地區(qū)疫情政策和防疫技術的影響，考量各元素的重要性時需要秉承因地制宜的原則。通過重要層級的劃分，使視覺信息與界面中色彩、文字和圖形認知規(guī)律的匹配變得更有理有據(jù)。

圖6 健康碼界面的信息等級框架Fig.6 Information level framework of the health code interface

4.2 突出健康碼色彩區(qū)域

強化核心層的防疫信息與色彩的關聯(lián)性，讓色彩成為獨立的防疫符號，同時減弱二維碼圖形在頂級頁面的影響力，有利于增強信息的聚焦感和等級的識別性。新設計大幅減少了原界面中支付寶品牌藍色的面積，將二維碼的圖形簡化成為了圖標，需要查看原始碼時，點擊圖標進入隱藏于二級目錄內的詳情頁面即可。將不同等級健康碼的色彩純粹化、面積擴大化、色域值規(guī)范化，并與個人防疫身份文字相關聯(lián)，可提升健康碼遠距離辨識的準確性，減少誤判。將變化中的時間數(shù)字賦予明確的色彩和固定的位置，便于實時佐證，幫助工作人員快速辨別碼的真?zhèn)?。強化核心色和弱化輔助色將使健康碼的彩色特征變得更加突出，讓核心信息的識別過程變得簡單且快速，同時讓二維碼的隱私內容得到適當保護，如圖7 所示。

圖7 健康碼主界面的新舊設計版本Fig.7 New and old design versions of the health code homepage

4.3 卡片形態(tài)的門類切換

運用卡片式的視覺形態(tài)和交互模式，將幫助用戶在多變信息層中快速反復地切換核心類信息，而不必往返于各級頁面或平臺，見圖8?？ㄆY構主要以當前領碼者的身份為中心，從而聯(lián)動上部的健康碼和下部的其他信息，實現(xiàn)同步切換。上層的健康碼、行程碼等信息運用圓形卡片展示，左右劃動可以切換不同類型和地區(qū)的出行碼，中間的持碼者姓名、身份和地區(qū)信息采用方形卡片展示，左右劃動可以快速展示不同家人的信息，減少了整體頁面的切換和跳轉。卡片式形態(tài)還被運用在信息的擴展上，深色的疫苗接種和核酸結果等信息呈上下布局，不僅突出了核心內容，更有利于信息的閱讀。在實際操作時，持碼者身份信息卡正處于掌腕關節(jié)操作的舒適區(qū)，非常適合用戶進行單手滑動與切換操作。精簡的形態(tài)易于用戶快速記憶，數(shù)據(jù)聯(lián)動切換方便了用戶高效查詢，如圖8 所示。

圖8 卡片式的信息切換說明Fig.8 Instructions of card-type information switching

4.4 三角式文字結構

在三角結構中，不同層級文字將依照不同信息等級，從上至下呈數(shù)量遞增式排布，頂層信息重要且精簡，底層信息次要且詳盡，分層和分量布局加快了主界面信息的讀取速度。本次共進行了三處文字優(yōu)化，見圖9。

圖9 三角式文字結構說明Fig.9 Trigonometric text structure

1）健康碼區(qū)。新設計將區(qū)域內的時間和使用說明保留，將疫苗說明替換為綠碼類型。將實時更新的時間置于高層，佐證界面的真實性。由于人們對健康碼色相的意義早已熟知，所以色彩名稱和注釋文字被隱入二級界面，用戶只需要單擊圓形卡片，便可在彈出的二級頁面中查看詳情。

2）個人身份區(qū)。在眾多個人信息中，用戶防疫身份和姓名屬于常備信息，應將其置于最高層級，而少用的防疫注釋文字和身份證號碼等更適合藏于二級詳情頁面中。

3）疫苗接種和核酸檢測區(qū)。人們對疫苗接種次數(shù)和核酸檢測結果的關注度往往高于疫苗名稱和核酸檢測過程的介紹，新設計將接種數(shù)據(jù)和核酸結果設為高層，增加了動態(tài)導讀文字來輔助理解，而詳細的情況介紹性文字被置于底層。三角形文字結構有利于突出重要的文字，簡化主界面的結構，幫助人們在短時間內快速展示和讀取關鍵內容。

此案例是一次對健康碼界面人性化發(fā)展方向的設計探索，距離真正的產品化還需要投入更多的迭代時間，但通過對界面中色彩、形態(tài)和文字認知規(guī)律的分析與應用，總結出了一系列具備可操作性的設計經(jīng)驗，如突出色彩區(qū)域、卡片形態(tài)結構和三角文字結構，讓本次設計實踐兼具一定的研究價值和實用價值。如圖10 所示。

圖10 健康碼部分界面的視覺設計圖Fig.10 Some visual designs of health code interface

5 結語

人們在后疫情時期的出行需求仍將持續(xù)增加，與健康碼綁定的數(shù)據(jù)和功能可能會越來越多[2]，每位出行人的驗證效率將越來越影響整體的通行速度。健康碼所帶來的使用、安全等價值問題將會被持續(xù)關注，創(chuàng)造好體驗的視覺美學仍然是產品重要的價值機會點[15]。健康碼界面視覺層級設計方法根據(jù)領碼人的特征，對界面信息進行整體歸類、任務劃分和等級框架構建，將信息與視覺層次加工原則相結合，從而實現(xiàn)層級關系的優(yōu)化。本文將不同等級的信息與色彩、形狀、文字認知規(guī)律的設計匹配當作研究的重點，并歸納出多種有效的交互結構和層級設計經(jīng)驗，旨在最大程度地精簡界面的操作步驟，加快驗證的速度，給疫情期間匆匆出行的人們帶來一些便利，為辛苦的安檢人員降低工作難度，更為各地區(qū)驗證界面的研發(fā)工作提供積極的參考與借鑒。