基于視障人群的手機導航App界面設計研究

張晉萱

中國人民大學，北京，100086

0 引言

2018年4月7日，中國信息無障礙產品聯盟發(fā)布《中國互聯網視障群體用戶基本情況報告》，報告調查了視障人群的互聯網使用情況，調查結果顯示，63%的視障者認為互聯網改變了自己原本的生活，對自己有非常重要的價值。調查結果中也提到受調查的視障者中有37%的視障者日常乘坐公交車或地鐵出行，由于視力的局限，15%的視障者只能短距離地行走出行，有17%的視障者乘坐出租車出行，其余22%的視障者使用新型的互聯網打車軟件打車出行[1]。在2019年10月騰訊信息無障礙化研究會推出的《視障人士在線社交報告》中在使用騰訊QQ的視障用戶中進行了問卷調研，其中對于互聯網出行場景的評價滿意占比只有18%，排在倒數第二位。因此，結合視障人群的行為特征進行分析，提出適合視障人群的界面設計方法，對提高視障人群出行滿意度有著重要意義。

1 視障人群行為特征分析

視障人群指有視覺功能障礙的群體，視覺功能障礙根據癥狀不同分為視力低下和色彩識別障礙兩種類型。其中視力低下按照障礙程度的不同分為全盲和弱視[2]，本文視障群體的討論主要指弱視人群，不包括全盲人群。

弱視是由于先天發(fā)育問題或后天疾病所造成的視力低下，多發(fā)于兒童，表現形式為視力和屈光異常、分讀困難、固視異常等。色彩識別障礙依據是否完全喪失色彩識別能力分為色盲和色弱，色盲者不能分辨自然光譜中的各種顏色或某種顏色；色弱者分辨能力較低但仍有部分識別能力。色盲者根據不能識別的色彩類型可細分為紅色盲、綠色盲、藍色盲和全色盲（即只能看到黑白）。色弱者的視覺能力易受光線等因素變化影響，在周圍環(huán)境因素較復雜時可能會與色盲人群處于同一水平。

1.1 色彩識別能力低下

由上文可知，色盲群體按照光譜可見類型的不同分為了紅色盲、綠色盲、藍色盲和全色盲，即不同類型的色盲群體對不同色彩的辨別能力不同[3]，大部分的視障者對于不同色彩仍有一定辨別能力，但是對于相似色彩只能依靠不同明度辨別。

不同類型的色盲群體對于色譜的可見范圍不同，正常色譜的排列是左冷右暖，紅色盲人群和綠色盲人群對于冷暖的色彩傾向并沒有混淆，看左側的粉色調會趨向于藍色調，綠紅色調都會趨向于黃綠色，紅色盲人群和綠色盲人群二者之間可見色彩重合度較高，只是在飽和度和明度方面稍有不同。藍色盲人群混淆色彩為綠色調和黃色調，與正常人之間色彩識別所見差異較大。

色弱人群對色彩辨別能力強于色盲人群，但是飽和度相對較低，對于相似色彩容易發(fā)生混淆。視障人群易受環(huán)境如光線等因素的影響，會影響對色彩識別情況，嚴重時只能依靠明度對比識別信息。

1.2 高度依賴視覺以外感官

視障人群的障礙程度往往直接影響著對信息的獲取程度，障礙程度越低，信息獲取難度越低。因此，視障人群為了更好地獲取信息往往需要其他正常感官的輔助，例如通過觸覺感受屏幕的震動、依靠聽覺接收軟件提示音、讀屏信息等。

2018年4月7日中國信息無障礙產品聯盟發(fā)布《中國互聯網視障群體用戶基本情況報告》中提到有83%的視障者在使用軟件時需要在操作時完全依靠讀屏功能，14%的視障者需要視力和讀屏輔助操作，不需要輔助比例只占總數的3%，幾乎壓倒性的數據對比表明大部分視障人群高度依賴視覺以外感官。

1.3 孤獨敏感的內心世界

視障人群屬于社會中的少數群體，由于自身視覺缺陷在生活中不能像常人一樣迅速、便捷、準確地感知信息，長期處于信息獲取不及時且不完全的情況下，同時，由于視覺障礙群體在感知功能上的缺陷，長期處于認知不完整的狀態(tài)，對外界的探索受主觀因素影響，極易產生誤差，因行為受限被迫向他人求助會使視障群體產生挫敗感。因此，當視障人群處于未知境遇時，在心理上會產生比常人更深刻的不安全感[4]。

在融入社會方面視障人群也因為自身視力缺陷遇到困難，例如《中國互聯網視障用戶基本情況報告》中提到即使高中以上學歷的比例達到了56%，視障人群從事推拿按摩的比例仍然高達63%。視障人群在社會生活中會因為許多因素產生心理問題，如旁人的審視眼光、求職求學受阻、難以準確獲取信息等都易使視障人群產生不安、挫敗、自卑、孤獨的心理。

2 手機導航類App界面設計特征分析

2.1 以導航功能為原點的樹狀功能結構

樹狀功能結構指的是由某一中心功能出發(fā)，進行多方向延展的結構形式。以導航功能為原點的樹狀功能結構是指在App結構中，所有導航以外的功能均由導航功能延展而出，如“導航-路線-附近-周邊”就是從最根本的導航功能出發(fā)，在用戶使用過程中根據用戶不同的使用需求層層遞進所衍生出的功能結構。

在用戶進入App時就已經進入了樹狀功能結構的原點。以高德地圖、百度地圖和騰訊地圖三款導航App為例進行分析，三款手機導航App都將地圖作為背景放置在首頁，用戶進入導航App時即可看到當前所在位置。地圖默認為二維模式，以不同色塊來標注不同的區(qū)域。騰訊地圖App都在首頁上端或下端放置搜索欄用于用戶搜索目的地，當目的地被鎖定時，App規(guī)劃好的路線就會在地圖上以藍色加粗線條的方式顯現出來。路線規(guī)劃、出行方式、加油優(yōu)惠等功能信息隨著導航目的地的確認逐漸在用戶面前展開。

2.2 以圖片信息為主的模塊化界面布局

模塊化界面布局指在界面設計中將同類型的功能按鍵以模塊化方式分類排布的方式。在界面排列中，常見以淺灰色為底，白色框將各個板塊加以區(qū)分，以圓矩形的方式排布在界面中。如騰訊地圖首頁界面就是非常典型的模塊化界面排布，界面整體分為上下兩部分，采用圖層排布方式，以二維地圖作為界面背景，視覺上放置在界面上端，下半部分為可下拉的功能板塊，搜索框與駕車、公交地鐵等功能劃分為同一板塊，同時穿插有可以關閉的廣告信息板塊。這種模塊化的界面布局方式在視覺上將App的功能按鍵分為不同區(qū)域模塊，使界面更加整潔、條理清晰，對于視障人群用戶來說大大節(jié)約了學習成本，降低了使用難度。

圖片是導航App信息的重要組成部分，在用戶搜索目的地時搜索結果通常會伴隨圖片信息一起呈現給用戶，通過圖片用戶可以更加直觀地獲得需要的信息。在導航App中，通常圖片信息會出現在廣告、目的地場景或周邊熱門推薦中，通過實景圖片迅速向用戶傳遞場景形象，所以圖片出現時會占用界面中較大比例的空間。但對于視障人群用戶主要依靠讀屏獲取信息，過于豐富的圖片信息會擠占文字的界面空間，也會使視障人群用戶獲取信息的過程造成干擾。

圖標是App界面設計中不可缺少的考慮部分，它既承載著App的功能，又是App界面設計的重要組成部分。在高德地圖、百度地圖和騰訊地圖三款手機導航App的首頁界面中都可以找到打車、公共交通、路線等功能按鈕圖標，在布局中處于中間位置放置在搜索欄下方，符合用戶先確定目的地后確定出行方式的使用邏輯。但是在整體界面中，三款App開發(fā)者都將這些常用功能按鍵放置于一排，一排共有五個按鍵，為滿足界面簡潔的視覺需要，按鍵之間需留有一定空隙，界面空間的局促導致按鍵尺寸需要縮小，過小的尺寸會對視障人群用戶在信息識別和觸發(fā)功能時帶來一定的困擾。

圖片與圖標之間的對比關系對App界面設計的視覺效果有重要作用。在手機導航App界面中圖片常常承擔文字難以傳遞的信息，圖標承載App中的功能選項。二者同為界面中的重要視覺信息，但是二者之間對比關系也影響著視障人群用戶是否可以順暢獲取界面信息。在高德地圖的“發(fā)現附近”界面中，整體界面信息呈現方式以圖片為主，圖標作為點綴排布在周邊。在二者尺寸方面，同一界面中圖片的寬度是圖標的三倍，長度是圖標的二倍。盡管在排布順序上通過將圖標集中排布在界面上方組成模塊，但是在用戶的第一視覺感受上，圖片信息的視覺效果更加強烈。圖片信息是視障人群獲取信息的“短板”，錯位的圖片與圖標之間的對比關系不利于視障人群用戶順暢操作。

不同頁面之間由于功能性質不同，會出現不同的頁面排布邏輯。推薦信息是導航App界面的重要組成部分，通常以“附近周邊”“為你推薦”“同城熱門”等方式出現在導航App中，隨著用戶位置不同為用戶提供實時周邊信息。以百度地圖“周邊”界面為例，頁面的頂部和中部為功能按鍵，底部和下拉部分為熱門推薦。在功能按鍵的排布邏輯上，以用戶實用性為主，所以會App會根據用戶的使用頻次將常用功能排布在前也可以由用戶自己進行設置，也就是說，按鍵排布順序會根據用戶使用習慣、頻次發(fā)生變化。熱門推送是根據用戶位置實時更新的，內容以餐飲娛樂為主，熱度、廣告推廣、距離等都是影響排布的因素。

2.3 通過色彩強化信息表達

色彩搭配可以強化信息表達，在導航類App界面設計中體現在多個方面。

搭配不同色彩以強調不同的路段信息，使用藍色為主色調，整體色調偏淺，可以更方便地運用色彩強調。道路呈飽和度較低的綠色和灰色線狀分布，根據現實道路寬窄規(guī)模的不同在視覺上進行了不同粗細的區(qū)分，在導航過程中規(guī)劃路線會用飽和度高的綠色加粗顯示，強化視覺效果。導航App中，不同顏色的運用同時也能顯示出來當前的路況狀態(tài)。以高德地圖為例，導航過程中App界面中會出現紅色、黃色和綠色，紅色狀態(tài)也細分為深紅色和紅色，其中紅色狀態(tài)代表當前該路段為擁堵狀態(tài)，以深淺明暗來區(qū)分擁堵的程度，深紅色表示當前路段非常擁堵，紅色則只表示擁堵，黃色代表該路段當前行駛緩慢。除利用不同視覺強度的色彩進行信息分級外，還在頁面中用不同顏色的實線和虛線等為用戶傳遞不同的路況信息。

搭配不同色彩，強調不同功能信息。例如在百度地圖首頁界面中排布了五個App的主要功能分別為“公共交通”“駕車”“打車”“步行”和“實時公交”，五個功能按鈕中只有“打車”功能是紅色，其他為藍色或綠色。這樣的色彩搭配利于客戶在第一時間找到該按鈕，為用戶強化信息表達，提高使用感受。

3 基于視障人群的手機導航App界面設計方法

3.1 基于視障人群的界面結構設計方法

（1）基于多感官替代的設計方法。多感官替代是針對視障人群視覺能力不足提出的由聽覺、觸覺等其他感官替代視覺感官的設計方法，如通過手機的語音將需要視覺觀看的文字信息進行語音輸出。視覺障礙人群用戶在感官缺失的情況下想要獲取界面中的信息，不可避免地需要其他感官的輔助。在App界面設計中，多感官代替視覺設計可體現為將原有單一的視覺反饋模式增加為觸覺、聽覺等感官輔助視覺反饋信息，例如將單一的視覺頁面加上震動、提示音等多感官反饋，增加視障人群用戶獲得信息的渠道。多感官替代的設計方法旨在App開發(fā)者在軟件功能結構搭建階段將用戶信息獲取從單一渠道拓展為多渠道，保證視障人群用戶在App使用過程中可通過視覺以外渠道獲取所需信息[5]。

（2）弱化輔助功能和界面切換。輔助功能指導航類App中主要功能之外的附加功能如“熱門推送”“汽車信息”等。弱化輔助功能可以幫助視障人群用戶更加直觀地使用導航App的主要功能解決自身需求，降低學習成本，有效避免信息混淆。

針對視障人群進行界面設計，界面設計師和App開發(fā)者首先要了解視障人群用戶的需求，先滿足視障用戶的剛需。從上文可知，視障人群使用手機導航App的首要需求是出行導航，其次才是打車、周邊推薦等功能。所以為降低手機導航App的操作難度，界面設計師和App開發(fā)者有必要在現有App基礎之上進行功能簡化、減少界面中的不必要輔助功能，從而簡化界面操作邏輯和界面設計，使手機導航App的出行導航功能更加直觀從眾多功能中凸顯出來，便于視障人群用戶操作。

界面之間的切換指在同一個頁面中無法滿足用戶功能需求需要在轉換到另一頁面的操作，過多的切換會使視障人群用戶使用App學習成本增加。以百度地圖為例，將導航App主要功能都設置在了首頁，在五個App主要功能中用戶點擊按鈕即可進入功能，同時想要返回首頁只需操作返回鍵即可。在下方導航欄的設置上也不同于其他同類App，將功能簡化為“周邊”“路線”和“出行”，以用戶出行便利出發(fā)構建App。

（3）針對不同類型視覺障礙人群設定不同模式。個性化設置不管是對于視障人群用戶還是正常用戶來說，都是十分有效的提高用戶使用感受的方法。對于正常用戶來說，個性化設置可以使App更加符合自己的使用習慣、提高使用體驗。對于視障人群用戶來說，個性化設置是提高信息交互效率的重要功能。按照視障人群不同的障礙類別和障礙程度的劃分，單一的App界面模式顯然無法滿足所有的視障人群用戶的需求。App界面設計師可以根據視障人群不同的行為特征設定相應的界面模式，例如針對弱視人群可以增加界面中文字的字號和字重來強化視覺對比；針對不同的色盲類型的用戶可以提供不同的配色方案，以此保證導航App界面中信息交互的有效性。在用戶進入App時讓用戶選擇符合自身需求不同的使用模式，可以更加精準地為視障人群用戶提供服務。

3.2 基于視障人群的界面布局設計方法

（1）明確布局模塊化。布局模塊化指在界面設計中，將同類型同等級的功能進行區(qū)域性劃分排布，在界面視覺上通過卡片圖形、深淺顏色對比等方式進行設計的方式[6]。例如在手機導航App中將界面分為“信息區(qū)”“導航區(qū)”“搜索區(qū)”等區(qū)域，這樣便于界面設計者通過增加不同區(qū)域間差異性使視障人群用戶更快定位所需功能，解決使用導航App的使用成本。如在高德地圖首頁界面中，在常用功能模塊下方排布有推送信息板塊，信息內容包括但不限于“周邊熱門推薦”“疫情防控”，在該模塊右上角有叉號圖標，即該模塊可手動關閉，關閉后下方模塊向上移動取代該模塊在界面中位置。不固定的模塊位置、信息類型都會對視障人群用戶造成操作困擾。明確界面中模塊化布局，也包括明確模塊內容和位置。

（2）保持界面之間排布邏輯相同。界面之間的排布邏輯指App所有界面中的內容放置邏輯，保持界面間相同的排布邏輯，可降低學習成本，減少尋找按鈕使用的時間[7]。例如，在導航App中將出現的所有搜索框放置在界面上端，將返回按鈕放置在界面左上角等。保持界面間相同的排布邏輯可以使整個導航App的界面視覺上更加系統(tǒng)化，對于視障人群用戶來說可以有效減少在界面中位置按鈕的尋找時間，減少學習成本，使操作更加順暢，提高用戶使用感受。

（3）增加功能性按鈕屏幕占比。在手機導航App的界面中，按鈕在App功能、頁面跳轉、信息狀態(tài)、用戶反饋等多方面起著重要作用。如何讓視障人群用戶快速定位到界面中的按鍵位置是界面設計者需要考慮的重要問題，需要在按鍵配色、尺寸、形狀等方面進行考量。例如，導航類App中涉及需要用戶確認的選擇項操作時，會出現“確認”和“取消”兩個選項按鈕，在配色上界面設計者應運用不同的顏色將兩個按鈕進行區(qū)分和強調，避免用戶誤觸。針對視障人群用戶則應該在此基礎之上更進一步在頁面中突出按鈕，可以通過減少界面中的按鈕數量、放大尺寸等方法使視障人群用戶的視線可以更加集中，達到減少用戶誤觸和提高使用感受的目的。

3.3 基于視障人群的界面顏色設計方法

（1）使用“色盲安全色”。不同色盲類型可以識別的色彩類型不同，所以設計師在針對色盲人士進行App界面設計時需要了解并充分利用色盲人士的這類特點[7]。在色盲人群可見色譜對比中可以發(fā)現，紅色盲與綠色盲的可見光譜范圍相似，會將紅綠色調辨別為黃褐色，二者之間可見的色彩飽和度略有區(qū)別。藍色盲會將黃綠色調辨別為藍色，在紅色與類似識別的過程中會出現將冷暖色調對調的情況。

將原始色譜即正常視覺能力者所能識別的色彩條與色盲可見色譜對比，就能發(fā)現每個色盲類型可見色譜相互重合的色彩范圍，在視障人群中色盲群體的視覺色彩識別中有所謂“色盲安全色”的存在。界面設計者可以將“色盲安全色”作為配色方案運用到手機導航App的界面設計中去，可以提高色盲人群使用導航App時在界面中獲取信息的有效性。若能在手機導航App個性化設置中明確視障人群用戶的色盲類型，那么界面設計者可選擇的“色盲安全色”范圍將更加廣泛，在保證信息有效傳達的同時也可以使App界面更具美感。

（2）建立多個“安全色”系統(tǒng)。由上文對視障人群的行為特征分析中可知視障人群可細分為弱視和色盲、色弱，色盲人群又可細分為多種不同的色盲類型，對不同的顏色辨識能力不同，因此在界面中使用單一的配色方案很難滿足所有視障人群用戶的配色需求。在視障人群用戶進入導航App時，為他們提供不同的配色模式和明度調節(jié)按鈕，讓視障人群用戶可以根據自身視覺障礙類型選擇最符合自身情況的配色方案和明度設置，同時提供色彩搭配方案指南和實時預覽功能，讓視障人群用戶可以自由選擇。

此項功能可以同樣放置在個人設置頁面，方便視障人群用戶可以隨時根據自己的視覺情況對智能導航App的界面色彩進行調整。根據不同視障人群障礙類型提供不同的配色方案可以有效地解決單一配色無法適用于所有視障人群的問題，同時用戶可以自定義調節(jié)也可以增加導航App的界面靈活度，最大程度地貼合不同視障人群用戶的色彩視覺需求。

（3）加入紋理元素強化視覺對比。紋理元素指在色彩搭配的基礎上的以條紋、圓點、格紋等裝飾性元素，是強化視覺對比的有效途徑之一。對于色彩識別能力欠缺的視障人群用戶，即使界面設計者在色彩搭配上使用了色盲安全色、在布局方式上進行了修改，仍然很難保證視障人群用戶可以完全無障礙使用手機導航App，很難完全解決視障人群用戶獲取信息易混淆、易誤觸的問題。在配色對界面信息進行區(qū)分的時候，輔助以紋理，“點”“線”“面”多管齊下可以有效強化界面中的視覺對比，提高視障人群用戶使用的無障礙程度。

4 結語

本文以智能導航類App為例，探討如何讓智能導航類界面設計滿足普通大眾需求時兼顧視障人群用戶。通過分析視障人群的行為特征和現有智能導航類App界面設計特征，從App界面設計的結構、布局和顏色三個維度提出針對視障人群用戶的智能導航類App界面設計方法。本文將視障人群納入設計考慮范圍，為視障人群的界面設計提供設計方法參考，期待在未來的社會中每個群體都可以無障礙地參與社會生活。