확장 캔버스 디자인 패턴

  • 아티클

확장된 캔버스 패턴은 가장 간단한 이중 화면 패턴이지만 강력합니다. 그리기와 같은 작업에 더 큰 캔버스가 필요한 경우 이 패턴을 고려할 수 있습니다. 앱에 자유롭게 흐르는 캔버스가 있는 경우 이음새가 중요한 콘텐츠를 가리면 사용자가 자유롭게 스크롤할 수 있습니다. 이 패턴은 한 화면이나 다른 화면으로 압축하는 대신 앱에 더 많은 화면 공간을 제공하는 이점을 제공합니다.

캔버스를 확장하면 사용자가 이중 화면 디바이스에서 제공하는 더 큰 화면 공간을 활용할 수 있습니다.

Diagram shows two examples of extended canvas, a map and a drawing app, which each use both screens.

모범 사례

다음은 이 디자인 패턴을 적용할 때 안내하는 데 도움이 되는 몇 가지 시나리오입니다.

Diagram shows alerts and dialogs placed in the center of a screen in order to avoid the hinge.

수행 안 함
왼쪽 또는 오른쪽 화면을 사용하여 대화 상자를 표시합니다. 가운데에 배치된 힌지 통과 대화 상자를 표시하지 마세요.

Diagram shows bottom sheets displayed on one screen in order avoid spanning sheets under the hinge.

수행 안 함
왼쪽 또는 오른쪽 화면을 사용하여 아래쪽 시트를 표시합니다. 힌지를 통과하는 아래쪽 시트를 표시하지 마세요.

Diagram shows pallets on one screen, not under the hinge, and try to place in the most natural position for the user.

수행 안 함
화면 왼쪽에 아래쪽 메뉴 탐색을 표시합니다. 두 화면에서 아래쪽 메뉴 탐색을 분할하지 마세요.

Diagram shows a toolbars on one screen, instead of under the hinge.

수행 안 함
오른손 펜 사용자의 왼쪽에 도구 모음 메뉴를 표시합니다. 도구 모음 메뉴가 힌지 통과를 허용하지 않습니다.

Diagram shows a toolbar on one screen, as in the previous diagram, but on the opposite side per user preference.

수행 안 함
왼쪽 펜 사용자에 대한 도구 모음 메뉴를 오른쪽에 표시합니다. 도구 모음 메뉴가 힌지 통과를 허용하지 않습니다.

이 패턴을 활용할 수 있는 앱 유형

  • 지도 앱
  • 그리기 캔버스 앱

코드 예제

이러한 프로젝트는 앱에서 사용할 수 있는 확장 캔버스 디자인 패턴의 간단한 구현을 보여 줍니다.

다음 단계

다음과 같은 다른 디자인 패턴을 고려합니다.