32
뭉뭉뭉 UI 뭉뭉 뭉뭉 : 뭉뭉뭉 뭉뭉 : 뭉뭉뭉 뭉뭉 뭉뭉뭉 뭉뭉뭉 뭉뭉뭉

뭉게맨 UI 설계

Embed Size (px)

DESCRIPTION

뭉게맨 UI 설계. 팀장 : 임희성 팀원 : 유지수 윤솔 정종빈 홍찬슬 최낙형. 목차. 뭉게맨의 제작의도. 뭉게맨의 기대효과. 상세설계도. 뭉게맨의 제작의도. - PowerPoint PPT Presentation

Citation preview

Page 1: 뭉게맨 UI  설계

뭉게맨 UI 설계

팀장 : 임희성팀원 : 유지수 윤솔 정종빈 홍찬슬 최낙형

Page 2: 뭉게맨 UI  설계

목차

뭉게맨의 제작의도

뭉게맨의 기대효과

상세설계도

Page 3: 뭉게맨 UI  설계

뭉게맨의 제작의도뭉게맨은 현재 SBS 에서 방송 중인 텔 레비전 프로그램 런

닝맨 게임에서부터 모티브를 얻었다 . 런닝맨 게임은 단지 재미와 흥미를 위해 만들어진 게임인 반면에

우리 뭉게조에서 생각의 발상을 통해 얻은 아이디어인 뭉게맨은 재미있게 즐기면서 더욱 쉽게 장소에 대한 자세한 분석력과 면밀한 관찰을 통해 공간적 능력을 키울 수 있고 , 장소에 대해 인지도를 향상시키는 효과가 있는 게임이다 .

Page 4: 뭉게맨 UI  설계

뭉게맨의 기대효과• 자신이 가보지 않는 장소는 잘 알 수 없기 때문에 자신의 대학 캠퍼스 뿐만 아니라 타인의

대학 캠퍼스 전체를 잘 아는 경우가 드물다 . 그러므로 대학 캠퍼스의 지리를 더욱 쉽고 자세히 알 수 있다 .

• 친한 친구들과 함께 뛰어다니면서 이 게임을 통해 친구들과의 유대감과 친근감을 더욱 돈독히 할 수 있다 .

• 요즘 현대인들은 정보화 사회에 접어들면서 핸드폰이나 컴퓨터와 같은 전자기기의

사용이 증가함으로 인해 운동이 부족하다 . 이러한 운동부족을 간단한 게임을 통해 직접 움직임으로써 해결 할 수 있다 .

• 모르는 장소를 찾는 경우엔 핸드폰과 컴퓨터를 통해 알 수 있어서 예전처럼

생각하고 찾는 경우가 적어 사고의 깊이가 줄어든 것을 이 게임을 통해 사고의 깊이를 향상시키는 효과가 있다 .

• 현대인들은 너무 바쁜 생활을 하고 있는데 여가시간을 마련하여 이 게임을

함으로서 협동심과 사람들간의 정서적 교감을 통해 휴머니즘을 높이는 계기가 된다 .

Page 5: 뭉게맨 UI  설계

메인화면

Page 6: 뭉게맨 UI  설계

메인화면 / 게임방법1. 도망자도망자의 설명을 보고싶으면 도망자를 터치 .

2. 술래술래의 설명을 보고싶으면 술래를 터치 .

원래 화면으로 되돌아가고 싶으시면핸드폰의 취소버튼을 누르시면됩니다 .

메인화면으로 <

< 게임 방법 >

도망자술래

이전화면 <

Page 7: 뭉게맨 UI  설계

메인화면 / 게임방법 / 도망자

도망자 ! 의 미션을 알고 싶으신가요 ?

도망자는 제한시간내에 술래에게 잡히지 않고

미션을 수행하면 승리하게되요 !진행화면에 경보등이 빨간색으로

울리면 술래가 가까이 있는거에요 . 경보등이 파랑색이

되면 임무수행장소가 가까워 졌다는 거에요 .

임무는 게임마다 바뀌니까 주의해주세요

도망자의 게임방법에대해서 설명해주는화면입니다 .

원래 화면으로 되돌아가고 싶으시면핸드폰의 취소버튼을 누르시면됩니다 .

메인화면으로 <

이전화면 <

Page 8: 뭉게맨 UI  설계

메인화면 / 게임방법 / 술래

술래 ! 의 미션을 알고 싶으신가요 ?

술래는 제한시간내에 도망자들을 전부 잡는것이 목적이에요 . 한

명도 빠짐없이 전부 잡아야 술래가 이기게 되므로

주의해주시고 단 한명이 살더라도 도망자가 임무를 전부완수하면 지게되요 .

진행화면의 경보등이 울리게되면 주변에 도망자가 있다는거니까

빨리움직여주세요 .

원래 화면으로 되돌아가고 싶으시면핸드폰의 취소버튼을 누르시면됩니다 .

술래의 게임방법에대해서 설명해주는화면입니다 .

메인화면으로 <

이전화면 <

Page 9: 뭉게맨 UI  설계

메인화면 / 환경설정1. 소리크기막대바가 많아 질 수록 소리가커짐2. 진동진동을 on 과 off 로 터치하여 변경 할 수 있음3. 경고음설정경고음 설정을 하시려면 터치하시면 설정화면이 됨

원래 화면으로 되돌아가고 싶으시면메인메뉴를 누르시거나핸드폰의 취소버튼을 누르시면됩니다 .

메인화면으로 <

Page 10: 뭉게맨 UI  설계

메인화면 / 환경설정 / 경고음설정

소리 1

소리 3

소리 2

메인메뉴

소리 1, 소리 2 소리 3 을 누르면 예시음을 들을수있습니다 . 화면에서 보는것과같이 설정된 소리는 하얗게 변합니다 .

원래 화면으로 되돌아가고 싶으시면메인메뉴를 누르시거나핸드폰의 취소버튼을 누르시면됩니다 .

메인화면으로 <

Page 11: 뭉게맨 UI  설계

메인화면 / 게임시작1. 방 만들기 자신이 게임을 개설할 수 있다 . 2. 참가하기 버튼은 오로지 자신의 전화번호부에 등록된 사람이 만든 방에만 참여 할 수 있습니다 .3. 퀵 조인 일일히 친구의 방에들어가기 힘들거나 귀찬음을 덜어줄기능입니다 . 자신이 들어갈수있는방에 바로 참여 할 수 있게 됩니다 .

메인화면으로 <

방만들기

참가하기

퀵조인

게임시작

Page 12: 뭉게맨 UI  설계

메인화면 / 게임시작 / 방만들기 / 일반모드

게임 시간 제한

게임 인원수

범위 설정

1. 게임 시간 제한게임에 제한시간을 설정할 수 있음

2. 게임 인원수게임에 참가할 인원을 설정할 수 있음

3. 범위 설정지도가 나타나면서 범위를 설정할 수 있음 .

4. 방 만들기설정을 완료하고 방을 만들 수 있음

이전 메뉴

방 만들기20분

40 분

60 분

Page 13: 뭉게맨 UI  설계

메인화면 / 게임시작 / 방만들기

캠퍼스모드

일반모드

1. 캠퍼스 모드 특정 캠퍼스를 설정해서어플리케이션에서 자체 제공하는 임무 제한시간 게임을 할수 있습니다 .2. 일반모드일반 지도에서 사용자가 직접제한시간과 제한인원 범위를 설정해게임을 할 수 있습니다 .

이전으로 <

Page 14: 뭉게맨 UI  설계

메인화면 / 게임시작 / 방만들기 / 일반모드 /

게임시간제한

게임 시간 제한20분

40 분

60 분

취소

1.20 분 게임제한 시간을 20 분으로 설정합니다 .

2.40 분 게임제한 시간을 40 분으로 설정합니다 .

3. 60 분 게임제한 시간을 20 분으로 설정합니다 .

제한시간을 터치하면 제한시간이 설정이되면서 이전메뉴로 갈수있습니다 .취소버튼을 눌러도 이전 메뉴로 갈 수있습니다 .

Page 15: 뭉게맨 UI  설계

메인화면 / 게임시작 / 방만들기 / 일반모드 /

게임인원수

게임 인원수8 명

10 명

12 명

취소

게임인원수는 한방에 최대로 들어올 수있는인원의 수를 설정할 수있습니다 .1. 8 명 게임인원수를 8 명으로 설정합니다 .2. 10 명게임인원수를 10 명으로 설정합니다 .3. 12 명 게임인원수를 12 명으로 설정합니다 .

제한인원수를 터치하면 제한인원수가 설정이되면서 이전메뉴로 갈수있습니다 .취소버튼을 눌러도 이전 메뉴로 갈 수있습니다 .

Page 16: 뭉게맨 UI  설계

메인화면 / 게임시작 / 방만들기 / 일반모드 /

범위설정일반모드는 지도에서 범위를 설정해주어야게임이 가능 합니다 .터치해서 드래그를 하면 빨간 색선이 생기면서범위를 지정할수 있습니다 .

드래그 한 이후 설정 버튼을 누르면 다시이전메뉴로 화면이 넘어갑니다 .취소버튼을 눌러도 이전 메뉴로 갈 수있습니다 .

취소 설정

Page 17: 뭉게맨 UI  설계

메인화면 / 게임시작 / 방만들기 / 캠퍼스모드 & 일반모드 /

방만들기 & 퀵조인

일반모드는 지도에서 범위를 설정해주어야게임이 가능 합니다 .

터치해서 드래그를 하면 빨간 색선이 생기면서범위를 지정할수 있습니다 .

드래그 한 이후 설정 버튼을 누르면 다시이전메뉴로 화면이 넘어갑니다 .취소버튼을 눌러도 이전 메뉴로 갈 수있습니다 .

이전화면으로 <( 캠퍼스모드 )

이전화면으로 <( 일반모드 )

술래팀 !

도 망자 팀 !

랜덤 팀 섞기

사람 2

사람 1

사람 3

사람 4

사람 5

사람 6

사람 7

사람 8

Page 18: 뭉게맨 UI  설계

메인화면 / 게임시작 / 방만들기 /

캠퍼스모드캠퍼스모드캠퍼스모드는 한국의 각 대학교를어플리케이션 자체에서 범위와 임무를제공해서 게임을 즐길 수 있습니다 .

취소버튼을 눌러도 이전 메뉴로 갈 수 있습니다 .

캠퍼스모드

추천캠퍼스

경기대

서울대

고려대

연세대

숭실대

건국대

아주대이전메뉴으로 <

Page 19: 뭉게맨 UI  설계

메인화면 / 게임시작 / 방만들기 / 캠퍼스모드 & 일반모드 / 방만들기 & 퀵조인 / 게임시작

적팀과 근접

미션수행지와 근접

① ② ④③

⑤ ⑥ ⑦

게임사작 화면 입니다 .1. 아이템 1 로 클릭을 하게 되면 아이템 1 이

사용된다 . 2. 아이템 2 로 클릭을 하게 되면 아이템 2

사용된다 .3. 아이템 3 로 클릭을 하게 된면 아이템 3

사용된다 .4. 게임의 남은 제한 시간을 나타냅니다 .

시간이 모두 지나면 게임이 끝납니다 .5. 미션수행 버튼 입니다 . 클릭을 하게 되면

수행해야 될 미션 내용을 볼 수 있는 창이 나옵니다 .

6. 완료 미션목록버튼 입니다 . 클릭을 하게되면 완료미션을 볼 수 있는 창이 나옵니다 .

7. OUT 버튼 입니다 . 술래의 경우가 클릭하면 다이얼 패드가 나오고 도망자의 경우도망자의 고유 번호가 나오게 됩니다 .

Page 20: 뭉게맨 UI  설계

캠퍼스모드

추천캠퍼스

경기대

서울대

고려대

연세대

숭실대

건국대

아주대

메인화면 / 게임시작 / 방만들기 / 캠퍼스모드 & 일반모드 / 방만들기 & 퀵조인 / 게임시

작 / 아이템 1

mission

게임진행 화면으로

아이템 1 을 사용한 화면 입니다 .아이템 1 의 효과는 상대방의 위치를10 초 동안 보여주는 효과를 가집니다 .

아이템 1 번과 아이템 2 번을 혼합하여 유용하게 게임에서 사용하실 수 있습니다 .

Page 21: 뭉게맨 UI  설계

캠퍼스모드

추천캠퍼스

경기대

서울대

고려대

연세대

숭실대

건국대

아주대

메인화면 / 게임시작 / 방만들기 / 캠퍼스모드 & 일반모드 / 방만들기 & 퀵조인 / 게임시작 /

아이템 3

mission

게임진행 화면으로

아이템 3 을 사용한 화면 입니다 .아이템 3 의 효과는 상대방의 지도 화면을잠시동안 볼 수 없는 상태를 만들어서게임의 플레이를 방해하는 역할을 합니다 .

Page 22: 뭉게맨 UI  설계

캠퍼스모드

추천캠퍼스

경기대

서울대

고려대

연세대

숭실대

건국대

아주대

메인화면 / 게임시작 / 방만들기 / 캠퍼스모드 & 일반모드 / 방만들기 & 퀵조인 / 게임시

작 / 아이템 2

mission

주의하세요 !지금은 적이 가까이와도경고음이 나지않아요

닫기

게임진행 화면으로

아이템 2 를 사용한 화면 입니다 .아이템 2 의 효과는 상대방이 접근시 경고음을 잠시동안 작동하지 않게 해주는 것 입니다 . 몰래 상대방에게 다가가거나 피할때 유용하게 쓰이는 아이템 입니다 .

Page 23: 뭉게맨 UI  설계

캠퍼스모드

추천캠퍼스

경기대

서울대

고려대

연세대

숭실대

건국대

아주대 mission

Mission1. 그라지에를 찾아라

2. 공대실습동을 찾아라

3. 신학관안의 서점을 찾아라

4. 육영관이 몇강의동인지 알아내라

5. 경기대학교 덕문관안의 특정장소에

들어가라

메인화면 / 게임시작 / 방만들기 / 캠퍼스모드 & 일반모드 / 방만들기 & 퀵조인 / 게임시작 /

Mission

게임진행 화면으로

Mission 버튼을 터치한 화면입니다 . 수행해야 될 미션 내용을 볼 수 있는 창이 나옵니다 .

각 미션 항목을 모두 수행하게 되면 도망자팀의 승리 이기 때문에 도망자는 꼭 봐야하는 내용 입니다 .

Page 24: 뭉게맨 UI  설계

캠퍼스모드

추천캠퍼스

경기대

서울대

고려대

연세대

숭실대

건국대

아주대

메인화면 / 게임시작 / 방만들기 / 캠퍼스모드 & 일반모드 / 방만들기 & 퀵조인 / 게임시작 /mission complete!

mission

Mission

- 완료 -1 / 4 개

임무 완수

게임진행 화면으로

Mission Complete 화면 입니다 .

완료미션을 볼 수 있는 창으로 총 몇 개의 미션을 완료 했는지 보여 줍니다 .

Page 25: 뭉게맨 UI  설계

캠퍼스모드

추천캠퍼스

경기대

서울대

고려대

연세대

숭실대

건국대

아주대

메인화면 / 게임시작 / 방만들기 / 캠퍼스모드 & 일반모드 / 방만들기 & 퀵조인 / 게임시작 /

alert

mission

게임진행 화면으로

alert 화면 입니다 . 상대방이 접근하면 경보음이 울리면서 위험을 알리는 화면입니다 .상대방과의 거리가 다시 멀어지면원래 화면으로 되돌아 오게 됩니다 .

Page 26: 뭉게맨 UI  설계

캠퍼스모드

추천캠퍼스

경기대

서울대

고려대

연세대

숭실대

건국대

아주대

메인화면 / 게임시작 / 방만들기 / 캠퍼스모드 & 일반모드 / 방만들기 & 퀵조인 / 게임시작 /miss-sion alarm

mission게임진행 화면으로

Mission Alarm화면 입니다 .

Mission 수행지에 가까워지면 미션 수행지가 가깝다는 것을 나타내는 화면 입니다 . 화면이 나오면 주변에 미션수행지이므로 미션을 수행하시고 가는 것이 게임진행에 좋을 것 입니다 .

Page 27: 뭉게맨 UI  설계

_ _ _ _

메인화면 / 게임시작 / 방만들기 / 캠퍼스모드 & 일반모드 / 방만들기 & 퀵조인 / 게임시작 / OUT 버튼( 도망자 )

게임진행 화면으로

OUT 버튼 화면 ( 도망자 ) 입니다 .

술래가 도망자를 잡아서 알아낸 아웃번호를 입력하는 화면으로 도망자의 아웃 번호를 입력 하면 도망자가 아웃되게 됩니다 .

Page 28: 뭉게맨 UI  설계

메인화면 / 게임시작 / 방만들기 / 캠퍼스모드 & 일반모드 / 방만들기 & 퀵조인 / 게임시작 / OUT 버튼( 술래 )

비밀번호는5423

입니다 .

게임진행 화면으로

OUT 버튼 화면 ( 술래 ) 입니다 .

도망자가 술래에게 잡혀서 OUT 버튼을 누르면 도망자의 아웃번호가 나오는 화면 입니다 .아웃번호를 술래의 OUT 버튼에 입력하게 되면 해당 도망자는 OUT 되게 됩니다 .

Page 29: 뭉게맨 UI  설계

OUT!!!

메인화면 / 게임시작 / 방만들기 / 캠퍼스모드 & 일반모드 / 방만들기 & 퀵조인 / 게임시작 / 술래에게 잡힐경우 ( 도망

자 )/out!

게임진행 화면으로

OUT 화면 입니다 .아웃번호를 입력 당한 도망자의 화면 입니다 .아웃과 동시에 도망자는 관전모드로 전환하게 됩니다 .

Page 30: 뭉게맨 UI  설계

메인화면 / 게임시작 / 방만들기 / 캠퍼스모드 & 일반모드 / 방만들기 & 퀵조인 /

게임시작 /win!

W I N !

메인화면으로

게임이 끝나고 게임에서 승리한 팀에게 나타나는 화면 입니다 .

Page 31: 뭉게맨 UI  설계

W I N !

메인화면 / 게임시작 / 방만들기 / 캠퍼스모드 & 일반모드 / 방만들기 & 퀵조인 / 게임시작 /lose

Lose..메인화면으로

게임이 끝나고 게임에서 패배한 팀에게 나타나는 화면 입니다 .

Page 32: 뭉게맨 UI  설계

W I N !

참가하기 나가기

메인화면 / 게임시작 /참가하기

방목록게임시작에서 참가하기 버튼을 터치하면이 화면이 나타 납니다 .들어가고싶은 방을 선택해서 들어갈수 있습니다 .