在移动视图上使用选择列表而不是选项卡更易于导航
Posted: Sun Jan 26, 2025 10:26 am
我关注认知,因为它经常被忽视,并且影响一系列神经多样性人群,例如患有阅读障碍、注意力缺陷多动症和自闭症的人。
这些网页和表单样本表明,如果我们不考虑可访问性和可用性,设计会变得多么令人难以接受。 返回顶部
一堆设计拥挤、令人不知所措的示例网页。
页面中充斥着大量信息,但没有清晰的层次结构,很难使用。
使用 SLDS 进行神经多样性设计的五种最佳实践
如果我们可以将这种令人难以忍受的体验转变为一种非常直观、非常用户友好的东西,就像 Salesforce 能读懂我们的想法一样,那会怎样?无论您是为重点、清晰度而设计,还是只是为了让事情易于导航,这些技巧都会带来巨大的改变。
让我们深入了解使用 SLDS 进行设计的五种方法,以实现这一目标,并在此过程中为神经多样性用户提供支持:
1. 坚持一致性
品牌颜色、字体、语音和语调、字段标签、图标、流程等的使用方式很重要。务必制定规则并严格遵守。这有助于保持一致性。像 SLDS 这样的设计系统的优点在于,它考虑到了许多这些因素,因此您可以轻松应用它们。
2. 拥抱可预测的组织
可预测性并不无聊。了解预期内容可以建立熟悉度,最终帮助您更快地完成工作。需要解决的三个具体领域包括:
视觉层次。确保每页只有一个主标题 (h1),并且后续标题大小从那里开始级联 (h2、h3 等)。询问主导航中最重要的是什么;并非所有内容都应包含在顶层。如果您有非标题的文本,请使用 SLDS 提供的尺寸变量,并确保您不会弄乱阅读顺序。
视觉提示。人们习惯于熟悉的视觉提示和模式。例如,他们知道复选框往往是方形的,单选按钮是圆形的,并且流程从上到下开始。不要扰乱这种期望。还要记住:字段长度应大致与预期输入的长度相匹配;为链接加下划线;使用特定的措辞使错误和空状态清晰可见。
信息分块。如果有大量必要信息,请考虑将相关项目分组。并且,明确区分各个部分。
3. 精简:少即是多
杂乱是注意力的敌人。虽然您有许多组件选项,但这并不意味着您必须使用它们全部。例如,在通知方面,您不需要弹出多个警报横幅和模式。
神经多样性用户还需要确切地知道他们需要从哪里开始以及下一步要去哪里。渐进式披露至关重要。它允许您仅显示当前需要的输入字段并逐步触发后续字段。这有助于您一步一步地引导用户完成整个过程,并让他们保持专注。
4. 适时提供指导
使用工具提示和弹出窗口是向用户提供帮助或上下文的常用方法。您分享的信 奥地利 whatsapp 数据 应简洁明了。提供足够的上下文或支持文本。没有人需要长篇大论。此外,请确保工具提示或弹出窗口不会占据整个屏幕并阻止用户与字段交互。
5. 记住手机
确保您知道在手机上查看时组件的流动方式。例如,标签在移动设备上变成手风琴。这会改变用户与组件交互的方式,并可能引起混淆。查看 SLDS 文档以了解组件在移动视图中的呈现方式。
在此示例中,使用选择列表而不是选项卡可以更清楚地显示下一步需要做什么。返回顶部
左侧的移动屏幕显示选择列表。左侧的两个屏幕显示了使用选项卡进行选择的两步流程。
不要让用户思考太多
虽然在设计任何类型的数字体验时,考虑可访问性需求是必不可少的,但其好处惠及所有人。不要让人们想得太辛苦。一些有关组织和一致性的最佳实践将帮助您设计清晰易用的 Salesforce 组织。
这些网页和表单样本表明,如果我们不考虑可访问性和可用性,设计会变得多么令人难以接受。 返回顶部
一堆设计拥挤、令人不知所措的示例网页。
页面中充斥着大量信息,但没有清晰的层次结构,很难使用。
使用 SLDS 进行神经多样性设计的五种最佳实践
如果我们可以将这种令人难以忍受的体验转变为一种非常直观、非常用户友好的东西,就像 Salesforce 能读懂我们的想法一样,那会怎样?无论您是为重点、清晰度而设计,还是只是为了让事情易于导航,这些技巧都会带来巨大的改变。
让我们深入了解使用 SLDS 进行设计的五种方法,以实现这一目标,并在此过程中为神经多样性用户提供支持:
1. 坚持一致性
品牌颜色、字体、语音和语调、字段标签、图标、流程等的使用方式很重要。务必制定规则并严格遵守。这有助于保持一致性。像 SLDS 这样的设计系统的优点在于,它考虑到了许多这些因素,因此您可以轻松应用它们。
2. 拥抱可预测的组织
可预测性并不无聊。了解预期内容可以建立熟悉度,最终帮助您更快地完成工作。需要解决的三个具体领域包括:
视觉层次。确保每页只有一个主标题 (h1),并且后续标题大小从那里开始级联 (h2、h3 等)。询问主导航中最重要的是什么;并非所有内容都应包含在顶层。如果您有非标题的文本,请使用 SLDS 提供的尺寸变量,并确保您不会弄乱阅读顺序。
视觉提示。人们习惯于熟悉的视觉提示和模式。例如,他们知道复选框往往是方形的,单选按钮是圆形的,并且流程从上到下开始。不要扰乱这种期望。还要记住:字段长度应大致与预期输入的长度相匹配;为链接加下划线;使用特定的措辞使错误和空状态清晰可见。
信息分块。如果有大量必要信息,请考虑将相关项目分组。并且,明确区分各个部分。
3. 精简:少即是多
杂乱是注意力的敌人。虽然您有许多组件选项,但这并不意味着您必须使用它们全部。例如,在通知方面,您不需要弹出多个警报横幅和模式。
神经多样性用户还需要确切地知道他们需要从哪里开始以及下一步要去哪里。渐进式披露至关重要。它允许您仅显示当前需要的输入字段并逐步触发后续字段。这有助于您一步一步地引导用户完成整个过程,并让他们保持专注。
4. 适时提供指导
使用工具提示和弹出窗口是向用户提供帮助或上下文的常用方法。您分享的信 奥地利 whatsapp 数据 应简洁明了。提供足够的上下文或支持文本。没有人需要长篇大论。此外,请确保工具提示或弹出窗口不会占据整个屏幕并阻止用户与字段交互。
5. 记住手机
确保您知道在手机上查看时组件的流动方式。例如,标签在移动设备上变成手风琴。这会改变用户与组件交互的方式,并可能引起混淆。查看 SLDS 文档以了解组件在移动视图中的呈现方式。
在此示例中,使用选择列表而不是选项卡可以更清楚地显示下一步需要做什么。返回顶部
左侧的移动屏幕显示选择列表。左侧的两个屏幕显示了使用选项卡进行选择的两步流程。
不要让用户思考太多
虽然在设计任何类型的数字体验时,考虑可访问性需求是必不可少的,但其好处惠及所有人。不要让人们想得太辛苦。一些有关组织和一致性的最佳实践将帮助您设计清晰易用的 Salesforce 组织。