7条无障碍访问设计准则(上)

无障碍访问相关的内容比较少见,就自己的项目经验来看,这点在实际的项目应用中考虑甚少。翻译这篇长文的时候纠结于如何翻译Accessibility一词,它的字面意思是无障碍访问,印象iOS设置中有一项是辅助功能,其中包含的功能设置都与Accessibility相关,考虑到苹果的翻译是为了普通用户,而这篇文章的受众是互联网从业人员索性使用无障碍访问。

———————————-译文分割线———————————-

无障碍访问让生理有障碍人士感知、理解、导航、互动并有助于网络。想象一下,一个世界里,开发者们懂无障碍访问。你设计它,他们构建它…完美。在这个世界上,只有设计本身会导致残障人士有使用产品的麻烦。文章中介绍的这些准则将涵盖Web Consortium可访问性指南2.0与第508条的主要内容,以使你的产品在无障碍访问方面触达及格线,剩下的事情就交给开发与质量测试。

1.无障碍访问不是创新的绊脚石

遵循准则不是让你做一个丑陋、无聊、杂乱的产品。在设计时考虑这些约束,会启发你更多新的探索思路,从而为所有用户提供更好的产品。友情提醒:在阅读这些准则时,考虑我们不是为设计师同行进行设计。

为使用你产品的多层次用户设计。包括盲人、色盲、弱视,聋人或听力障碍者,暂时或永久性行动障碍者,抑或认知障碍人士。不论年轻年长,专业或普通,都能享受优质体验。

像其他设计约束一样拥抱这些易用性原则,他们属于创造牛逼产品的一部分挑战。

2.不要把颜色作为传达信息的唯一视觉方法

帮助不能或者有困难分辨不同颜色的用户。包括色盲(12个男人中有1个,200个女人中有一个),弱视(30人中有一个),盲人(188人中有一个)。

用颜色高亮或补充那些已经在视觉上明显的设计。

下面是一幅只用黑白显示的图片,有多少字段是处于错误的状态呢?

绝大多数人的答案是一个,“human verification”字段。那是因为有一个三角形的警示标志显示字段内容错误。

那么再回过头来看看彩色的截图,你认为有多少错误字段呢?

所有人的答案变成了四个。

有多种方法能让这个表单在视觉上体现出无障碍访问。可以在所有错误字段都展示那个红色的错误图标。可以用文字来解释字段为什么错误。可以用tooltip,加粗的边框、加粗的字体、下划线、斜体等等。有无穷的选择,不过唯一的准则是别只用颜色

3.确保文字与背景之间有充足的对比度

根据WCAG,文字与其背景之间的对比度至少为4.5:1,如果字体大小为24px或19px粗体,这个最小值可降至3:1。

这条准则可保证弱视、色盲、抑或更严重的视觉问题人士能够认读屏幕上的文字。

也就是说24px或19px粗体或更大的文字,在白色背景上可使用最浅的灰色是#959595。

对于更小的文字,在白色背景上可以使用最浅的灰色色值为#767676,在灰色背景上的文字需要更偏向黑色。

Color safe是一款给力的工具,可以帮你找到无障碍访问的配色。WebAIM’s Color Contrast Checker,可以用来检测已经选定的颜色。

不过Logo或处于不可点击状态是例外情况,包括按钮菜单选项。而占位符或表单字段内的提示文字不属于例外情况。

Medium的这个例子是没有达到及格线的,只有大大的字母“M”符合准则。

BBC网站是一个很好的例子,它能轻易的通过对比度测试,因为最浅的的灰色色值恰好是#767676。

我很乐意跟Salesforce的设计团队合作,因为他们在移动产品上拥抱对比度这一准则。

用高对比度的颜色组合进行探索。通过这些练习的设计师经常惊讶于他们有多偏好高对比度设计。我确信你能找到合适的对比度来显示文字而不会对产品造成损伤。

Projectors Don’t LieAccessible Interface Design查看更多关于颜色对比度的更多相关内容。

未完待续。

与贾樟柯擦肩而过的日子

2004年,高考的前一年,每班至少有一份的环球时报上有一句话让我印象深刻:“北京在打雷,乌兰巴托开始下雨。”我不知道那是贾樟柯的作品,那时候的赵涛还很年轻,撩起白色的纱巾,很美。

三峡好人上映的那一年,贾樟柯来s大做访谈。那时候s大的这种活动很少很少,更何况贾樟柯是名人,贾樟柯来s大是因为年轻的时候在许西租房子学画画考美术学院。但是,我没有去,可能是长久以来形成的一种惯性,谁红就不喜欢谁,谁过气了,我走过去;捧起来敝帚自珍细细欣赏。

2009年,我大学毕业了,快走的时候买了南方人物周刊,那时候24城记在上面有一篇文章,我得承认我看不懂。

2011年左右的时候,在蓝色港湾单向街书店,有贾樟柯的签售活动。夏天,很热,排队的人居多,单向街的二层座无虚席之外人们摩肩接踵地等着。我心想他有这么火吗。还是走了。

还是2011年,汾阳一个小孩烧伤了,我负责发北京某晚报的微博,发了一条。贾樟柯看到了,联络晚报要到孩子的联系方式。也许那是我过去现在和将来离贾樟柯手机号最近的时候,然而我没有拿到,另外一个健康版的编辑拿到了。我,只是给贾樟柯发过微博私信的小报实习编辑。

然而后来的日子我不再错过,但是只剩下我一个人。图书馆里所有关于贾樟柯的书我都借了一遍,还让左撇子从他们图书馆借了拿来看。那个出版社叫做山东画报出版社。贾樟柯以前的电影剧本每本基本上都出了一本书,我知道了顾峥,知道了小武的扮演者。虽然那些书写了什么现在已经全然忘记,有一个画面我永远不会忘记,在北影的某个自习室,贾樟柯点着烟写着剧本,远处传来明清街上的打打杀杀的声音。

小武,世界,东,无用,天注定。

接受贾樟柯是从小武开始的。小武混的不好,心爱的歌厅姑娘也傍上款给走了,最后他偷东西出名了,县里电视台曝光他的时候他感觉自己获得了一种在体制外出头的胜利。我又开始讲故事了,实际上我记得这电影印象最深的是小武在空无一人的澡堂里光着身子在唱歌,好像唱的是站台,但是小武挺高兴。

从这个角度上来看,贾樟柯的电影有预言的性质,并非他想要预言,只是他比黄金甲和梅兰芳要深刻而已。同样的《世界》这个片也一样,在北京打工的两口子,男的在世界公园当保安,女的跟着舞蹈团在巡演,他们遇到的来自花花世界给他们许诺好的生活,最后冬天煤气中毒,经历过生死两个人躺在地上发现其实他们跟北京跟世界公园里的那个“世界”没有半毛钱关系,所有对于北京的企图心都只是一厢情愿,他们虽然身在繁华的北京心要去繁华的世界,但是真实的世界里只有他们两个人的生死。这个片里也有进京务工建筑工人的受伤讨薪无力支付医药费用,那个时候北京处在快速的城市化步伐中。贾樟柯没有被繁花迷眼,清醒地看出来在城市打工的外地人的处境,这些是真实的处境。有一段时间我特别喜欢看各种都市爱情电影,它们大多以大望路国贸取背景,那些白领那些办公间那些感情生活是真的跟我们半毛钱关系没有,现在大屏幕上的电影有几部是跟我们在北京的处境有关系不是来吸金的呢,我现在只能想起来一部《神探亨特张》。
所以贾樟柯贵在真诚,所有人都在拿拍电影赚钱,他并没有。

未完待续。

生死之间——速度与激情7观后

跟星际穿越一样,这个片是在讲家庭。不同的一点是在讲兄弟情谊,比较主流的价值观。在这平静的价值观下面汹涌的是枪林弹雨,异域风情,豪车追击,和孤注一掷的开开向悬崖或者摩天大楼。

其实挺好奇为啥美国大片都回归家庭叙事,看完以后的感受已经被贾樟柯一言蔽之:“无论你有多大的青春冲动,无论你怎样对抗体制,最后你会回到另一个体制——家庭”。在速度与激情的前几部里,抢银行确实可以看作是对抗体制的表现,锐气凌冽。在这一部里主角们为了保护体制奋不顾身。

这个片的硬伤是保罗沃克的缺席,其他主演都是栩栩如生,脸上的线条和细纹都清晰可见,唯有保罗总是脸上僵硬的表情。甚至一开始的时候,保罗扮演的布莱恩在自家门外倒车的那一幕感觉保罗是出戏的,没有进入状态的感觉。

7的亮点不是多米也不是霍布斯,而是杰森斯坦森扮演的反派一号。像极了老无所依里面的冷面杀手,特别帅酷。

在看片的时候,会想编剧会不会把布莱恩这个角色给写死,因为这样最容易交代保罗的缺席,但是这跟一开始的no more funeral显然违背。最后还跟多米来了个告别,但是布莱恩在车里的那一幕太像CG出来的,或者从以前的片段里扒出来的。生死之隔也许就是那个岔开的路口。

这个电影属于现实的因素少之又少,完全建立在虚构的冲突中。是为演而演的典型。对现实中保罗沃克逝世的唏嘘盖过了大屏幕上打斗的震撼。

 

让动画隐形(Invisible Animation)

  关注动画比较久,在Dribbble上能经常看到炫酷浮夸的动画效果,这些作品往往对一些设计师形成误导,忘了动画的功能与作用。CampaignMonitor的产品设计师发表在Medium上的文章,用产品设计实例阐述了在设计动画时的经验与取舍。

————————译文的分割线————————

  毫无疑问UI动画是不能阻挡的潮流。然而重点往往放在动画本身,而不是通过优雅的动画来提升用户体验。Pasquale D’Silva在2013年Web Direction South上的演讲给出了很好的建议:

牛逼的动画是隐形的,你不应该注意到在盯着动画看。

  我们(Campaign Monitor的Email Builder团队)已经尝试一些原则:

  • 动画必须提升可用性
  • 自然细微
  • 给用户以反馈。

  在Email Builder过去一年的工作中,我们意识到网页中的动画不同于原生应用,在时间、空间、姿态以及动画曲线方面会遇到更多挑战。同一动画在不同的浏览器中渲染不同,渲染的不一致性让我们为了创造出友好的用户体验而做出一些妥协。实际上,一些在我们自己强大牛逼的27寸iMac上表现漂亮有用的交互细节并没有放在最终的产品里,因为在我们用户通常使用的设备上却变得奇怪与缓慢。

  在概念与设计阶段尝试过的动画与交互原型中,只有最有用与性能最好的进入最终的产品。对于我们来说,意味着挑选最有用的动画并花费大量的时间把它调整到刚好(在提升用户体验的各个方面)。下面是挑选的一些动画:

添加布局的下拉菜单

当用户点击“Add layout”按钮,下拉菜单从按钮下方渐显,说明了与按钮相关联的操作。

侧边栏手风琴菜单

通过其他菜单向下的滑动,容易把内容与菜单标题联系起来。并且,标题右侧的选单稍微延迟渐显出现让用户更明确的知道在“Image”类型下设定。

按钮状态

等待的时间往往是漫长的。当用户在等待通过邮件接收文档时,我们把背后的事情展现给他们。这个动画让等待过程更迅捷,即使在接收邮件时间不变的情况下。

添加或复制布局

当用户添加或复制一个布局,首先在界面中出现一个空间随之把新的布局渐显。这样让添加新内容更加明确。

删除布局

如果邮件里有大量相似甚至相同的布局,这个动画就体现出来作用了。当前布局删除后邮件的其他内容会向上滑动。

布局控制器

当鼠标划过某一块布局时,控制器从中滑出,清晰的说明操作会影响当前鼠标滑过的布局。

  我(原文作者)相信动效设计师能轻易的指出这些动画可以如何改进。我们不得不去掉那些高度细腻的细节来解决动画在不同设备上的表现问题,这样下意识的决定以确保在跨平台上为用户提供最好的体验。

  越来越多的设计师在讨论、撰写、设计具备动画效果的界面,但这不意味着要让每个元素都会动。如果我们做对的话,你不会在使用Email Builder的过程中注意到之前所罗列过的动画效果。

  隐形,那是一个合格动效需具备的特质。

更多推荐

God is in the details — Buzz Usborne

Transitional Interfaces — Pasquale D’Silva

Improve the payment experience with animations — Michaël Villar