Story Board 및 Design Style Guideline

1

Subject: Schedule 관리 Version 5.0 Date: 2003.09.182 조 : 최은아 , 심미란

Story Board 및 Design Style Guideline

스케쥴관리

2 조 최은아 , 심미란

디자인 정글 / 모바일 컨텐츠 & 인터페이스 디자인 과정

2


Story Board

3


선택

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


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알람시간


선택


새일정

선택

◀ 2003.08.25 ▶

08:57약속시간


08:57알람시간


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


일정삭제

◀ 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 저녁미팅




6


소프트키 영역

다음페이지에서 상세설명

일정알람설정

◀ 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 ▶

선택사진보기배경사진

7


소프트키 영역

선택사진보기배경사진

알람오는 화면

선택

Text 에 stolke 처리필요

====== 스케쥴 ======

8.29( 금 ) 17:50영수와 명동에서

만나기로 함

일정알람설정

알람 / 사진설정

선택

2003.08.25

벨종류

08:57

◀ 드라마 ost ▶

벨소리크기

배경사진폴더선택◀ 폴더 1 ▶

벨찾기◀ 첫사랑 ▶

사진보기

=== 폴더선택 ===◀ 폴더 1 ▶ == 배경사진찾기 ==

1 2

3 4

사진보기

페이지이동 1 | 2 | 3 | 4 |… 사진에 맞는 page 수표현

8


Design Style Guideline

9


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


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


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


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


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


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


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


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


6.1. Graphic window _ Calendar

- 캘린더화면에서 이동키로 날짜 이동하는 방법 설명

이전달

현재

다음달

▶ ◀

▲

▼

이동키 방향 표현방식

18


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


7.1. Animation window _ Saving

- 저장중화면 . 저장하시겠습니까 ? 의 query popup 후에 사용자가 ok 선택시 나오는 popup animation.

- 구성요소 : 저장을 의미하는 icon image 와 text

- Concept: icon 투명도에 차이를 두어 진행중인 화면을 표현하며 , icon 아래에 text 도 같이 사용하여 , 사용자가 현재 상태에 관한 이해가 쉽게 함

적용화면 화면 그리드


② 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


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


8.2. Popup window _ Query popup

- query popup 화면 , 저장하시겠습니까 ? 삭제하시겠습니까 ? 와 같이 사용자의 ‘ YES” 또는 “ NO” 의 대답을 요구하는 팝업 화면

- 구성요소 : icon + text + button (img)

- Concept: 해당 팝업에서 하는 질문과 연계되는 이미지를 icon 화 하여 글자를 읽기 이전에 icon 만으로도 식별이 용이하게 도와주며 ,

menu popup 과 bgcolor 에 구분을 두어 , 색상만으로도 popup 의 용도를 식별하는데 도움을 주고자 함과 동시에

형태적으로는 다른 페이지와 통일성을 주어 표현

적용화면 _query popup


② 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

③

Documents

Story Board 및 Design Style Guideline