基于视障人群的手机导航App界面设计研究

张晋萱

中国人民大学，北京，100086

0 引言

2018年4月7日，中国信息无障碍产品联盟发布《中国互联网视障群体用户基本情况报告》，报告调查了视障人群的互联网使用情况，调查结果显示，63%的视障者认为互联网改变了自己原本的生活，对自己有非常重要的价值。调查结果中也提到受调查的视障者中有37%的视障者日常乘坐公交车或地铁出行，由于视力的局限，15%的视障者只能短距离地行走出行，有17%的视障者乘坐出租车出行，其余22%的视障者使用新型的互联网打车软件打车出行[1]。在2019年10月腾讯信息无障碍化研究会推出的《视障人士在线社交报告》中在使用腾讯QQ的视障用户中进行了问卷调研，其中对于互联网出行场景的评价满意占比只有18%，排在倒数第二位。因此，结合视障人群的行为特征进行分析，提出适合视障人群的界面设计方法，对提高视障人群出行满意度有着重要意义。

1 视障人群行为特征分析

视障人群指有视觉功能障碍的群体，视觉功能障碍根据症状不同分为视力低下和色彩识别障碍两种类型。其中视力低下按照障碍程度的不同分为全盲和弱视[2]，本文视障群体的讨论主要指弱视人群，不包括全盲人群。

弱视是由于先天发育问题或后天疾病所造成的视力低下，多发于儿童，表现形式为视力和屈光异常、分读困难、固视异常等。色彩识别障碍依据是否完全丧失色彩识别能力分为色盲和色弱，色盲者不能分辨自然光谱中的各种颜色或某种颜色；色弱者分辨能力较低但仍有部分识别能力。色盲者根据不能识别的色彩类型可细分为红色盲、绿色盲、蓝色盲和全色盲（即只能看到黑白）。色弱者的视觉能力易受光线等因素变化影响，在周围环境因素较复杂时可能会与色盲人群处于同一水平。

1.1 色彩识别能力低下

由上文可知，色盲群体按照光谱可见类型的不同分为了红色盲、绿色盲、蓝色盲和全色盲，即不同类型的色盲群体对不同色彩的辨别能力不同[3]，大部分的视障者对于不同色彩仍有一定辨别能力，但是对于相似色彩只能依靠不同明度辨别。

不同类型的色盲群体对于色谱的可见范围不同，正常色谱的排列是左冷右暖，红色盲人群和绿色盲人群对于冷暖的色彩倾向并没有混淆，看左侧的粉色调会趋向于蓝色调，绿红色调都会趋向于黄绿色，红色盲人群和绿色盲人群二者之间可见色彩重合度较高，只是在饱和度和明度方面稍有不同。蓝色盲人群混淆色彩为绿色调和黄色调，与正常人之间色彩识别所见差异较大。

色弱人群对色彩辨别能力强于色盲人群，但是饱和度相对较低，对于相似色彩容易发生混淆。视障人群易受环境如光线等因素的影响，会影响对色彩识别情况，严重时只能依靠明度对比识别信息。

1.2 高度依赖视觉以外感官

视障人群的障碍程度往往直接影响着对信息的获取程度，障碍程度越低，信息获取难度越低。因此，视障人群为了更好地获取信息往往需要其他正常感官的辅助，例如通过触觉感受屏幕的震动、依靠听觉接收软件提示音、读屏信息等。

2018年4月7日中国信息无障碍产品联盟发布《中国互联网视障群体用户基本情况报告》中提到有83%的视障者在使用软件时需要在操作时完全依靠读屏功能，14%的视障者需要视力和读屏辅助操作，不需要辅助比例只占总数的3%，几乎压倒性的数据对比表明大部分视障人群高度依赖视觉以外感官。

1.3 孤独敏感的内心世界

视障人群属于社会中的少数群体，由于自身视觉缺陷在生活中不能像常人一样迅速、便捷、准确地感知信息，长期处于信息获取不及时且不完全的情况下，同时，由于视觉障碍群体在感知功能上的缺陷，长期处于认知不完整的状态，对外界的探索受主观因素影响，极易产生误差，因行为受限被迫向他人求助会使视障群体产生挫败感。因此，当视障人群处于未知境遇时，在心理上会产生比常人更深刻的不安全感[4]。

在融入社会方面视障人群也因为自身视力缺陷遇到困难，例如《中国互联网视障用户基本情况报告》中提到即使高中以上学历的比例达到了56%，视障人群从事推拿按摩的比例仍然高达63%。视障人群在社会生活中会因为许多因素产生心理问题，如旁人的审视眼光、求职求学受阻、难以准确获取信息等都易使视障人群产生不安、挫败、自卑、孤独的心理。

2 手机导航类App界面设计特征分析

2.1 以导航功能为原点的树状功能结构

树状功能结构指的是由某一中心功能出发，进行多方向延展的结构形式。以导航功能为原点的树状功能结构是指在App结构中，所有导航以外的功能均由导航功能延展而出，如“导航-路线-附近-周边”就是从最根本的导航功能出发，在用户使用过程中根据用户不同的使用需求层层递进所衍生出的功能结构。

在用户进入App时就已经进入了树状功能结构的原点。以高德地图、百度地图和腾讯地图三款导航App为例进行分析，三款手机导航App都将地图作为背景放置在首页，用户进入导航App时即可看到当前所在位置。地图默认为二维模式，以不同色块来标注不同的区域。腾讯地图App都在首页上端或下端放置搜索栏用于用户搜索目的地，当目的地被锁定时，App规划好的路线就会在地图上以蓝色加粗线条的方式显现出来。路线规划、出行方式、加油优惠等功能信息随着导航目的地的确认逐渐在用户面前展开。

2.2 以图片信息为主的模块化界面布局

模块化界面布局指在界面设计中将同类型的功能按键以模块化方式分类排布的方式。在界面排列中，常见以浅灰色为底，白色框将各个板块加以区分，以圆矩形的方式排布在界面中。如腾讯地图首页界面就是非常典型的模块化界面排布，界面整体分为上下两部分，采用图层排布方式，以二维地图作为界面背景，视觉上放置在界面上端，下半部分为可下拉的功能板块，搜索框与驾车、公交地铁等功能划分为同一板块，同时穿插有可以关闭的广告信息板块。这种模块化的界面布局方式在视觉上将App的功能按键分为不同区域模块，使界面更加整洁、条理清晰，对于视障人群用户来说大大节约了学习成本，降低了使用难度。

图片是导航App信息的重要组成部分，在用户搜索目的地时搜索结果通常会伴随图片信息一起呈现给用户，通过图片用户可以更加直观地获得需要的信息。在导航App中，通常图片信息会出现在广告、目的地场景或周边热门推荐中，通过实景图片迅速向用户传递场景形象，所以图片出现时会占用界面中较大比例的空间。但对于视障人群用户主要依靠读屏获取信息，过于丰富的图片信息会挤占文字的界面空间，也会使视障人群用户获取信息的过程造成干扰。

图标是App界面设计中不可缺少的考虑部分，它既承载着App的功能，又是App界面设计的重要组成部分。在高德地图、百度地图和腾讯地图三款手机导航App的首页界面中都可以找到打车、公共交通、路线等功能按钮图标，在布局中处于中间位置放置在搜索栏下方，符合用户先确定目的地后确定出行方式的使用逻辑。但是在整体界面中，三款App开发者都将这些常用功能按键放置于一排，一排共有五个按键，为满足界面简洁的视觉需要，按键之间需留有一定空隙，界面空间的局促导致按键尺寸需要缩小，过小的尺寸会对视障人群用户在信息识别和触发功能时带来一定的困扰。

图片与图标之间的对比关系对App界面设计的视觉效果有重要作用。在手机导航App界面中图片常常承担文字难以传递的信息，图标承载App中的功能选项。二者同为界面中的重要视觉信息，但是二者之间对比关系也影响着视障人群用户是否可以顺畅获取界面信息。在高德地图的“发现附近”界面中，整体界面信息呈现方式以图片为主，图标作为点缀排布在周边。在二者尺寸方面，同一界面中图片的宽度是图标的三倍，长度是图标的二倍。尽管在排布顺序上通过将图标集中排布在界面上方组成模块，但是在用户的第一视觉感受上，图片信息的视觉效果更加强烈。图片信息是视障人群获取信息的“短板”，错位的图片与图标之间的对比关系不利于视障人群用户顺畅操作。

不同页面之间由于功能性质不同，会出现不同的页面排布逻辑。推荐信息是导航App界面的重要组成部分，通常以“附近周边”“为你推荐”“同城热门”等方式出现在导航App中，随着用户位置不同为用户提供实时周边信息。以百度地图“周边”界面为例，页面的顶部和中部为功能按键，底部和下拉部分为热门推荐。在功能按键的排布逻辑上，以用户实用性为主，所以会App会根据用户的使用频次将常用功能排布在前也可以由用户自己进行设置，也就是说，按键排布顺序会根据用户使用习惯、频次发生变化。热门推送是根据用户位置实时更新的，内容以餐饮娱乐为主，热度、广告推广、距离等都是影响排布的因素。

2.3 通过色彩强化信息表达

色彩搭配可以强化信息表达，在导航类App界面设计中体现在多个方面。

搭配不同色彩以强调不同的路段信息，使用蓝色为主色调，整体色调偏浅，可以更方便地运用色彩强调。道路呈饱和度较低的绿色和灰色线状分布，根据现实道路宽窄规模的不同在视觉上进行了不同粗细的区分，在导航过程中规划路线会用饱和度高的绿色加粗显示，强化视觉效果。导航App中，不同颜色的运用同时也能显示出来当前的路况状态。以高德地图为例，导航过程中App界面中会出现红色、黄色和绿色，红色状态也细分为深红色和红色，其中红色状态代表当前该路段为拥堵状态，以深浅明暗来区分拥堵的程度，深红色表示当前路段非常拥堵，红色则只表示拥堵，黄色代表该路段当前行驶缓慢。除利用不同视觉强度的色彩进行信息分级外，还在页面中用不同颜色的实线和虚线等为用户传递不同的路况信息。

搭配不同色彩，强调不同功能信息。例如在百度地图首页界面中排布了五个App的主要功能分别为“公共交通”“驾车”“打车”“步行”和“实时公交”，五个功能按钮中只有“打车”功能是红色，其他为蓝色或绿色。这样的色彩搭配利于客户在第一时间找到该按钮，为用户强化信息表达，提高使用感受。

3 基于视障人群的手机导航App界面设计方法

3.1 基于视障人群的界面结构设计方法

（1）基于多感官替代的设计方法。多感官替代是针对视障人群视觉能力不足提出的由听觉、触觉等其他感官替代视觉感官的设计方法，如通过手机的语音将需要视觉观看的文字信息进行语音输出。视觉障碍人群用户在感官缺失的情况下想要获取界面中的信息，不可避免地需要其他感官的辅助。在App界面设计中，多感官代替视觉设计可体现为将原有单一的视觉反馈模式增加为触觉、听觉等感官辅助视觉反馈信息，例如将单一的视觉页面加上震动、提示音等多感官反馈，增加视障人群用户获得信息的渠道。多感官替代的设计方法旨在App开发者在软件功能结构搭建阶段将用户信息获取从单一渠道拓展为多渠道，保证视障人群用户在App使用过程中可通过视觉以外渠道获取所需信息[5]。

（2）弱化辅助功能和界面切换。辅助功能指导航类App中主要功能之外的附加功能如“热门推送”“汽车信息”等。弱化辅助功能可以帮助视障人群用户更加直观地使用导航App的主要功能解决自身需求，降低学习成本，有效避免信息混淆。

针对视障人群进行界面设计，界面设计师和App开发者首先要了解视障人群用户的需求，先满足视障用户的刚需。从上文可知，视障人群使用手机导航App的首要需求是出行导航，其次才是打车、周边推荐等功能。所以为降低手机导航App的操作难度，界面设计师和App开发者有必要在现有App基础之上进行功能简化、减少界面中的不必要辅助功能，从而简化界面操作逻辑和界面设计，使手机导航App的出行导航功能更加直观从众多功能中凸显出来，便于视障人群用户操作。

界面之间的切换指在同一个页面中无法满足用户功能需求需要在转换到另一页面的操作，过多的切换会使视障人群用户使用App学习成本增加。以百度地图为例，将导航App主要功能都设置在了首页，在五个App主要功能中用户点击按钮即可进入功能，同时想要返回首页只需操作返回键即可。在下方导航栏的设置上也不同于其他同类App，将功能简化为“周边”“路线”和“出行”，以用户出行便利出发构建App。

（3）针对不同类型视觉障碍人群设定不同模式。个性化设置不管是对于视障人群用户还是正常用户来说，都是十分有效的提高用户使用感受的方法。对于正常用户来说，个性化设置可以使App更加符合自己的使用习惯、提高使用体验。对于视障人群用户来说，个性化设置是提高信息交互效率的重要功能。按照视障人群不同的障碍类别和障碍程度的划分，单一的App界面模式显然无法满足所有的视障人群用户的需求。App界面设计师可以根据视障人群不同的行为特征设定相应的界面模式，例如针对弱视人群可以增加界面中文字的字号和字重来强化视觉对比；针对不同的色盲类型的用户可以提供不同的配色方案，以此保证导航App界面中信息交互的有效性。在用户进入App时让用户选择符合自身需求不同的使用模式，可以更加精准地为视障人群用户提供服务。

3.2 基于视障人群的界面布局设计方法

（1）明确布局模块化。布局模块化指在界面设计中，将同类型同等级的功能进行区域性划分排布，在界面视觉上通过卡片图形、深浅颜色对比等方式进行设计的方式[6]。例如在手机导航App中将界面分为“信息区”“导航区”“搜索区”等区域，这样便于界面设计者通过增加不同区域间差异性使视障人群用户更快定位所需功能，解决使用导航App的使用成本。如在高德地图首页界面中，在常用功能模块下方排布有推送信息板块，信息内容包括但不限于“周边热门推荐”“疫情防控”，在该模块右上角有叉号图标，即该模块可手动关闭，关闭后下方模块向上移动取代该模块在界面中位置。不固定的模块位置、信息类型都会对视障人群用户造成操作困扰。明确界面中模块化布局，也包括明确模块内容和位置。

（2）保持界面之间排布逻辑相同。界面之间的排布逻辑指App所有界面中的内容放置逻辑，保持界面间相同的排布逻辑，可降低学习成本，减少寻找按钮使用的时间[7]。例如，在导航App中将出现的所有搜索框放置在界面上端，将返回按钮放置在界面左上角等。保持界面间相同的排布逻辑可以使整个导航App的界面视觉上更加系统化，对于视障人群用户来说可以有效减少在界面中位置按钮的寻找时间，减少学习成本，使操作更加顺畅，提高用户使用感受。

（3）增加功能性按钮屏幕占比。在手机导航App的界面中，按钮在App功能、页面跳转、信息状态、用户反馈等多方面起着重要作用。如何让视障人群用户快速定位到界面中的按键位置是界面设计者需要考虑的重要问题，需要在按键配色、尺寸、形状等方面进行考量。例如，导航类App中涉及需要用户确认的选择项操作时，会出现“确认”和“取消”两个选项按钮，在配色上界面设计者应运用不同的颜色将两个按钮进行区分和强调，避免用户误触。针对视障人群用户则应该在此基础之上更进一步在页面中突出按钮，可以通过减少界面中的按钮数量、放大尺寸等方法使视障人群用户的视线可以更加集中，达到减少用户误触和提高使用感受的目的。

3.3 基于视障人群的界面颜色设计方法

（1）使用“色盲安全色”。不同色盲类型可以识别的色彩类型不同，所以设计师在针对色盲人士进行App界面设计时需要了解并充分利用色盲人士的这类特点[7]。在色盲人群可见色谱对比中可以发现，红色盲与绿色盲的可见光谱范围相似，会将红绿色调辨别为黄褐色，二者之间可见的色彩饱和度略有区别。蓝色盲会将黄绿色调辨别为蓝色，在红色与类似识别的过程中会出现将冷暖色调对调的情况。

将原始色谱即正常视觉能力者所能识别的色彩条与色盲可见色谱对比，就能发现每个色盲类型可见色谱相互重合的色彩范围，在视障人群中色盲群体的视觉色彩识别中有所谓“色盲安全色”的存在。界面设计者可以将“色盲安全色”作为配色方案运用到手机导航App的界面设计中去，可以提高色盲人群使用导航App时在界面中获取信息的有效性。若能在手机导航App个性化设置中明确视障人群用户的色盲类型，那么界面设计者可选择的“色盲安全色”范围将更加广泛，在保证信息有效传达的同时也可以使App界面更具美感。

（2）建立多个“安全色”系统。由上文对视障人群的行为特征分析中可知视障人群可细分为弱视和色盲、色弱，色盲人群又可细分为多种不同的色盲类型，对不同的颜色辨识能力不同，因此在界面中使用单一的配色方案很难满足所有视障人群用户的配色需求。在视障人群用户进入导航App时，为他们提供不同的配色模式和明度调节按钮，让视障人群用户可以根据自身视觉障碍类型选择最符合自身情况的配色方案和明度设置，同时提供色彩搭配方案指南和实时预览功能，让视障人群用户可以自由选择。

此项功能可以同样放置在个人设置页面，方便视障人群用户可以随时根据自己的视觉情况对智能导航App的界面色彩进行调整。根据不同视障人群障碍类型提供不同的配色方案可以有效地解决单一配色无法适用于所有视障人群的问题，同时用户可以自定义调节也可以增加导航App的界面灵活度，最大程度地贴合不同视障人群用户的色彩视觉需求。

（3）加入纹理元素强化视觉对比。纹理元素指在色彩搭配的基础上的以条纹、圆点、格纹等装饰性元素，是强化视觉对比的有效途径之一。对于色彩识别能力欠缺的视障人群用户，即使界面设计者在色彩搭配上使用了色盲安全色、在布局方式上进行了修改，仍然很难保证视障人群用户可以完全无障碍使用手机导航App，很难完全解决视障人群用户获取信息易混淆、易误触的问题。在配色对界面信息进行区分的时候，辅助以纹理，“点”“线”“面”多管齐下可以有效强化界面中的视觉对比，提高视障人群用户使用的无障碍程度。

4 结语

本文以智能导航类App为例，探讨如何让智能导航类界面设计满足普通大众需求时兼顾视障人群用户。通过分析视障人群的行为特征和现有智能导航类App界面设计特征，从App界面设计的结构、布局和颜色三个维度提出针对视障人群用户的智能导航类App界面设计方法。本文将视障人群纳入设计考虑范围，为视障人群的界面设计提供设计方法参考，期待在未来的社会中每个群体都可以无障碍地参与社会生活。