[모바일 web] 모바일 웹 디자인 가이드

[web]모바일 웹(APP) 디자인 가이드

 

※ 안드로이드 기준으로 설명하고 있고 반드시 정해진 규칙에 따라야 하는 것은 아니나

    기본적인 가이드를 따르면 훨씬 보기 좋은 디자인을 만드는데 도움이 될 수 있다.

 

 

• 기기 및 디스플레이

1. 다양한 높이와 너비를 지원하기 위해 레이아웃을 유연하게 작업한다.
2. 화면의 크기에 맞추어 레이아웃을 최적화 한다.
3. 여러 종류의 화면해상도 리소스를 제공해야 한다.

 

 

 

• 테마

1. 일관적인 스타일을 적용할 수 있도록 안드로이드가 제공하는 3가지 시스템 테마                     (아이스크림 샌드위치)
2. 3개의 테마를 기준으로 수정한 디자인(스타일) 적용 가능 

 

 

• 터치 피드백

1. 터치 및 제스처 결과를 강조하고 가능과 불가능 액션을 표시
2. 다양한 상태를 알려주는 터치 피드백 디자인

 

• 길이 및 격자

1. 터치할 수 있는 UI는 48DP단위를 기준으로 한다. (약 9mm)
2. 터치 스크린의 추천크기 7-10mm 손으로 원하는 행동 수행 가능
3. 각 UI 요소간 공백은 8DP로 설정

 

 

• 아이콘_런처

1. 런처 아이콘의 크기는 48*48DP이며, XHDPI의 경우 96*96px로 제작한다.
2. 구글 플레이에서 런처 아이콘은 512*512px이다.
3. 사용자가 입체감을 느낄 수 있도록 정면의 약간 위에서 본 3D형태의 뚜렷한 실루엣을 사용한다.

 

• 아이콘_액션 바

1. 새로고침 같이 일반적으로 사용되는 아이콘은 이미 정의되어 지정된 아이콘을 사용한다.         (개발자 사이트에서 다운로드 가능)

 

 

1. 액션바 아이콘영역은 32*32DP 이며 표시영역은 24*24DP이다.

 

 

1. 뚜렷한 형태로 평면적이고 단순한 형태로 만들고 긴 형태는 45도 회전한다.

 

 

 

• 아이콘_작은 아이콘, 컨텍스트 아이콘

1. 작은 아이콘영역은 16*16DP 이며 표시영역은 12*12DP이다.

 

 

1. 평면적이고 단순한 형태로 만들고 긴 형태는 45도 회전한다.

 

 

1. 배경에 잘 대조되는 색을 사용하고 색을 통하여 구분한다

 

 

• 아이콘_알림

1. 알림 아이콘영역은 24*24DP 이며 표시영역은 22*22DP이다.
2. 평면적이고 단순한 형태로 만들고 긴 형태는 45도 회전한다.
3. 알림 아이콘은 반드시 전체가 흰색으로 되어야 한다. 시스템에서 아이콘을 어둡게 하거나 축소한다.