Unit 10 การออกแบบ Menu โปรแกรม

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

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

แต่ละส่วน..จะทำการ Link ไปยัง Page ต่างๆ ที่ได้ทำการกำหนดเอาไว้ ตามตารางที่ ได้ทำการแสดง ไปเบื้องต้น

องค์ประกอบของการสร้าง Menu..
การสร้างงาน..ที่ดีย่อมต้องมีการเตรียมการที่ดี การวางแผนที่ถูกต้อง ประกอบด้วย การเตรียมเนื้อหา ที่ต้องการจะนำเสนอ เทคนิคที่น่าสนใจ ไม่ว่าจะเป็นการสร้าง effect ต่างๆ

ลักษณะงาน..ที่นำเสนอ จากรูป จะเห็นว่า เราได้ทำการสร้างข้อความขึ้นมา เป็นในลักษณะหัวข้อ ซึ่งในแต่ละหัวข้อ จะมีกรอบล้อมรอบ และมี Shadow หากได้ทำการศึกษา จากบทที่ผ่านมา เราได้ทำการกล่าวในรายละเอียด ส่วนนี้ ค่อนข้างจะชัดเจนมาก ดังนั้น.. ผมจึงอยากให้นึกตามไปด้วย ว่าเราจะต้องทำอย่างไรบ้าง เพื่อให้งานออกมาหน้าตาอย่างนี้ และสามารถ เรียกทำการ Link ได้ในแต่ส่วนที่ต้องการ ด้วยรูปแบบง่าย แต่..ก็มีความซับซ้อนในตัวของมันเอง ส่วนประกอบที่แยกจากงานออกมา และอยากให้ทำการสังเกต นั่นก็คือ

1. พื้นหลังของคำสั่ง Menu
2. คำสั่ง Menu
3. กรอบข้อความ (HyperLink)

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

เทคนิค ก็ง่ายมาก เพียงแต่ทำการสร้างกรอบสี่เหลี่ยมขึ้นมา ให้ได้ขนาดที่เหมาะสม โดยทำการสร้างจาก PhotoShop ขนาดที่ทำการกำหนด เป็นหน่วย Pixels 360 x 271 ซึ่งอาจจะกะให้ใหญ่กว่านี้ก็ได้นะครับ จากนั้น เราก็ทำการใช้เครื่องมือ Linear Giradent Tool เป็นตัวกำหนด โดยการลากเส้นทแยง 45 องศา (แล้วอยากลืมแบบสีด้วยนะครับ )ว่าต้องการสีอะไร ให้ทำการกำหนดที่ตรงนั้น จากนั้น ก็ทำการ Import Background ที่ทำการสร้าง ใน PhotoShop มาวางไว้ โดยการ Import จาก File => Import Graphic.. ขั้นตอนจะเหมือนกับ การนำเอารูปภาพเข้ามาใช้ เท่านั้นเอง

ข้อสังเกต..สิ่งหนึ่งที่อยากให้พิจารณา คือ หากต้องการกำหนดพื้น Background เฉพาะส่วน Menu เท่านั้น การวาง Background ที่ทำการ Import เข้ามา จะต้องมีข้อกำหนด ดังนี้

การกำหนด File Picture จะต้องเป็น .BMP จากการสร้างที่ PhotoShop

การวางงานใน ToolBook จากที่เราได้ทำการทราบ แล้วนั้นว่า ลักษณะของ ToolBook เองนั้น จะมี ทั้ง Foreground และ Background ซึ่งหากต้องการให้พื้นของ Background ที่ใช้งานร่วมกัน เหมือนกันทุกหน้า จำเป็น จะต้องกำหนดที่พื้น Background (โดยการกด F4 สลับการวาง ตามที่ต้องการ) แต่หาก..ต้องการ ให้ใช้เฉพาะหน้านั้น หน้าเดียว ก็ต้องทำการกำหนด ที่ Foreground ดังนั้น จากงาน จะเห็นว่า มีเพียงหน้าเป็น Menu หน้าเดียวเท่านั้น ที่กำหนดพื้น Background ของ Menu ดังนั้น เราจึงทำการวาง Picture เอาไว้ที่ Foreground

ส่วนสอง..คำสั่ง Menu ในที่นี้ จะขอทำการพูดรวมไปถึง การเขียน Label และส่วนข้อความที่เป็นคำสั่ง โดย..ในส่วนของ Label ซึ่งจะมีลักษณะรายละเอียด ดังนี้

ขั้นตอน.. 1.ทำการคลิกที่ Field (ToolBar) จากนั้น ทำการ Drag พื้นที่ เพื่อทำการกำหนด ขอบเขต ของการทำงาน แล้วจึงพิมพ์ข้อความ ที่เป็น (Label) โดย..ในที่นี้กำหนด Jasmine UPC ขนาด 36 Ponit ประเภท หนา จากนั้นคลิกที่ Select Tool เพื่อทำการปรับขนาด ให้ได้สัดส่วน ตามที่ต้องการ ดังรูปที่ทำการแสดง

ขั้นตอน.. 2. ทำการเปลี่ยนประเภทของกรอบและวัตถุ ที่ทำการแสดง โดยหากสังเกต.. จากแบบงาน จะพบว่า จะต้องทำการเปลี่ยนสีของกรอบ/ทั้งภายใน-นอก และข้อความที่แสดงผล วิธีการ.. ทำการคลิกที่ Field เพื่อเกิดการ Active ในขณะที่ทำการเลือก จากนั้น คลิกไปที่ Object Properties เพื่อทำการเปลี่ยนประเภทของกรอบ ให้เป็น "นูน" โดยการ..เลือกที่ Border Style : Raised ดังรูปที่แสดง

จากนั้น..ทำการคลิก OK

ขั้นตอน.. 3. ทำการเปลี่ยนสีและขอบเส้น ที่ทำการแสดงผลอยู่ในขณะนั้น ให้เป็นสีตามที่กำหนด สีน้ำเงิน..สีพื้นของกรอบ โดยการเลือก Color Tray แล้วทำการเลือกเปลี่ยนสีตัวอักษร (สีขาว) และสีพื้นเป็นสีตามที่กำหนด ดังรูปที่แสดง

ตำแหน่ง 1..การเปลี่ยนของตัวอักษร
ตำแหน่ง 2.. พื้นสีของ Background
ตำแหน่ง 3.. การเปลี่ยนสีของตัวอักษร และขอบเส้น

เมื่อทำ..การเลือกเสร็จแล้ว ให้ทำการคลิก Close(-) เพื่อทำการปิด ก็เป็นจบขั้นตอนของการ แต่ง Label..

ส่วน.. คำสั่ง ก็จะเหมือน Label ทั่วไปๆ เพียงแต่ว่า จะมีการทำ HyperLink เข้ามาเสริม เพื่อให้ติดต่อยังเนื้อหาส่วนต่างๆ ได้ แต่..ในที่นี้จะยังไม่ขอกล่าวถึง การทำ HyperLink เพียงแต่จะแนะวิธีการสร้าง กรอบข้อความ ที่เป็นคำสั่ง และการเขียนคำสั่ง Menu ของโปรแกรม เท่านั้น..

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

คราวนี้..ถึงคราวที่ต้องทดสอบความาเข้าใจ ของเนื้อหา และทักษะเบื้องต้นกันแล้วแหละนะครับ ถ้าหากว่าได้ติดตามเนื้อหา มาตั้งแต่ต้น จนมาถึงบทนี้ จะเข้าใจถึงงานต่อไปนี้ ที่จะทดสอบ และรวมความรู้ที่ผ่านมา ให้ทดลองกันเล่นๆ ดูนะครับ โดยการ..อ่านรายละเอียด ของเนื้อหางานในส่วนนี้ให้เข้าใจ จากนั้น.. ทดลองสร้างคำสั่ง Menu พร้อมทำ Border Style : Shadowed ดูนะครับ จากนั้น..ก็ทำการจัดเรียงกรอบ ให้เหมาะสมดังรูปที่ได้ ทำการแสดงเอาไว้เบื้องต้น

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

ส่วนสาม..การสร้าง HyperLink เป็นวิธีหนึ่ง ที่จะช่วยให้เนื้อหาสามารถทำการติดต่อ ในส่วนต่างๆ ได้ จริงแล้วนั้น การ Link จะมีหลักการเหมือนกัน ทั่วไป คือ

1. การติดต่อแบบ One-way คือ มีการติดต่อในทิศทางเดียว หมายความว่า จะทำการส่งไปยังเนื้อหา หรือว่า ส่วนที่ต้องการ จากนั้น ก็ไม่สามารถกลับมา ยังตำแหน่งเดิมได้ เรียกว่า มาถึงบ้านแล้ว ก็ตัวใครตัวมัน ก็แล้วกัน
2. การติดต่อแบบ Two-way คือ การติดต่อแบบ 2 ทิศทาง คือสามารถติดต่อ ทั้งไป-กลับ ได้ และกลับมายังจุดเดิม

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

ขั้นตอนในการทำ.. 1.คลิกที่กรอบข้อความที่ต้องการ จากนั้น..ทำการดับเบิลคลิกที่ข้อความ แล้วทำการ Drag ข้อความทั้งหมด ดังรูปที่ทำการแสดง

ทำการ Drag ข้อความเอาไว้ จากนั้นคลิก Menu(Text) =>Create Hotword (Ctrl +H) จะเป็นการสร้าง HyperLink โดย หากไม่มีการกำหนดที่ตรงจุดนี้ จะไม่สามารถทำการ Link ได้ โดย..จะสามารถใช้กับข้อความได้เท่านั้น

จากนั้น..ทำการคลิกที่ Menu(Object) =>Object Properties=>Hyperlink..(Ctrl +Shift +H)

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

เมื่อทำการคลิกแล้ว..จะแสดงผลดังที่เห็น

ตำแหน่งที่ 1.. Type of Link : Go to another page คือ ต้องการให้ทำการ Link ไปยังหน้าไหน หรือส่วนไหน ในที่นี้..ให้ทำการ Link ไปยังหน้าอื่น
ตำแหน่งที่ 2.. A Specific Page : Page "Virus1" หมายความว่า ต้องการติดต่อไปยังหน้าไหน โดย..ในที่นี้เราได้ทำการตั้งชื่อหน้า เอาไว้แล้ว เพราะก่อนจะมีการสร้างงาน ได้ทำการกำหนด เอาไว้ว่า แต่ละหน้าชื่ออะไร และ Background มีชื่อว่าอะไร และใช้อะไรในหน้าไหน บ้าง ในแต่ละส่วนของงาน ดังนั้น..จึงสามารถทำการเลือกได้ โดยอาจจะทำการคลิก หรือพิมพ์ Page ที่เราทราบลงไป
ตำแหน่งที่ 3.. Transition Effect : Fade ในส่วนนี้ จะเป็นการใช้ Effect ที่เป็นการกำหนด การเปลี่ยนแปลงของ Page ให้มีความน่าสนใจ เช่น อาจจะทำการ Fade โดยภาพจะทำการเปลี่ยน Page ไปยัง Page ที่ต้องการแล้ว จะค่อยๆจางหายไป (เทคนิค ในลักษณะนี้จะใช้กับงาน ทางด้านภาพยนต์ ด้วย ) ซึ่งจะช่วยให้การตัดต่อแต่ละฉาก มีความ Soft และน่าสนใจ มากขึ้น

ตำแหน่งที่ 4.. Test เมื่อเราทำการกำหนด Effect เสร็จทุกครั้ง สิ่งที่ควรจะทำก็คือ การทดสอบผลงาน ของ Effect ว่ามีความน่าสนใจขนาดไหน และรูปแบบการนำเสนอ ถูกใจ หรือไม่ หรือต้องทำการต้องแก้ไข หรือเปล่า

ตำแหน่งที่ 5.. Speed เมื่อเราต้องการกำหนด ความเร็ว หรือความช้า ในการเปลี่ยน Page ในแต่แบบนั้น การกำหนดค่าตรงนี้ จะมีส่วนช่วยมาก เพราะว่า..ค่าที่ทำการตั้งยิ่งสูง ค่าในการแสดง ก็จะช้าลง และในทางกลับกัน หากต้องการเร็ว ก็ต้องมีการกำหนดค่า ที่ใช้ในการแสดงผล ให้น้อยด้วย เช่นกัน

จากตาราง ค่าที่ให้ทำการกำหนด มีดังนี้

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

บทถัดไป จะกล่าวถึงการนำเอาข้อมูลต่างๆ มาลงในแต่ละส่วน ซึ่งจะให้ทำการ Import Files ตามเนื้อหาที่ทำการกำหนด..

Unit 1 | Unit 2 | Unit 3 | Unit 4 | Unit 5 | Unit 6 | Unit 7 | Unit 8 | Unit 9 | Unit 10 | Unit 11