Transcript UI디자인_3요소_성민철 4MB

UI디자인 3요소
작성자 : mckillu
목차
1. 제목
2. 목차
3. 발표 전 알아두기
4. UI기획의 3요소
5. 전달성
- 컨셉트의 전달
- 대표적 게임
6. 일관성
- UI 틀 구성
- 대표적 게임
7. 편의성
- 시선의 방향
- 마우스 위치
- 버튼의 형태
- 대표적 게임
작성자 : mckillu
※ 발표 전 알아두기!!!
아래 발표할 내용은 케주얼 게임의 UI를 토대로 하여 작성되었으며
작성자의 경험을 토대로 만든 지극히 주관적인 문서이므로
몇 가지 오류나 잘 못 기재된 부분이 있을 수 있으니,
그 점 양해 바랍니다.
작성자 : mckillu
UI기획의 3요소
UI 기획에서 중요한 3요소는 디자인의 일관성, 편의성, 전달성이다.
UI 기획
전달성
일관성
편의성
작성자 : mckillu
전달성
게임 내 UI(User Interface)는
게임의 얼굴로서 게임의 특성과
잘 어울려야 한다.
컨셉트의 전달
대표적 게임
작성자 : mckillu
컨셉트의 전달
로비에 입장하는 즉시 유저는 게임의 분위기를 느낄 수 있어야 한다.
UI내 게임 컨셉트 살리기
1. 세계관에 맞는 배경화면
- 보통 유저들은 웹 페이지에 있는 게임 세계관이나 시나리오는 잘 보지 않는다.
UI의 배경화면을 세계관에 맞게 설정하면 유저는 자연스럽게 세계관에 접근하게 된다.
2. 게임과 비슷한 느낌의 디자인
- 게임과 비슷한 색을 사용하여 일체감이 들게 한다.
3. 게임과의 일체감
- UI와 게임의 구분 없이 하나의 연결 선상으로 이어지도록 한다.
세계관에 맞는 배경<캡슐 파이터>
게임과 비슷한 느낌의 디자인<팡야>
게임과 일체형인<던전 엔 파이터>
작성자 : mckillu
컨셉트의 전달
아스트로 레인저는 전달성을 유지한 대표적인 게임이다.
※ 아스트로 레인저
게임 컨셉트
- 아스트로 레인저는 지구인이 아스트로 레인저로 변신하여 리듬액션으로
외계의 적들과 싸워 물리친다는 다소 특촬물이나 스러운(?) 시나리오를 가지고 있다.
1. 만화책이 연상되는 화면
전체 화면을 각 모드별로 조각조각 내어 만화책의 한 면을 보는듯한 느낌이 든다.
<아스트로 레인저의 메인>
2. 마벨류와 같은 강렬한 색상과 굵은선을 사용.
기존의 게임과는 다른 강렬한 색과 굵은 선을 사용하여 처음 접하였을 때
이질감이 들지만, 게임의 컨셉트를 살리며 다른 게임과는 완벽하게 차별을 두었다.
3. 직접 출동해야 할 듯한 느낌
게임 대기방에서는 게임에 필요한 버튼들을 변신팔찌에 배치시켜
직접 변신팔찌를 조작하여 출동 준비 모습을 보여준다.
이 디자인 하나로 인해 게임에 더욱 몰입할 수 있다..
<아스트로 레인저의 게임 대기방>
작성자 : mckillu
일관성
게임 내 UI(User Interface)는
어느 화면으로 넘어가도
하나의 일관된 디자인 형태를
가지고 있어야 한다
UI 틀 구성
대표적 게임
작성자 : mckillu
UI 틀 구성
UI 디자인 시 게임의 컨셉트에 맞는 고정된 큰 틀을 구성한다.
일관성 있는 틀 구성할 때 생각해야 할 점.
1. 게임 컨셉트에 맞는가?
- 게임UI는 게임의 컨셉트와 따로 놀아서는 안된다. 게임UI에도 만들고자 하는 게임의 색채가 묻어나야 한다.
2. 어떤 구조의 틀로 구성할 것인가?
- 고정된 틀의 구조에 따라 같은 컨셉트라도 서로 다른 느낌의 UI가 만들어 진다.
3. 다른 화면에서도 계속 유지가 될 수 있는가?
- 하나의 고정 틀이 다른 곳에서도 유지 되면 인터페이스가 안정적이고 유저의 적응에도 도움을 준다.
팡야
①
②
④
4개의 사각 구조
판타지 마스터즈
스메쉬 스타
①
③
①
②
3개의 삼각 구조
③
②
③
3개의 세로 배열 3단 구조
작성자 : mckillu
대표적 게임
라그나로크TCG와 판타지 마스터즈는 일관성을 유지한
대표적인 게임이다.
①
②
③
※ 라그나로크TCG
가로 배열의 3단 구조로
① 자주 사용하는 버튼
화면 왼쪽에 작고 길게 배치하여 화면의 활용도를 높였다.
② 내용이 바뀌는 구간
로비나 게임방등 게임의 내용을 보여주는 구간으로 사이즈가 가장 크다.
아래 채팅창 구간을 묶어서 사용한다.
③ 정보 및 보조 화면
개인 정보와 함께 ②번 구간에 표시 하지 못한 내용을 함께 사용.
<라그나로크TCG의 로비>
③
①
※ 판타지 마스터즈
가장 기본적인 삼각 배열의 구조로 심플하면서 안정적이다.
① 내용이 바뀌는 구간
로비나 게임방등 게임의 내용을 보여주는 구간으로 사이즈가 가장 크다.
② 채팅 및 알림 창
채팅과 알림 이외의 다른 용도로는 전혀 사용하지 않는다.
②
③ 정보와 버튼
개인 정보와 자주 사용하는 버튼을 배치 ③번틀은 게임내에서도 유지.
<판타지 마스터즈의 로비>
작성자 : mckillu
편의성
게임 내 UI(User Interface)는
유저들이 한눈에 알아보기 쉽게 해야 한다.
시선의 방향
마우스 위치
버튼의 형태
대표적 게임
작성자 : mckillu
시선의 방향
사람들의 시선은 일반적으로 왼쪽 위에서 오른쪽 아래로 흐른다
시작
시작
시작
사람들의 시선 방향
끝
끝
끝
컴퓨터 모니터
책
※ 왼쪽 위부터 시선이 흐르는 이유
1. 평소 사물을 보거나 글을 쓰는 등 무의식적인 행동으로 인한 학습과 습관
2. 뇌의 역할.(이미지를 담당하는 우뇌를 사용할 때 시선은 왼쪽으로 향함)
작성자 : mckillu
마우스의 위치
마우스 커서의 위치는 오른쪽 아래에서 왼쪽 위로 올라간다.
끝
마우스를 잡고 있는 오른손과 가까운 위치에
마우스 포인터가 있을 때
가장 안정적으로 느껴진다.
마우스의 방향
시작
컴퓨터 모니터
작성자 : mckillu
버튼의 형태
버튼의 형태는 버튼의 역할과 중요성에 따라 달라져야 한다.
UI기획 시 버튼을 디자인 할 때 고려해야 할 상황.
1. 버튼의 용도(어디에 사용하는 버튼인가?)
- 보통 게임에서는 사용비중이 높은 버튼을 주축으로 나열한다.(상점, 내 정보, 방 만들기, 게임시작등)
- 사용 용도가 비슷한 종류의 버튼들은 탭버튼과 같이 하나의 묶음으로 사용한다.
2. 버튼의 크기(얼마나 많이 사용되는가?)
- 버튼의 사용 용도와 비중에 따라 버튼의 크기가 다르다.
- 게임 중 가장 중요한 버튼이 무엇인가? 그것은 “게임 시작”버튼이다.
“게임시작”버튼이 눈에 잘 띄면 아무리 게임을 모르는 사람이라도 게임을 못할 지 언정 게임을 할 수 있다.
3. 버튼의 위치(버튼을 어디에 배치할 것인가?)
- 버튼의 위치는 마우스의 위치과 직접적인 관련이 있다.
4. 문자? 그림?(버튼의 용도를 어떻게 알려 줄 것인가?)
- 버튼의 용도를 무조건 문자로만 사용하면 UI디자인이 죽어 보이며,
그림만을 사용한다면 많은 버튼의 그림을 이해하는데 불편함을 겪을 것이다.
문자와 글자의 적절한 사용과 배치가 중요!
작성자 : mckillu
대표적 게임
DJ Max의 UI는 유저의 편의성에 맞게 디자인 된
대표적인 게임이다.
1. 시선의 방향
왼쪽의 공간을 디스크로 사용하여
현재 선택한 노래가 어떤 노래인지 한눈에 알 수 있다.
2. 마우스 위치
버튼을 화면의 오른쪽으로 배치하여
마우스를 조금만 움직여도 목표지점에 닿을 수 있도록 하였다.
3. 버튼의 형태
‘게임시작’버튼을 크게 하여 가장 눈에 띄게 하였으며
다른 부가적인 버튼들은 아이콘화 하여 재미있게 표현
<DJ Max의 프리게임방>
작성자 : mckillu