story board 및 design style guideline
Post on 01-Jan-2016
14 Views
Preview:
DESCRIPTION
TRANSCRIPT
1
Subject: Schedule 관리 Version 5.0 Date: 2003.09.182 조 : 최은아 , 심미란
Story Board 및 Design Style Guideline
스케쥴관리
2 조 최은아 , 심미란
디자인 정글 / 모바일 컨텐츠 & 인터페이스 디자인 과정
2
Subject: Schedule 관리 Version 5.0 Date: 2003.09.182 조 : 최은아 , 심미란
Story Board
3
Subject: Schedule 관리 Version 5.0 Date: 2003.09.182 조 : 최은아 , 심미란
선택
1. 새일정등록2. 일정삭제3. 전체일정삭제4. 전체일정보기5. 월별일정보기6. 알람 / 사진설정
스케쥴관리 메뉴 list
◀ 5. 전자수첩 ▶
선택
스케쥴관리 달력보기
숫자 구분요소 - 공휴일 / 스케쥴등록일 / 오늘 / 선택됬을때
5.1. 스케쥴관리
선택
일 월 화 수 목 금 토
옵션
( 음 07/12)
2003.08.
1 23 4 5 6 7 8 9
10 11 12 13 14 15 1617 18 19 20 21 22 2324 25 26 27 28 29 30
31
선택
목록 있는 경우
◀ 5.1. 스케쥴관리 ▶
새일정
2003.08.25 (2 건 )
1.14:25 영수와점심약속 ..2.17:00 저녁미팅
목록 없는 경우
새일정
선택
1. 워드커서 ( 아래부분 깜빡이는 형태 )2. textfield 항목이 입력 안된 상태에서 “저장”버튼 누르면 , text 가 입력되지 않았습니다 . 작업취소하시겠습니까 ? ( 예 / 아니오 ) 팝업뜸
완료기간설정
완료 기호
2003.08.25. 08:57
소프트키 영역
약속시간
◀ 설정 ▶알람
08:57알람시간
해제
저장선택
약속시간
Text 입력
알람시간
다음페이지에서 상세설명
1. 스케쥴관리2. 모닝콜3. 알람4. 계산기5. 세계시계6. 메모장
옵션
옵션
4
Subject: Schedule 관리 Version 5.0 Date: 2003.09.182 조 : 최은아 , 심미란
1. 요일2. 주간3. 월간
완료기간설정
완료 기호
1. 영대2. 영소3. 이모티콘
새일정
완료
◀ 기호입력 (1/8) ▶
1
4
2 3
5 6
7 8 9
* 0 #
안녕 ~^^
! @ $
% ^ &
( ) ‘
“ < >
영대
소프트키 영역
항목추가되고Textfield 취소
우측하단 토글키설정- 항목입력되고 , textfield 화면으로 돌아감
Textfield 에서 기호 선택된 경우핫키중 “취소” 버튼도 같은 기능
저장선택
일정일에서 기간설정
새일정
선택
◀ 2003.08.25 ▶
약속시간
◀ 설정 ▶알람
08:57알람시간
1. 요일2. 주간3. 월간
선택
일정일에서 기간설정
새일정
선택
◀ 2003.08.25 ▶
08:57약속시간
◀ 설정 ▶알람
08:57알람시간
1. 요일2. 주간3. 월간
2003.08.25 ( 월 )
2003.08.25 ~2004.08.25
== 기간설정 ==
약속시간
Text 입력
알람시간
기간설정
기호
알람시간에서 저장선택
새일정
선택
◀ 2003.08.25 ▶
08:57약속시간
◀ 설정 ▶알람
08:57알람시간
저장기간설정
저장
팝업창
1. 기능의 popup 은 softkey 와 붙어서 위치함2. 알람의 popup 은 ( 저장할까요 ?) 배경화면은 gray, opacity50% 가운데 위치함
2003.08.25. 08:57
기간설정
2003.08.25. 08:57
2003.08.25. 08:57
저장 하시겠습니까 ?
예 아니오
5
Subject: Schedule 관리 Version 5.0 Date: 2003.09.182 조 : 최은아 , 심미란
일정삭제
◀ 5.1. 스케쥴관리 ▶
선택
2003.08.25 (2 건 )
옵션
일정일에서 기간설정
일정삭제
선택
◀ 2003.08.25 ▶
== 삭제할 기간 설정 ==
08:57
1996.01.01 ~2003.08.25
저장 위에 설정된 기간내의스케쥴 삭제
일정보기
◀ 5.1. 스케쥴관리 ▶
선택
2003.08.25 (2 건 )
옵션
선택
선택
전체일정보기
전체일정 (4 건 )
확인
08:57
03.08.02 언니생일03.08.02 춘천가기위해기 ..03.08.05 회식03.08.20 에버랜드소풍을 ..
1. 항목이 긴것은 목록에서는 .. 표현 . 포커스온 되면 슬라이딩2. 일정목록보기는 월별보기를 기본화면으로 설정함 년도별 보고프면 , 토글키로 이동
메뉴
목록에서 상세내용확인
새일정
선택
2003.08.02
17:00약속시간
◀ 설정 ▶알람
16:30알람시간
확인
언니생일
1.14:25 영수와점심약속 ..2.17:00 저녁미팅
1.14:25 영수와점심약속 ..2.17:00 저녁미팅
1. 새일정등록2. 일정삭제3. 전체일정삭제4. 전체일정보기5. 월별일정보기6. 알람 / 사진설정
1. 새일정등록2. 일정삭제3. 전체일정삭제4. 전체일정보기5. 월별일정보기6. 알람 / 사진설정
1. 새일정등록2. 일정삭제3. 전체일정삭제4. 전체일정보기5. 월별일정보기6. 알람 / 사진설정
6
Subject: Schedule 관리 Version 5.0 Date: 2003.09.182 조 : 최은아 , 심미란
소프트키 영역
다음페이지에서 상세설명
일정알람설정
◀ 5.1. 스케쥴관리 ▶
선택
2003.08.25 (2 건 )
메뉴
일정알람설정
알람 / 사진설정
선택
2003.08.25
벨종류
08:57
저장
선택
◀ 드라마 ost ▶
벨소리크기
배경사진폴더선택◀ 폴더 1 ▶
animation 화면
1. 저장중2. 삭제중 메인페이지에표현하며 , 진행바 추가
popup 화면
1. 저장완료2. 삭제완료3. 저장하겠습니까 ?4. 삭제하겠습니까 ?1.14:25 영수와점심약속 ..
2.17:00 저녁미팅
일정보기
◀ 5.1. 스케쥴관리 ▶
선택
2003.08.25 (2 건 )
옵션
선택
월별일정보기
2003.08. (4 건 )
확인
08:57
02 언니생일02 춘천가기위해기 ..05 회식20 에버랜드소풍을 ..
메뉴
목록에서 상세내용확인
새일정
선택
2003.08.02
17:00약속시간
◀ 설정 ▶알람
16:30알람시간
확인
언니생일1.14:25 영수와점심약속 ..2.17:00 저녁미팅
1. 새일정등록2. 일정삭제3. 전체일정삭제4. 전체일정보기5. 월별일정보기6. 알람 / 사진설정
벨찾기◀ 첫사랑 ▶1. 새일정등록
2. 일정삭제3. 전체일정삭제4. 전체일정보기5. 월별일정보기6. 알람 / 사진설정
배경사진선택◀ 사진 1 ▶
선택사진보기배경사진
7
Subject: Schedule 관리 Version 5.0 Date: 2003.09.182 조 : 최은아 , 심미란
소프트키 영역
선택사진보기배경사진
알람오는 화면
선택
Text 에 stolke 처리필요
====== 스케쥴 ======
8.29( 금 ) 17:50영수와 명동에서
만나기로 함
일정알람설정
알람 / 사진설정
선택
2003.08.25
벨종류
08:57
◀ 드라마 ost ▶
벨소리크기
배경사진폴더선택◀ 폴더 1 ▶
벨찾기◀ 첫사랑 ▶
사진보기
=== 폴더선택 ===◀ 폴더 1 ▶ == 배경사진찾기 ==
1 2
3 4
사진보기
페이지이동 1 | 2 | 3 | 4 |… 사진에 맞는 page 수표현
8
Subject: Schedule 관리 Version 5.0 Date: 2003.09.182 조 : 최은아 , 심미란
Design Style Guideline
9
Subject: Schedule 관리 Version 5.0 Date: 2003.09.182 조 : 최은아 , 심미란
1. Power on Window
- 핸드폰이 꺼져있는 상태에서 전원 버튼을 누르면 시작되는 화면으로 총 16 컷으로 구성된 Animation.
- 구성요소 : Animation image
- Concept: 일러스트 느낌으로 따뜻한 느낌이 강하게 표현하여 편안함과 폰에 대한 애정을 느끼도록 유도
적용화면① Graphic / Animation- 16 컷 animation- img size=128x160 (x:0 y:0 w:128 h:160)- full 화면으로 사용
10
Subject: Schedule 관리 Version 5.0 Date: 2003.09.182 조 : 최은아 , 심미란
2. Idle window _ Standby
- Power on Animation 진행이 종료되고 나타나는 화면 .
- 구성요소 : Indicator, Time/Date, Greeting message, Animation
- Concept: 디테일 일러스트 이미지를 배경이미지로 전체화면에 full 로 보여주어 공간을 크게 활용함으로써 , 세련되고 시원한 느낌으로 표현
적용화면 화면 그리드①
④
① Indicator- 최대 7개 display 가능
② Time / Date- animation 위에 얹혀지는 방식- Time font : standard 07_57, 18px, none, color=#1CFFFF- Date font : 돋움 , 12px, none, color=#1CFFFF- 시간표현 : 00:00~23:59
③ Graphic / Animation- 4 컷 animation- bg img: size=128x160 (x:0 y:0 w:128 h:160)- 전체화면에 제일 하단에 위치하며 , indicator, time/date, greeting message 는 그 위에 떠 있는 형식임
④ Greeting Message- font : 굴림 , 11px, none, color=#000000- 최대 strings : 11 자- bg : color=#ffffff, opacity=65
③
15
29
14
②
11
Subject: Schedule 관리 Version 5.0 Date: 2003.09.182 조 : 최은아 , 심미란
3. Main Menu window
- 핫키중 Menu 를 눌렀을때 나오는 화면으로 , 9개의 메뉴로 구성되어 있다 .
- 구성요소 : 선택된 menu animation, 숫자 , Title, 좌 , 우 이동키 , 기타 메뉴들
- Concept: 좌우 이동키로 선택된 메뉴는 화면 상단에 대표 색상으로 표현된 큰 풍선과 함께 icon 과 숫자 ,text 가 display 되어 메뉴 인식을 용이하게
하며 , 재밌고 아기자기한 느낌이 들도록 구성
적용화면 _ 6. 전자수첩 적용화면 _ 7. 전화번호부① Font- 전자수첩 font : 굴림 , 11px, none, faux bold, color=#0C5C32- 전화번호부 font : 굴림 , 11px, none, faux bold, color=#751C6C
② Graphic / Animation- 3 컷 animation- bg img: size=128x160 (x:0 y:0 w:128 h:160)
◀ ▶
12
Subject: Schedule 관리 Version 5.0 Date: 2003.09.182 조 : 최은아 , 심미란
4. Menu List window
- 9개의 메뉴중에 ‘ 6. 전자수첩’을 선택한 경우 나오는 sub menu 화면
- 구성요소 : 스케쥴관리 , 모닝콜 , 알람 , 계산기 , 세계시계 , 메모장…
- Concept: 볼록한 버튼형식으로 그리드를 나누어 표현함으로써 , 기능별 구역의 구분을 용이하게 하는 동시에 , 깔끔하고 산뜻한 느낌을
일관되게 적용함
적용화면 화면 그리드①
②
④
① Indicator- 최대 7개 display 가능
② Menu Title- icon + 번호 + title- font : 굴림 , 12px, none, faux bold, - font color : #354E0E- 좌 , 우 이동키로 같은 level 타 메뉴이동 가능- bg color = 풍선과 같은 color 로 통일성 유지
③ Main window- 6개의 list 표현 가능- 항목별 height = 16px - second level 에서 bg = 오른쪽 하단에 대표되는 icon 을 배경으로 놓고 , line 별로 색상차를 두어 메뉴구분이 용이 하게 도와줌 .- 번호 (image) + title(text)- focus on 은 orange color 로 볼록하게 표현됨 ( 전체 동일 )- 스크롤 : 우측에 main window 높이와 같게 표현
④ Softkey- font : 굴림 , 11px, none - font color : #ffffff- 최대 strings - 좌측 :4 자 / 중간 :2 자 / 우측 :4 자
③
15
34
97
14
Focus off Focus on
Font 굴림 , 12px, none 굴림 , 12px, none, faux bold
Font color #354E0E #ffffff
Button color
#25C035 #FF6909
13
Subject: Schedule 관리 Version 5.0 Date: 2003.09.182 조 : 최은아 , 심미란
5.1. Edit window _ Textfield
- Edit field 가 세 개 이상인 경우 , focus 가 textfield 로 이동되면 , 그에 맞는 softkey 가 display됨
- 구성요소 : 3depth title, date, 약속시간 , textfield, 알람설정 , 알람시간 .
- Concept: 3depth 화면 색상은 소프트키 영역의 색상과 통일성을 주어 , 전체적으로 깔끔하며 항목구분이 용이하도록 표현하였으며 , 표현형식은
menu list 화면과 같이 볼록한 느낌으로 그리드 구성을 하여 통일성을 유지함
적용화면 화면 그리드①
②
④
③
15
23
108
14
Focus off Focus on
Font 굴림 , 11px, none 굴림 , 11px, none, faux bold
Font color #000000 #ffffff
① Sub Title- font : 굴림 , 11px, none, faux bold , color=#ffffff
② Date- 년 , 월 , 일- 좌우이동키로 앞 ,뒤 날짜로 이동 가능- font : 굴림 , 11px, none, faux bold - font color : #1C4B99
③ Main window- 4개의 항목 및 textfield 표현 가능- icon + title + 해당내용 입력 필드 로 구성- 항목별 height = 16px- bg 표현 : line 별 색상에 차이를 두어 항목구분 용이하게 함- textfield 는 상하이동키로 이동하여 선택가능하며 , focus on 되면 orange color 로 볼록하게 표현되고 , 그 상황 에서는 좌우 이동키로 이동하며 입력함 ( 다음 페이지에 상세설명 )- 시간 표현 : 00:00~ 23:59
④ Softkey- 상동
Field 간 이동은 상 , 하키 사용
14
Subject: Schedule 관리 Version 5.0 Date: 2003.09.182 조 : 최은아 , 심미란
5.2. Edit window _ Textfield edit
- 각 textfield 내에서 입력 및 수정하는 방식 설명
- 구성요소 : 각 항목에 맞는 형식으로 구성됨
- Concept: 볼록한 버튼형식으로 그리드를 나누어 표현함으로써 , 기능별 구역의 구분을 용이하게 하는 동시에 , 깔끔한 느낌을 일관되게 적용함
적용화면 _ Date Textfield
① Date Textfield edit- 좌 , 우 이동키로 이동하면 , 최소 단위별로 이동됨 최소단위 ) 년 , 월 , 일 , 시 , 분- font : 굴림 , 11px, none, color=#ffffff- 날짜 및 시간 수정은 최소 단위로 수정한다 . ex) 년 : 2002 or 2003 월 : 02 or 06 시 : 05 or 22
② Text Textfield edit- font : 굴림 , 11px, none, color=#ffffff- 좌 , 우 이동키로 한자씩 이동- 취소 버튼을 오래 누르고 있으면 , textfield 에 있는 모든 글자가 지워짐- 상 , 하 이동키는 textfield 에서 자간 이동에 사용되지 않음- 상 , 하 이동키로 이동하면 , Text textfield 에서 벗어나서 ‘약속시간’이나 ‘설정’으로 이동한다 . 만약 , textfield 에 text 가 입력되어 있는 상태이면 , 입력 내용이 저장되며 다른 항목으로 이동됨
적용화면 _ Text Textfield
15
Subject: Schedule 관리 Version 5.0 Date: 2003.09.182 조 : 최은아 , 심미란
5.3. Edit window _ Etc textfield
- Edit field 가 세 개 이상인 경우 , focus 가 textfield 로 이동되면 , 그에 맞는 softkey 가 display됨
- 구성요소 : 3depth title, 페이지 , 특수문자가 한페이지당 12개씩 나열 , textfield
- Concept: 기존의 형태는 유지하면서 , 다량의 특수문자를 사용자가 빠르고 쉽게 찾아 입력가능 하도록 펼쳐서 display 하여 사용성 편리하게 함
적용화면 화면 그리드①
②
④
③
1523
108
14
① Sub Title- font : 굴림 , 11px, none, faux bold , color=#ffffff
② title + Page- 좌우 이동키로 앞 ,뒤 page 로 이동 가능- font : 굴림 , 11px, none, color=#1C4B99- 현재페이지는 font : faux bold 로 구분
③ Main window- 특수문자 나열되는 페이지- 문자 선택은 해당 번호 클릭으로 선택가능- 번호 클릭 시 아래 textfield 에 바로 입력됨- 완료버튼 클릭 시 특수문자 입력된 상태에서 이전화면인 textfield edit 화면으로 이동함- 취소버튼 클릭 시 입력중이던 text 가 취소되면서 이전화면인 textfield edit 화면으로 이동함
④ Softkey- 상동
16
Subject: Schedule 관리 Version 5.0 Date: 2003.09.182 조 : 최은아 , 심미란
6.1. Graphic window _ Calendar
- 캘린더화면 , 1 월 ~12 월까지 12개의 image 화면으로 구성됨
- 구성요소 : 월단위로 구성되며 , 스케쥴이 등록된 날짜와 , 휴일 , 주말 , 포커스 온 된 날짜별로 구분되어 display 되어있다 .
- Concept: 각 월에 맞는 이미지와 색상으로 구성된 캘린더를 display 하여 , 숫자로 확인하기 전에 인식 가능하도록 함
적용화면 화면 그리드①
②
④
① Sub Title- font : 굴림 , 11px, none, faux bold, color=#000000- bg color = 전자수첩 대표 color 사용
② Date- 해당월의 느낌을 표현한 img, 년 , 월 , 일 (음력 : 월 / 일 )- font : 굴림 , 11px, none, faux bold, color : #D7590C
③ Main window- 각 월에 맞는 캘린더-font color - standby : #000000 - focus on : #ffffff + 네모난 주황색 영역 - 토요일 : #1793C4 - 휴일 : #F26522 - 스케쥴 등록된 날 : #37740E + 동그란 녹색 버튼- 상 , 하 ,좌 , 우 이동키로 날짜별 이동이 가능하다 ( 다음페이지 참고 )
④ Softkey- 상동
③
15
34
97
14
17
Subject: Schedule 관리 Version 5.0 Date: 2003.09.182 조 : 최은아 , 심미란
6.1. Graphic window _ Calendar
- 캘린더화면에서 이동키로 날짜 이동하는 방법 설명
이전달
현재
다음달
▶ ◀
▲
▼
이동키 방향 표현방식
18
Subject: Schedule 관리 Version 5.0 Date: 2003.09.182 조 : 최은아 , 심미란
6.2. Graphic window _ Schedule Alarm
- 스케쥴알람 화면 , 등록된 스케쥴 알람 시간에 폰에서 알람이 실행될 때 , display 되는 화면
- 구성요소 : title, Date, time, 스케쥴일정 , 확인 button
- Concept: 선택한 사진이 배경 img 로 셋팅 가능하게 하여 , 사용자별 개성에 맞게 사용하도록 배려하여 자신의 폰에 대한 애정이 생기게 유도
적용화면
① Sub Title- font : 굴림 , 11px, none, faux bold, color=#ffffff
② Date + Contents- 해당월을 표현한 img, 년 , 월 , 일 (음력 : 월 / 일 )- Date font : 굴림 , 11px, none, faux bold, color=#ffffff, stroke=#000000- Contents font : 굴림 , 11px, none, color=#ffffff, stroke=#000000- 최대 strings : 11 자- bg : color=#ffffff, transparents:40
③ Main window- bg : 선택한 사진이 배경으로 깔리고 , date, 일정내용 , softkey 가 위에 뜨는 형태- img size = 128x160
④ Softkey- 상동
화면 그리드①
②
④
③
15
32
14
19
Subject: Schedule 관리 Version 5.0 Date: 2003.09.182 조 : 최은아 , 심미란
7.1. Animation window _ Saving
- 저장중화면 . 저장하시겠습니까 ? 의 query popup 후에 사용자가 ok 선택시 나오는 popup animation.
- 구성요소 : 저장을 의미하는 icon image 와 text
- Concept: icon 투명도에 차이를 두어 진행중인 화면을 표현하며 , icon 아래에 text 도 같이 사용하여 , 사용자가 현재 상태에 관한 이해가 쉽게 함
적용화면 화면 그리드
① Sub Title- font : 굴림 , 11px, none, faux bold, color=#ffffff
② Animation popup- icon + text 로 구성됨- bg img = (x:10, y:32, width:108, height:108)- font : 굴림 , 11px, none, faux bold, color=#ffffff- animation 은 폰에서 저장작업이 완료되면 , 저절로 없어짐- bg : query popup 과 동일한 img 사용하여 연계된 작업임을 사용자에게 인식 가능하게 함 (후에 추가설명 )
③ Main window + Softkey 영역- query popup 이 뜨면 , 뒷부분에 있던 항목은 saturation= -100 / lightness= +50 으로 표현
①
②
15
108
③
20
Subject: Schedule 관리 Version 5.0 Date: 2003.09.182 조 : 최은아 , 심미란
8.1. Popup window _ Menu popup
- 메뉴 팝업 화면 , 화면의 기능에 따라 왼쪽에 위치하는 softkey 의 세부항목으로 , popup 창 아래부분과 softkey 상단이 붙은 곳에 위치함 . 왼쪽정렬 .
-구성요소 : ( 숫자 + title), display 되는 목록은 해당 페이지의 기능에 따라 달라짐 .
-Concept: popup bgcolor 는 왼쪽 softkey 와 연계되어 사용되기에 같은 색으로 지정하여 , 연결된 느낌을 주고자 하였으며 , 약간의 그래픽 처리를
해서 단조로움 느낌을 피했고 , focus on 상태는 다른 일반 페이지와 형태와 color 면에서 통일성 있게 사용하였다 .
적용화면 _menu popup
① Sub Title- font : 굴림 , 11px, none, faux bold, color=#354E0E
② Date- 년 , 월 , 일 ( 저장된 스케쥴 건수 )- font : 굴림 , 11px, none, faux bold, color : #D7590C
③ Main window _ Menu Popup- 화면마다 왼쪽 softkey 상단에 붙어서 위치함- focus on 상태는 orange색이 볼록하게 표현되며 , font color=#ffffff.- font : 굴림 , 11px, none, color=#0A2A5F- title 최대 strings : 10 자- 최대 목록 : 9개- 상 , 하 이동키로 항목간 이동
④ Softkey- 상동
화면 그리드①
②
④
③
1523
108
14
21
Subject: Schedule 관리 Version 5.0 Date: 2003.09.182 조 : 최은아 , 심미란
8.2. Popup window _ Query popup
- query popup 화면 , 저장하시겠습니까 ? 삭제하시겠습니까 ? 와 같이 사용자의 ‘ YES” 또는 “ NO” 의 대답을 요구하는 팝업 화면
- 구성요소 : icon + text + button (img)
- Concept: 해당 팝업에서 하는 질문과 연계되는 이미지를 icon 화 하여 글자를 읽기 이전에 icon 만으로도 식별이 용이하게 도와주며 ,
menu popup 과 bgcolor 에 구분을 두어 , 색상만으로도 popup 의 용도를 식별하는데 도움을 주고자 함과 동시에
형태적으로는 다른 페이지와 통일성을 주어 표현
적용화면 _query popup
① Sub Title- font : 굴림 , 11px, none, faux bold, color=#ffffff
② Query popup- bg img = (x:10, y:32, width:108, height:108)- icon + text + button(img) 로 구성됨- focus on 상태 - 형식 : button 이 오렌지색+ 흰 stroke - font : 굴림 , 11px, none, color=#ffffff
③ Main window + Softkey 영역- query popup 이 뜨면 , 뒷부분에 있던 화면 saturation= -100 / lightness= +50
화면 그리드①
②
15
108
③
top related