Windows 런타임 앱에 대한 지침

Applies to Windows and Windows Phone

이 색인을 사용하여 유용한 Windows 스토어 앱을 디자인하는 데 도움이 되는 지침을 빠르게 찾아보세요. Windows 스토어 앱 만나보기비전 정의를 아직 읽지 않았으면 먼저 읽고 시작하세요.

UI 디자인 및 구현에 대한 자습서를 보려면 Windows 스토어 앱 UI 전체 프로세스(JavaScript 및 HTML 또는 C#/C++/VB 및 XAML)를 참조하세요.

모든 UX 지침을 포함하는 PDF(Portable Document Format) 파일을 다운로드하려면 클릭하세요.

지침을 다운로드하려면 클릭

기사 내용

애니메이션

체계적으로 잘 디자인된 애니메이션은 앱에 생명을 불어넣고 환경을 전문적이고 돋보이게 합니다. 시각적 전환을 사용하여 환경을 연계하고 사용자가 컨텍스트 변경을 이해할 수 있도록 합니다.

 

계약 및 참 메뉴

날씨 앱 및 검색 창

계약은 Windows 스토어 앱을 시스템 UI에 함께 바인딩합니다. 동일한 계약을 구현하는 두 앱을 함께 사용하여 포괄적이고 복잡한 시나리오를 완료할 수 있습니다. 공유 계약과 같은 일부 계약이 참 메뉴에 표시됩니다. 또한 검색, 장치 및 설정 참 메뉴에는 일반 작업을 위한 메뉴가 동일하게 제공됩니다.

앱 계약 전체 목록을 참조하세요.

 

컨트롤

컨트롤이 있는 동영상 플레이어 앱

콘텐츠를 보여 주는 앱 UI를 디자인합니다. 가장 관련 있는 요소만 화면에 표시하여 산만하지 않고 콘텐츠에 몰입할 수 있도록 합니다. 다음 지침을 따르면 일관되고 멋지고 흥미로운 사용자 환경을 제공하는 데 도움이 됩니다.

 

파일, 데이터 및 연결

데스크톱의 폴더에서 파일을 여는 데 사용되는 파일 선택기앱에서 폴더, 파일 및 데이터에 액세스합니다. 사용자가 계정 또는 클라우드 서비스(예: Microsoft OneDrive)에서 데이터에 액세스할 수 있도록 로그인 환경을 제공할 수 있습니다. 앱 데이터 로밍을 앱에 포함하여 장치 간에 통합된 환경을 제공하세요.

 

세계화 및 지역화

타일의 양방향 UI

Windows는 전 세계에서 사용되므로, 이 점을 고려하여 앱을 디자인하세요. 코드에서 리소스(예: UI 문자열 및 이미지)를 분리하면 쉽게 지역화할 수 있습니다.

 

도움말 및 지침

Cut the Rope 앱에서 Om Nom에게 사탕을 제공하기 위한 지침

사용자에게 도움말 또는 문제 해결 팁을 제공하고, 앱을 효율적으로 조작하는 방법을 교육합니다.

 

시작, 일시 중단 및 다시 시작

피플 앱의 시작 화면

시작 화면을 사용자 지정하여 방문하고 싶은 매력적인 실행 환경을 만드세요. 사용자가 다른 곳으로 전환하면 일시 중단하고 다시 돌아오면 다시 시작하도록 앱을 디자인하세요.

 

레이아웃 및 크기 조정

앱의 그리드 레이아웃

쉽게 탐색할 수 있도록 앱의 레이아웃을 디자인하고 모든 UI 요소를 최적의 위치에 배치하세요. 모든 폼 팩터 및 모든 뷰 옵션을 위한 적절한 앱 환경을 만드세요.

 

텍스트 및 입력

Segoe UI

글꼴 크기, 두께, 색, 자간, 공백 및 텍스트 상자 컨트롤을 적절하게 사용하면 Windows 스토어 앱이 간결하게 정리되어 사용하기 쉬워집니다.

 

타일 및 알림

시작 화면의 타일

타일은 앱으로 들어가는 문과 같습니다. 타일은 시작 화면에 배치된 앱의 확장으로 기존 아이콘보다 훨씬 더 개인적이고 관련된 정보를 제공할 수 있습니다. 사람들을 내 앱으로 유인할 수 있는 유용한 타일을 디자인하는 데 투자하세요. 사용자가 앱에 연결되어 있다는 느낌을 갖도록 라이브 타일과 알림을 통해 새로운 콘텐츠를 제공하세요.

 

사용자 조작

Windows 스토어 앱 터치 조작

사용자를 제어할 수 있도록 조작 환경을 디자인하고, 사용자가 명령을 정확하게 찾을 수 있도록 화면 또는 장치의 가장자리를 활용하세요.

 

관련 항목

Windows 스토어 앱 UI 전체 프로세스(HTML)
Windows 스토어 앱 UI 전체 프로세스(XAML)

 

 

표시:
© 2014 Microsoft