Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Android mobile storyboard (Sample)

20,638 views

Published on

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


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

Published in: Design
  • Be the first to comment

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 최신순 정렬 기준 선택 인기순 저가순 고가순 검색 정렬

×