Giao diện 101: Làm cho nó đẹp

Tôi đã thực hiện một vài trò chơi mà tôi thực sự phát hành vào tự nhiên. Có một vấn đề cụ thể tôi gặp phải nhiều lần, và đó là vấn đề về giao diện / chủ đề của trò chơi.

Làm thế nào bạn có thể đưa ra quyết định không độc đoán, nhất quán về giao diện và giao diện của trò chơi của bạn?

Ví dụ, trong phiên bản một trong trò chơi dựa trên hóa học Silverlight của tôi, tôi đã đưa ra quyết định (xấu?) Để đi cùng với giao diện tự nhiên, theo phong cảnh, dẫn đến giao diện người dùng này:

Sau đó, trong một lần lặp lại sau, tôi đã trở nên thông minh hơn và đi với một cái nhìn và cảm giác cáu kỉnh hơn, kết quả là (giao diện người dùng cuối cùng):

Tôi chắc chắn sẽ nói rằng hương vị của tôi trong UI được cải thiện thông qua việc lặp lại. Nhưng đó là kết quả của rất nhiều quyết định ban đầu tùy tiện và sau đó là rất nhiều điều chỉnh.

Có cách nào tốt hơn để tìm ra làm thế nào để chủ đề trò chơi của bạn?

Để viết song song bằng văn bản, khi bạn đang viết một cuốn tiểu thuyết giả tưởng / khoa học viễn tưởng, có rất nhiều yếu tố bạn cần mô tả. Trong khi bạn có thể tùy ý phát minh ra các vật thể / sinh vật / địa điểm / v.v., bạn sẽ có được một thế giới phù hợp hơn nhiều khi bạn ngồi xuống trong vài phút và thiết kế khu vực, khu vực, hành tinh hoặc vũ trụ. Mọi thứ sau đó khớp với nhau một cách độc đáo, và bạn có thể tự hỏi mình "làm thế nào điều này sẽ hoạt động trong vũ trụ này?

Chỉnh sửa: Có vẻ như tôi đã không giải thích điều này tốt. Hãy để tôi đơn giản hóa câu hỏi một cách cực đoan: khi tôi cần bố trí màn hình tiêu đề (với nền, phông chữ, nút da) làm thế nào để tôi quyết định chúng trông như thế nào? Xanh hay xanh? Grunge hay không? Tròn hay phẳng? Serif hay sans-serif?

Lấy câu hỏi đó và phát nổ nó vào trò chơi của bạn nói chung. Làm thế nào để bạn tìm ra làm thế nào mọi thứ nên nhìn? Quá trình nào bạn sử dụng để làm cho chúng nhất quán và không độc đoán?

Nhìn vào ảnh chụp màn hình một lần nữa. Tôi có thể bị mắc kẹt với cỏ / bầu trời / đá, nhưng kim loại có vẻ phù hợp hơn với ý tưởng về các phản ứng hóa học và nguyên tử.

Bạn dường như có phong cách xung đột.

Hãy xem các UI này từ Peggle, Ultima Underworld, Diablo 3, Starcraft 2 và Gran Turismo 5.

Lưu ý cách mỗi UI phù hợp trong chủ đề của nó .

Peggle là bóng giống như trong tất cả các yếu tố UI của nó. Mọi thứ là một mét, một đòn bẩy, một vòi phun, một bàn đạp.

Ultima Underworld có các yếu tố UI là sắt / thép, bình thuốc, ba lô, bản đồ. Thời gian phiêu lưu.

Tương tự như thế giới ngầm Ultima (trên thực tế dường như được dựa trên UW)

Tương lai, kiểu dáng đẹp, đơn giản, tối thiểu (protoss)

Nội thất ô tô

Vì vậy, bạn thấy, thiết kế đầu tiên của bạn là hoàn toàn không nhất quán và không phù hợp. Những gì một lĩnh vực mở phải làm với trò chơi của bạn? Tương tự với nền kim loại. Hãy thử một chiếc ghế trong phòng thí nghiệm cho bảng trò chơi, và một nền phòng thí nghiệm hóa học, với bình và lọ và găng tay cao su và đĩa petri.

Bác sĩ Mario về cơ bản là y tế, vi khuẩn, vi rút, y học theo chủ đề

Hơn nữa , UI nên có đồ họa tương tự như các yếu tố chơi trò chơi . Các quả bóng biểu tượng hóa học là tròn và nhẹ nhàng phân loại màu sắc rắn. Bối cảnh / bảng trò chơi bạn chọn có phong cách nghệ thuật hoàn toàn không giống với các yếu tố chơi trò chơi. Lĩnh vực này là một bức ảnh sống động. Kim loại rất chi tiết, trong khi các quả bóng hóa học mịn và tương đối không bị phá hủy.

Một điều tôi bắt đầu nhận ra là rất quan trọng: sử dụng độ tương phản hợp lý.

Nhìn vào bức tranh đầu tiên. Nó khó chịu khắp nơi! Bầu trời sáng, đường chân trời tối, rồi cỏ xa sáng, rồi phía dưới tối. Nền lát gạch cực kỳ khác nhau giữa cực kỳ sáng và cực kỳ tối. Tất cả điều này là không thông tin. Thị giác lộn xộn. Các phần quan trọng thực tế - các vòng tròn - bị nhấn chìm bởi tất cả các thay đổi tương phản.

Bây giờ hãy nhìn vào bức tranh thứ hai. Nền tối và tương đối đơn điệu. Có một đường viền sáng xung quanh toàn bộ sân chơi. Nền lát gạch chủ yếu là màu tối, với các đường trắng mỏng ở các vị trí quan trọng. Đột nhiên bạn thực sự có thể nhìn thấy câu đố, bởi vì đó là một trong những điều khó chịu nhất xung quanh.

Cá nhân, tôi vẫn sẽ điều chỉnh nó một chút - Tôi cũng sẽ làm cho sân chơi trở nên nặng nề hơn. Những đường trắng để hiển thị các phân chia lưới rất quan trọng, nhưng bộ não con người thực sự giỏi trong việc ngoại suy các tính năng thẳng, và những thứ đó có thể tối hơn rất nhiều và thậm chí bị phá vỡ một chút.

Điều quan trọng khiến tôi bỏ qua giao diện người dùng đó là thanh dưới cùng. Nó sáng, nó ở trên khuôn mặt của bạn và thật khó để đọc văn bản. Điều cuối cùng đó rất quan trọng - một lần nữa, lý do rất khó để đọc văn bản là vì sự tương phản. Chúng tôi đọc văn bản một phần bằng cách tìm cạnh của các chữ cái, nhưng các chữ cái không may trộn lẫn với các phần của thanh dưới cùng.

Những gì tôi sẽ làm: Khởi động lại thanh dưới cùng để phù hợp với nền chính, về độ tương phản. Tạo một đường viền nhẹ hơn giữa nó và nền chính để vượt qua thực tế là nó tách biệt. Sau đó loại bỏ hầu hết các văn bản. "Kim cương" có thể trở thành một viên kim cương thực sự. "Các nguyên tử còn lại" có thể trở thành một hình ảnh của một vài nguyên tử. "Thời gian còn lại" có thể trở thành đồng hồ cát hoặc đồng hồ đeo tay hoặc pocketwatch. "Tiếp theo" có thể biến mất hoàn toàn - bạn nói "bạn phải chơi qua để xem bạn nhận được nguyên tử nào", nhưng đó là một cơ chế trò chơi gây phiền nhiễu. Biến nó thành một chồng các nguyên tử ở bên phải, ngồi trên một băng chuyền đánh bại, với một đầu mối máy móc hình ảnh nhỏ mà cái tiếp theo trong dòng là. Tada! Câu đố được cải thiện, giao diện được cải thiện, mọi thứ trông bớt lộn xộn hơn.

Nếu bạn làm cần phải sử dụng văn bản, có hai cách để phản bảo lãnh. Đầu tiên, đặt văn bản của bạn vào một cái gì đó, chính nó, độ tương phản thấp. Nếu nó có nền tối, hãy sử dụng văn bản sáng. Nếu nó có nền sáng, hãy sử dụng văn bản tối. Nếu bạn không thể làm điều đó (và đôi khi bạn không thể), đừng ngần ngại sử dụng hiệu ứng phát sáng bên ngoài. Đó là một cách tuyệt vời để cung cấp độ tương phản biên giới phù hợp cho dù văn bản của bạn là gì.

Khi bạn đang chơi với các giao diện, hãy mở trình chỉnh sửa hình ảnh, hoán đổi nó thành đơn sắc và thử hai điều: làm mờ và phát hiện cạnh. Khi giao diện người dùng của bạn bị mờ đơn sắc, tầm nhìn của bạn sẽ tự động thu hút vào các khu vực quan trọng. Khi phát hiện cạnh, các khu vực quan trọng cần được làm nổi bật. Ví dụ:

So sánh hai. Cái đầu tiên gần như không thể đọc được - chắc chắn, một số đá quý có thể nhìn thấy, nhưng nhiều trong số chúng không có. Trên cái thứ hai, lưới nổi bật ngay lập tức, cũng như hộp thoại. Mặc dù chỉ có một viên đá quý trên bảng, bạn có thể thấy ngay nó ở đâu.

Cái đầu tiên ồ ạt nhấn mạnh các cạnh lưới. Một số đá quý gần như vô hình. Cái thứ hai nhấn mạnh những cái vẫn còn (và hơn cả cá nhân tôi), nhưng nó cũng nhấn mạnh đường viền của câu đố rất mạnh, và viên ngọc có thể nhìn rõ hơn (mặc dù vẫn không hoàn hảo).

Phương pháp này không phải là thuốc chữa bách bệnh bằng bất kỳ phương tiện nào, nhưng nó có thể giúp bạn theo dõi những thứ cần được khắc phục. Chỉ cần lưu ý rằng tầm nhìn của con người dựa trên các cạnh và độ tương phản, và thiết kế giao diện người dùng của bạn để con người có thể đọc được.

(Tôi sẽ đến đây từ góc độ lý thuyết màu sắc)

Tôi nghĩ rằng câu hỏi của bạn không phải là về cách tạo ra một GUI hấp dẫn, tôi nghĩ rằng bạn thực sự đang chỉ vào là "Làm thế nào để tôi chọn trải nghiệm tôi muốn cung cấp cho người chơi của mình?"

Và đây chủ yếu là một câu trả lời tâm lý. Bạn đề cập đến việc chọn màu xanh dương hoặc xanh lá cây hoặc đỏ, và nó không thực sự về màu sắc, đó là về cảm xúc mà màu sắc khiến bạn cảm thấy khi nhìn thấy chúng.

Nếu bạn có một trò chơi màu đỏ (nền là màu đỏ, người chơi mặc màu đỏ hoặc sử dụng một mảnh trò chơi màu đỏ, tất cả các phông chữ là một màu đỏ có thể đọc được) bạn nghĩ bạn sẽ cảm thấy thế nào nếu bạn chơi trò này trò chơi? Và nó thậm chí không quan trọng trò chơi là gì.

Bạn sẽ cảm thấy như trò chơi rất tức giận hoặc một trò chơi nào đó trong Ngày Valentine.

Đây là lúc quá trình ra quyết định diễn ra. Nếu bạn muốn người chơi của mình cảm thấy như họ đang tiến hành một thí nghiệm khoa học trong trò chơi hóa học của bạn, có lẽ làm cho mọi thứ sạch sẽ và đơn giản. Có lẽ một cái gì đó nhấn mạnh màu trắng.

Nếu bạn muốn người chơi của bạn cảm thấy như họ đang làm một công việc sản xuất nào đó, nơi họ cảm thấy như đang chán nản với khoa học, thì có thể là bức tranh thứ hai của bạn, hoặc nhấn mạnh các màu vàng và đen với nhau.

Nếu bạn muốn người chơi của bạn cảm thấy như họ đang ở cùng một lúc với hóa học, giống như đó là một phần mở rộng của bản thân và mọi sinh vật, thì bức ảnh đầu tiên của bạn có thể là một khởi đầu tốt. Một sự nhấn mạnh vào màu xanh lam nhạt và màu xanh lá cây nhạt và tông màu tự nhiên như màu nâu.

Nó thực sự đi xuống cảm xúc thô mà bạn mong đợi người chơi của bạn cảm thấy.

Câu trả lời ngắn: Không có câu trả lời ngắn.

Thiết kế là một lĩnh vực khổng lồ, với hàng tấn sách, bài báo, và như đã đề cập, các thư viện bao gồm câu hỏi này. Phối màu, phông chữ, phong cách, bố cục, sử dụng khoảng trắng, không gian âm, kết cấu, màu sắc và ý nghĩa của chúng trong các nền văn hóa khác nhau, tại sao sans truyện tranh là xấu xa và không bao giờ nên được sử dụng. Có các khóa học, sách, blog, tài liệu nghiên cứu và trang web dành cho những thứ này. Sẽ không có câu trả lời đơn giản cho vấn đề này, vì câu hỏi đang được hỏi rất nhiều.

Điều đó nói rằng: Thành thật mà nói, lựa chọn tốt nhất của bạn là thuê một nhà thiết kế để giúp bạn. Nếu đó là ngoài ngân sách của bạn, hãy kết bạn với một nhà thiết kế để giúp đỡ. Nếu điều đó là không thể, bạn có thể phải đi một mình trong một thời gian.

Vì vậy, một vài lời khuyên. Đối với bảng phối màu, sử dụng một cái gì đó giống như Trình thiết kế lược đồ màu . Dành thời gian để tìm hiểu về cách các màu phối hợp với nhau và nói chung, hãy cố gắng chỉ chọn một vài màu, đừng quá nhiệt tình. Giới hạn nên có khoảng 3 màu.

Đối với phông chữ, tốt, có toàn bộ bài báo và tài liệu nghiên cứu (đây là một bài viết về serif vs sans serif ). Một lần nữa, quy tắc chung là chọn tối đa hai phông chữ. Một lựa chọn tốt là chọn một phông chữ không phải là mặc định, nhưng vẫn đẹp. Nếu đó là một lựa chọn, Helvetica là một sản phẩm khá đẹp, nhưng có rất nhiều thứ tốt khác ngoài kia.

Đối với phong cách và / hoặc chủ đề, điều này thậm chí còn khó trả lời hơn. Tôi nghĩ rằng mẹo lớn nhất ở đây là phù hợp với phong cách của bạn . Đừng cố gắng hòa trộn thiên nhiên với scifi hoặc nghệ thuật vẽ sơ sài với các mô hình res 3d poly của anh ấy. Điều này chủ yếu có nghĩa là tìm một nghệ sĩ để làm TẤT CẢ nghệ thuật, hoặc tự làm (trong trường hợp các công ty lớn, đây là lý do tại sao có một nghệ thuật dẫn đầu). Chủ đề là thứ bạn sẽ phải chơi, trừ khi bạn có một chủ đề được thiết lập trước khi bắt đầu. Thành thật mà nói, nó có thể thay đổi khi thời gian trôi qua và bạn đã hoàn thành trò chơi nhiều hơn. Rất có thể chủ đề sẽ thay đổi trong quá trình phát triển, trên thực tế.

Nhìn chung, trong khi thiết kế có thể được dạy, một số người chỉ ... không giỏi về nó (giống như lập trình). Đây là nơi có một người bạn thiết kế để giúp đỡ có ích.

EDITED:

Ok, tôi đã viết lại điều này, bây giờ tôi hiểu câu hỏi tốt hơn.

Lý do tôi đã nhầm lẫn là vì bạn đã cố gắng đưa ra song song bằng văn bản, nhưng ví dụ bạn có không song song chút nào. Thiết kế của một UI là một câu hỏi về trình bày. Nội dung của một cuốn sách là về chất thực tế.

Vì vậy, nhìn vào thiết kế UI như một câu hỏi về cách trình bày, bạn phải suy nghĩ về những gì bạn muốn trình bày. Ý tôi là, tất nhiên bạn đang cố gắng trình bày trò chơi của mình, nhưng còn gì nữa không? Bạn có muốn nó xuất hiện chuyên nghiệp? Vui vẻ? Tối? Ánh sáng?

Ví dụ, tôi sẽ xem xét hai hình ảnh bạn đã đăng và cho bạn biết những ấn tượng tôi nhận được từ chúng.

Đầu tiên, có một số khía cạnh rõ ràng của nó chúng ta có thể xem xét. Nó nhẹ hơn hình ảnh thứ hai, tất nhiên. Thêm vào đó là thực tế rằng bạn đã chọn một hình ảnh của một trường có chiều sâu (khi trường nghiêng ra khỏi người xem) và cảm giác là một hình ảnh mở rộng hơn nhiều. Nó cảm thấy tự do hơn, nó cảm thấy nhẹ nhàng hơn.

Khi bạn nhìn vào hình ảnh thứ hai, dĩ nhiên, nó tối hơn nhiều. Nó cũng có một nền là một hình ảnh phẳng vuông góc với đường ngắm của người xem, lấy đi cảm giác tiếp tục chiều sâu của hình ảnh đầu tiên. Thêm vào đó là các tín hiệu có chiều sâu thực sự duy nhất đến từ việc tô bóng trên lớp mạ kim cương, và nó mang hình ảnh nền đó lên rất gần với máy ảnh. Tất cả những thứ này cộng lại với nhau để mang lại cảm giác tối hơn, ngột ngạt hơn cho nó.

Vậy bây giờ, bạn có thể làm gì với hai chủ đề? Chà, chủ đề đầu tiên là một cái gì đó có thể tốt nếu những gì bạn muốn làm là làm cho nó cảm thấy bình thường hơn. Nó mang lại một cảm giác giống như những gì người chơi đang làm bây giờ với các phần trò chơi không phải là tất cả những gì đang diễn ra trên thế giới. Hình ảnh thứ hai mang lại cho nó nhiều cảm giác cấp bách. "Thế giới đã biết" của trò chơi nhỏ hơn nhiều, và nó nhấn mạnh hơn vào những gì người chơi đang làm.

Đây thực sự là về "làm cho nó đẹp"? Đó là một điều chủ quan, và tôi tình cờ nghĩ rằng ảnh chụp màn hình đầu tiên trông đẹp hơn ảnh thứ hai.

Chọn một chủ đề không thực sự là khoa học tên lửa - bạn biết nội dung chính hoặc mục đích của trò chơi của bạn và có thể giữ điều đó trong tâm trí của bạn khi chọn mọi khía cạnh khác đi cùng với nó.

Một điều mà dường như không ai khác đã đề cập cho đến nay: hỏi một số người sẽ chơi trò chơi cho phản hồi của họ. Các nhà thiết kế giao diện người dùng dành rất nhiều thời gian để hiển thị các thiết kế cho người dùng và tìm hiểu điều gì đúng hay sai với họ, cho dù họ đang thiết kế một trò chơi, trình xử lý văn bản hay sàn bay.