碳酸40Accessibility无障碍设计设计中的一致性Word格式文档下载.docx

1、 这是我们今天的主题，今天要解决的问题，主要是告诉大家，什么是无障碍设计，还有它为什么比较重要，第三个是说如果有听过无障碍设计的话，应该知道508条款，508条款对于整个应用程序意味着什么，在windows系统下面，比如我今天苹果下面开了windows系统，然后它会提供一些工具来检测无障碍设计环境，然后怎么样用它们。最后一个是在我们做整个应用程序的时候，要怎么样体现无障碍环境，怎么样让你设计的产品适合于更多人，这是我今天课题的几个要点。 在介绍这个概念之前，我们看一张图，在生活当中，有很多禁止标志，比如说这里自行车不能走，或者这个轮椅比较过，有残障的话，会有一些限制，也就引出到今天的课题，什么

2、是“无障碍设计”？ 我的理解，尽可能让所有用户访问使用我们的产品，他有没有身体残障或者怎么样，这些人都来使用我们的产品，他们为什么重要，这里有一个数据，每五个美国人当中就有一个有身体上的残疾，也就是说20%的人身体上有特别需要，这是美国人口调查局数据，我在国内也找了很多这样的说明，其实很少的，但从我们人口庞大数据来看，相信我们整个数字是大于这个的。 当一个人到了65岁，就会有一些特殊需要，之前我的产品是卖给国外的，卖给欧美市场的，他们有这样一些法律条款，要你遵守这样无障碍环境的约束，这是我们列出来的无障碍种类，第一个是视觉障碍，第二个是听力障碍，第三个是行动不便，还有一些像认知或者语言、表达障

3、碍，中间的其实是一些表现。 视觉障碍就是说由视力不好到完全看不见，视力残障范围很广，视力不好的症状表现为视力模糊、朦胧、远视、近视、色盲等，我看到你们很多人戴眼镜，你们把眼镜拿下来，看我们这个页面，能看得清楚吗，其实这个无障碍环境并不是说你真的手不能动、脚不能动才叫无障碍，色盲、色弱这样生活当中很常见的缺陷，其实都在我们这个课题范围内。 这是你要来解决的，怎么样来解决，我列出来的跟整个计算机应用有关系，人在使用计算机或者使用网页的时候有关系，比如说关于视觉障碍来说，我们可以定制一些放大镜，我们的系统会提供，还有把一些颜色、对比度进行一些加强，强化一些，甚至是完全看不见的人，直接用屏幕阅读器，那

4、个屏幕完全把文字读出来给你听。 第二个听力，有的人听得到一些声音，但是没有办法辨别整个单词，有的人是完全听不到，这就导致用户听不到计算机提示音、警告、语音，我们首先把听到的信息直接用文字描述出来，给他们看到，或者说用到一些视觉元素把这些信息告诉他。 第三个是行动不便，有一个很简单例子，我们在操作电脑的时候，你没有鼠标，那你怎么办？你只能使用键盘，就像我们普通人，鼠标不在，只能使用键盘操作电脑的时候，你发现其实不方便的，就要把你可以用到的工具，就用快捷键、可访问键达到它的使用，我们这个无障碍说白了就是可访问，并不是说易访问，你要让所有人用到，那才是我们最基本要求。 还有一个是认知，我有一个很简单

5、的比喻，我输入这些单词的时候，脑子里有这个镀银，但是不知道这个完整的字怎么写，有一些单词提示，或者说你使用过某一个搜索栏之后，搜索栏会把你之前所做的动作记录下来，然后你再操作的时候，发现很快捷的找到你之前操作过的东西，这就是对你认知的一个帮助。 最后一个是语言类，这就是说我们在整个界面上，你的语言元素尽量简单，不要写的很深奥，你不要用这些程序员才能看懂的文字，让你的用户看到，这样如果一个普通人的智商都没办法理解，更不要说我们面对的是高中、初中或者根本不认识几个字的人。那我们怎么样用生活化的语言告诉他我们要传达的信息，这看似是针对特殊的人，其实很多普通的人都需要。 我知道淘宝是面对非常庞大的用户

6、群，甚至我之前有听到过淘宝有几大网商这种评选出来的，说他们有盲人，我一直很好奇，他们盲人怎么使用整个淘宝的，有兴趣的话你们可以看一下他们怎么操作的，这是针对不同的身体缺陷，我们找到相应解决办法。 这里举个非常贴近生活的例子，这个颜色大家都看得清楚吗，这是在某色盲的情况下，他看到的颜色是这样的，我们有三原色，有不同类型的色盲，我们的界面当中，如果你单纯使用一些颜色，给他信息区分，他可能看到的东西跟你完全不一样，比如说有蓝色的色盲，他就看不见蓝色，或者他对蓝色理解的不一样，然后红色的色盲、绿色的色盲，不同色谱在他们眼里呈现的效果是不一样的。 在男性比例当中，可以看到8%的男性是有色弱、色盲的，就是

7、说这个用户群在我们生活当中很多的，这不是特殊的，这真的是一群很普通的人。这是漫画，这个房子上面贴了一张通知，这个房间是给耳聋的人，而同时来一群盲人，他们看不见里面写的是什么东西，他们也要占领这个房间，这个说是给盲人用的，这里就有一个矛盾，他们其实看不见那个字的，我们在传达信息的时候，不能以单一方式来传达，可能旁边有一个哑巴在那里说，我说这个给耳背的人准备的，其实耳背的人他们听不见的，他们也不知道听到什么样的状况。 这是一件挺矛盾的事情，我们要用多渠道信息传达方式，把目前这些信息给到我们的人。 还有508条款讲一下，508条款其实是美国法案第508款，为什么说它重要，因为这个重要性就是所有条款非

8、常详细的规定了多媒体系统，都有非常详细的规定，这个东西你想卖到美国去，所有软件都要遵守这些条款，之前我们非常重视这个东西，我们现在可能没有这么硬性的规定，我们完全以用户角度而驱动，而并不是以上下角度驱动，这个有兴趣可以看一下。这里有一些焦点，整个508条款很多，对于我们计算机应用这块来说，其实有一些编号，有兴趣的话PPT发给大家，你们可以看一下，这些点我们可以看一看的，这里的网站可以搜索到整个条款。 我不知道你们怎么理解无障碍，我应该把最基本的概念传达到了，接下去关键问题是怎么样做，第一个是非常完美的支持键盘操作。第二件事情，支持高对比度。第三件事情支持屏幕阅读器，你把这三件事情做好了，你的无

9、障碍环境就完全没有障碍了。 这也是一个漫画，前面的人他是耳朵没有办法听见的，他没有办法听见后面这些人讲谋杀也好，还是什么乱七八糟的，他是不能听到的，但是他有工具，这个镜子对他来说是一个工具，有缺陷没关系，但是有工具可以非常清晰的看到后面发生的事情。 这是简单介绍的工具，第一个是Screen reader，是我们的屏幕阅读器，你们可以找到这样的窗口，这是高对比度，一个是XP的，一个是VISTA的，通过这样的路径，打开这样的对话框，怎么样的情况下是高对比度，第一个是正常的，第二个是在高对比度的情况系，我们的东西呈现的效果。 这里有一点希望大家注意一下，这里有很多icon，但是在高对比度的情况下，它

10、完全是没有的，说白了屏幕阅读器只支持文字，高对比度的也支持文字。它不支持图，如果说我们的网页或者程序上面把很重要的信息在一个图片上显示，比如说标题，你觉得这个字体不好看，做一些效果，然后做一个icon，整个页面很漂亮。但是问题是只要在这种情况下，或者说在屏幕阅读器帮助的情况下，这些信息完全被屏蔽掉的，完全不支持的，重要的东西要规避一下。 接下来我们看怎么用这个东西，有很多工具，国内也有盲人使用的“伍德读品软件”，我之前在一篇文章里面看到QQ做用户体验的时候，做过盲人测试，他们那些盲人都是花了两千块钱，买了屏幕阅读器，还有一些软件在美国、欧洲市场很多，但是对我们来说太远了，就没有放在PPT里面。

11、 我们最基本的开始，这是怎么样使用screen reader，这儿有一个测试器，测试器是英文版本的，我这个系统有中文版本，会出现的比较乱，就中文、有英文。我把这个窗口这么完全读了一遍，它有一个顺序，我们刚刚听到的那个部分，就是在阅读窗口，它有一定顺序，我们刚刚听的是屏幕阅读器的阅读，我们很多人听的很累的，但是它有一个顺序，一个是从左到右，一个是从上到下，我们做界面设计的时候，要有一些遵循原则，比如说横向对齐、竖向对齐，不然读起来乱七八糟，上下左右乱跳，可能出现这样的情况。 另外支持全屏阅读，还有控件阅读，选择某块区域，对那一块区域进行阅读，其实有不同阅读方式。 另外一个是键盘操作，相对来说比较

12、完整的一个东西，其实键盘操作有两种，一个是快捷键，一个是可访问键，可访问键就是ALT、TAB，你在按到某个键的时候，在一些字母键出现横杆，说明这是可访问的，比如说按住ALT，可能会跳到你选择的那一项，一个是操作键，一个是访问键。 这是完全键盘操作的一个表，非常完整，我们一般的快捷键是哪些键合在一起的，所有键盘上的键有怎么样的功能，全部列出来了，这可以非常清晰的看到。我这里也是有一个测试器，我通过上下移动这些东西，你会发现它乱七八糟，然后就下不去了，我一直想下去，但是他没有办法下去，这个顺序是完全零乱的，这就是说错误的移动。 这种快捷键支持可能跟我们没有什么东西，但是这需要我们发现问题。其实我们

13、所有页面在一个系统里面，如果你没有办法做到比系统更好的话，那就遵循系统的规则。 从XP到VISTA到现在的WIN7，微软做了很多改进，WIN7卖的非常好，我也试了一下WIN7的使用方便性，我觉得做得非常好。针对于无障碍内容，我之前看了一下，现在我用的office2010版，以前它的文件都没有做鼠标放上去，然后有一个下拉菜单，然后选择下拉菜单，其实这样的方式，实际上有没有考虑过很好用，首先我是一个正常人，我可能很容易先把下拉菜单拉下来，然后鼠标再移一下，再点一下，实际上对于行动上、手上没有那么协调的人，鼠标移动，马上菜单收回去了，很容易出现这样的误操作，但是office2010完全不是这种模式了

14、，而是完全那种固定在左边一栏，完全是变成固定的一栏了。 这是通用setting功能，有一个辅助选项，是白底黑字，你可以去访问我们所有系统里面，找一下setting，有一个无障碍环境，在它的下面，这就是所谓高对比，其实这是很好找的，现在在桌面主题上就已经单独做了一个主题，你会发现有不大一样的，这些icon是存在的，这是在系统里面，比如说像WIN7或者系统里面，已经在这里了，像一般导入一张图片进去的话，这些是完全不可以显示出来的。 大家觉得刚刚那个很丑的，但是在苹果下面就做得很好，我都有做整个高对比度情况下色彩搭配，我们都有自己的一套高对比度状态，最早的时候提到的问题，你如果说过多使用图片，或者把

15、它作为信息传递者的话，你有可能在刚刚的高度情况下，你的东西就会丢失，你很多信息没办法在那个情况下显示出来。 怎么样做一个可访问性的程序，其实我刚刚有提到过，你如果没有办法挑战系统，那你就服从系统基本规则，这里有一个前提，我们要了解系统。我不知道你们有没有拿到一个PDF文档，关于这么一个windows文档，有关于所有的规则，那里面所有属性是，它的所有状态都是有规定，包括button高度，其实我们也做了很多用户研究，但是不可否认，人家也做了很多，他会有那样一些规定，也是他们一些经验，你想高过于他，首先要了解到他的一些经验，这些其实要让大家认识到的，尽量使用一些系统控件，包括它的对话框。 还有一个，尽量使用那些友好的词语，使用中文还好一点，英文的也是一样，比如说是没有障碍的，比如说“正常人”，那对某些人是鄙