徐永順,周 晶
萬物互聯與人工智能時代,智能手機、可穿戴設備、桌上電腦、電子閱讀器、智能電視等終端全面滲入公眾日常生活,成為人與人、人與設備、人與知識互動交流的媒介[1]。在多平臺終端構成的信息生態系統中,跨平臺及跨屏行為成為常態化的知識獲取途徑,多屏整合而成的生態系統成為公眾工作和生活的強大引擎[2],人與人、人與設備交互的形式、內容與介質不斷演化。鍵盤、鼠標等早期人機交互的重要媒介在移動智能終端快速發展的今天很難滿足公眾信息交互、知識獲取、互動交流并同步多屏內容的需求[3]。優化各類終端設備的交互體驗,協助用戶在多種屏幕上遷移信息、汲取知識、增強用戶跨屏理解,實現將多種設備的知識系統進行一致性融合,減輕跨屏知識獲取的負擔尤為重要。
跨屏設計不能滿足于為單一設備設計一個單獨的產品,應當提供跨屏的系列服務,讓用戶能夠在切換設備時有著無縫的使用體驗。用戶在進行跨屏交互時會面臨著跨屏應用泄露隱私信息、難以適應多種平臺技術標準、相同功能不同操作方式等困擾[4]。既有交互設計理論模型中,無論是以用戶為中心的交互設計、以活動為中心的交互設計、系統設計,還是天才設計[5],核心方法皆為洞悉用戶認知模式、準確把握用戶行為方式??缙两换ピO計與單設備交互設計相比,有著更為復雜的起點與要求,主要有六大原因。
(1)屏幕尺寸碎片化。各類智能終端屏幕差異大,設備屬性復雜,物理尺寸、屏幕分辨率和屏幕密度均對界面呈現影響大。信息表達方面,同樣的內容通過簡單縮放無法解決信息在不同尺寸屏幕呈現的問題,大屏幕上井然有序的信息呈現在小屏幕上會丟失細節;交互設計方面,寬而淺的信息層級與窄而深的信息層級都有不同的屏幕尺寸匹配要求,錯誤匹配會削弱信息跨屏表達的一致性、完整性與延續性,進而影響受眾體驗。
(2)交互設備復雜化。交互設備已跨越鼠標、鍵盤為主的初級階段,圖形圖像設備、聲控設備、體感設備、觸覺設備、三維交互設備、生物特征識別等已經在主流智能終端上應用,技術標準多樣化、終端分辨率與解析度復雜化、應用場景多元化、互動方式差異化為跨屏交互設計及信息呈現帶來了較大的挑戰。
(3)交互軟件多樣化。隨著信息技術的快速發展,創新型交互軟件層出不窮,設計人員面臨著如何適應多種平臺與操作系統共存的問題。跨屏知識表達如何在不同的系統平臺保持較為一致的功能和用戶體驗越來越受到交互設計師的重視。
(4)操作方式差異化。受眾認知圖式與操作方式是跨屏交互設計與信息呈現的起點,移動及固定智能終端的用戶群體幾乎跨越了各個年齡與社會階層,他們有著不同的認知水平、文化素養與操作習慣,設計人員很難通過一種或數種用戶畫像精準把握其行為模式。
(5)跨屏動因多重化。不同受眾跨屏動因相異,即使同一受眾不同場景下也會有跨屏選擇,追求操作舒適、尋求隱私保護或支付安全、降低經濟成本、提高操作效率、提高與他人互動、管理個性化知識系統及時間與地點的限制均可能產生跨屏行為[6],在一定程度上造成了跨屏行為的即時性、碎片化、社交性、本地性與情境性。
(6)用戶群體細分化。胡蓉等通過訪談、結構化數據定量測度與分析等方法將跨屏用戶細分為偶爾跨屏、普通、專業、先鋒派4種類型[6],每種用戶均有其跨屏動因、行為方式、跨屏數量、跨屏頻率及跨屏任務的差異,對信息表達及跨屏互動也有各自的需求,這給設計師帶來了挑戰。
當下智能終端全面普及,跨屏體驗時代來臨。圍繞跨屏交互設計及知識表達,學者們做出了系列研究。比如,Nguyen提出使用界面模式來解決跨平臺界面設計的想法[7];George等在基于對自然人機交互界面研究的基礎上提出物體(object)、容器(container)、手勢(gesture)、操作(manipulation)的交互設計概念,與意象圖式設計理論非常類似[8];Katie等建立界面交互與硬件交互的呼應,以廣播者、通知人、采集者、控制器、集線器6種角色為核心的MCK多平臺角色定位[9];余小萍等構建出移動搜索情境下跨屏行為“流”概念模型,對移動搜索情境下的跨屏行為流特征與流體驗輪廓進行研究[2];胡蓉等對跨屏搜索及跨屏行為進行較為系統的研究[6,10];趙麗維[11]、王靖等[12]基于一致性理論對數字閱讀跨屏界面設計、移動學習資源跨屏表達進行研究。系統分析發現,已有研究側重于移動搜索及用戶行為理論,案例研究有待加強。內容傳播方面,以傳統電視內容為主,業內呼聲甚高的對智慧圖書館建構有重要影響的跨屏交互設計及知識表達鮮有文獻涉及,涉及的研究方法如魚骨形、通用型、響應式等往往注重內容與平臺,對公眾的感知性本源研究較少。事實上,知覺、認知和人的生理意識在多設備交互設計中起到了重要的作用,既有設計方法很難從更深角度揭示跨屏交互設計與人體感官體驗的本源性聯系,使現有跨屏交互設計方法很難打開洞見之門??缙两换ピO計需要創新的設計思維與設計理論,既能利用公眾的先驗知識與技能,又能適應圖書館信息與公眾互動的人工智能化之趨勢,同時有機融合跨屏知識表達的一致性與多屏的復雜性,為智能圖書館向智慧圖書館過渡提供必要的理論積淀與設計支撐。優良的理論總是在窮盡問題的常規解決方法之后自然出現,意象圖式特有的前置性、無意識性、穩固性、普適性與通感性啟發了我們的思維[13]。
意象圖式主要受哲學、語言學與心理學啟發,是認知語義學的核心概念。Lakoff不同意哲學中長期存在的客觀主義(objectivism)和主觀主義(subjectivism)劃分,提出第三種哲學系統——經驗主義(experientialism),關注人類如何理解自身的經驗并感知概念,認為意象圖式是人類最基本的重復感覺運動經驗的抽象表達,是在視覺、動覺經驗中反復出現的動態構型。它為經驗提供連貫性及結構[14],是人類心智模型理解和推理世界的第一個組成部分[15],具有無意識性、前置性、穩固性、普適性與通感性等特點,無需刻意學習和努力即能自動激活并在占用極少心智資源的情況下發揮作用[16]。赫提尼基于設計學視角對意象圖式做出分類[17],見表1。

表1 意象圖式分類列表
意象圖式理論的實踐案例證明其在人機交互設計中具備較大的價值。設計心理學家赫提尼研究了意象圖式在設計學科中的應用[18-19];Lund以容器圖式為主設計了網絡書簽組織系統[20];Maglio等運用意象圖式理論分析互聯網中用戶的心理模型[21];筆者在某大學圖書館網站交互設計中引入意象圖式理論[22];王赟曌等對意象圖式在移動互聯終端的手勢操控進行了研究[23];肖亦奇等對意象圖式編碼在交互隱喻設計方法中的運用做了探討[24]??梢钥闯觯庀髨D式理論在交互設計中已有應用且效果良好,但在圖書館信息系統跨屏交互設計及跨屏知識表達中的研究較為單薄。究其原因,一是學科新:隱喻思維有著較悠久的歷史與豐碩的研究成果,但意象圖式作為其中的認知基礎單獨形成概念僅有數十年歷史,屬于年輕學科,研究基礎薄弱;二是難度大:意象圖式作為語言學與修辭學分支,研究者多以人文社科領域為主,與計算機科學交叉的跨學科研究要求研究者具備扎實的數理基礎;三是資料少:上文已經分析,不做贅述。為此,筆者探索將認知學界這一富有潛力的理論與圖書館信息跨屏交互設計與跨屏知識表達相融合,為后續研究提供參考。
圖書館信息系統跨屏交互設計需要一套解釋的手段,也就是對跨屏交互設計的認知,這種認知與人類的認知經驗密不可分。在意象圖式的理論體系中語言是人類認識各種概念的工具,圖式是人類理解概念的一種結構,跨屏交互系統的組成要素是跨屏交互系統產生的概念,促使其形成的則是各種不同的影響因子,有人的因素、媒介因素、場景因素、行為因素等[25]。借助意象圖式理論將之前對于經驗感知的事物與事物之間的結構,映射至跨屏交互建構。其融合流程包含3個主要步驟:一是對各類智能終端交互模態進行系統解析,在此基礎上將跨屏交互設計構成要素之認知抽取為意象圖式子圖式;二是將提取到的意象圖式與圖書館信息系統跨屏交互要素融合;三是將整合后的交互設計輸出為UI界面,隨后根據具體平臺與使用環境適當調整。
作為研究圖書館信息跨屏交互設計及知識跨屏表達的第一步,對常見智能終端交互模態及信息展示方式進行系統解析是基礎且重要的工作。筆者2013年起采用文獻研究法、訪談法、場景觀察法以及部分智能終端后臺數據定量分析法,對常用智能終端在不同場景下的交互特征做了持續研究,成果如圖1所示??梢姴煌悄芙K端在交互方式、適用情境、交互時間、對用戶先驗知識要求、其他設備依賴度及多任務并行上均有區別。

圖1 常用智能終端交互模態比較
圖式抽取是跨屏交互設計的重要基礎與出發點,交互動作與意象圖式中84%的子圖式具有一致性,其中反應一致性大于80%的圖式占比72%[21]。筆者前期研究中對圖式抽取方法進行了系統性歸納及驗證,總結出了既往固定圖式利用、目標用戶深度調研、既有案例合理遷移3項基本原則[22]。本文在前期研究的基礎上深入挖掘圖式抽取方式,對赫提尼提出的7大類意象圖式采取演繹法與歸納法,選取部分代表性圖式,將其歸納、演繹至既有或潛在的交互方式,完成跨屏交互設計之圖式抽取步驟。
3.2.1 容器圖式
用戶在跨屏產品中的互動操作發生在一定的空間范圍之內,它可以是某個游戲角色的活動范圍,可以是進行某項操作時不能越界的智能終端屏幕,也可以是某些具有相同或類似功能的軟件圖標工具的合集。無論用戶還是設計師,無論居于室內還是漫游在各類智能終端進行各種互動操作,容器圖式的概念無意中已成為人類建構各項行為的結構和工具。容器圖式在跨屏交互設計中主要應用于交互界面及圖標設計,它的重要性不在于啟發界面及交互圖標的色彩、形狀、質感等視覺表達,它可以啟發深層的人類認知結構、用戶心智模式在各項跨屏交互中的映射,兩者融合重點聚焦3個方面。
(1)功能。具有類似、延續或一致邏輯的系列功能圖標,用戶(設計師)在完成諸如改變字符外觀(word等辦公軟件)、調整個人資料(站點或移動產品個人偏好設置)、優化圖表表達(Illustrator圖形輪廓修整)之類的系列操作時會組合、連續使用此類圖標。將系列圖標聚合于屏幕一定空間范圍之內,用戶只需移動較少的距離即可完成;且為邏輯一致的系列操作,不需用戶尋找另外的功能組件,節省用戶操作心智資源并緩解其手部疲勞。
(2)使用頻率。多屏互動中,按照用戶的使用頻率及強度規劃界面、設置圖標,將用戶高頻高強度使用的圖標置于用戶隨手就能接觸到的容器范圍之內,將用戶較少或者個性化操作時用到的功能圖標置于終端屏幕一隅或二級菜單的容器圖式之中,把有限的屏幕資源留給優先級較高的交互。比如,微信對話窗口、智能手機初始屏幕圖標設置、智能電視遙控器選臺及音量調節,均處于用戶可以隨手觸碰之位置,而用戶個人信息設置、智能電視屏幕顯示模式調整、用戶權限調節等較少操作的圖標則放置于二級菜單或屏幕側邊。
(3)用戶行為。用戶為完成某項特定的完整活動,需要順序不間斷地進行系列交互。據此聚合完成系列活動的圖標于一個容器之內,能夠為用戶帶來流暢且一致的使用體驗。比如,購物平臺商品展示頁面的商品說明、圖片展示、細節呈現、購買詢價等分別置于抽象的空間圖式范圍之中,這也與認知心理學中人們對某項物品從認知、興趣、欲望到采取行動這一行為順序高度契合[26]。
3.2.2 路徑圖式
路徑圖式由起始點、目標點以及一系列連接線或者連續點組成。人類在嬰兒期尚不能看清物體的具體形狀時已經有了感知物體運動路徑的能力。隨著知覺心理學與設計學科的發展,路徑圖式在設計中已得到了一定體現,如交互設計中常用的客戶旅程圖、軟件產品設計邏輯圖等。文章將抽象的路徑圖式投射至跨屏交互設計,實踐案例中將路徑圖式應用于用戶行為設計,在跨屏使用的一致模式、同步模式與共享模式下,能夠顯著提升用戶跨屏操作的適應性、流暢性與連續性。
3.2.3 部分-整體圖式
部分-整體圖式對所見之物“是什么”“可能是什么”有著重要的認知意義,格式塔心理學在設計上的應用案例多為部分-整體圖式的運用。文章后續案例對該圖式在用戶行為的感知層面做深層次挖掘,在對用戶在跨屏產品中的交互做出完整與離散的行為識別后,將之運用于跨屏交互設計實務。
基于上述研究,將抽取出的意象圖式子圖式與各交互模態進行擬合,建構出圖2所示的融合策略。跨屏交互由工具、目的、場景、動作與用戶五大要素構成。在交互建構中,經過實踐驗證有效并被廣泛運用的容器、路徑、部分-整體、左-右、上-下、匹配及鏈接等子圖式需要根據跨屏場景、用戶動作、用戶工具等具體要素提成與順化,尤其是用戶動作。設計人員依據子圖式不同特點,圍繞跨屏項目總體功能,充分調研功能菜單使用頻率、整體邏輯建構與業務流程,對跨屏交互項目細節(搜索、分享、文獻傳遞等)及交互行為細節(選擇、按下、拖曳、移入、移出、掠過等)進行匹配、融合與設計轉化,進而輸出跨屏交互產品。

圖2 意象圖式與跨屏交互設計融合策略
江南大學是教育部直屬、國家“211工程”重點建設高校和一流學科建設高校,該校圖書館服務3.5萬余名師生,具有一定的代表性。該校圖書信息系統在前期能較好滿足師生閱覽、檢索、借閱、查新、文獻傳遞等需求。隨著信息技術發展、各類移動智能終端普及、線上學術資源沖擊、師生使用場景延伸及個性化需求不斷擴展,圖書館既有信息系統難以滿足師生、尤其是在復雜場景下的需求,主要表現在:(1)原有信息系統以WEB端為主,隨著移動互聯技術的進步,無法滿足用戶全場景、個性化、移動化、碎片化的知識獲取需求。(2)原有圖書館信息平臺交互設計采取了系統設計及天才設計為主的方式,關注點在于美觀性、宣傳性及基本功能展示,忽視了各項功能在使用過程中的便利與否,更談不上用戶跨平臺訪問時的互補性、一致性與延續性。(3)原有服務重點在于滿足用戶顯性需求,個性化服務、碎片化知識獲取及隱性化需求考慮不周,已有館內硬件設施以滿足全校師生即時館內閱讀為主,無法適應師生偶發信息及時獲取、多場景資源檢索、館藏數字資源大屏閱讀之趨勢。
作為系統優化的基礎工作,對師生跨屏交互需求、跨屏交互操作及多平臺信息獲取進行研究是進行跨屏交互設計的基礎。跨屏作為信息時代的新興用戶信息行為,情境為王,用戶的設備選擇由情境驅動。在圖書館的信息利用方面,以對該校30人訪談為主,參考筆者工作單位10人的調研,析出工作、學習、外出、公告信息瀏覽與功能模塊交互共5個常用跨屏情境。各情境下的信息利用行為表現包括檢索、瀏覽、刪除、選擇、獲取、利用等行為。辦公情境及學習情境下,師生以PC端設備為主,屏幕較大且交互方式豐富,該設備端工作效率最高;外出情境下以手機端設備為主,平板電腦輔助,能夠滿足即時信息處理、保持連接及交流之需;平板電腦、館內大屏主要滿足公告信息瀏覽情境,平板電腦使用無時間方面的限制,用戶可在家中休閑娛樂時使用;自助機則主要滿足功能模塊交互情境,該端口屏幕較大,但交互模式以觸控及點選為主,分辨率有限,主要滿足用戶重要、即時(館內檢索借閱、打印復印、自習室預定)等功能需求。
在師生跨屏行為中,胡蓉等從任務維度和時間維度將跨屏行為分為4類:同一任務同步跨屏、同一任務異步跨屏、不同任務同步跨屏及不同任務異步跨屏[15],基本覆蓋該校圖書館信息系統的跨屏行為。經系統分析后,本文總結出如表2所示的情境、跨屏行為及不同終端對應表。調研發現跨屏搜索、跨屏閱讀及多屏信息發布是較為復雜、校內外師生及管理員使用頻率較高的功能,具有典型性,設計中重點運用意象圖式對這些功能點進行優化。

表2 圖書館用戶跨屏行為、情境及智能終端對應表
用戶的知識獲取需求被激發時,將會在任何時間和場景開始搜索,且用戶的同一搜索活動會在不同類型的設備間轉移,而不僅僅是不同任務使用不同設備。調研發現,用戶(師生)在工作、學習及室外場景下對圖書館信息跨屏搜索的一致性、連續性有著較為強烈的需求。為此,在圖書館多屏搜索設計中,以網上包庫并主要通過IP控制的WEB檢索為基準,在圖書館大屏檢索中主要以部分-整體、鏈接及匹配等圖式為指導,設計產出如圖3所示。匹配圖式是復合圖式的子圖式,意指在圖案、顏色或設計上是相應的、互補的。設計過程中無意識運用匹配圖式的案例很多,如數據可視化中時間線匹配時間順序、電視遙控器按鍵匹配實際空間等。文章將匹配圖式及其隱喻擴展引申至圖書館信息大屏搜索交互設計。圖3左半部分為圖書館觸摸大屏圖書檢索交互設計,右半部分為WEB檢索交互設計,大屏信息檢索區及3個信息拓展區匹配用戶長期以來形成的WEB檢索習慣,師生可以按照已有的心智模型進行交互從而節省心智資源。信息檢索區中以容器圖式錨定師生最為關注的到期提醒、新書通報,同時整合左右圖式與上下圖式,便于用戶直觀接收檢索結果。館內大屏為觸覺交互,交互細節不如WEB精準,為此特設熱門搜索區及檢索輸入框,方便師生點選,緩解常用資料檢索的手部疲勞。

圖3 基于意象圖式的跨屏搜索交互設計
數字閱讀終端以WEB、館內大屏及移動終端為主。作為數字閱讀交互設計的基礎,文章對常見及本館資源重點展示終端進行了較為系統的交互模式分析,圖4為各種展示要素在不同終端平臺間交互模式的切換。

圖4 圖書館信息交互模式切換示意圖
基于上述研究,結合容器、匹配、左右等圖式,設計如圖5所示的數字閱讀交互原型。圖5以當前主流的移動閱讀、WEB閱讀和館內觸摸大屏閱讀為載體??缙翑底珠喿x中,容器圖式主要應用于主題內容展示、功能區約束與觸摸大屏目錄設計。匹配圖式的應用主要包括:(1)跨屏終端中功能區主要功能匹配:主要體現在手機端與WEB端位置,觸摸大屏功能區位置匹配性稍弱,但左右圖式加持可使師生更為自然流暢地完成各項功能。(2)跨屏終端中的尺寸匹配:三大主流終端的交互原型中,功能分區、功能數量及功能延伸均與屏幕尺寸匹配,既能最大效率地運用屏幕資源,又為各自終端賦予特有功能,體現數字閱讀的跨屏個性化表達。在各自的閱讀界面及功能區設計中,亦綜合運用了左右、上下、鏈接、路徑等圖式。

圖5 跨屏數字閱讀界面設計
在跨屏終端功能點設置中,WEB終端具有交互方式豐富、屏幕清晰度高的特點,基本覆蓋了全部用戶情境,承載了除實時、突發、緊急信息及自助服務以外的所有信息展示,手機端基本參照WEB端功能;功能大屏分辨率較低,交互方式以觸控為主,且僅能在現場使用,重點覆蓋工作情境、公告信息瀏覽情境與功能模塊交互情境,功能點設置以簡單、實用為主;展示大屏與終端用戶沒有交互且分辨率較低,以突發性信息單向發布為主,僅適用于公告信息瀏覽情境。具體設置中,以高校師生使用頻率為主要排序依據,以各終端物理特性為出發點,重點參照上-下、左-右圖式(上、左為使用頻率高,中次之,下使用頻率較低),展示大屏則順應用戶閱讀習慣,詳見圖6。

圖6 圖書館信息系統功能點跨屏表達
跨屏交互層面的驗證綜合顏敏[27]、李月琳等[28]的評估方法,對手機端、觸摸大屏及WEB端進行評估。為保證驗證的客觀性,分別在江南大學、江蘇第二師范學院與南京體育學院選取120名同學、60名教師進行調研,以訪談為主。因圖書館資源對訪問IP有要求,江南大學主要調研移動端及觸摸閱讀大屏,另外兩所高校以WEB端及移動終端信息獲取為重點。驗證中選取了圖書查詢、圖書薦購、數字內容閱讀、研習預約、文獻傳遞、信息瀏覽6個使用頻率較高且操作相對復雜的功能,從信息維度的可獲得性、適用性、易理解性、流暢性,技術維度的交互結構、頁面表現、信息表達一致性及任務維度的復雜性、完成效率和方法熟悉程度進行了綜合評測。結果表明,整體上新版信息平臺在3個維度10個指標中的8個優于早期版本,具體如表3所示(為統計方便,新舊版本中某項指標贊成人數超過90即認為該指標在相應版本中占優)。舊版本占優的功能集中于易理解性與熟悉程度,經分析主要原因在于采用了全新的設計理論,用戶固有的操作習慣在一定程度上影響了用戶對新系統的感知。隨后通過AttrakDiff2對新增加設備及功能的創新性做了評測[29],新版系統、觸摸查詢大屏及移動終端在保守-創新,傳統-創造,平凡-新奇,謹慎-大膽,乏味-迷人等幾個指標上均取得中位以上表現,驗證了系統的創新性。三校圖書館現場操作觀察驗證了該交互設計在數字內容閱讀、新版圖書推薦、圖書查詢、偶發性信息傳達等核心功能上均有更加優良的使用體驗,跨屏使用及功能切換更為流暢。

表3 主要功能新舊版本測評表
本研究基于意象圖式理論,充分考慮到圖書館跨屏系統中終端屏幕物理尺寸復雜以及多維度通道、多場景融合、多用戶行為的挑戰,在對跨屏情境及跨屏行為深入分析的基礎上,以用戶深層認知心理為設計出發點,以匹配、容器與部分-整體等圖式為理論指導,代入用戶復雜情境下跨屏信息傳遞需求,較好解決了圖書館信息系統跨屏檢索、跨屏數字閱讀及跨屏知識表達中信息一致性與完整性的問題。這是圖書館信息系統在滿足基本的可用性需求之后在設計跨屏交互時尤其要重視的問題。本研究所構建的意象圖式視角下的圖書館信息系統跨屏交互設計模型,簡化了復雜情境下跨屏交互設計方法,為數字圖書館跨屏交互設計提供了實證方法、明確了重點要素,為提升圖書館信息系統跨屏用戶體驗提供了較好的解決方案。
后續研究將對這種設計方法進行擴展,以適應基于物聯網、人工智能、可穿戴設備以及生物特征交互技術的跨平臺設計。作為一種設計方法,其設計構成應該能夠隨著多設備交互變得更加普遍和易用。文章計劃在不同的項目上驗證與優化基于意象圖式的跨屏交互設計方法,在此基礎上為設計師提供一種可以定制與靈活拓展的設計工具。