Android mobile storyboard (Sample)

ISEEYOU
Project Name
날짜
담당자 이름
(이메일 주소)

ISEEYOU
참고할 것들
• 모든 폰트는 DP 좌표계를 사용합니다.
• Fixed Coordinate를 쓸 경우 DP 좌표계를 사용합니다.
• 좌표 설정 시 RelativeLayout를 활용 가능하므로, 특정 UI Component를 기준으로 상대적 좌표를 입력할 수 있습니다.
• 디바이스는 크게 4가지로 나뉘어집니다.
– 320dp 스마트폰
– 400dp 태블릿폰 (2011 현재 삼성에서만 출시, 갤탭(2010)은 7인치지만 dp 분류상 갤노트와 같이 분류.)
– 600dp 7인치 태블릿
– 720dp(800dp) 10인치 태블릿.
– 참고 1: http://developer.android.com/guide/practices/screens_support.html
– 참고 2: http://android-developers.blogspot.com/2011/07/new-tools-for-managing-screen-sizes.html
• HVGA 스마트폰
(G1, 옵티머스원 등)
– RESOLUTION : 320px * 480px (320dp * 480dp)
– DENSITY DPI : mdpi, 160 dpi
– SCREEN SIZE : normal
• WVGA 스마트폰
(WVGA800: 넥서스원, 갤럭시S, 갤럭시S2 / WVGA854 : 모토로라 드로이드, XPERIA X10)
– RESOLUTION : 480px * 800px (320dp * 533dp) / 480px * 854px (320dp * 569dp)
– DENSITY DPI : hdpi, 240 dpi
– SCREEN SIZE : normal
• 7인치 태블릿
(킨들 파이어, 누크 태블릿)
– RESOLUTION : 600px * 1024px (600dp* 1024dp)
– SCREEN SIZE : large

ISEEYOU
참고할 것들
• 10인치 태블릿
(갤럭시탭 10.1, 모토로라 XOOM)
– RESOLUTION : 1280px * 800px(1280dp * 800dp) / 1280px * 720px(1280dp * 720dp)
– SCREEN SIZE : xlarge
• 갤럭시 노트
– DENSITY DPI : xhdpi, 320 dpi
– SCREEN SIZE : ??? (Gingerbread)
• 7인치 갤럭시탭(2010)
– DENSITY DPI : hdpi, 240 dpi
– SCREEN SIZE : large(Gingerbread)
• 갤럭시 넥서스
– DENSITY: 2.0
• hTC evo 4g
– DENSITY: 1.5
• 추가 참고 자료
– http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

ISEEYOU
기본 설계
• Structure 또는 Map을 표시
• 서로 연결되어 있거나, 독자적으로 동작하는 기능 (로그인 등)은 전체 구조에서 분리하고, Link
또는 Connection 방식으로 표현함
로그인
카테고리 채널 상품올리기 장바구니 설정
로그인 후 첫 화면

ISEEYOU
유저 플로우
• 필수 기능들에 대한 User Flow 혹은 Sequence Diagram을 표시

ISEEYOU
뷰 목록
• 메인 인터페이스 속성
– 하드웨어 옵션 버튼
– 그 외 Global User Interface 관련 사항들
• 앱 런칭 화면
• 앱 초기 화면
• 탭 1
– 하위 메뉴 1
– 하위 메뉴 2
• 탭 2
– 하위 메뉴 1
– 하위 메뉴 2
• 탭 3
– 하위 메뉴 1
– 하위 메뉴 2
• 탭 4
– 하위 메뉴 1
– 하위 메뉴 2
• 탭 5
– 하위 메뉴 1
– 하위 메뉴 2

ISEEYOU
메인 인터페이스 속성
• 레퍼런스 기기는 넥서스 S입니다. (기준이 되는 기기의 명칭이나 타입을 언급)
– Width 480px * Height 800px (320dp * 533dp) (자세한 내용은 링크 참조 http://www.androidpub.com/1895935)
– hdpi, 240dpi
• Portrait 화면을 기준으로 합니다. (Portrait, Landscape, 회전 대응 등의 사항 언급)
• 모든 버튼은 16dp를 기준으로 합니다. (button_name.png) (통합적인 UI 리소스에 대한 사항 정리)
• 상단 타이틀 바에 들어가는 텍스트는 20dp를 기준으로 합니다. (title_bar.png)
• 상품 목록의 텍스트는 제목 16dp, 세부 내용 12dp를 기준으로 합니다. (listview_panel.png)
• Native Text Label에 들어가는 텍스트는 12dp를 기준으로 합니다.

ISEEYOU
User Interface Image Kit (시안용 그래픽 리소스 모음)
Photoshop
12dp = 18px
16dp = 24px
20dp = 30px
PowerPoint
12dp = 10pt
16dp = 14pt
20dp = 18pt
(기준이 되는 폰트 크기를 시안과 비교하여 명시해 두면 좋
음)
16dp
12dp
20dp 12dp
16dp 텍스트 입력 테스트
12dp 서브 텍스트 입력 테스트
16dp 16dp
(모든 그래픽 리소스는 기준 스크린샷을 기준으로
실제 크기-비율과 동일하게 배치함)

ISEEYOU
뷰 제목 (하위 카테고리 제목)
•기본 구조
–Inner Activity (하단 탭이 있을 경우 Inner, 없을 경우 Outer로 명시)
–상품의 목록을 표시하는 페이지 (해당 뷰에 대한 개략적인 설명)
•A. 타이틀 바 (UI Component 명칭)
–0_title_bar.png (파일명)
–16 dp (폰트가 들어갈 경우 폰트 사이즈)
•B. 썸네일 이미지
–유저가 올린 상품에 대한 썸네일을 표시함 (기능 설명)
•C. 상품 목록
–상품 제목
• 판매자가 입력한 상품의 제목을 표시 (자세한 설명이 필요할 경우 분리)
• 16dp - 텍스트 내용이 길 경우, 3점 표시(…)로 생략
–상품 세부 설명
• 판매자가 설정한 실제 가격과 판매자의 닉네임을 표시
• 12dp
•D. 더 불러오기 패널 (버튼, 패널, 입력영역 등의 속성 명시)
–터치할 경우 10개의 상품 목록을 추가로 불러옴
–현재 표시된 목록의 하단에 추가로 붙여서 표시함
•상품 열람 절차 (유저 액션 절차를 설명함)
–성공
• 상품을 터치할 경우 상품 뷰 화면으로 이동 (뷰 제목을 정확히 명시)
–인터넷 접속에 문제가 있거나, 인증 서버에 문제가 있을 경우
• 확인 버튼이 있는 “네트워트가 불안정합니다. 잠시 후에 다시 시도해 주시기 바랍니
다.” 시스템 팝업 메시지를 띄움
• 확인 버튼을 누를 경우 팝업창을 닫음
타이틀 표시 영역
10,000원 / test_nickname
더 불러오기...
A
B C
D

ISEEYOU
뷰 제목 (하위 카테고리 제목)
•Android 개발 환경에 내장되어 있는 컴포넌트들
–http://developer.android.com/guide/topics/ui/index.html 참고
•Menu
–http://developer.android.com/guide/topics/ui/menus.html
•Native Notification
–http://developer.android.com/guide/topics/ui/notifiers/index.html
–Toast Notification
–Status Bar Notification
•Native Dialog
–http://developer.android.com/guide/topics/ui/dialogs.html
–Y/N Alert
–List
–List with Radio Button
–Loading Indicator
–Loading Progress Bar
Toast Notification Sample
최신순
정렬 기준 선택
인기순
저가순
고가순
검색 정렬

Android mobile storyboard (Sample)

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (16)

Android mobile storyboard (Sample)