恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反??!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
【蓝湖有方】长辈模式来了,请收下这份无障碍 UI 设计指南!
0.4°
原创文章 / 经验/观点 / / 举报
123 1 0 0

2021-08-12

本期【蓝湖有方】将为大家总结无障碍的 UI 视觉设计指南,通过学习这份指南,让每一位用户都能得到最适合自己的产品使用体验。

三孩生育政策的出台,反映出我国人口老龄化加剧,老年人已成为互联网产品的使用主力之一。为了让老年人无障碍的使用产品,支付宝等产品推出了「长辈模式」,打造更适合他们的产品体验。

支付宝的「长辈模式」满足“无障碍设计”需求,本期【蓝湖有方】将为大家总结无障碍的 UI 视觉设计指南,通过学习这份指南,让每一位用户都能得到最适合自己的产品使用体验。


无障碍 UI 设计指南

背景

在世界范围内,约有 15% 左右的人身体机能有不同程度的缺陷,其中包括视力、听力、行动和认知障碍?;チ犯姓霞袄夏耆耸看蛟煳拚习?UI 视觉,必不可少。人最常见的机能缺陷包含以下四种类型:

视觉障碍

听觉障碍

行动障碍

认知障碍

为了应对以上四种常见的机能缺陷,帮助我们的用户更好、更轻松的使用产品,产品的视觉需要遵循以下几点要求:

更易被感知

更易被使用

更易被理解

遵循以上几点要求的无障碍设计产品,不仅能给残障和老年人士带来更佳体验的同时,还能帮助普通人更好的使用产品。比如:在夜间人的视力下降,此时,无障碍设计能帮助人在昏暗的环境更容易的识别文字和按钮。

指南

1.更易识别的色彩

色彩是设计的重要组成元素,可以帮助用户区分信息的类别,以及传达情绪,要做到容易被用户感知和识别。每个人的视觉灵敏度不同,产品的 UI 视觉配色要做到让每一个人都感到舒适,需要做到选色因人制宜。

一些特殊群体对颜色的感知状态与普通人有区别,在为他们打造使用无障碍的产品,UI 设计的配色要选择易于被特殊群体识别的色彩。

随着年龄的增长,老年人的视力下降,晶状体变得浑浊,对蓝色的识别能力变差。因此,如果老年人是你负责产品的主要用户群,要尽量避免在 UI 设计中的重要按钮上使用蓝色。

对于红绿色盲患者而言,红色看起来不显眼,因此在为红绿色盲患者打造互联网产品的 UI 界面时,要谨慎使用红色,例如:警告按钮,可取用黄色,更易被色盲患者识别。

还需注意的是,突出重点信息时,不能仅靠颜色来区分,可以增加文字或者符号来补充说明。比如:密码输入错误的时候,密码输入框显示为红色,红绿色盲难以发现,此时在密码输入框后添加一个表达“错误”的 Icon,即可解决此问题。

2.更易阅读的字体

文字是人阅读的重要工具,人们在使用互联网产品的重要元素,在设计时要保证易读性,才能让用户的体验更好。

选择易于阅读的字体

市面上有各种各样的字体,但只有少部分适合互联网产品使用。在互联网行业,无衬线字体因为其轮廓清晰、易于阅读的特征,被广泛应用。比如苹方简体、思源黑体、微软雅黑等字体。

文字和背景的配色保持高对比度

选对字体是成功的第一步,选对颜色才能走向成功。如果文字的颜色和背景的颜色对比度低,不仅有视觉障碍的用户难以识别文字,在昏暗的环境下普通人也会受到影响。因此,UI 界面的文字和背景的配色要保持高对比度,便于用户识别。研究表明:

文字颜色和背景色的对比度不小于 4.5:1,才能更好的满足无障碍设计需求。

如果文字的字号大,文字颜色和背景色的对比度不小于 3:1,才能更好的满足无障碍设计需求。

最后,尽量避免将文字放置在图片背景下,图片中信息多,干扰元素多,会影响用户阅读。

3.更简单的设计

设计师想象力丰富,常?;峤醋饔瓜衷谏杓浦?,UI 设计的文字和颜色需要遵守严格的标准,因此很多设计师朋友会将心思花在 Icon 和动效设计上,但有时一不小心用力过猛,花了巧妙心思的设计反而给用户使用产品带来了干扰。打造无障碍 UI 视觉设计,很多时候简单比复杂更好,当然,简单≠无思考,简单更需要下功夫,才能更好的表达产品的用心。

Icon 图标的设计

图标的功能是,用最简单的符号帮助用户更好的识别产品。因此,产品使用的图标最好是简单、普遍、具有高辨识度,才能让每一个用户在看到它时,就清楚的知道图标所携带的功能是什么。

但是,虽然一些普遍性的图片,大众一看便知其含义,但对于入网较晚的老年人来说,他们却不一定清楚的了解其中的含义。在这种情况下,解决办法是:

在简单的图标旁辅以文字说明图标含义;

文字替换图标,传达功能的含义。

以上两种方法都能帮助用户更好的识别产品的功能,是否需要采取以上措施,设计前的调研非常重要且必不可少。除此之外,要确??傻慊鞯耐急曜愎淮螅ǘ越窍叱ざ戎辽?1mm),并且与其他元素之间距离要足够大(至少2mm)。


动效的设计

UI 界面在合适的动效加成下,会更加的生动。但任何事都有两面性,动效好用但不能滥用,不合理的动效不仅不能让产品变得更高级,反而会严重影响用户对产品的使用体验。因此,无障碍 UI 界面中的动效设计要满足以下两个要求:

动效的闪烁频次不能过高,且发光区域小于页面的 25%;

减少过分夸张的运动效果,用户在使用产品时可能会因此分散注意力;

相信看完这篇无障碍设计指南,你肯定对 UI 设计和用户体验有了更深刻的理解。要做好设计,就要了解你的每一个用户,为其创造最适合他的“无障碍”的产品体验。

你还想了解哪方面的设计知识,欢迎在评论区留言,我们下期【蓝湖有方】再见

Powered by Froala Editor

收藏

1人已收藏

蓝湖产品设计协作

LanhuApp.com 支持自动标注的产品设计协作平台

  • 147

    作品

  • 1969

    粉丝

  • 3

    关注

  • 【蓝湖大咖访谈】美图黄毅:用户体验设计的分析与思考
  • 【大咖访谈】高途徐伟伟:让自己发光 —— 设计师核心能力进阶
  • 【蓝湖大咖访谈】豆瓣阅读设计总监Tifa:设计的精神角落
  • 【蓝湖大咖访谈】猎聘高级设计总监柴林:设计师职业现状

猜你喜欢

    蓝湖产品设计协作

    蓝湖产品设计协作

    LanhuApp.com 支持自动标注的产品设计协作平台

    身经百战助人为乐小有名气首页达人一鸣惊人
    • 1969

      粉丝

    • 450.5

      人气

    • 9446

      颜值

    作品

      最新推荐

      UI网格最佳实践

      44 0 0

      相关佳作
      换一换

        蓝湖产品设计协作

        点赞:0

        收藏:1

        评论:0

        【蓝湖有方】长辈模式来了,请收下这份无障碍 UI 设计指南!

        你确定要举报【蓝湖有方】长辈模式来了,请收下这份无障碍 UI 设计指南!?

        如果查出恶意举报,十天内禁止提交任何举报申请。

        0/200

        上传证据: 超过10M的附件请使用网盘地址

        点击上传附件

        对谁可见:

        全部设计师
        • 全部设计师
        • 推荐设计师和认证设计师

        您确认要推荐?

        该作品发布时间:2021年08月12日

        评分

        完整度

        启发性

        勤奋性

        排版布局

        推荐心得

        建议20-200字以内

        0/200

        账号或密码错误,请重新输入

        账号或密码错误,请重新输入

        登录

        账号或密码错误

        发送验证码 120s 验证码错误

        登录
        全网福利资源合集搜索处解压码