閱讀英文

共用方式為


兩頁設計模式

利用書籍的隱喻,這兩個頁面模式自然會提供類似書籍的分頁體驗。 您可以使用自然界限來顯示集合中的數個專案,例如頁面或圖片,否則可能需要使用者一次檢視一個專案。

視您的應用程式而定,您可以決定一次分頁兩頁,或一次前進一頁。

Diagram shows the two page design pattern.

最佳作法

以下是一些案例,可協助您在套用此設計模式時引導您:

Diagram shows two pages side-by-side, like a book, with no content under the hinge.

可行事項 禁止事項
使用兩個畫面可以有兩個完全不同的頁面檢視。 請勿在轉軸下傳遞的兩個畫面上顯示頁面。

Diagram shows items on separate pages, not under the hinge.

可行事項 禁止事項
使用雙頁格式來顯示上線/指示內容可採取動作的專案。 請勿在轉軸下傳遞的兩個畫面上顯示可採取動作的專案。

Diagram shows each individual page expanded to take up both screens in dual-landscape mode, where the user can see all content.

可行事項 禁止事項
當裝置旋轉成雙橫向時,將您的內容顯示為單一頁面。 請勿鎖定裝置的方向。 允許使用者旋轉裝置,以使用較大的螢幕來檢視內容。

Diagram shows a placeholder or other element on the second screen if no content exists.

可行事項 禁止事項
如果您的內容只需要一個畫面,請使用第二個畫面上的圖例或視覺指示器。 請勿跨兩個畫面跨越單一頁面來填滿空間。

可能受益於此模式的應用程式類型

  • 檔導向應用程式
  • 具有編頁內容的應用程式
  • 為閱讀而建立的應用程式
  • 具有專案化畫布的應用程式,例如附注和畫板

程式碼範例

這些專案顯示您可以在應用程式中使用的兩個頁面設計模式的簡單實作:

後續步驟

請考慮下列其他設計模式: