Your SlideShare is downloading. ×
0
Red Globe
Red Globe
Red Globe
Red Globe
Red Globe
Red Globe
Red Globe
Red Globe
Red Globe
Red Globe
Red Globe
Red Globe
Red Globe
Red Globe
Red Globe
Red Globe
Red Globe
Red Globe
Red Globe
Red Globe
Red Globe
Red Globe
Red Globe
Red Globe
Red Globe
Red Globe
Red Globe
Red Globe
Red Globe
Red Globe
Red Globe
Red Globe
Red Globe
Red Globe
Red Globe
Red Globe
Red Globe
Red Globe
Red Globe
Red Globe
Red Globe
Red Globe
Red Globe
Red Globe
Red Globe
Red Globe
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Red Globe

734

Published on

모바일 컨텐츠 디자인

모바일 컨텐츠 디자인

Published in: Design, Business, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
734
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. MOBILE DESIGN KIM KYUNG SOO | KIM BO YOUNG | LEE JI WON - TEAM RED GLOBE STRUCTURE / HMI / GUI - 2009.05.18 -
  • 2. MOBILE DESIGN CONTENTS 01. Structure - Mobile / PC Manager 02. HMI Guide 03. GUI Concept 04. GUI Guide 05. GUI Design
  • 3. 살을 빼고 싶어하는 평범한 40 대 전업주부가 식구들과 자신의 건강을 위해서 식단과 운동 , 모바일 뱅킹을 편리하게 이용할 수 있도록 UI/GUI 를 디자인 한다 . MOBILE DESIGN CONTENTS
  • 4. 김부장 1960 년생 . 50 세 중소기업 회사원 김진주 1993 년생 . 17 세 고등학생 이주부 1963 년생 . 47 세 전업주부 김오덕 1997 년생 . 14 세 중학생 MOBILE DESIGN USER PROFILE
  • 5. MOBILE DESIGN CROSS DEVICE COMMUNICATION
  • 6. 새벽 6 시가 되자 최사장 ( 아빠 ) 는 제일 먼저 Mobile Alarm 을 듣고서 일어난다 . 어제 저녁 PC 에서 Mobile 로 Sync 해 놓은 아침식단 정보를 보면서 식사를 차린다 . 온 가족이 식탁에 모여서 식사를 마치고 , 최사장은 등교하는 아들과 함께 집을 나선다 . 이팀장 ( 엄마 ) 도 출근준비를 하며 회사에 있는 PC 와 Mobile 을 연결시켜 전날 작성해둔 오늘의 업무 일정을 파악한다 . 이팀장은 거래처와의 거래를 성사시키기 위해서 거래처 사람을 만났다 . 거래처 사람이 건네 준 명함을 Mobile 로 촬영 , 회사 PC 와 집 PC 의 주소록 데이터와 동기화 (Sync) 시킨다 . MOBILE DESIGN SCENARIO
  • 7. 음성통화 영상통화 일반주소록 명함주소록 문자메시지 멀티메시지 업 무 공 부 식 단 운 동 MP3 사진촬영 동영상촬영 명함촬영 조 회 이 체 MOBILE DESIGN STRUCTURE - MOBILE 인터넷 음 악 통 화 전화부 메시지 일 정 카메라 뱅 킹 설 정
  • 8. MOBILE DESIGN STRUCTURE - MOBILE 일반주소록 명함주소록 문자메시지 멀티메시지 업 무 공 부 식 단 운 동 MP3 조 회 이 체 사진앨범 동영상앨범 명함앨범 음 악 앨 범 전화부 메시지 일 정 뱅 킹
  • 9. Mobile Screen Definition 5. 14 ( 목 ) 07:50 PM MOBILE DESIGN HMI GUIDE – SCREEN DEFINITION 480 px 800 px 32 px 115 px 120 px 70 px 63 px MANAGER 480 px 800 px PC Manager Screen Definition 32 px 32 px 메 뉴 2 메 뉴 3 메 뉴 4 메 뉴 5 메 뉴 6 메 뉴 7 메 뉴 8 메 뉴 9 메 뉴 1 ◀ 사 람 1 사 람 2 사 람 3 전화부 메시지 음 악 앨 범 뱅 킹
  • 10. MAIN (1 depth) - 세로 콘텐츠 영역 전파세기 / 3G/ 시간 / 메시지 / 배터리 자신이 지정한 주소록상의 명단이 보여진다 ( 메인 화면에서만 사용가능 사용하지 않을 때는 접혀져 있음 ) Main contents - 통 화 - 전화부 - 메시지 - 일 정 - 인터넷 - 음 악 - 카메라 - 뱅 킹 - 설 정 상태 알림 영역 ( 아이콘 ) 빠른 연결 영역 5. 14 ( 목 ) 07:50 PM MOBILE DESIGN HMI GUIDE - MOBILE 날짜 / 시계 영역 ◀ 메 뉴 2 메 뉴 3 메 뉴 4 메 뉴 5 메 뉴 6 메 뉴 7 메 뉴 8 메 뉴 9 메 뉴 1
  • 11. POP-UP (1-1 depth) - 세로 어두운 부분 터치 시 다시 메인 메뉴로 이동 전파세기 / 3G/ 시간 / 메시지 / 배터리 평소에는 접혀져 있고 좌우로 스크롤도 가능하며 클릭하면 팝업 창이 보임 상태 알림 영역 ( 아이콘 ) 빠른 연결 영역 MOBILE DESIGN HMI GUIDE - MOBILE 날짜 / 시계 영역 5. 14 ( 목 ) 07:50 PM 팝업 창 전화부 메시지 일 정 인터넷 음 악 카메라 뱅 킹 설 정 통 화 메 뉴 2 메 뉴 1 사 람 1 메 뉴 3 메 뉴 4 ◀ 사 람 1 사 람 2 사 람 3
  • 12. SUB (2 depth) - 세로 전파세기 / 3G/ 시간 / 메시지 / 배터리 상태 알림 영역 ( 아이콘 ) MOBILE DESIGN HMI GUIDE - MOBILE 컨텐츠 정보 컨텐츠간의 이동버튼 메뉴 이름 MAIN BACK SETTINGS 메 뉴 2 메 뉴 1 메 뉴 3 메 뉴 4
  • 13. SUB (3 depth) - 세로 MOBILE DESIGN HMI GUIDE - MOBILE 서 브 메 뉴 1 서 브 메 뉴 2 서 브 메 뉴 3 서 브 메 뉴 4 서 브 메 뉴 5 서 브 메 뉴 6 스크롤 바 메뉴 이름 MAIN BACK SETTINGS
  • 14. Phone Book Message Schedule Browser Music Camera Banking Settings Call MAIN (1 depth) - 가로 전파세기 / 매너모드 / 잠금 / 알람 / 메시지 / 베터리 / 시간 Main Contents 콘텐츠 영역 상태 알림 영역 ( 아이콘 ) 빠른 연결 영역 MOBILE DESIGN HMI GUIDE - MOBILE 지원 경수 보영 ◀ 지원 경수
  • 15. Phone Book Message Schedule Browser Music Camera Banking Settings Call QUICK (1-1 depth) - 가로 팝업 창 터치 잠금 클릭하면 팝업 창이 보여진다 MOBILE DESIGN HMI GUIDE - MOBILE 경수 보영 ◀ 지원 경수 지 원 전 화 메세지 영 상 사 진
  • 16. 이전화면으로 이동 & 초기화면 바로 가기 버튼 빠른 연결 영역은 접혀져 있음 Sub menu SUB (2Depth) - 가로 콘텐츠 정보 MOBILE DESIGN HMI GUIDE - MOBILE ◀ MAIN BACK SETTINGS Contents name Sub menu1 Sub menu3 Sub menu4 Sub menu2
  • 17. MOBILE DESIGN HMI GUIDE - PC MANAGER MANAGER MANAGER 메인 메뉴 서브 메뉴 MAIN (1 depth) SUB (2 depth) SUB (3 depth) 서 브 내 용 1 서 브 내 용 2 서 브 내 용 3 서 브 내 용 4 서 브 내 용 5 서 브 내 용 6 MAIN BACK SETTINGS 서 브 메 뉴 2 서 브 메 뉴 1 서 브 메 뉴 3 서 브 메 뉴 4 MAIN BACK SETTINGS 메뉴 1 메뉴 2 메뉴 4 메뉴 5 메뉴 6
  • 18. MOBILE DESIGN HMI GUIDE – SCENARIO 1 MANAGER MANAGER 일 정 식 단 저녁 8 시 , 다음 날 아침 식사를 준비하기 위해 동네 마트에 장을 보러 나가기 전에 PC 의 QOOK MANAGER 를 통해서 아침식단 정보를 보면서 칼로리를 줄이기 위해서 베이컨 대신에 딸기잼을 구입하기로 한다 . SCENE-1) MAIN BACK SETTINGS 업 무 공 부 식 단 운 동 MAIN BACK SETTINGS 다이어트 식 단 스피드 식 단 일 반 식 단 식 단 설 정 MANAGER 전화부 메시지 음 악 앨 범 뱅 킹
  • 19. MOBILE DESIGN MANAGER HMI GUIDE – SCENARIO 1 저녁 8 시 , 다음 날 아침 식사를 준비하기 위해 동네 마트에 장을 보러 나가기 전에 PC 의 QOOK MANAGER 를 통해서 아침식단 정보를 보면서 칼로리를 줄이기 위해서 베이컨 대신에 딸기잼을 구입하기로 한다 . MANAGER 아침식단 1370 kcal 9 일 1120 kcal 9 일 MANAGER SCENE-1) 2009 년 6 월 7 일 어 제 오 늘 내 일 아침 점심 저녁 아침 점심 저녁 아침 점심 저녁 MAIN BACK SETTINGS 대체식단 MAIN BACK SETTINGS 딸기잼 치 즈 계란후라이 MAIN BACK SETTINGS 곡물 토스트 유기농 우유 베이컨 가든 샐러드 베이컨
  • 20. MOBILE DESIGN HMI GUIDE – SCENARIO 1 아침식단 1120 kcal 9 일 저녁 8 시 , 다음 날 아침 식사를 준비하기 위해 동네 마트에 장을 보러 나가기 전에 PC 의 QOOK MANAGER 를 통해서 아침식단 정보를 보면서 칼로리를 줄이기 위해서 베이컨 대신에 딸기잼을 구입하기로 한다 . SCENE-1) MANAGER MAIN BACK SETTINGS 곡물 토스트 유기농 우유 딸기잼 가든 샐러드
  • 21. 일 정 MAIN BACK SETTINGS 다음 날 아침 평소보다 조금 늦게 일어나 Mobile 로 아침식단 정보를 확인하면서 식구들의 아침식사가 늦지 않기 위해 스피드 식단을 차린다 . MOBILE DESIGN HMI GUIDE – SCENARIO 1 SCENE-1) 업 무 공 부 식 단 운 동 전화부 메시지 일 정 인터넷 음 악 카메라 뱅 킹 설 정 통 화 5. 14 ( 목 ) 07:50 PM ◀ 최부장 최진주 최오덕 식 단 MAIN BACK SETTINGS 다이어트 식 단 스피드 식 단 일 반 식 단 식 단 설 정
  • 22. MOBILE DESIGN HMI GUIDE – SCENARIO 1 아침식단 1120 kcal 9 일 다음 날 아침 평소보다 조금 늦게 일어나 Mobile 로 아침식단 정보를 확인하면서 식구들의 아침식사가 늦지 않기 위해 스피드 식단을 차린다 . SCENE-1) 2009 년 6 월 8 일 어 제 오 늘 내 일 아침 점심 저녁 아침 점심 저녁 아침 점심 저녁 MAIN BACK SETTINGS MAIN BACK SETTINGS 곡물 토스트 유기농 우유 딸기잼 가든 샐러드
  • 23. MOBILE DESIGN HMI GUIDE – SCENARIO 2 식구들이 모두 출근을 하고 나서 집이 비자 TV 를 틀어놓고 가계부를 정리하면서 밀린 공과금을 모바일 뱅킹을 이용해서 이체시킨다 . SCENE-2) 국민은행 전화부 메시지 일 정 인터넷 음 악 카메라 뱅 킹 설 정 통 화 5. 14 ( 목 ) 07:50 PM ◀ 최부장 최진주 최오덕 뱅 킹 MAIN BACK SETTINGS 농 협 국 민 은 행 우 리 은 행 설 정 펀드조회 입 금 대출조회 납 입 신용카드 외 환 서비스 지 로 서비스 방 카 슈랑스 부 가 서비스 공인인증 센 터 예금조회 이 체
  • 24. 예금조회 / 이체 MAIN BACK SETTINGS MOBILE DESIGN HMI GUIDE – SCENARIO 2 SCENE-2) MAIN BACK SETTINGS 출금 계좌 번호 출금 계좌 비밀번호 이체 금액 입금계좌 번호 입금 은행 수취인 통장표시 내용 출금 계좌 정보 입금 계좌 정보 식구들이 모두 출근을 하고 나서 집이 비자 TV 를 틀어놓고 가계부를 정리하면서 밀린 공과금을 모바일 뱅킹을 이용해서 이체시킨다 . 예 금 조 회 예 금 이 체 예금이체 MAIN BACK SETTINGS 지 문 인 식 보 안 카 드 확 인 지문인식 144-71-XXXXX **** 100,000 만원 150-00-XXXX 우리은행 05 월 공과금 납부
  • 25. 예금조회 / 이체 MAIN BACK SETTINGS MOBILE DESIGN HMI GUIDE – SCENARIO 2 SCENE-2) MAIN BACK SETTINGS 출금 계좌 번호 출금 계좌 비밀번호 이체 금액 입금계좌 번호 입금 은행 수취인 통장표시 내용 출금 계좌 정보 입금 계좌 정보 식구들이 모두 출근을 하고 나서 집이 비자 TV 를 틀어놓고 가계부를 정리하면서 밀린 공과금을 모바일 뱅킹을 이용해서 이체시킨다 . 예 금 조 회 예 금 이 체 예금이체 MAIN BACK SETTINGS 지 문 인 식 보 안 카 드 확 인 지문인식 144-71-XXXXX **** 100,000 만원 150-00-XXXX 우리은행 05 월 공과금 납부
  • 26. MOBILE DESIGN HMI GUIDE – SCENARIO 2 SCENE-2) 식구들이 모두 출근을 하고 나서 집이 비자 TV 를 틀어놓고 가계부를 정리하면서 밀린 공과금을 모바일 뱅킹을 이용해서 이체시킨다 . 확 인 지문인식 MAIN BACK SETTINGS 이체가 완료되었습니다 .
  • 27. MOBILE DESIGN HMI GUIDE – SCENARIO 3 SCENE-3) 식구들과 저녁을 먹고 나서 근처 공원으로 조깅을 하러 나온 박주부는 모바일로 그 날 먹은 식단에 따른 권장 운동량을 확인한 후 MP3 를 들으면서 운동을 한다 . 전화부 메시지 일 정 인터넷 음 악 카메라 뱅 킹 설 정 통 화 5. 14 ( 목 ) 07:50 PM ◀ 최부장 최진주 최오덕 일 정 MAIN BACK SETTINGS 업 무 공 부 식 단 운 동 MAIN BACK SETTINGS 운동결과 다시보기 오늘의 목표설정 달리기 음악설정 사운드 ON/OFF 운 동
  • 28. MOBILE DESIGN HMI GUIDE – SCENARIO 3 SCENE-3) 식구들과 저녁을 먹고 나서 근처 공원으로 조깅을 하러 나온 박주부는 모바일로 그 날 먹은 식단에 따른 권장 운동량을 확인한 후 MP3 를 들으면서 운동을 한다 . 운 동 My setting MAIN BACK SETTINGS 오늘의 식단 칼로리 1360 Kcal 오래달리기 4 주 동안 10km 를 달립니다 . 총 거리 입력 기간 설정 ( 단위 : 주 ) 10 km 4 8 12 16 확 인 키 158cm 몸무게 67kg 나이 47 세 오 래 달리기 빨 리 달리기 일 정 MAIN BACK SETTINGS 1 일 권장 운동량 5.6 km / 45min 달리기 운 동
  • 29. MOBILE DESIGN HMI GUIDE – SCENARIO 3 SCENE-3) 식구들과 저녁을 먹고 나서 근처 공원으로 조깅을 하러 나온 박주부는 모바일로 그 날 먹은 식단에 따른 권장 운동량을 확인한 후 MP3 를 들으면서 운동을 한다 . 운동거리 0000 km 걸린시간 0000 min 소비열량 0000 kcal END MAIN BACK SETTINGS 운 동 Music 가난한 사랑노래 .mp3 00:00 03:34 MP3 MAIN BACK SETTINGS ♬ all need is love.mp3 ♬ Dancing queen.mp3 ♬ I’m no good.mp3 ♬ good love.mp3 ♬ Love.mp3 운동거리 0000 km 걸린시간 0000 min 소비열량 0000 kcal END MAIN BACK SETTINGS 운 동 Music 가난한 사랑노래 .mp3 00:00 03:34 Music 가난한 사랑노래 .mp3 00:00 03:34
  • 30. MOBILE DESIGN HMI GUIDE – SCENARIO 3 SCENE-3) 식구들과 저녁을 먹고 나서 근처 공원으로 조깅을 하러 나온 박주부는 모바일로 그 날 먹은 식단에 따른 권장 운동량을 확인한 후 MP3 를 들으면서 운동을 한다 . MAIN BACK SETTINGS 운 동 <GOOD> 오늘의 운동기록 운동거리 0000 km 걸린시간 0000 min. 소비열량 0000 kcal
  • 31. SCENARIO 1) MP3 를 들으면서 운동 후 USB cable 로 PC 와 연결 , 운동정보를 정해진 E-mail 로 자동 전송 MOBILE DESIGN HMI GUIDE – SCENARIO 3 Album Banking Music Message MANAGER Phone Book Planner Exercise Food Schedule Study MAIN BACK SETTINGS MANAGER 소비열량 2009.04.27 Monday 결과 이메일 전송 AUTO OFF [email_address] [email_address] 오늘의 운동기록 운동거리 운동시간 MAIN BACK SETTINGS
  • 32. MOBILE DESIGN GUI CONCEPT Color 한글폰트 윤고딕 340 제목 24pt / 본문 20pt 영문폰트 Arial 제목 24pt / 본문 20pt Concept Font RGB R 55 | G 22 | B 159 WEB # 37169f RGB R 226 | G 229 | B 232 WEB # e2e5e8 RGB R 135 | G 134 | B 147 WEB # 878693 RGB R 0 | G 0 | B 0 WEB # 000000 RGB R 255 | G 255 | B 255 WEB # ffffff Background Color Point Color AQUA MONOTONE SIMPLE
  • 33. MOBILE DESIGN GUI CONCEPT - PROTOTYPE
  • 34. MOBILE DESIGN GUI DESIGN– SCENARIO 1 저녁 8 시 , 다음 날 아침 식사를 준비하기 위해 동네 마트에 장을 보러 나가기 전에 PC 의 QOOK MANAGER 를 통해서 아침식단 정보를 보면서 칼로리를 줄이기 위해서 베이컨 대신에 딸기잼을 구입하기로 한다 . SCENE-1)
  • 35. MOBILE DESIGN 저녁 8 시 , 다음 날 아침 식사를 준비하기 위해 동네 마트에 장을 보러 나가기 전에 PC 의 QOOK MANAGER 를 통해서 아침식단 정보를 보면서 칼로리를 줄이기 위해서 베이컨 대신에 딸기잼을 구입하기로 한다 . SCENE-1) GUI DESIGN– SCENARIO 1
  • 36. MOBILE DESIGN 저녁 8 시 , 다음 날 아침 식사를 준비하기 위해 동네 마트에 장을 보러 나가기 전에 PC 의 QOOK MANAGER 를 통해서 아침식단 정보를 보면서 칼로리를 줄이기 위해서 베이컨 대신에 딸기잼을 구입하기로 한다 . SCENE-1) GUI DESIGN– SCENARIO 1
  • 37. MOBILE DESIGN SCENE-1) 다음 날 아침 평소보다 조금 늦게 일어나 Mobile 로 아침식단 정보를 확인하면서 식구들의 아침식사가 늦지 않기 위해 스피드 식단을 차린다 . GUI DESIGN– SCENARIO 1
  • 38. MOBILE DESIGN SCENE-1) GUI DESIGN– SCENARIO 1 다음 날 아침 평소보다 조금 늦게 일어나 Mobile 로 아침식단 정보를 확인하면서 식구들의 아침식사가 늦지 않기 위해 스피드 식단을 차린다 .
  • 39. MOBILE DESIGN 식구들이 모두 집에서 나가자 집안청소를 하고 나서 가계부를 정리하다가 밀린 공과금을 납부하기 위해서 모바일 뱅킹을 이용한다 . SCENE-2) GUI DESIGN– SCENARIO 2
  • 40. MOBILE DESIGN SCENE-2) GUI DESIGN– SCENARIO 2 식구들이 모두 집에서 나가자 집안청소를 하고 나서 가계부를 정리하다가 밀린 공과금을 납부하기 위해서 모바일 뱅킹을 이용한다 .
  • 41. MOBILE DESIGN SCENE-2) GUI DESIGN– SCENARIO 2 식구들이 모두 집에서 나가자 집안청소를 하고 나서 가계부를 정리하다가 밀린 공과금을 납부하기 위해서 모바일 뱅킹을 이용한다 .
  • 42. MOBILE DESIGN 식구들과 저녁을 먹고 나서 근처 공원으로 조깅을 하러 나온 박주부는 모바일로 그 날 먹은 식단에 따른 권장 운동량을 확인한 후 MP3 를 들으면서 운동을 한다 . SCENE-3) GUI DESIGN– SCENARIO 3
  • 43. MOBILE DESIGN 식구들과 저녁을 먹고 나서 근처 공원으로 조깅을 하러 나온 박주부는 모바일로 그 날 먹은 식단에 따른 권장 운동량을 확인한 후 MP3 를 들으면서 운동을 한다 . SCENE-3) GUI DESIGN– SCENARIO 3
  • 44. MOBILE DESIGN 식구들과 저녁을 먹고 나서 근처 공원으로 조깅을 하러 나온 박주부는 모바일로 그 날 먹은 식단에 따른 권장 운동량을 확인한 후 MP3 를 들으면서 운동을 한다 . SCENE-3) GUI DESIGN– SCENARIO 3
  • 45. MOBILE DESIGN 식구들과 저녁을 먹고 나서 근처 공원으로 조깅을 하러 나온 박주부는 모바일로 그 날 먹은 식단에 따른 권장 운동량을 확인한 후 MP3 를 들으면서 운동을 한다 . SCENE-3) GUI DESIGN– SCENARIO 3
  • 46. MOBILE DESIGN 식구들과 저녁을 먹고 나서 근처 공원으로 조깅을 하러 나온 박주부는 모바일로 그 날 먹은 식단에 따른 권장 운동량을 확인한 후 MP3 를 들으면서 운동을 한다 . SCENE-3) GUI DESIGN– SCENARIO 3

×