首页

后疫情时代,「无障碍设计」通用指南

分享达人


文章来源:站酷   作者:特里笔记

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

关于无障碍设计的研究分享

分享达人

大纲

1、研究背景

2、案例分析

3、无障碍设计工具推荐



在特殊的场景下所有人都存在残疾

一听无障碍设计就觉得可能和残障人士有关,其实不然;除了先天或后天出现的眼盲;耳聋的这种:永久性的障碍。在正常人身上也存在着情境式障碍;暂时性障碍;例如:


提着大包小包的你,想使用手机—情境式的肢体障碍

在喝热粥时,雾气遮挡住的眼镜—情境式的视觉障碍

骨折的腿无法正常行走—暂时性的肢体障碍

刚睡醒迷糊的你—暂时性的认知障碍

 ……


所以即使你是正常人,在日常使用产品时也会受到和残障人士一样的局限性。而大家说的用户体验设计其实就在特定场景下解决给特定的人群产生的局限性。



城市无障碍坡道


先普及一个概念(curb cut effect)直译过来就是“遏制分割效应”,其实意思就是机会共同体的概念、弱势群体受益的法律和计划往往最终使整个社会受益;最普适的就像是路缘处会做临时的斜坡处理,目的是为了帮助坐轮椅和推荐不便的人出行顺利通过,但是实际上,对于推着婴儿车,和行李箱的人同样受益。


傻傻分不清楚的洗发水和沐浴液

为了统一品牌设计语言,往往会将洗发水和沐浴液的瓶体设计成一样,不仅是视障人士,任何人在闭上眼睛洗头时都分辨不出来。花王在1991年在瓶身做锯齿状处理用来区分两个产品,通过触感也可以轻松辨认。

原文传送门:シャンプーのきざみに込められた思い


接下来就是软件端的案例,软件产品在无障碍设计的例子上也很多。


哈啰出行-司机端

哈啰出行的司机端,在司机开始行程后,在司机端进行操作,APP会进行类似于IOS VoiceOver的语音播报,就是对你点击的位置做中文的播报,规避对情景式障碍的分神的危险。


滴滴-老年版

滴滴打车首页的“老人打车”,除了对布局的简介化,对字体的放大化,还可以设置常用地址然后一键打车,或者通过电话联系客服叫车,还是比较方便的。、对于60岁以上并通过实名认证的用户,如果终点是医院等特定目的地的话,后台还会优先派单,为老年人提供救急服务。


无障碍设计工具推荐


检查色彩对比度

色彩对比度意为:【识别对象】和【其背景颜色】之间的对比度,对比度越高,越清晰,对比度越低。越模糊。如把重要的文字信息的对比度设计到AAA.次级的文字信息的对比度设计到AA。 把色彩对比度量化的话,可以计算出比例值,最低1:1(黑底黑字)、最高21:1(白底黑字)。

最权威的互联网无障碍规范 —— WCAG2.1(Web Content Accessibility Guideline,Web内容无障碍指南

对比度量化工具:点击这里

对比度cheome插件:点击这里


Funkify - 残疾模拟器


通过极端用户的视角来体验网络和界面,包括视线模糊、对比度下降(所有人的视觉对比度都会随着年龄而下降)、杂色、白内障、糖尿病视网膜病变等。

残疾模拟器cheome插件:点击这里


屏幕阅读器

用于在 Chrome 浏览器中朗读内容

屏幕阅读器cheome插件:点击这里


Color Oracle-色弱;色盲模拟器

支持Mac / Win / Linux。大约8%的男人和0.5%的女人有色盲或色弱、是相当大的族群。当然,UI中不应该只通过颜色来区分信息,但有时无论如何会用到色彩区分(比如数据可视化),那么就一定要使用色盲友善的配色方案。一般来讲,蓝/黄、蓝/橙是比较万用的搭配。

色盲模拟器工具:点击这里


总结:


虽然在现实的资本市场不太会在边缘人群身上花那么大的资源,但是体验设计存在的意义不就是为了解决各种因素给人产生的局限性么。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷  作者:你听得到____

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


「无障碍设计」指南

雪涛

产品在进行设计时,往往需要做好多方面的考量,针对有一定“障碍”的用户,产品需要做好包容性设计,帮助用户更自如、轻松地使用和进行交互。本篇文章里,作者就如何进行无障碍设计做了方法策略上的总结,一起来看一下。

你知道吗?视力、听力和行动能力完全健康的人,可以轻松地读写,可以有效执行多任务,并且始终可以正常工作的人约占总人口的50%?其余的人都是戴着眼镜或有色盲,手腕或耳朵受伤,生活在嘈杂的环境中或网络信号质量差,忙碌或忙碌中,阅读障碍或有注意力障碍等。

这意味着大约一半的用户可能很难使用我们的产品或浏览我们的网站。因此,我们可能错过了提高用户满意度并扩大受众范围的机会。

不过在设计阶段实施一些简单的原则就可以改善交互和整体用户体验,极限设计可以为所有人带来价值,我们称之为“包容性设计”。

一、什么是包容性设计?

包容性设计考虑了尽可能多的人的需求和能力,而不仅仅是针对残疾人。它认识到我们的需求会随着时间和环境的变化而变化,因此它会预测错误,挣扎和不同的交互方式。它的目的是在问题发生之前解决问题,提高标准并改变良好产品设计的标准。

包容的用户界面是善解人意,有意识且可访问的。年龄、性别、教育程度,财富和能力等不同特征,在不同环境中生活或工作,获得技术水平不同的不同人群可以舒适地使用它。我们将使用POUR作为在用户与界面之间创建简单、轻松、快速交互的参考。

超全面!「无障碍设计」指南

POUR代表

  • 可以理解:数字内容可以轻松地以不同方式进行解释或处理吗?
  • 可操作:数字产品能否轻松自如地进行功能和控制?
  • 可以理解:用户可以理解界面的功能和内部信息吗?
  • 健壮性:数字产品是否与不同的辅助技术和设备兼容?

二、设计师如何提供帮助

作为设计师,我们当然不能控制以上所有要求都能做到。但是我们应该承认,人们遇到的许多可访问性问题是由设计阶段未做过的决定引起的。

因此,设计师有很多机会可以有所作为。仅通过做出更明智的设计决策,我们就可以影响(改进或协助)四种经验。

  1. 视觉体验:这包括形状、颜色、对比、文本样式-产品界面的所有图形元素。
  2. 听觉体验:这是指与产品互动时产生的声音、音量和清晰度。
  3. 认知经验:这描述了用户花费在解释界面上的时间,以及使用界面需要多少注意力和精力。
  4. 运动体验:这包括执行任务或与产品交互所需的所有动作和动作。

通常,可访问性被认为是对创造力的挑战;但是,如果我们认为这是一个创造性的挑战,那么我们会开辟全新的可能性领域。真正好的可访问性的诀窍不是在功能或功能上进行折衷,也不是在美学上取舍,而是使功能和创意体验也可以访问。

1. 改善视觉体验

超全面!「无障碍设计」指南

1)颜色

① 对比度

对比度是亮度或颜色的差异,使物体从周围环境中脱颖而出,并可能对清晰度产生显着影响。高对比度使视觉元素从背景中脱颖而出,更加引人注目。

超全面!「无障碍设计」指南

专家提示:纯粹的#000000黑白色会给眼睛带来强烈的对比度,甚至会影响阅读障碍者。这就是为什么我们倾向于避免使用它,而是选择深灰色的原因。

② 亮度

亮度描述从光源发出的照明水平或从表面反射的光量。明亮的颜色反射更多的光线,并会干扰我们阅读和处理信息的能力。

超全面!「无障碍设计」指南

避免在背景或较大表面上使用鲜艳的颜色。请勿在文本上或文本附近使用鲜艳的颜色,以免干扰文本。

如果品牌要求特定的高亮度颜色,请尝试建议使用饱和或较深的颜色。如果你绝对必须使用明亮的颜色,则应将其用于突出显示动作的方法最小化,并将其与较深的色相搭配以达到平衡和高对比度。

专家提示:任何含有超过50%黄色的颜色都会自然反射更多的光。这意味着黄色,橙色,绿色和蓝绿色是高风险颜色,应谨慎使用。

③ 色盲

色盲是无法区分特定颜色(通常是红色和绿色,偶尔是蓝色)的一种,它比你想象的要常见。

超全面!「无障碍设计」指南

专家提示:不要仅仅依靠颜色;颜色不应该是传达重要信息的唯一方法。您可以执行以下操作:

  • 使用下划线表示链接和斜体,或使用粗体突出显示文本;
  • 将图标与文本一起使用可传达成功或失败的信息;
  • 使用纹理或图案作为图表;
  • 为按钮或明显的通知使用清晰的视觉样式,针对焦点或活动状态使用不同的字体样式。

2)版式

① 字体选择

通信是每个数字产品的首要目标,可以借助印刷术及其正确应用来实现。内容应清晰易读,这意味着易于识别和解释,轻松阅读和处理。

超全面!「无障碍设计」指南

简洁明了对于快速阅读和解释至关重要,请避免使用复杂的字体,因为它们只会增加视觉干扰。选择正确的字体家族,针对那些具有清晰定义和独特形状的字符,因为视力障碍或阅读障碍的人可能会因某些字符或其组合而感到困惑。

② 字体样式

字体样式还会影响弱视或阅读障碍者的阅读性能。我们应该注意并谨慎使用字体样式(如斜体,下划线和大写)的频率和位置。

超全面!「无障碍设计」指南

根据“英国阅读障碍协会”的规定,应避免使用斜体,特别是对于较大的副本块或较小的字体。这是因为它们使字母倾斜,显得更加尖锐,因此更难以阅读。

正文也应避免使用带下划线的字体样式。给长的段落加下划线会增加视觉噪音,从而降低阅读性能,而给短的句子或单词加下划线会与活动链接相关联,并可能引起混乱。粗体是添加对比度和强调的更好选择。

尽管没有确凿的研究,但有一些证据支持也应避免主要针对正文使用大写字母。似乎所有大写字母的统一外观会降低单词形状的对比度,从而使扫描变得不那么容易。此外,大写看起来有点紧张,可能感觉好像有人在向您大喊大叫。

专家提示:平衡是关键。谨慎使用每个样式并赋予其含义甚至可以提高可读性。

③ 字体大小

您知道绝大多数人戴眼镜或隐形眼镜吗?实际上,十分之六以上!此外,约有62%的人通过手机访问互联网,这还不包括应用程序的使用情况。当视力不佳的人在旅途中在小屏幕上使用技术时,可能会出什么问题?

超全面!「无障碍设计」指南

使用较大的字体。通常,16px被认为是最具有包容性的,但是请注意,字体可以以不同的比例站立,并且字体的大小可以相差很大。切勿低于14px,事实上,大多数现代网站的正文都使用18px字体,而标签,标题或工具提示仅使用14px或16px。

专家提示:此外,避免使用薄而轻的字体,因为对于较小的字体或在明亮的光线下可能难以阅读。

④ 段落格式

帮助人们轻松浏览内容应该是我们的首要目标,因为只有20%的人可以阅读内容,其中55%的人可以快速浏览内容。我们的工作是通过使用舒适的段落格式来尽可能地支持人们。

超全面!「无障碍设计」指南

研究表明,用于支持可读性的平均在线行长(包括空格)约为70个字符。标题,字幕和项目符号点将有助于扫描,而左段对齐将使文本更易于阅读。

较长的文字墙使人们参与的机会大大减少。成功的段落长度不超过5到6个句子。

空格将帮助患有认知和注意力障碍的人,保持阅读重点。对于其余的内容,它只会使阅读更加愉快和流畅。根据WCAG,最佳做法是将行高(行之间的间距)设置为相对于该类型大小的1.5相对值。段落之间的间距也至少应比行间距大1.5倍,因此必须明确定义。

提示:行距不应超过2.0,因为它可能产生相反的效果并分散读者注意力。

⑤ 复制版面

作为设计师,我们经常陷入过度设计布局的陷阱,以使它们看起来引人注目或独特,从而将可用性放在一边。这就是为什么我们看到诸如文本的一部分之类的趋势在彩色或带纹理的背景上重叠图像或文本的趋势。只要我们知道如何以及何时使用它们,我们仍然可以享受其中的一些趋势。

超全面!「无障碍设计」指南

当在彩色或带纹理的背景上使用文本时,我们需要确保它们之间的色彩对比度足够高,同时在整个重叠区域都保持一致-意味着在副本下没有较浅和较暗的区域,也没有过多的细节干扰。较大的字体大小和较重的字体粗细也会提高对比度。

专家提示:一如既往地“了解您的用户”。时髦的布局并不适合所有人。

2. 改善听觉体验

您可能在想,视觉设计如何影响听觉体验?因此,想象一下您正在与一个俱乐部的朋友交谈。我敢打赌,您只能听见她说的话的一半,但是您可以通过看着她的嘴唇移动,肢体语言和面部表情来保持对话的进行。

由于视觉效果的支持增强了模棱两可的声音,因此您最终可以理解它们。在用户界面中,声音对于不同的人可能意味着各种各样的事情。它们也很容易在嘈杂的背景中丢失,因此最好以视觉提示来支持它们。

超全面!「无障碍设计」指南

我们的目标应该是提供听觉和视觉提示的反馈,支持错误,通知以及与相关和邻近图形元素的重大交互。我们还必须确保视觉线索保持足够长的活动时间,以使人们能够看到和阅读,同时又不隐藏任何重要的内容。

一个好的做法-不限于支持声音辅助技术,是在UI元素中添加描述性标签,并在图像中添加标题,以便于在屏幕阅读器中轻松导航。为视频使用字幕是改善听力体验的另一种方法,对非母语人士也有帮助。

最后,我们不应该忽略声音是问题的情况,这就是为什么我们需要视觉替代的原因。有些人可能对特定的声音敏感,或者处于声音可能引起干扰的情况下。然后,这是一个好习惯,让人们可以选择关闭声音而不必调低扬声器音量,从而使此功能清晰可见。

专家提示:避免使用不必要的自动播放声音和音乐,因为它们会打扰甚至惊吓别人。

3. 改善认知体验

超全面!「无障碍设计」指南

1)知觉

① 视觉清晰度

清晰度是用户界面中的第一个也是最重要的属性。成功的用户界面使用户能够识别和解释他们所看到的内容,了解产品的价值和所要采取的行动,预测使用产品时会发生什么以及与产品成功交互。

超全面!「无障碍设计」指南

形式跟随功能是一项原则,指出对象应反映其预期的功能或目的。为了在用户界面中实现此目的,我们使用了附加功能,附加到UI的视觉提示/属性,以显示用户与其交互的可能方式。

支付能力取决于用户的身体能力、目标、过去的经验,当然还取决于他们认为可能的情况。按钮应该看起来像按钮,就像链接、菜单标签、表单等一样。使用清晰的符号/功能可以帮助用户识别或解释界面,并轻松进行交互。

在用户界面中使用熟悉的和已建立的设计解决方案将帮助用户预测结果并自信地采取行动。因此,使用设计模式来解决常见问题是一个好习惯,该设计模式是经过测试、优化和可重用的解决方案。

设计模式建立在过去的经验和可能性的基础上,并附加到特定的目标上。为避免眼前的问题,选择正确的设计模式应该是我们避免混淆或压力大的交互的第一要务。

建立一致的视觉语言是获得更全面界面的关键。具有相同功能和/或重要性的重复交互式UI组件应始终以相同的方式外观和操作。因此,导航、按钮、链接、标签、错误等元素应在整个产品中具有一致的样式,颜色和动画。

值得注意的是,一致的视觉语言不仅可以通过附加含义和减少视觉噪音来帮助互动,而且还可以增强产品的个性,提升品牌知名度,建立情感联系和信任。

② 层次结构

视觉层次结构是指图形元素的视觉重量及其排列方式,使用户可以轻松地探索和发现内容。通过为页面元素分配不同的视觉权重,我们可以对内容进行分组并影响人们感知信息和浏览产品的顺序。

超全面!「无障碍设计」指南

颜色是第一大关注焦点。彩色元素将脱颖而出,因此在层次结构中位于较高位置。明亮的颜色会更加突出,因此,考虑到这一点,我们应该仔细安排和分配颜色,以将眼睛引导至正确的位置。

视觉元素的大小(例如印刷、按钮、图标和图像)在确定重要性方面几乎与颜色一样强大。较大的图形吸引了用户的注意,并且显得很重要。对于排版,明显不同的尺寸缩放比例可以帮助建立内容层次结构,并使内容扫描变得轻松而轻松。

辅助视觉层次结构的另一种方法是通过设计一致性和例外。一致对齐,外观相似,重复或相邻的元素给人的印象是它们是相关且同等重要的,而偏离元素以及不寻常的形状和有趣的纹理或样式将更加显着。太多的设计例外会引起人们的关注,并会增加复杂性,因此,谨慎使用它们是一个好习惯。

专家提示:研究格式塔原理及其在UI设计中的应用将有助于我们理解视觉感知和分组以改善视觉层次。

③ 色彩应用

颜色不应该是传达信息或增加意义的唯一方法,但它仍然有用且很有影响力,因此不应将其视为装饰性元素。颜色具有含义,尽管没有硬性规定,但是太多的颜色会导致信息疲劳,并且不一致地使用颜色会导致混乱。

超全面!「无障碍设计」指南

避免使用太多颜色。通常,三种颜色足以描述页面的所有重要视觉元素。60–30–10规则可以帮助我们建立完美的和谐。其中60%的彩色项目由原色组成,以创建统一的产品主题,具有30%的辅助颜色增强含义和/或创建引人注目的效果,以及10%的强调色,以补充和辅助主颜色和辅助颜色。

此外,我们需要确保为消息使用正确的色调。除了美学,颜色还可以创造情感和无意识的联系。特定阴影的含义会因我们所处的文化和环境而异,并且颜色通常具有不同的含义-在西方世界,错误是红色,成功是绿色,信息是蓝色等。

专家提示:可以将我们自己的含义分配给颜色,只要它们不与既定规范重叠,并且我们在整个产品中使它们保持一致。

④ 符号学

符号学是对符号/图标及其含义的研究。它着重于人们如何形成和解释这些含义,这取决于人们所看到的上下文。在用户界面中,图标是可视语言的一部分,用于表示功能、功能或内容。符号学可以帮助我们设计立即被识别和理解的图像。

超全面!「无障碍设计」指南

尽管这些年来,我们已经开发出具有大多数人接受和理解的含义的图标。用户还习惯于使用特定于平台的图标,并且可以轻松地进行解释。在可能的情况下,最好遵循这些既定的解决方案,以获得熟悉和流畅的体验。

当然,在某些情况下,我们需要设计具有特定功能的自定义产品特定图标。这些图标必须尽可能简单明了,以确保清晰度。它们还应该具有一致的视觉样式,以传达其功能或与其他非功能性元素区分开。

最后,我们不应该仅仅依靠视觉隐喻来传达含义,因为某些关联可能并不那么明显。如果图标需要标题来描述其含义,则可能不合适。如果不确定,请与实际用户一起测试我们的设计会有所帮助。

专家提示:图标不仅易于解释,而且还可以具有多种含义。因此,将标记与功能图标结合使用是一种很好的做法。

2)互动

记忆

许多心理学实验表明,健康个体的处理能力非常有限。在我们的短期记忆中,我们大多数人平均可以保留7项,具体取决于个人。我们的大脑并未针对数字产品所需的抽象思维和数据记忆进行优化,因此良好的设计会有所作为。减少页面上可用选项和信息的数量,以及使用清晰的标题,面包屑和“后退”选项来访问以前的内容,将帮助用户记住或提醒自己他们在哪里,打算做什么或要做什么。

交互元素上或附近的清晰可见副本将帮助用户在整个交互过程中保持知情和自信。例如,表单标签应始终可见,动作不应隐藏在悬停后面,按钮应提供目标位置的上下文,并且各节的标题应明确。

专家提示:通过称为“块”的过程可以增加我们的短期记忆和处理能力。这是我们在视觉上将项目分组以形成更容易记住的较大项目的地方。

超全面!「无障碍设计」指南

3. 改善运动体验

1)菲茨法

菲茨法则为人类的运动和互动提供了一个模型。它指出,将指针(光标或手指)快速移动到目标区域所需的时间是其距目标的距离除以目标大小的函数。意味着较小的目标会增加互动时间。

超全面!「无障碍设计」指南

根据Fitts法则,我们旨在减小用户与目标之间的距离,同时增加其尺寸。该法律主要适用于导航和按钮。菜单和子菜单元素应在附近,而按钮,链接和分页应在较大区域上单击,以实现更快更准确的交互。

专家提示:根据可用性最佳实践,按钮/链接的最小尺寸为42×42像素(重击尺寸)。

2)奖励:提高绩效

到目前为止,我们已经建立了包容性设计,旨在让尽可能多的人访问并实现他们的目标或解决他们的问题,尽管他们有自己的情况。

我们可能很幸运,可以使用最先进的设备或超高速互联网,但是当我们的信号不太好时,我们会感到挣扎。对于大多数人来说,老式设备和糟糕的互联网已成为常态,因此,为获得最佳性能而设计是一件大事。

超全面!「无障碍设计」指南

极简主义是关键。如果我们打算创造一种可以被尽可能多的人使用的产品,那么我们就应该摆脱不必要的一切。图形,图像或动画是有价值的,还是增加了视觉噪音和加载时间?如果是的话,那就必须走了。

图像优化是帮助提高数字产品性能的另一个标准。通过将图像调整为合适的大小,然后通过诸如ImageOptim和TinyPNG之类的工具运行它们,可以节省宝贵的千字节和实际的加载时间。

开发人员通常使用的一种提高性能的技术是“延迟加载”模式,其中图像的加载是异步的,并延迟到需要时才加载。

例如,如果您快速滚动到页面底部,则在网站完全加载之前,您可能会看到类似网站线框的内容。“渐进图像加载”的一种替代方法是“渐进图像加载”,其中我们显示一个空的占位符框<div>,然后用小的低质量模糊图像填充它,最后用所需的高质量图像替换它。

超全面!「无障碍设计」指南

在每个数字产品中都遵循上述最佳实践,这是高可访问性标准的良好起点。但是总会有改进的余地,并且更好地了解我们的用户可以揭示提高无障碍标准的新方法。

因此,有必要花费一些时间和金钱来更多地了解我们的不同类型的用户,因为他们可以教会我们很多有关使包容性体验成为现实的知识。了解我们的用户将帮助我们练习同理心。

“赋权”不是偶然的设计思维过程的第一步。在移情阶段,我们的目标是加深对我们正在设计的人员及其独特视角的了解,因此我们可以在进行任何设计决策时与他们认同并代表他们。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:人人都是产品经理   作者:Ella

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI无障碍设计

雪涛

希望国内的互联网产品能够多去考虑无障碍设计,让我们的产品更有包容性,能服务更多的用户人群。



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷   作者:望着远方

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


通用设计和无障碍设计,谁才是「老大」

分享达人

什么是通用设计? 


设计产品需要考虑许多不同的因素,包括功能性、可靠性、美观性、安全性等。产品设计的主要目标之一是让具有不同能力的用户能够有效地与产品交互。幸运的是,通用设计是一个框架,它允许产品创建者设计适合所有用户的体验。本文将为大家讲解通用设计概念、其核心原则,以及针对不同受众和设备间的实用设计技巧。


通用设计适用于所有用户

通用设计是一套建议,以确保产品或服务适用于不同身心能力的用户。不同身体感官、心理或智力能力的人可以使用同一种产品,而无需任何额外调整或修改时,设计被认为是「通用的」。


通用设计对用户和企业都有益处,因为更高的用户可访问性和满意度会带来更好的用户留存率。认为体验不错的用户,更有可能向他们的朋友和家人推荐产品,从而扩大用户市场。


关于通用设计的3个常见误解

尽管通用设计听起来很简单,但它却是数字世界中最容易被误解的概念之一。让我们回顾一下关于通用设计的3大误解


通用设计和无障碍设计是一回事

在了解了通用设计的含义后,大家可能会认为它是无障碍设计的同义词。实际上,无障碍设计——指的是允许残障用户正确访问产品或服务的设计,它是通用设计的一个组成部分。


通用设计关注所有人的需求,包括残障用户。换句话说,通用设计旨在让产品、服务和环境更容易为每个人所用。例如,超市中的自动开门器,方便了坐轮椅的人和携带杂货的人。


通用设计只关注功能

为了最大化地提高产品的可访问性、可用性,需要人们投入时间和精力来创建可靠的产品功能,但功能良好的产品还不足以让用户满意。事实上,用户通常偏向具有良好功能性和美观性的产品——而美观性对可用性是有直接影响的。美学可用性效应表明,如果用户拥有良好的视觉外观,他们往往会觉得设计更有用。


通用设计是设计方法的一个很好的补充

这种误解的根源来自于对通用设计含义的不理解。有些设计师认为这是一个「结果」,但实际上它是一个「过程」。通用设计并不是一套用在设计结尾时的指导方针,而是一套从始至终就整合进设计过程内的原则。实践设计协作非常重要,以确保团队中的每个人在创建产品时也共享相同的通用设计理念。


通用设计的核心原则是什么?

通用设计的一个经典例子:帮助轮椅使用者从街道转到人行道的坡道设计。图片来源 Adobe


通用设计的核心原则是由Ronald Mace和北卡罗来纳州立大学的建筑师和产品设计师工作小组于1997年制定的。Mace 创造了「通用设计」这个词,并用它来描述产品和环境的概念。


最初,通用设计主要是为实体产品和环境考虑的,但后来这个概念被应用于数字产品。接下来概述的通用设计原则,目的是帮助当今的数字设计师创造更人性化的产品和环境。


01 公平使用

设计师应致力于为所有用户提供相同的使用方式。如果无法为不同能力的人提供相同的设计方案是,那么产品创造者应该找到合适的相似方案。例如,当你设计一个网站时,需要让所有人都能访问它——包括有视觉障碍和使用屏幕阅读器技术的人。

视障人士在配有辅助技术的计算机上工作。图片来源 Adobe


02 灵活使用

当你的设计投入使用时,它应该足够灵活以适应用户的节奏,以及不同用户间的交互方式。例如,当你创建新设备时,它应针对右手或左手访问进行优化。


03 简单直观地使用

你的设计应该简单、直观,并符合用户的期望——无论用户的知识或以前的经验如何,都应该易于理解。总是试着去消除不必要的复杂性,包括使你的视觉设计尽可能简约,以及在任务完成期间和完成后为用户提供适当的反馈。此外,一定要使用简单易懂的语言与用户交流。


04 可感知的信息

你的设计应持续向用户传达必要的信息。重要的是通过多种方式提供信息,以适应感官能力不同的用户。例如,在设计视频播放器时,建议添加启用字幕的用户界面(UI)元素。字幕可以帮助聋哑用户理解多媒体内容,对非母语人士也很有用。

YouTube的视频字幕。图片来源YouTube


05 容错

你的设计应将出错的风险降至最低。为具有潜在危险的操作添加额外的「保护层」,防止用户犯错,例如不可逆转的文件删除。

Apple macOS 中的对话框,在用户尝试清空废纸篓时变得可见。此对话框通知用户无法撤消此操作。图片来源:Nick Babich


06 最少的体力劳动

你的设计应尽量降低用户使用时所需的体力工作。具有良好的人体工程学设计、最少的重复操作,以及舒适的交互。自动人行道——机场中常见的一种运行机制,帮助身体各异的人快速移动——展示了这一原则的应用。

在机场使用自动人行道的人。图片来源 Adobe


07 接近使用的尺寸和空间

无论人们的体型、姿势或活动能力如何,都应不受影响地使用产品。例如,当我们设计一个新的移动设备时,我们需要确保它适应手和握把尺寸的变化。对于许多项目来说,可以使用UI 套件去制作适合各种情况的UI元素。 


如何将通用设计应用于学习?

正如我们前面提到的,通用设计不是严格的指导原则,而是一种考虑用户不同能力的设计方法。通用设计的目标不是创建一个一刀切的解决方案(很少能找到这样的解决方案),而是探索不同的设计解决方案,并选择更具包容性、可访问性和教育性。由于每个产品都不同,因此实施通用设计方法可能因组织而异。以下是基本上适用于所有项目的一些建议。


01 进行用户研究以了解你的用户

了解你的用户是产品设计最关键的方面——但如果你想实践通用设计,你也应该了解用户的多样性。用户研究在设计过程中起着关键作用,因为它直接影响我们的设计,这也是为什么所有设计过程的第一步都是收集用户需求。旨在了解用户的需求、行为方式以及与产品互动时的想法。


在进行用户研究时,你应该:

-确定你的目标受众;

-找到你目标受众的正确代表。

-采访代表以获得有关用户偏好和行为的宝贵见解。


在这个过程中实现用户多样性非常重要,这意味着你应该采访目标用户群中不同年龄、不同心理和不同身体能力的人。它将帮助你设计和开发可供不同类型用户访问的强大UI。在此阶段结束时,你应该了解用户的性质、目标以及使用你的产品想要完成的任务。


02 创建心智模型

根据你在第一步中收集的用户研究,是时候创建用户心智模型了。这些模型描述了用户对系统的了解(或认为他们了解)什么,这使你可以了解特定人员看待情况的视角。将残疾视为心智模型的一部分也很重要。例如,在为色盲用户调整产品设计时,请确保颜色不是用作交流的唯一方式。


03 用户流分析

用户流分析是最有价值的用户体验 (UX) 设计方法之一。用户流显示了用户如何与产品交互——包括用户为实现目标而经历的步骤,以及在此过程中每一步实际发生的操作或交互。用户流分析使设计人员有机会了解不同交互发生的背景。


在进行用户流分析时,建议设置一个量表,让你能够恰当地评估用户交互:

1级:与产品交互时没有重大问题;

2级:对特定产品功能有困难;

3级:大多数产品功能有困难;

4级:无法使用产品。


在此步骤结束时,你将了解产品的实际复杂级别。这些信息将帮助你在用户有效性、效率和满意度方面优化产品需求。


设计提示:使用同理心图会让你的用户流分析变得更容易。当你站在用户角度,去考虑用户在使用时的所见、所想和所感时,它可以帮助你的团队建立对用户的同理心。


04 应用迭代式原型

原型制作是一个将团队最初概念转化为实际有形的过程,例如在纸上绘制模型(低保真)或创建功能设计模型(高保真)。应用迭代原型对探索和测试非常有用,因为原型可以在产品发布前帮助收集用户丰富的反馈信息。它还允许关键的项目利益人或合作伙伴设想系统的未来样子。


虽然原型制作是通用设计过程里的重要组成部分,但最大限度地减少构建原型的所需时间也同样重要,产品设计师可以依靠UI套件来加快原型制作。


05 进行可用性测试

在这个阶段,确保你的用户不再遇到任何产品问题至关重要——可用性测试是实现这一目标的完美技术。可用性测试使可以帮助你直接观察目标用户与产品的交互。它可以是直接的(适度的可用性测试)或远程的观察。可用性测试允许设计人员从单个功能后退一步,从整体上审视产品、服务或环境。可用性测试的目的是评估你当前的设计,并明确改进的方式。


06 将用户反馈环路整合进设计过程中

通用设计需要用户的积极参与,因为你需要用户的输入让设计运行起来。这意味着你的用户时刻向你共享他们的反馈。通过反馈循环机制(例如共享产品问题、关注点和意见表单),能帮助你设计出更符合用户期望和需求的产品。


设计应吸引所有用户

通用设计期望造福任何人,因为它促进了产品的可访问和可用性。在整个设计过程中考虑所有人的需求和能力,可以创造出真正满足用户需求的产品。

文章来源:站酷   作者:UX词典

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



信息无障碍研究与应用

雪涛

互联网设计师如何着手发起无障碍优化?

信息无障碍,是指任何人在任何情况下都能平等地、方便地、无障碍地获取信息和利用信息。随着互联网覆盖越来越广,对于身体有局限的群体而言,更加迫切通过互联网获取信息,而这就需要互联网产品进行信息无障碍的优化。在我国其受益人群至少包括:8500多万残障人士,2亿多60岁以上的老年人,数量庞大。率先考虑信息无障碍能为产品增加优势而带来更多用户。


如今智能手机掀起了一场无障碍辅助工具的革命,而站在这个关键点的互联网设计师,也要开始行动起来,先从以下这几个容易实现的事情开始着手进行无障碍的优化吧。




关于读屏


对视障用户来说,是用听取读屏语音来了解你设计的界面信息的。读屏软件就像他们了解互联网世界的眼睛,它的原理是直接读出界面里的文字,如果icon按钮未加无障碍标签读屏会读为"无法发音",那么视障者就无法获取这些信息,自然也就无法使用你设计的功能。


解决的办法是:


1.需要在产品代码中添加无障碍标签(Android :contentDescription ; iOS:accessibilityLabel在对应的开发者文档里很容易找到,可以发给你合作的研发同学)。


2.装饰性icon可隐藏标签不读,提升读屏效率。不建议不做处理也不加标签,那么用户听到的就是“无标签”,这样会让用户以为这里有什么重要信息读不到而感到不安。


3.标签语义简短准确,尽可能使用动词。


4.必要时需要走查焦点顺序,确保不会被错误的焦点顺序误导页面含义。 



并且最好由设计师进行语义的标注,因为设计师才是对页面里图形应用最了解的人。避免出现“搜索”被写成“放大镜”、或者是“searchBtn_123”之类的情况。 





关于色彩


颜色可以用来区分信息数据的类别和维度,也可以帮助传达情绪等重要信息。然而,世界上有超过8%的男性和0.4%的女性都被色觉障碍的问题困扰。我们通常笼统的称这类人群为“色盲”,他们是典型的识别颜色有问题的群体。


"色彩"的目标是"易于感知",指的是互联网产品的内容信息的色彩对任何人来说,都应该拥有足够高的辨识度和舒适度,我从以下4个方向进行介绍。 

 

1.更安全的配色


a.色盲人群:


设计师在进行设计配色时应时刻自测,避免明度相似的橙黄绿两两配色和明度相似的红绿配色,因为这样的配色势必会造成色盲用户的可读性问题。并且,红色在红绿色盲眼中并不是一种明亮醒目的颜色。相反红色对他们来说显得非常深,而暗红色则几乎接近黑色。因此色盲人士很难分辨出文章内的深红色的强调字,从而遗漏关键信息(设计时,可利用此插件模拟色盲眼中的颜色:Color Oracle) 。




b.文化差异:


因为色彩在不同国家文化中代表不同含义,所以对于国际用户来说也是存在障碍的。在西方文化里,红色通常用于表示消极趋势,而绿色则表示积极趋势,但在东方文化中却正相反。


c.特殊群体:


临床医学研究表明对于部分自闭症患者来说,高饱和高对比度的颜色,甚至只是黄色都会让他们感到不舒服和不安,因此在自闭症康复中心是不会出现过于对比刺激的颜色的。


另外,老年群体随着年龄的增长,晶状体变黄变浑浊,会选择性的吸收蓝光,从而导致老年人对蓝色的鉴别能力下降明显,如果你的主流用户是老年人,请尽量避免将蓝色运用到重要的按键中去。



2.更强的文本对比度


文本对比度与可读性息息相关,它测量的文本颜色和背景色之间的明度差。WCAG AA对于文本对比度的规范是:4.5:1,若字号够大(>18pt,或粗体>14pt)时,标准可降到3:1。如果满足4.5:1这个标准会让你的页面视觉看起来不那么优雅,可以尝试局部加强可视性的方法:



关于可读性其他需要注意的点:尽量不要在图片上叠加文字,除非你能保证图片背景颜色单一且对比度足够高。



Material Design设计规范建议,需要淡淡的遮罩确保上层文字的可读性;并且不建议极高对比度的文本,因为这样会使一部分视障者看到的字旋转模糊。


 

3.更多样的视觉变量 


颜色是数据可视化中最常用的视觉变量之一。但是对于无法辨别颜色的用户,如果颜色作为的唯一的提示信息,他们可能将无法理解你传达的信息。那么有什么改善的方法呢?


a. 不让颜色成为唯一的视觉变量:除颜色外,我们可以追加图标、纹理或者文字来加以标注。



b.色盲模式:Trello作为一款工具产品,在标注信息时,提供色盲模式可打开和关闭,并用不同纹理加以区别,色盲友好模式是一个很好的范例,它可以有效帮助色盲,又不会妨碍非色盲用户。


c.以明度饱和度为度量:虽然色盲人士对色相的辨识能力较弱,但却对明度、饱和度非常敏感。我们可以使用明度或饱和度区分信息。看这个例子:传统热力图习惯用暖色代表热力高冷色代表热力低,Google Analaytics的热力图采用深蓝色显示热度高的时段、浅蓝色显示热度低的时段,简单有效。




关于控件


控件可以是按钮、链接、输入框或任何带有事件监听器的HTML元素。控件太小或彼此太靠近可能会给用户带来糟糕的体验问题。


比如对于无法用指尖定位的用户(有颤抖疾病的用户),或因年龄而导致灵活性降低的老年用户,都会难以点击过小控件。


为了给用户足够的间距来准确选择控件,Material Design建议至少48×48dp,iOS设计系统将目标热区尺寸最小值定为44 x 44pt,而WCAG对WEB的规范则建议至少44×44px。一个控件可以在视觉上是24 x 24px,但是在所有边上都会有一个额外的填充使它达到44×44px。并且太靠近的控件可能会因误点击而带来挫败感,所以同时还建议控件之间的空间足够远以减少误触。Microsoft给pc的建议是至少有8px的间距,而Material Design推荐的控件至少间隔8dp。我们可根据以上规范来审视自己设计的控件。




关于文字


1.文字大小:


有视觉障碍的用户可能会把字号调得很大。你需要保证你的设计在大字号的情况下内容不会溢出或排版错乱。做设计的时候,可以使用2倍以上的字体测试你的设计。


在互联网早期,设计了字号在9-14px之间的网页,如今已与20年前不同,浏览器已经可以在任何尺寸设备上使用,小到智能手表大到4K荧幕,我们不能再使用固定的字号来设计产品了。字号应该与设计本身一样具有响应性。例如可以允许用户自定义字号、行高或字间距等以达到舒适的阅读水平。


 

2.文字样式:


文字作为传达信息的重要载体,对于许多用户来说,装饰字体或草书字体都是比较难阅读的。且用过细的、过小的、斜体和全大写文本,也会降低识别度。




关于动效


有效的动画可以给页面带来生命感,但如果滥用动效不仅会分散用户注意力,严重的话对某些用户来说来说可能是致命的(光敏性癫痫的临床诱因之一就是闪光图像的刺激)。


1997年的一天,日本电视台正在播放《精灵宝可梦》第38集“电脑战士3D龙”,但就在这天晚上发生了600多名儿童昏倒在家中集体送医事件,轰动了动画界,任天堂的股价也随之大跌。原来,为了达到震撼效果,3D龙的背景运用了“蓝-红-蓝”的快速闪烁来表现爆炸,这样高频率的闪烁刺激了孩子们脆弱的眼睛,导致他们集体患上了急性光敏症。也因为这件事日本开始着手对动画片的制作制定规范。Twitter在2019年为了保护对闪烁图像敏感的人员安全,也采取了禁用APNG动图格式的措施。


另外WCAG 2.3.3官方说明,一些用户会因滚动页面的动效(例如缓动和视差滚动)而触发大脑前庭疾病从而产生头晕的症状,所以iOS、Mac、Windows 10都具有关闭动效的功能。


为了避免给特殊人群造成困扰,设计师在开始做动效之前,应该看看以下四条是否满足:


1.动效每秒闪动不超过3次,发生的闪光区域不超过超过25%否则,光敏癫痫患者会有发病的风险。


2.避免过于夸张的视差和运动效果,因为大脑前庭失调者会引发眩晕。


3.避免有多个元素通过不断移动、闪烁而分散注意力,因为这可能会让注意力缺陷者产生困扰 。


4.如果有上述情况,需提供一些控件或选项来暂停、隐藏或者更改任何动画或效果的频率。




结语


作为体验设计师,研究无障碍会让我们收获良多。当然,目前所做的改进并非一劳永逸,而是我们与更广范围的用户保持持续对话的开端。不断改进产品的无障碍体验,让产品更友善,让美妙的互联网的世界变得更平等,我们希望能不断向这一目标前进。


文章来源:站酷   作者:百度MEUX

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档