1 / 35

스타사인 Guideline for Android (480x800)

스타사인 Guide for android tab(800X1280) 2013.04.02 Updated. 스타사인 Guideline for Android (480x800). 2013. 3 . 1 1 Updated. Document History. 스타사인 Guideline for Android. 0.intro. 스타사인 Guideline for Android. 212. img_intro_logo.png 284 x 202 align : center. 202. bg_intro .png

heidi
Download Presentation

스타사인 Guideline for Android (480x800)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 스타사인 Guide for android tab(800X1280) 2013.04.02 Updated. 스타사인 Guideline for Android (480x800) 2013.3.11 Updated

  2. Document History 스타사인 Guideline for Android

  3. 0.intro 스타사인 Guideline for Android 212 img_intro_logo.png 284 x 202 align : center 202 bg_intro.png (Center, Top) 20 Ubuntu Titling/ 14dp / center, bottom / #f8cccc

  4. 1.1.login 스타사인 Guideline for Android Type 1 Helvetica regular 16dp ,#cccccc(입력전) #666666(입력후), center 132 202 Input_login.png 284 x 42 align : center 6 10 btn_login.png / _press.png 284 x 50

  5. 1.1.confirm 스타사인 Guideline for Android Type 1 Helvetica regular 16dp ,#cccccc(입력전) #666666(입력후), center 132 202 btn_resend.png / _press.png 78 x 42 input_confirm.png 202 x 42 10 btn_confirm.png / _press.png 284 x 50 4

  6. 2.2.statics_artist 스타사인 Guideline for Android 나눔고딕 bold/ 14dp / center, middle / FFFFFF 32 366 76 32 XX 38 38 40 XX bg color : #69add4 XX x 38 btn_close.png / _press.png 32 x 38 align-right img_static_title.png 76x 66 5:5비율로나누며 비활성화시컬 #dddddd 눌렀을때 #fffffff 38 tab_static_artist.png/_press.png 140 x 38center tab_static_business.png/_press.png 140 x 38 center

  7. 2.2.statics_artist 스타사인 Guideline for Android img_static_line.png 2x2 가로로 늘려서사용 나눔고딕 bold12dp ,#df4e4e, align-left ,middle 32 366 76 32 XX 나눔고딕 bold12dp ,#539ce7, align-left ,middle 38 66 32 34 178 88 40 나눔고딕 볼드 9dp ,#555555, align-right ,top 14 2 8 66 Helvetica regular 16dp ,#df4e4e, align-right ,middle 26 26 Helvetica regular 16dp ,#539ce7, align-right ,middle 32 1 36 24 img_static_group.png 56X36 / align-left, top 12 24 26 Graph_bar_bg_large.png 2X26 (가로로 늘여서사용) 26 Graph_bar_red_large.png 2x26 Graph_bar_blue_large.png 2x26

  8. 2.2.statics_artist 스타사인 Guideline for Android img_static_line.png 2x2 가로로 늘려서사용 32 366 76 32 XX 38 32 66 178 34 88 40 14 1 8 66 26 26 32 1 36 Helvetica regular 11dp ,#df4e4e, align-right ,middle 24 Helvetica regular 11dp ,#539ce7, align-right ,middle 12 24 나눔고딕 bold 11dp ,#444444, align-left ,middle Graph_bar_bg.png 2X12 (가로로 늘여서사용) 12 12 Graph_bar_red.png 2x12 Graph_bar_blue.png 2x12

  9. 2.2.statics_artist 스타사인 Guideline for Android 32 366 76 32 XX Ubuntu Titling bold 좌측부터 32dp ,26dp,20dp,16dp,14dp,14dp,14dp / #aaaaaa, center middle 38 40 66 24 32 2 36 img_static_indivisual.png 56X36 / align-right, top 46 24 6 6 52 52 Mask 24x 24 나눔고딕 볼드 9dp ,#444444, center middle Helvetica bold 12dp ,10dp, #999999, center middle mask_artist_photo.png 52x 24center middle

  10. 2.2.statics_business 스타사인 Guideline for Android 32 366 76 32 XX img_static_title_business.png 76x 66 38 40 66 img_static_line.png 2x2 가로로 늘려서사용 32 66 178 34 88 img_static_business.png 56X36 / align-left, top 22 다른부분은 아티스트 내용과 같으며 하단 그래프간 간격만 다름

  11. 2.2.home 스타사인 Guideline for Android XX 38 나눔고딕 bold/ 14dp / align left, middle / FFFFFF img_name_arrow.png 14x 38 YY 26 XX 38 32 YY 8 10 bg color : #f28b8b XX x 38 mask_home_photo.png 26x 38 168 btn_logout_normal.png btn_logout_press.png 32 x 38 / align-right, top Mask 26x 26 center middle 2 158 38 btn_comments_normal.png btn_comments_press.png 32x38, align-right, middle 136 198 26 bgcolor: #efefef font: UbuntuTitling bold / 10dp / #aaaaaa / align-left, middle

  12. 2.2.home 스타사인 Guideline for Android Ubuntu Titling bold/ 60dp / align left, middle / FFFFFF XX 38 YY 54 94 40 YY img_home_arrow_normal.png img_home_arrow_press.png 36X40 168 136 2 나눔고딕 regular/ 26dp / align left, middle / FFFFFF 158 bg_home.png Full x500 / left, top 가로폭 기준으로 늘려서 제일아래쪽 배경으로 사용하고 그위에 화이트bg로 덮음. 38 136 198 26 menu_starsign_normal.png menu_starsign_press.png 136X94

  13. 2.2.home 스타사인 Guideline for Android menu_message_normal.png menu_message_press.png 136X168 XX bar_statics_detail_dash.png 2x12 / align-left, top 가로로 늘려서 사용할 것. 38 Ubuntu Titling bold/ 16dp / align left,top/ #444444 26 164 26 YY 44 10 22 나눔고딕 regular / 13dp / align left, top / #333333 168 34 나눔고딕 regular / 9dp / align left, top / #999999 YY 2 44 img_home_line.png 2X2 /가로로 늘려서 사용 168 24 16 나눔고딕 regular / 10dp / align left, top / #999999 158 2 158 38 img_home_schedule_bleat.png 6x16 136 198 26 menu_schedule_normal.png menu_schedule_press.png 136X158

  14. 2.2.artist_list 스타사인 Guideline for Android img_home_layer_line_bg_top.png 2X38 가로폭을 늘려서 사용 Ubuntu Titling bold/18dp/ align left, middle / #444444 10 38 38 242 scroll area 44 btn_home_layer_static_normal.png btn_home_layer_static_press.png 64X38 /align-right,middle 28 img_home_layer_arrow.png 34X28 align-right img_home_layer_go.png 34X28 align-right 8 img_home_layer_line_bg_white.png(normal) img_home_layer_line_bg_grey.png(press) 2X28 가로폭을 늘려서 사용 나눔고딕 bold / 11dp / align left, middle / #888888 #ed7e7e(선택된컬러) bgcolor #000000 alpha 50%

  15. 2.2. artist_list 스타사인 Guideline for Android 38 img_home_layer_back.png 28X38 align left 나눔고딕 bold / 11p / align left, middle / #555555 10 242 scroll area 38 28 bgcolor #000000 alpha 50%

  16. 3.1.calculate 스타사인 Guideline for Android img_name_arrow.png 16x 44 나눔고딕 bold/ 14dp / center, middle / FFFFFF xx 366 32 32 68 38 38 40 XX XX btn_statics_back_normal.png btn_statics_back_press.png 32x38 / align- left, top btn_statics_search_normal.png btn_statics_search_press.png 32x38 / align- right, top img_all_title_line.png 68X6 align-left img_all_nextprev_divide.png 4X36 top Ubuntu Titling bold/ 34dp / align-left, middle / #7c7c7c scroll area btn_all_prev_normal.png btn_all_prev_press.png 54x36 top 6 36 30 18 8 54 6 54 12 33 btn_all_next_normal.png btn_all_next_press.png 54x36 align-right,top 나눔고딕 레귤러 / 11dp / align-left,middle / #555555 나눔고딕 레귤러 / 12dp / align-left,middle / #555555 38 나눔고딕 볼드 9dp ,#555555, align-right ,bottom btn_all_select_normal.9.png btn_all_sselect_press.9.png 186x22 top

  17. 3.1.calculate 스타사인 Guideline for Android xx 366 32 32 68 img_static_line.png 2x2 가로로 늘려서사용 38 40 나눔고딕 bold/12dp ,#df4e4e, align-left ,middle 나눔고딕 bold/12dp ,#539ce7, align-left ,middle 6 2 8 Helvetica regular 12dp ,#df4e4e,align-right middle 22 22 Helvetica regular 12dp ,#539ce7,align-right middle 32 2 8 22 scroll area 22 66 122 178 나눔고딕 bold / 12dp / #666666 / Align-left ,center 178 22 22 38 Graph_bar_bg.png 2X12 /align-left ,middle (가로로 늘여서사용) Graph_bar_red.png 2x12/align-left ,middle Graph_bar_blue.png 2x12 /align-left ,middle

  18. 3.1.calculate 스타사인 Guideline for Android xx 366 32 32 68 38 img_static_line.png 2x2 가로로 늘려서사용 나눔고딕 bold /14dp ,#666666 / Align-left , middle 40 22 32 2 12 22 32 10 scroll area 14 나눔고딕 regular / 14dp ,#666666 Align-right, middle img_all_check.png 20x14 align-left, middle img_all_dot_line.png XX x 2 align-left, top Helvetica regular /14dp ,#666666 Align-left ,middle 38

  19. 3.1.calculate_business_list 스타사인 Guideline for Android xx 366 32 32 68 38 40 img_filter_bg_line_red.png 2x38 align-left, top 늘여서사용 나눔고딕 bold /16dp/ center, middle / #FFFFFF, ‘s는 (#f38989) XX 38 38 scroll area img_filter_bg_line_darkgrey.png 2x38 align-left, top 늘여서사용 나눔고딕 bold / 14dp / align-center, middle / #bbbbbb img_filter_bg_line_grey.png 2x38 align-left, top 늘여서사용 38

  20. 3.1.calculate_overall 스타사인 Guideline for Android xx 366 32 32 68 P.16 참조 38 40 img_alllist_line.png 2x8 align-left, top 늘여서사용 8 38 XX 116 116 scroll area Bgcolor #FFFFFF xx X 46 bottom tab_all_normal.png tab_all_press.png 116x30 align-right, top tab_moneylist_normal.png tab_moneylist_press.png 116x30 align-right, top 38

  21. 3.2.calculate_breakdown 스타사인 Guideline for Android tab_list_income_normal.png tab_list_income_press.png 116x34 align-right, top 366 32 32 68 tab_moneylist_line.png 2x10 align-left, bottom 늘여주세요 38 tab_list_spend_normal.png tab_list_spend_press.png 116x34 align-right, top 40 나눔고딕 regular /14dp/ Align-left, top/ #333333 66 34 66 34 scroll area 82 112 44 32 32 24 XX Bgcolor#ededed 나눔고딕 regular 11dp / helveitca regular 12dp /Align-right, top/ #e05757 나눔고딕 regular /11dp/ Align-left, top/ #999999 38 나눔고딕 regular 11dp / helveitca regular 12dp /Align-right, top/ #4990d9 img_moneylist_bg_normal.9.png img_moneylist_bg_press.9.png 292x82 / left, top

  22. 3.1.calculate_advance 스타사인 Guideline for Android img_static_line.png 2x2 가로로 늘려서사용 align-left, top xx 366 32 32 68 38 40 나눔고딕 bold 13dp / #be4848(레드), #407cb9(블루), #333333(검정)/ Align-right , middle 66 나눔고딕 볼드 9dp ,#555555, align-right ,top 14 2 32 Helvetica regular 13dp /#be4848(레드), #407cb9(블루), #333333(검정) Align-right , middle 32 32 34 scroll area 나눔고딕 볼드 11dp ,#555555, align-right ,middle 32 img_all_dot_line.png XX x 2 align-left, bottom 800기준이미지 38 img_advance_line.png 2x2 align-left, bottom 가로로 늘여주세요

  23. 3.1.calculate_advance 스타사인 Guideline for Android xx 366 32 32 68 38 40 66 나눔고딕 bold 11dp / #666666/ Align-right , bottom Helvetica regular 11dp ,#4990d9, Align-right , bottom 18 40 14 8 scroll area Helvetica regular 10dp ,#bbbbbb, Align-right , bottom img_advance_line.png 2x2 align-left, bottom 가로로 늘여주세요 38

  24. 3.3.calculate_summary_list 스타사인 Guideline for Android xx 32 126 38 Ubuntu Titling bold 21dp ,16dp /#999999, Align-left , middle 76 나눔고딕 bold 11dp / #555555/ Align-left , middle 나눔고딕 bold 11dp ,#736969, Align-right , middle 76 32 48 88 6 32 18 20 18 20 scroll area img_summary_arrow.png 48x38 align-right, top img_calculate_summary_divide_line.png 22x38 align-right, top Helvetica regular 14dp 나눔고딕 bold 11dp , #e05757, Align-right , middle img_calculate_summary_list_line.png 2x2 align-left, bottom 가로로 늘여주세요 Bgcolor : #ffffff(선택시) Bgcolor : #f3f3f3

  25. 3.4.calculate_detail 스타사인 Guideline for Android Ubuntu Titling bold 22dp / #f28b8b/ Align-left , bottom 전체박스 bg img_summary_detail_bg.9.png 260x278 align-left, top img_summary_arrow_top.png img_summary_arrow_bottom.png 20x6 align-left, top 테두리 박스 라인과 겹치게 위로 올려 놓아주세요 xx 32 126 img_calculate_detail_line.png 2x16 align-left, top 가로로 늘여주세요 38 76 16 228 16 48 btn_summary_close_normal.png btn_summary_close_press.png 22x20 align-right, bottom 16 22 나눔고딕 bold 10dp ,#555555, Align-right , middle 나눔고딕 bold 10dp ,#777777, Align-right , middle 22 scroll area scroll area 158 20 img_summary_bar.png 2x2 / align-left middle 70 38 btn_comments_normal.png btn_comments_press.png 32x38, align-right, middle bgcolor: #efefef font: UbuntuTitling bold / 10dp / #aaaaaa / align-left, middle

  26. 3.5.search 스타사인 Guideline for Android img_search_titleimg.png 318x226 / align-center,top btn_search_close_normal.png btn_search_close_press.png 32x38 / align-right, top xx xx 226 btn_select_menu_normal.9.png btn_select_menu_press.9.png 140x26 38 88 공통 타이틀 font: (조회기간 , 사업구분 , 수입/지출구분) 나눔고딕볼드/ 11dp / #666666 / align-left, top 나눔고딕볼드/ 10dp / #777777 / align-center , middle 226 20 26 139 40 139 26 72 20 26 26 20 나눔고딕볼드/ 11dp / #ffffff(비활성화) #333333(선택시) / align-center , middle 26 106 106 106 44 40 156 bgcolor: #C7C7C7 btn_select_tab_press.9.png 106x26 bgcolor: #e5e5e5 btn_search_normal.9.png btn_search_press.9.png 96x40 / center, top

  27. 4.schedule_list 스타사인 Guideline for Android btn_schedule_back_normal.png btn_schedule_back_press.png 32x38 / align- left, top 나눔고딕 bold/ 14dp / center, middle / FFFFFF btn_schedule_list_normal.png btn_schedule_list_press.png 32x38 / align- right, top 38 bgcolor: #8c6fd5 124 Ubuntu Titling bold 36dp / #666666/ Align-center , middle 20 XX XX 202 106 36 36 18 34 Ubuntu Titling bold 20dp / #cccccc/ Align-center , middle btn_schedule_next_normal.9.png btn_schedule_next_press.9.png btn_schedule_prev_normal.9.png btn_schedule_prev_press.9.png 166x54 / align- left, top 76 6 70 Ubuntu Titling bold 11dp / #e46868 (일요일)#5490b3(토요일) #aaaaaa(평일) / Align-left , middle

  28. 4.schedule_list 스타사인 Guideline for Android 나눔고딕 bold/ 14dp / center, middle / FFFFFF 이전달 이번달 오늘 38 img_scedule_line.png 2x2 / align-left, top/가로로 늘여서 사용 3가지 타입 다 사용. Helvetica regular 9dp ,#ffffff,align-right , top 70 6 6 Helvetica regular 9dp , 이전달 -#aaaaaa 이번달 -#555555 오늘 -#ffffff align-right , top 20 16 106 16 100 YY 8 6 66 XX 4 4 icon_schedule_more_normal.png icon_schedule_more_on.png 22x14 align-bright, bottom Bg color 이전달 -#f7f7f7 이번달 -#ffffff 오늘 -#b6a4e3 나눔고딕레귤러 / 8dp / #000000 / align-left , middle img_schedule_detail_bg.png 2x16 align-right, bottom 늘여서사용 76

  29. 4.schedule_list_view 스타사인 Guideline for Android btn_schedule_view_normal.png btn_schedule_view_press.png 32x38 / align- right, top 나눔고딕 bold/ 14dp / center, middle / FFFFFF 38 20 bg_list_bar.png 2x20 이미지 가로로 늘려서 사용. 52 100 Presscolor: #ffffff font: UbuntuTitling bold / 11dp / #FFFFFF / align: left:10dp, middle img_list_statics_line.png 2X2 / align- left, bottom 가로로 늘여서 사용 나눔고딕볼드/ 10dp / 지난 스케쥴 #aaaaaa ,현재스케쥴#5930bf,다가올스케쥴 #555555 align-left, middle Scroll 10 18 14 Helvetica regular / 9dp / 지난 스케쥴#aaaaaa ,현재스케쥴#aaaaaa, 다가올스케쥴 #8c6fd5/ align-center , middle 10 10 20 24 4 icon_schedulebar_type1~4.png 24x14 / align- left, middle img_list_statics_arrow.png 20X34 / align- right,middle 202 bgcolor: #f3f3f3

  30. 4.schedule_list_view 스타사인 Guideline for Android btn_schedule_refresh_normal.png btn_schedule_refresh_press.png btn_schedule_refresh_off.png 32x20 / align-right, bottom bg_list_bar_purple.png 2x20 이미지 가로로 늘려서 사용. 38 20 52 32 100 12 font: UbuntuTitling bold / 11dp / #FFFFFF / align- left, middle 나눔고딕 regular/ 17dp / align-left, top / #222222 10 12 12 icon_schedulebar_type1~4.png 24x14 / align- left, middle 48 Scroll Helvetica regular / 11dp / #999999 align-left , top 40 14 14 4 24 28 나눔고딕 bold/ 11dp / align-left, top / #333333 Helvetica regular / 10dp / #999999 /Align-right, top 8 10 나눔고딕 regular/ 11dp / align-left, top / #666666 202 bgcolor: #ffffff bar_statics_detail_dash.png 2x12 / align-left, top 가로로 늘려서 사용할 것. bg_detail_view_line.png 2x2 / align-left, top 세로로 늘려서 사용할 것.

  31. 4.schedule_list_view 스타사인 Guideline for Android btn_message_back_normal.png btn_message_back_press.png 32x38 / align- right, top bgcolor #ea815c 38 20 bg_list_bar.png 2x20 이미지 가로로 늘려서 사용. 66 font: UbuntuTitling bold / 11dp / #FFFFFF / align: left:10dp, middle img_list_statics_line.png 2X2 / align- left, bottom 가로로 늘여서 사용 Presscolor: #ffffff 나눔고딕볼드/ 10dp / #555555/ align-left, middle 8 Scroll 16 14 14 12 10 20 Helvetica regular / 9dp / #aaaaaa / align-center , middle 나눔고딕볼드 / 9dp / #999999/ align-left, middle img_list_statics_arrow.png 20X34 / align- right,middle 메세지 에서만 하단 구분라인이 있습니다. img_message_footer_line.png 2x2, align-left,top / 가로로 늘여서 사용 202 bgcolor: #f3f3f3

  32. 4.schedule_list_view 스타사인 Guideline for Android bg_list_bar_orange.png 2x20 이미지 가로로 늘려서 사용. 나눔고딕 bold/ 14dp / center, middle / FFFFFF 38 20 52 32 12 font: UbuntuTitling bold / 11dp / #FFFFFF / align- left, middle 나눔고딕 regular/ 17dp / align-left, top / #222222 10 12 12 48 Scroll Helvetica regular / 11dp / #999999 align-left , top 28 xx yy Mask size : 288x216 4:3비율로 늘려주세요 16 202 나눔고딕 regular/ 11dp / align-left, top / #666666 bgcolor: #ffffff bg_detail_view_line.png 2x2 / align-left, top 세로로 늘려서 사용할 것.

  33. 6.question 스타사인 Guideline for Android Mask 26x 26 center middle XX mask_question_photo.png 26x 26 14 font: 나눔고딕 bold/ 11dp / #cdb4b4 / align- center, top font: 나눔고딕 bold/ 12dp / #555555 / align- left, top 8 10 26 14 18 12 26 8 나눔고딕 bold/ 10dp / #f28b8b / align- center, top font: 나눔고딕 bold/ 11dp / #cdb4b4 / align- center, top 24 XX 15 12 img_question_right_bg.9.png 60x 40 최대 width 330 img_question_left_bg.9.png 64x 42 최대 width 330 bgcolor: #fff1f1

  34. 6.question 스타사인 Guideline for Android XX 14 btn_question_normal.png btn_question_press.png 72x74 / align-right , top 10 84 10 img_question_bg_box.9.png 68x50 align-left, top 늘여서사용 xx 10 10 8 bgcolor: #e9d4d4

  35. 7.loading 스타사인 Guideline for Android 76 410 76 loading_ani1.png loading_ani2.png loading_ani3.png . . loading_ani9.png (center,410) 76X76 / aling-center, middle

More Related