基于包容性設計的交互界面設計

摘要：目的 在對包容性設計方法充分理解的前提下，對上海地鐵出行APP開通乘車碼功能提供包容性設計的優化改良方案。方法 包容性設計方法是站在設計排斥的對立面，運用文獻研究法、觀察法、定性分析以及定量分析法等研究方法，探究現有產品對部分用戶造成設計排斥的根本原因。最終制定能夠應對設計排斥問題的解決方案，以達到擴展產品用戶包容性的最終目標。結果 最終制定的上海地鐵出行APP開通乘車碼功能的改良方案，包容了原上海地鐵出行APP開通乘車碼功能中被設計排斥的用戶群體，提升了產品包容性。結論 設計方案不僅使被排除用戶的實際能力能夠匹配產品使用所需的用戶能力，且延展產品的用戶市場，提高產品的商業價值，為包容性設計在地鐵出行APP的應用提供了實踐方案以及理論指導，使鐵路服務惠及更多人群。

關鍵詞：包容性設計;設計排斥;交互界面設計;地鐵出行APP

引言

包容性設計的概念來源于對人類群體多樣性特征的反思，包容性設計通過站在不同群體的角度去探索產品與各群體之間的兼容性，從而獲得了更全面的思考維度。包容性設計提倡為不同的用戶之間提供平等共贏的設計方案，從而避免設計師在設計的過程中，忽略了部分弱勢群體的需求。包容性設計需要設計者在設計的初期就站在更全面的視角客觀評估產品對于不同類型用戶的包容程度，盡可能減小用戶在使用產品過程中所存在的體驗差距，讓產品能夠適應多樣化的用戶群體。在產品設計者與使用者的共同協作下，讓不同能力、語言、文化、性別、年齡的用戶群體都能夠消除使用障礙，平等的參與到生產和生活中去。

一、包容性設計定義

當今社會人口結構的變化促使設計理論的迭代與發展，在眾多設計理論中，包容性設計（Inclusive Design）作為一種惠及大眾的設計理念，正被主流社會以及廣大產業管理者所接納。包容性設計的官方權威定義出自2005年英國標準協會的BS7000-6標準，在該項標準中，“包容性設計”被定義為“一種對主流產品或服務的設計，使得產品和服務在全球范圍內、各種情況下、最大限度地能被更多的人接近和使用，而不需要特殊的適應和專門的設計”。作為一種綜合性的設計策略，包容性設計尊重不同用戶群體之間的個體差異性，并通過分析差異性，探究不同用戶的使用需求，以此保證產品兼容盡可能多的用戶群體。

二、包容性設計與設計排斥

當設計者對現有產品采取包容用戶多樣性的方式進行研究和改良時，其首要任務為審核產品的包容性，探索現階段產品所包容的用戶群體，以及所排除的用戶群體。造成用戶排除現象的原因是設計排斥，設計排斥是指產品在設計的過程中忽視邊緣用戶（邊緣用戶是指未使用你的產品而使用其他類似服務的人）的實際需求，從而造成該人群的使用障礙，逐漸將其排除在產品的使用范圍之外。Clarkson等教授構建的“能力-需求”模型，為造成設計排斥的具體原因提供了專業解答，該模型的官方解讀為：設計排斥產生于正在進行的特定活動以及發生此活動的背景，在這樣的范圍內，當產品交互的需求超過用戶可提供的現實能力時，就會發生用戶排除，如圖1所示。該模型傳達了人機交互環境下能力與需求的關系，即任何產品和服務都會對用戶的能力有一定的要求，而當某些用戶群體無法匹配相應的能力要求時，該產品或服務便會將用戶排斥在可使用范圍之外。因此包容性設計的目的就是使因設計排斥而被限制使用的人群，重新擁有訪問產品的資格。為達到該目標，則需對產品使用能力需求與終端用戶的實際能力進行調試，以期達到需求小于或等于被排除用戶實際能力的結果，使產品的使用范圍可以輻射最大的用戶群體。

三、包容性設計理論的應用

（一）研究載體的選擇

目前，我國城市人口日益增長，生活節奏逐漸變快，消費者對于的出行的需求趨于多樣化，出行的效率和質量也逐步受到消費者的重視。在城市公共交通工具中，地鐵的需求量一直居于高位。隨著互聯網時代信息技術的發展和城市化背景下現代人出行需求的多樣化，地鐵出行類的APP產品應運而生。針對目前市場上地鐵出行類APP產品進行市場調研發現，下載和使用頻率最高的為上海的地鐵出行官方APP。上海作為全國客運強度最大的城市，日客流量可達78.69萬，巨大的客運量導致上海地鐵交通壓力位列全國之首。而上海官方地鐵出行APP——Metro大都會APP，在App store的用戶滿意度差，部分用戶認為其使用難度過大，操作流程復雜，易用性差。選擇Metro大都會APP作為本次選題的實踐對象，對優化同類移動化出行產品，緩解大城市交通壓力、提升用戶出行體驗、營造便捷交通環境方面有參考價值和意義。在理論價值方面，通過對Metro大都會APP的研究，對包容性設計理論在相關產品上的應用具有指導意義。

（二）用戶調研

Metro大都會APP是一款上海鐵路部門推出的官方地鐵出行APP，經過對產品的初步調研發現，Metro大都會APP包含以下幾個主要功能：登錄、開通乘車碼、查找出行方案，掃碼進站、查看鐵路運行信息、掃碼進站、查看出入口信息。在研究中通過調查問卷對七大主要功能進行用戶滿意度調研，調研具體細節如下：調研內容為用戶對于主要功能的用戶滿意度，通過李克特量表的形式，每一功能的選項有"非常滿意"、"滿意"、"一般"、"不滿意"、"非常不滿意"五種回答，每個被調查者的態度總分就是他對各道題的回答所得分數的加權;2.調研對象為有該產品使用經驗的用戶;調研的樣本數量為100人，李克特量表的樣本量為樣本數≥題目數*10，由于問卷包含七項功能的調查題目，樣本數需≥70即為有效;根據最后的問卷整理情況，問卷的有效率為98%。調研的結果顯示，開通乘車碼這一功能的總分最低，用戶滿意程度也最低。綜上所述，通過問卷調研可得，開通乘車碼具有最高的研究價值。

為評估Metro大都會APP開通乘車碼功能排斥的用戶人群以及原因，探索該人群的共性特征。本次用戶研究采用用戶觀察的研究方法，在不干涉影響用戶使用的情況下，觀察上海地鐵乘客使用Metro大都會APP開通乘車碼的操作細節，并記錄下未成功開通乘車碼功能的用戶案例，對該部分的乘客進行后續的用戶訪談，刨析其未成功開通乘車碼的根本原因。經過為期一周的用戶觀察，收集了有效用戶案例數例。歸納用戶案例中的用戶交互行為，以用戶旅程圖的方式呈現用戶的交互行為流程，如圖2所示。

從用戶流程圖中可得，用戶在操作過程中情緒消極，對操作流程理解困難。其中主流用戶人群具有以下特點：大部分為20-30歲之間的青年，有一定的手機應用相關操作經驗，更愿意接受新鮮事物，對電子產品領會能力較強，認為地鐵出行APP是最方便的地鐵出行工具。與此相比，被排斥的用戶人群有以下共性特點：大部分為45歲及以上的中年，認為電子產品有風險性，手機應用的相關使用經驗較少，喜歡采用自己熟悉的方式乘坐地鐵。對于被排斥人群來說，Metro大都會APP的開通乘車碼功能的使用流程過于復雜理解困難，超出了用戶的認知能力范圍。

針對這些被排斥的用戶抽取10人進行用戶訪談，得知用戶產生設計排斥的原因如下：開通乘車碼環節交互步驟多、流程復雜，認知負荷過大，超出了部分用戶的理解能力。運用Clarkson等教授構建的“能力-需求”模型對產品與用戶之間的交互需求進行分析可知，產品對用戶的理解能力需求大于用戶真正的理解能力成本，因此造成了產品與用戶交互的不匹配。

（三）設計排斥評估

Metro大都會APP以創造更優質的出行生活為產品的戰略目標，旨在匯集上海軌道交通的服務資源，形成以乘客服務、運營管理、社會協作為核心的統一移動應用門戶。產品的用戶定位為上班族以及來滬的差旅人士。對Metro大都會APP的開通乘車碼的功能進行分析，概括其現有的兩大關鍵功能：1.簽約線上支付平臺，支持多種支付方式，先乘車后扣費以便讓用戶更為便捷地進行支付。2.生成動態乘車碼，用戶成功開通乘車碼后，手機端生成乘車二維碼，在地鐵閘機的二維碼掃描區進行掃碼操作，即可通過閘機，為上班族以及來滬的差旅人士提供高效便捷的移動化服務。然而，通過調研發現，Metro大都會APP開通乘車碼功能的支付方式類別眾多，操作邏輯復雜，對用戶相關程序的操作經驗要求較高，導致戰略層定位的用戶人群有部分被排斥在產品的使用范圍之外。

信息架構決定著產品的組成部分，邏輯關系，以及能夠解決的問題。通過對Metro大都會APP開通乘車碼功能的信息架構總結發現，其信息結構相對復雜，部分用戶因認知困難。信息框架圖，通過對其信息架構的分析，發現如下三點包容性問題：1.由于支付方式的選項設置上類別多，邏輯復雜，信息理解難度大，部分用戶的認知能力無法理解;2.實名認證中涉及到具體的身份信息，造成對電子產品信任感低的用戶使用困難;對Metro大都會APP開通乘車碼功能的交互流程總結分析，發現如下兩點包容性問題：1.因所有的業務辦理成功提示的跳轉頁面皆需用戶手動跳轉，降低用戶操作效率以及操作體驗;2.由于部分銀行未開通地鐵線上購票服務，且產品并未提供合作銀行的白名單，導致用戶無法選擇正確的銀行綁定開通失敗。

針對Metro大都會APP開通乘車碼功能的原型界面設計進行分析，歸納以下幾點包容性問題：1.相互之間有關聯的信息不符合格式塔鄰近性原則，間距過大使界面變得松散，從而讓用戶產生錯亂的感覺，導致用戶在認知頁面布局與元素的過程中，無法流暢的理解信息之間的關系;2.部分頁面內容沒有全局邊距，頁面內容到屏幕邊緣的距離過窄，導致頁面的信息擁擠，給用戶的瀏覽帶來視覺負擔。

現有產品在UI設計的視覺表達方面整體呈現扁平化的簡約風格，通過對現有產品表現層視覺設計的調研發現以下幾點設計排斥：1.Satyendra Singh 認為顧客在短時間內就會決定一款產品的觀感，其中色彩占據了決定性因素。Metro大都會APP的主題色為#fe4c63，其飽和度高，鮮艷的高飽和度的顏色常常會降低用戶對應用的信任，導致用戶的負面情緒。2.部分頁面中內容上下級內容字號極差過小，阻礙用戶在閱讀信息時理解信息的層級關系。3.部分頁面相關內容之間的間距過大，過大的間距會讓瀏覽變得不連貫和界面視覺松散，增加了用戶的閱讀負擔。4.對稱是對立統一規律的本質屬性，不對稱的內容會增加用戶識別信息的難度。然而Metro大都會APP開通乘車碼功能的部分內容存在不對稱的現象，文字信息未居中對齊。5.Metro大都會APP開通乘車碼功能的界面設計，在布局、顏色、字體、控件等方面無統一的視覺規范。統一的視覺規范能夠使促成用戶對某產品體驗的一致性，解決視覺不統一現象。

五、設計實踐

針對Metro大都會APP開通乘車碼功能現階段的人機交互界面進行改良，通過上文用戶排除原因的羅列和分析，繼續探索解決問題的設計方案。

（一）交互流程設計

根據上文中總結出的解決方案，對Metro大都會APP中開通乘車碼功能的界面進行優化，重新構建Metro大都會APP開通乘車碼功能的交互流程圖，如圖3所示。為減輕用戶理解功能邏輯的難度，主要做出以下改良：1.后臺化實名認證功能，將原本需用戶手動輸入的身份信息，改為核驗支付平臺中的身份信息;2.在支付方式的選項中，刪減了銀行卡支付的功能;3.開通成功提示頁面改為3s后自動跳轉至乘車碼頁面，提升用戶操作效率。以上所作出的調整，充分考慮了被排斥用戶的理解能力，將所需的理解內容最大程度壓縮，保留用戶使用所必須的核心部分，開通乘車碼的操作流程從開始到結束僅需7步，與原交互流程相比，大大提升使用效率。

（二）信息框架設計

根據上文中改良后的Metro大都會APP開通乘車碼功能交互流程，繪制相應的Metro大都會APP開通乘車碼功能的信息架構圖，如圖4所示。信息架構圖的繪制除遵循交互流程圖所示的流程邏輯之外，還羅列了子層級的信息，如支付方式功能層級下，授權支付方式頁面的信息。授權支付方式頁面在信息架構上分為標題、用戶賬號、服務詳情、服務協議以及確認開通的按鈕五個部分。開通成功的提示頁面顯示內容均為“已開通免密支付”，將內容分類模塊化，易于使用者消化理解。

（三）低保真設計

交互軟件設計主要以改良后的Metro大都會APP開通乘車碼功能交互界面展示軟件設計方案，原型的設計嚴格遵守主流iOS設備iPhoneX的界面設計尺寸，屏幕的分辨率為1125*2436px，狀態欄高度為88px，導航欄高度為132px，標簽欄高度為146px，屏幕安全區域1125*2202px?；谛畔嫾芴岢霾季址桨?，并根據ios系統的界面尺度進行低保真設計，如圖5所示。與原設計方案相比，改良后的低保真為解決原產品的設計排斥問題做出以下改良：1.根據格式塔鄰近性原則，調整相關聯內容之間的間距，確保用戶能夠快速理解信息之間的關系;2.iOS原生態頁面的全局邊距為30px，遵守其頁面布局規范，設置全局邊距為30px。

（三）高保真設計

基于改良后的低保真設計稿圖，導出Metro大都會APP開通乘車碼功能的高保真界面。其中包含四大頁面：首頁頁面、選擇支付方式頁面、開通支付授權頁面以及最后的動態二維碼呈現頁面。除此以外，還包括用戶選擇支付方式后，“支付寶支付”以及“微信支付”兩大支付方式功能下的子頁面，如圖6所示。改良后的高保真設計方案，根據上文分析視覺層所存在的問題，進行以下幾點修改：1.在色彩心理學中，顏色影響用戶的信任認知主要是通過：偏好、能力、完整性、可預見性。鮮艷的高飽和度的顏色常常會降低用戶對在線平臺的信任。藍色給人一種專業和值得信任的感覺，，認為這個平臺是可靠地，所以將主題色改為#3779dc。2.調整字號之間的極差，重要標題和輔助性說明文字之間的極差增加至8px，以便用戶快速識別信息的層級關系;3.將原本因間距過大，導致用戶閱讀不連貫的內容間距縮小，使用戶輕松識別信息之間的關系;4.將不對成頁面元素統一對稱;5.高保真設計全程適配iPhoneX的視覺規范，如中文字體統一為ios的系統中文字體蘋方，英文字體統一為ios的系統英文字體San Francisco Pro。

六、結語

本次研究旨在探索產品對用戶的交互需求要求過大，造成設計排斥時，包容性設計理念在設計實踐中的應用途徑，整體研究達到了預期效果，但研究中仍存在一些不完善之處，主要體現在：

包容性設計是一個不斷迭代和完善的過程，以不斷接近產品的理想狀態即產品可以被所有目標用戶接近和使用，本次研究為在有限時間內驗證設計流程的有效性，對設計載體僅進行了一輪設計實踐，無法徹底解決產品的包容性問題，且設計方案在實際量產時成本較高，有待于進一步分析和迭代設計。

參考文獻：

[1]董華.包容性設計_英國跨學科工程研究的新實踐[J].工程研究，2011.3（1）：19-25

[2]SAM Waller? Making the case for inclusive design[J].Applied Ergonomics.2015（46）：297-303

[3]趙超.包容性設計在城市交通設施設計中的應用[J].包裝工程，2017.38（2）：8-14

[4]尹麗仙.針對老年用戶的包容性設計研究[J].包裝工程，2015.36（14）：128-140

[5]陳汗青.基于可持續發展的包容性設計思考[J].包裝工程，2014.35（20）：1-3

[6]徐旭.基于包容性設計理念的老年家居產品設計研究[D].上海：東華大學，2017.

[7]趙超.老齡化設計：包容性立場與批判性態度[J].裝飾，2012.233（9）：16-21

[8]徐旭.基于包容性設計理念的老年家居產品設計研究[D].上海：東華大學，2017.

[9]劉雨橋.基于包容性設計理論的室外用公共吸煙亭設計[D].大連：大連理工大學，2015.

[10]嚴安箐.包容性設計在綜合醫院等候空間中的應用研究[D].上海;華東大學，2016.

作者簡介：姜韞，女，學術，學校：江蘇大學藝術學院。