Layouts: Single Pane and Split View

Single Pane

This is the simplest layout available.

Use the header area for:

• Navigation functions, such as tabs for switching between content

• A search field for searching through app content.

• Viewing options--for example, use buttons to select what content is displayed in the content area, such as grid versus list, or day/week/month.

• Labels to describe the content in the content area.

Place action buttons on the right side of the header area if a footer area is not employed in this layout.

The content area is typically used to present visual content that makes full use of the larger canvas, such as image grids or memo notes. For displaying list-based information, use a different layout.

App Examples

• Memos
• Calendar

Split View

Use this layout to structure your app into two panes: the left-hand pane is fixed in width, whereas the content on the right-hand pane is free and adjusts to fill the available space.

The left pane contains a list of items. One item in the list should be selected and the right pane should show content that is related to the selected item.

Each pane can have its own independent header and footer area containing controls related to the pane.

App Examples

• Photos & Videos