020-29815005
预约专线时间:09:00-23:59

10种让你的UI设计更易于访问的方法

新闻来源:本站 日期:2021-07-21
UI(用户界面)设计者的主要目标是为不管用户的功能如何,创建良好的用户体验。这一点更为重要,因为我们考虑到约2.85亿人有视力障碍,1.1亿至1.9亿成人存在严重行动困难,全球3.6亿人患有致残性听力丧失。
    身为开发者,你应该希望你的网站容易获得、容易浏览、容易理解并为所有人所提供。WWW网站的创立者TimBernersLee也重申了这一点,并表示:

    他说:“网络的力量在于普及。每个人都能接触到的东西,不管他们是否残疾。

    所以,以下10种方法可以帮助你的用户界面设计更容易获得和包容,并且确保你能为每一个人设计。

    1、使用不同的颜色和对比度。

    颜色是设计的一个重要方面。确定背景和前景之间有适当的对比,用适当的阴影来区分,强调重要信息是最容易让你的网站更容易获得的方法。

    总之,为色盲或戴眼镜的人设计和为没有这些障碍的人设计同样重要。

    您可以使用WebAIM工具的色彩对比度检查来达到色彩对比的平衡。这个工具可以让你输入一个特定的十六进制代码,或者从色轮中选择,然后通过增量调整来达到元素之间的AA(最低对比度)或AAA(增强对比度)对比度标准。

    2、使用清晰、一致的导航选项。

    导航设计也是决定网站可访问性的重要要素之一。

    保证跨页面导航在网站中具有一致的命名、风格和位置。

    向用户提供网站搜索或站点地图。

    向您提供指示提示(如面包屑和清晰的标题),帮助用户了解他们在网站或页面上的位置。


UI设计


    3、不只是用颜色来表示状态的改变。

    尽管色彩在传递信息时很有用,但它并不能成为传递信息的唯一途径。当用颜色来区分元素时,一定要提供额外的标识,而不依赖于颜色感知,以使您的设计易于访问。

    通过以下方法,您可以这样做:

    除颜色外,还用星号表示所需的表单域。

    用标签来区分图中的区域。

    增加描述文本。

    4、为键盘用户提供视觉焦点指示。

    有些用户使用Tab键在可聚焦元素(即链接、表单字段和其他任何添加到具有HTMLtabindex属性的Tab键次序之间)之间。

    然而,键盘用户通常很难知道自己在页面上的位置。所以,设计者必须始终提供清晰的指示,指明用户当前所在的页面中的哪个元素。

    尽管Web浏览器有一个默认的焦点指示符,但是它们并不那么好。所以,修改CSS悬停是个不错的主意:对于可聚焦的元素,比如链接、按钮、表单域、菜单项、widget、日程表选择器等等。(可聚焦元素几乎总是交互的。)

    高效焦点指标:

    对比度非常好。

    形状和尺寸和元素互补。

    采用互补但引人注目的配色方案。

    用于帮助用户跟踪焦点的移动。

    良好降级(在旧浏览器上可见)

    在浏览器之间是一样的。

    5.提供图片/介质选择。

    你网页上的所有媒体,不管是音频、视频还是图片,都必须有其他文字来描述其代表的信息或功能(除非图片纯粹是装饰)。

    开发者最佳实践。

    所有图片都必须有描述性的alt属性:如果图片没有alt文本,请提供一个空alt属性,而不是完全没有alt属性。说明图像对其没有任何作用。

    图像组和表现力更强的标题。

    将纯装饰图像隐藏在辅助技术中:不包含功能或信息内容的图像是装饰图像。屏幕阅读器可以以多种方式隐藏这些内容:

    alt属性为空。

    将ARIArole="presentation"使用

    用CSS背景图片。

    6、设计便于使用的形式。

    谁也不喜欢填写混乱的输入,不清楚的预期格式,神秘的错误信息,或者缺少键盘可访问性的表单。如果把它和障碍或者残障结合起来,你会遇到很多挫折。

    为确保您页面的用户不需要体验这些内容,以下是在设计可访问表单时必须考虑的事项。

    每个输入栏都应该有清晰的相关标签。总是使用标签HTML元素来代替简单的span或div元素。

    用占位符文本告诉用户输入的格式和性质。然而,不要把它作为标签的替代品,因为用户一旦输入了一些信息,占位符文本就会消失。

    一定要清楚地识别必需的和可选择的字段。

    当验证表单时,应该尽快显示错误信息,最好在客户端显示,而不要等到整个表单提交。错误信息应该尽可能的明确和明确。

    一个键盘用户应该能够通过Tab键访问表单的所有元素。Tab键顺序应该是连续的,并且对于用户应该有意义。

    7、确保交互元素容易识别。

    提供不同的风格(比如链接和按钮),以便于识别。比如,在触摸屏激活时更改鼠标悬停、键盘焦点和链接的外观。保证交互元素的样式和命名在整个网站中得到一致使用。

    8、以视觉层次组织内容。

    创建视觉层次涉及到密切关注UI元素如何在你的网页设计中定位,并且在这些相关元素间建立一致性来推动意义。

    别挤在屏幕上,否则最终会吓到用户。

    视障人士可能需要在大屏幕上放置物品,所以请让您的内容可扩展。

    呼召用语的按钮应该清晰而独特。

    在视线水平附近放置重要信息。

    用适当的标题将相关内容分组。

    利用空白和接近度使内容之间的关系更为明显。

    9、执行用户测试。

    甚至当你竭尽全力让你的网站更容易访问时,使用辅助技术的人们可能会发现某些领域并没有你期望的那么友好。

    找出并纠正这类问题的最好和最有效的方法是通过用户测试。非正式的评估对整个产品开发项目比在项目结束时进行正式的可用性测试更为有效。

    使用者测试有许多优点。关键是,您将能够理解设计的功能限制,然后根据这些限制提供解决方案。

    考试为你提供了一个机会去探索,调查,并了解人们如何处理你的设计。

    认识到无障碍并不妨碍创新。

    建立可访问性设计的最重要部分之一就是要认识到它并不妨碍创新。有限的设计并不会使你的产品变得乏味,而是让你有新的想法去探索如何为所有用户创造更好的产品。

    接受可访问性指导,如同处理任何设计限制。他们的任务之一就是要为不同的用户开发出精彩的产品。