清單詳細資料設計模式
清單詳細資料模式具有主要窗格和內容的詳細資料窗格。 主要窗格通常是清單檢視。 當選取清單中的項目時，詳細資料窗格即會更新。 當您有更大的檢視區域時，此模式自然就很好用。 這個模式經常用於電子郵件和通訊錄。
利用兩個不同的畫面並貼齊到自然界限，您可以使用一個畫面來顯示 專案 清單，另一個畫面顯示選取專案的詳細資料。
將流覽或概觀與詳細資料分開，可讓使用者更深入地鑽研內容，同時持續瞭解其在整體清單或匯總中的位置。
最佳作法
以下是一些案例，可協助您在套用此設計模式時引導您：
| 可行事項 | 禁止事項 |
|---|---|
| 使用畫面左側來顯示清單和右側，以顯示清單中所選項目的詳細資料。 | 請勿在兩個畫面上顯示清單，請使用第二個畫面作為詳細資料檢視。 |
| 可行事項 | 禁止事項 |
|---|---|
| 在左側畫面上具有與左畫面清單相關的底部功能表流覽。 | 在左側畫面上沒有底部功能表導覽，清單跨越兩個畫面。 |
| 可行事項 | 禁止事項 |
|---|---|
| 使用側邊功能表導覽搭配左側畫面上的清單，以及右側畫面的詳細資料。 | 在清單詳細資料中，沒有跨兩個畫面的底部功能表流覽。 |
| 可行事項 | 禁止事項 |
|---|---|
| 當裝置旋轉成雙橫向方向時顯示詳細資料， (具有返回按鈕返回清單) 。 | 當裝置旋轉成雙橫向方向時，請勿在一個畫面上顯示清單，並在另一個畫面上顯示詳細資料。 |
| 可行事項 | 禁止事項 |
|---|---|
| 使用第二個畫面，從影像庫清單中顯示較大的影像。 | 不要在兩個顯示之間顯示通過轉軸的清單庫。 |
可能受益於此模式的應用程式類型
- 具有清單或資源庫的應用程式
- 郵件應用程式
- 排程應用程式
- 相片或影像鑑藏應用程式
- 具有播放清單和歌曲詳細資料的音樂應用程式
- 具有強式導覽結構的應用程式
程式碼範例
這些專案顯示清單詳細資料設計模式的簡單實作，您可以在應用程式中使用：
- Kotlin
- Java
- C# (Xamarin)
- React Native \(英文\)
注意
使用清單詳細資料檢視時
請確定當您從單一畫面移至跨越清單詳細資料模式時，您會選取專案以顯示詳細資料檢視的使用者。 否則，詳細資料檢視畫面可能會讓使用者感到中斷。 它可能會對使用者不滿意，要求動作以資訊填滿。
某些選項包括清單檢視中的最後一個觸控專案，或清單中的頂端專案，或上次修改的專案。
下一步
請考慮下列其他設計模式：