布局是一种结构模板，它通过定义可视网格、间距和区域来支持应用程序之间的一致性。
在选择布局之前, 请查看以下准则：
了解您的用例：了解如何使用页面上的信息；
确定内容的优先级：组织您的内容以突出显示最重要的信息；
将相关内容组合在一起：使用户能够高效地处理内容。
记录布局
记录布局由页眉、主要内容区域和边栏组成。应出现在上述每个区域中的内容取决于要为其解析的主用例。内容区域上方的页眉延伸到整个视窗中。当用户滚动时，面板是固定的，以提供位置上下文，但它收缩以保留垂直不动。
Record Layouts
主要内容区域使用三分之二的视窗。侧边栏使用其他第三个边栏，最小宽度为 400px，以保持可读性。如果母版布局显示在 主要\详细信息中，边栏将折叠到主内容区域中的选项卡中。
工作台布局
工作区布局可促进用户对记录的协作，它通过将信息放在较大的内容区域中的突出位置，同时在边栏中显示相关记录，突出显示围绕记录正在发生的活动和讨论。记录详细信息的摘要在内容区域上方的面板中，便于参考。
Workspace Layouts
母版布局
当用户需要跳转到相关记录时，将优化母版布局，它通过在较大的内容区域中显示此信息来突出显示相关记录。协作项放置在较小的边栏中，记录详细信息的摘要在内容区域上方的面板中，便于参考。
Reference Layouts
列表布局
列表布局由一个简单的页眉和正文组成，允许用户在自定义的项目列表之间切换。常见控件包括类型的排序、筛选、图表和操作；用户还可以使用 "显示" 菜单在列表布局之间切换。
选择最支持用例的列表布局类型：
表：最适合管理大型数据集和比较价值；
板：用于监视工作流或里程碑，用户可以在各个阶段之间拖动卡片以指示进度管理器；
主/详信息：允许用户在一个屏幕上查看和编辑项目的详细信息。
表格布局
使用表格布局可以灵活查看和管理大型数据集。布局使用100% 的视窗；项目显示为行, 其字段按列组织。
Table Layouts
这些列的宽度是固定的，并根据需要使用尽可能多的水平空间。当窗口更改宽度时，列不会调整大小；用户可以选择要显示的列以及每列的宽度。如果网格比视窗宽，用户将水平滚动以查看更多数据；该表可以是无限长的，数据在用户滚动时加载，这使您的用户能够最有效地访问其数据。避免使用手动分页控制而降低效率。
看板布局
对通过线性工作流 (如销售流程) 推进的项目使用主板布局，因为它允许用户在各个阶段之间快速移动项目。
Board Layouts
在基于要查看的对象上，选取列表字段以布局列中显示项。项目在每列中显示为堆叠卡，并且可以在各列之间移动；每列都可以选择显示该列项目中的任何数字数据的聚合，例如商机列的总货币价值。
最小列宽度为 12rem，最大宽度为25rem，以确保卡片清晰易读。如果列不适合视窗，用户将水平滚动以查看更多数据；如果列不填充视区, 它们将扩展到其最大宽度，最后一列右侧的区域将保持为空。
主详信息布局
主详细信息布局是处理项目队列的理想选择，因为它允许用户在查看和编辑多个项目时保持在同一屏幕上。布局将两个具有一对多关系的布局视图组合在一起，从主视图 (包含列表) 中选择项目将导致使用压缩引用或工作区布局在详细信息视图中填充该项目的详细信息。
Master Detail Layouts
主详细信息布局对于探索深度嵌套的树结构(如文件系统) 也很有用, 方法是在左侧显示树组件, 在右侧显示表组件；这允许用户在树中的节点之间跳转, 并同时以列表的身份查看每个节点的全部内容。
Master-detail layout：Tree list and table
主详细信息布局最适合在较大的屏幕上工作 (最少 1024px)。如果屏幕较小，则应将两个布局视图定义为单独的页面。
Master-detail layout：Separate pages
A layout is a structural template that supports consistency across applications by defining visual grids, spacing, and sections.
Before selecting a layout, review these guidelines:
Know your use case. Understand how the information on the page will be used.
Prioritize your content. Organize your content to highlight the most important information.
Group related content together. Make it efficient for users to work with the content.
Record Layouts
Record layouts consist of a page header, a main content area and a sidebar. The content that should appear in each of these areas depends on the primary use case you are solving for.
The page header above the content area extends across the entire viewport. When the user scrolls, the panel is fixed to provide locational context, but it shrinks to preserve vertical real estate.
The main content area uses two-thirds of the viewport. The sidebar uses the other third, with a minimum width of 400px to maintain readability. If the reference layout appears inside of a Master/Detail, the sidebar collapses into a tab in the main content area.
Workspace Layouts
A workspace layout facilitates user collaboration on records. It highlights the activity and discussion that is happening around a record by placing this information prominently in the larger content area, while simultaneously displaying the related records in the sidebar. A summary of the record’s details are in a panel above the content area for easy reference.
Reference Layouts
A reference layout is optimized for when users are primarily jumping to related records. It highlights the related records by displaying this information in the larger content area. Collaborative items are placed in the smaller sidebar. A summary of the record’s details are in a panel above the content area for easy reference.
List Layouts
A list layout consists of a simple page header and body that allows users to switch between predefined lists of items. Common controls include sorting, filtering, charting, and actions for the item type. Users can also switch between list layouts using the “Display” menu.
Choose the types of list layout that best supports your use case:
Table — Best for managing large sets of data and comparing values
Board — Use to monitor a workflow or milestones where users can drag cards between stages to indicate progress
Master-Detail — Allows users to see and edit the details of an item on one screen
Table Layouts
Use a table layout for flexibly viewing and managing large sets of data. The layout uses 100% of the viewport. Items are displayed as rows with their fields organized in columns.
The columns are fixed width and use as much horizontal space as necessary. Columns do not resize when the window changes width. Users can choose which columns to show and how wide each column is. If the grid is wider than the viewport, users horizontally scroll to see more data.
The table can be of infinite length. Data is loaded as the user scrolls. This lets your users access their data most efficiently. Avoid using manual pagination controls, which reduce efficiency.
Board Layouts
Use a board layout for items that are advancing through a linear workflow, such as a sales process, because it allows users to quickly move items between stages.
The layout displays items in columns that are based on a picklist field on the object being viewed; a good example is the Stage field on a list of opportunities. Items are displayed as stacked cards in each column and can be moved between columns. Each column can optionally display an aggregate of any numerical data from that column’s items, such as the total monetary value of a column of Opportunities.
The minimum column width is 12rem, and the maximum is 25rem to ensure that cards are legible. If the columns don’t fit in the viewport, users scroll horizontally to see more data.
If the columns don’t fill the viewport, they are expanded to their maximum width, and the area to the right of the last column remains empty.
Master Detail Layouts
A master-detail layout is ideal for working through a queue of items because it allows the user to stay on the same screen while viewing and editing multiple items.
The layout groups together two layout views with a one-to-many relationship. Selecting an item from the master view (which contains a list) causes the details of that item to be populated in the detail view, using a condensed reference or workspace layout.
A master-detail layout is also useful for exploring a deeply nested tree, like a file system, by displaying a tree component on the left and a table component on the right. This allows users to jump between nodes in the tree and to simultaneously view the full contents of each node as a list.
Master detail layouts work best on a larger screen (minimum of 1024px). If the screen is smaller, the two layout views should be defined as separate pages.
网友评论