감사일기 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


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


Position 615, -50 적용 Size 90*500

File name Menu_unfolded.9.png

Soft key imageB


Position 적용 Size 100X100

File name menu_edit.png menu_delete.png menu_search.png menu_settings.png

85

아이콘 간 간격은 60px

제일 위만 25px

25

60

60

A


Position 20, -50 적용 Size 128X74

File name btn_title_bar.png

Text 나눔고딕ExtraBold, 32pt, #FFFFFF


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



File name Popup.9.png

25

50 50

Soft key imageB



File name btn_no.png btn_yes.png

thanks diary 8

2.0 일기 작성


Position 20, -50 적용 Size 128X74

File name btn_back.png

Soft key imageA

A


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



File name Popup.9.png

Soft key imageB



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


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