레이아웃
.jpg "\"san diego\"에 대한 검색 결과")
앱의 레이아웃(콘텐츠 및 페이지 간 탐색 포함)은 앱의 전체 디자인과 느낌에 중요합니다. 레이아웃은 계층 구조를 만들고, 콘텐츠를 구성하고, 브랜드를 반영할 수 있습니다. 앱의 사용자 환경은 콘텐츠 및 페이지 구조에 따라 달라집니다.
Windows의 레이아웃
Windows 레이아웃은 진정한 디지털입니다. 디지털 미디어를 수용하며 디지털 세계에서 불필요하거나 혼동을 일으키는 실제 비유를 피합니다. 자유로운 디지털 레이아웃을 통해 강력하고 멋진 앱과 사용자 환경을 만들 수 있습니다.
Windows 레이아웃은 깔끔하고 방해 받지 않는 느낌을 주며 캔버스에서 시각적 혼잡을 줄이려고 합니다. 앱 가장자리에 있는 앱 바로 컨트롤을 이동하도록 선택할 수 있습니다. 그런 다음 앱의 주요 기능에 캔버스 중심 위치를 사용하여 앱의 유용성을 향상시킬 수 있습니다.
앱의 콘텐츠에 따라 큰 대화형 요소로 가벼운 컴포지션을 만들거나 탐색할 콘텐츠와 명령이 풍부하다는 느낌을 주는 보다 조밀한 환경을 만들 수 있습니다. 예를 들어 읽기 목록 앱은 개방형 최소 레이아웃을 사용합니다. 앱에 표시되는 항목과 캔버스에서 이동하는 항목 및 레이아웃 선택이 앱의 환경과 사용에 미치는 영향을 고려하세요.
.jpg "읽기 목록 앱")
Xbox Music 앱은 일반적이지 않은 세로 그리드와 세로 이동을 사용하여 큰 범위의 콘텐츠를 동시에 표시합니다. 맨 아래의 영구적 앱 바는 사용자가 앱의 다른 영역을 탐색하는 동안 재생 목록에서 빠르게 이동할 수 있도록 자주 사용하는 컨트롤을 항상 사용할 수 있게 합니다.
.jpg "음악을 재생 중인 Xbox Music 앱")
레이아웃의 혁신
사용자 시나리오에 따라 변경되는 음악 앱인 Songza는 최소 가로 레이아웃을 사용합니다. 이 앱의 사용자 시간은 대부분 탐색이 아니라 청취에 사용되기 때문에 작을수록 좋습니다.
.jpg "Songza 앱, 금요일 오후를 위한 음악")
대부분의 앱은 계층적 탐색 시스템을 사용합니다. 허브 또는 방문 페이지는 추가 콘텐츠 수준에 액세스하기 위한 사용자의 진입점입니다. 이 페이지에는 사용자가 새롭고 흥미로운 기능을 한 눈에 살펴보고 앱 콘텐츠를 자세히 탐색할 수 있는 다채로운 이동 보기로 콘텐츠가 표시됩니다. Hub 컨트롤은 프레임워크를 제공하며 브랜드에 맞게 앱을 사용자 지정할 수 있는 유연성을 제공합니다.
계층적 탐색은 유일한 앱 레이아웃 모델이며 앱에서 브랜드에 가장 적합하고 최상의 앱 사용자 환경을 만드는 레이아웃 및 탐색 모델을 이용해야 합니다. 컴포지션과 레이아웃은 창의적인 구현을 허용하며 작성자가 고유한 개성을 발휘할 수 있는 기회를 제공합니다.
앱에 대해 세로 방향과 가로 방향을 둘 다 고려해 보세요. 콘텐츠가 정렬되는 그리드가 세로 또는 가로 형식에서 가장 효과적인지 결정합니다. Windows의 최신 디자인 언어를 이용하는 앱이 점점 증가함에 따라 앱 레이아웃과 디자인에 대한 접근 방식도 각 앱의 개별 요구와 브랜드에 맞게 발전되고 있습니다. 레이아웃은 혁신을 시도하고 앱을 돋보이게 하는 데 적합한 영역입니다. Windows 그리드 시스템에 대한 자세한 내용은 앱 페이지 레이아웃을 참조하세요.
예제
Facebook은 강력한 그리드 기반 레이아웃을 사용하여 사용자가 Facebook에서 제공하는 모든 서비스를 바로 활용할 수 있도록 캔버스의 다양한 콘텐츠와 명령을 구성합니다.
.jpg "Facebook 앱")
Foursquare
Foursquare는 위치와 새로운 환경에 중점을 두는 앱입니다. 앱 레이아웃은 각 추천 위치를 표시하는 대담한 이미지를 사용하여 이 목표를 반영합니다. 등급 및 리뷰가 이미지 아래에 고정되고, 사용자가 쉽게 위치를 평가하고 탭하여 자세히 살펴볼 수 있도록 하는 통합 컴포지션을 만듭니다.
.jpg "Foursquare 앱, 마지막 체크 인 및 보류 중인 친구 요청")
Foursquare의 레이아웃은 동적이며 앱의 각 영역에서 콘텐츠에 가장 적합하게 재구성됩니다. 앱의 왼쪽으로 이동하면 주변의 인기 있는 장소 지도가 생성됩니다. 위치를 탭하면 사용자의 모든 체크 인 및 명령이 포함된 자세한 페이지가 표시됩니다. 이러한 항목을 탭하면 추천 정보가 표시됩니다.
.jpg "Foursquare 앱 지도 보기")
NOOK
Barnes and Noble의 NOOK 앱은 계층적 허브 기반 모델의 기본 개념을 사용하지만 세부적인 사용자 지정을 통해 독특한 NOOK 브랜드 환경을 만듭니다. 표지 이미지만 표시하는 대신 각 책 아래의 희미한 그림자를 통해 실제 책 같은 느낌을 줍니다. 이 경우 사실적 아날로그를 도입하여 사용자 환경을 개선합니다.
.jpg "NOOK 앱 라이브러리 페이지")