基于包容性設(shè)計(jì)的交互界面設(shè)計(jì)

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

關(guān)鍵詞：包容性設(shè)計(jì);設(shè)計(jì)排斥;交互界面設(shè)計(jì);地鐵出行APP

引言

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

一、包容性設(shè)計(jì)定義

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

二、包容性設(shè)計(jì)與設(shè)計(jì)排斥

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

三、包容性設(shè)計(jì)理論的應(yīng)用

（一）研究載體的選擇

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

（二）用戶調(diào)研

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

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

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

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

（三）設(shè)計(jì)排斥評估

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

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

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

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

五、設(shè)計(jì)實(shí)踐

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

（一）交互流程設(shè)計(jì)

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

（二）信息框架設(shè)計(jì)

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

（三）低保真設(shè)計(jì)

交互軟件設(shè)計(jì)主要以改良后的Metro大都會APP開通乘車碼功能交互界面展示軟件設(shè)計(jì)方案，原型的設(shè)計(jì)嚴(yán)格遵守主流iOS設(shè)備iPhoneX的界面設(shè)計(jì)尺寸，屏幕的分辨率為1125*2436px，狀態(tài)欄高度為88px，導(dǎo)航欄高度為132px，標(biāo)簽欄高度為146px，屏幕安全區(qū)域1125*2202px?；谛畔?gòu)架提出布局方案，并根據(jù)ios系統(tǒng)的界面尺度進(jìn)行低保真設(shè)計(jì)，如圖5所示。與原設(shè)計(jì)方案相比，改良后的低保真為解決原產(chǎn)品的設(shè)計(jì)排斥問題做出以下改良：1.根據(jù)格式塔鄰近性原則，調(diào)整相關(guān)聯(lián)內(nèi)容之間的間距，確保用戶能夠快速理解信息之間的關(guān)系;2.iOS原生態(tài)頁面的全局邊距為30px，遵守其頁面布局規(guī)范，設(shè)置全局邊距為30px。

（三）高保真設(shè)計(jì)

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

六、結(jié)語

本次研究旨在探索產(chǎn)品對用戶的交互需求要求過大，造成設(shè)計(jì)排斥時(shí)，包容性設(shè)計(jì)理念在設(shè)計(jì)實(shí)踐中的應(yīng)用途徑，整體研究達(dá)到了預(yù)期效果，但研究中仍存在一些不完善之處，主要體現(xiàn)在：

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

參考文獻(xiàn)：

[1]董華.包容性設(shè)計(jì)_英國跨學(xué)科工程研究的新實(shí)踐[J].工程研究，2011.3（1）：19-25

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

[3]趙超.包容性設(shè)計(jì)在城市交通設(shè)施設(shè)計(jì)中的應(yīng)用[J].包裝工程，2017.38（2）：8-14

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

[5]陳汗青.基于可持續(xù)發(fā)展的包容性設(shè)計(jì)思考[J].包裝工程，2014.35（20）：1-3

[6]徐旭.基于包容性設(shè)計(jì)理念的老年家居產(chǎn)品設(shè)計(jì)研究[D].上海：東華大學(xué)，2017.

[7]趙超.老齡化設(shè)計(jì)：包容性立場與批判性態(tài)度[J].裝飾，2012.233（9）：16-21

[8]徐旭.基于包容性設(shè)計(jì)理念的老年家居產(chǎn)品設(shè)計(jì)研究[D].上海：東華大學(xué)，2017.

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

[10]嚴(yán)安箐.包容性設(shè)計(jì)在綜合醫(yī)院等候空間中的應(yīng)用研究[D].上海;華東大學(xué)，2016.

作者簡介：姜韞，女，學(xué)術(shù)，學(xué)校：江蘇大學(xué)藝術(shù)學(xué)院。