Story Board 및 Design Style Guideline

스케쥴관리 Story Board 및 Design Style Guideline 디자인 정글 / 모바일 컨텐츠 & 인터페이스 디자인 과정 2조 최은아, 심미란

Story Board

선택 선택 2003.08.25. 08:57 스케쥴관리 메뉴list 스케쥴관리 달력보기 목록 있는 경우 ◀ 5.1. 스케쥴관리▶ 5.1. 스케쥴관리 2003.08. 2003.08.25 (2건) ◀ 5.전자수첩 ▶ (음 07/12) 1.스케쥴관리 2.모닝콜 3.알람 4.계산기 5.세계시계 6.메모장 1.14:25영수와점심약속.. 2.17:00저녁미팅 일 월 화 수 목 금 토 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 3031 1. 새일정등록 2. 일정삭제 3. 전체일정삭제 4. 전체일정보기 5. 월별일정보기 6. 알람/사진설정 옵션 선택 선택 옵션 새일정 숫자 구분요소- 공휴일/스케쥴등록일/오늘/선택됬을때 목록 없는 경우 새일정 약속시간 다음페이지에서 상세설명 소프트키 영역 약속시간 기간설정 완료 알람 ◀설정 ▶ 해제 Text 입력 완료 기호 알람시간 08:57 알람시간 선택 옵션 선택 저장 1. 워드커서 (아래부분 깜빡이는 형태) 2. textfield 항목이 입력 안된 상태에서 “저장”버튼 누르면,  text가 입력되지 않았습니다. 작업취소하시겠습니까? (예/아니오) 팝업뜸

선택 저장 기호 기간 설정 2003.08.25. 08:57 2003.08.25. 08:57 2003.08.25. 08:57 저장 하시겠습니까? 예 아니오 일정일에서 기간설정 일정일에서 기간설정 소프트키 영역 약속시간 새일정 새일정 기간설정 완료 ◀2003.08.25 ▶ ◀2003.08.25 ▶ 1. 요일 2. 주간 3. 월간 약속시간 약속시간 08:57 Text 입력 2003.08.25 (월) 완료 기호 == 기간설정 == 1. 영대 2. 영소3. 이모티콘 1. 요일 2. 주간 3. 월간 1. 요일 2. 주간 3. 월간 알람 알람 ◀설정 ▶ ◀설정 ▶ 2003.08.25 ~ 2004.08.25 알람시간 알람시간 08:57 08:57 기간설정 선택 선택 알람시간 선택 저장 핫키중 “취소” 버튼도 같은 기능 Textfield에서 기호 선택된 경우 새일정 ◀기호입력 (1/8)▶ 알람시간에서 저장선택 ! @ $ % ^ & ( ) ‘ “ < > 1 2 3 새일정 4 5 6 ◀2003.08.25 ▶ 팝업창 1. 기능의 popup은 softkey와 붙어서 위치함 2. 알람의 popup은 (저장할까요?) 배경화면은 gray, opacity50% 가운데 위치함 7 8 9 약속시간 08:57 * 0 # 안녕~^^ 완료 영대 알람 ◀설정 ▶ 우측하단 토글키설정 - 항목입력되고, textfield화면으로 돌아감 항목추가되고 Textfield취소 알람시간 08:57 선택 기간설정 저장

선택 선택 확인 일정일에서 기간설정 일정삭제 ◀ 5.1. 스케쥴관리▶ 일정삭제 2003.08.25 (2건) ◀2003.08.25 ▶ 1.14:25영수와점심약속.. 2.17:00저녁미팅 == 삭제할 기간 설정 == 1. 새일정등록 2. 일정삭제 3. 전체일정삭제 4. 전체일정보기 5. 월별일정보기 6. 알람/사진설정 1996.01.01 ~ 2003.08.25 08:57 옵션 선택 위에 설정된 기간내의 스케쥴 삭제 선택 저장 목록에서 상세내용확인 전체일정보기 일정보기 ◀ 5.1. 스케쥴관리▶ 새일정 전체일정 (4건) 2003.08.25 (2건) 03.08.02언니생일 03.08.02춘천가기위해기.. 03.08.05회식 03.08.20에버랜드소풍을.. 2003.08.02 17:00 약속시간 1.14:25영수와점심약속.. 2.17:00저녁미팅 언니생일 1. 새일정등록 2. 일정삭제 3. 전체일정삭제 4. 전체일정보기 5. 월별일정보기 6. 알람/사진설정 알람 ◀설정 ▶ 알람시간 16:30 08:57 선택 옵션 선택 메뉴 확인 1. 항목이 긴것은 목록에서는..표현. 포커스온 되면 슬라이딩 2. 일정목록보기는 월별보기를 기본화면으로 설정함 년도별 보고프면, 토글키로 이동 1. 새일정등록 2. 일정삭제 3. 전체일정삭제 4. 전체일정보기 5. 월별일정보기 6. 알람/사진설정

선택 선택 확인 목록에서 상세내용확인 월별일정보기 일정보기 ◀ 5.1. 스케쥴관리▶ 새일정 2003.08. (4건) 2003.08.25 (2건) 02언니생일 02춘천가기위해기.. 05회식 20에버랜드소풍을.. 2003.08.02 17:00 약속시간 1.14:25영수와점심약속.. 2.17:00저녁미팅 언니생일 1. 새일정등록 2. 일정삭제 3. 전체일정삭제 4. 전체일정보기 5. 월별일정보기 6. 알람/사진설정 알람 ◀설정 ▶ 알람시간 16:30 08:57 선택 옵션 선택 메뉴 확인 일정알람설정 일정알람설정 animation 화면 popup 화면 1. 저장중 2. 삭제중 메인페이지에표현하며, 진행바 추가 1. 저장완료 2. 삭제완료 3. 저장하겠습니까? 4. 삭제하겠습니까? ◀ 5.1. 스케쥴관리▶ 알람/사진설정 2003.08.25 (2건) 2003.08.25 벨종류 1.14:25영수와점심약속.. 2.17:00저녁미팅 ◀ 드라마 ost ▶ 벨찾기 ◀ 첫사랑 ▶ 1. 새일정등록 2. 일정삭제 3. 전체일정삭제 4. 전체일정보기 5. 월별일정보기 6. 알람/사진설정 벨소리크기 다음페이지에서 상세설명 배경사진폴더선택 소프트키 영역 08:57 ◀폴더 1 ▶ 배경사진 사진보기 선택 메뉴 선택 선택 저장 배경사진선택 ◀사진 1 ▶

4 3 2 1 사진 보기 일정알람설정 소프트키 영역 배경사진 알람/사진설정 사진보기 선택 2003.08.25 === 폴더선택 === ◀폴더 1 ▶ == 배경사진찾기== 벨종류 ◀ 드라마 ost ▶ 벨찾기 ◀ 첫사랑 ▶ 벨소리크기 배경사진폴더선택 08:57 ◀폴더 1 ▶ 1 | 2 | 3 | 4 |…사진에 맞는 page수표현 선택 사진보기 페이지이동 알람오는 화면 ====== 스케쥴 ====== 8.29(금) 17:50 영수와 명동에서 만나기로 함 Text에 stolke처리필요 선택

Design Style Guideline

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 화면으로 사용 적용화면

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 ④

◀ ▶ • 3. Main Menu window • - 핫키중 Menu를 눌렀을때 나오는 화면으로, 9개의 메뉴로 구성되어 있다. • - 구성요소: 선택된 menu animation, 숫자, Title, 좌,우 이동키, 기타 메뉴들 • Concept: 좌우 이동키로 선택된 메뉴는 화면 상단에 대표 색상으로 표현된 큰 풍선과 함께 icon과 숫자,text가 display되어 메뉴 인식을 용이하게 • 하며, 재밌고 아기자기한 느낌이 들도록 구성 • ① 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) 적용화면_ 6.전자수첩 적용화면_ 7.전화번호부

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

5.1. Edit window _ Textfield • - Edit field가 세 개 이상인 경우, focus가 textfield로 이동되면, 그에 맞는 softkey가 display됨 • - 구성요소: 3depth title, date, 약속시간, textfield, 알람설정, 알람시간. • Concept: 3depth 화면 색상은 소프트키 영역의 색상과 통일성을 주어, 전체적으로 깔끔하며 항목구분이 용이하도록 표현하였으며, 표현형식은 • menu list화면과 같이 볼록한 느낌으로 그리드 구성을 하여 통일성을 유지함 적용화면 화면 그리드 15 ① 23 • ① 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 • - 상동 ② ③ 108 14 ④ Field간 이동은 상,하키 사용 Focus off Focus on Font 굴림, 11px, none 굴림, 11px, none, faux bold Font color #000000 #ffffff

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

5.3. Edit window _ Etc textfield • - Edit field가 세 개 이상인 경우, focus가 textfield로 이동되면, 그에 맞는 softkey가 display됨 • - 구성요소: 3depth title, 페이지, 특수문자가 한페이지당 12개씩 나열, textfield • Concept: 기존의 형태는 유지하면서, 다량의 특수문자를 사용자가 빠르고 쉽게 찾아 입력가능 하도록 펼쳐서 display하여 사용성 편리하게 함 적용화면 화면 그리드 15 ① 23 • ① 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 • - 상동 ② ③ 108 14 ④

6.1. Graphic window _ Calendar • - 캘린더화면, 1월~12월까지 12개의 image 화면으로 구성됨 • - 구성요소: 월단위로 구성되며, 스케쥴이 등록된 날짜와, 휴일, 주말, 포커스 온 된 날짜별로 구분되어 display되어있다. • Concept: 각 월에 맞는 이미지와 색상으로 구성된 캘린더를 display하여, 숫자로 확인하기 전에 인식 가능하도록 함 적용화면 화면 그리드 15 ① • ① 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 • - 상동 34 ② ③ 97 14 ④

6.1. Graphic window _ Calendar - 캘린더화면에서 이동키로 날짜 이동하는 방법 설명 이전달 이동키 방향 표현방식 ▶ ◀ ▲ ▼ 현재 다음달

6.2. Graphic window _ Schedule Alarm • - 스케쥴알람 화면, 등록된 스케쥴 알람 시간에 폰에서 알람이 실행될 때, display되는 화면 • - 구성요소: title, Date, time, 스케쥴일정, 확인 button • Concept: 선택한 사진이 배경img로 셋팅 가능하게 하여, 사용자별 개성에 맞게 사용하도록 배려하여 자신의 폰에 대한 애정이 생기게 유도 적용화면 화면 그리드 15 ① • ① 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 • 상동 32 ② ③ 14 ④

7.1. Animation window _ Saving • - 저장중화면. 저장하시겠습니까?의 query popup 후에 사용자가 ok선택시 나오는 popup animation. • - 구성요소: 저장을 의미하는 icon image와 text • Concept: icon 투명도에 차이를 두어 진행중인 화면을 표현하며, icon아래에 text도 같이 사용하여, 사용자가 현재 상태에 관한 이해가 쉽게 함 적용화면 화면 그리드 ① 15 • ① 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 으로 표현 ② 108 ③

8.1. Popup window _ Menu popup • - 메뉴 팝업 화면, 화면의 기능에 따라 왼쪽에 위치하는 softkey의 세부항목으로, popup창 아래부분과 softkey상단이 붙은 곳에 위치함. 왼쪽정렬. • 구성요소: (숫자 + title), display되는 목록은 해당 페이지의 기능에 따라 달라짐. • Concept: popup bgcolor는 왼쪽softkey와 연계되어 사용되기에 같은 색으로 지정하여, 연결된 느낌을 주고자 하였으며, 약간의 그래픽 처리를 • 해서 단조로움 느낌을 피했고, focus on 상태는 다른 일반 페이지와 형태와 color면에서 통일성 있게 사용하였다. 적용화면_menu popup 화면 그리드 15 ① • ① 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 • - 상동 23 ② ③ 108 14 ④

8.2. Popup window _ Query popup • - query popup 화면, 저장하시겠습니까? 삭제하시겠습니까? 와 같이 사용자의 ‘YES”또는 “NO”의 대답을 요구하는 팝업 화면 • 구성요소: icon + text + button (img) • Concept: 해당 팝업에서 하는 질문과 연계되는 이미지를 icon화 하여 글자를 읽기 이전에 icon만으로도 식별이 용이하게 도와주며, • menu popup과 bgcolor에 구분을 두어, 색상만으로도 popup의 용도를 식별하는데 도움을 주고자 함과 동시에 • 형태적으로는 다른 페이지와 통일성을 주어 표현 적용화면_query popup 화면 그리드 ① 15 • ① 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 ② 108 ③

Story Board 및 Design Style Guideline