对以下设计标准的建议

项目
11/14/2024

适用于此 Power Platform Well-Architected 的体验优化清单建议：

XO:02	遵循既定标准、惯例和准则。使用常见设计模式。保持界面设计元素、术语和交互的一致性。使用一致的模式和标准，指导用户浏览界面，创造连贯的用户体验。

本指南介绍有关建立设计标准、惯例和最佳做法的建议，以开发可增强用户体验和应用程序整体成功的用户界面。应仔细考虑与标准的偏差，以避免对用户体验和应用程序可用性产生负面影响。

关键设计策略

遵循设计标准能找出设计的重要方面，有助于来减少设计过程中的决策工作。了解标准可以逐项列出并简化团队的能力以实现精心设计的用户界面。这种方法可以缩短开发周期，提高可用性并提高用户满意度，最终提高内部软件系统的生产力和有效性。

了解设计原则

对人类认知的广泛研究有助于我们对视觉设计和与数字产品互动的理解。这些知识构成许多最佳做法和标准的基础，约占最终产品的 80%。设计原则可以桥接剩余 20%，未由标准涵盖的的创意差距。熟悉这些知识可以强化开发团队在规划期间对设计注意事项的理解，进而减少对设计资源的依赖，或增进与设计资源的协作。

遵循常见的模式和隐喻

通用模式和隐喻在数字产品中被广泛认可和期待。在适当的情况下纳入这些模式可以简化用户引导和长期使用，降低培训和支持成本，并可能减少更新或重新设计的需求。这些做法涵盖了设计的各个方面，包括配置组合、浏览结构、信息层级和互动设计。

坚持标准的图示隐喻和语义颜色至关重要。图标应使用已建立的视觉效果关联来快速有效地向用户传达功能。同样，语义颜色，如红色代表错误或绿色代表成功，能提供与用户期望和心智模型一致的实时视觉效果反馈。遵循这些惯例有助于通过培养熟悉感和舒适感来减少认知负荷并提高可用性。

建立设计系统

设计系统是用于组建用户界面的可重复使用功能性构成要素的集合。它们是专门为组织设计的，因此每个元素都符合品牌的既定标准。设计系统的四个关键组件是设计标签、组件、模式库和指南。

设计标签是用户界面的基本视觉效果元素，包括色彩、排版和间距等方面。它们表示为标准格式中的变量，便于使用设计系统建立和维护应用程序。无论具体设计如何，设计标签都可以简化设计到代码的转换。例如，通过定义具有指定值、名为“原色”的标签，开发人员可以顺畅地整合设计，而不是将特定的值直接嵌入到代码中。设计标签可以与组织的风格指南保持一致，并集中管理以产生易于使用的标签。

组件代表用户界面的离散模块化单元。它充当组装应用程序编程界面的视觉效果元素。精心设计的组件具有两个关键特征：可重用性和模块化。它们应该经过策划，以确保它们在品牌生态系统中的多个应用程序中保持视觉效果一致性，进而减少每次重新建立设计的需要。单一组件应在各种上下文中顺畅服务。

Power Apps 提供了一组综合的通用组件，如按钮和下拉列表以及复合组件（如现代表）。尽可能使用这些控件来满足基本需求，然后考虑在可重复用户界面模式的间隔存在处组建复合组件。

复合组件应具有足够的通用性，可以依原样使用，也可以在不同的应用程序上下文中略有变化（通过参数），而无需进行修改。自定义组件的部分范例包括：

公司品牌的标头或页脚
屏幕大小的资源页面组件，供用户提供反馈和获取 IT 帮助
版权声明或链接等通用内容

模式库提供了一组预定义的设计模式，供制作者用作构建用户界面的起点。这些模式可作为常见设计挑战的标准化解决方案。模式库的主要目标是提供精心制作模式的集中集合，进而能够建立一致且有效的用户界面。模式库使开发人员能够使用特定的模式并遵循既定的使用指南，进而确保用户界面设计的一致性和效率。

指南为项目团队提供有关如何有效使用组件和视觉效果样式的规则和最佳做法。与注重美学的样式指南不同，设计系统指南定义了组件的功能性行为和用户互动期望。例如，如果设计系统提供了引用色彩的设计标签集，则指南应阐明使用这些色彩的时机，以及开发人员如何在 Power Apps 中访问相应的色彩。对于组件，应该有关于正确使用方式、输入和输出参数，以及组件预期状态变化的文件。

集中式设计系统工作还可以在存放库中托管通用媒体资产，例如公司标志和其他设计资产，以实现广泛的快速开发。

Microsoft 的 Fluent UI 是广泛采用的开放原始码设计系统范例。它可以成为许多 Power Apps 设计决策的有效参考，因为所有新式控件都使用 Fluent (2) 设计系统中的组件。 Fluent UI 等设计系统是大量研究和开发工作的结果，旨在创建组件以确保它们满足用户的需求。它们也设计成普遍存在，可以在各种数字产品和平台上轻松使用。每个组件都有特定指导，以确保应用程序与预期体验一致。通过查看 Fluent 2 指南来利用经过研究论证的知识。

共享以避免重复实施不仅能够提高生产效率，而且还可确保体验在一段时间保持一致。对共享元素的贡献有助于维持体验的新鲜感并反映整个组织的专业知识。目前，一致性是一个挑战，因为组件、系统、流程和文化往往不共享，不追求连贯性，并使贡献变得困难。

进行设计审查

访问用于指引用户体验设计的资源对于确保应用程序符合既定的 UI/UX 标准至关重要。集中式团队应旨在熟悉基本设计标准和最佳做法。虽然设计师通常了解用户体验，但项目经理也可以从学习这些技能中受益，进而有效地为团队做出贡献。

验证体验的最有效的方法是亲自浏览。但是，您也可以用程序设计的方式读取 Power Apps 应用程序元数据。完成此操作的方法可能包括检查应用程序是否应用了正确的主题，或者验证在旧控件中是否引用了主题令牌值。例如，如果特定文本元素必须使用某些设计令牌，则文本组件的名称可以与特定值相对应，然后该组件的属性应匹配特定的设计令牌映射。

评估特定组件类型并满足特定条件的元素数，与不符合特定条件的元素数。例如，考虑命名不正确或命名正确但不遵循属性值准则的文字组件。为了强制实施响应式配置，某些配置容器可以对应到特定的命名惯例和属性值（例如 LayoutWrap）。

满足辅助功能标准以增加用户群

结合包容性设计原则可确保产品迎合不同的观众，包括各种能力的个人。包容性设计旨在为各种能力的用户找出潜在的障碍，以在最终实施之前建立可应对挑战的产品。必须了解和讨论可能导致交互障碍的功能方面，才能有效克服这些障碍。

函数	目的
认知	我们接收、解释和处理信息的能力受到许多因素影响。这些因素包括注意力、意识、专注力、记忆力、判断力、理解力、问题解决能力和推理能力。一个人的认知会影响他们的学习方式，无论是学习如何使用新设备或在课堂上学习新信息。认知的许多层面会互相影响。
移动性	我们的各部分结构与肌肉为我们提供行动力，且它们依赖控制肌肉的大脑信号。行动力包括抓握、精细运动技能、协调、控制（自主与非自主运动）、速度、肌肉张力、耐力、姿势和暂时性损伤。行动力会受到情境、临时、渐进或永久条件的影响。
视力	我们从环境中查看和理解视觉效果信息的能力会引导思想和运动。视力会受身体和神经因素的影响。视力限制包括失明、低视能（部分视力）、视力下降、视野丧失、色盲、畏光（对光敏感），甚至明亮的阳光都会影响屏幕上文字的可读性。
听力	我们从环境中接收和理解声音的能力也会引导思想和运动。听力损失的程度范围广泛，导致日常技术使用的各种障碍。临时或情境范例包括无法播放声音的嘈杂环境或安静区域。
声音、语音和通讯	我们的沟通能力（口头或非口头）对于表达我们的需求、建立关系、向他人传达信息，以及与我们的环境互动至关重要。
感觉和知觉	感觉是我们侦测触觉或身体位置等感觉的能力。知觉是大脑处理和传达这些感觉的方式。感觉限制包括前庭疾病、慢性疼痛、皮肤完整性、感觉（超敏和减敏）和本体感觉。

访问内容的方法

用户以各种方式访问数字内容。除了鼠标和指针输入，还可能使用键盘和辅助技术，如屏幕和盲文阅读器、放大镜、字幕、语音识别和高对比度设置，所有这些都可以调整体验以满足用户的需求。

辅助工具

常用辅助工具包括：

键盘：具有视觉障碍的人使用屏幕助读程序软件与网站和应用程序互动，该软件会使用文字到语音转换技术大声朗读内容和控件，并使用键盘作为标准鼠标点击交互的替代输入。除了支持基本的键盘命令集外，屏幕助读程序还提供一组复杂的键盘命令。这些命令为用户提供一组功能强大的附加工具，可以更有效率地与用户界面进行互动。
屏幕阅读器：屏幕阅读器会将数字文字转换为合成语音和盲文输出。它们让用户能够听到内容并使用键盘浏览。这项技术让盲人或低视能的个人能够以与任何其他用户同等级的独立性和隐私来使用信息技术。有认知或学习障碍的个人，以及单纯比较喜欢音频内容而不是文字的用户也会使用屏幕阅读器。这些工具超越了网页使用，有助于浏览文件、电子表格和操作系统。
触摸：触摸目标主要针对有动作迟缓的人，他们可能在触碰屏幕时遇到问题。更具体来说，触摸旨在帮助人们限制来自意外（或未注册）触碰的虚假输入量。
动态内容：地标角色或 ARIA 标签为屏幕阅读器用户提供了立即的好处。有八个角色，每个角色代表网页上通常出现的内容区块。若要使用这些区块，请将相关角色属性新增到 HTML 中的合适容器中，使屏幕阅读器用户能够快速浏览到页面的该区段。

视觉效果样式

若要为具有不同眼视功能的用户建立包容性产品，必须考虑色彩、对比度和文字大小等视觉效果样式。这涉及确保文字与其背景（包括图像、图标和按钮上的文字）之间的足够对比度，以提升具有低对比度敏感或色盲用户的可读性。对比鲜明的内容强化了各种照明条件下的可读性，使所有用户受益。

标准表自应与背景保持至少 4.5:1 的对比度。对于较大的文字、交互式组件和数据视觉效果，与背景色的最低所需对比度为 3:1。状态指示器应有效地使用语义颜色、类型和图像来传达信息，确保所有用户都能意识到内容。请考虑支持高对比度度调色板，这会标准化调色板以显示对比度至少为 7:1 的内容，进而确保可见性和清晰度。提供深色模式可以显著提高可读性并减少眼睛疲劳。

版式

排版在确保具有不同需求之用户的可读性方面，非常关键。文字必须够大且间距足够，以适应不同的用户要求。用户应该能够调整方向和缩放等级等设置，应用程序可以相应地无缝调整其内容配置。设定完善的排版不仅有助于提升可读性，还能辅助页面方向和浏览，使低视能、认知障碍、色盲和依赖屏幕阅读器的人受益。

标题应具有大文字或粗体文字，以便快速扫描和理解，特别是对于视觉导向用户。正确应用的标题元素可确保所有用户的高效率浏览。行距和间隔会显著影响可读性：例如，过宽的行距会拉伤眼睛，而过窄的行距会扰乱节奏和理解。以一行 50 到 70 个字符和字体大小的 120% 到 145% 的行高为目标，以提高可读性。

在移动设备上，文字应可重新调整大小为最大 200%，而不会影响内容或功能。这种灵活性确保用户可以依据自己的喜好或需求调整文字大小，进而强化整体可及性。此外，用户应该能够在界面上缩放，页面布局设计为无需水平滚动即可流畅地回流内容，且缩放等级高达 400%。无论设备的屏幕大小，都确保内容可访问和可读取，有助于为所有用户提供更加用户友好的体验。

图像、图形和行动

图像和图形使内容对许多人来说，更令人愉快和更容易理解，特别是对于那些有认知和学习障碍的人。虽然图像可以作为视觉障碍者的线索，能帮助他们了解内容方向，但在网站上广泛使用可能会给用户带来重大障碍。

关于媒体内容的无障碍实践能造福盲文和屏幕阅读器用户，用户在关闭图像的情况下浏览可节省带宽以及搜索引擎爬虫的使用。它们也可以帮助听力减退或认知障碍的人。

使用替代文字让他们可以理解视觉效果内容。 Alt 属性会描述视觉效果内容，例如，下载图像时显示的文字。把替换文字调适为图像的上下文。简明扼要且富含信息（使用 150 到 250 个字符）。请记住将重复文字内容的图像标记为装饰性图像。

交互

互动是辅助功能最重视的地方。如果用户无法顺利浏览产品并完成工作，则不算真正访问该产品。高效率的键盘和触摸互动可帮助屏幕阅读器、盲文阅读器和使用键盘浏览的用户。一般互动包括：

导航：辅助技术用户通过 Tab 键、搜索以及（如果是屏幕阅读器）使用标题和链接清单来浏览网页。使用地标、标题和快捷方式（如跳到主要内容）来确保高效率的键盘浏览。
超链接：让超链接在上下文中清晰、简洁和有意义可提高超链接的可用性和可及性。应用足够的颜色对比度，并在视觉效果上与其他内容区分开来。
表：仅依靠视觉效果提示不足以创建可访问的表格。结构性标记让辅助技术可以识别标头和数据单元格。
窗体：用于各种 web 互动的输入字段，对于使用屏幕阅读器或键盘的个人通常会引起辅助功能问题。
焦点：焦点可见性通过以可视方式指示与下一个元素交互的元素，帮助依赖键盘的用户导航页面。有时需要以程序设计方式移动焦点或将焦点限制在特定区域以优化体验。
状态变更：指定任何状态变更和公告的文字。传达错误状态并指导用户完成错误恢复（如缺少信息或系统问题）至关重要。

Power Platform 便利化

新式控件在画布应用程序和模型驱动应用程序都可以使用。

画布应用程序支持新式主题，允许您在应用程序中的所有控件上实现一致的品牌调色盘。模型驱动应用程序支持主题来修改基本品牌元素，如应用程序标头色彩、链接和一些窗体图标。

可重复使用的解决方案感知组件以多种形式提供，适用于各种应用程序类型。自定义画布程序组件可用于画布应用程序或自定义页面，并使用低程序代码组建。 Power Apps Component Framework 可用来执行画布应用程序、模型驱动应用程序，和 Power Pages 的程序代码组件。

画布应用程序支持对应到特定辅助技术功能的辅助属性。使用工作室内工具来验证辅助功能合规性。

虽然无需配置即可访问模型驱动的应用程序，但请确保能够访问添加到应用程序的所有 Web 资源。内嵌的画布体验（包括自定义页面）必须手动配置，以符合辅助工具标准。

模型驱动应用提供内置的标准键盘快捷方式以供浏览表单和视图使用。

画布应用程序需要程序代码组件来启用键盘快捷方式，这可以使用 Creator Kit 的键盘快捷方式进行设定。

通过