UI学习 一

教程:Accessibility – Material Design 3

需要科学上网,否则图片显示不出来。设计教程没有图片说明,不容易理解。

优化UI方向

  1. 清晰可见的元素
  2. 足够的对比度和尺寸
  3. 重要性的明确等级
  4. 一眼就能辨别的关键信息

传达某一事物的相对重要性

  1. 将重要的操作放在屏幕的顶部或底部(通过快捷键可以到达)
  2. 将相似层次结构的相关项彼此相邻放置

内容层次

        显示内容需按照正确的阅读顺序。从左至右,从上到下。

一、版式和排版

     1.1 app接触和指针目标大小

  1. 无背景内部 : 宽:24dp;高::24dp
  2. 有背景内部:宽:40dp;高:40dp
  3. 外部包含大小:宽: 48dp;高:48dp

        解释:对于大多数平台,考虑制作至少48 x 48dp的触摸目标。无论屏幕大小如何,这种尺寸的触摸目标的物理尺寸约为9毫米。触摸屏元件的推荐目标尺寸为7-10mm。使用更大的触摸目标来容纳更大范围的用户可能是合适的。

1.2 指针目标大小

包含区域大小: 宽:44dp;高:44dp。

解释:指针目标类似于触摸目标,但由鼠标或触控笔等运动跟踪指针设备实现。

1.3 目标间距

间隔8dp。

解释:在大多数情况下,以8dp或更多空间分隔的目标可以促进信息密度和可用性的平衡。

1.4 焦点

有利于确定焦点和动作的方面:

  1. 元素获得焦点的顺序
  2. 元素分组的方式
  3. 当焦点中的元素消失时,焦点在哪里移动
  4. 重点可以通过视觉指标和可访问性文本的组合来表达

1.5 分组

信息根据内容相关的亲密性分组。比如内容相近的分为一组。

1.6 用户体验

用户操作时,允许在操作被中断后恢复到先前聚焦的元素。

二 、文本

2.1 辅助文本

辅助文本是指屏幕阅读器辅助软件使用的文本。屏幕阅读器大声读出屏幕上的文本和元素(如按钮),包括可见和不可见的替代文本。

就是页面正常显示的文字。

2.2 替代文本

短标签文字,类似标题文字,或弹出的alert信息等。

说明性质的文字很重要,因为图像加载失败时能起到说明作用。

2.3 标题、相关文本和嵌入文本

图像内部或图像周围的文本应该考虑可访问性,因为它呈现了关于图像的关键信息。

 1、图片     2、标题    3、相关文本

相关文本和标题需要分组。分组的组间隔高度需大于行高。

2.3.1 标题

标题是出现在资产下面的文本。它们解释了资产的上下文信息——谁、什么、何时、何地。视力正常的用户和屏幕阅读器用户都依赖字幕来描述资产。

对于较长的描述,请使用标题而不是替代文本,因为它们对所有用户可用,并且替代文本限制为125个字符。

2.3.2 嵌入图片的文字

屏幕阅读器无法读取嵌入在图像中的文本。如果图像中有作为文本嵌入的重要信息,则应将这些重要信息包含在所有文本中。

2.4 基本要素和非基本要素

信息图像有必要和非必要的元素。重要信息的大文本的颜色对比度应为3:1,小文本的颜色对比度应为4.5:1。

  1. 重要元素:文本符合所有对比度和大小要求
  2. 重要元素:遵循颜色对比准则的说明的说明性视觉表示
  3. 非重要元素:装饰元素为插图创造了背景和个性。它们不传递信息,也不需要满足对比要求。

根据自己的理解,重要信息需要显示突出,并有引导作用。非重要元素则不用突出。

重要信息中,小文本的颜色要比大文本重。

重要信息大文本颜色和非重要信息颜色比重为3:1,重要信息小文本颜色和非重要信息颜色比重为4.5:1。

三 实现可访问性

通过使用标准的平台控件和语义HTML(在web上),应用程序自动包含与平台辅助技术良好配合所需的标记和代码。满足每个平台的可访问性标准并支持其辅助技术(包括快捷方式和结构)可以为用户提供高效的体验。

尽量使用原生控件显示。非原生的空间需要测试。

注:以上内容都是使用机翻,仅凭个人理解。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/273884.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AI会砸了我们的饭碗?

Sora,由OpenAI推出,是一款创新的文本到视频生成模型。它能够将文本描述转化为引人入胜的高清视频片段。采用了扩散模型和变换器架构,Sora实现了高效的训练。其方法包括统一表示法、基于补丁的表示法、视频压缩网络和扩散变换器。 Sora具备多种…

就业班 2401--3.11 Linux Day15--ftp数据传输测试server和client+谷歌验证码登录远程连接

文件服务器 路漫漫其修远兮,吾将上下而求索.构建NFS远程共享存储 一、NFS介绍 文件系统级别共享(是NAS存储) --------- 已经做好了格式化,可以直接用。 速度慢比如:nfs,sambaNFS NFS:Networ…

硬件工程师面试题梳理-百度硬件面试题

硬件工程师基本职责 在公司里面,硬件工程师的主要职责包括设计、开发和测试硬件系统,以满足产品需求和性能要求。他们负责确保硬件系统的可靠性、稳定性和可维护性,并与软件工程师和其他团队成员合作,以确保硬件和软件的协同工作…

网络攻防中nginx安全配置,让木马上传后不能执行、让木马执行后看不到非网站目录文件、命令执行后权限不能过高

网络攻防中nginx安全配置,让木马上传后不能执行、让木马执行后看不到非网站目录文件、命令执行后权限不能过高。 0x01 Nginx介绍 nginx本身不能处理PHP,它只是个web服务器,当接收到请求后,如果是php请求,则发给php解释器处理,并把结果返回给客户端。nginx一般是把请求发…

【SpringCloud微服务实战03】Nacos 注册中心

一、Nacos安装 官方文档安装Nacos教程:Nacos 快速开始 这里安装的是1.4.7版本,安装之后访问http://127.0.0.1:8848/nacos 管理界面如下:(用户名:nacos,密码:nacos) 二、Nacos服务注册和发现 1、在父工程中配置文件pom.xml 中添加spring-cloud-alilbaba的管理依赖:…

web基础05-jQuery

目录 一、jQuery 1.概述 2.原生js与jQuery对比 3.特点 4.使用 (1)入口函数 (2)语法 (3)jQuery选择器 5.方法 (1)获取属性值: (2)删除属…

校园外卖创业中的信息差,了解这些创业不迷路

外卖已经成为大学生日常生活的重要组成部分,但大部分高校对外卖都有着严格的管理,外卖取餐不便、配送时间过长、拿错餐等问题频出,基于此校园外卖创业成了高校市场的热门项目。 本文就校园外卖创业中存在的信息差展开分析,帮你理…

【MySQL】-知识点整理

1、存储引擎 -- 查询数据库支持的存储引擎 show engines; -- 查询当前数据库使用的存储引擎 show variables like %storage_engines%; 主要的存储引擎说明: 1)MyISAM:无外键、表锁、所有索引都是非聚簇索引、无事务、记录表总条数、删除表…

Linux最小系统安装无法查看IP地址

1,出现原因 服务器重启完成之后,我们可以通过linux的指令 ip addr 来查询Linux系统的IP地址,具体信息如下: 从图中我们可以看到,并没有获取到linux系统的IP地址,这是为什么呢?这是由于启动服务器时未加载网…

【MySQL系列 05】Schema 与数据类型优化

良好的数据库 schema 设计和合理的数据类型选择是 SQL 获得高性能的基石。 一、选择优化的数据类型 MySQL 支持的数据类型非常多,选择正确的数据类型对于获得高性能至关重要。不管存储哪种类型的数据,下面几个简单的原则都有助于做出更好的选择。 1. …

数据通信练习题

1.0osi七层模型 应用层 data 表示层 会话层 传输层 数据段 防火墙,端口(TCP UDP) 网络层 数据包 路由器 数据链路层 数据帧 交换机 物理层 比特流 网卡 2.IP地址分类 私有地址 A类 0--127 10.0.0.0…

提升日志管理效率:掌握CKA认证中的边车容器技巧

往期精彩文章 : 提升CKA考试胜算:一文带你全面了解RBAC权限控制!揭秘高效运维:如何用kubectl top命令实时监控K8s资源使用情况?CKA认证必备:掌握k8s网络策略的关键要点提高CKA认证成功率,CKA真题中的节点维…

C++字符串操作【超详细】

零.前言 本文将重点围绕C的字符串来展开描述。 其中,对于C/C中字符串的一些区别也做出了回答,并对于C的(string库)进行了讲解,最后我们给出字符串的不同表达形式。 开发环境: VS2022 一.字符串常量跟字…

光伏数字化管理平台:驱动绿色能源革命的智能化引擎

随着全球对可再生能源需求的不断增长,光伏产业已经成为推动绿色能源革命的重要力量。在这个背景下,光伏数字化管理平台应运而生,以其强大的数据处理、实时监控和智能优化功能,为光伏电站的运营管理和维护带来了革命性的变革。 光伏…

如何正确选择国外服务器的带宽和线路呢?

国外大带宽服务器是一种提供高带宽、高速网络连接和良好稳定性的服务器,但在中国使用这类服务器可能涉及到违反法律法规的风险。因此我无法为你提供相关帮助。接下来和源库一起了解如何正确选择国外服务器的带宽和线路呢? 考虑目标用户的地理位置。如果目标用户主要…

SpringBoot注解--08--注解@JsonInclude

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 JsonInclude注解是jackSon中最常用的注解之一,是为实体类在接口序列化返回值时增加规则的注解 1.JsonInclude用法2.JsonInclude注解中的规则有 案例需求…

WordPress供求插件API文档:用户登录

该文档为WordPress供求插件文档,详情请查看 WordPress供求插件:一款专注于同城生活信息发布的插件-CSDN博客文章浏览阅读67次。WordPress供求插件:sliver-urban-life 是一款专注于提供同城生活信息发布与查看的插件,该插件可以实…

PyCM:Python中的混淆矩阵库

PyCM:Python中的混淆矩阵库 在机器学习和数据科学领域,评估模型的性能是至关重要的。混淆矩阵是一种常用的评估工具,用于可视化和量化分类模型的预测结果。PyCM是一个开源的Python库,提供了丰富的功能来计算和分析混淆矩阵。本文将…

2024 PhpStorm激活,分享几个PhpStorm激活的方案

文章目录 PhpStorm 公司简介我这边使用PhpStorm的理由PhpStorm 2023.3 最新变化AI Assistant 预览阶段结束 正式版基于 LLM 的代码补全测试代码生成编辑器内代码生成控制台中基于 AI 的错误解释 Pest 更新PHP 8.3 支持#[\Override] 特性新的 json_validate() 函数类型化类常量弃…

HubSpot和NETFARMER是什么关系?

HubSpot和NETFARMER之间的关系是合作伙伴关系,特别是在亚太地区。NETFARMER作为HubSpot的合作伙伴,专注于帮助企业在海外市场获得更多客户,实现业务增长和成功。 NETFARMER具备丰富的经验和专业的营销团队,他们深入了解亚太地区各…