Unit 10 การออกแบบ Menu โปรแกรม
ก่อน..ที่เราจะมาทำการพูดถึง การออกแบบหน้าจอ หรือการทำ Menu ให้กับโปรแกรมนั้น เราจะต้องเข้าใจก่อนว่า ต้องการที่จะทำการควบคุม ส่วนไหนไปไหนบ้าง เพื่อให้..เข้าใจได้ง่ายขึ้น ผมขอให้ดู Concept ที่ได้วางเอาไว้ จากรูปที่แสดง
แบบงาน..ที่ทำการแสดงให้เห็น จะสังเกตว่า มี 3 ส่วน ด้วยกัน ที่เราทำการกล่าวถึง คือ
วิธีการแก้ไขปัญหา Virus | Link P.3 |
นานาสาระ Internet | Link P.4 |
ศัพท์ที่ควรรู้ | Link P.5 |
แต่ละส่วน..จะทำการ Link ไปยัง Page ต่างๆ ที่ได้ทำการกำหนดเอาไว้ ตามตารางที่ ได้ทำการแสดง ไปเบื้องต้น
องค์ประกอบของการสร้าง
Menu..
การสร้างงาน..ที่ดีย่อมต้องมีการเตรียมการที่ดี
การวางแผนที่ถูกต้อง
ประกอบด้วย การเตรียมเนื้อหา
ที่ต้องการจะนำเสนอ เทคนิคที่น่าสนใจ
ไม่ว่าจะเป็นการสร้าง
effect ต่างๆ
ลักษณะงาน..ที่นำเสนอ
จากรูป จะเห็นว่า
เราได้ทำการสร้างข้อความขึ้นมา
เป็นในลักษณะหัวข้อ
ซึ่งในแต่ละหัวข้อ จะมีกรอบล้อมรอบ
และมี Shadow หากได้ทำการศึกษา
จากบทที่ผ่านมา เราได้ทำการกล่าวในรายละเอียด
ส่วนนี้ ค่อนข้างจะชัดเจนมาก
ดังนั้น..
ผมจึงอยากให้นึกตามไปด้วย
ว่าเราจะต้องทำอย่างไรบ้าง
เพื่อให้งานออกมาหน้าตาอย่างนี้
และสามารถ เรียกทำการ Link
ได้ในแต่ส่วนที่ต้องการ
ด้วยรูปแบบง่าย แต่..ก็มีความซับซ้อนในตัวของมันเอง
ส่วนประกอบที่แยกจากงานออกมา
และอยากให้ทำการสังเกต
นั่นก็คือ
- พื้นหลังของคำสั่ง Menu
- คำสั่ง Menu
- กรอบข้อความ (HyperLink)
ส่วนแรก..หากมีการวางข้อความไว้เฉยๆ
โดยไม่มีการกำหนดความน่าสนใจของ
พื้นหลัง
ก็อาจจะดูธรรมดาเกินไป
ดังนั้น
เพื่อทำการสร้างสีสัน
ความสวยงาม
ขึ้นมาให้เนื้องาน
มีความน่าสนใจ
จึงต้องเสริมต้องจุดนี้
เข้าไป
![]() |
ข้อสังเกต..สิ่งหนึ่งที่อยากให้พิจารณา คือ หากต้องการกำหนดพื้น Background เฉพาะส่วน Menu เท่านั้น การวาง Background ที่ทำการ Import เข้ามา จะต้องมีข้อกำหนด ดังนี้
การกำหนด File Picture
จะต้องเป็น .BMP จากการสร้างที่ PhotoShop
การวางงานใน ToolBook จากที่เราได้ทำการทราบ
แล้วนั้นว่า ลักษณะของ
ToolBook เองนั้น จะมี ทั้ง
Foreground และ Background
ซึ่งหากต้องการให้พื้นของ
Background ที่ใช้งานร่วมกัน
เหมือนกันทุกหน้า
จำเป็น จะต้องกำหนดที่พื้น
Background (โดยการกด F4
สลับการวาง
ตามที่ต้องการ) แต่หาก..ต้องการ
ให้ใช้เฉพาะหน้านั้น
หน้าเดียว
ก็ต้องทำการกำหนด ที่
Foreground ดังนั้น จากงาน
จะเห็นว่า
มีเพียงหน้าเป็น Menu หน้าเดียวเท่านั้น
ที่กำหนดพื้น Background ของ Menu
ดังนั้น เราจึงทำการวาง Picture
เอาไว้ที่ Foreground
ส่วนสอง..คำสั่ง Menu ในที่นี้
จะขอทำการพูดรวมไปถึง
การเขียน Label
และส่วนข้อความที่เป็นคำสั่ง
โดย..ในส่วนของ Label
ซึ่งจะมีลักษณะรายละเอียด
ดังนี้
กรอบข้อความ | สีที่แสดงผล | ตัวอักษร/ประเภท | ขนาด |
สีขาว/นูน | น้ำเงินเข้ม | Jasmine UPC /หนา | 36 Point |
ขั้นตอน..
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
ของโปรแกรม เท่านั้น..
ขั้นตอน..ในการสร้างคำสั่ง
และกรอบข้อความ
จะเห็นว่ามีการกำหนด
รายละเอียด ดังนี้
ข้อความ | ประเภท /ขนาด | สี | ลักษณะกรอบ |
วิธีการแก้ไขปัญหา Virus | Freesia UPC /Bold ขนาด 26 Point | เขียวอ่อน | Shadowed |
นานาสาระ Internet | Freesia UPC /Bold ขนาด 26 Point | เขียวอ่อน | Shadowed |
ศัพท์ที่ควรรู้ | Freesia UPC /Bold ขนาด 26 Point | เขียวอ่อน | Shadowed |
คราวนี้..ถึงคราวที่ต้องทดสอบความาเข้าใจ ของเนื้อหา และทักษะเบื้องต้นกันแล้วแหละนะครับ ถ้าหากว่าได้ติดตามเนื้อหา มาตั้งแต่ต้น จนมาถึงบทนี้ จะเข้าใจถึงงานต่อไปนี้ ที่จะทดสอบ และรวมความรู้ที่ผ่านมา ให้ทดลองกันเล่นๆ ดูนะครับ โดยการ..อ่านรายละเอียด ของเนื้อหางานในส่วนนี้ให้เข้าใจ จากนั้น.. ทดลองสร้างคำสั่ง Menu พร้อมทำ Border Style : Shadowed ดูนะครับ จากนั้น..ก็ทำการจัดเรียงกรอบ ให้เหมาะสมดังรูปที่ได้ ทำการแสดงเอาไว้เบื้องต้น
ตอนนี้..งานเราก็ทำการออกมา ตามรูปที่ทำการแสดงแล้วนะครับ คิดว่าคงไม่ยาก เพียงแต่จะต้องให้เข้าใจ ในหลักการเกี่ยวกับเรื่องของ Border และการใช้รูปแบบตัวอักษร แล้วจะมองลักษณะงานออกได้ ชัดเจนมากขึ้น หากติดขัด..ส่วนไหนก็ลองอ่านทวนดูนะครับ เพราะรายละเอียดเนื้อหา ที่นำเสนอนั้น ค่อนข้างชัดเจน เพียงแต่ในบางจุด ต้องการให้ผู้เรียน เกิดการเรียนรู้ร่วมไปด้วย จึงเสริมในลักษณะ แบบกึ่งทดสอบความเข้าใจ ในเนื้อหาแบบฝึกหัด เพราะจะทำให้เพิ่มทักษะในการใช้งาน และการออกแบบงาน ได้ง่ายขึ้น
ส่วนสาม..การสร้าง
HyperLink
เป็นวิธีหนึ่ง
ที่จะช่วยให้เนื้อหาสามารถทำการติดต่อ
ในส่วนต่างๆ ได้ จริงแล้วนั้น
การ Link จะมีหลักการเหมือนกัน
ทั่วไป คือ
- การติดต่อแบบ One-way คือ มีการติดต่อในทิศทางเดียว หมายความว่า จะทำการส่งไปยังเนื้อหา หรือว่า ส่วนที่ต้องการ จากนั้น ก็ไม่สามารถกลับมา ยังตำแหน่งเดิมได้ เรียกว่า มาถึงบ้านแล้ว ก็ตัวใครตัวมัน ก็แล้วกัน
- การติดต่อแบบ 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
ในแต่แบบนั้น การกำหนดค่าตรงนี้
จะมีส่วนช่วยมาก
เพราะว่า..ค่าที่ทำการตั้งยิ่งสูง
ค่าในการแสดง ก็จะช้าลง
และในทางกลับกัน
หากต้องการเร็ว
ก็ต้องมีการกำหนดค่า
ที่ใช้ในการแสดงผล ให้น้อยด้วย
เช่นกัน
จากตาราง ค่าที่ให้ทำการกำหนด มีดังนี้
Page | Name | Effect / Speed |
3 | Virus 1 | Fade 1000 ms. |
4 | Na 1 | Fade 1000 ms. |
5 | Vo | Fade 1000 ms. |
ในส่วนที่เหลือนั้น
ให้ลองทำการสร้าง
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