有关优化用户感知和美学的建议
适用于此 Power Platform Well-Architected 的体验优化清单建议：
| XO:07 | 将经典设计原则应用于可视元素，如颜色方案、排版和布局。 致力于具有集中性、平衡性且直观的视觉对象层次结构，以指导用户注意重要的元素和操作。 |
|---|
本指南介绍有关影响用户感知的通用视觉对象设计模式的建议，这些模式可显著影响应用程序的满意度和采用率。 视觉对象元素充当用于创建体验的基础构建基块。 通过应用与人类自然感知和处理信息的方式相一致的视觉对象原则，可提供结构化方法来帮助选择和排列视觉对象元素，从而创建有效且具有吸引力的应用程序。
关键设计策略
对视觉对象设计的人类感知的广泛研究表明，用户不会孤立地查看视觉对象元素。 相反，他们感知视觉对象元素与其他元素的关系，以及显示它们的上下文。 这些关系影响用户感知，将注意力吸引到特定领域，引发情感，帮助理解，增强美学，并加强品牌标识。 仔细选择和排列视觉元素可以创造引人入胜、令人难忘且有效的用户体验，并与目标访问群体产生共鸣。
美即适用效应
美即适用效应是指人们倾向于认为有吸引力的产品更有用。 用户在大约 50 毫秒内形成关于应用程序的初步意见。 这种第一印象受到各种因素的影响，包括结构、颜色、间距、对称、文字数量和字体。 积极的第一印象可以提高总体用户满意度。 研究表明，当用户发现界面在视觉上具有吸引力时，他们对于较小的可用性问题更具包容性。 此外，设计质量可以作为可信度的一个指标。
平衡和重量
视觉对象平衡是视觉感知中的一种平衡与和谐的感觉。 它通过减少认知压力，帮助用户更有效地处理和组织视觉对象信息。 平衡构图通常被认为更令人愉悦，更容易理解，允许用户有效地集中注意力，更轻松地导航视觉对象刺激。 视觉对象平衡的此认知方面强调了它在促进清晰通信和增强整体用户体验方面的重要性。
当所有元素都处于光学平衡时，构图就是平衡的。 通常，数学位置需要调整。 影响视觉对象重量的一些元素包括大小、颜色、密度、空白。
大小： 较大的元素往往比较小的元素具有更高的视觉对象重量。 为了达到平衡，可以通过将较大的元素与较小的元素分组在一起或调整它们在布局中的位置来平衡它们。
颜色：明亮或强烈的颜色比柔和或中性的颜色更具吸引力，并且显得更沉重。 平衡颜色包括将它们均匀地分布在整个界面上，或者使用互补颜色来创造视觉上的和谐。
密度：元素的密度是指它们在给定空间内排列的紧密程度。 平衡密度包括确保元素均匀地分布在整个界面中，以避免过度拥挤或区域稀疏。
空白：也称为负空间，这是指元素之间的空白区域。 空间有助于创造视觉呼吸空间，并可以通过突出和强调某些元素来平衡构图。
平衡的构图是元素之间视觉力量的总和。
平衡布局是最困难的任务之一，因为它不容易测量。
Color
色相、色彩、阴影和色调可以传达意义、唤起情感、创造美感。 颜色在引导用户浏览方向、建立层次结构、传递信息和增强可用性等方面发挥着至关重要的作用。 有多种原因说明 UI 中周全的颜色设计会影响用户想要的方式：
注意力和感知。 某些颜色比其他颜色更引人注目，设计师可以将观众的注意力集中在特定的元素上。 颜色对比度可以增强可读性并区分不同的组件，有助于信息的快速处理。
情绪响应。 颜色具有唤起情感和情绪的心理联想。 红色和橙色等暖色可以营造出活力和兴奋的感觉，而蓝色和绿色等冷色可以唤起平静和宁静的感觉。 您可以引发所需的响应，以影响用户获得预期体验。
品牌标识。 在品牌材料中使用一致的颜色有助于建立强大的视觉对象标识，并培养品牌知名度。 用户通常将特定颜色与特定品牌联系起来，并将他们的体验与品牌忠诚度和信任联系起来。
视觉对象层次结构。 颜色可用于建立视觉对象层次结构和组织信息。 根据不同元素的重要性或类别为其指定不同的颜色，以创建清晰的层次结构，便于导航和理解。
邻近性
放置位置更近的项目似乎更相关。 安排元素时，请确保紧密相关元素和未相关元素之间的间隔存在明显的区别。
格式塔原则表明，视觉对象元素之间的空间距离会影响它们在心理上的感知和组织方式，并强调了其在促进有效处理和理解视觉对象刺激方面的重要性。
将功能类似或属于同一层次结构类别的相关元素分组在一起。 例如，在下拉菜单中执行类似操作或选项的按钮应该紧密地分组在一起，以表明它们之间的关联。 在导航栏中，间隔较近的菜单项表示一组相关的选项，而菜单类别之间的较大差距在视觉上区分它们。 相关窗体项应组合在一起，如“地址”节中的地址字段。
通过调整段落、句子和字词之间的间距，增强文本密集型界面的可读性。 较小的段落间距表示思想的逻辑连接或延续，而较大的间距表示内容的过渡或中断。 此技术促进了对文本信息的有效理解。
确保相关元素和不相关元素之间的间距有明显区别，以防混淆。 间距渐变可以帮助根据元素大小一致地确定所需的适当间距。
左边的圆与三角形的关系比与另一个圆的关系更密切。
段落之间的间距小于章节之间的间距。
连续性
在一条直线或曲线上排列的元素被认为比不在直线或曲线上的元素更相关。
沿一条直接或曲线排列界面元素（例如导航菜单或流程中的步骤），以暗示序列或进展。 此布局可帮助用户感知元素之间的关系，并理解信息或操作的逻辑流。
沿一条直线放置相关元素（例如复选框或单选选项）或列表中的项目（项目符号），以直观地将它们分组在一起。 这种排列方式向用户表明，这些元素具有共同的目的或属于同一类别，便于导航和理解。 如果外观相似的项目进一步向内缩进，则项目的位置与视觉对象层次结构中较低的位置相关。
使用直线或曲线来引导用户的浏览方向，并通过界面创建视觉对象路径。 例如，箭头可以将用户的视线从内容的一个部分引导到另一个部分，指示连接或进展。 此技术可帮助用户更直观地导航界面，并鼓励用户进行探索。
沿突出的直线排列关键界面元素（例如行动号召按钮或重要信息），以吸引用户的注意力并创建焦点。 例如，Fluent MessageBar 模式通常显示为整个内容区域中突出的平衡消息，消息位于左侧，行动号召按钮位于右侧。 此布局策略突出显示这些元素并强调它们的重要性，从而增加交互的可能性。
对于我们的感知来说，曲线/线条比颜色更强烈。
向导使用连续性向用户显示步骤已连接，而不会让他们被太多信息淹没。
结束语
人类的大脑倾向于看到完整的形式，识别单个（熟悉）模式，而不是单独的对象，即使缺失一些信息也是如此。
确保设计元素（例如形状、颜色和大小）的视觉一致性，以帮助用户了解他们应该期望的模式，即使它们在不同的上下文中呈现。
使用简单熟悉的图标或符号，允许用户根据他们以前的经验填写缺失的信息。 例如，放大镜图标通常与搜索功能相关联，即使没有附加文本。
逐步向用户呈现信息（也称为渐进式披露）。 允许用户在与界面交互时填写缺失的详细信息，从而避免过多的信息让用户不堪重负，鼓励他们进行探索。
创建有凝聚力的视觉对象模式，鼓励用户将对象视为整体。 例如，将相关元素分组在一起可帮助用户理解它们之间的关系和目的。 使用格式塔原则以一致的方式直观地排列元素，以指示细分。 有效利用空间，在界面元素周围创造一种封闭感。
使用动画和过渡来引导用户的浏览方向并传达界面状态的变化。 不同状态或屏幕之间的顺利过渡可以帮助用户理解元素之间的关系并填写缺失的信息。 Power Apps 中提供的多个现代控件本身会显示动画。
在四个不完整的圆之前，会识别一个方形。
从卡片到模态的动画有助于关闭两者之间的差距并将它们彼此关联。
焦点
焦点是一个设计元素，可立即吸引观看者的注意力。 理想情况下，一个设计应该有多个焦点（通常介于一到三个之间），排列这些焦点以引导用户谨慎浏览内容。
设计具有清晰信息层次结构的界面，其中将最重要的内容或操作强调为焦点。 使用视觉对象提示（例如大小、颜色、对比度和位置）使这些元素突出显示。从最重要的焦点开始，逐步呈现信息。 此技术可帮助用户快速识别最相关的内容或操作，并按照逻辑顺序引导他们浏览界面。
将主要的行动号召按钮放置在界面的显著位置，使其成为最强的焦点。 这些按钮应在视觉上与其他元素不同，并策略性地定位以引导用户采取所需行动，例如进行购买或注册。 Fluent 设计语言建议对这些元素使用品牌主题色。
有效地使用对比度来创建焦点。 由于颜色、亮度、大小或排版的差异而突出的元素自然会吸引用户的注意力。 将较亮的表面与较暗的文本或品牌元素进行对比，以创建更突出的焦点。
利用留白与周围元素形成视觉分隔，从而突出焦点。 此技术有助于防止分心，并允许用户专注于最重要的内容或操作。 与空间较小的元素相比，周围间距较大的 UI 元素会吸引更多注意力，并且往往被认为具有更高的重要性。
在整个界面中保持焦点使用的一致性，以提供有凝聚力的用户体验。 通过设置焦点模式，引导用户实现对导航界面所需理解的层次结构的期望，并帮助他们在不同的屏幕或页面上找到重要的信息或操作。
请记住，保持平衡很重要，不要让太多相互竞争的焦点使用户不堪重负。
用户的视线首先被吸引到蓝色方块上。
可以将号召性用语等元素作为焦点，以确保用户注意到它们。
相似性
看起来相似的对象通常被视为一组或一种模式，致使用户期望它们具有相同的功能。
确保具有相似功能的界面元素具有一致的视觉对象样式。 例如，执行相似或同等权重操作的按钮应该具有相同的颜色、形状和大小，向用户表明它们的功能共享。 相反，确保功能上有显著差异的元素可以清楚地进行区分。 这两种技术都通过建立清晰的视觉对象线索来防止产生混乱和沮丧。
使用一致的图示法和符号来表示整个界面中的相似操作或功能。 用户倾向于根据他们过去的经验将熟悉的图标与特定功能联系起来。 为了满足这些期望，请使用公认的图标隐喻。 通过使用同一集合中的图标（例如 Fluent UI 图示法库），确保图标样式的一致性。
使用颜色编码来表示元素或类别之间的相似性。 例如，使用相同的颜色突出显示列表中的相关项目，或在图表上对相似的数据点进行分组，这可以增强视觉连贯性，并帮助用户识别模式。
对于达到类似目的的元素，保持排版和文本样式的一致性。 一致的字体样式、大小和格式有助于形成连贯的视觉对象语言，便于用户识别相关内容或操作。
为界面上的相似操作提供一致的交互式反馈。 无论是将鼠标悬停在按钮上还是单击链接，用户都应该期待统一的响应，以加强视觉相似性和功能等效性之间的关联。 虽然平台本身提供了大多数交互性行为（例如悬停和按下状态颜色值），但在从头开始创建组件元素或手动实现反馈状态时，请牢记此设计原则。
确保视觉相似性与其他提示（例如文本标签或音频反馈）相辅相成，以适应具有不同需求和偏好的用户。 通过多种感官模态进行有效的功能通信，可增强可用性和包容性。
元素按形状和颜色分组，而不是按排列（列和行）分组。
如果仪表板上的一个卡片作为侧面板打开，用户将期望所有都以这种方式打开。
图形与背景
人们本能地认为元素要么是“图形”（突出在前面的东西），要么是“背景”（隐藏在后面的东西）。 因此，上下文会影响感知，确保足够的描绘以区分背景中的重要元素至关重要。 空白（负空间）有助于更好地理解内容。
使用颜色、大小或视觉对象样式的对比来建立清晰的图形-背景关系。 重要元素应在背景中突出显示，使其易于区分，并有效引导用户的浏览方向。 在颜色较浅的图面中，背景中视觉对象元素的对比度越明显，就越突出 此方法减少了视觉对象混乱，并帮助用户识别关键信息。 在前景和背景元素之间提供足够的对比度，以提高视觉障碍用户的可读性，提高他们访问和理解内容的能力。
在界面元素的放置和样式上保持一致性可以加强图形-背景关系，并帮助用户理解界面结构。 设计模式和视觉对象提示的一致使用可确保用户能够在不同的屏幕和上下文中快速区分前景和背景元素。 设计中的不一致会破坏用户的心理模型，阻碍他们有效地浏览界面。
低对比度和最小的负空间有助于将白色矩形视为背景的一部分。
侧面图像需要隐入背景中，以便用户可以专注于重要内容。
分组
如果元素共享一个具有明确边界的区域，它们往往会被视为群组。
在视觉对象容器内（例如框、卡片或边框）对相关元素进行分组，可以帮助用户将它们视为有凝聚力的单元。 此方法以直观方式组织内容和功能，使识别和处理信息变得更加容易。 清晰的分组有助于避免杂乱无章的界面，并减少混乱或效率低下的情况。 例如，在屏幕上跨多个控件的消息栏，由于其边框和背景颜色而被视为相关单元。
为分组元素保持一致的视觉对象样式可增强它们的联系并提高可用性。 对这些元素使用相似的颜色、字体或图标可强调它们属于同一类别或功能。 视觉对象呈现中的不一致会削弱感知到的分组，并导致用户忽视元素之间的关系或误解其含义或目的。
在一个元素或一组元素周围添加边框可以与周围的元素分隔。
分段内容可帮助用户了解主题正在切换。
信号与噪声
视觉对象提示（例如线条、对比度和间距）用于向用户表示某一内容很重要。 但是，过多的信号或突出显示不重要信息的信号很快就会变成噪声。
采用焦点原则（例如粗体文本、对比色或图标）向用户发出重要信息或操作的信号。 例如，为重要按钮或标题使用明亮的颜色以使其突出显示。
要有选择性地突出显示内容，以避免过多的信息让用户不堪重负。 仅发出对用户的任务或目标真正重要的元素的信号。 过多的信号会造成混乱，并使用户难以确定优先级。 确定用户最重要的信息并正确强调此信息。 通常，建议每个页面只有一个行动号召按钮。 在窗体中，突出显示所需字段以引导用户的浏览方向。 这可以防止用户迷失在不必要的详细信息中，并帮助他们专注于重要的内容。
确保信号在整个界面中遵循一致的视觉对象语言。这是一个指导原则，可帮助用户直观地识别模式并理解不同信号的含义。
根据特定的上下文和用户的需求定制信号。 例如，如果用户正在扫描显示某些任务的界面，则可以清楚地发出关键状态和可操作项目的信号，以吸引他们的注意力。 上下文信号可帮助用户快速找到相关信息，而不会被无关的详细信息分散注意力。
信号可帮助用户了解内容并传达重要内容指南。
视觉噪声会引起混淆，并具有与信号相反的效果。
Power Platform 便利化
在画布应用中，使用布局容器对相关元素进行分组。 理想情况下，您应该在容器中组织所有页面元素，布局容器还可以通过调整间距属性有效分隔子容器。
在模型驱动应用窗体中，部分可用于对相关字段或元素进行分组。
在包含可重用自定义组件的常见视觉对象元素中实现一致性。
在画布应用中，现代控件在其设计内集成信号。 具体来说，按钮和锁屏提醒控件在其样式属性中提供各种选项，使它们成为有效的信号。 遵循每个组件的最佳做法，选择性地应用信号以确保最佳通信。