감사일기 Design(130303)

1,101 views

Published on

디자인 가이드라인

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

  • Be the first to like this

No Downloads
Views
Total views
1,101
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

감사일기 Design(130303)

  1. 1. 감사일기 Design guideline v1.0(130303) Galaxy S2 HD LTE (1280*720)기준으로 작성 남은 작업: 앱 아이콘, 앱센터 소개, 튜토리얼
  2. 2. 0.0 인트로 인트로 앱센터 소개
  3. 3. 20 1.0 목록 - 메인화면 50 (Notification bar) 1120 110A B BG image (9 patch)A Properties png image Position 0, -50 적용 Size 720X110(반복) File name title_bar.9.png Soft key imageB Properties png image Position 615, -50 적용 Size 89*83 File name menu.png C BG imageC Properties jpg image Position 적용 Size 300*300 (반복) File name bg.jpg 85 * 상단바 텍스트:나눔고딕 extra bold, 50pt , #ffffff
  4. 4. 파일명 이미지 설명 tagged.png 다른 사람이 내 이름을 태그 한 글 tagging.png 내가 다른 사람을 태그 한 글 tag.png 태그 된 사람의 이름 1.0 목록 - 메인화면 20 영역 상세설명 글이 시작하고 끝날 때는 20px 나머지 내용 (태그, 내용, 날짜) 등의 간격은 모두 15px 태그 영역 높이 25px 날짜 영역 높이 20px 경계선은 위쪽 글 영역의 안쪽으로 포함시킴 글에 들어가는 이미지 크기는 600*360 (5:3) 360 15 15 15 20 20 25 20 352535 25 기타 이미지 설명 텍스트 설명 내용 폰트 색 태그된 사람 이름 나눔고딕, 30pt #2d91ef 일기 내용 나눔고딕, 32pt #58595b 날짜 나눔고딕, 24pt #58595b
  5. 5. 20 1.1 목록 - 메뉴보기 500 B BG image (9 patch)A Properties png image Position 615, -50 적용 Size 90*500 File name Menu_unfolded.9.png Soft key imageB Properties png image Position 적용 Size 100X100 File name menu_edit.png menu_delete.png menu_search.png menu_settings.png 85 아이콘 간 간격은 60px 제일 위만 25px 25 60 60 A
  6. 6. Properties png image Position 20, -50 적용 Size 128X74 File name btn_title_bar.png Text 나눔고딕ExtraBold, 32pt, #FFFFFF Properties png image Position 20, 각 텍스트의 중간 지점 적용 Size 128X74 File name btn_check_off.png btn_check_on.png 1.2 목록 삭제 A B Soft key imageA bg imageB Color #c4c4c4 opacity 50% C C 20 Soft key imageC
  7. 7. 1.2 목록 삭제 - 확인 A B Bg imageA Properties bg image Position 0, -50 적용 Size 1280X720 (화면 전체) Color #6d6d6d Opacity 50% Pop-up imageB Properties png image Position 적용 Size 530X370 File name Popup.9.png 25 50 50 Soft key imageB Properties png image Position 적용 Size 200X80 File name btn_no.png btn_yes.png
  8. 8. thanks diary 8 2.0 일기 작성 Properties png image Position 20, -50 적용 Size 128X74 File name btn_back.png Soft key imageA A Properties png image Position 60, xx 적용 Size 600X360 File name pic_upload.png Soft key imageC B C D #13a186, 3px D B #ffa370, 3px 모서리 라운딩 3px
  9. 9. thanks diary 9 2.1 일기 작성 – 페이스북 업로드 7번 슬라이드 (화면1.2) 와 동일 Bg imageA Properties bg image Position 0, -50 적용 Size 1280X720 (화면 전체) Color #6d6d6d Opacity 50% Pop-up imageB Properties png image Position 적용 Size 530X370 File name Popup.9.png Soft key imageB Properties png image Position 적용 Size 200X80 File name btn_no.png btn_yes.png
  10. 10. thanks diary 10 2.1.1 일기 작성 - 친구추가 25 15 140 90 A B 페북 프로필 사진 크기:100*100 사진 모서리 라운딩: 3px 이름 부분: #58595b, 나눔고딕regular 36pt B C #a4a4a4, 2px Thanks to: #58595b, 나눔고딕regular 36pt 태그 된 사람: #2d91ef, 나눔고딕regular 36pt Background: #FFFFFF Line: #858585, 1px 또는 /images/selected_friend.9.png 사용 C A
  11. 11. thanks diary 11 2.2 일기 내용 보기 A A B B 이미지 크기: 600*360 (5:3) 태그 이미지 tag.png 태그된 사람 이름 나눔고딕, 30pt #2d91ef C C 내용 폰트 색 내용 나눔고딕, 32pt #58595b 작성 시간 나눔고딕, 24pt #58595b D D #58595b, 32pt
  12. 12. thanks diary 12 2.3 일기 수정 8번 슬라이드 (화면2.0) 와 동일
  13. 13. thanks diary 13 3.0 설정 180 A B #a4a4a4, 2px C C 60 353 A #58595b, 나눔고딕 Bold 48px B #58595b, 나눔고딕 regular 30px D Properties png image Position 598, xx 적용 Size 84X84 File name btn_setting_check_off.png btn_setting_check_on.png Soft key imageD
  14. 14. thanks diary 14 3.1 잠금 설정 배경패턴: bg.png 반복 비밀번호 영역 테두리: #ffa370, 5px, 모서리 라운딩 3px Default: 1.png pressed: 1_.png 기본 버튼은 ‘숫자.png’, 눌렀을 때는 ‘숫자_.png’로 한다. bg.png pw.png pw_input.png

×