감사일기 Design(130303)
-
Upload
dohui-hwang -
Category
Design
-
view
628 -
download
2
description
Transcript of 감사일기 Design(130303)
감사일기Design guideline v1.0(130303)
Galaxy S2 HD LTE (1280*720)기준으로 작성
남은 작업: 앱 아이콘, 앱센터 소개, 튜토리얼
0.0 인트로
인트로 앱센터 소개
20
1.0 목록 - 메인화면
50 (Notification bar)
1120
110AB 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
파일명 이미지 설명
tagged.png 다른 사람이 내 이름을 태그 한 글
tagging.png 내가 다른 사람을 태그 한 글
tag.png 태그 된 사람의 이름
1.0 목록 - 메인화면
20
영역 상세설명
글이 시작하고 끝날 때는 20px
나머지 내용 (태그, 내용, 날짜) 등의 간격은 모두 15px
태그 영역 높이 25px
날짜 영역 높이 20px
경계선은 위쪽 글 영역의 안쪽으로 포함시킴
글에 들어가는 이미지 크기는 600*360 (5:3)
360
15
15
15
2020
25
20
352535 25
기타 이미지 설명
텍스트 설명
내용 폰트 색
태그된 사람 이름 나눔고딕, 30pt #2d91ef
일기 내용 나눔고딕, 32pt #58595b
날짜 나눔고딕, 24pt #58595b
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
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
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
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
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
thanks diary 10
2.1.1 일기 작성 - 친구추가
25 15
140
90A
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
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
thanks diary 12
2.3 일기 수정
8번 슬라이드 (화면2.0) 와 동일
thanks diary 13
3.0 설정
180
A
B
#a4a4a4, 2pxC
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
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