优化布局的建议
适用于此 Power Platform Well-Architected 的体验优化清单建议：
| XO:06 | 在屏幕尺寸和分辨率上保持可用且具有视觉吸引力的布局。 使用自适应技术以各种方式动态呈现内容。 |
|---|
本指南介绍设计可轻松在各设备之间灵活导航和调整的屏幕布局的建议。 此方法可确保用户无论使用何种设备都能获得一致且最佳的查看体验。
定义
| 术语 | 定义 |
|---|---|
| 视区 | 显示内容的数字界面的可见部分，如 Web 浏览器或移动应用。 视区范围通常与基于屏幕维度和分辨率与设备类（移动设备、平板电脑和台式机）关联。 |
| 断点 | 定义用于确定自适应布局行为的视区范围的特定像素值。 |
关键设计策略
响应式布局可提供跨不同窗口大小的灵活高效的用户体验。 它们通过缩放内容、重新排列元素以及选择性地显示文本和图像来进行调整。 负责任的布局不论用户的屏幕大小如何都可以满足用户的需求。
确定一致的应用框架
应用程序框架由一组在每个屏幕上一致提供的控件组成 它包括三个主要子组件：标题、导航和内容区域。 简单应用程序可以灵活地使用标题组件，而更复杂的应用程序通常使用侧向导航来启用多个页面。 子组件可以自定义。 例如，您可以在标题中引入全局搜索，或在侧边导航中对项目进行分组，来满足应用的要求。
应用框架的三个主要子组件描述如下：
标题是设计为每个内部应用程序的一部分的核心组件。 它由子组件组成，这些子组件允许用户访问系统范围的功能，帮助他们定位到 UI，并提供跨体验的一致性。 它会出现在应用框架的顶部，并且应会在应用的所有页面上持续显示。 它可以选择性地承载全局命令，如搜索、设置、通知、反馈、配置文件或帮助。 应始终显示本应用程序的名称，并且最好同时用作主页或登陆页的可单击链接。 标题应该具有响应性，使用移动到 600 像素及以下视区内的溢出控件的命令。 搜索输入宽度在 1023 个像素及以下也是响应性的。
导航是一个控件系统，它们协同工作以帮助用户查找信息和完成任务。 它帮助用户从应用程序的一个部分跳到另一个部分。 从层次结构上讲，它不附加到任何页面或部分，而是存在于所有其他内容之上。 它会始终存在，可以最小化到折叠状态（也称为轨道状态），为页面内容腾出额外的空间。 在较小的窗口大小下，它可以最小化为弹出项目菜单。 最常见的导航形式包括顶部导航和侧边导航。 不要同时使用两者。
内容区域包含屏幕焦点。 浏览器窗口的大小会影响内容框架和主内容区域中的可用空间。 此框架基于断点和每个组件的相应响应行为进行调整。 在创建断点矩阵中了解更多信息。
内容区域可以选择性地包含几个可用于一致元素放置的子区域，如页眉、内联侧窗格或覆盖内容的面板。
坚持一致的设计语言（配色方案、排版和布局结构）可帮助用户快速识别各种元素并与之交互，而不会造成混乱。 应用框架模式在所有内部业务应用程序中使用得越一致，用户的回忆或心理模型就越强大。 与行业标准或通用平台模式保持一致可进一步增强这种效果。
确定应用程序框架后，各个屏幕布局将位于应用程序框架的内容区域内。
考虑周到地使用内容区域
用户渴望无缝体验：信息易于访问，文本易于阅读，美学增强而不阻碍可用性。 优先考虑关键信息的初始可见性，确保各列的可读性，并协调设计元素以获得美感。
确保在打开屏幕时可以立即看到必需的信息，而无需滚动。 优先显示重要信息，如导航选项、重要内容和屏幕顶部附近的可操作项。 在显示足够项目与提供每个项目的详细信息之间实现平衡是一项持续挑战。 相反，虽然在初始视图中提供所有可能的信息可能很诱人，但过多的信息可能会让用户不知所措，并且削弱关键元素的重要性。 考虑使用简洁的摘要或预览，让用户能够瞥见更详细的内容，吸引用户深入研究。 对仪表板进行优化，使其可以服务于可视化大量数据。
合并多个列、部分或分组，以逻辑方式组织内容和最大化空间。 对列宽给予极度关注，确保文本保持清晰，不会产生太多压力。 避免过于狭窄的列，迫使用户不断水平滚动，从而干扰交互流。 相反，过宽的列可能会妨碍可读性，需要用户跨越较长距离跟踪行。 努力在有效利用可用空间与提供舒适阅读之间达到平衡。
将视觉元素调整到合适的大小和位置，来创建视觉上愉悦和平衡的界面。 将字幕与相应的视觉效果或标题对齐，保持元素之间的一致间距，并根据用户需求保持一定的层次结构。 剪裁不必要的修饰，将像素合理分配给最重要的元素。 优先考虑和强调内容和导航元素，尤其是在导航密集型应用或主页上，避免过度修饰降低可用性。
基础网格可能对于一致地排列元素很有用。 所选的网格行为应在应用中每个屏幕的内容区域之间保持一致，也可以在组件级别（如卡或侧窗格）应用。 Web 应用程序中使用的最常见的网格布局类型是列网格。 建议使用流动（或拉伸）网格行为来实现响应屏幕。
使用确定的布局和分组模式
使用公认的结构和安排来组织用户界面内的内容和元素。 这些布局和模式已经过改进，随着时间的推移已被证明很有效，这让它们对于用户是熟悉而直观的，同时也让实现自适应模式变得容易。 确定了核心场景和元素后，将每个场景和元素映射到提供最佳交互的确定布局。 优先考虑对完成任务很重要的内容和功能。。 决定哪些元素应始终在屏幕上可见和可访问，哪些元素可以通过其他菜单或操作隐藏或访问。
以下列表虽然不详尽，但描述了通常用于业务或工作效率应用程序的确定布局。 可以将所有内容都放在主内容区域内。
登陆/主屏幕
登陆屏幕或主屏幕作为应用程序的入口点，为用户提供应用的产品/服务或功能的概览。 它通常旨在吸引访问者的关注，并鼓励采取特定操作，如完成第一次任务或浏览进一步内容。 它通常包含突出图像和整洁的导航选项。
它非常适合欢迎用户，提供对关键功能、导航选项或行动号召的快速访问，以及为应用的体验设定基调。 优先考虑清晰、简单和直观的导航，以有效地指导用户。
仪表板
仪表板是应用程序中的集中式中心，用于为用户提供有关数据或信息的综合性概述。 它通常由可自定义的小组件或模块组成，允许用户监视特定的指标或执行操作。
仪表板适用于具有复杂数据集或多方面功能的应用程序，让用户能够一眼跟踪进度、分析趋势并做出明智的决定。 它们在分析平台、项目管理工具和财务管理应用中特别有用。
表格
表单是一种结构布局，便于用户输入数据，通常由字段组成，用于输入不同类型的信息，例如文本、数字、日期和选择。 窗体对于收集用户输入、处理事务和促进应用程序内的交互至关重要。
它们通常用于注册流、签出流程、数据输入任务以及任何需要用户输入或反馈的场景。
实体/配置文件视图
实体或配置文件视图提供有关特定实体的详细信息，如用户配置文件、产品列表或内容项目。 它通常包括描述性文本、多媒体元素和相关操作或交互。
它们非常适合用于在应用程序中显示项目的详细信息。 它们为用户提供深入的见解，促进做决定，并支持与特定实体的互动，如社交网络应用中的用户档案或电子商务平台中的产品列表。
列表页面
列表或表格以结构化格式（通常以线性或网格布局的形式显示）显示项目或实体的集合。 通常包括每个项目的简短摘要或预览，以及用于浏览或筛选的导航控件。
列表页可以有效地以易于理解的格式显示大量内容或数据，让用户能够高效地扫描、搜索和导航。 如果启用了对特定行的操作，流程应该清晰明确。 列表页通常用于内容管理系统、目录列表、搜索结果和新闻提要。
简短查看（拆分屏幕）
简短查看（拆分屏幕）将界面划分为两个不同的部分，左侧显示列表，右侧显示项目视图。 列表通常包含一个项集合，而项视图提供有关列表中选定项的详细信息。
此布局在用户需要快速浏览项目列表并同时查看每个项目的详细信息的情况下尤其有效，如在执行批量操作时。 产品目录、文档管理系统、电子邮件或通信客户端以及任务管理工具（例如，Azure Dev Ops 查询查看器）是通常适合此模式的场景。
向导
向导会指导用户完成一系列顺序步骤或任务（通常按照线性方式）完成一个复杂的过程或实现特定目标。 通常包括进度指示器、提示和验证检查。 向导有利于简化复杂的流程，减少认知过载，以及引导用户完成不熟悉的任务或工作流。 通常用于加入流、设置流程、多步骤窗体和基于任务的交互，如配置复杂的设置或事务。
在标准布局上自定义和构建以满足特定要求。 此过程可能包括添加或删除元素，调整元素大小和确定元素位置，以及应用样式以匹配品牌标识或可视设计准则。 尝试标准布局的不同配置和变体，找到最有效的内容安排和整体用户体验。
面向所有设备设计布局
布局是定义的规则和有意向的组织内容的结晶。 将您的内容纳入精心安排的结构是关键，但要使内容连同清晰的层次结构一起在各个平台和屏幕尺寸上流动，需要有缩放逻辑。 自适应和响应式设计可以分别应对这一挑战。 在某些情况下，将自适应和响应式设计相结合是正确的选择。
响应式设计只使用一种布局，其中内容是流动的，并且可以适应不断变化的格式大小。 此设计技巧使用媒体查询来检查给定设备的特征并相应地呈现内容。 响应式设计让您能够一次构建一项功能，并让功能在所有屏幕尺寸上有效运行。
自适应布局完全基于其所呈现的格式改变。 自适应设计具有多个固定布局大小，将触发浏览器根据可用空间加载给定布局。 采用自适应设计构建的网站使用媒体查询检测断点，类似于响应式式设计。 它们还使用基于设备功能的其他标记。 此过程被称为“渐进增强”
重新定位
更改页面元素的位置。
通过随着窗口大小的增加优化组合来保持内容有序排列、可读、平衡。 例如，移动视区上垂直堆叠的元素可以在较大的视区上水平重新定位。 此变化采取从左到右的自然阅读顺序，在设计中实现平衡，并保持视觉焦点位于页面上的关键元素上。
调整大小
调整页面元素的大小和边距。
通过在窗口顶部显示更多内容，调整页面元素的大小以优化丰富的用户体验，减少垂直滚动的需要。 调整页边距，为布局添加空白区域和平衡，这可为内容留有透气空间，并增强设计的视觉吸引力。 例如，主要组件可以延伸到窗口的整个宽度，以显示更多背景图像。 图片下方的内容可以展开，但使用不同的边距来增加布局的多样性，并帮助定义视觉层次。
回流
优化页面元素流。
调整页面元素以确保它们完全显示，同时考虑窗口的大小和方向，通过重新设置内容区域。 例如，较小窗口中的一列内容可以在较大窗口上回流，显示两列文本。 此技术允许在“折叠上方”显示更多内容
显示/隐藏
针对窗口大小及方向优化内容。
显示或隐藏页面元素以针对窗口大小及方向优化内容。 此响应式技术根据查看上下文调整信息量。 例如，出现在小屏幕上的类别可以显示有限的元数据，如图像、标题和链接，从而使其他信息可见，帮助用户集中注意力。 在较大的屏幕上，类别可以显示其他元数据，如角色、日期和简短说明，同时仍然适合视区。
重新设计
将页面元素和内容分叉或折叠，以保持焦点位于重要信息和操作。
此方法类似于在设计中采用“渐进式披露”的做法，但针对不同的窗口大小和方向。 例如，展开窗口可以在详细信息旁边显示项目列表。 内容之间的这种可视链接允许用户轻松地选择另一个项目。 在较小的屏幕上，焦点仍然在显示关键信息上。
创建断点矩阵
断点矩阵用作应用程序设计跨不同屏幕大小和方向的响应或自适应行为的图形描述。 它通常会呈现一个结构化网格或布局，详细说明设计在各个断点处的响应。 每个部分对应不同的屏幕宽度，提供对设计结构、布局和功能的见解。 断点矩阵包括屏幕宽度、视区方向、设计元素、布局结构、内容呈现、导航、媒体和交互组件等考虑因素，说明网站或应用的设计如何在不同的屏幕大小和方向上做出响应。 此方法不仅有助于最终确定每个屏幕的设计，而且在明确跟踪和有效传达关键组件属性更改时，让实现更容易。
Power Platform 便利化
模型驱动应用窗体使用 Power Apps Studio 进行配置。 窗体设计器允许制作者将元素添加到网格结构，这让窗体页面具有固有的响应性。 嵌入式自定义组件，如自定义页面、嵌入式画布组件和 Power Apps Component Framework 代码组件，需要在各自的实现中包含响应行为。 例如，自定义页面必须以与纯画布应用相同的方式实现响应行为才能正常工作。
画布应用需要对每个组件进行显式配置以实现响应行为，从而对体验进行更多控制。 屏幕大小由应用定义确定，可以参考此定义来确定位置、行为、可见性和其他相关属性。