列表和流可帮助用户按主题或年表导航数据。这些显示数据的各种方式经过优化, 可帮助用户查找、浏览和处理记录。
记录列表 Record Lists
记录列表组织信息, 以帮助用户查找或浏览特定记录。可以将记录显示为表、磁贴列表或交互式卡。通过将项目类型划分为不同的列表或在列表中明确标记它们来区分项目类型。例如,将不同的文件类型放入单独的列表中, 或者如果它们位于同一列表中, 则为每个文件类型 (pdf、jpg 等)贴上标签。
确保为列表或记录上的所有交互点提供可见的操作, 如图标或按钮。对每个记录列表进行标题，在可能的情况下包括字段标签。当显示没有标签时，用户名、日期和数字字段尤其不明确。建议在列表为空时提供一条消息，例如, “没有要显示的项。尝试编辑此列表视图的筛选器或切换列表视图。”
表 Table
表是显示列表的最基本格式。每个记录由以记录的主字段开头的一行数据表示，并在后续列中显示其他字段。数据使用可交互式的列标题进行标记。此显示类型适用于大量记录，因为您可以使用排序、筛选或滚动轻松地对其进行扫描并导航列表。
如果允许用户修改列宽度，请允许水平滚动，但不要响应调整列的大小。在只有几列适合的窄屏幕上，表应该优雅而响应式地折叠成磁贴列表。
Table
树网格 Tree Grid
树网格可用于显示大量分层数据, 其中记录被分组为父子关系。此格式类似于表, 但第一列也表示记录之间的关系。它还提供了类似的好处, 包括排序和筛选。
行末尾的V形按钮显示并隐藏嵌套的子项，它还指示记录是否有子项。子级在父级下面缩进,以传达他们在层级中的地位。记录及其子级必须共享在列中显示的相同数据结构。例如,文件和文件夹共享一组类似的元数据。当父记录和子记录具有不同的字段时,不应使用树网格，请考虑改用相关列表或主详细信息。在只有几列适合的狭窄屏幕上, 树网格应该优雅而反应迅速地折叠成树列表。
Tree Grid
磁贴 Tiles
磁贴以主字段开头, 可以包括支持图标或图像以及其他字段。数据以标签值对的形式显示。用户与磁贴中的元素 (如按钮和链接) 交互, 而不是与整个磁贴交互。当您对空间进行水平约束时, 请使用磁贴。磁贴适用于短列表, 少于10个项目。
磁贴布局不能很好地拉伸,因此要使用可用的水平空间, 请添加一列磁贴。在将出现2列以上磁贴的更宽屏幕上, 磁贴列表应优雅且响应性地扩展到表中。
Tiles
交互式卡片 Interactive Cards
要使磁贴更具交互性, 您可以在单个磁贴周围添加卡片包装器, 并允许用户拖放它们。当单个项目在列表中的顺序和位置很重要时, 请使用卡片。
Interactive Cards
流 Feeds
流为用户提供了一种沟通和随时了解与记录相关的活动的方式，包括搜索功能，以便用户可以搜索流。建议在流为空时提供提示消息，例如，活动流可能会说: “没有后续步骤。要使事情进展，请添加任务或设置会议。”
评论流 Discussion Feeds
讨论流是用户之间的对话。讨论中的单个邮件允许内联答复和批注, 但不允许对这些答复进行答复, 不允许进行分层线程处理。除了消息之外, 提要中的每个项目还显示发布该项目的用户、发布日期、用于书签或删除 (仅限所有者)的行级别操作、类似帖子的按钮以及赞的数量。帖子可以包括提及其他用户和文件附件。讨论流可以包括添加交互式功能的多个消息类型，例如，您可以进行投票。
Discussion Feeds
活动流 Activity Feeds
活动流跟踪用户所做的操作以及用户要对记录执行的操作。每个流都包括特定活动的活动类型、主题和其他字段。活动类型可以包括电子邮件、任务、日历事件、呼叫日志以及对记录或相关记录的其他更新。活动流可以显示过去和未来的事件。
Activity Feeds
Displaying Data
Lists and feeds help users navigate data either by theme or chronology. These various ways of displaying data are optimized to help users locate, browse, and work together on records.
Record Lists
Record lists organize information to help users locate and/or browse specific records.
You can display records as a table, tile list, or interactive card. Differentiate types of items either by separating them into different lists or by clearly labeling them within the list. For example, put different file types into separate lists, or if they live in the same list, label each file file type (PDF, JPG, and so on).
Make sure to provide a visible affordance, such as an icon or a button, for all points of interaction on a list or record.
Title each list of records. Include field labels where possible. User name, date, and number fields are especially ambiguous when shown without a label.
It’s recommended to provide a message when a list is empty. For example, “No items to display. Try editing filters for this list view or switching list views.”
Table
A table is the most basic format for displaying a list. Each record is represented by a single row of data that begins with the record’s primary field and shows additional fields in subsequent columns. The data is labeled using column headers that can be interactive.
This display type is appropriate for large numbers of records because you can easily scan it and navigate the list using sorting, filtering, or scrolling.
If you are allowing the user to modify the column widths, allow horizontal scrolling but don’t responsively resize columns.
On narrow screens where only a few columns will fit, tables should elegantly and responsively collapse into tile lists.
Tree Grid
A tree grid is useful for displaying large amounts of hierarchical data, where records are grouped into parent-child relationships. This format is similar to a table, with the exception that the first column also represents the relationship between records. It also offers similar benefits including sorting and filtering.
A chevron button at the end of the row shows and hides nested children. It also indicates whether a record has children. Children are indented below their parent to communicate their position in the hierarchy.
Records and their children must share the same data structure to be displayed in columns. For example, files and folders share a similar set of metadata. When parent and child records have different fields, a tree grid should not be used. Consider using a related list or master detail instead.
On narrow screens where only a few columns will fit, tree grids should elegantly and responsively collapse into a tree list.
Tiles
A tile begins with a primary field and can include a supporting icon or image and additional fields. Data is presented as labelvalue pairs. The user interacts with elements within the tile, such as buttons and links, not the tile as a whole.
Use tiles when you are horizontally constrained for space. Tiles are appropriate for short lists—fewer than 10 items. Tile layouts do not stretch well, so to use available horizontal space, add a column of tiles.
On wider screens where more than 2 columns of tiles will appear, tile lists should elegantly and responsively expand into tables.
Interactive Cards
To make tiles more interactive, you can add a card wrapper around individual tiles and allow users to drag and drop them. Use cards when the order and placement of individual items in a list is important.
Feeds
Feeds offer a way for users to communicate and stay informed of activities related to records.
Include a search feature so that users can search feeds.
It’s recommended to provide a message when a feed is empty. For example, an activity feed might say, “No next steps. To get things moving, add a task or set up a meeting.”
Discussion Feeds
A discussion feed is a conversation between users. Individual messages in the discussion allow inline replies and comments, but don’t allow replies to those replies—no layered threading. In addition to the message, each item in the feed displays the user who posted it, date it was posted, row level actions to bookmark or delete (owner only), a button to like the post, and the number of likes. A post can include mentioning other users and file attachments.
The discussion feed can include multiple message types that add interactive features. For example, you could include a poll.
Activity Feeds
An activity feed tracks what a user has done and what a user is about to do on a record. Each feed item includes the activity type, subject, and additional fields specific to that activity type. Activity types can include email messages, tasks, calendar events, calls logs, and other updates to the record or related records.
The activity feed can show past and future events.
网友评论