Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Like this? Share it with your network

Share

Android mobile storyboard (Sample)

on

  • 10,357 views

안드로이드용 어플리케이션 기획서 샘플입니다....

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


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

Statistics

Views

Total Views
10,357
Views on SlideShare
5,058
Embed Views
5,299

Actions

Likes
6
Downloads
375
Comments
0

15 Embeds 5,299

http://wontak.blogspot.kr 3969
http://wontak.blogspot.com 1253
http://wontak.blogspot.jp 30
http://mihye.co.kr 12
http://wontak.blogspot.com.au 10
http://wontak.blogspot.ca 6
http://www.slashdocs.com 4
http://wontak.blogspot.co.nz 4
http://wontak.blogspot.de 4
http://wontak.blogspot.in 2
http://www.blogger.com 1
http://webcache.googleusercontent.com 1
http://wontak.blogspot.co.uk 1
http://wontak.blogspot.com.tr 1
http://wontak.blogspot.hk 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Android mobile storyboard (Sample) Presentation Transcript

  • 1. ISEEYOUProject Name 날짜 담당자 이름 (이메일 주소)
  • 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. 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. ISEEYOU기본 설계• Structure 또는 Map을 표시• 서로 연결되어 있거나, 독자적으로 동작하는 기능 (로그인 등)은 전체 구조에서 분리하고, Link 또는 Connection 방식으로 표현함 로그인 후 첫 화면 로그인 카테고리 채널 상품올리기 장바구니 설정
  • 5. ISEEYOU유저 플로우• 필수 기능들에 대한 User Flow 혹은 Sequence Diagram을 표시
  • 6. ISEEYOU뷰 목록• 메인 인터페이스 속성 – 하드웨어 옵션 버튼 – 그 외 Global User Interface 관련 사항들• 앱 런칭 화면• 앱 초기 화면• 탭1 – 하위 메뉴 1 – 하위 메뉴 2• 탭2 – 하위 메뉴 1 – 하위 메뉴 2• 탭3 – 하위 메뉴 1 – 하위 메뉴 2• 탭4 – 하위 메뉴 1 – 하위 메뉴 2• 탭5 – 하위 메뉴 1 – 하위 메뉴 2
  • 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. ISEEYOUUser Interface Image Kit (시안용 그래픽 리소스 모음) (모든 그래픽 리소스는 기준 스크린샷을 기준으로 실제 크기-비율과 동일하게 배치함) 20dp 12dp 12dp Photoshop 12dp = 18px 16dp = 24px 20dp = 30px PowerPoint 12dp = 10pt 16dp = 14pt 16dp 16dp 16dp 20dp = 18pt (기준이 되는 폰트 크기를 시안과 비교하여 명시해 두면 좋 음) 16dp 텍스트 입력 테스트 16dp 텍스트 입력 테스트 12dp 서브 텍스트 입력 테스트
  • 9. ISEEYOU뷰 제목 (하위 카테고리 제목) • 기본 구조A –Inner Activity (하단 탭이 있을 경우 Inner, 없을 경우 Outer로 명시) –상품의 목록을 표시하는 페이지 (해당 뷰에 대한 개략적인 설명) 타이틀 표시 영역B C • A. 타이틀 바 (UI Component 명칭) 16dp 텍스트 입력 테스트 –0_title_bar.png (파일명) –16 dp (폰트가 들어갈 경우 폰트 사이즈) 10,000원 / test_nickname • B. 썸네일 이미지 16dp 텍스트 입력 테스트 –유저가 올린 상품에 대한 썸네일을 표시함 (기능 설명) 10,000원 / test_nickname • C. 상품 목록 16dp 텍스트 입력 테스트 –상품 제목 • 판매자가 입력한 상품의 제목을 표시 (자세한 설명이 필요할 경우 분리) 10,000원 / test_nickname • 16dp - 텍스트 내용이 길 경우, 3점 표시(…)로 생략 –상품 세부 설명 • 판매자가 설정한 실제 가격과 판매자의 닉네임을 표시 16dp 텍스트 입력 테스트 • 12dp 10,000원 / test_nickname • D. 더 불러오기 패널 (버튼, 패널, 입력영역 등의 속성 명시) –터치할 경우 10개의 상품 목록을 추가로 불러옴 16dp 텍스트 입력 테스트 –현재 표시된 목록의 하단에 추가로 붙여서 표시함 10,000원 / test_nickname • 상품 열람 절차 (유저 액션 절차를 설명함)D –성공 더 불러오기... • 상품을 터치할 경우 상품 뷰 화면으로 이동 (뷰 제목을 정확히 명시) –인터넷 접속에 문제가 있거나, 인증 서버에 문제가 있을 경우 • 확인 버튼이 있는 “네트워트가 불안정합니다. 잠시 후에 다시 시도해 주시기 바랍니 다.” 시스템 팝업 메시지를 띄움 • 확인 버튼을 누를 경우 팝업창을 닫음
  • 10. ISEEYOU뷰 제목 (하위 카테고리 제목) • Android 개발 환경에 내장되어 있는 컴포넌트들 –http://developer.android.com/guide/topics/ui/index.html 참고 Toast Notification Sample • 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 고가순 검색 정렬