인터페이스 101 : 예쁘게 만들기

나는 실제로 야생으로 출시 한 몇 가지 게임을 만들었습니다. 몇 가지 특정 문제가 반복적으로 발생합니다. 이것이 게임의 인터페이스 / 테마 문제입니다.

게임의 룩앤필과 인터페이스에 대해 비 임의적이고 일관된 결정을 내릴 수있는 방법은 무엇입니까?

예를 들어, Silverlight 화학 기반 게임 버전 1에서 자연스러운 가로 스타일 스타일의 룩앤필을 사용하기로 결정한 것은 (나쁜?)이 UI로 귀결되었습니다.

그런 다음 나중에 반복하면서 더 똑똑해지고 더 "기계적"인 지저분한 모양과 느낌을 얻었습니다.이 결과는 최종 UI입니다.

UI에서 내 취향이 반복을 통해 향상되었다고 분명히 말할 것입니다. 그러나 그것은 초기에 자의적으로 많은 결정을 내리고 많은 조정을 한 결과였습니다.

게임을 테마로하는 방법을 알아내는 더 좋은 방법이 있습니까?

판타지 / 공상 과학 소설을 쓸 때 글과 비슷한 점을 설명하기 위해 설명해야 할 요소가 많이 있습니다. 개체 / 생물 / 장소 등을 임의로 발명 할 수는 있지만 몇 분 동안 앉아서 지역, 지역, 행성 또는 우주를 설계 할 때 훨씬 일관된 세계 를 얻게 됩니다. 모두는 잘 함께 맞는, 당신은 자신을 요청할 수 있습니다 "어떻게 것 이 이 우주에서 사용할 수 있습니까?

편집 : 나는 이것을 잘 설명하지 않은 것 같습니다. 제목 화면 (배경, 글꼴, 스킨 단추가있는)을 배치해야하는 경우 어떻게 표시할지 결정하려면 어떻게해야합니까? 녹색 또는 파란색? 그런지 아닌지? 둥글거나 평평합니까? 세리프 또는 산세 리프?

그 질문을 가지고 게임 전체로 폭발 시키십시오. 상황이 어떻게 보이는지 어떻게 알 수 있습니까? 그것들을 일관성 있고 비 임의로 만들기 위해 어떤 프로세스를 사용합니까?

스크린 샷을 다시보십시오. 나는 잔디 / 하늘 / 바위에 붙어 있었지만 금속은 화학 반응과 원자의 아이디어에 더 적합 해 보였다.

충돌하는 스타일이있는 것 같습니다.

Peggle, Ultima Underworld, Diablo 3, Starcraft 2 및 Gran Turismo 5의 UI를 살펴보십시오.

각 UI가 테마 내에서 어떻게 일관성 이 있는지 확인하십시오 .

Peggle은 모든 UI 요소와 마찬가지로 핀볼입니다. 모든 것은 미터, 레버, 노즐, 스프링 보드입니다.

Ultima Underworld에는 철 / 강철, 물약, 배낭,지도 등 UI 요소가 있습니다. 어드벤쳐 타임.

울티마 언더 월드와 유사 (사실 UW를 기반으로하는 것으로 보입니다)

미래적이고, 매끄럽고, 단순하고, 최소한의 (시제품)

자동차 인테리어

따라서 첫 번째 디자인은 완전히 일관성이없고 테마가 없습니다. 오픈 필드는 게임과 어떤 관련이 있습니까? 금속 배경도 마찬가지입니다. 플라스크 및 바이알, 고무 장갑 및 페트리 접시가있는 게임 보드 용 실험실 벤치와 화학 실험실 배경을 사용해보십시오.

Dr. Mario는 기본적으로 의료, 박테리아, 바이러스, 의학 테마입니다.

또한 UI에는 게임 플레이 요소와 비슷한 스타일의 그래픽이 있어야합니다 . 화학 기호 볼은 둥글고 부드럽게 등급이 매겨집니다. 선택한 배경 / 게임 보드 에는 게임 플레이 요소와 완전히 다른 아트 스타일 이 있습니다. 현장은 생생한 사진입니다. 금속은 매우 상세하지만 화학 공은 부드럽고 상대적으로 상세하지 않습니다.

내가 깨닫기 시작한 한 가지는 매우 중요합니다. 적절한 대비 사용.

그 첫 사진을보세요. 그것은 모든 곳에서 대조적입니다! 하늘이 밝고 수평선이 어두워지고 먼 잔디가 밝고 바닥이 어둡습니다. 바둑판 식으로 배열 된 배경은 매우 밝고 매우 어둡습니다. 이 모든 것은 정보가 아닙니다. 시각적 혼란. 실제 중요한 부분 인 원은 모든 대비 변화에 의해 익사합니다.

이제 두 번째 그림을보십시오. 배경이 어둡고 상대적으로 모노톤입니다. 경기장 전체에 밝은 테두리가 있습니다. 바둑판 식으로 배열 된 배경은 대부분 어둡고 중요한 위치에 얇은 흰색 선이 있습니다. 갑자기 가장 대조적 인 것들 중 하나이기 때문에 실제로 퍼즐을 볼 수 있습니다.

개인적으로, 나는 여전히 약간의 조정을 할 것입니다. 그리드 분할을 표시하는 흰색 선은 중요하지만 인간의 뇌는 직선의 특징을 추정하는 데 능숙하며, 훨씬 더 어둡고 약간 나 could 수도 있습니다.

그 UI에서 나를 방해하는 가장 큰 것은 하단 막대입니다. 그것은 밝고, 당신의 얼굴에 있으며, 텍스트를 읽기가 어렵습니다. 마지막 부분이 중요합니다. 텍스트를 읽기 어려운 이유는 다시 대비 때문입니다. 우리는 글자의 가장자리를 찾아서 부분적으로 텍스트를 읽지 만, 불행하게도 글자는 하단 막대의 일부와 잘 어울립니다.

내가해야 할 일 : 대비 측면에서 하단 배경을 기본 배경에 잘 맞도록 다시 트리거하십시오. 그것과 기본 배경 사이에 밝은 테두리를 만들어 별도의 사실을 피하십시오. 그런 다음 대부분의 텍스트를 제거하십시오. "다이아몬드"는 실제 다이아몬드가 될 수 있습니다. "왼쪽 원자"는 몇 개의 원자를 그림으로 볼 수 있습니다. "남은 시간"은 모래 시계 또는 손목 시계 또는 회중 시계가 될 수 있습니다. "다음"은 완전히 사라질 수 있습니다. "원하는 원자를보기 위해 게임을해야한다"고 말하지만 이는 성가신 게임 메커니즘입니다. 오른쪽의 원자 더미로 바꾸고, 비트 업 컨베이어 벨트에 앉히고 다음 눈에 보이는 약간의 시각적 기계 장치 단서가 있습니다. 타다! 퍼즐 개선, 인터페이스 개선, 모든 것이 덜 복잡해 보입니다.

당신이 경우 않는 텍스트를 사용 할 필요가 보장 대비하는 두 가지 방법이있다. 먼저, 텍스트 자체를 대비가 낮은 곳에 놓으십시오. 배경이 어두운 경우 밝은 텍스트를 사용하십시오. 배경이 밝은 경우 어두운 텍스트를 사용하십시오. 그렇게 할 수 없다면 (그리고 때로는 할 수없는 경우), 외부 광선 효과를 사용하는 것을 망설이지 마십시오. 텍스트가 무엇이든 관계없이 올바른 테두리 대비를 제공하는 좋은 방법입니다.

인터페이스를 사용할 때 이미지 편집기를 열고 흑백으로 바꾸고 흐림 및 가장자리 감지의 두 가지를 시도하십시오. UI가 몽크가 흐려지면 비전이 자동으로 중요한 영역으로 들어가야합니다. 가장자리 감지시 중요한 영역을 강조 표시해야합니다. 예 :

이 두 가지를 비교하십시오. 첫 번째는 거의 읽을 수 없습니다. 확실히 일부 보석은 볼 수 있지만 많은 보석은 보이지 않습니다. 두 번째 그리드에서는 대화 상자와 마찬가지로 그리드가 즉시 두드러집니다. 보드에는 보석이 하나 뿐이지 만 어디에 있는지 즉시 확인할 수 있습니다.

첫 번째는 그리드 가장자리를 크게 강조합니다. 보석 중 일부는 거의 보이지 않습니다. 두 번째는 여전히 (개인적으로보다 더) 사람들을 강조하지만 퍼즐의 경계를 매우 강하게 강조하며 보석은 훨씬 더 완벽하게 보이지는 않습니다.

이 방법은 만병 통치약은 아니지만 해결해야 할 사항을 추적하는 데 도움이 될 수 있습니다. 휴먼 비전은 가장자리와 대비를 기반으로하며 UI를 사람이 읽을 수 있도록 디자인해야합니다.

(컬러 이론의 관점에서 이것에 올 것이다)

당신의 질문은 매력적인 GUI를 만드는 방법에 관한 것이 아니라고 생각합니다. 당신이 정말로 지적하는 것은 "내 선수들에게주고 싶은 경험을 어떻게 선택합니까?"입니다.

그리고 이것은 대부분 심리적 대답입니다. 파란색, 녹색 또는 빨간색을 선택하는 것을 언급하고 실제로 색상에 관한 것이 아니라 색상을 볼 때 느끼는 감정에 관한 것입니다.

게임이 빨간색 인 경우 (배경은 빨간색의 차드, 플레이어가 빨간색을 입고 있거나 빨간색 게임 조각을 사용하는 경우, 글꼴은 모두 읽을 수있는 빨간색 음영 임)이 게임을하면 어떻게 생각하십니까 경기? 그리고 게임이 무엇인지는 중요하지 않습니다.

당신은 것입니다 느낌이 게임 역시 매우 화가 나 발렌타인 데이 게임의 일종처럼.

의사 결정 과정이 시작됩니다. 플레이어가 화학 게임에서 과학 실험을하고 있다고 느끼기를 원한다면 모든 것이 깨끗하고 단순 해집니다. 아마도 흰색을 강조하는 것일 수도 있습니다.

플레이어가 어떤 종류의 제조 작업을하고있는 것처럼 느끼고, 과학으로 인해 점점 더러워지는 느낌이 든다면, 두 번째 그림이거나 노란색과 검은 색을 강조하는 것이 좋습니다.

플레이어가 자신과 모든 생명체의 확장과 같이 화학과 하나라고 느끼기를 원한다면 첫 번째 그림이 좋을 수 있습니다. 연한 파란색과 연한 녹색 및 갈색과 같은 자연스러운 색조를 강조합니다.

그것은 실제로 플레이어가 느끼는 원시 감정으로 귀착됩니다.

짧은 답변 : 짧은 답변이 없습니다 .

디자인은 엄청난 양의 책, 기사 및 언급 한 바와 같이이 질문을 다루는 라이브러리 가있는 거대한 분야 입니다. 다양한 문화에서 색 구성표, 글꼴, 스타일, 레이아웃, 공백 사용, 음수 공간, 질감, 색상 및 그 의미, 왜 코믹 산이 악하고 사용해서는 안됩니까? 코스, 서적, 블로그, 리서치 논문 및 웹 사이트가 이러한 종류의 것들에 전념합니다. 질문이 많이 요구하기 때문에 이에 대한 간단한 대답은 없을 것입니다.

솔직히, 최선의 선택은 당신을 도와 줄 디자이너를 고용하는 것입니다. 예산이 부족하면 디자이너와 친구가되어 도움을 받으십시오. 이것이 가능하지 않으면 잠시 동안 혼자 가야 할 수도 있습니다.

몇 가지 팁이 있습니다. 색 구성표의 경우 색 구성표 디자이너 와 같은 것을 사용하십시오 . 색상이 함께 작동하는 방식에 대해 배우고 일반적으로 몇 가지 색상 만 선택하고 배를 타고 가지 마십시오. 한도는 약 3 색이어야합니다.

글꼴의 경우 전체 기사와 연구 논문이 있습니다 (여기에는 serif 대 sans serif가 있습니다 ). 다시 말하지만 일반적인 규칙은 최대 두 개의 글꼴을 선택하는 것입니다. 좋은 선택은 기본 글꼴은 아니지만 여전히 멋진 글꼴을 선택하는 것입니다. 옵션이라면 Helvetica는 꽤 좋지만 다른 좋은 것들이 많이 있습니다.

스타일 및 / 또는 테마의 경우 대답하기가 더 어렵습니다. 가장 큰 팁은 스타일과 일치하는 것입니다 . 자연을 공상 과학이나 스케치 라인 아트와 그의 3D 폴리 모델과 혼합하지 마십시오. 이것은 대부분 한 예술가를 찾아 모든 예술을하거나 스스로하는 일을 의미합니다 (대기업의 경우 예술 책임자가있는 이유입니다). 테마는 시작하기 전에 설정된 테마를 염두에두고 있지 않은 경우 반드시 사용해야합니다. 솔직히 말하면 시간이 지남에 따라 더 많은 게임이 완료되면 변경 될 수 있습니다. 실제로 개발 과정에서 테마가 변경 될 가능성은 매우 높습니다.

전반적으로 디자인을 가르 칠 수는 있지만 일부 사람들은 단지 프로그래밍에 능숙하지 않습니다. 도움을 줄 디자인 친구가 있으면 편리합니다.

편집 :

좋아, 나는 이것을 다시 썼다. 이제 나는 질문을 더 잘 이해한다.

내가 혼란스러워 한 이유는 당신이 서면으로 평행을 주려고했기 때문입니다. 그러나 당신이 가지고있는 예는 전혀 평행하지 않습니다. UI 디자인은 프리젠 테이션의 문제입니다. 책의 내용은 실제 물질에 관한 것입니다.

따라서 프리젠 테이션의 문제로 UI 디자인을 살펴 보려면 제시하고자하는 것에 대해 생각해야합니다. 물론, 당신은 당신의 게임을 발표하려고 노력하고 있습니다. 전문가처럼 보이기를 원하십니까? 장난? 어두운? 빛?

예를 들어, 게시 한 두 이미지를보고 그 이미지에서 얻은 인상을 알려 드리겠습니다.

첫 번째, 우리가 볼 수있는 몇 가지 명백한 측면이 있습니다. 물론 두 번째 이미지보다 가볍습니다. 깊이가있는 필드의 이미지 (필드가 뷰어에서 멀어짐에 따라)를 선택했다는 사실에 덧붙여서 느낌은 훨씬 더 넓습니다. 더 자유로운 느낌, 더 가벼운 느낌입니다.

두 번째 이미지를 보면 물론 훨씬 더 어둡습니다. 또한 첫 번째 이미지의 지속적인 깊이 감을 없애고 시청자의 시선에 수직 인 평면 이미지 인 배경을 가지고 있습니다. 실제 깊이 신호는 다이아몬드 도금의 음영에서 비롯되며 배경 이미지를 카메라에 매우 가깝게 가져옵니다. 이 모든 것들이 더 어둡고 폐소 공포증적인 느낌을주기 위해 합쳐집니다.

이제 두 가지 테마로 무엇을 할 수 있습니까? 글쎄, 첫 번째 주제는 당신이하고 싶은 일이 더 캐주얼하다고 느끼면 좋을 수있는 것입니다. 그것은 플레이어가 게임 조각으로 지금하고있는 것과 같은 일이 세상에서 일어나고있는 전부가 아니라는 것을 의미합니다. 두 번째 이미지는 더 시급한 느낌을줍니다. 게임의 "알려진 세계"는 훨씬 작으며 플레이어가하는 일에 더 중점을 둡니다.

이것이 정말로 '예쁘게 만드는 것'에 관한 것입니까? 그것은 주관적인 것이며 첫 번째 스크린 샷이 두 번째 스크린 샷보다 더 좋아 보인다고 생각합니다.

테마를 선택하는 것은 실제로 로켓 과학이 아닙니다. 게임의 주요 내용이나 목적을 알고 있으며 다른 측면을 선택할 때 마음에 담을 수 있습니다.

지금까지 아무도 언급하지 않은 것 중 하나는 게임을 할 사람들에게 피드백을 요청하는 것입니다. UI 디자이너는 사용자에게 디자인을 보여주고 게임, 워드 프로세서 또는 비행 데크를 설계하든 관계없이 옳고 그름을 찾는 데 많은 시간을 할애합니다.