อินเทอร์เฟซ 101: ทำให้มันสวย

ฉันได้สร้างเกมขึ้นมาสองสามเกมซึ่งฉันได้ออกสู่ตลาดจริง มีปัญหาหนึ่งที่ฉันพบบ่อยครั้งและนั่นคือปัญหาของอินเทอร์เฟซ / ธีมของเกม

คุณจะทำการตัดสินใจโดยไม่ต้องมีกฎเกณฑ์และสอดคล้องกันอย่างไรเกี่ยวกับรูปลักษณ์และความรู้สึกและส่วนต่อประสานของเกมของคุณ

ตัวอย่างเช่นในเวอร์ชันหนึ่งของเกมที่ใช้เคมีของ Silverlight ฉันได้ตัดสินใจ (ไม่ดีหรือไม่) เพื่อให้ได้รูปลักษณ์ที่เป็นธรรมชาติแนวนอนและรู้สึกซึ่งส่งผลให้ UI นี้:

จากนั้นในการทำซ้ำในภายหลังฉันได้ฉลาดขึ้นและไปกับรูปลักษณ์และความรู้สึก "machiney" ที่สกปรกขึ้นซึ่งส่งผลให้สิ่งนี้ (UI สุดท้าย):

แน่นอนฉันจะบอกว่ารสนิยมของฉันใน UI ดีขึ้นผ่านการทำซ้ำ แต่มันเป็นผลมาจากการตัดสินใจโดยพลการครั้งแรกจำนวนมากตามมาด้วยการปรับแต่งมากมาย

มีวิธีที่ดีกว่าในการหาวิธีจัดธีมเกมของคุณหรือไม่?

ในการเขียนแบบคู่ขนานเมื่อคุณเขียนนวนิยายแฟนตาซี / นิยายวิทยาศาสตร์มีองค์ประกอบมากมายที่คุณต้องอธิบาย ในขณะที่คุณสามารถประดิษฐ์สิ่งของ / สิ่งมีชีวิต / สถานที่ / ฯลฯ โดยพลการคุณจะได้โลกที่สอดคล้องกันมากขึ้นเมื่อคุณนั่งลงสักครู่แล้วออกแบบพื้นที่ภูมิภาคดาวเคราะห์หรือจักรวาล ทุกอย่างแล้วเหมาะกันเป็นอย่างดีและคุณสามารถถามตัวเอง "วิธีการที่จะนี้ทำงานในจักรวาลนี้หรือไม่?

แก้ไข:ดูเหมือนว่าฉันไม่ได้อธิบายเรื่องนี้อย่างดี ให้ฉันลดความซับซ้อนของคำถามในสุดโต่ง: เมื่อฉันต้องการจัดเค้าโครงหน้าจอชื่อเรื่อง (ด้วยพื้นหลังแบบอักษรปุ่มแบบสกิน) ฉันจะตัดสินใจได้อย่างไรว่าควรจะดูอย่างไร เขียวหรือน้ำเงิน? กรันจ์หรือไม่? โค้งมนหรือแบน? Serif หรือ sans-serif

ใช้คำถามนั้นและระเบิดมันในเกมของคุณโดยรวม คุณจะคิดออกว่าสิ่งที่ควรมีลักษณะอย่างไร คุณใช้กระบวนการใดในการทำให้มันสอดคล้องและไม่ขึ้นกับอะไร?

ดูภาพหน้าจออีกครั้ง ฉันอาจติดอยู่กับหญ้า / ท้องฟ้า / หิน แต่โลหะก็ดูเหมาะสมกับแนวคิดของปฏิกิริยาเคมีและอะตอม

ดูเหมือนว่าคุณจะมีสไตล์ที่ขัดแย้งกัน

ดู UI เหล่านี้จาก Peggle, Ultima Underworld, Diablo 3, Starcraft 2 และ Gran Turismo 5

สังเกตว่าแต่ละ UI นั้นสอดคล้องกันภายในธีมของมันอย่างไร

Peggle เป็นพินบอลเหมือนในองค์ประกอบ UI ทั้งหมด ทุกอย่างเป็นเมตรคันโยกหัวจ่ายน้ำกระดานกระโดดน้ำ

Ultima Underworld มีองค์ประกอบ UI คือเหล็ก / เหล็ก, potions, เป้สะพายหลัง, แผนที่ เวลาผจญภัย.

แอพที่คล้ายกับ Ultima underworld (ที่จริงแล้วดูเหมือนว่าจะใช้ UW)

แห่งอนาคตรูปแบบเรียบง่ายเรียบง่ายน้อยที่สุด (protoss)

การตกแต่งภายในรถยนต์

ดังนั้นคุณจะเห็นว่าการออกแบบครั้งแรกของคุณไม่สอดคล้องกันอย่างสมบูรณ์ สนามเปิดต้องทำอย่างไรกับเกมของคุณ? กันไปสำหรับพื้นหลังโลหะ ลองม้านั่งในห้องแล็บสำหรับกระดานเกมและพื้นหลังห้องแล็บเคมีพร้อมขวดและขวดและถุงมือยางและจานเลี้ยงเชื้อ

ดร. มาริโอเป็นแพทย์, แบคทีเรีย, ไวรัส, ยารักษาโรค

เพิ่มเติมUI ควรมีกราฟิกในทำนองเดียวกันกับองค์ประกอบสไตล์การเล่นเกม ลูกบอลสัญลักษณ์ทางเคมีมีลักษณะกลมและให้สีทึบ พื้นหลัง / กระดานเกมที่คุณเลือกมีสไตล์ศิลปะที่แตกต่างจากองค์ประกอบเกมอย่างสิ้นเชิง ฟิลด์นี้เป็นภาพถ่ายที่มีชีวิตชีวา โลหะมีรายละเอียดมากในขณะที่ลูกบอลเคมีเรียบและไม่มีรายละเอียด

สิ่งหนึ่งที่ฉันเริ่มตระหนักถึงความสำคัญมาก : การใช้ความคมชัดที่เหมาะสม

ดูรูปแรก มันตรงกันข้ามทั่วทุกที่! ท้องฟ้าแจ่มใสขอบฟ้ามืดแล้วหญ้าไกลก็สว่างแล้วก้นก็มืด พื้นหลังของกระเบื้องแตกต่างกันอย่างมากระหว่างความสว่างและความมืดมนมาก ทั้งหมดนี้ไม่ใช่ข้อมูล ภาพที่ยุ่งเหยิง ส่วนสำคัญที่เกิดขึ้นจริง - วงกลม - ถูกจมลงโดยการเปลี่ยนแปลงความคมชัด

ตอนนี้ดูรูปที่สอง พื้นหลังมีสีเข้มและมีสีเดียว มีเส้นขอบที่สว่างรอบสนามเด็กเล่นทั้งหมด พื้นหลังส่วนใหญ่เป็นกระเบื้องสีเข้มมีเส้นสีขาวบาง ๆ ในสถานที่สำคัญ ทันใดนั้นคุณสามารถเห็นปริศนาเพราะมันเป็นหนึ่งในสิ่งที่ตรงกันข้ามมากที่สุด

โดยส่วนตัวแล้วฉันจะปรับแต่งเล็กน้อย - ฉันทำให้สนามเด็กเล่นดูน่ากลัวขึ้นเช่นกัน เส้นสีขาวเหล่านั้นเพื่อแสดงการแบ่งกริดมีความสำคัญ แต่สมองของมนุษย์นั้นเก่งในการคาดการณ์คุณสมบัติตรงและสิ่งเหล่านั้นอาจจะมืดกว่าและเสียไปเล็กน้อย

สิ่งใหญ่ที่ทำให้ฉันแตกออกจาก UI นั้นคือแถบด้านล่าง มันสดใสอยู่ในหน้าของคุณและมันยากที่จะอ่านข้อความ บิตสุดท้ายนั้นสำคัญ - เหตุผลที่อ่านข้อความยากอีกครั้งเพราะความแตกต่าง เราอ่านข้อความบางส่วนโดยมองหาขอบของตัวอักษร แต่ตัวอักษรกลมกลืนกันได้ดีกับส่วนต่าง ๆ ของแถบด้านล่าง

สิ่งที่ฉันจะทำ: Rejigger แถบด้านล่างให้พอดีกับพื้นหลังหลักในแง่ของความคมชัด ทำให้เส้นขอบที่เบาขึ้นระหว่างมันกับพื้นหลังหลักเพื่อให้ทราบว่ามันแยกจากกัน จากนั้นกำจัดข้อความส่วนใหญ่ "เพชร" สามารถกลายเป็นเพชรจริงได้ "อะตอมออกไป" สามารถกลายเป็นภาพของอะตอมสองสามดวง "เหลือเวลา" อาจกลายเป็นนาฬิกาทรายหรือนาฬิกาข้อมือหรือนาฬิกาพก "ถัดไป" สามารถหายไปได้ทั้งหมด - คุณพูดว่า "คุณต้องเล่นเพื่อดูว่าคุณได้อะตอมอะไร" แต่นั่นเป็นกลไกเกมที่น่ารำคาญ เปลี่ยนมันให้เป็นอะตอมของสแต็กทางด้านขวานั่งบนสายพานลำเลียงที่มีการกระแทกพร้อมกับเบาะแสเครื่องจักรที่มองเห็นได้ซึ่งสิ่งต่อไปที่อยู่ในสายคือ Tada! ปรับปรุงจิ๊กซอว์, ปรับปรุงส่วนต่อประสาน, ทุกอย่างดูยุ่งเหยิงน้อยลง

หากคุณไม่จำเป็นต้องใช้ข้อความที่มีสองวิธีที่จะรับประกันความคมชัด ขั้นแรกให้ใส่ข้อความของคุณลงในบางสิ่งซึ่งก็คือตัวมันเองคอนทราสต์ต่ำ หากมีพื้นหลังสีเข้มให้ใช้ตัวอักษรสีอ่อน หากมีพื้นหลังสีอ่อนให้ใช้ตัวหนังสือสีเข้ม หากคุณไม่สามารถทำได้ (และบางครั้งคุณก็ทำไม่ได้) อย่าลังเลที่จะใช้เอฟเฟกต์แสงด้านนอก มันเป็นวิธีที่ยอดเยี่ยมที่จะให้ความคมชัดของเส้นขอบที่ถูกต้องไม่ว่าข้อความของคุณจะเป็นอะไร

เมื่อคุณกำลังเล่นกับอินเทอร์เฟซเปิดตัวแก้ไขรูปภาพสลับเป็นขาวดำและลองสองสิ่ง: เบลอและการตรวจจับขอบ เมื่อ UI ของคุณเบลอขาว ๆ การมองเห็นของคุณควรเปลี่ยนไปสู่พื้นที่สำคัญโดยอัตโนมัติ เมื่ออยู่ในการตรวจจับขอบพื้นที่ที่สำคัญควรเน้น ตัวอย่าง:

เปรียบเทียบสองสิ่งนี้ คนแรกเกือบอ่านไม่ได้ - แน่นอนว่าอัญมณีบางอันสามารถมองเห็นได้ แต่ส่วนใหญ่ไม่สามารถอ่านได้ ในตารางที่สองตารางจะปรากฏขึ้นทันทีเช่นเดียวกับกล่องโต้ตอบ ในขณะที่มีเพียงอัญมณีเดียวบนกระดานคุณสามารถดูได้ทันทีว่ามันอยู่ที่ไหน

อันแรกเน้นขอบกริดอย่างหนาแน่น อัญมณีบางชนิดแทบมองไม่เห็น ที่สองเน้นที่ยังคง (และมากกว่าที่ฉันจะเป็นส่วนตัว) แต่ก็ยังเน้นชายแดนของปริศนาอย่างยิ่งและอัญมณีมีความหมายมากขึ้น (แม้ว่ายังไม่สมบูรณ์) มองเห็นได้

วิธีนี้ไม่ได้เป็นยาครอบจักรวาลโดยวิธีการใด ๆ แต่สามารถช่วยให้คุณติดตามสิ่งที่ควรได้รับการแก้ไข เพียงจำไว้ว่าการมองเห็นของมนุษย์นั้นอิงจากขอบและความเปรียบต่างและออกแบบ UI ของคุณให้มนุษย์อ่านได้

(ฉันจะมาจากมุมมองของทฤษฎีสี)

ฉันคิดว่าคำถามของคุณไม่เกี่ยวกับการสร้าง GUI ที่น่าสนใจฉันคิดว่าคุณกำลังชี้ให้เห็นว่า "ฉันจะเลือกประสบการณ์ที่ฉันต้องการให้ผู้เล่นของฉันได้อย่างไร"

และนี่คือคำตอบทางจิตวิทยาเป็นส่วนใหญ่ คุณพูดถึงการเลือกสีน้ำเงินหรือสีเขียวหรือสีแดงและมันไม่เกี่ยวกับสีมันเป็นเรื่องของอารมณ์ที่สีต่าง ๆ ทำให้คุณรู้สึกเมื่อเห็น

หากคุณมีเกมที่เป็นสีแดง (พื้นหลังเป็นสีแดงของเครื่องเล่นผู้เล่นจะใส่สีแดงหรือใช้ชิ้นส่วนของเกมสีแดงแบบอักษรทั้งหมดเป็นสีแดงที่อ่านได้) คุณคิดว่าคุณจะรู้สึกอย่างไรถ้าคุณเล่นเกมนี้ เกม? และมันไม่สำคัญว่าเกมจะเป็นอะไร

คุณจะรู้สึกว่าเกมนี้เป็นเกมที่โกรธมากหรือเกมวันวาเลนไทน์

นี่คือที่กระบวนการตัดสินใจเข้ามาหากคุณต้องการให้ผู้เล่นรู้สึกว่าพวกเขากำลังทำการทดลองทางวิทยาศาสตร์ในเกมเคมีของคุณอาจทำให้ทุกอย่างสะอาดและเรียบง่าย บางทีสิ่งที่เน้นสีขาว

หากคุณต้องการให้เครื่องเล่นของคุณรู้สึกว่าพวกเขากำลังทำงานด้านการผลิตบางอย่างที่พวกเขารู้สึกว่าพวกเขารู้สึกแย่และสกปรกกับวิทยาศาสตร์จากนั้นอาจเป็นภาพที่สองของคุณหรือเน้นสีเหลืองและดำเข้าด้วยกัน

หากคุณต้องการให้ผู้เล่นรู้สึกเหมือนพวกเขาเป็นหนึ่งเดียวกันกับวิชาเคมีมันเป็นส่วนขยายของตัวเองและสิ่งมีชีวิตทั้งหมดรูปภาพแรกของคุณอาจเป็นการเริ่มต้นที่ดี เน้นสีฟ้าอ่อนและสีเขียวอ่อนและโทนสีธรรมชาติเช่นสีน้ำตาล

มันลงมาถึงอารมณ์ดิบที่คุณคาดหวังให้ผู้เล่นรู้สึก

คำตอบสั้น ๆ : ไม่มีคำตอบสั้น ๆ

การออกแบบเป็นสาขาที่ยิ่งใหญ่มีหนังสือบทความมากมายและดังที่กล่าวไว้ห้องสมุดที่ครอบคลุมคำถามนี้ โทนสีแบบอักษรลักษณะเค้าโครงการใช้ช่องว่างช่องว่างเชิงลบพื้นผิวสีและความหมายในวัฒนธรรมที่แตกต่างกันเหตุใดการ์ตูนในการ์ตูนจึงเป็นสิ่งที่ชั่วร้าย มีหลักสูตรหนังสือบล็อกงานวิจัยและเว็บไซต์ที่อุทิศให้กับสิ่งเหล่านี้ จะไม่มีคำตอบง่าย ๆ สำหรับเรื่องนี้เนื่องจากคำถามกำลังถามบ่อย

ที่กล่าวว่า: ตรงไปตรงมาตัวเลือกที่ดีที่สุดของคุณคือจ้างนักออกแบบเพื่อช่วยคุณ หากงบประมาณของคุณไม่เพียงพอให้หาเพื่อนกับนักออกแบบเพื่อช่วยเหลือ ถ้าเป็นไปไม่ได้คุณอาจต้องไปคนเดียวซักพัก

เคล็ดลับเล็ก ๆ น้อย ๆ สำหรับโทนสีที่ใช้บางอย่างเช่นการออกแบบรูปแบบสี ใช้เวลาเรียนรู้เกี่ยวกับวิธีการทำงานร่วมกันของสีและโดยทั่วไปแล้วลองเลือกเพียงไม่กี่สีไม่ลงน้ำ ขีด จำกัด ควรมีประมาณ 3 สี

สำหรับแบบอักษรมีบทความและบทความวิจัยทั้งหมด (นี่เป็นบทความเกี่ยวกับserif vs sans serif ) อีกครั้งกฎทั่วไปคือการเลือกสูงสุดสองแบบอักษร ทางเลือกที่ดีคือการเลือกแบบอักษรที่ไม่ใช่ค่าเริ่มต้น แต่ก็ยังดูดีอยู่ หากเป็นตัวเลือก Helvetica ก็ค่อนข้างดี แต่ก็มีอีกหลายคนที่ดี

สำหรับสไตล์และ / หรือธีมสิ่งนี้ยากที่จะตอบ ผมคิดว่าเคล็ดลับที่ยิ่งใหญ่ที่สุดที่นี่คือการให้สอดคล้องกับสไตล์ของคุณ อย่าพยายามผสมผสานธรรมชาติกับ scifi หรือภาพร่างแบบร่างกับโมเดลโพลีสามมิติความละเอียดของเขา นี่หมายถึงการหาศิลปินคนหนึ่งที่ทำทุกอย่างด้วยตัวเองหรือทำด้วยตัวเอง (ในกรณีของ บริษัท ขนาดใหญ่ ชุดรูปแบบเป็นสิ่งที่คุณจะต้องเล่นด้วยเว้นแต่คุณจะมีชุดรูปแบบในใจก่อนที่จะเริ่ม สุจริตมันอาจมีการเปลี่ยนแปลงเมื่อเวลาผ่านไปและคุณได้ทำเกมมากขึ้น โอกาสดีทีเดียวที่ธีมจะเปลี่ยนไปตามแนวทางการพัฒนาอันที่จริง

โดยรวมในขณะที่สามารถออกแบบการสอนได้บางคนแค่ ... มันไม่ค่อยดีเท่าไหร่ (เหมือนการเขียนโปรแกรม) นี่คือที่มีเพื่อนออกแบบเพื่อช่วยในสะดวก

แก้ไข:

ตกลงฉันเขียนเรื่องนี้ใหม่ตอนนี้ฉันเข้าใจคำถามได้ดีขึ้น

เหตุผลที่ฉันสับสนคือคุณพยายามให้ขนานในการเขียน แต่ตัวอย่างที่คุณมีไม่ขนานกันเลย การออกแบบ UI นั้นเป็นคำถามของงานนำเสนอ เนื้อหาของหนังสือเป็นเรื่องเกี่ยวกับสารที่แท้จริง

ดังนั้นเมื่อดูที่การออกแบบ UI เป็นคำถามของงานนำเสนอคุณต้องคิดเกี่ยวกับสิ่งที่คุณต้องการนำเสนอ ฉันหมายความว่าคุณกำลังพยายามนำเสนอเกมของคุณ แต่มีอะไรอีกบ้าง คุณต้องการให้มันดูเป็นมืออาชีพหรือไม่? สนุก? มืด? เบา?

ตัวอย่างเช่นฉันจะดูสองภาพที่คุณโพสต์และบอกความประทับใจที่ได้รับจากพวกเขา

อันแรกมีแง่มุมที่ชัดเจนของมันที่เราสามารถดูได้ แน่นอนว่ามันเบากว่าภาพที่สองแน่นอน เพิ่มเข้าไปในข้อเท็จจริงที่ว่าคุณเลือกรูปภาพของฟิลด์ที่มีความลึก (เนื่องจากฟิลด์นั้นเอียงจากมุมมอง) และความรู้สึกนั้นเป็นภาพที่กว้างใหญ่กว่ามาก รู้สึกฟรีมากขึ้นรู้สึกเบาใจมากขึ้น

เมื่อคุณดูรูปที่สองมันจะมืดกว่ามาก นอกจากนี้ยังมีพื้นหลังที่เป็นภาพแบนที่ตั้งฉากกับแนวสายตาของผู้ชมโดยละทิ้งความลึกอย่างต่อเนื่องของภาพแรก เพิ่มที่ตัวชี้นำความลึกที่แท้จริงเท่านั้นมาจากการแรเงาบนการเคลือบเพชรและทำให้ภาพพื้นหลังนั้นอยู่ใกล้กับกล้องมาก ทั้งหมดเหล่านี้รวมเข้าด้วยกันเพื่อให้ความรู้สึกมืดมนและน่าอึดอัดยิ่งขึ้น

ดังนั้นตอนนี้คุณสามารถทำอะไรกับสองธีม ธีมแรกคือสิ่งที่อาจดีถ้าสิ่งที่คุณต้องการทำคือทำให้รู้สึกสบาย ๆ มันให้ความรู้สึกเหมือนกับว่าผู้เล่นทำอะไรตอนนี้กับชิ้นส่วนของเกมไม่ใช่สิ่งที่เกิดขึ้นในโลก ภาพที่สองให้ความรู้สึกเร่งด่วนมากขึ้น "โลกที่รู้จักกัน" ของเกมนั้นเล็กกว่ามากและให้ความสำคัญกับสิ่งที่ผู้เล่นทำ

นี่มันเกี่ยวกับ 'ทำให้มันสวย' หรือไม่? นั่นเป็นเรื่องส่วนตัวและฉันคิดว่าภาพหน้าจอแรกดูดีกว่าภาพที่สอง

การเลือกธีมไม่ใช่วิทยาศาสตร์จรวดจริง ๆ - คุณรู้เนื้อหาที่สำคัญหรือจุดประสงค์ของเกมของคุณและสามารถเก็บไว้ในใจของคุณเมื่อเลือกด้านอื่น ๆ เพื่อไปกับมัน

สิ่งหนึ่งที่ไม่มีใครพูดถึงเลย: ขอให้บางคนที่จะเล่นเกมเพื่อรับฟังความคิดเห็น นักออกแบบ UI ใช้เวลาอย่างมากในการแสดงการออกแบบให้กับผู้ใช้และค้นหาสิ่งที่ถูกหรือผิดกับพวกเขาไม่ว่าพวกเขาจะออกแบบเกมตัวประมวลผลคำหรือสำรับการบิน