Android mobile storyboard (Sample)

17,867 views
18,179 views

Published on

안드로이드용 어플리케이션 기획서 샘플입니다.
원하시는대로 수정하여 사용하시기 바랍니다.


* 샘플에 포함되어 있는 버튼 및 배경 이미지는 (주)아이씨유에 귀속되어 있는 그래픽 리소스이므로, 상업적 사용을 금지합니다.

Published in: Design
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
17,867
On SlideShare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
564
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

Android mobile storyboard (Sample)

  1. 1. ISEEYOU Project Name 날짜 담당자 이름 (이메일 주소)
  2. 2. 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) – DENSITY DPI : mdpi, 160 dpi – SCREEN SIZE : large
  3. 3. ISEEYOU 참고할 것들 • 10인치 태블릿 (갤럭시탭 10.1, 모토로라 XOOM) – RESOLUTION : 1280px * 800px(1280dp * 800dp) / 1280px * 720px(1280dp * 720dp) – DENSITY DPI : mdpi, 160 dpi – SCREEN SIZE : xlarge • 갤럭시 노트 – RESOLUTION : 800px * 1280px (400dp * 640dp) – DENSITY DPI : xhdpi, 320 dpi – SCREEN SIZE : ??? (Gingerbread) • 7인치 갤럭시탭(2010) – RESOLUTION : 600px * 1024px (400dp * 682dp) – DENSITY DPI : hdpi, 240 dpi – SCREEN SIZE : large(Gingerbread) • 갤럭시 넥서스 – RESOLUTION : 720px * 1280px (360dp * 640dp) – DENSITY: 2.0 • hTC evo 4g – RESOLUTION : 540px * 960px (360dp * 640dp) – DENSITY: 1.5 • 추가 참고 자료 – http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density
  4. 4. ISEEYOU 기본 설계 • Structure 또는 Map을 표시 • 서로 연결되어 있거나, 독자적으로 동작하는 기능 (로그인 등)은 전체 구조에서 분리하고, Link 또는 Connection 방식으로 표현함 로그인 카테고리 채널 상품올리기 장바구니 설정 로그인 후 첫 화면
  5. 5. ISEEYOU 유저 플로우 • 필수 기능들에 대한 User Flow 혹은 Sequence Diagram을 표시
  6. 6. ISEEYOU 뷰 목록 • 메인 인터페이스 속성 – 하드웨어 옵션 버튼 – 그 외 Global User Interface 관련 사항들 • 앱 런칭 화면 • 앱 초기 화면 • 탭 1 – 하위 메뉴 1 – 하위 메뉴 2 • 탭 2 – 하위 메뉴 1 – 하위 메뉴 2 • 탭 3 – 하위 메뉴 1 – 하위 메뉴 2 • 탭 4 – 하위 메뉴 1 – 하위 메뉴 2 • 탭 5 – 하위 메뉴 1 – 하위 메뉴 2
  7. 7. 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를 기준으로 합니다.
  8. 8. 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 16dp 텍스트 입력 테스트 (모든 그래픽 리소스는 기준 스크린샷을 기준으로 실제 크기-비율과 동일하게 배치함)
  9. 9. ISEEYOU 뷰 제목 (하위 카테고리 제목) •기본 구조 –Inner Activity (하단 탭이 있을 경우 Inner, 없을 경우 Outer로 명시) –상품의 목록을 표시하는 페이지 (해당 뷰에 대한 개략적인 설명) •A. 타이틀 바 (UI Component 명칭) –0_title_bar.png (파일명) –16 dp (폰트가 들어갈 경우 폰트 사이즈) •B. 썸네일 이미지 –유저가 올린 상품에 대한 썸네일을 표시함 (기능 설명) •C. 상품 목록 –상품 제목 • 판매자가 입력한 상품의 제목을 표시 (자세한 설명이 필요할 경우 분리) • 16dp - 텍스트 내용이 길 경우, 3점 표시(…)로 생략 –상품 세부 설명 • 판매자가 설정한 실제 가격과 판매자의 닉네임을 표시 • 12dp •D. 더 불러오기 패널 (버튼, 패널, 입력영역 등의 속성 명시) –터치할 경우 10개의 상품 목록을 추가로 불러옴 –현재 표시된 목록의 하단에 추가로 붙여서 표시함 •상품 열람 절차 (유저 액션 절차를 설명함) –성공 • 상품을 터치할 경우 상품 뷰 화면으로 이동 (뷰 제목을 정확히 명시) –인터넷 접속에 문제가 있거나, 인증 서버에 문제가 있을 경우 • 확인 버튼이 있는 “네트워트가 불안정합니다. 잠시 후에 다시 시도해 주시기 바랍니 다.” 시스템 팝업 메시지를 띄움 • 확인 버튼을 누를 경우 팝업창을 닫음 타이틀 표시 영역 16dp 텍스트 입력 테스트 10,000원 / test_nickname 16dp 텍스트 입력 테스트 10,000원 / test_nickname 16dp 텍스트 입력 테스트 10,000원 / test_nickname 16dp 텍스트 입력 테스트 10,000원 / test_nickname 16dp 텍스트 입력 테스트 10,000원 / test_nickname 더 불러오기... A B C D
  10. 10. 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 최신순 정렬 기준 선택 인기순 저가순 고가순 검색 정렬

×