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上),应用程序自动包含与平台辅助技术良好配合所需的标记和代码。满足每个平台的可访问性标准并支持其辅助技术(包括快捷方式和结构)可以为用户提供高效的体验。

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

简单了解Stable Diffusion里面sampling methods(采样方法)每种方法的效果

在 Stable Diffusion 模型中,采样方法(Sampling Methods)是指在生成图像时用于从模型的概率分布中抽取样本的算法。这些方法对于生成图像的质量、多样性和速度都有重要影响,以下是一些 Stable Diffusion 中常见的采样方法。 那么…

STM32day2

1.思维导图 个人暂时的学后感,不一定对,没什么东西,为做项目奔波中。。。1.使用ADC采样光敏电阻数值,如何根据这个数值调节LED灯亮度。 while (1){/* USER CODE END WHILE *//* USER CODE BEGIN 3 */adc_val HAL_ADC_GetValue(&a…

2575. 找出字符串的可整除数组(Go语言)

https://leetcode.cn/problems/find-the-divisibility-array-of-a-string/ 在看题解之前,我的代码是以下这样: package mainimport ("fmt" )func main() {fmt.Println(divisibilityArray("998244353", 3)) }func divisibilityArray…

基于LSTM实现春联上联对下联

按照阿光的项目做出了学习笔记,pytorch深度学习实战项目100例 基于LSTM实现春联上联对下联 基于LSTM(长短期记忆网络)实现春联上联对下联是一种有趣且具有挑战性的任务,它涉及到自然语言处理(NLP)中的序列…

【嵌入式】嵌入式系统稳定性建设:静态代码扫描的稳定性提升术

1. 概述 在嵌入式系统开发过程中,代码的稳定性和可靠性至关重要。静态代码扫描工具作为一种自动化的代码质量检查手段,能够帮助开发者在编译前发现潜在的缺陷和错误,从而增强系统的稳定性。本文将介绍如何在嵌入式C/C开发中使用静态代码扫描…

【数据结构】栈和队列的应用——括号匹配 + 表达式求值 + 表达式转换 +栈的递归应用+队列在计算机系统中的应用

文章目录 3.栈的应用3.1 括号匹配问题3.2 表达式求值3.2.1 三种算术表达式3.2.2 后缀表达式A.中缀转后缀B.后缀表达式的计算 3.2.3 前缀表达式A.中缀转前缀B.前缀表达式的计算 3.2.4 中缀表达式的求值 3.3 递归中栈的应用 4.队列的应用 栈基础知识:【数据结构】栈 顺…

react tab选项卡吸顶实现

react tab选项卡吸顶实现,直接上代码(代码有注释) tsx代码 /* eslint-disable react-hooks/exhaustive-deps */ import React, { useEffect, useState } from "react"; import DocumentTitle from react-document-title import s…

python界面开发 - Menu (popupmenu) 右键菜单

文章目录 1. python图形界面开发1.1. Python图形界面开发——Tkinter1.2. Python图形界面开发——PyQt1.3. Python图形界面开发——wxPython1.4. Python图形界面开发—— PyGTK:基于GTK1.5. Python图形界面开发—— Kivy1.6. Python图形界面开发——可视化工具1.7. …

交友盲盒系统PHP开源的盲盒源码

源码介绍: 交友盲盒系统是一款基于PHP开发的开源免费盲盒系统,旨在为用户提供一个充满乐趣和惊喜的社交体验。该系统具有丰富的功能和灵活的扩展性,可以轻松地满足各种线上交友、抽奖活动等场景的需求。 安装说明: PHP版本&…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:CheckboxGroup)

多选框群组,用于控制多选框全选或者不全选状态。 说明: 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 子组件 无 接口 CheckboxGroup(options?: CheckboxGroupOptions) 创建多选框群组…

以人为本的AI技术升级

我们需要以人为本的技术来提高生产力和投资回报率。 通过在数据标注流程中融合机器学习辅助技术,可以减少数据标注所需的时间、资金和人力。 有很多方法可以防止标注员被模型的预测误导。 在传统的机器学习(Machine Learning)方法下&#…

阿珊比较Vue和React:两大前端框架的较量

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…

【HarmonyOS】ArkTS-箭头函数

箭头函数 箭头函数是 比普通函数 更简洁 的一种函数写法 () > {}() > {// 函数体 }let 函数名 () > {// 函数体 }let 函数名 () > {// 函数体 } 函数名(实参1, 实参2)let 函数名 (形参1: 类型, 形参2: 类型) > {// 函数体 } 函数名(实参1, 实参2)let 函数名 …

99.qt qml-单例程序实现

在之前讲过: 58.qt quick-qml系统托盘实现https://nuoqian.blog.csdn.net/article/details/121855993 由于,该示例只是简单讲解了系统托盘实现,并没有实现单例程序,所以多次打开后就会出现多个exe出现的可能,本章出一章QML单例程序实现, 多次打开始终只显示出第一个打开…

1.5如何缓解图像分类任务中训练数据不足带来的问题?

1.5 图像数据不足时的处理方法 场景描述 在机器学习中,绝大部分模型都需要大量的数据进行训练和学习(包括有监督学习和无监督学习),然而在实际应用中经常会遇到训练数据不足的问题。 比如图像分类,作为计算机视觉最基本的任务之一&#xff0…

Bytebase 签约合思,覆盖多云数据库变更发布,数据访问控制,安全治理的全生命周期,确保符合合规审计要求

在数字化快速发展时代,有效的规范数据库管理对企业安全运营至关重要。近日,数据库 DevOps 团队协同管理工具 Bytebase 签约费控领域领军企业合思,旨在全面优化数据库操作管理,收口全体员工的变更和查询操作,以提高整体…

基于Nodejs使用Playwright时的一款VSCode插件

上一篇文章讲解了Playwright框架(基于nodejs,使用playwright对网站进行爬虫),并基于Nodejs进行了网站爬虫。这篇文章,我们来讲一个选择Nodejs的原因:vscode中的浏览器模拟插件 vscode中的浏览器模拟插件 P…

vue2【详解】生命周期(含父子组件的生命周期顺序)

1——beforeCreate:在内存中创建出vue实例,数据观测 (data observer) 和 event/watcher 事件配置还没调用(data 和 methods 属性还没初始化) 【执行数据观测 (data observer) 和 event/watcher 事件配置】 2——created&#xf…

微信小程序开发系列(二十二)·wxml语法·双向数据绑定model:的用法

目录 1. 单向数据绑定 2. 双向数据绑定 3. 代码 在 WXML 中&#xff0c;普通属性的绑定是单向的&#xff0c;例如&#xff1a;<input value"((value))"/> 如果希望用户输入数据的同时改变 data 中的数据&#xff0c;可以借助简易双向绑定机制。在对应属性…

项目解决方案:视频监控接入和录像系统设计方案(上)

目 录 1.概述 2. 建设目标及需求 2.1建设总目标 2.2 需求描述 2.3 需求分析 3.设计依据与设计原则 3.1设计依据 3.2 设计原则 &#xff08;1&#xff09;、先进性与适用性 &#xff08;2&#xff09;、经济性与实用性 &#xff08;3&#xff09;、可靠性与…