姜霄
(嘉興學(xué)院,浙江 嘉興 314001)
后疫情時(shí)代,新型冠狀病毒及其變異毒株仍在給人們的出行安全帶來困擾,出入公共場合驗(yàn)證健康信息已成為防疫工作的常態(tài),健康碼逐漸演變?yōu)橐环N新型的數(shù)字化身份[1]。人們通過對(duì)數(shù)字界面的操作完成信息的展示與核驗(yàn),但操作和失誤延長了正常通行的時(shí)間,增加了弱勢(shì)群體的負(fù)擔(dān),也為竊取隱私和偽碼市場制造了機(jī)會(huì)。健康碼帶來的數(shù)字鴻溝、隱私泄漏等問題不容忽視[2]。良好可用性的用戶界面能“使用戶快捷、容易且不必經(jīng)過復(fù)雜和無關(guān)的過程來完成任務(wù)”[3],但當(dāng)前提高健康碼安檢效率的研究主要聚焦在行政管理、技術(shù)和心理等層面,鮮有從界面設(shè)計(jì)的角度提出優(yōu)化思路。如何構(gòu)建合理的視覺層級(jí)秩序,幫助人們快速地識(shí)別關(guān)鍵信息,實(shí)現(xiàn)流暢操作與高效通行,值得進(jìn)一步深入探索。
健康碼是指以實(shí)際真實(shí)數(shù)據(jù)為基礎(chǔ),經(jīng)自行申報(bào)和后臺(tái)審核后,生成的屬于個(gè)人的二維碼[4]。最早出現(xiàn)在浙江杭州,后逐漸推廣到全國,目前各省市均已推出各自的專屬碼。在疫情暴發(fā)初期,健康碼雖然延長了正常的通行時(shí)間,但以二維碼為中心的界面布局,極大地方便了掃碼等防疫工作,提高了防控效率。后疫情時(shí)期,人們出行頻率升高,界面內(nèi)地區(qū)切換、核酸檢測(cè)和疫苗接種等新功能陸續(xù)上線,不僅增加了操作路徑和出錯(cuò)概率,更激化了人的流通速度和安檢效率之間的時(shí)間矛盾。在某種意義上,健康碼體驗(yàn)問題更預(yù)示著一種數(shù)字鴻溝的出現(xiàn),體現(xiàn)著“社會(huì)共同體對(duì)于個(gè)體的接納與排斥的考量”[1]。
當(dāng)信息種類與數(shù)量不斷增加時(shí),必須重新梳理并優(yōu)化界面布局,提高交互效率[5]。通過對(duì)醫(yī)院、公交地鐵、高鐵和商場等公共場合的典型人群使用健康碼過程的觀察,發(fā)現(xiàn)整體驗(yàn)證速度很容易受到持碼者操作效率和工作人員核實(shí)方式的影響。以某典型用戶的切換申領(lǐng)人和出示健康碼、行程碼任務(wù)為例,運(yùn)用行為反饋分析法可得出耗時(shí)較多的行為主要為:切換家人的健康碼、切換行程卡、程序解鎖、確認(rèn)真?zhèn)巍⒄`識(shí)別和誤操作等(見圖1)。其中老年人群用時(shí)明顯高于年輕人,不得不長期配備志愿者輔助軟件操作,耗時(shí)耗力。通過對(duì)布局結(jié)構(gòu)的分析,發(fā)現(xiàn)界面因過度以“健康碼和品牌為中心”組織層級(jí)的關(guān)系,已導(dǎo)致二維碼、品牌元素及其相關(guān)的信息長期占用最高層級(jí),用戶行為邏輯在大量的交互結(jié)構(gòu)中被淡化,界面中色彩、圖形和文字的層級(jí)邏輯偏離用戶核心目標(biāo),使人們?cè)谶x擇、切換和點(diǎn)擊時(shí)經(jīng)常出現(xiàn)反復(fù)低效的操作,不僅降低了信息讀取的準(zhǔn)確率和行為的規(guī)范性,更方便了隱私的竊取和仿真碼、失效碼的流入。隨著后疫情時(shí)期出行防疫逐漸常態(tài)化,界面視覺層級(jí)關(guān)系將越來越影響到出示和識(shí)別健康碼的速度,以及私密信息的安全。

圖1 任務(wù)中的行為反饋流程圖Fig.1 Behavioral and feedback flow chart in task
優(yōu)化層級(jí)關(guān)系是界面設(shè)計(jì)的重要環(huán)節(jié)。用戶體驗(yàn)要素理論認(rèn)為界面視覺設(shè)計(jì)是為了解決產(chǎn)品框架層的邏輯排布在視覺上如何呈現(xiàn)的問題[6]。有序的信息視覺層級(jí)能“幫助觀眾容易閱讀和理解傳達(dá)的內(nèi)容”[7],人機(jī)交互使視覺信息之間的層級(jí)關(guān)系和秩序變得重要。由此可見,視覺元素的呈現(xiàn)常受到人與界面組件之間交互關(guān)系的影響,用易于理解和使用的方式來處理、布局可視元素,有效地傳達(dá)行為和信息,已成為界面視覺設(shè)計(jì)的重要任務(wù)和目標(biāo)[8],構(gòu)建良好的界面視覺層級(jí)關(guān)系能明顯提升用戶對(duì)信息的獲取效率,從而建立快速的操作路徑[9]。
在搭建合理的視覺層次時(shí),設(shè)計(jì)者需要及時(shí)展開視覺元素的處理與安排整合[10],界面風(fēng)格類型、色彩、尺寸、字體、窗口形態(tài)和材質(zhì)等均為影響層級(jí)秩序構(gòu)建的重要因素,各視覺元素需要根據(jù)當(dāng)前領(lǐng)碼者的核心任務(wù)展開布局。視覺是一種主觀生理感覺,人們對(duì)這些元素的感知經(jīng)常會(huì)受到大腦對(duì)視覺信號(hào)認(rèn)知規(guī)律的影響,視覺層次加工原則逐漸成為了構(gòu)建界面元素顯示邏輯的重要依據(jù)。此原則理論認(rèn)為人類會(huì)運(yùn)用生理本能關(guān)注元素的視覺特征,依次為色彩、形狀和文字,色彩屬于生理性認(rèn)知,形狀屬于初級(jí)層面的認(rèn)知,文字屬于高級(jí)認(rèn)知,認(rèn)知成本的級(jí)別越高,用戶反應(yīng)速度越慢,見圖2。通過對(duì)色彩、形狀和文字在視覺加工層面的認(rèn)知[9],能夠明確當(dāng)前各元素在界面中的自然層次感和人本能的認(rèn)知規(guī)律。在設(shè)計(jì)中,多樣化的視覺元素的重要性也影響著它們到底適合哪一類視覺層次的表現(xiàn)[11]。基于人的視覺生理特征,通過實(shí)際用戶的任務(wù)需求與所強(qiáng)調(diào)信息的有效結(jié)合來構(gòu)建秩序的信息層級(jí)[12],有利于降低人認(rèn)知界面的難度,更是探索層級(jí)設(shè)計(jì)新方法的切入點(diǎn)。

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

圖3 健康碼界面視覺層級(jí)設(shè)計(jì)的核心思路Fig.3 The core idea of visual hierarchy design in health code interface
構(gòu)建層級(jí)秩序的基礎(chǔ)工作是歸納與分類信息點(diǎn),每個(gè)界面通常由大量的視覺信息點(diǎn)組成。歸納能夠迅速全面地了解健康碼界面所包含的信息類型,常見的界面視覺信息類型有圖標(biāo)、文字、圖形、窗口和背景等。根據(jù)任務(wù)異同來分類信息點(diǎn),便于設(shè)計(jì)師快速檢索內(nèi)容。理解行為邏輯是分類的關(guān)鍵,它強(qiáng)調(diào)用戶在使用產(chǎn)品時(shí)所產(chǎn)生的一系列操作行為組織形式的合理性,用戶行為常與用戶類型、所處的場景、達(dá)成的目的和使用的媒介息息相關(guān)[13],行為邏輯能夠幫助設(shè)計(jì)師完整地思考每個(gè)任務(wù)。此外,構(gòu)建時(shí)還應(yīng)與業(yè)務(wù)邏輯、產(chǎn)品規(guī)劃和市場目標(biāo)相結(jié)合。
信息等級(jí)框架的搭建需要以任務(wù)行為的重要性和緊迫性為軸線來展開。以時(shí)間管理領(lǐng)域的“四象限法則”[14]為參考,可建立四個(gè)維度的等級(jí)區(qū)。既重要又緊迫區(qū)域?yàn)楹诵男畔ⅲ饕c健康碼核心任務(wù)相關(guān)。緊急且不重要區(qū)域主要為多變類信息,如領(lǐng)碼人和各地碼的切換、處理彈出框和突發(fā)型小失誤等,雖然一般不影響核心任務(wù)的完成,但容易耗費(fèi)時(shí)間。編輯類信息處于重要且不緊急區(qū)域,其任務(wù)適合用戶在空閑時(shí)慢慢完成。不緊急也不重要區(qū)域一般是指附件類信息,如使用說明、幫助電話等極低頻操作。清晰的等級(jí)分區(qū)降低了界面層級(jí)的權(quán)重評(píng)估與視覺顯示匹配的難度,但此等級(jí)均基于典型的場景進(jìn)行劃分,并不適合所有的場景。
在界面設(shè)計(jì)流程中,信息歸類和等級(jí)劃分屬于前期準(zhǔn)備工作,如何利用認(rèn)知規(guī)律來定義每個(gè)信息的界面顯示邏輯,并運(yùn)用視覺的手段展現(xiàn)出來,將是方法應(yīng)用的難點(diǎn)和重點(diǎn)。
3.3.1 明確驗(yàn)證色彩
在視覺層級(jí)加工原理中,界面的色彩處于認(rèn)知的最高層級(jí),常被用于隱喻重要且簡單的事物,色相、面積和位置經(jīng)常會(huì)影響人們理解界面的速度。在各省市健康碼界面中,常見主色與核心任務(wù)不匹配的現(xiàn)象。如主界面的主色調(diào)并非健康碼的驗(yàn)證色,而是品牌色和其他裝飾元素的色彩,不同地區(qū)的綠碼之間更是色差明顯,見圖4。有效運(yùn)用高層級(jí)的單色調(diào)來明確健康碼的驗(yàn)證色彩體系,同時(shí)降低品牌和二維碼圖形的干擾,將有利于突出界面的核心內(nèi)容,加快核實(shí)的速度,降低碼內(nèi)隱私信息的泄漏風(fēng)險(xiǎn)。

圖4 部分省市的健康碼主界面舉例Fig.4 The health code homepage of some provinces
3.3.2 形態(tài)化任務(wù)類別
形狀的識(shí)別速度往往優(yōu)于文字,而弱于色彩。將高頻且多變的任務(wù)組件與精簡化的形狀相結(jié)合,有利于凸顯出不同類型的焦點(diǎn)組件信息,如運(yùn)用不同結(jié)構(gòu)形態(tài)區(qū)分各地健康碼和領(lǐng)碼者的切換任務(wù)。當(dāng)用戶理解和熟悉精簡的外形和組件的關(guān)系后,任務(wù)的位置和類型將變得容易記憶,誤操作的可能性將變得更低。任務(wù)形態(tài)化的過程中還應(yīng)注意造型的復(fù)雜度和數(shù)量,避免給用戶增加額外的學(xué)習(xí)負(fù)擔(dān)。
3.3.3 分層文字結(jié)構(gòu)
文字屬于高級(jí)認(rèn)知,認(rèn)知速度比較慢,還容易受到字體、字?jǐn)?shù)和尺寸的影響。在大部分健康碼界面中,文字所占的比例均大于圖形,非常不利于快速操作。如果將文字按照重要性分層展示在不同的頁面中,不僅有利于增加界面空間的利用率,更精簡了健康碼主界面的內(nèi)容。核心文字主要布局在高層級(jí)中,可以幫助人們快速理解核心色彩和圖形,而與核心任務(wù)無直接關(guān)聯(lián)的說明性文字、編輯類信息和極少使用的客服、求助文字將被設(shè)置在中低層級(jí)中,呈現(xiàn)出重點(diǎn)突出、層級(jí)分明的特點(diǎn)。
當(dāng)前全國各地的健康碼界面內(nèi)容雖大同小異,設(shè)計(jì)風(fēng)格和信息的層級(jí)關(guān)系卻各有不同,如圖4 所示。為了探索快速且低成本的界面操作模式,從層級(jí)秩序的角度來探討健康碼界面設(shè)計(jì)方法將變得更具現(xiàn)實(shí)意義。本文以浙江省某城市出行類研究項(xiàng)目為例,對(duì)浙江版支付寶健康碼主界面展開視覺設(shè)計(jì)研究。設(shè)計(jì)過程成功導(dǎo)入了新方法,弱化了健康碼品牌元素的影響力,強(qiáng)化了領(lǐng)碼人的作用,見圖5。通過對(duì)界面層級(jí)的重構(gòu),使視覺元素在色彩、形態(tài)和文字的顯示邏輯上發(fā)生改變,從而達(dá)到預(yù)期效果。

圖5 設(shè)計(jì)思路轉(zhuǎn)變示意圖Fig.5 The transformation of design thought
隨著防疫工作的常態(tài)化,浙江支付寶健康碼界面已從最初單一的二維碼展示區(qū)發(fā)展成為了防疫信息的匯集中心。通過對(duì)主界面信息的全面歸納,發(fā)現(xiàn)除了面積較大的二維碼圖標(biāo)和地圖背景外,其他均為文字類信息,雖然都已分區(qū)布局,但繁多的字體、尺寸和字?jǐn)?shù)讓健康碼界面的操作和識(shí)別難度大大增加。設(shè)計(jì)中,設(shè)計(jì)師首先按照用戶行為邏輯對(duì)收集的信息進(jìn)行了分類,如展示二維碼和行程碼、展示防疫身份信息、切換其他人的健康碼、切換地區(qū)碼、幫家人申領(lǐng)健康碼、展示疫苗接種信息和核酸檢測(cè)信息等。另外,數(shù)據(jù)更新、求助電話、二維碼和身份信息的真實(shí)性驗(yàn)證等業(yè)務(wù)邏輯需求也被融入其中。
基于四象限法則原理,對(duì)構(gòu)建好的基礎(chǔ)信息進(jìn)行等級(jí)分區(qū),見圖6。重要且緊迫的核心信息層處于框架頂層,需要快速調(diào)取與展示,主要包括實(shí)時(shí)更新的二維碼、個(gè)人狀態(tài)信息和實(shí)時(shí)佐證信息等。多變信息層主要包括切換各地各類碼、切換家人健康碼、彈出框、展示疫苗接種次數(shù)和核酸結(jié)果等,雖然并不影響核心任務(wù)的完成,但用戶往往需要花更多時(shí)間跨多個(gè)頁面或展開深入的垂直操作,優(yōu)化多變類信息切換的方式和變化的內(nèi)容,有利于減少操作步驟,節(jié)省時(shí)間。在編輯信息層,替家人申領(lǐng)健康碼、申領(lǐng)各地區(qū)域碼、編輯身份信息已成為其主要任務(wù),用戶往往需要預(yù)留更多的時(shí)間在跳轉(zhuǎn)的頁面中進(jìn)行信息填寫和操作,清晰的編輯結(jié)構(gòu)和準(zhǔn)確的圖文入口能幫助用戶快速完成任務(wù)。附件信息層處于框架底層,主要涉及問題求助服務(wù)、信息注釋、卡包和其他功能,用戶一般很少關(guān)注和使用它們。框架分區(qū)有時(shí)也會(huì)受到特殊場景與動(dòng)態(tài)的影響,如當(dāng)某場合同時(shí)需要身份證和健康碼認(rèn)證時(shí),卡包里的身份證件信息則需要升級(jí)到核心層。同時(shí),由于出行碼的內(nèi)容常受到各地區(qū)疫情政策和防疫技術(shù)的影響,考量各元素的重要性時(shí)需要秉承因地制宜的原則。通過重要層級(jí)的劃分,使視覺信息與界面中色彩、文字和圖形認(rèn)知規(guī)律的匹配變得更有理有據(jù)。

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

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

圖8 卡片式的信息切換說明Fig.8 Instructions of card-type information switching
在三角結(jié)構(gòu)中,不同層級(jí)文字將依照不同信息等級(jí),從上至下呈數(shù)量遞增式排布,頂層信息重要且精簡,底層信息次要且詳盡,分層和分量布局加快了主界面信息的讀取速度。本次共進(jìn)行了三處文字優(yōu)化,見圖9。

圖9 三角式文字結(jié)構(gòu)說明Fig.9 Trigonometric text structure
1)健康碼區(qū)。新設(shè)計(jì)將區(qū)域內(nèi)的時(shí)間和使用說明保留,將疫苗說明替換為綠碼類型。將實(shí)時(shí)更新的時(shí)間置于高層,佐證界面的真實(shí)性。由于人們對(duì)健康碼色相的意義早已熟知,所以色彩名稱和注釋文字被隱入二級(jí)界面,用戶只需要單擊圓形卡片,便可在彈出的二級(jí)頁面中查看詳情。
2)個(gè)人身份區(qū)。在眾多個(gè)人信息中,用戶防疫身份和姓名屬于常備信息,應(yīng)將其置于最高層級(jí),而少用的防疫注釋文字和身份證號(hào)碼等更適合藏于二級(jí)詳情頁面中。
3)疫苗接種和核酸檢測(cè)區(qū)。人們對(duì)疫苗接種次數(shù)和核酸檢測(cè)結(jié)果的關(guān)注度往往高于疫苗名稱和核酸檢測(cè)過程的介紹,新設(shè)計(jì)將接種數(shù)據(jù)和核酸結(jié)果設(shè)為高層,增加了動(dòng)態(tài)導(dǎo)讀文字來輔助理解,而詳細(xì)的情況介紹性文字被置于底層。三角形文字結(jié)構(gòu)有利于突出重要的文字,簡化主界面的結(jié)構(gòu),幫助人們?cè)诙虝r(shí)間內(nèi)快速展示和讀取關(guān)鍵內(nèi)容。
此案例是一次對(duì)健康碼界面人性化發(fā)展方向的設(shè)計(jì)探索,距離真正的產(chǎn)品化還需要投入更多的迭代時(shí)間,但通過對(duì)界面中色彩、形態(tài)和文字認(rèn)知規(guī)律的分析與應(yīng)用,總結(jié)出了一系列具備可操作性的設(shè)計(jì)經(jīng)驗(yàn),如突出色彩區(qū)域、卡片形態(tài)結(jié)構(gòu)和三角文字結(jié)構(gòu),讓本次設(shè)計(jì)實(shí)踐兼具一定的研究價(jià)值和實(shí)用價(jià)值。如圖10 所示。

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