쇼핑 앱

Applies to Windows and Windows Phone

쇼핑 앱 아이디어 북에는 Windows 8.1용 가상 쇼핑 앱에 대한 설명이 포함되어 있습니다. 이 항목의 시나리오를 검토하고 Microsoft 디자인 언어를 앱에서 활용하는 방법을 파악하면 쇼핑 앱 디자인에 대한 아이디어를 얻을 수 있습니다.

사용 가능한 샘플 코드: Tallan Inc.는 쇼핑 앱 아이디어 북에 따라 멋진 샘플 앱을 만들었습니다. 샘플 앱을 다운로드하여 이 아이디어 북에 설명된 기능과 추가 기능의 실제 구현을 확인할 수 있습니다. 여기서 Tallan 샘플 쇼핑 앱을 다운로드하세요.

쇼핑 앱 시나리오

이 항목에서 설명하는 쇼핑 앱은 Microsoft 디자인 기능을 통해 사용자를 위한 효율적인 쇼핑 환경을 만듭니다.

라이브 타일 및 탐색검색 및 창 크기 조정공유
라이브 타일 및 탐색 이미지검색 이미지공유 이미지

 

사용자가 앱의 콘텐츠에 주목하도록 만들기

Microsoft 디자인 언어를 사용하여 일상적인 탐색 환경을 효율적이면서도 쉽고 재미있게 만들 수 있습니다. 라이브 타일을 통해 사용자가 앱의 콘텐츠에 주목하도록 할 수도 있습니다. 이 시나리오에 따라 효율적인 쇼핑 앱을 만드는 방법을 파악할 수 있습니다.

라이브 타일 및 탐색 이미지

Matt Berg는 버스로 출근할 때 Windows 8.1 태블릿을 사용합니다.

라이브 타일 및 탐색 이미지

Matt는 "신상품:" 알림이 표시되는 라이브 타일을 통해 가을 신상품 출시를 확인합니다. Matt는 신상품을 확인하기 위해 타일을 클릭하여 앱을 실행합니다.

라이브 타일 및 탐색 이미지

Matt는 새 재킷을 구입하기 위해 "상의" 범주를 클릭합니다.

라이브 타일 및 탐색 이미지

범주 보기는 가로로 표시되며 모든 옵션의 세부 보기가 같은 캔버스에 표시됩니다. 따라서 Matt는 콘텐츠 계층 구조를 탐색하지 않고도 원하는 콘텐츠를 찾을 수 있습니다.

라이브 타일 및 탐색 이미지

Matt는 손가락을 모아 시맨틱 줌을 활성화하여 항목 목록을 빠르게 확인 및 탐색할 수 있습니다.

라이브 타일 및 탐색 이미지

Matt는 "재킷" 섹션을 클릭한 후 재킷을 선택해 항목 보기에 표시한 다음 쇼핑 카트에 추가합니다.

라이브 타일 및 탐색 이미지

Matt는 이전에 쇼핑 카트에 추가한 셔츠와 함께 재킷을 구매하고 쇼핑을 마칩니다.

라이브 타일 및 탐색 이미지

 

라이브 타일 및 검색 시나리오

이 시나리오에서는 다음 디자인 요소를 활용하는 사용 사례를 확인합니다.

  • 라이브 타일은 사용자와 관련이 있는 정보를 표시하여 사용자의 주의를 다시 앱으로 전환시키는 역할을 합니다.
  • 따라서 크롬을 사용하지 않아도 앱의 콘텐츠를 강조할 수 있으며, 사용자가 관심 환경에 주목하도록 할 수 있습니다.

라이브 타일 및 시맨틱 줌에 대한 자세한 내용은 다음 항목을 참조하세요.

앱에 가장 적합한 탐색 패턴을 선택하는 방법을 보려면 탐색 패턴을 참조하세요.

앱 기능 전체 프로세스 시리즈의 일부로 플랫 탐색 패턴의 작동 방법을 살펴보세요.

사용자의 작업 유도

Microsoft 디자인 언어를 통해 검색 상자 추가, 검색 계약 구현 및 사용자의 멀티태스킹 허용, 좁은 너비에 맞게 크기가 조정될 때 제대로 작동하는 앱 디자인 등을 수행하여 사용자가 쇼핑할 준비가 되었을 때 사용자를 유도할 수 있습니다.

라이브 타일 및 탐색 이미지

Jon Rodman은 Windows 8.1 태블릿을 사용하여 스타일 블로그를 탐색합니다.

라이브 타일 및 탐색 이미지

Jon은 Internet Explorer 또는 기타 앱의 오른쪽에서 검색 참을 실행하여 비슷한 재킷을 검색할 수 있습니다.

라이브 타일 및 탐색 이미지

라이브 타일 및 탐색 이미지

Jon이 "코디법" 앱을 선택하면 "재킷"이라는 용어에 대한 검색 결과가 표시됩니다.

라이브 타일 및 탐색 이미지

Jon은 필터를 사용하여 가격을 기준으로 검색 결과를 좁힙니다. 그런 후에 항목을 선택합니다.

라이브 타일 및 탐색 이미지

Jon은 항목을 블로그의 재킷과 비교할 수 있도록 앱 크기를 왼쪽으로 조정합니다. 그런 다음 선택한 항목에 만족하면 재킷을 카트에 추가합니다.

라이브 타일 및 탐색 이미지

Jon은 좁은 너비에 있는 상태로 구매를 완료합니다.

라이브 타일 및 탐색 이미지

 

사용자 작업 유도 요약

이 시나리오에서는 다음 디자인 요소를 활용하는 사용 사례를 확인합니다.

  • 검색 계약은 고객이 쇼핑할 준비가 되면 앱을 잠재적 대상 목록에 배치합니다.
  • 좁은 너비에서 제대로 작동하는 앱을 통해 고객은 콘텐츠를 찾은 다음 다른 앱 및 웹 사이트와 비교할 수 있습니다.

검색 및 창 크기에 대한 자세한 내용은 다음 항목을 참조하세요.

공유를 통한 연결

Microsoft 디자인 언어를 통해 사용자를 다른 앱, 연락처 또는 소셜 네트워크와 연결할 수 있습니다.

라이브 타일 및 탐색 이미지

David Hamilton은 방금 새 재킷을 구매했습니다. 주문을 한 후 David는 해당 상품의 정보를 친구들에게 소개하려고 합니다.

라이브 타일 및 탐색 이미지

David는 공유 계약을 사용해 홍보 코드를 친구들과 공유합니다.

라이브 타일 및 탐색 이미지

 

공유를 통한 사용자 연결 요약

이 시나리오에서는 다음 디자인 요소를 활용하는 사용 사례를 확인합니다.

  • 콘텐츠를 공유 소스로 지정하면 Windows 8.1을 통해 다른 앱, 메일 및 소셜 네트워크에 연결할 수 있습니다.
  • 앱을 공유 대상으로 지정하고 콘텐츠, 링크 또는 기타 유형의 구조화된 데이터를 받을 수 있습니다.

공유에 대한 자세한 내용은 다음 항목을 참조하세요.

관련 항목

Windows 스토어 앱 만나보기
Windows 스토어 앱용 UX 지침
샘플 쇼핑 앱
라이브 타일 샘플
라이브 타일 지침
시맨틱 줌 샘플(C#/VB/C++)
시맨틱 줌 샘플(JavaScript)
시맨틱 줌 지침
검색 샘플
검색 지침
창 크기 지침
좁은 레이아웃 지침
공유 원본 샘플
공유 대상 샘플
공유 지침

 

 

표시:
© 2014 Microsoft