หลักสูตรความผิดพลาดในการออกแบบและผล

หลักสูตรความผิดพลาดในการออกแบบและผลิตเกม
สัปดาห์ที่ 3 - การออกแบบหน้าจอและ User Interface Specification
ยินดีต้อนรับกลับ! นี้เป็นงวดที่สามใน "เป็นหลักสูตรความผิดพลาดในการออกแบบและผลิตเกม. เช่นเดียวกับเวลาที่ผ่านมาเป็นบทเรียนนี้ในสองส่วน. ในส่วนหนึ่งเราจะหารือเกี่ยวกับรูปแบบหน้าจอและอินเตอร์เฟซผู้ใช้ปัญหา. ในส่วนที่สองเราจะเขียน ส่วนที่สามของสเป็คการออกแบบโครงการหลักสูตรของเราออกแบบหน้าจอและอินเตอร์เฟซผู้ใช้สเปค

ส่วนที่ 1 - พื้นฐานของการออกแบบหน้าจอและส่วนติดต่อผู้ใช้ประเด็น

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

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

[หมายเหตุ: บ่อยครั้งที่ฉันทำเช่นนี้ไปข้างหลังฉันจะออกแบบหน้าจอหยาบ รูปแบบที่จะเห็นสิ่งที่ฉันต้องรวมอยู่ในรายละเอียดทั่วไป ส่วนใหญ่เวลาเมื่อฉันได้รับไปที่หน้าจอการออกแบบ Spec ที่ฉันมีหน้าจอทั้งหมดดึงขึ้นมาแล้วก็ต้องอธิบายสิ่งที่มีในหน้าจอการออกแบบ Spec.]

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

รายการส่วนติดต่อผู้ใช้
บางส่วนของส่วนติดต่อผู้ใช้รวมถึงการดึงลงเมนูหน้าจอ "หน้าต่าง" ข้อมูลของผู้เล่น - คะแนน, จำนวนของชีวิต ฯลฯ ข้อความระบบเกี่ยวกับกล่อง ฯลฯ คุณจะต้องคิดออกว่าเหล่านี้ควรมีลักษณะและสถานที่ที่พวกเขาต้องไป .

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

ขั้นตอนต่อไปคือการไปลงในโปรแกรมสีของคุณและคิดออกว่าสิ่งที่ยิ่งใหญ่จะต้องมีการวางขึ้นยิงหน้าจอจำลองของแต่ละหน้าจอ

[หมายเหตุ: ผมชอบใช้ Autodesk Animator Pro สำหรับนี้ สามารถจัดการทั้งหมด 256 ความละเอียดหน้าจอสีที่ช่วยให้คุณสามารถกำหนดขนาดภาพของคุณหรือคลิปเป็นส่วนหนึ่งของหน้าจอและบันทึกเป็นภาพแสดงให้คุณเห็นหน้าจอพิกัดเมื่อคุณย้ายสิ่งต่าง ๆ รอบช่วยให้คุณสามารถปรับขนาดและหมุนชิ้นโดยพลการได้ดี การจัดการสีจานสีที่จะช่วยให้คุณมีหลายรุ่นของหน้าจอในเวลาเดียวกันและจะช่วยให้คุณบันทึกในรูปแบบ BMP เพื่อให้คุณสามารถโหลดภาพของคุณให้เป็นความภาคภูมิใจ (เป็นรูปแบบไฟล์พื้นเมือง GIF, ที่ฉันชอบ.) หาโปรแกรมที่คุณต้องการใช้ที่มีคุณสมบัติเหล่านี้ หลีกเลี่ยงการใช้ Windows (TM) โปรแกรมสีพวกเขาจะให้ปัญหามากกว่าที่พวกเขามีมูลค่า ฉันจะบอกคุณว่าทำไมเมื่อเราได้รับบทเรียนสเปกศิลปะ.]


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

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

กายวิภาคของรายละเอียดการออกแบบหน้าจอ
นี่คือลักษณะทางกายวิภาคสำหรับคุณอีก

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

นอกจากนี้ยังแสดงทุกหน้าจอที่จะปฏิบัติตามที่มีคำอธิบายหนึ่งบรรทัดข้นจากลักษณะโดยทั่วไป

จากนั้นหน้าจอแต่ละรายละเอียดการออกแบบหน้าจอมีอย่างน้อยดังต่อไปนี้:

ชื่อเรื่องหน้าจอ

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

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

หน้าจอ E อก
สิ่งที่เกิดขึ้นเมื่อเราออกจากหน้าจอนี้ซึ่งเราจะไป?
User Interface Specification
เนื่องจากคุณจำเป็นต้องกำหนดและอธิบายถึงปัญหาการเชื่อมต่อของคุณผู้ใช้งานของแต่ละหน้าจอก็จะทำให้ความรู้สึกที่จะทำให้ส่วนติดต่อผู้ใช้รายละเอียดของข้อกำหนดการออกแบบหน้าจอ

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

ส่วนติดต่อผู้ใช้คืออะไร?

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

ระบบข้อเสนอแนะ - เหล่านี้เป็นอะไรที่บ่งบอกข้อมูลให้กับผู้เล่

ผลลัพธ์ (อังกฤษ) 1:

Crash course in design and production of the game. Week 3-the design and User Interface Specification screen. Welcome back!, this is the third installment in the "crash course in the design and production of the game. In the same time as this two-part lesson. In this part we will discuss the format screen and user interface issues. In the second part we will write. The third part of the project design course sapek, our design and user interface specifications. Part 1-the basics of design and user interface issues. "Designing a screen?" What Screen design is just a plan and how you intend to put something on the screen. Typically, there are several things that you need to put on the screen, such as the number of players to score the rest of the life level of the amount of text, data, logos, games, or whatever it is your job as a game designer to determine what item you want on the screen the game what they will look like and where they need to go. Good screen design is required to perform, and you usually go through four or five designs before you get it "right." How do you design your screen? The first step in designing the screen will maiklap to General information. To see if the screen we need to design something that will be on the screen at a time, and if the. The elements that need to move around. What they are doing? [Note: I often do this backwards, I will design a coarse screen to see what format I want included in the General information most of the time when I get to the screen where I have designing Spec of all the screen pulls up, and they need to explain what is in the screen design Spec.] Provides details for each screen, in your mind, and complex and expansion of what is in the General characteristics. General descriptions as a starting point, Chef gig of what you will include in the sapek design screen. Now it is time to fill. List of user interface. Some of the user interface, including menu screens, pull down the "window" of players-the number of life points, etc, text boxes, etc., about the system, you will need to figure out what these should look like and where they need to go. .We will discuss each of these methods works below the specification in the user interface, but it's important to place these items, they can be seen easily by the players. Players should not have to look for something and should not have to "figure out" the works "standard" interface. For the information of the player on the right side of the screen or at the top of the screen, pull down the "play" menu is always at the top left of the screen, there is a new game options resume on the left and on the right of the Help menu bar items. ขั้นตอนต่อไปคือการไปลงในโปรแกรมสีของคุณและคิดออกว่าสิ่งที่ยิ่งใหญ่จะต้องมีการวางขึ้นยิงหน้าจอจำลองของแต่ละหน้าจอ [หมายเหตุ: ผมชอบใช้ Autodesk Animator Pro สำหรับนี้ สามารถจัดการทั้งหมด 256 ความละเอียดหน้าจอสีที่ช่วยให้คุณสามารถกำหนดขนาดภาพของคุณหรือคลิปเป็นส่วนหนึ่งของหน้าจอและบันทึกเป็นภาพแสดงให้คุณเห็นหน้าจอพิกัดเมื่อคุณย้ายสิ่งต่าง ๆ รอบช่วยให้คุณสามารถปรับขนาดและหมุนชิ้นโดยพลการได้ดี การจัดการสีจานสีที่จะช่วยให้คุณมีหลายรุ่นของหน้าจอในเวลาเดียวกันและจะช่วยให้คุณบันทึกในรูปแบบ BMP เพื่อให้คุณสามารถโหลดภาพของคุณให้เป็นความภาคภูมิใจ (เป็นรูปแบบไฟล์พื้นเมือง GIF, ที่ฉันชอบ.) หาโปรแกรมที่คุณต้องการใช้ที่มีคุณสมบัติเหล่านี้ หลีกเลี่ยงการใช้ Windows (TM) โปรแกรมสีพวกเขาจะให้ปัญหามากกว่าที่พวกเขามีมูลค่า ฉันจะบอกคุณว่าทำไมเมื่อเราได้รับบทเรียนสเปกศิลปะ.]วาดชิ้น mockup ในขนาดต่างๆและรูปแบบหน้าจอพยายามที่แตกต่างกันไปผ่านการเคลื่อนไหวในแต่ละหัวของคุณและพยายามที่จะเห็นสิ่งที่แต่ละชิ้นจะเป็นและที่มันจะจบลงบนหน้าจอ เคลื่อนย้ายชิ้นส่วนรอบ ๆ จนกว่าคุณจะได้รับรูปแบบที่คุณชอบ แล้วเขียนลงว่าทุกอย่างขนาดใหญ่เป็นและที่เป็นอยู่บนหน้าจอ เมื่อคุณมีทั้งหมดจำลองของคุณขึ้นหน้าจอและบันทึกเวลาในการเขียนถึงสเป็คการออกแบบหน้าจอกายวิภาคของรายละเอียดการออกแบบหน้าจอ นี่คือลักษณะทางกายวิภาคสำหรับคุณอีก ส่วนแรกของการออกแบบรายละเอียดหน้าจอที่เรียกว่าการออกแบบและเค้าโครงทั่วไป มันเป็นพื้นแสดงชิ้นส่วนและคุณสมบัติทั่วไปไปยังหน้าจอทั้งหมดรวมทั้งรูปแบบสีกว้างชายแดน ฯลฯ ตามด้วยทั่วไป สเปก Interface (ดูด้านล่าง)

นอกจากนี้ยังแสดงทุกหน้าจอที่จะปฏิบัติตามที่มีคำอธิบายหนึ่งบรรทัดข้นจากลักษณะโดยทั่วไป

จากนั้นหน้าจอแต่ละรายละเอียดการออกแบบหน้าจอมีอย่างน้อยดังต่อไปนี้:

ชื่อเรื่องหน้าจอ

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

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

หน้าจอ E อก
สิ่งที่เกิดขึ้นเมื่อเราออกจากหน้าจอนี้ซึ่งเราจะไป?
User Interface Specification
เนื่องจากคุณจำเป็นต้องกำหนดและอธิบายถึงปัญหาการเชื่อมต่อของคุณผู้ใช้งานของแต่ละหน้าจอก็จะทำให้ความรู้สึกที่จะทำให้ส่วนติดต่อผู้ใช้รายละเอียดของข้อกำหนดการออกแบบหน้าจอ

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

ส่วนติดต่อผู้ใช้คืออะไร?

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

ระบบข้อเสนอแนะ - เหล่านี้เป็นอะไรที่บ่งบอกข้อมูลให้กับผู้เล่

ผลลัพธ์ (อังกฤษ) 2:

A crash course in game design and production
Week 3 - Design and User Interface Specification screen
Welcome back! This is the third installment in "A crash course in game design and production. Like last time, this is a lesson in two parts. In this part we will discuss the format screen and user interface issues. In the second part we will write. The third part of the spec project design our curriculum screen design and user interface specification Part 1 - The Basics of screen design and user interface issues are. "Screen design" what -screen design is just a plan, and how you intend to put something on the screen. Typically there are several things that you need to put on the screen as the number of players of the rest of the game logo, text or whatever. It is your job as a game designer to determine what items must be on the game screen, what they look like and where they need to go. Good screen design requires practice and you always go through four or five designs before you get it. "Right." How do you design the screen to do the first step in the screen design is meant to detail common to see that the screen we want to design what will be on the screen. each time, and if the elements needed to move around what they are doing? [Note: Often I do this behind my screen design rough pattern to see what. I must be included in the general description. Most of the time when I get to the screen design, screen Spec I have all drawn up, it must explain what is on the screen design. Spec.] provides detailed information for each screen, in your mind, and elaborate and expand on what was in the general. A general description is the beginning, quickie overview of what you include in your design spec screen. Now it's time to fill in the details of the user interface portion of the user interface includes pull-down menu screen "windows" of players - the number of life etc. system messages about box etc. You have to figure out what these should look like and where they need to go. . We will discuss these methods work the bottom of the user interface specification. But it's important to put these items, they can be easily seen by the players. Players should not have to look for something and do not have to "figure out" the interface of your "standard" location for the player on the right side of the screen or at the top of the page. The "play" pull-down menu, always at the top left of the screen with a new option game resumes left and Help on the right side of the menu bar , the next step is to go into the application's color. you and figure out how big things have to put up a screen shot replica of the screen [Note: I use Autodesk Animator Pro for this can handle all 256 resolution color screen that allows you to set the size. Your image or clip a portion of the screen and save it as a picture to show you the screen coordinates when you move things around, allowing you to resize and rotate pieces arbitrarily well. The color palette allows you to have multiple versions of the screen at the same time and helps you save in BMP format, so you can load your image to be proud. (A native file format GIF, which I like.) For the application you want to use these features. Avoid using Windows (TM) program will provide shade them more trouble than they are worth. I will tell you why when we get a lesson Specification Art.] a piece mockup in various sizes and screen formats to vary through the motions in your head and try to see what each piece. and that it will end up on the screen. Move the pieces around until you get the style you like. Then write down everything big, and that is on the screen when you have all your mock-up screen and save time in writing the spec screen design of anatomical detail screen design is. anatomy for the first part of the detailed design of the so-called design and general layout. It's basically a show piece and a common feature to all screen formats including color border width, etc., followed by General Specification Interface (see below) also shows all screens to follow the description of one line thick. The general characteristics of each screen design detail screen includes at least the following: title screen Details screen, write everything that you can think about the information that is required. It goes step by step through a sequence of moving images, any spell everything out. The collaborative play and the controls are out of the screen , home screen layout what goes where and how big it is in pixels. Using the coordinates of each part by the passing style. You need to have data for SPEC ART, and when it comes time to write the code to put it on the screen, you will know what the numbers will be connected with the process of drawing the screen E's what happened when. We leave this screen, which we will go? User Interface Specification because you need to define and explain the problem to your connections for each screen, it makes sense to make the user interface details. Terms screen design, in the second part of this session we will show Specifications screen design is complete for the screen of our projects in each course, the user interface is the user interface of a mechanical game. You used to get data into and out of the players. Basically consists of two parts: the control of user and system feedback control of the user , as well as control the player who used to affect the program, including the movement of the characters Seen pull-down menu options. Options control panel Etc. suggestion system - these are what conveys information to the chalet.

ผลลัพธ์ (อังกฤษ) 3:

A crash course in the design and production of the game
week 3 - Design and screen User Interface Specification
welcome back!! This is the third installment. "A crash course in the design and production of the game.As well as the past time is this lesson, in two parts. In part, we will discuss the form screen and user interface issues.In the second part, we will write. The third part of our curriculum design, project design, type screen, and the user interface specification

ส่วน that 1 - the basis of the screen design and user interface issues.

"screen design?"What
.The screen design is just a plan and how you intend to put things on the screen. There are usually things that you need to put on the screen, such as the player's score a number of ชีวิตที่เหลือโลโก้ game levels of text information, or whatever.A good screen design requires practice and you usually go through four or five design before you will ้รับม it right. ""

you do screen design?? The first step in the design of the screen
means back to general description.
to see if the screen we need to design what will be on screen in each and if
.The necessary components to move around. What are they doing?

[Note:Often I do this back I design, a coarse screen to see what I ต้องรวม in details. Most of the time when I get to the screen design, SpecSpec.]

provide details for each screen than that in your mind and complex and expansion in what is in style in general. The general is the beginning,The tinkle of what you will include in the type design of the screen. Now it's time to fill in the details of the user interface


.Some of the user interface includes a pull down menu screen "window" of players - score, number of life, etc. the text system about the box. Etc, you have to figure out what these should look and where they want to go.

.We discuss how these work below in the user interface specification. But more important to put these goods that they can be easily seen by the player. Players should not have to look for something and should not need.Work your interface "standard" place for information of the listed on the right side of the screen, or a player at the top of the screen. "Playing". Pull down menu always at the top left of the screen with the new.About the right of the menu bar
.
the next step is to go into the program to your color and figure out how great things must be put ขึ้นยิง screen simulation of each screen

[Note:I like to use the Autodesk Animator Pro for this, can manage all 256 screen resolution color allows you to สามารถกำหนด size your picture or clip is part of the screen and save the image to show you a special screen limited when you move things.