แนวคิดการออกแบบมัลติมีเดีย

(

CONCEPT OF MULTIMEDIA DESIGN รวบรวมและเรี ยบเรี ยงโดย รตนพรรษ สุชาติ

0

แนวคิดการออกแบบมัลติมีเดีย

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

Contents บทที่ 1 ความรู้เบือ้ งต้ นงานออกแบบมัลติมีเดีย ...........................................................................................................1 1.ความเป็ นมาของมัลติมเี ดีย..............................................................................................................................1 2.รูปแบบของมัลติมเี ดีย .....................................................................................................................................5 3.ส่วนประกอบของมัลติมีเดีย .............................................................................................................................6 4.ประโยชน์ของมัลติมีเดีย ..................................................................................................................................7 บทที่ 2 แนวคิดการออกแบบงานมัลติมีเดีย .................................................................................................................9 1.หลักการออกแบบของนอร์ แมน ........................................................................................................................9 2.หลักการออกแบบของเนลสัน .........................................................................................................................12 บทที่ 3 การปฏิสัมพันธ์ ระหว่ างมนุษย์ กับคอมพิวเตอร์ ..............................................................................................13 1.ความหมายของการปฏิสมั พันธ์ระหว่างมนุษย์และคอมพิวเตอร์ .......................................................................13 2.เป้าหมายของการศึกษาการปฏิสมั พันธ์ระหว่างมนุษย์และคอมพิวเตอร์ ...........................................................14 3.ความหมายของมนุษย์ ..................................................................................................................................14 4.มนุษย์ตามแนวคิดทางจิตวิทยา .....................................................................................................................15 บทที่ 4 การออกแบบจากประสบการณ์ ผ้ ใู ช้ งาน .........................................................................................................21 1.พื ้นฐานเกี่ยวกับพฤติกรรมผู้ใช้ งาน .................................................................................................................21 2.รูปแบบพฤติกรรมของผู้ใช้ งาน .......................................................................................................................24 บทที่ 5 การออกแบบองค์ ประกอบของมัลติมีเดีย ......................................................................................................30 1.การใช้ ข้อความ .............................................................................................................................................30 2.การใช้ เสียง...................................................................................................................................................33 3.การใช้ ภาพนิ่งและกราฟิ ก ..............................................................................................................................34 4.การใช้ วดิ ีโอ ..................................................................................................................................................35 5.การใช้ ภาพเคลือ่ นไหว ...................................................................................................................................35

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

บทที่ 6 กระบวนการสร้ างและการนาเสนองานมัลติมีเดีย..........................................................................................36 1.การเตรี ยมเนื ้อหา ..........................................................................................................................................36 2.ความสัมพันธ์ระหว่างการจัดการเนื ้อหาและความรู้ .........................................................................................37 3.ขันตอนการจั ้ ดการสารสนเทศ ........................................................................................................................38 4.กระบวนการสร้ างงานมัลติมีเดีย ....................................................................................................................39 5.รูปแบบการนาเสนองานมัลติมีเดีย .................................................................................................................42 บทที่ 7 การออกแบบอินเตอร์ เฟส ..............................................................................................................................44 1.หลักการออกแบบพื ้นฐาน ..............................................................................................................................44 2.การออกแบบทัศนศิลป์ ..................................................................................................................................48 บทที่ 8 แนวทางการออกแบบที่ดี : Material Design ...................................................................................................53 1.วัสดุ = กระดาษและหมึก ..............................................................................................................................54 2.ระดับของความลึก ........................................................................................................................................54 3.เรขาคณิต กริ ด และสัดส่วน ...........................................................................................................................55 4.สีสนั .............................................................................................................................................................56 5.ฟอนต์ ..........................................................................................................................................................57 6.ไอคอน .........................................................................................................................................................57 7.ปุ่ ม...............................................................................................................................................................58 8.การใช้ ภาพ ...................................................................................................................................................59 9.ภาพเคลือ่ นไหวและแอนิเมชัน .......................................................................................................................59 10.การวางโครงสร้ างของ UI .............................................................................................................................60 บทที่ 9 ระบบมัลติมีเดียและการออกแบบการกระทา/คาสั่ง ......................................................................................62 1.ระบบมัลติมีเดีย ............................................................................................................................................62 2.การออกแบบการกระทาและคาสัง่ ของแอปพลิเคชัน ........................................................................................63 3.ลักษณะของการกระทาและคาสัง่ ของแอปพลิเคชัน .........................................................................................64 4.วิธีการออกแบบการจัดวางคาสัง่ และการตอบสนอง ........................................................................................65

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

บทที่ 10 เทคโนโลยีมัลติมีเดีย.....................................................................................................................................68 1.ตัวอักษรและข้ อความ (Typography and Text) .............................................................................................68 2.ภาพกราฟิ ก (Graphics)................................................................................................................................70 3.เสียง (Sound) ..............................................................................................................................................80 4.วิดีโอ (Video) ...............................................................................................................................................83 5.แอนิเมชัน (Animation) .................................................................................................................................86 บทที่ 11 การประยุกต์ ใช้ งานมัลติมีเดีย.......................................................................................................................89 1.การประยุกต์ใช้ งานมัลติมเี ดียกับงานด้ านอื่นๆ ................................................................................................89 2.ฮาร์ ดแวร์ และซอฟท์แวร์ ที่นามาใช้ กบั มัลติมีเดีย ..............................................................................................91 บรรณานุกรม ...............................................................................................................................................................94

บทที่ 1 ความรู้เบื้องต้นงานออกแบบมัลติมีเดีย 1. ความเป็ นมาของมัลติมีเดีย คาว่า “มีเดีย” หรื อ “สื่อ” ในอดีตนัน้ มักเป็ นสื่อรู ปแบบเดี่ยว (Single Form) ที่มีการถ่ายทอดเนื ้อหาไปยังผู้รับสาร เพียงช่องทางเดียว ไม่ว่าจะผ่านทางการมองเห็น ทางการฟั ง หรื อการสัมผัส ซึง่ บ่อยครัง้ ไม่นา่ สนใจ และอาจสร้ างความน่าเบื่อ หน่ายแก่ผ้ ใู ช้ บางเนื ้อหาก็ไม่สามารถถ่ายทอดให้ ผ้ ใู ช้ เกิดการรั บรู้ที่ดีได้ ในปั จจุบัน ตามแนวคิดของมัลติมีเดีย คาว่า “มัลติมีเดีย ” หรื อตามศัพท์ บัญ ญั ติของราชบัณ ฑิ ต ยสถานว่า “สื่อ ประสม” หรื อ “สือ่ หลายแบบ” มีความหมายที่เปลีย่ นแปลงไปจากการใช้ วสั ดุอปุ กรณ์ร่วมกันหลายชิ ้นในการนาเสนอ กลายเป็ น การใช้ สื่ออิเล็กทรอนิกส์โดยเฉพาะคอมพิวเตอร์ ทงั ้ ในส่วนของฮาร์ ดแวร์ และซอฟท์ แวร์ เป็ นเครื่ องมือในการผลิตหรื อเป็ น เครื่ อ งมื อ ในการแสดงผล เพื่ อ ถ่ า ยทอดข้ อ มู ล ข่ า วสารที่ ผ สมผสานกั น ในหลายรู ป แบบ เช่ น ข้ อความ เสี ย ง ภาพนิ่ ง ภาพเคลือ่ นไหว วิดีโอ ซึง่ ก่อให้ เกิดการับรู้ที่หลากหลาย (Multisensory) ต่อกลุม่ เป้าหมาย ไม่วา่ จะเป็ นการได้ เห็น (Visual) การ ได้ ยิน (Auditory) หรื อแม้ กระทัง่ ความสามารถในการปฏิสมั พันธ์โต้ ตอบ (Interactive) กับสือ่ แนวคิดเรื่ องการผสมผสานสื่อจึงเกิดขึน้ โดยคาว่า Multimedia ถูกใช้ ครัง้ แรกในปี ค.ศ. 1965 ในรู ปแบบของการ แสดงที่ผสมผสานระหว่างแสง สี ดนตรี และศิลปะการแสดง ที่เรี ยกว่า “The Exploding Plastic Inevitable”

ภาพ 1 ศิลปะการแสดง T HE E XPLDING P LASTIC I NEVITABLE ที่ มา A NDY WARHOL 'S EXPLODING P LASTIC I NEVITABLE (1967) BY RONALD NAMETH

1

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

ประวัติอย่างย่อๆ ของการใช้ มลั ติมีเดียสาหรับการสือ่ สารเนื ้อหาสาระ อาจจะเริ่ มต้ นด้ วยหนังสือพิมพ์หรื อสิ่งพิมพ์ ที่ เรี ย กว่า เป็ นตัวกลาง (Medium) สาหรั บ การสื่อ สารมวลชนตัวแรกเลยเลยก็ ว่าได้ โดยสื่อ สิ่งพิ ม พ์ จ ะใช้ ตัวอัก ษรผสมกับ ภาพถ่ายหรื อรูปภาพ ต่อมาในช่วงปี ค.ศ. 1970 นิย ามของมัลติ มีเดี ย ได้ ถูกน ามาใช้ ในลัก ษณะการนาเครื่ อ งฉายหลายเครื่ อง (Multiprojector) มาใช้ ร่วมกันกับเทปเสียง หรื อการนาวัสดุ อุปกรณ์ ประเภทต่างๆ เช่น เครื่ องฉายสไลด์ เครื่ องฉายภาพโปร่ งใส เครื่ องเล่นวีดีทศั น์ เทปเสียง มาใช้ งานร่วมกันด้ วยวิธีการต่างๆ อาจใช้ ทีละอย่างเป็ นขันตอนไป ้ หรื อใช้ พร้ อมกันทีเดียวก็ได้ ซึ่ง ในระยะแรก ยังใช้ มนุษย์ในการควบคุมการทางาน ต่อมาจึงนาเอาระบบคอมพิวเตอร์ มาเป็ นตัวช่วยควบคุมการทางานของอุปกรณ์ แต่ละชิน้ โดยวัตถุประสงค์ ของ มัลติมีเดียก็เพื่อให้ เกิดความน่าสนใจมากขึ ้น และช่วยให้ ผ้ ชู มเกิดการรับรู้ที่หลากหลาย ทั ง้ การมองเห็น และได้ ยิน ไปพร้ อมๆ กัน แม้ มลั ติมีเดียในยุคแรกจะช่วยเพิ่มศักยภาพในการสือ่ สารได้ มาก แต่ข้อจากัดก็คือกระบวนการผลิตและการใช้ งานที่ยงุ่ ยาก ซับซ้ อน เนื่องจากต้ องทางานกับเครื่ องมือที่หลากหลาย สาหรับภาพเคลือ่ นไหวถูกคิดค้ นในทศวรรษที่ 1980 โดยใช้ เทคนิคการเปลีย่ นรูปภาพนิ่งอย่างรวดเร็ ว เพื่อลวงตาของ มนุษย์ ในปี ค.ศ. 1887 Thomas Alva Edison ได้ ประดิษฐ์ กล้ องถ่ายภาพเคลื่อนไหวขึ ้น และเกิ ดภาพยนตร์ ใบ้ ขึ ้นระหว่างปี ค.ศ. 1910 ถึง 1927 ปี ค.ศ. 1895 Gugliemo Macroni ได้ สง่ สัญญาณวิทยุไร้ สายเป็ นครัง้ แรกที่เมือง Pontecchio ประเทศอิตาลี หลังจาก นันไม่ ้ นาน (ปี ค.ศ. 1901) เขาก็ค้นพบคลืน่ วิทยุที่ถกู ส่งข้ ามทวีปแอตแลนติก นัน่ เป็ นที่มาของระบบการส่งโทรเลข (telegraph) และวิทยุ จนกระทัง่ มีนวัตกรรมโทรทัศน์ ซึ่งเป็ นสือ่ กลางใหม่ในศตวรรษที่ 20 เมื่อโทรทัศน์สามารถสือ่ สารด้ วยวิดีโอได้ โทรทัศน์ จึงเป็ นสือ่ ที่เปลีย่ นแปลงโลกแห่งการสือ่ สารมวลชน สาหรับคอมพิวเตอร์ และการเชื่อมโยงกันได้ ของคอมพิวเตอร์ หรื อระบบอินเทอร์ เน็ต เป็ นสือ่ ที่ทาให้ ระบบมัลติมีเดียถูก เผยแพร่ อย่างกว้ างขวางทั่วโลกและเป็ นที่นิยมของคนทั่วไป อันเนื่องจากในปั จจุบัน ที่สามารถนามาช่วยในการผลิตและ เผยแพร่ สื่อได้ อย่างสะดวก รวดเร็ ว สวยงาม และมีประสิทธิภาพ คอมพิวเตอร์ เพียงเครื่ องเดียวก็สามารถสร้ างสื่อได้ แทบทุก รู ปแบบ เช่น การออกแบบ จัดหน้ า ตกแต่งภาพสาหรับสื่อสิ่งพิมพ์ การตัดต่อ และแต่งเสียงหรื อภาพสาหรับรายการวิท ยุ โทรทัศน์ รวมทังการสร้ ้ างชิ ้นงานที่สามารถนาเสนอได้ อย่างหลากหลายรูปแบบ

2

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

ตาราง วิวัฒนาการของมัลติมีเดีย ปี ค.ศ. วิวัฒนาการ 1945

ที่ MIT ภายหลังสงครามที่ ท าให้ นัก วิ ท ยาศาสตร์ ต้ อ งทุ่ม เทก าลัง ความคิ ด ไปกับ การสร้ างพลังของกองทัพ Vannevar Bush (1890-1974) เขียนบทความหนึ่งเพื่ออธิบายว่าอะไรคือระบบสื่อหลายมิติ (Hypermedia) ซึ่ง ถูกเรี ยกว่า Memex ที่มีความหมายว่า การใช้ ประโยชน์ อย่างเป็ นสากล (ทั่วไป) และอุปกรณ์ ห น่วยความจา ส่วนตัวซึ่งรวมไปถึ งแนวคิดเกี่ ยวกับการเชื่ อมโยง (Links) ด้ วย มัน เป็ นจุดบุกเบิ กของ www ในปั จจุบัน และ ภายหลังสงครามโลกครั ง้ ที่ 2 นัก วิ ท ยาศาสตร์ 6,000 คน ได้ เอาแนวคิ ด นี ม้ าพัฒ นาต่ อ ภายใต้ แ นวคิ ด ว่า อิสรภาพใหม่ (New freedom)

1960

Ted Nelson เริ่ มต้ นโครงการ Xanadu โดยเริ่ มต้ นมีความพยายามจะทาให้ เป็ นระบบ Hypertext ที่เนลสันเรี ยก มันว่า “จุดวิเศษแห่งวรรณกรรม” (Magic Place for Literary Memory)

1967

Nicholas Negroponte ก่อตัง้ Architecture Machine Group ที่ MIT

1968

Douglas Engelbart ถูกชักจูงโดย Vannevar Bush เพื่อคิดค้ นและสาธิ ตระบบ “On-Line System : NLS” เป็ น อีก โปรแกรม hypertext หนึ่ง กลุ่ม ของ Douglas Engelbart ที่ สถาบัน วิจัย สแตนฟอร์ ด ตัง้ จุด ประสงค์ “การ เพิ่มขึ ้นแต่ไม่ใช่อตั โนมัติ” เพื่อเพิ่มความสามารถของมนุษย์ต่อการใช้ เทคโนโลยีคอมพิวเตอร์ NLS เป็ นแนวคิดที่ นามาใช้ ในการพัฒนาการเชื่อมโยงข้ อความ การสือ่ สารทางไกลแบบสองทาง ซอฟท์แวร์ ประมวลคา อีเมล เมาส์ ซอฟท์แวร์ ลกั ษณะหน้ าต่าง และระบบช่วยเหลือ

1969

Nicholas และ Van Dam ที่ Brown University สร้ าง editor สาหรับ hypertext เรี ยกว่า FRESS

1976

Architecture Machine Group ที่ MIT ได้ นาเสนอโครงการชื่อ “Multiple media” และได้ ผลลัพธ์ เป็ นวิดีโอดิสก์ เป็ นครัง้ แรกชื่อ Aspen Movie Map ในปี ค.ศ. 1978

1985

Negroponte และ Wiesner ได้ ร่วมทุนกับ MIT Media Lab เพื่อวิจัยเกี่ ยวกับดิจิทัลวิดีโอ (digital video) และ มัลติมีเดีย

1989

Tim Berners-Lee ได้ น า เส น อ ระ บ บ ที่ เรี ย ก ว่ า World Wide Web ต่ อ European Council for Nuclear Research (CERN)

1990

Kristina Hooper Woolsey หั ว หน้ า Apple Multimedia Lab ศึ ก ษาและพั ฒ นาระบบมั ล ติ มี เ ดี ย ส าหรั บ คอมพิวเตอร์ Macintosh

1991

MPEG - 1 ถูกพัฒนาให้ เป็ นมาตรฐานสากลของดิจิทลั วิดีโอ และมีการพัฒนาต่อในมาตรฐานใหม่เป็ น MPEG-2

3

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

MPEG-4 และพัฒนาอย่างต่อเนื่องในทศวรรษ 1990 1991

มีการเปิ ดตัวระบบ PDA เละเริ่ มยุคใหม่ของการใช้ คอมพิวเตอร์ เพื่องานทัว่ ไปและมัลติมีเดีย

1992

JPEG ถูกยอมรับให้ เป็ นมาตรฐานสากลของการบีบอัดรู ปภาพดิจิทลั (digital image compression) และมีการ พัฒนามาตรฐานอย่างต่อเนื่องจนเป็ น JPEG2000 ในปั จจุบนั

1993

Center for Supercomputing Application ของมหาวิทยาลัยแห่งอิลลินอยส์ ได้ พฒ ั นา NSCA Mosaic ซึ่งเป็ น เบราว์เซอร์ ที่ดีที่สดุ ตัวแรกสาหรับยุคอินเทอร์ เน็ต

1994

Jim Clark และ Marc Andreessen ได้ สร้ างโปรแกรม Netscape

1995

ภาษาจาวา (Java) สร้ างขึ ้นมาเพื่อพัฒนาโปรแกรมประยุกต์ใช้ กบั คอมพิวเตอร์ ทกุ ระบบ

1996

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

1998

XML 1.0 ถูกประกาศให้ ใช้ ใน W3C

1998

เป็ นปี แรกที่มีการฟั งเพลงนามสกุล MP3 ด้ วยอุปกรณ์ มือถือ และมีหน่วยความจาแฟลชขนาด 32 MB เป็ นครัง้ แรก

2000

WWW มีการเผยแพร่ในอินเทอร์ เน็ตมากกว่า 1 ล้ านล้ านหน้ า ตาราง 1 วิ วัฒนาการของมัลติมีเ ดี ย

4

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

2. รู ปแบบของมัลติมีเดีย จากแนวคิดของมัลติมีเดียข้ างต้ น สามารถสรุปได้ วา่ มัลติมีเดียแบ่งออกได้ เป็ น 2 ประเภท ดังต่อไปนี ้ มัลติมีเดียรู ปแบบนี ้มุ่งสร้ างความตื่นตาตื่นใจ น่าสนใจ น่าติดตาม และถ่ายทอดผ่านประสาทสัมผัสที่หลากหลาย ผ่านตัวอักษร ภาพและเสียง ซึ่งในปั จจุบันพัฒ นาถึงขัน้ ให้ ผ้ ูชมสัมผัสได้ ถึงความรู้ สึกต่างๆ เช่น ความร้ อน ความเย็น ก าร สัน่ สะเทือน หรื อสัมผัสผ่านจมูกด้ วยการได้ กลิ่น เป็ นต้ น เน้ นการนาไปใช้ งานเพื่อเสนอข้ อมูลข่าวสารที่ผ้ ูผลิตวางแผนการ นาเสนอเป็ นขันตอนไว้ ้ เรี ยบร้ อยแล้ ว เช่น มัลติมีเดียแนะนาองค์กร การแสดงแสง สี เสียง โฆษณาเปิ ดตัวสินค้ า หรื อในลักษณะ ประกอบการบรรยาย ส่วนใหญ่มกั ใช้ ได้ ทงการน ั้ าเสนอเป็ นรายบุคคล และเสนอต่อกลุม่ ใหญ่ ผู้ใช้ จะทาหน้ าที่เป็ นเพียงผู้ชมสื่อ โดยที่ผ้ ใู ช้ และสือ่ แทบจะไม่มีปฏิสมั พันธ์ โต้ ตอบกัน อาจจะมีบ้างก็ในลักษณะการกดปุ่ ม Play หรื อ Stop แต่ก็ไม่ถือว่าเป็ นการ ปฏิสมั พันธ์โต้ ตอบ ซึ่งหากมองในรูปแบบของการสื่อสารแล้ ว มัลติมีเดียลักษณะนี ้จัดเป็ นการสื่อสารแบบทางเดียว (One way Communication)

เป็ นรู ปแบบที่เน้ นให้ ผ้ ใู ช้ สามารถโต้ ตอบสือ่ สารกับสื่อได้ โดยตรงผ่านโปรแกรมมัลติมีเดียที่มีลกั ษณะของสือ่ หลายมิติ หรื อไฮเพอร์ มีเดีย(Hypermedia) ที่เนื ้อหาภายในสามารถเชื่อมโยง (Link) ถึงกัน มัลติมีเดียรูปแบบนี ้ นอกจากผู้ใช้ จะสามารถดู ข้ อมูลได้ หลากหลายลักษณะเช่นเดียวกับรู ปแบบมัลติมีเดียเพื่อการนาเสนอแล้ ว ผู้ใช้ ยงั สามารถสื่อสารโต้ ตอบผ่านการคลิก เมาส์ แป้นพิมพ์ หรื ออุปกรณ์อื่นๆ เพื่อสื่อสารกับคอมพิวเตอร์ วา่ ผู้ใช้ ต้องการอะไร เช่น หากต้ องการทราบข้ อมูลเพิ่มเติมก็คลิก หัวข้ อที่สนใจหรื อสัญ ลักษณ์ รูปที่ท าเป็ นปุ่ มในการเชื่ อมโยง โปรแกรมก็ จะแสดงภาพ เสียง หรื อคาอธิ บ าย เพื่อให้ ศึก ษา รายละเอียดได้ หรื อหากต้ องการวัดความเข้ าใจของตนเองเกี่ยวกับสิง่ ที่ได้ ศึกษา ก็สามารถทาการทดสอบผ่านแบบฝึ กหัด เกม ข้ อสอบ และให้ โปรแกรมคานวณผลการทดสอบหรื อให้ ข้อเสนอแนะเพิ่มเติมแก่เราได้ มัลติมีเดียรูปแบบนี ้จึงจัดเป็ นการสื่อสาร แบบสองทาง (Two way Communication) มัลติมีเดียปฏิสมั พันธ์ ในระยะแรกมักเป็ นโปรแกรมคอมพิวเตอร์ ที่บนั ทึกลงในแผ่นซีดีรอมและนามาใช้ งานบนเครื่ อง คอมพิ วเตอร์ เครื่ องใดเครื่ องหนึ่งเพี ย งลาพัง ซึ่งเรี ยกว่าแบบแสตนด์ อ ะโลน (Stand Alone) ผู้ใช้ งานจะศึกษาเนื อ้ หาจาก ข้ อความ ภาพผ่านทางหน้ าจอ และฟั งเสีย งจากลาโพง โดยโต้ ตอบผ่านอุป กรณ์ พื น้ ฐานคื อ เมาส์แ ละคี ย์ บอร์ ด ปั จจุบัน มัลติมีเดียปฏิ สมั พันธ์ ได้ พัฒ นาไปถึงลักษณะของความเป็ นจริ งเสมือน (Virtual Reality) ที่ เสริ มอุปกรณ์ ต่างๆ เพื่ อให้ ผ้ ใู ช้ มองเห็นเสมือนหลุดเข้ าไปอยู่ในสภาพแวดล้ อมนันจริ ้ งๆ เช่น เครื่ องจาลองการขับเครื่ องบิน เครื่ องจาลองการฝึ กผ่าตัด เครื่ อง จาลองการฝึ กเล่นกีฬา นอกจากนี ้มัลติมีเดียปฏิสมั พันธ์ในปั จจุบนั ยังเพิ่มความสามารถในการติดต่อสื่อสารที่นอกเหนือจากการโต้ ตอบกับ โปรแกรมแล้ ว ผู้ใช้ ยังสามารถโต้ ต อบสื่อ สารกับ ผู้ใช้ คนอื่ น ๆ ที่ ใช้ โปรแกรมเดี ย วกัน ผ่ านทางเทคโนโลยี ระบบเครื อ ข่า ย คอมพิวเตอร์ ทงในระบบเครื ั้ อข่ายขนาดเล็ก (LAN) หรื อแม้ กระทัง่ เครื อข่ายอินเทอร์ เน็ต (Internet) ที่เชื่อมโยงโลกเข้ าไว้ ด้วยกัน ทาให้ การใช้ งานมัลติมีเดียปฏิสมั พันธ์ในปั จจุบนั มีประสิทธิภาพสูงขึ ้น 5

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

3. ส่ วนประกอบของมัลติมีเดีย โดยทัว่ ไปมัลติมเี ดียประกอบด้ วยสือ่ การรับรู้ในรูปแบบต่างๆ ได้ แก่ ตัวอักษร เสียง ภาพนิง่ วิดีโอ ภาพเคลือ่ นไหว และ ปฏิสมั พันธ์ ซึง่ มีรายละเอียดดังนี ้ รวมทัง้ ตัวเลข และสัญลักษณ์ พิเศษต่างๆ นับเป็ นองค์ประกอบพืน้ ฐานของมัลติมีเดีย ซึ่งมีรูปแบบ ขนาด และสีที่ มากมาย โดยที่มาของตัวอักษรอาจได้ มาจากการพิมพ์ จากการสแกนมา หรื อสร้ างเป็ นภาพขึ ้นมาด้ วยโปรแกรมคอมพิวเตอร์ และลักษณะของตัวอักษรที่ใช้ ในการเชื่อมโยงไปสูข่ ้ อมูลอื่นๆ ซึง่ เรี ยกว่า ไฮเปอร์ เท็กซ์ (Hypertext)

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

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

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

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

6

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

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

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

4. ประโยชน์ ของมัลติมีเดีย สามารถแยกแยะประโยชน์ที่จะได้ รับจากการนามัลติมเี ดียมาประยุกต์ใช้ งานได้ ดงั นี ้

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

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

7

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

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

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

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

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

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

8

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

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

ภาพ 2 ก็ อ กน ้าระบบเซ็น เซอร์ เป็ นตัว อย่ า งที่ น่ า สนใจ เกี่ ย วกับ V ISIBILITY เพราะแม้ ว่ า การออกแบบ เช่ นนี จ้ ะดูส วยหรู ทัง้ ยัง ช่ ว ยเรื่ อ งของสุข อนามัย และการประหยัด น ้า แต่มี ข้ อ เสี ย ตรงที่ ผ้ ู ใ ช้ อ าจสับ สน วิ ธี ก ารเปิ ดก๊ อก หรื อ อาจไม่ ร้ ู ว่ า ควรนามื อไปที่ ตาแหน่ ง ใดที่ ถูก จุด/ถูก จัง หวะ เพื่ อให้ น ้าไหล ที่ ม า HTTP :// IDYEAH . COM / BLOG /2011/03/ VISIBILITY - PRINCIPLE - IN- USER - INTERFACES /

ภาพ 3 อี ก ตัว อย่างเกี่ ยวกับ VISIBILITY นาฬิก าข้ อมื อ ที่แ ม้ ออกแบบให้ ดูหรู หราด้ วยการ ประดับ ด้ วยเพชร แต่ความซับ ซ้ อนของลวดลายบนหน้ า ปั ดอาจทาให้ ผ้ ูใ ช้ ม องเวลาได้ ย าก ที่ ม า HTTP :// IDYEAH . COM / BLOG /2011/03/ VISIBILITY - PRINCIPLE - IN- USER - INTERFACES /

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

9

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design) ภาพ 4 ตัว อย่า งเรื่ อง FEEDBACK คื อ เมื่อ ผู้ใ ช้ ก ดปิ ด/เปิ ดสวิ ช ต์ ไฟ จะรู้ สึก ทันที ว่า ปุ่ มถูกกดลงแล้ ว และมี เสียงดัง คลิก

เมื่อผู้ใช้ มองเห็นสิง่ ของนัน้ โดยธรรมชาติแล้ ว ควรจะรู้ในทันทีวา่ สิง่ นันน่ ้ าจะถูกใช้ งานยังไง เช่น ปุ่ ม น่าจะมีไว้ กด, ด้ าม จับ น่าจะมีไว้ ให้ จบั , เก้ าอี ้ น่าจะมีไว้ นงั่ , ลูกบิดประตูหรื อที่เปิ ดเตาแก๊ ส น่าจะไว้ หมุน เป็ นต้ น จะเห็ น ได้ ว่าตัวบ่งบอกการใช้ งานปรากฏอยู่บ นวัต ถุต่างๆ รอบตัว เรา โดยเฉพาะ ส่วนการควบคุม การท างานของ เครื่ องจักร เช่น มือจับ สวิทช์ เป็ นต้ น ซึ่งอุปกรณ์เหล่านี ้ สามารถมองได้ ในรูปแบบของการกระทาที่แตกต่างกันออกไป เช่น มือ จับสาหรับรถยนต์สามารถที่ใช้ งานด้ วย การดึง , การบิด, การผลัก เป็ นต้ น มองดูเผินๆ ก็อาจจะเป็ นเรื่ องธรรมดาแต่ถ้าลอง คิดถึงว่าถ้ าเราขาดตัวบ่งบอกการใช้ งานจะเกิดอะไรขึ ้น ตัวอย่างของการขาดตัวบ่งบอก เช่น อุปกรณ์ต้ เู ฟอร์ นิเจอร์ เก็บของที่ยากต่อการเปิ ด และไม่สามารถหาส่วนที่บ่งบอกว่า ส่วนไหนเป็ นที่เปิ ด ผู้ใช้ อาจจะต้ องเดาด้ านที่เปิ ดเอง ในทางตรงกันข้ ามถ้ าเรามีตวั บ่งบอกมากเกินไปจะทาให้ เกิดความสับสน ต่อการใช้ งาน เช่น กลอนประตูที่มีมากเกินความจาเป็ น เป็ นต้ น บางครัง้ แล้ วเราอาจจะเห็นการแก้ ปัญหาของกลอนประตูในที่ตา่ งๆ โดยการติดป้ายที่ประตูว่า ประตูนี ้จะต้ องดึงหรื อผลัก ซึง่ อาจจะเป็ นการแก้ ปัญหาที่ปลายเหตุ เนื่องจากการสร้ างมือจับประตูที่ดี จะสามารถบ่งบอกได้ ว่าผลิตภัณฑ์นนควรจะถู ั้ กใช้ งานอย่างไร ด้ วยความหมายของตัวมันเอง (Semantic Product) โดยไม่จาเป็ นที่จะต้ องสือ่ ความหมายด้ วยคาพูดหรื อประโยค (Syntax) ข้ อแนะนาในการออกแบบคือ ต้ องอาศัยหลักความสอดคล้ องและอิงกับการรับรู้ ของผู้ใช้ ว่าอะไรควรเป็ นอะไร ซึง่ จะ ทาให้ ผ้ ใู ช้ สามารถเข้ าใจวิธีการใช้ งานจากประสบการณ์ที่มีอยูก่ ่อนแล้ วได้

ภาพ 5 ตัว อย่า งการมี ตัวบ่งบอกการใช้ งานมาก จนเกิ ดความสับ สนต่อการใช้ งาน เช่ น ตู้ลิน้ ชัก ที่มี ด้ามจับ บริ เวณที่ จะทาให้ ผ้ ูใ ช้ เข้ าใจผิดว่า มี ไ ว้ สาหรั บ ดึง เพื่ อเปิ ดลิน้ ชัก ที่ มา HTTP:// WWW.BADDESIGNS. COM /FILE. HTML

10

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

คือ ความสัมพันธ์ กันในเชิ งสัญ ลักษณ์ ของส่วนควบคุม(Control) และ สิ่งที่แสดงผล(Effect) เช่น การออกแบบส่วน ควบคุมพัดลม เบอร์ 1 = แรงพัดน้ อยที่สดุ , เบอร์ 2 = แรงพัดปานกลาง, เบอร์ 3 = แรงพัดมากที่สดุ หรื อ การแผงควบคุมการ ปิ ด/เปิ ด หน้ าต่างรถยนต์ (ตรงที่นงั่ คนขับ) ก็จะมีตาแหน่งของปุ่ มสัมพัน ธ์ กับตาแหน่งหน้ าต่างจริ งๆ ของรถยนต์ เป็ นต้ น การ ออกแบบที่มีความสัมพันธ์(Mapping) ที่ดีจะช่วยลดความสับสน และลดความผิดพลาดในการใช้ งานได้

ภาพ 6 ตัว อย่า งการ M APPING ของแผงควบคุม การปิ ด/เปิ ดหน้ า ต่า งรถยนต์ ช่ วยให้ ผ้ ูใ ช้ เ ข้ าใจ ความสัมพันธ์ และสามารถเลื อกได้ ถูกต้ อง ไม่ ต้องเสียเวลาลองผิดลองถูก

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

ภาพ 7 ตัว อย่า ง CONSTRAINT ที่ จากัดการใช้ งานที่ไ ม่เกี่ ยวข้ อง ทาให้ ผ้ ใู ช้ เพ่ง ความคิดไปที่งานที่ ต้องการทา

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

11

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

2. หลักการออกแบบของเนลสัน จาคอบ เนลสัน (Jakop Nielson) ได้ สรุปสาระสาคัญของการออกแบบให้ ใช้ งานง่ายไว้ 10 ข้ อ ดังต่อไปนี ้ ระบบต้ องแสดงให้ ผ้ ใู ช้ งานเห็นเสมอว่าตนกาลังทาอะไรอยู่ กาลังจะเกิดอะไรขึ ้น และให้ ผลป้อนกลับในเวลาที่เหมาะสม ระบบต้ องสามารถพูดภาษาเดียวกันกับผู้ใช้ โดยมีตรรกะการใช้ งานที่เป็ นธรรมชาติ ไม่ใช้ ภาษาที่แปลกไปจากปกติ ผู้ใช้ มักจะใช้ งานผิ ดพลาดจึงจาเป็ นต้ อ งมี ทางออกให้ เสมอสาหรับ สถานการณ์ ที่ไม่พึงประสงค์ เมื่อ ผู้ใช้ งานทาผิ ด สนับสนุนการ Undo และ Redo มีความสม่าเสมอและเป็ นมาตรฐานไปทุก ๆ หน้ าจอของการออกแบบ ผู้ใช้ งานต้ องไม่สบั สนในเรื่ องการจัดวางหรื อขนาด ของตัวหนังสือ ตัวระบบเองก็ควรจะมีชดุ ป้อนคาสัง่ ต่าง ๆที่เป็ นมาตรฐาน ระบบควรจัดให้ มีคาเตือนให้ ระวังความผิดพลาดซึง่ เป็ นสิง่ ที่ดีที่จะช่วยป้องกันความผิดพลาด ระบบควรจะให้ มีการตกลง ใจซ ้าอีกครัง้ เพื่อตรวจสอบความแน่นอนของการตัดสินใจของผู้ใช้ เช่น ท่านต้ องการแก้ ไขหรื อไม่ ให้ ตอบ แก้ ไข หรื อ ไม่แก้ ไข พยายามทาให้ ผ้ ใู ช้ งานต้ องใช้ ความจา ในการจดจาคาสัง่ ต่างๆ ในระบบให้ น้อยที่สดุ โดยการทาให้ สว่ นประกอบหน้ าจอ การออกคาสัง่ ปฏิบตั ิและส่วนตัวเลือกมีความชัดเจน วิธีการใช้ งานต้ องเข้ าถึงได้ ง่ายและรับรู้ได้ ง่าย มีความยืดหยุน่ สาหรับผู้ใช้ งานหลากหลายกลุม่ และมีประสิทธิผลในการทางาน การนาเสนอเนื ้อหาต้ องไม่รวมเรื่ องที่ไม่เกี่ยวข้ องหรื อใช้ อย่างน้ อยๆ เพื่อจะได้ เน้ นเนื ้อหาที่เราต้ องการสือ่ สารอย่างเต็มที่ ข้ อความแสดงความผิดพลาดต้ องปรากฏในแบบตัวอักษรธรรมดาไม่ใช่โค้ ดโปรแกรมที่เข้ าใจยาก ระบุปัญหาและบอก วิธีแก้ ไข ให้ ผ้ ใู ช้ งานสามารถแก้ ไขได้ เอง ถึงแม้ จะคาดหวังไว้ ว่าระบบที่ดีต้องทางานได้ โดยไม่ต้องอาศัยคู่มือการใช้ แต่อย่างไรก็ตามคู่มือก็ยงั มีความจาเป็ น ใน คู่มือต้ องมีการแบ่งสารบัญ ข้ อมูลที่ให้ ต้องหาง่ายเจาะจงไปยังหน้ าที่ ต่าง ๆ มีการเรี ยงลาดับ อย่างเป็ นระบบ และไม่หนา จนเกินไป

12

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

บทที่ 3 การปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์ 1. ความหมายของการปฏิสัมพันธ์ ระหว่ างมนุษย์ และคอมพิวเตอร์ การปฏิสมั พันธ์ระหว่างมนุษย์และคอมพิวเตอร์ (Human computer interaction: HCI) ในที่นี ้จะขอเรี ยกย่อๆ ว่า HCI คือ การศึกษาการปฏิสมั พันธ์ ระหว่างคนซึ่งเป็ นผู้ใช้ กับคอมพิวเตอร์ โดยเป็ นการศึกษาที่เชื่อมโยงเกี่ยวเนื่องกันของหลายๆ ศาสตร์ เช่ น วิ ท ยาการคอมพิ ว เตอร์ (Computer Science) พฤติ ก รรมศาสตร์ (Behavioral Science) จิ ต วิ ท ยา และการ ออกแบบ เป็ นต้ น HCI ประกอบไปด้ วย 3 องค์ประกอบหลักคือ

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

เมื่อเรากล่าวถึงคอมพิวเตอร์ เราจะนึกไปถึงเทคโนโลยีในขอบข่ายของเครื่ อง PC แต่ในความหมายของคอมพิวเตอร์ ที่ กล่าวถึงนี ้มีความหมายถึง ระบบต่างๆ ที่มีขอบเขตอย่างกว้ างขวาง รวมไปถึงเครื่ องจักรกล และระบบอัตโนมัติตา่ งๆ

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

13

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

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

3. ความหมายของมนุษย์ มนุษย์ เป็ นสิ่งมีชีวิตชนิดหนึ่งที่ประกอบด้ วยส่วนที่เล็กที่สดุ ที่เรี ยกว่า “เซลล์” เป็ นเซลล์ชนิดหนึง่ ที่ทางานอัตโนมัติ พวกนี ้ รวมเข้ าเป็ น อวัยวะ สามารถตอบสนองต่อสิ่งกระตุ้นต่างๆ ได้ มีการปรับตัว มีการแบ่งเซลล์ และเพิ่มจานวนได้ สิ่งเหล่านี ้คือ พื ้นฐานเดิมของอวัยวะมนุษย์ วิวฒ ั นาการเริ่ มจากเซลล์เดียว หลายเซลล์ จนมาเป็ นพืช หรื อ สัตว์ ชนิดต่างๆ...ต่อมาเกิดคาถาม ว่า ทาไมจึงเกิดเป็ นมนุษย์ขึ ้นมาได้ ?

- ทฤษฎีของดาร์ วนิ = ธรรมชาติเป็ นตัวตัดสินว่า อะไรเหมาะสม - ทฤษฎีของเมนเดล = การถ่ายทอดกรรมพันธุ์ จึงมีการนาเอา 2 ทฤษฎีรวมกัน โดยถือว่าการที่มนุษย์สบื พันธุ์ตอ่ ๆ กันไปนัน้ จะมีการแตกเผ่าพันธุ์ พ่อแม่เดียวกันแต่ ลูก 5 คนอาจจะไม่เหมือนกันก็ได้ เพราะว่าการที่ยีนส์ของทัง้ 2 ฝ่ ายผสมกันนัน้ มันจะไม่มีทางเหมือนกันเลย อาจจะคล้ ายคลึง กันบ้ างในบางส่วน เพราะฉะนัน้ ในขณะที่มีการสืบพันธุ์แต่ละรุ่ นจะมีการแตกต่างกัน ตัวไหนที่พอจะอยู่ในสภาวะแวดล้ อมนัน้ ได้ ก็อยู่ ตัวไหนที่ไม่เหมาะสมก็สญ ู พันธุ์ไป ดังนัน้ ในขณะนี ้เราจึงสรุปได้ วา่ มนุษย์นนคื ั ้ อสัตว์ชนิดหนึง่ มีวิวฒ ั นาการต่อมาจนกระทัง่ เหมาะสมกับสถานการณ์ใน โลก มีร่างกายที่ประกอบด้ วยโครงสร้ างอัตโนมัติพื ้นฐานทังหลาย ้ แต่ว่าสิ่งที่ยงั อธิ บายไม่ได้ ก็คือเซลล์ต่างๆ ที่ทางานร่ วมกัน ทาไมจึงมีแนวความคิดเป็ นของตัวเอง ? สิง่ ที่มนุษย์เหนือคอมพิวเตอร์ คือ แนวคิด ... ซึ่งเกิดจากประสบการณ์ของเรา พฤติกรรมของมนุษย์ที่แสดงออกก็เป็ น ส่วนซึง่ แสดงออกของแนวคิดตัวครึ่งหนึง่ และอีกส่วนเป็ นผลมาจากพันธุกรรมที่ได้ มาจากพ่อแม่ นอกจากผลจากพันธุกรรมแล้ ว การเจริ ญเติบโตหรื อแนวความคิดต่างๆ ขึ ้นอยูก่ บั สิง่ แวดล้ อมพี่น้อง ซึ่งอาจจะเกิดมาด้ วยกันแต่ไปอยูใ่ นที่แตกต่างกัน มีความ บีบคันหรื ้ อประสบการณ์ในชีวิตที่แตกต่างกัน อาจจะทาให้ มีพฤติกรรมหรื อแนวความคิดแตกต่างกัน ดังนันสภาพแวดล้ ้ อมไม่ ว่าจะก่อนคลอด หลังหลอด ครอบครัว สังคม หรื อวัฒนธรรม จึงเป็ นสิง่ ที่มีผลต่อพฤติกรรมของมนุษย์ 14

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

4. มนุษย์ ตามแนวคิดทางจิตวิทยา จิตวิทยา เป็ นศาสตร์ ทวี่ า่ ด้ วยการศึกษาถึงพฤติกรรมของมนุษย์ มีกลุม่ ความคิดที่สาคัญหลายกลุม่ ซึง่ พยายามอธิบายถึง ธรรมชาติและความหมายของความเป็ นมนุษย์ ดังนี ้ 1. แนวคิดจิตวิเคราะห์ 2. แนวคิดพฤติกรรมนิยม 3. แนวคิดการเรียนรู้การคิด 4. ทฤษฎีกระบวนการทางสมองในการประมวลผลข้ อมูล ซิกมันด์ ฟรอยด์ (Sigmund Freud) จิตแพทย์ชาวเวียนนา(1856 - 1939) สร้ างกรอบแนวคิดเกี่ยวกับธรรมชาติของมนุษย์ ในเรื่ องเพศ เขามีความเชื่อว่าแรงผลักดันทาให้ มนุษย์แสดงพฤติกรรม มีกาเนิดจากแรงผลักดัน 2 อย่างคือ แรงขับทางเพศ และ แรงขับความก้ าวร้ าว ทัง้ 2 แรงขับนี ้ ดาเนินการในรูปของการทางานระหว่างโครงสร้ างบุคลิกภาพ  Id เป็ นตัวแทนของความต้ องการที่เป็ นสัญชาตญาณดิบของมนุษย์ ซึ่งมักจะเก็บตัวอยู่ในส่วนของจิตไร้ สานึกอันเป็ น ระดับจิ ตที่เราไม่ร้ ู ตัว ถ้ าความต้ องการของ Id ไม่ได้ รับการตอบสนองหรื อระบายออก บุ คคลจะตกอยู่ในภาวะตึง เครี ยด ไม่สบาย การตอบสนองความต้ องการ จะเป็ นไปตามหลักของความพึงพอใจ ซึ่งกระทาในรูปของการไม่ยงคิ ั้ ด ตอบสนองในขณะนันอย่ ้ างทันทีทนั ควัน หรื อกระทาในรู ปของการสร้ างภาพ จินตนาการ การทางานของId จะเห็น เด่นชัดในเด็กเล็กๆ ที่ยงั ไม่ร้ ูจกั เรี ยนรู้ การยับยังชั ้ ง่ ใจ  Ego เมื่ อ เด็ ก มี พัฒ นาการโตขึน้ จากการตอบสนองตามหลัก ของความพึ งพอใจ ได้ รับ การเรี ย นรู้ ให้ ร้ ู จัก ตอบสนอง สัญชาตญาณตามหลักของความเป็ นจริ ง (Reality principle) Ego เป็ นตัวแทนของบุคลิกภาพที่จะตอบสนองความ ต้ องการของ Id โดยคานึงถึงความถูกต้ องเหมาะสมกล่าวคือ Ego จะชะลอเวลาที่จะตอบสนองความต้ องการ ถ้ า สถานการณ์ไม่เอื ้ออานวย Ego จะใช้ เหตุผลพิจารณาว่าควรทาอย่างไร ความต้ องการจะได้ รับการตอบสนองโดยไม่ ถูกตาหนิ เนื่องจากเด็กเติบโตในสังคมที่มีคา่ นิยมและวัฒนธรรมที่เรี ยนรู้ร่วมกัน  Superego Superego ซึ่งเป็ นตัวแทนของคุณค่า ศีลธรรมในสังคม จึงเข้ ามามีบทบาทในการทางานของ ego และ superego โดยจะปฏิเสธ ต่อต้ าน ยับยัง้ ความต้ องการของ Id ดังนัน้ Ego จึงเป็ นตัวกลางระหว่าง 2 แรงผลักที่ยื ้อยุด ปฏิเสธต่อ กัน หรื อกล่าวได้ วา่ Ego พยายามประนีประนอมระหว่างความต้ องการของ Id และ Superego

15

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

นักทฤษฎีกลุม่ พฤติกรรมนิยมเกิดขึ ้นในช่วงศตวรรษที่ 20 และได้ รับการยอมรับอย่างกว้ างขวางตังแต่ ้ อดีตจนถึงปั จจุบนั นักทฤษฎีกลุ่มนี ้ให้ ความสาคัญกับพฤติกรรมมาก และเชื่อว่าการเรี ยนรู้ ของมนุษย์ เป็ นวิธีการทางวิทยาศาสตร์ ซึ่งสามารถ สังเกตและวัดได้ จากพฤติกรรมภายนอก ซึ่งพฤติกรรมดังกล่าวก็คือการตอบสนองของมนุษย์ที่มีต่อสิ่งเร้ า โดยประสบการณ์ ดังกล่าว หากมีการกระทาซ ้าแล้ วซ ้าอีกก็จะกลายเป็ นพฤติกรรมโดยอัตโนมัติ ผู้น าแนวคิด นี ค้ ือ วัต สัน (Watson), สกิ น เนอร์ (Skinner), แบนดูรา(Bandura) ซึ่งท่านหลังได้ ดัด แปลงเพิ่ ม เติม กรอบ แนวคิดพฤติกรรมนิยมให้ ถกู โจมตีน้อยลง ตามแนวคิดนี ้พฤติกรรมเป็ นผลร่วมกันขององค์ประกอบต่อไปนี ้  ผลของการได้ รับรางวัล (Reward) เมื่อได้ แสดงพฤติกรรมนัน้  ผลของการลงโทษ (Punishment) เมื่อแสดงพฤติกรรมไม่ตรงกับทีผ่ ้ อู ื่นต้ องการ  ผลของการเรียนรู้ในอดีต ของการได้ รับรางวัลและการลงโทษ  ผลของการเรียนรู้แบบสรุปรวม และจาแนกความแตกต่าง(Generalization and Discrimination Learning)  ผลของการสังเกตและการเลียนแบบพฤติกรรมของผู้อื่น แนวคิดพฤติกรรมนิยม ถูกโจมตีว่ามองมนุษย์เหมือนสัตว์ที่สามารถกาหนดให้ ทาอะไรก็ได้ เพียงแต่ใช้ รางวัลและการ ลงโทษปรับพฤติกรรมมนุษย์ แบนดูรา(Bandura) จึงขยายกรอบแนวคิ ดพฤติก รรม โดยเพิ่ ม ขบวนการควบคุมตนเอง หรื อ รางวัลภายใน (Intrinsic Reward) ซึ่งหมายถึ ง รางวัลที่ บุค คลนัน้ ให้ กับ ตนเอง มัก จะเป็ นมาตรฐานที่ ต นก าหนดขึน้ เช่ น ความสุขจากการช่วยเหลือผู้อื่น ความซื่อสัตย์ ความยุติธรรม รางวัลภายในอาจขัดแย้ งกับรางวัลภายนอก (Extrinsic Reward) ซึ่งหมายถึง รางวัลที่คาดหวังตามค่านิยมในสังคมนัน้ ปกติมัก เป็ นเรื่ อ งของรางวัลที่ ตอบสนองความต้ องการเบื อ้ งต้ นทัง้ 4 ของมาสโลว์ (Maslow) (เช่ น เงิน ได้ เกรดดี ๆ ค าชม ตาแหน่ง ฯลฯ) แบนดูรา(Bandura) ยังให้ ความสาคัญกับตัวแบบที่เป็ นแบบอย่างในการแสดงพฤติกรรม บุคคลเรี ยนรู้ ที่จะ แสดงพฤติกรรม เพราะได้ สงั เกตและเลียนแบบพฤติกรรมของบุคคลที่ตนชื่นชอบ หรื อมีความคิดเห็นว่าควรเลียนแบบ

16

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

นักจิตวิทยากลุม่ นี ้คัดค้ านว่า มนุษย์มิได้ เป็ นเพียงหน่วยรับสิง่ เร้ า ที่ถกู ให้ รางวัล ถูกลงโทษ แต่มนุษย์จะมีการประมวล ข้ อสนเทศที่รับเข้ ามา กล่าวคือ ข้ อมูลที่รับเข้ ามา อาจถูกลดจานวน เปลี่ยนรหัส และส่งไปเก็บไว้ ที่กล่องความจา และรื อ้ ฟื น้ เรี ยกคืน เมื่อต้ องการรับรู้ จินตนาการ แก้ ปัญหา ผู้นาแนวคิดนี ้คือ นักจิตวิทยากลุม่ เกสตอลท์ (Gestalt) ซึ่งไม่เห็นด้ วยกับการเข้ าใจพฤติกรรมในรูปของความสัมพันธ์ ระหว่างสิ่งเร้ ากับ การตอบสนองโดยละเลยกระบวนการรู้ การคิ ด ข้ อมูลที่รับ เข้ ามาจะมีก ารผสมผสานกับข้ อมูลเดิ ม และ ตัดสินใจเลือกวิธีการที่เหมาะสม การตอบสนองของมนุษย์ขึ ้นกับการประมวลข้ อมูลข่าวสาร ที่ไม่จากัดเฉพาะเรื่ องรางวัลกับ การลงโทษ แนวคิดนี ้เรี ยกอีกอย่างหนึ่งว่า แนวคิดการประมวลข้ อสนเทศ พยายามศึกษากระบวนการทางจิต เช่น การจา การ คิด การรับรู้ อารมณ์ พลังจูงใจ อย่างเป็ นวิทยาศาสตร์ เพราะฉะนันในปั ้ จจุบนั จึงกลายเป็ นสาขาที่สาคัญของจิตวิท ยาการ ทดลอง การเรี ยนรู้ของกลุม่ เกสตัลท์ ที่เน้ น "การรับรู้ เป็ นส่วนรวมมากกว่าส่วนย่อย" นัน้ ได้ ส รุปเป็ นกฎการเรี ยนรู้ เรี ยกว่ากฎ การจัดระเบียบเข้ าด้ วยกัน (The Laws of Organization) ดังนี ้  กฎแห่ งความแน่ นอนหรือชัดเจน (Law of Pragnanz) ภาพและพื ้น หรื อภาพสองนัย คือ ในภาพเดียวกัน คนบางคนอาจเห็นไม่เหมือนกัน ทังนี ้ ้ ขึ ้นอยูก่ บั ประสบการณ์เดิม ของแต่ละคน อิทธิพลของประสบการณ์ที่มีต่อการรับรู้ ภาพและพื ้น การมองเห็นรูปภาพ (Figure) และพื ้น (Ground) สลับกันนัน้ ตามทฤษฎีของกลุม่ เกสตัลท์ เชื่อว่า การรับรู้ในลักษณะเช่นนี ้ขึ ้นอยูก่ บั ประสบการณ์ของบุคคลเป็ นสาคัญ เพราะประสบการณ์เดิมของบุคคล มีผลต่อการรับรู้

ภาพ 8 L AW OF P RAGNANZ (F IGURE / GROUND ) ที่ มา HTTP://GOLUMO .COM /

ภาพ 9 Law of Pragnanz (Figure / ground)

17

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design) ที่ มา HTTP://WWW.GRAPHIS.COM/ENTRY/DE43F1CF-343E-496A-B1E9-C5933622B543/

 กฎแห่ งความคล้ ายคลึง (Law of Similarity) กฎนี ้เป็ นกฎที่ แมกซ์ เวอร์ เธเมอร์ (Max Wertheimer) ตังขึ ้ ้นในปี ค.ศ. 1923 โดยใช้ เป็ นหลักการในการวางรู ป กลุ่ม ของการรับรู้ เช่น กลุม่ ของเส้ น หรื อสี ที่คล้ ายคลึงกัน หมายถึงสิ่งเร้ าใด ๆ ก็ตาม ที่มีรูปร่ าง ขนาด หรื อสี ที่คล้ ายกัน คนเราจะรับรู้วา่ เป็ นสิง่ เดียวกัน หรื อพวกเดียวกัน

ภาพ 10 L AW OF S IMILARITY ที่ มา HTTP ://WWW .CREATIVEBLOQ .COM /GRAPHIC -DESIGN / DESIGNER -S- GUIDE -GESTALT THEORY -10134960

 กฎแห่ งความใกล้ ชดิ (Law of Proximity) สาระสาคัญ ของกฎนี ้ มีอยู่ว่า ถ้ าสิ่งใดหรื อสถานการณ์ ใดที่เกิดขึ ้นใน เวลาต่อเนื่องกัน หรื อในเวลาเดียวกัน คนเราจะเรี ยนรู้วา่ เป็ นเหตุและผล กัน หรื อ สิ่งเร้ าใดๆ ที่ อยู่ใกล้ ชิ ด กัน คนเราจะมี แ นวโน้ ม ที่ จ ะรั บ รู้ สิ่ง ต่างๆ ที่อยูใ่ กล้ ชิดกันเป็ นพวกเดียวกัน หมวดหมูเ่ ดียวกัน

ภาพ 11 L AW OF P ROXIMITY ที่ มา HTTP://THEULTRALINX.COM/2011/08/48-MINIMAL-MOVIE-POSTERDESIGNS/

18

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

 กฏแห่ งการสิน้ สุด(Law of Closure) สาระสาคัญ ของกฎนี ม้ ี อ ยู่ว่า แม้ ว่า สถานการณ์ ห รื อ ปั ญ หายังไม่ สมบูรณ์ มนุษ ย์ ก็ ยัง จะเกิ ด การเรี ย นรู้ ได้ จ าก ประสบการณ์เดิมต่อสถานการณ์นนั ้ สิง่ เร้ าที่ขาดหายไป คนเราสามารถรับรู้ให้ เป็ นภาพสมบูรณ์ได้ โดยอาศัยประสบการณ์เดิม

ภาพ 12 L AW OF C LOSURE ที่ มา HTTPS ://WWW .BEHANCE .NET /GALLERY /BASIC /3420585

ภาพ 13 L AW OF C LOSURE ที่ มา HTTP://WWF .PANDA. ORG/

 กฎแห่ งความต่ อเนื่อง (Law of Continuity) สิง่ เร้ าที่มีทศิ ทางในแนวเดียวกัน ซึง่ คนเราจะรับรู้วา่ เป็ นพวกเดียวกัน

ภาพ 14 L AW OF C ONTINUITY ที่ มา HTTPS ://WWW .BEHANCE .NET / BALIC

19

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

เฮอร์ เบิร์ท จอห์น คลาวส์มิเอร์ (Herbert John Klausmeier) นักจิตวิทยากลุม่ ปั ญญานิยมได้ อธิบายการเรี ยนรู้ของมนุษย์ โดยเปรี ยบเทียบกับการทางานของสมองกับการทางานของคอมพิวเตอร์ ซึ่งมีขนตอนคื ั้ อ การรับข้ อมู ล (Input) การเข้ ารหัส (Encoding) และการส่งออกข้ อมูล (Output) ซึ่งหากอธิบายตามทฤษฎีการประมวลสารสนเทศนัน้ สามารถแบ่งกระบวนการ ประมวลผลสารสนเทศออกเป็ น 3 ขันตอน ้ ดังนี ้

 การรับรู้ (Sensory memory) หมายถึง ความจาที่เกิดทันทีที่มีการรับรู้จากสิง่ เร้ า โดยยังไม่มี การทบทวนหรื อใส่ใจ ทาให้ ลมื ได้ ง่ายภายในไม่กี่วินาที เมื่อ มนุษย์รับสิง่ เร้ าเข้ ามาทางประสาทสัมผัสทัง้ 5 คือ ตา หู จมูก ผิวหนัง และลิ ้น สิ่งเร้ าที่เข้ ามาจะได้ รับการบันทึกไว้ ในความจา ระยะสัน้ ซึ่งการบันทึกนีจ้ ะขึน้ อยู่กับองค์ ประกอบ 2 ประการ คือ การรู้ จัก (Recognition) และความใส่ใจ (Attention) ของ บุคคลที่รับสิง่ เร้ า

 ความจาระยะสัน้ (Short-term memory) หมายถึง ความจาซึง่ เราตังใจจดจ ้ าไว้ ชวั่ คราวไม่กี่นาที และถ้ าไม่มีการทบทวนความทรงจาก็จะลืมไปได้ เช่นกัน กล่าวคือ หากการรับรู้มีความสาคัญหรื อน่าสนใจ สิง่ เร้ านันจะได้ ้ รับการลงบันทึกลงในความจาระยะสัน้ (Short-term memory) ซึง่ จะอยู่ ในระยะเวลาที่จากัด ในการทางานที่จาเป็ น ต้ องเก็บข้ อมูลไว้ ใช้ ชวั่ คราว อาจจาเป็ นต้ องใช้ เทคนิคต่างๆ ในการช่วยจา เพื่อเพิ่ม ความจาให้ งา่ ยขึ ้นหรื อจาได้ นานขึ ้น เช่น การท่องเบอร์ โทรศัพท์หลายครัง้ หรื อ การจัดแบ่งกลุม่ เบอร์ โทรศัพท์ออกเป็ นชุดตัวเลข เป็ นต้ น

 ความจาระยะยาว (Long-term memory) หมายถึง ความจาที่เราทบทวนอยูเ่ สมอ ทาให้ เปลีย่ นจากความจาระยะสันมาเป็ ้ นความจาระยะยาว ซึง่ อาจอยูไ่ ด้ นานเป็ น ปี หรื อตลอดชีวิตก็ได้ การเก็บข้ อมูลไว้ ใช้ ในภายหลัง ทาได้ โดยข้ อมูลนันต้ ้ องได้ รับการประมวล และเปลีย่ นรู ปโดยการเข้ ารหัส เพื่อนาไปเก็บไว้ ในความจาระยะยาว (long-term memory) หรื อความจาถาวร ซึง่ อาจต้ องใช้ เทคนิคต่างๆ เข้ าช่วย ได้ แก่ - การทาหรือท่ องซา้ ๆ (Rehearsal) ซึง่ แม้ จะเป็ นแนวทางของการสร้ างความจาระยะสันแต่ ้ ก็สามารถใช้ กบั การสร้ างความจาระยะยาวได้ เช่น การท่องสูตรคูณ ซึง่ เป็ นการท่องจาที่ไม่จาเป็ นต้ องใช้ ความคิด - กระบวนการขยายความคิด (Elaborative Process) คือการสร้ างความสัมพันธ์หรื อการเชื่อมโยงระหว่าง สิง่ ที่เรี ยนรู้ใหม่หรื อข้ อมูลใหม่ กับความรู้เดิมที่เคยเรี ยนรู้มาก่อน ทาให้ ข้อมูลให้ มีความหมายกับตนเอง

20

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

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

1. พืน้ ฐานเกี่ยวกับพฤติกรรมผู้ใช้ งาน การออกแบบมัลติมีเดียที่ดีนนั ้ จาเป็ นต้ องเข้ าใจถึงความต้ องการของผู้ใช้ โดยก่อนการออกแบบนันจ ้ าเป็ นต้ องศึกษา ถึงลักษณะและพฤติกรรมของผู้ใช้ ซึง่ ทาให้ ทราบว่าผู้ใช้ มีความต้ องการในการใช้ งานอย่างไร และการตอบสนองแบบใดที่ผ้ ใู ช้ พึงพอใจมากที่สดุ ทาให้ ได้ มลั ติมีเดียที่มีประสิทธิภาพและใช้ งานง่าย การศึกษาถึงพฤติกรรมของผู้ใช้ จึงเป็ นส่วนสาคัญอีกหนึง่ เรื่ องที่ต้องใส่ใจไปพร้ อมๆกับรูปลักษณ์ของมัลติมีเดีย การจาแนกลักษณะและพฤติกรรมของผู้ใช้ โดยพิจารณาจากสิง่ ต่อไปนี ้ 1) เป้าหมายหรื อวัตถุประสงค์ในการใช้ งานของผู้ใช้ 2) หน้ าที่หรื องานที่ผ้ ใู ช้ มีสว่ นรับผิดชอบตามเป้าหมายหรื อวัตถุประสงค์ของตน 3) ภาษาและคาพูดของผู้ใช้ ที่ใช้ ในการอธิบายงานของตน 4) ทักษะ ความรู้หรื อประสบการณ์ในการใช้ งานของผู้ใช้ 5) พฤติกรรมของผู้ใช้ ทมี่ ีตอ่ มัลติมีเดียที่ออกแบบนันเป็ ้ นอย่างไร 6) มัลติมีเดียที่แตกต่างกันมีผลกระทบต่อพฤติกรรมของผู้ใช้ หรื อไม่และอย่างไร

21

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

อย่างไรก็ตาม สิ่งที่กล่าวมานัน้ เป็ นเพียงหลักการเบื ้องต้ นที่นกั ออกแบบจาเป็ นต้ องทราบ เพื่อนามาใช้ และจาแนก ลัก ษณะหรื อ พฤติ ก รรมของผู้ใช้ ดังนัน้ นัก ออกแบบจึงควรหาความรู้ เพิ่ ม เติ ม จากหนังสือ หรื อ ผลงานวิจัย ที่ เกี่ ย วข้ อ งกับ พฤติกรรมของผู้ใช้ เพื่อให้ เข้ าใจได้ ดียิ่งขึ ้น การที่จะเข้ าใจถึงพฤติกรรมของผู้ใช้ ได้ อย่างชัดเจนและสามารถออกแบบมัลติมีเดีย ให้ ตอบสนองต่อผู้ใช้ ได้ อย่างมีประสิทธิภาพนัน้ นักออกแบบจาเป็ นต้ องใช้ วิธีการหรื อเทคนิคต่างๆ เพื่อรวบรวมข้ อมูลจากผู้ใช้ ซึง่ อาจเลือกใช้ วิธีการดังต่อไปนี ้ 1) สังเกตจากผู้ใช้ โดยตรง 2) กรณีศกึ ษา 3) การสารวจ 4) เทคนิค Persona

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

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

22

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

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

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

ภาพ 15 ตัว อย่า ง PERSONA ที่ มา HTTP:// WWW. UX- LADY. COM/ DIY- USER -PERSONAS /

23

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

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

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

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

24

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

เป็ นพฤติกรรมของผู้ใช้ ที่ต้องการผลลัพธ์ ที่น่าพอใจเท่านัน้ เมื่อ แอปพลิเคชันตอบสนองหรื อให้ ผลลัพธ์ ที่ตนต้ องการ แล้ วจะยุติ ก ารท างานของแอปพลิเคชัน ทัน ที โดยพฤติก รรมของผู้ใช้ ป ระเภทนี ค้ ื อ ค้ น หาเครื่ องมื อหรื อ สิ่งที่ ต้ อ งการจาก มัลติมีเดียทันทีโดยไม่สนใจส่วนประกอบอื่นๆ ของแอปพลิเคชัน และใช้ เครื่ องมือดังกล่าวเพื่อให้ ได้ ผลลัพธ์ ที่ต้องการโดยไม่ สนใจว่าเป็ นผลลัพธ์ที่ดีที่สดุ หรื อไม่ หากการใช้ แอปพลิเคชันในครัง้ แรกไม่ได้ ผลลัพธ์ที่ต้องการ จะทดลองใช้ งานใหม่อีกครัง้ ถ้ า แอปพลิเคชันไม่สามารถให้ ผลลัพธ์ ที่ต้องการได้ ก็จะเลิกใช้ งาน ทาให้ เกิดความรู้ สกึ ในด้ านลบ ดังนันควรพิ ้ จารณาพฤติกรรม ของผู้ใช้ ในกลุม่ นี ้อย่างรอบคอบ โดยคานึงถึงสิง่ ต่อไปนี ้  สร้ าง Label ที่มีคาอธิบายสันๆ ้ สาหรับบอกหน้ าที่การทางานกากับไว้ ตามส่วนต่างๆ เช่น ปุ่ มคาสัง่ , เมนู, ลิงค์ เป็ นต้ น เพื่อให้ ผ้ ใู ช้ ทราบหน้ าที่หรื อการทางานในแต่ละส่วน แต่จะต้ องใช้ คาที่สามารถเข้ าใจได้ ตรงกัน ระหว่างนักออกแบบกับผู้ใช้  เพิ่มส่วนแสดงรายละเอียดการใช้ งาน ลงในการออกแบบ Layout เพื่อให้ ผ้ ใู ช้ ทาตามคาแนะนาดังกล่าว  ออกแบบให้ ผ้ ูใช้ สามารถเข้ า -ออก ส่วนต่างๆ ของมัลติ มี เดีย ได้ อย่างสะดวก ถ้ าผู้ใช้ เข้ าไปยังส่วนที่ไม่ ต้ อ งการใช้ งานสามารถย้ อ นกลับไปยังส่วนการท างานก่อ นหน้ าได้ โดยการสร้ างปุ่ มย้ อ นกลับ หรื อ ปุ่ ม Escape เพื่อให้ สามารถกลับมายังหน้ าหลักได้  ต้ องเข้ าใจว่าผู้ใช้ ในกลุม่ นี ้จะมองหาสิง่ ใดเป็ นอันดับแรกเมื่อเข้ ามาใช้ งานแอปพลิเคชัน

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

25

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

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

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

26

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

พฤติกรรมของผู้ใช้ แบบนี ้ถือว่าเป็ นไปตามธรรมชาติของมนุษย์ เมื่อมีการใช้ งานหรื อทากิจกรรมใดๆ เป็ นประจา จะทาให้ เกิดความเคยชิน ซึ่งพฤติกรรมนี ้มักเกิดกับการใช้ งานแอปพลิเคชันเดียวเป็ นเวลานานๆ ทาให้ ยดึ ติดกับ แอปพลิเคชันเดิม เมื่อ ต้ องเปลีย่ นมาใช้ งานแอปพลิเคชันอื่น ทาให้ เกิดอุปสรรคในการใช้ งาน นักออกแบบจึงต้ องคานึงถึงพฤติกรรมของผู้ใช้ ที่ยึดติด กับความเคยชินในการใช้ งานด้ วย ตัวอย่างเช่น คาสั่งในMicrosoft word ที่ผ้ ใู ช้ ทวั่ ไปเคยชิน เช่น Ctrl+A ที่ใช้ สาหรับเลือก ข้ อมูลทัง้ หมดในหน้ าจอ (Select All), Ctrl+C, Ctrl+S … จากตัวอย่างที่กล่าวมา ผู้ใช้ จะยึดติดคาสัง่ ในแอปพลิเคชันซึ่งตน คุ้นเคยเป็ นอย่างดี เมื่อผู้ใช้ เปลีย่ นไปใช้ งานแอปพลิเคชันอื่นที่มีการทางานที่คล้ ายๆ กัน ก็มกั จะตอบสนองกลับในแบบเดียวกับ ที่ตนเองคุ้นเคย แต่ในบางแอปอาจตอบสนองแตกต่างจากเดิม ทาให้ ผ้ ใู ช้ สบั สนและทางานผิดพลาดบ่อยครัง้ ดังนันควรน ้ า พฤติกรรมแบบนี ้ไปพิจารณาประกอบการออกแบบด้ วย โดยสังเกตจากแอปพลิเคชันทัว่ ไปที่ผ้ ใู ช้ เลือกใช้ งานว่ามีลกั ษณะการ ตอบสนองเป็ นอย่างไร

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

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

27

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

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

การเขียนข้ อความบันทึกไว้ บนพื ้นหลังของ Desktop เขียนข้ อความเตือนลงในไฟล์เอกสารของงานที่จะทาโดยตรง บันทึก URL ของเว็บไซต์ที่ต้องการเรี ยกดูในครัง้ ต่อไป ลงใน Browser โดยเรี ยกว่า Bookmark จัดเก็บเอกสารที่จะใช้ ในคราวต่อไปไว้ บน Desktop เพื่อให้ เห็นได้ ชดั เจนเมื่อเปิ ดเครื่ องใช้ งาน

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

ผู้ใช้ ประเภทนี ้จะปฏิเสธการทางานที่ต้องอาศัยเมาส์ โดยต้ องการควบคุมการทางานด้ วยคีย์บอร์ ดเพียงอย่างเดียว เนือ่ งจากผู้ใช้ บางกลุม่ อาจมีรูปร่างที่เป็ นอุปสรรคต่อการใช้ เมาส์ หรื อไม่ต้องการสลับการใช้ งานระหว่างเมาส์กบั คีย์บอร์ ด ทาให้ มีการออกแบบแอปพลิเคชันที่สามารถควบคุมและทางานโดยใช้ คีย์บอร์ ดหรื อเมาส์อย่างใดอย่างหนึ่ง ตามที่ผ้ ใู ช้ ต้องการ เพื่อ รองรับผู้ใช้ ที่มีพฤติกรรมในรู ปแบบนี ้ แต่โดยทัว่ ไปการทางานของแอปพลิเคชันจาเป็ นต้ องใช้ ทงคี ั ้ ย์บอร์ ดและเมาส์ควบคู่กัน ตัวอย่างการใช้ งานคีย์บอร์ ด ดังนี ้  การควบคุมคาสัง่ ต่างๆ ในเมนูหลักของมัลติมีเดียด้ วยคีย์ลดั เช่น Ctrl + S ที่ใช้ บนั ทึกข้ อมูล  การเลือกค่าต่างๆ จากลาดับรายการด้ วยการใช้ Arrow Key  การเลือ่ นไปยังข้ อต่างๆ บน Form สาหรับกรอกข้ อมูลในมัลติมเี ดียด้ วยปุ่ ม Tab

28

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

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

29

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

บทที่ 5 การออกแบบองค์ประกอบของมัลติมีเดีย การนาส่วนประกอบต่างๆ ของมัลติมีเดียไม่วา่ จะเป็ นข้ อความ ภาพและกราฟิ ก ภาพเคลือ่ นไหว เสียง และวิดีโอ มาใช้ ใน การนาเสนอบนหน้ าจอ มีแนวทางการออกแบบดังนี ้

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

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

อ่ านได้ ชัดเจน (Font ไม่แพร่หลาย ทาให้ อ่านไม่ได้ )

(Font ทัว่ ไป อ่านได้ ทกุ เครื่ อง) 



ใช้ ตวั อักษรที่มีขนาดเหมาะกับหน้ าจอ โดยไม่ควรเล็กเกินไป ใหญ่เกินไป และใช้ ตวั อักษรที่มีขนาดใหญ่พอต่อการอ่านจอ เลีย่ งตัวหนังสือภาษาอังกฤษที่เขียนด้ วยตัวพิมพ์ใหญ่ทงหมด ั้ ในแต่ละบรรทัดไม่ควรให้ มีคามากจนเกินไป และไม่ควรใช้ ขนาดตัวพิมพ์ที่เล็กจนเกินไป เพราะจะทาให้ ตวั อักษรเบียดกัน และส่งผลให้ ผ้ ใู ช้ ไม่สนใจ The quick brown fox jumps over the lazy dog 

THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG



30

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

ไม่ควรบรรจุข้อความเต็มหน้ าจอ เพราะทาให้ ยากต่อการอ่าน ทาให้ ร้ ูสกึ น่าเบื่อและลดประสิทธิภาพการเรี ยนรู้ลงได้ อาจ ใช้ วิธีวางรูปประกอบไว้ ด้านข้ างของข้ อความ หรื อแบ่งเนื ้อหาออกเป็ นส่วนย่อย การใส่ข้อความในหนึง่ หน้ าจอนัน้ ควรคานึงถึง ความหนาแน่นขององค์ประกอบอื่นๆ บนจอภาพด้ วย ส่วนใหญ่ผ้ ใู ช้ จะชอบจอภาพที่มีความหนาแน่นของข้ อความมาก หรื อ ประมาณ 50 % ของหน้ าจอ เนื่องจากจะมีข้อมูลที่ช่วยให้ มีความเข้ าใจเนื ้อหา และแนวคิดหลักๆ ชัดเจน และต่อเนื่องขึ ้น xoxoxoxoxoxoxoxxo xoxoxoxoxoxoxoxox xoxoxoxoxoxoxo oxoxoxoxoxoxox 

xoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxo oxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxx xoxooxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxo xxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxooxox 

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





หัวเรื่ อง หัวข้ อย่อย รวมทังเนื ้ ้อหาที่มีความสาคัญควรเน้ นให้ เด่นชัดด้ วยการทาให้ มีขนาดใหญ่ ขึ ้น เพราะตัวหนังสือที่มี ขนาดแตกต่างจากตัวหนังสืออื่นย่อมดึงดูดความสนใจ หรื อใช้ ลกั ษณะที่แตกต่างออกไป เช่น ตัวหนา ตัวเอียง การใส่เงา การ ขีดเส้ นใต้ การใช้ สที ี่ตา่ งออกไป การเว้ นช่องว่างปุ่ ม หรื อใช้ เครื่ องหมาย ลูกศร สัญลักษณ์ เป็ นต้ น ข้ อความหรือตัวอักษร (Text) 1. ข้ อความที่ได้ จากการพิมพ์ เป็ นข้ อความปกติที่พบได้ ทวั่ ไป 2. ข้ อความจากการสแกน เป็ นข้ อความในลักษณะภาพ 3. ข้ อความอิเล็กทรอนิกส์ เป็ นข้ อความที่พฒ ั นาให้ อยูใ่ นรูปสื่อ

ข้ อความหรือตัวอักษร (Text) ได้ แก่ 1.ข้ อความที่ได้ จากการพิมพ์ เป็ นข้ อความปกติที่พบได้ ทวั่ ไป 2.ข้ อความจากการสแกน เป็ นข้ อความในลักษณะภาพ 3.ข้ อความอิเล็กทรอนิกส์ เป็ นข้ อความที่พฒ ั นาให้ อยูใ่ นรูปสื่อ





การจัดตาแหน่งของตัวอักษรในแต่ละส่วนมีผลต่อความรู้สกึ ของเอกสาร โดยที่การจัดตาแหน่งแต่ละแบบให้ ความรู้สกึ ที่ ต่างกัน ดังนี ้

31

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

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

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

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

อักษร อักษร อักษร อักษร อักษร อักษร

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

อักษร อักษร การใช้ สีตัวอักษร

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

32

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

2. การใช้ เสียง การใช้ เสีย งไม่ ว่า จะเป็ นเสีย งพู ด บรรยาย เสี ย งดนตรี และเสี ย งประกอบ (Sound Effect) ช่ ว ยในการน าเสนอ มัลติ มี เดี ย ให้ น่า สนใจ เช่ น เสีย งพูด เพื่ อ เสริ ม การช่ วยเหลือ หรื อ ให้ ค าแนะน า เสีย งดนตรี ช่ ว ยเพิ่ ม ความเร้ าใจและ บรรยากาศในการนาเสนอเนื ้อหา เสียงประกอบฉากช่วยกระตุ้นให้ ผ้ ใู ช้ เกิดจินตนาการ เป็ นต้ น การใช้ เสี ยงก็เช่นเดียวกับ การใช้ ข้อความและภาพ ที่จะต้ องมีการเลือกใช้ ให้ เหมาะสมกับเวลาและโอกาส บางทีการไม่มีเสียงอาจมีความเหมาะสม กว่าการใช้ เสียง การนาเสนองานมัลติมีเดียด้ วยเสียง มีหลักการดังนี ้ นอกจากมีวตั ถุประสงค์เฉพาะ เช่น การสอนการอ่านสาหรับเด็กเล็กด้ วยข้ อความสันๆ ้ เพราะผู้ใช้ แต่ละคนมีพฤติกรรมใน การอ่านไม่เหมือนกัน ความเร็วในการอ่านแตกต่างกัน การปรับอัตราการอ่านของตนเองให้ พอดีกบั เสียงบรรยายจึงกลายเป็ น ตัวกวน (Noise) ในการับรู้ หากจาเป็ นต้ องมีข้อความเพื่ออธิบายบนจอภาพ ผู้ออกแบบควรกาหนดปุ่ มควบคุมเสียง เพื่อให้ ผ้ ใู ช้ สามารถควบคุมระดับ ความดังของเสียง รวมทังเลื ้ อกได้ วา่ ต้ องการ ฟั งซ ้า หรื อ ตามความสนใจและความถนัดของผู้ใช้ ความยาวของเสียงควรสอดคล้ องกับระยะเวลาการแสดงภาพ ไม่วา่ จะเป็ นเสียงพูด เสียงบรรยาย หรื อเสียงดนตรี ต้ องชัดเจน มีคณ ุ ภาพ ถูกต้ อง และเหมาะสม โดยเฉพาะเสียงของ ผู้บรรยายควรมีน ้าเสียงแจ่มใส มีโทนเสียงที่เหมาะสมกับเนื ้อเรื่ อง เช่น เมื่อถึงเรื่ องตื่นเต้ น ก็ใช้ เสียงเร็ วขึ ้น หรื อเมื่อเนื ้อหา ต้ องการสร้ างอารมณ์ควรทอดเสียงให้ เข้ ากับเนื ้อหานันด้ ้ วย เพราะจะรบกวนการเรียนรู้เนื ้อหาของผู้ใช้ โดยเฉพาะผู้ใช้ ที่ต้องอ่านเนื ้อหาจากหน้ าจอ เพราะหากการบันทึกมีความดังค่อย ไม่เหมาะสม การควบคุมความดังของเสียงหนึง่ จะส่งผลกระทบต่ออีกเสียงหนึง่

33

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

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

34

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

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

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

5. การใช้ ภาพเคลื่อนไหว เป็ นการนาภาพนิ่งหรื อภาพกราฟิ กมาแสดงต่อเนื่องกันให้ เกิดลักษณะการเคลือ่ นไหว ซึง่ มีทงแบบ ั้ 2 มิติ และ 3 มิติ การ นาเสนองานมัลติมเี ดียด้ วยภาพเคลือ่ นไหว มีหลักการดังนี ้ แต่ก็ไม่ควรใช้ ภาพเคลือ่ นไหวมากจนเกินความจาเป็ น ควรคานึงถึงเหตุผลและความเหมาะสม การที่ต้องอ่านอะไรในสภาพที่มีสงิ่ เคลือ่ นไหวไปมาโดยรอบจะทาให้ ร้ ูสกึ ราคาญ อาจทาให้ เสียสมาธิในการอ่านข้ อความ เช่น การนาภาพนิ่งมาแสดงในลักษณะ Pan Left / Pan Right / Tilt Up / Tilt Down / Zoom in / Zoom Out เป็ นต้ น ซึง่ จะทาให้ การนาเสนอภาพมีความน่าสนใจขึ ้น แต่ไม่ควรมีมากเกินไป เพราะจะทาให้ ลายตา

35

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

บทที่ 6 กระบวนการสร้างและการนาเสนองานมัลติมีเดีย 1. การเตรี ยมเนือ้ หา คือการจัดโครงสร้ างเนื อ้ หาให้ เป็ นระบบ แบ่งเนื อ้ หาออกเป็ นหมวดหมู่อย่างชัด เจน และในภาพรวมต้ อ งมีความเป็ น เอกภาพ (Unity) คาว่าเอกภาพ หมายถึง เนื ้อหาทังหมดต้ ้ องมีความเป็ นอันหนึง่ อันเดียวกัน มีความต่อเนื่องที่จะไปสูเ่ ป้าหมาย เดียวกัน นอกจากนี ้ยังต้ องพิจารณาแบ่งน ้าหนักเนื ้อหาแต่ละส่วนให้ มีปริ มาณที่ใกล้ เคียงกัน การวางโครงสร้ างเนื ้อหาที่ดี จะทา ให้ ง่ายต่อการนาเสนอ และยังช่วยให้ ผ้ ใู ช้ งานมองเห็นภาพรวมของเนื ้อหาได้ ดียิ่งขึ ้น เนื ้อหาในงานมัลติมีเดีย ควรเป็ นการนาเสนอที่สนั ้ กระชับ ได้ ใจความ เน้ นเฉพาะประเด็นที่สาคัญ เนื่องจากข้ อจากัดใน เรื่ องของพื ้นที่การแสดงผล ทาให้ ไม่สามารถแสดงรายละเอียดได้ มาก ดังนัน้ เนื ้อหาส่วนใดหากไม่มีความจาเป็ น ควรจะตัดทิ ้ง หรื ออาจจัดทาเป็ นส่วนข้ อมูลหรื อเอกสารเพิ่มเติม โดยพิจารณาจากกลุม่ เป้าหมาย โดยเฉพาะ ระดับการศึกษา หากเป็ นเด็กเล็กภาษาที่ใช้ ต้องอ่านง่าย ใช้ คากิริยาที่แสดง การกระทาที่ค้ ุนเคย และควรใช้ ให้ ถูกต้ องตามหลักไวยากรณ์ หลีกเลี่ยงการใช้ คายากๆ หรื อศัพท์ เฉพาะสาขาอาชีพ เช่น คาศัพท์วิทยาศาสตร์ หรื อเชิงเทคนิคมากเกินไป เพราะจะทาให้ ผ้ ใู ช้ ไม่เข้ าใจ แต่หากจาเป็ นต้ องใช้ อาจใช้ สญ ั ลักษณ์ หรื อการ อุปมาอุปไมยช่วย เพื่อให้ เข้ าใจได้ ง่ายขึ ้น

36

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

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

สารสนเทศ หมายถึง ข้ อมูล ข่าวสาร ความรู้ รูปแบบต่างๆ ข้ อท็จจริ ง ที่ได้ มาจากการบันทึก ประมวลหรื อดาเนินการด้ วยวิธีใดๆ และสามารถนาไปใช้ ประโยชน์และเผยแพร่ได้ และมีคาทีเ่ กี่ยวข้ องกับสารสนเทศ ดังต่อไปนี ้  ข้ อมูล (Data) หมายถึง ข้ อเท็จจริ ง หรื อสิง่ ที่ถือหรื อยอมรับว่าเป็ นความจริ ง ใช้ สาหรับเป็ นหลักอนุมานหา ความจริงหรื อการคานวณ หรื ออาจเป็ นลักษณะของข้ อมูลดิบ เช่น สิง่ ที่ได้ จากการสังเกต ปรากฏการณ์ การ กระทา หรื อสัญลักษณ์ตา่ งๆของวัตถุ สิง่ ของ คน สัตว์ พืช แล้ วบันทึกไว้ เป็ นตัวเลข ตัวอักษร สัญลักษณ์ ภาพ เสียง หรื อการบรรยาย บอกเล่า  ข่ าว ข่ าวสาร (News, Information) ข่าว หมายถึง คาบอกเล่าเรื่องราว คาบอกกล่าว คาเล่าลือ ส่วนข่าวสาร หมายถึง ข้ อความที่สง่ มาให้ ร้ ูเรื่ องกัน บอกความเคลื่อนไหวทีเ่ กิดขึ ้นในสังคม เช่น เป็ นเนื ้อหาจาก หนังสือพิมพ์ วิทยุกระจายเสียง วิทยุโทรทัศน์ วารสารทางวิชาการ ที่มกี ารเผยแพร่ให้ ร้ ูกนั โดยทัว่ สือ่ ให้ ผ้ อู ื่น ทราบด้ วยตัวมัน เอง หรื อผ่านกระบวนการ วิธีการใดๆ ที่ทาให้ สงิ่ ที่บนั ทึกไว้ ปรากฎได้  ความรู้ (Knowledge) เป็ นสารสนเทศที่ได้ จากพฤติกรรมการมีสว่ นร่วมและเกิดการรับรู้ เรี ยนรู้ในสิง่ ต่างๆ ที่ เกิดจากการอ่าน ทบทวน ฟั ง การประเมิน วิเคราะห์ กรั่นกรองข้ อมูล ตามประสบการณ์ของแต่ละบุคคลที่ นามาใช้ ในการแก้ ปัญหาหรื อสร้ างความรู้ใหม่

37

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

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

38

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

4. กระบวนการสร้ างงานมัลติมีเดีย ในการออกแบบมัลติมีเดีย ขัน้ ตอนในการวางแผนนับ ว่าเป็ นขันตอนที ้ ่ สาคัญ มาก เพราะหากวิเคราะห์ ปัจจัย ที่ เกี่ ย วข้ อ งไม่ สมบูรณ์ ไม่ชัด เจน ก็ จ ะส่ง ผลให้ งานมัลติ มี เดี ย ไม่ มี ป ระสิท ธิ ภาพในการน าไปงาน ขัน้ ตอนในการวางแผน ประกอบด้ วย  กาหนดเป้าหมาย ต้ องกาหนดให้ ชดั เจนว่ากลุม่ เป้าหมายคือใคร ต้ องการให้ กลุม่ เป้าหมายเหล่านันรั ้ บรู้อะไร  วิเคราะห์ ปัจจัยที่เกี่ยวข้ อง o กลุ่มเป้าหมายและความต้ องการของผู้ใช้ ไม่วา่ จะเป็ นอายุ เพศ การศึกษา ความรู้ พื ้นฐาน ฐานะ อาชีพ ศาสนา ค่านิยม ทัศนคติ ตลอดจนรู ปแบบพฤติกรรมต่างๆ เพราะจะเป็ นข้ อมูลสาคัญในการ ออกแบบมัลติมีเดีย o เนื อ้ หา เป็ นการวิเคราะห์เพื่อกาหนดขอบข่ายของเนื ้อหา ประกอบด้ วยหัวข้ อใดบ้ าง จาเป็ นต้ อง นาเสนอหรื อไม่จาเป็ น จากนันน ้ ามาจัดลาดับ แบ่งหมวดหมู่ ให้ มีความสัมพันธ์ที่ชดั เจน ซึง่ ขันตอนนี ้ ้ ต้ อ งใช้ ความรอบคอบและต้ อ งใช้ ข้ อ มูล จากแหล่งต่า งๆ เข้ า ช่ ว ย รวมทัง้ ต้ อ งอาศั ย ผู้เชี่ ย วชาญ ตรวจสอบความสมบูรณ์ของเนื ้อหาที่ได้ จากการวิเคราะห์ด้วย o ทรั พยากรที่เกี่ยวข้ อง เป็ นการวิเคราะห์ทรัพยากรทังหมดที ้ ่จะต้ องใช้ ในการพัฒนางานมัลติมีเดีย ทังด้ ้ านข้ อมูล บุคลากร ฮาร์ ดแวร์ ซอฟท์แวร์ รวมทังงบประมาณ ้

ขันตอนการออกแบบนี ้ ้เปรี ยบเสมือนการร่ างพิมพ์เขียวสาหรับสร้ างบ้ าน เพื่อเป็ นต้ นแบบให้ ฝ่ายโปรแกรมนาไปผลิต ตามแบบที่กาหนด ขันตอนการออกแบบประกอบด้ ้ วย  วางโครงสร้ างของงานมัลติมีเดีย เป็ นการกาหนดความสัมพันธ์ ของส่วนประกอบต่างๆ คร่ าวๆ เพื่อแสดงให้ เห็นภาพรวมของงาน และกาหนดเส้ นทางการเข้ าสู่ หน้ าเนื ้อหาต่างๆ ให้ เหมาะสม  เขียนผังการทางาน (Flow Chart) ผังการทางาน หมายถึง แผนภูมิที่แสดงความสัมพันธ์ของเนื ้อหาแต่ละส่วน ตังแต่ ้ ต้นจนจบ ซึ่งละเอียดขึ ้นกว่าดูจากโครงสร้ าง ซึง่ ความละเอียดของการเขียนผังงาน ขึ ้นอยูก่ บั ความซับซ้ อนของเนื ้อหาและการทางานของโปรแกรม ยิ่งผังงานมีความละเอียด มากเท่าไหร่ก็จะง่ายต่อผู้นาผังงานไปใช้ งานต่อ เช่น ผู้เขียนสตอรี บอร์ ด หรื อโปรแกรมเมอร์

39

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

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

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

40

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

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

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

41

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

5. รู ปแบบการนาเสนองานมัลติมีเดีย การออกแบบการนาเสนอมัลติมีเดียไปใช้ ในงานต่าง ๆ ต้ องพิจารณาตามวัตถุประสงค์ของงานนันว่ ้ า ต้ องการเสนอให้ ข้ อมูลในรู ปแบบใด มีการจัดการภาพและเสียงให้ กลมกลืน มีความสมบูรณ์ในเนื ้อหาและเทคนิคการนาเสนอ การออกแบบให้ ผู้ใช้ เข้ าสู่มลั ติมีเดียจึงเป็ นศิลปะอีกด้ านหนึ่งที่ผ้ อู อกแบบต้ องออกแบบให้ มีความสะดวก ให้ มลั ติมีเดียน่าสนใจ ผู้ใช้ ค้นคว้ า อย่างสนุกสนาน รู ปแบบการนาเสนอที่นิยม กรี น(Green. 1993) ได้ เสนอรูปแบบการนาเสนอมัลติมีเดียที่นิยมใช้ กนั มาก 5 วิธี ดังนี ้ มีลกั ษณะคล้ ายกับหนังสือ ซึง่ มีโครงสร้ างแบบเส้ นตรง โดยเริ่ มจากหน้ าแรกต่อไปเรื่ อย ๆ ถ้ าไม่เข้ าใจก็สามารถเปิ ดย้ อนกลับ ไปดูได้ การเสนอผลงานแบบนี ้ มักจะอยู่ในรู ปไฮเปอร์ เท็กซ์ ซึ่งใช้ ข้อความเป็ นหลักในการดาเนินเรื่ องด้ วยรูปภาพ วิดีโอ หรื อ แอนิ เมชันสามารถท างานได้ โดยใส่ไปในรู ปเส้ นตรง รวมทัง้ การใส่เสียงเพื่อเพิ่มความสนใจอาจเรี ยกว่าเป็ น Electronics Stories หรื อ ไฮเปอร์ มีเดีย ซึง่ เหมาะสมกับตลาดผู้บริ โภค

ภาพ 16 การนาเสนอแบบเส้ นตรง

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

ภาพ 17 การนาเสนอรู ปแบบอิ สระ

42

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

เป็ นรูปแบบนาเสนอมัลติมีเดีย แบบวงกลม แบบเส้ นตรงชุดเล็ก ๆ หลายชุดมาเชื่อมต่อกันกลับคืนสูเ่ มนูใหญ่

ภาพ 18 การนาเสนอรู ปแบบวงกลม

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

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

43

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

บทที่ 7 การออกแบบอินเตอร์เฟส 1. หลักการออกแบบพืน้ ฐาน ในการออกแบบหน้ าจอสาหรับมัลติมีเดีย ผู้ออกแบบควรจะเข้ าใจหลักพื ้นฐานของการออกแบบก่อน หลักการออกแบบพื ้นฐาน 4 ประการประกอบด้ วย 1) ความเรี ยบง่าย 2) ความสม่าเสมอ 3) ความชัดเจนในประเด็นนาเสนอ และ 4) ความสวยงามน่าดู

ความเรี ยบง่ายไม่ได้ หมายความว่าให้ ทางานมัลติมีเดียให้ ออกมาง่ายๆ หรื อธรรมดาจนเกินไป มิฉะนันก็ ้ ไม่ตา่ งอะไรไปจากการ อ่านหนังสือ แต่ต้องออกแบบให้ เหมาะสมกับคุณลักษณะของมัลติมีเดีย ซึง่ ผสมผสานข้ อความ ภาพ เสียงอย่างลงตัว สามารถ เข้ าใจได้ ง่าย สิ่งสาคัญคือต้ องพยายามไม่ใส่สิ่งต่างๆ ให้ มากเกินไป เช่น รูปภาพที่มากเกินไป สีที่ฉดู ฉาดเกินไป หรื อการใช้ รูป ประโยคที่ยาวเกินไป ซึ่งอาจทาให้ ผ้ ใู ช้ ไม่เข้ าใจเนื ้อหาหรื อสื่อสารไม่ตรงกับความต้ องการ ความเรี ยบง่ายเกี่ยวข้ องกับปั จจัย หลายประการ คือ ปริ มาณของข้ อมูล จานวนของชิ ้นงาน ขนาดของชิ ้นงาน รูปแบบการปรากฎ และจานวนสี  ปริมาณของข้ อมูล ไม่ควรมีปริ มาณของข้ อความ ภาพกราฟิ ก ภาพเคลือ่ นไหว เสียง และองค์ประกอบอื่นๆ ที่ปรากฎบนหน้ าจอมากหรื อน้ อย จนเกินไป ควรจัดให้ มีพื ้นที่วา่ ง (White Space) ที่พอเหมาะในหน้ าจอ เพื่อให้ ผ้ ใู ช้ ร้ ูสกึ สบายตา  จานวนของชิน้ งาน หากมีภาพ ข้ อความ กราฟิ ก และเสียงมากไป จะทาให้ การจัดเรี ยงการนาเสนอลาบากและสับสน หากชิ ้นงานมีมาก ก็ต้อง มีการจัดวางให้ ดดู ี  ขนาดของชิน้ งาน ไม่ควรมีความหลากหลายมากเกิ นไป เช่น ข้ อความ (Text) ไม่ควรมีการเล่นขนาดมากไป รู ปแบบของตัวพิมพ์ ไม่ควร เปลี่ยนไปเปลี่ยนมา ภาพไม่ควรใช้ ภาพใหญ่เกินความจาเป็ น เพราะนอกจากจะเปลืองหน่วยความจาแล้ ว ยังทาให้ การแสดง ภาพช้ าอีกด้ วย  รูปแบบการปรากฏ การใช้ Effect มากเกินไปจะทาให้ ผ้ ใู ช้ สบั สนได้ ควรพิจารณาถึงความพอดีและความเหมาะสมในการนาเสนอภาพและ ข้ อความ เช่น ไม่ใช้ Effect หลายๆรูปแบบบนจอเดียวกัน หรื อเปลีย่ นไปเปลีย่ นมาจนทาให้ ผ้ ใู ช้ สนใจกับ Effect มากเกินไป  จานวนสี สีที่ปรากฏบนจอภาพไม่ควรจะเกิน 3 สีหลัก สีหลักที่ปรากฏบนจอภาพ คือ สีพื ้นหลัง (Background) พื ้นหน้ า (Foreground) ซึง่ หมายถึงสีของข้ อความหรื อกราฟิ กประกอบหน้ าจอ การเลือกพื ้นหลัง ผู้ออกแบบควรเลือกสีพื ้นที่ไม่มีลวดลายหรื อความเข้ ม ของสีที่แตกต่างกันจนมากเกินไป

44

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

ความสม่าเสมอเป็ นหลักการสาคัญในการออกแบบสื่อเกือบทุกประเภท มัลติมีเดียที่ใช้ รูปแบบและองค์ประกอบต่างๆ ไปใน ทิศทางเดียวกันตลอด จะทาให้ เกิดความคุ้นเคยหรื อสนองความคาดหวังของผู้ใช้ ความสม่าเสมอแบ่งออกได้ เป็ นหลายประเภท เช่น  ความสม่าเสมอด้ านสีสนั หมายถึง การใช้ สีเดียวกันขององค์ประกอบบนหน้ าจอ เช่น การใช้ ตวั อักษรสีเขียวเข้ มสาหรับหัวข้ อใหญ่ การขีดเส้ นใต้ คา สาคัญ หรื อการกาหนดสีพื ้นหลังเป็ นสีเดียวกันทุกหน้ า  ความสม่าเสมอด้ านขนาดและรูปทรง เช่น ทุกครัง้ ที่แสดงข้ อมูล หัวข้ อจะมีขนาดใหญ่กว่ารายละเอียด หรื อการกาหนดให้ ลกู ศรสีเขียวปรากฎที่ตวั เลือกทุกครัง้ เมื่อผู้ใช้ เลือก เป็ นต้ น  ความสม่าเสมอของรูปแบบการนาเสนอ เช่น การนาเสนอลักษณะปฏิสมั พันธ์ ถ้ าคลิกเมาส์ที่ตวั เลือกจะมีข้อมูลแสดงรายละเอียดเพิ่มเติมบริ เวณด้ านข้ าง หรื ออาจ ใช้ วิธี pop up รายละเอียดขึ ้นมา  ความสม่าเสมอของเสียง เช่น เสียงสูงเมื่อตอบถูกและเสียงต่าเมื่อตอบผิด หรื อใช้ เสียงเดียวตลอด เมื่อมีการคลิกที่ปมเดิ ุ่ นหน้ าหรื อถอยหลังเฟรม เป็ นต้ น  ความสม่าเสมอของการชีแ้ นะ เช่น รูปแบบและตาแหน่งของ Cursor จากรูปแบบปกติเป็ นรูปมือ ทุกครัง้ ที่ผ้ ใู ช้ เลือ่ นเมาส์เข้ าไปในบริ เวณที่กาหนด  ความสม่าเสมอของรูปแบบการใช้ คา/ประโยค เช่น การใช้ คาสรรพนาม (น้ องๆ/คุณ) คาปิ ดท้ ายประโยค(ค่ะ/ครับ) คากิริยา(คลิก/click) ตลอด  ความสม่าเสมอของตาแหน่ งที่ปรากฏ เช่น ตาแหน่งข้ อความ ตาแหน่งของปุ่ ม หรื อผลป้อนกลับที่เป็ นข้ อความจะอยูด่ ้ านล่างของหน้ าจอตลอด  ความสม่าเสมอของเทคนิค เช่น เมื่อคลิกเมาส์ที่ตวั เลือก จะค่อยๆ ปรากฏรายละเอียดขึ ้นมาหรื อ ถ้ าตอบผิด 2 ครัง้ จะมีคาเฉลยขึ ้นมาด้ านล่างหน้ าจอ

45

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

ความชัดเจนในประเด็นนาเสนอเกี่ยวข้ องกับการใช้ คา การเรี ยงร้ อยคาและประโยค ไม่วา่ จะเป็ นข้ อความหรื อเป็ นเสียงบรรยาย การเขียนบท (Script Writing) การใช้ ถ้อยคาต่างๆ ต้ องใช้ ให้ เหมาะสม หากเป็ นเสียงบรรยาย ก็ จะต้ องเน้ นการใช้ เสียงให้ น่าสนใจ น่าฟั ง ใช้ ประโยคที่สนกะทั ั ้ ดรัดและตรงประเด็น

การออกแบบหน้ าจอให้ สวยงามหน้ าดูนนเป็ ั ้ นเรื่ องของการออกแบบงานศิลป์ โดยมีพื ้นฐานจากธรรมชาติการรับรู้ของมนุษย์ซึ่ง เกี่ยวข้ องกับหลักการดังต่อไปนี ้  ความสมดุล (Balance) หมายถึงความรู้ สกึ ที่เท่ากันในการมองเห็นภาพบนเฟรม หรื อหน้ าจอคอมพิวเตอร์ ความรู้ สกึ เท่ากันดังกล่าวนี ้จะมองใน ภาพรวมระหว่างซ้ ายกับขวา บนกับล่าง และใกล้ กับไกล ความสมดุลนี ้อาจเป็ นความรู้ สึกที่เห็นสิ่งต่างๆในภาพไม่เลื่อนออก จากจอ หรื อรู้ สกึ ว่าน ้าหนักซ้ าย-ขวาของจอภาพเท่ากันนัน่ เอง ความสมดุลในแง่การออกแบบจะมี 2 รู ปแบบ คือ สมดุลแบบ ซ้ ายขวาเท่ากัน และความสมดุลแบบความรู้สกึ เท่ากัน o ความสมดุลแบบซ้ ายขวาเท่ ากัน (Formal Balance) หมายถึง ความเท่ากันทุกประการของการจัด วางสิง่ ของนันๆ ้ บนหน้ าจอ o ความสมดุลแบบความรู้ สึกเท่ ากัน (Informal Balance) ความสมดุลดังกล่าวนี ้เกิดจากความรู้สกึ ว่าในภาพรวมแล้ วมีความเท่ากันทังๆที ้ ่วตั ถุหรื อชิ ้นงานต่างๆ บนจอคอมพิ วเตอร์ มีขนาด สีสนั ความ ลึก รูปแบบและตาแหน่งไม่เหมือนกัน แต่เมื่อมองโดยรวมแล้ วรู้สกึ ว่าเท่ากัน  ความกลมกลืน (Harmony) มีการออกแบบจอภาพจานวนมากที่ให้ ความรู้สกึ ขัดแย้ ง ความรู้สึกดังกล่าวนี ้เกิดขึ ้นจากการใช้ ตวั พิมพ์ ใช้ ภาพและเสียงที่ ขัดกัน อาทิ การใช้ รูปแบบหรื อตัวพิมพ์ที่ดขู ดั ตากับภาพที่ไม่เกี่ยวข้ องกับเนื ้อหา การใช้ ภาพที่ไม่เกี่ยวข้ องกับเนื ้อหา การใช้ เสีย ง ประกอบที่ขดั กับความรู้ สกึ การใช้ ค่สู ีที่ ดแู ล้ วไม่สบายตา ฉะนันการเลื ้ อกรู ปแบบตัวพิมพ์ ภาพ เสียง จึงควรพิจารณาเลือกที่ สอดคล้ องกับเนื ้อหาให้ มากที่สดุ

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

46

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

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

 เส้ นทางต่ อเนื่องของการมองภาพ (Visual Flow) โดยปกติตาแหน่งเริ่ มต้ นในการมองภาพหรื ออ่านข้ อความของคนเรา จะเริ่ มจากมุมซ้ ายบนของหน้ าจอ ต่อจากนันจะ ้ ขึ ้นอยู่กับการชี ้นาของภาพหรื อข้ อความ เราอาจมองต่อไปทางขวามือของจุดเริ่ มคือ มองต่อไปในแนวนอน หรื ออาจะมองลง ด้ านล่างของจุดเริ่ มต้ นลงในแนวตัง้ ตาแหน่งที่ดีที่สดุ ก็คือพื ้นที่ด้านซ้ ายบนของหน้ าจอ ส่วนตาแหน่งที่ไม่เหมาะสมในการวาง เนื ้อหาหรื อข้ อความสาคัญก็คือตาแหน่งขวาบนและซ้ ายล่าง ซึง่ เป็ นเป็ นตาแหน่งที่วางเนื ้อหาหรื อข้ อความที่ไม่สาคัญลงไปแทน (Fenrich,2005)

 ตาแหน่ งการแสดงภาพ (Display Visual) เพื่ อให้ เอือ้ ต่อ การเรี ยนรู้ และลดเวลาในการค้ นหาเนือ้ หา ตาแหน่งที่ เหมาะสมในการวางภาพก็ คื อด้ านข้ างข้ อความ โดยทัว่ ไปนิยมวางภาพไว้ ทางซ้ ายของข้ อความเพราะว่าผู้อ่านส่วนใหญ่เริ่ มอ่านเนื ้อหาในจอด้ านซ้ ายดังที่กล่าวมาในข้ อที่แล้ ว การวางต าแหน่งเช่ นี ้ ผู้อ่านจะมองเห็ นและพิ จารณารายละเอี ย ดของรู ปภาพก่ อนที่ จะอ่านข้ อ ความเพื่ อ อธิ บ ายเพิ่ ม เติ ม นอกจากนี ้ยังช่วยลดการเคลื่อนที่ของสายตาผู้อ่าน ส่วนการวางภาพไว้ ในตาแหน่งอื่นไม่ว่าจะเป็ นทางด้ านขวา ด้ านบน หรื อ ด้ านล่างข้ อความก็สามารถจะกระทาได้ แต่อย่างไรก็ตาม ตาแหน่งที่ไม่แนะนาก็คือการวางภาพไว้ ตรงกลางระหว่างข้ อความ (Fenrich,2005)

47

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

2. การออกแบบทัศนศิลป์ ทัศ นศิ ลป์ คือ ศิ ลปะที่ สามารถมองเห็ นความงามจากรู ป ลักษณ์ ซึ่งการออกแบบทัศนศิ ลป์ (Visual Design) คือ การ ออกแบบและตกแต่งให้ ชิน้ งานมีรูปลักษณ์ ที่สวยงาม เพื่อดึงดูดความสนใจของผู้ที่มาพบเห็น โดยนามาใช้ ในการออกแบบ มัลติมีเดีย การออกแบบมัลติมีเดีย นอกจากจะเน้ นเรื่ องการจัดวางและการออกแบบองค์ประกอบต่างๆ เพื่ออานวยความสะดวกในการใช้ งานแล้ ว รูปลักษณ์ของหน้ าจอยังต้ องดูสวยงามและเหมาะสมกับรูปแบบการใช้ งานของงานมัลติมีเดียด้ วย รู ปลักษณ์ ของหน้ าจอเป็ นสิ่งแรกที่ผ้ ใู ช้ สามารถเห็นได้ ทนั ที การออกแบบทัศนศิลป์จึงเป็ นอีกขันตอนที ้ ่จาเป็ นอย่างยิ่งในการ ออกแบบหน้ าจอ โดยสามารถอาศัยปั จจัยต่างๆ ได้ ดงั นี ้       

สี ตัวอักษร พื ้นที่ องศาและความโค้ ง พื ้นผิว รูปภาพ วัฒนธรรมและสิง่ แวดล้ อมของผู้ใช้

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

ภาพ 19 วรรณะสี

48

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

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

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

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

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

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

รูปแบบของตัวอักษร แบบ Serif

การนาไปใช้ ในงานออกแบบ จะดูเป็ นระเบียบ เป็ นทางการ เหมาะจะใช้ ในงานที่เป็ น ทางการ และต้ องการความน่าเชื่อถือมากๆ

แบบ San Serif

จะอ่านง่าย ดูทนั สมัยมากกว่าแบบอื่นๆ เหมาะจะใช้ งานที่ ต้ องการความทันสมัย ไม่เป็ นทางการมากนัก

แบบ Antique

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

แบบ Script

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

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

50

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

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

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

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

51

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

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

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

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

52

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

บทที่ 8 แนวทางการออกแบบที่ดี : Material Design (ที่มา https://www.blognone.com/node/57820)

เป็ น "ปรัชญา" หรื อ "แนวทาง" การออกแบบ UI กูเกิลเรี ยก Material Design ว่าเป็ น "ภาษาของการออกแบบ" หรื อ Visual Language ที่รวบรวม "หลักการออกแบบที่ดี" ไว้ ด้วยกัน ทาให้ ร้ ูสกึ เป็ นเอกสารที่มีชีวิต โดยใช้ เป็ นแนวทางการออกแบบ ชุดเดียวที่ใช้ ได้ ข้ามอุปกรณ์ รองรับการป้อนข้ อมูลหลายแบบ เช่น จอสัมผัส การสัง่ งานด้ วยเสียง เมาส์และคีย์บอร์ ด เป็ นต้ น

ภาพ 20 MATERIAL DESIGN ที่มา HTTP :// WWW .GOOGLE .COM / DESIGN /SPEC/MATERIAL- DESIGN /INTRODUCTION .HTML

หลักการออกแบบ (design principle) ของ Material Design มีด้วยกัน 3 ข้ อ  เปรียบอินเตอร์ เฟสเป็ นวัสดุประเภทกระดาษ ใช้ หลักการเลียนแบบ "วัสดุ" (material) ในโลกความเป็ นจริ ง เน้ น การใช้ พื ้นผิว (surface) และขอบ (edge) ใช้ แสงเงา-ภาพเคลื่อนไหวเหมือนกับแสงเงา-การเคลื่อนไหวของวัตถุเชิง กายภาพ เน้ นทาให้ ผ้ ใู ช้ เข้ าใจการทางานของแอพลิเคชัน่ ด้ วยความง่ายดายและรวดเร็ ว  ใช้ หลักการออกแบบเหมือนการการออกแบบสื่อสิ่งพิมพ์ เป็ นการออกแบบที่ "ตังใจน ้ าเสนอ" (intentional) ใช้ วิธีการนาเสนอแบบเดียวกับสิง่ พิมพ์กระดาษ เช่น ฟอนต์ ที่วา่ ง สีสนั ภาพประกอบ เพื่อให้ สนองกับประสบการณ์ของ ผู้ใช้  การเคลื่อนไหวที่ส่ อื ความหมาย การแสดงการเคลือ่ นไหว (motion) เพื่อบอกความหมาย (meaning) ของการ กระทา ทาให้ ผ้ ใู ช้ มีจดุ สนใจที่ชดั เจน สร้ างความต่อเนื่องในการรับรู้ และรู้สกึ ได้ ถึงการตอบสนองของแอพลิเคชัน

53

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

1. วัสดุ = กระดาษและหมึก วัต ถุพื น้ ฐานของ Material Design คือ "กระดาษและหมึ ก" ที่ ลอกแบบมาจากสิ่งพิ ม พ์ ตัว "แผ่น งาน" ในระบบของ Material Design จึงเป็ นเหมือนกระดาษขาว ที่วตั ถุหรื อข้ อความมาวางไว้ บนนันได้ ้ ความน่าสนใจอยู่ที่ "กระดาษ" ของ Material Design สามารถนามาวางต่อกันได้ ในระนาบเดียวกัน ซึ่งจะเกิด "รอยต่อ" (seam) ให้ ค วามรู้ สึก ต่อเนื่ องกัน ในอีก ทางหนึ่ง ถ้ าเอากระดาษมาวางทับ กัน จะเกิ ด "ขัน้ " (step) ที่ มี ระดับ ของความลึก แตกต่างกัน เกิดความเป็ นเลเยอร์ ที่กระดาษสองแผ่นมีความหนาไม่เท่ากัน เมื่อนาแนวคิดของ seam กับ step มาทาเป็ น UI ก็ จะได้ ออกมา

ภาพ 21 S EAM AND STEP ที่มา HTTP :// WWW .GOOGLE .COM / DESIGN /SPEC/LAYOUT/PRINCIPLES .HTML #PRINCIPLES -PAPER - CRAFT

2. ระดับของความลึก Material Design ยังให้ ความสาคัญกับระดับของความลึก (z-index, z-depth หรื อ z-space) ที่จะแสดงระดับความเข้ ม ของเงาแตกต่ า งกั น การวางวัต ถุ ต่ า งๆ บนหน้ าจอจึ ง มี แนวคิดของ "เลเยอร์ " เข้ ามา

ภาพ 22 Z - DEPTH

54

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design) ที่มาHTTPS ://WWW .FLICKR .COM /PHOTOS /ISRIYA /14331346598

ภาพ 23 LAYERS ที่มา HTTP :// WWW .GOOGLE .COM / DESIGN /SPEC/LAYOUT/METRICS-KEYLINES .HTML

3. เรขาคณิต กริด และสัดส่ วน Matías Duarte หั ว หน้ าที ม ออก แบบของ Android อธิ บายว่ า Material Design ผสมผสานทังความเป็ ้ นเหตุเป็ นผล มีตรรกะ (rational) กับความเป็ นธรรมชาติ (natural) เข้ ามาด้ วยกัน เพื่ อให้ ผ้ ูใช้ งานไม่ต้อ ง เปลื อ งแรงสมองในการคิ ด ว่ า จะท าอะไร เนื่ อ งจาก UI ออกแบบมา สอดคล้ องกับวิธีคิดของมนุษย์อยูแ่ ล้ ว

ในส่ ว นของความเป็ น Rational เราจึ ง เห็ น Material Design เน้ น รู ป ร่ า งเรขาคณิ ต เช่ น สี่ เ หลี่ ย ม วงกลม สามเหลี่ ย ม เข้ ามา มาก

55

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

แต่ จ ริ งๆ แล้ วเบื อ้ งหลังของ Material Design ค่อ นข้ างให้ ความสาคัญ มากในแง่สดั ส่วน ตังแต่ ้ การใช้ ระบบกริ ดเพื่ อ กาหนดขนาดของวัตถุ Material Design จะใช้ ตวั คูณ 8 พิก เซลเสมอ เช่น 8, 16, 32 การวางวัตถุใน UI จึงต้ องยึดตาม เกณฑ์ นี ต้ ลอด ตัว อย่ า งภาพข้ า งล่า งจะก าหนดที่ ว่า งใน แนวตัง้ (vertical space) ที่เป็ นสัดส่วนกัน    

24dp 56dp 48dp 72dp

ภาพ 24 R ATIO ที่มา HTTP :// WWW .GOOGLE . COM /DESIGN /SPEC/LAYOUT/METRICS -KEYLINES .HTML #METRICS-KEYLINES -KEYLINES -SPACING

4. สีสัน Material Design กาหนด palette สีพืน้ ฐานมาให้ จานวนหนึ่ง ส่วนธี มสีพืน้ หลักมีให้ เลือก 2 แบบคือขาวและดา กูเกิ ล แนะนาให้ เราเลือกใช้ สหี ลักเพียง 3 สี และเลือกสีเน้ น (accent color) ได้ อีกหนึง่ สีสหี ลักใช้ สาหรับแสดงพื ้นที่หลักของแอพ (เช่น ไตเติล) ใช้ ระดับความเข้ ม 500 ส่วนไตเติลบาร์ ด้านบนใช้ ระดับความเข้ มมากกว่าคือ 700 ในการทาแอพจริ ง Material Design ยังมีเครื่ องมือช่วยทา dynamic coloring หรื อการดึงสีจากภาพประกอบในหน้ าจอนันๆ ้ มาเป็ นคู่สีสาหรับส่วนอื่นๆ ของแอ พได้ อย่างอัตโนมัติ

ภาพ 25 COLOR ที่ มา HTTP ://WWW . GOOGLE . COM/ DESIGN/ SPEC /STYLE / COLOR . H TML # COLOR- UI - COLOR-APPLICATION

56

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

5. ฟอนต์ กูเกิลประกาศชัดเจนว่าใช้ ฟอนต์ Roboto เพียงฟอนต์เดียวเพื่อความสม่าเสมอ แต่เป็ น Roboto เวอร์ ชนั ปรับปรุงใหม่ให้ เหมาะกับการแสดงผลบนหน้ าจอทุกแบบ Material Design เป็ นแนวทางการออกแบบที่มีลาดับชัน้ (hierarchy) การใช้ ฟอนต์ ตัวเล็กใหญ่ มีผลกับการแสดงระดับความสาคัญหรื อน ้าหนักของวัตถุนนๆ ั้

ภาพ 26 R OBOTO FONT ที่มา HTTP :// WWW .GOOGLE .COM / DESIGN /SPEC/STYLE /TYPOGRAPHY .HTML #TYPOGRAPHY -ROBOTO- NOTO

6. ไอคอน ไอคอนของ Material Design ออกแบบตามหลักเรขาคณิต ไอคอนของระบบใช้ สเี ดียว เน้ นรูปร่างของไอคอนที่แตกต่างกันให้ แยกแยะได้ ง่าย เส้ นขอบตรงแต่มมุ มน

ภาพ 27 icon ที่มา HTTP :// WWW .GOOGLE .COM / DESIGN /SPEC/STYLE /ICONS.HTML #ICONS- SYSTEM -ICONS

57

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

7. ปุ่ ม จุดเด่นอีกอย่างของ Material Design คือการแสดงแอนิเมชัน เมื่อผู้ใช้ แตะหน้ าจอ ซึ่งถื อเป็ นการบอกให้ ผ้ ูใช้ ร้ ู ว่าแอพ "ตอบสนอง" การกระทาของผู้ใช้ แล้ ว ดังนันปุ่ ้ มที่ถกู กดก็จะแสดงแอนิเมชันให้ เห็นด้ วย ปุ่ มในระบบการออกแบบของ Material Design มีทงหมด ั้ 3 แบบ  Floating action button เป็ น ของใหม่ ที่ เ พิ่ ม เข้ าม า กู เ กิ ลใช้ หลั ก intentional design คือตังใจหยิ ้ บคาสัง่ (action) ที่สาคัญที่สดุ ของแอพนามาเสนอ ให้ เห็นชัดๆ โดยใช้ วงกลมเป็ นสัญลักษณ์ ตัวอย่างในภาพแรกสุดคือปุ่ มรถยนต์สี เขียวในแอพแผนที่ ปุ่ ม floating ควรใช้ สาหรับแอพที่มีการกระทาในเชิงบวกหรื อ สร้ างสรรค์ (เช่น เพิ่มรายการใหม่) เท่านัน้ ถ้ าแอพไม่มีหน้ าที่ลกั ษณะนี ้ ก็ไม่ต้องใส่ เข้ ามาให้ เกะกะ นอกจากนี ้ ควรใช้ สพี ื ้น และอยู่ในตาแหน่งที่ไม่เกะกะ UI หลัก ไม่ ควรทาเอฟเฟคต์ให้ ปมดู ุ่ มีมิติเป็ นพิเศษ

 Raised button ปุ่ มทั่ว ไปที่ แ สดงความสูงที่ ถูก ยกขึน้ (raised) ให้ เห็ น เด่น ชัด กว่าปกติ ตัวอย่า งปุ่ ม Uninstall การใช้ ปุ่ ม raised/flat ก็ มี คุณ ลัก ษณะ แตกต่างกันไปตามบริ บทของงาน

 Flat button ปุ่ มธรรมดาที่แสดงเฉพาะข้ อความ แต่แบนราบไปกับพื ้นผิว ตัวอย่างคือปุ่ ม ACCEPT/DECLINE

58

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

ภาพ 28 B UTTON ที่มา HTTP :// WWW .GOOGLE .COM / DESIGN /SPEC/COMPONENTS /BUTTONS .HTML #BUTTONS- USAGE

8. การใช้ ภาพ Material Design ด าเนิ น รอยตามแนวทางออกแบบ magazine UI ของ Android 4.x ที่ เ น้ นความโดดเด่ น ของ ภาพประกอบเหมื อ นนิ ต ยสาร ดังนัน้ Material Design จึ ง แนะน าให้ ใช้ ภาพประกอบเป็ นหัวเรื่ อง แต่ก็บ อกว่า ควรใช้ ภาพถ่ า ย (photograph) มากกว่ า ภาพกราฟิ ก เพื่ อ ให้ ดู สมจริ งมากกว่า ภาพ 29 IMAGERY ที่มา HTTP :// WWW .GOOGLE .COM / DESIGN /SPEC/STYLE /IMAGERY .HTML #IMAGERY -PRINCIPLES

9. ภาพเคลื่อนไหวและแอนิเมชัน เนื ้อหาส่วนที่แสดงเป็ นภาพนิ่งได้ ยาก สามารถใช้ วิธีฝังวิดีโอจากเว็บไซต์กูเกิลแทน เพื่อจะได้ เห็นภาพมากกว่า และยัง สามารถใช้ การใช้ แอนิเมชันแสดงการเคลือ่ นไหว (motion) ที่มีความหมาย (meaning) เช่น กดปุ่ มแล้ วขยายมาเป็ นเนื ้อหา

59

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

10. การวางโครงสร้ างของ UI มี App Bar อยูด่ ้ านบนเป็ นหลัก, มี Bottom Bar อยูด่ ้ านล่างถ้ าจาเป็ น และมีแถบนาทางด้ านซ้ าย-ขวา (Left/Right Nav) ถ้ าจาเป็ น (สังเกตว่าฐานะของ Left/Right ไม่เท่ากัน)

ภาพ 30 M OBILE S TRUCTURE ที่มา HTTP :// WWW .GOOGLE .COM / DESIGN /SPEC/LAYOUT/STRUCTURE .HTML #STRUCTURE - UI-REGIONS- GUIDANCE

คล้ ายกับมือถือ แต่สามารถนาปุ่ มบางส่วนจาก Bottom Bar ไปใส่ไว้ ใน App Bar ด้ านบนได้ ด้วย (ถ้ ายังไม่ครบค่อยเพิ่ม Bottom Bar อีกที) ส่วน Left/Right Nav สามารถเลือกได้ วา่ จะซ่อนหรื อแสดงผลตลอดเวลา

ภาพ 31 TABLET STRUCTURE ที่มา HTTP :// WWW .GOOGLE .COM / DESIGN /SPEC/LAYOUT/STRUCTURE .HTML #STRUCTURE - UI-REGIONS- GUIDANCE

60

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

เนื่องจากมีเนื ้อที่มากขึ ้น ก็จะแสดง Left/Right Nav ตลอดเวลา และสามารถมีทลู บาร์ ยอ่ ยเพิ่มเข้ ามาได้ ด้วย

ภาพ 32 D ESKTOPS TRUCTURE ที่ มา HTTP:// WWW. GOOGLE . COM/ DESIGN /SPEC/LAYOUT/ STRUCTURE. HTML#STRUCTURE- UI -REGIONS- GUIDANCE

61

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

บทที่ 9 ระบบมัลติมีเดียและการออกแบบการกระทา/คาสั่ง 1. ระบบมัลติมีเดีย

การนาเข้ า (Input) หมายถึง การนาเข้ าข้ อมูลทังที ้ ่อยู่ในรู ปแบบของข้ อความหรื อตัวอักษร (Text) ภาพนิ่ง (Still Image) ภาพเคลื่อนไหว (Animation) เสียง (Sound) และวิดีโอ (Video) ผ่านทางอุปกรณ์ ต่อพ่วงที่ทาหน้ าที่นาสัญญาณเข้ าแล้ วส่ง ต่อ ไปยังเครื่ องคอมพิ วเตอร์ เพื่ อ จัด การกับ ข้ อ มูลในรู ป แบบสัญ ญาณดิ จิทัลต่อ ไป (Digital Camera) ก็ สามารถเข้ าสู่การ ประมวลผลได้ ในทันที ในขณะที่อปุ กรณ์นาเข้ าแบบอนาล็อก เช่น กล้ องวิดีโอ (Video Camera) และเครื่ องเล่นออดิโอ (Audio Player) จะต้ องมีอปุ กรณ์ต่อพ่วงที่เรี ยกว่า วิดีโอแคปเชอร์ (Video Capture) และซาวนด์การ์ ด (Sound Card) ตามลาดับเพื่อ ทาการแปลงสัญญาณอนาล็อกให้ ไปเป็ นสัญ ญาณดิจิทัลก่อนที่จะเข้ าสู่ขนตอนการประมวลผล ั้ เช่นเดียวกับเครื่ องโมเด็ม (Modem) ซึ่งเป็ นอุปกรณ์ นาเข้ าเหมือนกันแต่สามารถแปลงสัญญาณได้ ทงั ้ แบบสัญญาณอนาล็อกและสัญญาณดิจิทลั ใน เครื่ องเดียวกัน

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

การแสดงผล (Output) หมายถึง การแสดงผลลัพธ์ จากการแปลงสัญญาณต้ นแบบไปเป็ นสัญญาณที่สามารถปรากฏบน อุปกรณ์ปลายทางได้ โดยอุปกรณ์ ดงั กล่าวจะต้ องต่อพ่วงเข้ ากับเครื่ องพีซีด้วยได้ แก่ อุปกรณ์แสดงผลแบบดิจิทลั เช่น จอภาพ ดิจิทลั (Digital Monitor) และเครื่ องพิมพ์เลเซอร์ (Laser Printer) เป็ นต้ น อุปกรณ์แสดงผลแบบอนาล็อกจะต้ องมีอปุ กรณ์แปลง สัญญาณดิจิทลั ให้ ไปเป็ นสัญญาณอนาล็อกก่อน เช่น เครื่ องฉายโปรเจคเตอร์ (Projection TV) สาหรับการแสดงผลทางเสียงจะต้ องใช้ อุปกรณ์ ออดิโอ โดยทาการเชื่อมต่อกับแผงวงจรเสียงหรื อที่เรี ยกว่าซา วด์การ์ ด (Sound Card) ซึ่งท าหน้ าที่ แ ปลงสัญ ญาณดิจิ ทัลไปเป็ นสัญ ญาณอนาล็อก(Digital to Analog Converter) ส่วนประกอบ อุปกรณ์แสดงผลประเภทเสียง ได้ แก่ หูฟัง (Headphone) และลาโพง (Speaker)

62

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

การจัดเก็ บข้ อมูล (Storage) หมายถึง การนาข้ อมูลที่ผ่านกระบวนการทางานทัง้ การนาเข้ า การประมวลผลและการ แสดงผลเรี ยบร้ อยแล้ วมาทาการบันทึกลงในอุปกรณ์ จัดเก็ บข้ อมูล (Storage Device) เพื่อให้ สามารถนากลับมาใช้ ได้ เมื่อ ต้ องการ สาหรั บ การบัน ทึก ลงบนสื่อ จัด เก็ บ ข้ อ มูลชนิ ด ต่างๆ เช่น เทป (Tape) แผ่น ซีดี (CD ROM) และแผ่น ดี วี ดี (DVD) จาเป็ นต้ องจัดทาผ่านอุปกรณ์ที่สามารถจัดเก็บข้ อมูลลงบนหน่วยจัดเก็บแต่ละชนิดได้ ตัวอย่างเช่น กรณีที่ผ้ ู ใช้ ต้องการจัดเก็บ ข้ อมูลลงบนแผ่นซีดี จาเป็ นต้ องมีอปุ กรณ์ในการเรี ยน หรื อที่เรี ยกว่า “CD WRITER” เพื่อใช้ ในการจัดเก็บข้ อมูลดังกล่าวด้ วย การเก็บไฟล์เสียงไว้ ในหน่วยจัดเก็บข้ อมูลสารอง โดยสัญญาณดิจิทลั จากไฟล์เสียงเหล่านี ้จะส่งกลับไปยังซาวนด์การ์ ด เพื่ อแปลงสัญ ญาณให้ เป็ นแบบอนาล็อก ทาให้ สามารถได้ ยิ นเสียงจากไฟล์ที่ ทาการน าเข้ าหรื อบันทึกนัน้ ได้ ด้วยอุป กรณ์ แสดงผลทางเสียง เช่น ลาโพง หูฟัง ลาโพงภายนอก (External Speaker) ลาโพงภายนอก (External Speaker) เป็ นส่วนสาคัญที่สนับสนุนให้ มลั ติมีเดียคอมพิวเตอร์ สามารถเล่นเสียงระดับไฮไฟที่มี คุณ ภาพได้ นอกจากความสามารถในการจัดการด้ านเสียงของซาวนด์ การ์ ดแล้ วปั จจุบันได้ มีผ้ ูผลิตลาโพงภายนอกที่มีขีด ความสามารถที่ ห ลากหลาย นอกจากนี ย้ ัง เพิ่ ม คุณ ภาพในหลายระดับ ด้ ว ยกัน เช่ น ระดับ ธรรมดา ระดับ คุณ ภาพสูง ที่ ประกอบด้ วยทังล ้ าโพงเสียงแหลม ลาโพงเสียงกลางและลาโพงเสียงทุ้ม เป็ นต้ น คล้ ายกับระบบเครื่ องเสียงชันดี ้ ทวั่ ไป ลาโพง ภายนอกจึ งจัด ว่าเป็ นส่วนประกอบพื น้ ฐานที่ จาเป็ นสาหรั บ มัลติ มี เดี ย พี ซี เนื่ อ งจากการถ่ ายทอดเสีย งที่ ชัด เจนและต้ อ ง ครอบคลุมย่านความถี่เสียงได้ หลากหลาย จนกลายเป็ นส่วนประกอบสาคัญของระบบมัลติมีเดียในยุคปั จจุบนั ที่ขาดไม่ได้

2. การออกแบบการกระทาและคาสั่งของแอปพลิเคชัน ผู้ใช้ สามารถสัง่ งานแอปพลิเคชันได้ 2 วิธี คือ สัง่ งานด้ วยการกระทา (Action) และคาสัง่ (Command) เพื่อให้ แอปพลิเค ชันทางานตามคาสัง่ และตอบสนองเป็ นผลลัพธ์ กลับมายังผู้ใช้ หน้ าที่ของนักออกแบบนอกจากการจัดโครงสร้ างเนื ้อหาและ โครงร่ างหน้ าแอปพลิเคชันแล้ ว ยังรวมถึงการออกแบบการกระทาและการกาหนดรู ปแบบคาสัง่ ตลอดจนการจัดวางคาสัง่ ใน ตาแหน่งที่เหมาะสม ซึง่ การกระทาและคาสัง่ ของแอปพลิเคชันมีหลายลักษณะ แบ่งได้ ดงั นี ้  การกระทา ได้ แก่ Double Click, Drag and Drop, Key Action และ Type Command  คาสัง่ ได้ แก่ Button, Menu Bar, Pop-up Menu, Toolbars, Link และ Action Panel

63

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

3. ลักษณะของการกระทาและคาสั่งของแอปพลิเคชัน  Double Click ส่วนใหญ่ใช้ ในการเรียกใช้ งานหรือเปิ ดแอปพลิเคชันขึ ้นมา  Drag and Drop เป็ นการควบคุมการเคลื่อนที่ขององค์ประกอบใดๆ โดยการกดเมาส์ค้างที่องค์ประกอบนันแล้ ้ วลากเคลือ่ นย้ ายไปใน ทิศทางที่ผ้ ใู ช้ ต้องการ และปล่อยเมาส์ เช่น การเคลือ่ นย้ ายไฟล์ที่ต้องการลบทิ ้งลงใน Recycle bin  Keyboard Action เป็ นการกาหนดคีย์ลดั ต่างๆ ทีใ่ ช้ คีย์บอร์ ดเป็ นตัวดาเนินการสาหรับเรี ย กใช้ งานฟั งก์ชนั่ หรื อคาสัง่ ต่างๆ การกระทานี ้ จะช่วยให้ ผ้ ใู ช้ ที่ถนัดการใช้ งานคีย์บอร์ ดทางานได้ งา่ ยและเร็ วขึ ้น โดยไม่ต้องสลับไปใช้ งานเมาส์  Type Command เป็ นการเรี ยกใช้ ฟังก์ชนั่ หรื อคาสัง่ ด้ วยการพิมพ์ข้อความที่กาหนดไว้ ด้วยคีย์บอร์ ด  Button โดยทัว่ ไปปุ่ มคาสัง่ จะมีขนาดที่สงั เกตได้ งา่ ย และมีข้อความสันๆ ้ แสดงถึงหน้ าที่ของปุ่ มคาสัง่ นัน้ ในหน้ า แอปพลิเคชัน อาจมีปมค ุ่ าสัง่ ประเภทนี ้อยูร่ วมกันเป็ นกลุม่ ตามการใช้ งาน ซึง่ จะช่วยให้ ผ้ เู ริ่ มต้ นใช้ งานแอปพลิเคชันสามารถใช้ งาน ได้ สะดวกขึ ้น  Menu bar เป็ นคาสัง่ บรรจุรายการตามกลุม่ คาสัง่ การใช้ งาน โดยแสดงแถบรายการในแนวนอน แต่ละเมนูจะประกอบด้ วยคาสัง่ ที่จดั ให้ อยูใ่ นกลุม่ เดียวกัน  Pop-up Menu เป็ นรายการคาสัง่ ที่จะแสดงให้ เห็นเมื่อมีการเรี ยกใช้ เท่านัน้ โดยคาสัง่ ที่บรรจุอยู่ในรายการนันอาจเป็ ้ นคาสัง่ ที่ไม่ได้ แสดงไว้ ในหน้ าแอปพลิเคชัน หรื ออาจเป็ นคาสัง่ เฉพาะที่ผ้ ใู ช้ สามารถเรี ยกใช้ ในขณะกาลังทางานบนชิ ้นงานนัน้ โดย ใช้ วิธีคลิกเมาส์ขวา  Drop-down Menu เป็ นรายการที่แสดงข้ อมูลคาสัง่ ทังหมดที ้ ่อยูใ่ นรายการเมื่อผู้ใช้ กดที่ปมลู ุ่ กศรด้ านข้ างรายการ ผู้ใช้ สามารถคลิกเลือก ข้ อมูลหรื อคาสัง่ ที่ต้องการได้

64

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

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

4. วิธีการออกแบบการจัดวางคาสั่งและการตอบสนอง

เป็ นวิธีการจัดให้ คาสัง่ ต่างๆ ที่มีการทางานคล้ ายๆกันหรื อสอดคล้ องกัน รวมอยู่ในกลุม่ เดียวกัน เช่น ปุ่ ม ok, ปุ่ ม cancel, ปุ่ ม close สามารถจัดอยูใ่ นกลุม่ เดียวกันได้ วิธีการนี ้จะช่วยให้ สามารถจัดองค์ประกอบต่างๆได้ ง่ายและดูเป็ นระเบียบ อีกทังยั ้ ง ช่วยให้ ผ้ ใู ช้ สามารถใช้ งานได้ ง่ายและสะดวกมากขึ ้น ข้ อแนะนาในการออกแบบ 1. คาที่ใช้ อธิบายหน้ าที่ของปุ่ มคาสัง่ นันควรเป็ ้ นคาสันๆ ้ และเข้ าใจง่าย 2. ไม่ควรใช้ รูปสัญลักษณ์ในการอธิ บายปุ่ มคาสัง่ เนื่องจากผู้ใช้ บางคนอาจไม่เข้ าใจความหมาย 3. จัดกลุม่ ของปุ่ มคาสัง่ แต่ละกลุม่ ออกจากกันอย่างชัดเจนและจัดวางไว้ ในบริ เวณที่เลือกใช้ งานง่าย ไม่ควรจัดวาง ไว้ ปะปนกับเนื ้อหาหรื อกลุม่ ของปุ่ มคาสัง่ ที่ไม่เกี่ยวข้ องกัน เพราะอาจทาให้ ผ้ ใู ช้ เข้ าใจผิด 4. ขนาด รูปร่าง หรื อสี ของปุ่ มคาสัง่ ในกลุม่ เดียวกันควรมีลกั ษณะเหมือนหรื อใกล้ เคียงกัน

65

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

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

ปุ่ มคาสัง่ สิ ้นสุดการใช้ งานที่พบเห็นได้ บอ่ ย เช่น ปุ่ ม Done หรื อ Finish เพื่อแสดงการเสร็ จสิ ้นการทางาน / ปุ่ ม Send เพื่อ ยืนยันการส่งข้ อความ / ปุ่ ม Buy เพื่อยืนยันการซื ้อสินค้ าที่อยูใ่ นรายการสัง่ ซื ้อ ข้ อแนะนาในการออกแบบ 1. ชื่อปุ่ มคาสัง่ สิ ้นสุดการใช้ งานควรมีความหมายทีเ่ ข้ าใจง่ายและเฉพาะเจาะจง 2. สร้ างลักษณะเด่นให้ กบั ปุ่ มคาสัง่ โดยควรออกแบบให้ มขี นาด หรื อสี ที่เหมาะสม เพื่อจาแนกความแตกต่างจาก คาสัง่ อื่นที่อาจมีอยูภ่ ายในหน้ าแอปพลิเคชันและช่วยให้ เข้ าใจหน้ าที่ของปุ่ มคาสัง่ ได้ งา่ ยขึ ้น 3. จัดวางปุ่ มคาสัง่ สิ ้นสุดการใช้ งานไว้ มมุ ล่างขวา เนื่องจากเป็ นทิศทางการมองตามธรรมชาติของผู้ใช้ และควรเว้ น ระยะให้ หา่ งจากเนื ้อหา หรื อองค์ประกอบอื่นๆ พอสมควร 4. ไม่ควรใช้ แถบเลือ่ นในหน้ าแอปพลิเคชันที่ต้องมีปมค ุ่ าสัง่ สิ ้นสุดการใช้ งาน เพราะผู้ใช้ อาจหาปุ่ มคาสัง่ สิ ้นสุดการ ใช้ งานไม่พบ

66

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

คาสัง่ ในรูปแบบนี ้จะสามารถใช้ งานได้ (enable) ก็ตอ่ เมื่อผู้ใช้ เลือกองค์ประกอบหรื อคาสัง่ ที่เกี่ยวข้ องกันไว้ หากผู้ใช้ มีการ ใช้ งานหรื อสร้ างชิ ้นงานขึ ้น โดยไม่มีสว่ นเกี่ยวข้ องกับคาสัง่ ดังกล่าว คาสัง่ นันจะไม่ ้ สามารถเรี ยกใช้ งานได้ (Disable) ข้ อแนะนาในการออกแบบ 1. คาสัง่ ในรูปแบบนี ้ควรตอบสนองและสามารถใช้ งานได้ เฉพาะตอนที่ผ้ ใู ช้ ทาตามเงื่อนไขหรื อสร้ างงานมาถึงจุดที่ เกี่ยวข้ องกับคาสัง่ นี ้เท่านัน้ 2. อาจนาคาสัง่ ในรูปแบบนี ้มาประยุกต์ใช้ ร่วมกัน โดยเรี ยกใช้ งานได้ ตอ่ เนื่องกันไปอย่างเป็ นลาดับ และสามารถ กาหนดทิศทางในการใช้ งานได้ ทาให้ ได้ ผลลัพธ์ตามที่ผ้ ใู ช้ ต้องการหรื อตามที่ผ้ ใู ช้ เลือกจากคาสัง่ ดังกล่าว

เป็ นคาสัง่ ที่สามารถแสดงตัวอย่างของงานที่ผ้ ใู ช้ สร้ างขึ ้นได้ เพื่อดูวา่ ผลลัพธ์ ที่ได้ ตรงตามผู้ใช้ ต้องการหรื อไม่โดยอาจแสดง ตัวอย่างเพียงบางส่วนหรื อทังหมดของงานที ้ ่สร้ างขึ ้นได้ ช่วยให้ ผ้ ใู ช้ ทราบถึงผลลัพธ์ได้ ก่อนทางาน อีกทังยั ้ งช่วยให้ ผ้ ใู ช้ สามารถ ตรวจสอบข้ อผิดพลาดที่อาจเกิดขึ ้นและสามารถแก้ ไขได้ อย่างรวดเร็ ว ข้ อแนะนาในการออกแบบ 1. การแสดงตัวอย่างควรมีหลายรู ปแบบ เพื่อตอบสนองความต้ องการผู้ใช้ อย่างทัว่ ถึง เช่น การแสดงตัวอย่าง หน้ าต่างได้ หลายขนาด การแสดงตัวอย่างก่อนพิมพ์ เป็ นต้ น 2. ผู้ใช้ ควรกาหนดได้ วา่ ต้ องการให้ แสดงตัวอย่างเฉพาะส่วนที่ต้องการ 3. ในขณะที่แสดงตัวอย่างควรให้ ผ้ ูใช้ ยกเลิกหรื อหยุดการแสดงตัวอย่างได้ เพราะเมื่อผู้ใช้ พบข้ อผิด พลาดอาจ ต้ องการแก้ ไขในทันที 4. ในขันตอนด ้ าเนินการสร้ างตัวอย่างเพื่อแสดงแก่ผ้ ใู ช้ ไม่ควรใช้ เวลานานมาก

ข้ อแนะนาในการออกแบบ 1. ควรนาภาพเคลือ่ นไหวเข้ ามาใช้ ร่วมด้ วย เพื่อสร้ างความเพลิดเพลินระหว่างรอการดาเนินงาน 2. ในระหว่างรอควรให้ ผ้ ใู ช้ หยุดดาเนินงานได้ ทนั ทีที่ต้องการ 3. ควรแสดงเวลาให้ ผ้ ใู ช้ เห็นชัดเจนและตรงตามจริง 4. ผู้ใช้ ควรกาหนดได้ วา่ จะปิ ดหน้ าต่างแสดงระยะเวลาอัตโนมัติ หรื อให้ ผ้ ใู ช้ ปิดเอง 67

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

บทที่ 10 เทคโนโลยีมัลติมีเดีย 1. ตัวอักษรและข้ อความ (Typography and Text) ตังแต่ ้ เริ่ มต้ นทีม่ ีการสือ่ สารข้ อมูลด้ วยเนือ้ หาบนหน้ าเว็บจะใช้ ข้อความ (text) เป็ นหลัก ถึงแม้ วา่ ปั จจุบนั จะมีสอื่ อย่าง อื่น เช่น รูปภาพ และองค์ประกอบสือ่ อื่นๆ เข้ ามาประกอบในเว็บ แต่วา่ ข้ อความก็ยงั คงมีความสาคัญและปรากฎบนหน้ าเว็บ อยูเ่ สมอ เช่น ใช้ เป็ นหัวข้ อ หัวข้ อย่อย คาอธิบาย และเนื ้อหาสาระ เมนูที่ใช้ ข้อความ รวมทังปุ่ ้ มต่างๆ เป็ นต้ น นอกจากนี ้แล้ วยัง ช่วยสร้ างลิงค์เชื่อมโยงไปยังหน้ าเว็บอื่นๆ (Link) การสร้ างเว็บที่ใช้ ข้อความในการสือ่ สารสาระ สิง่ หนึง่ ที่มาประกอบสาหรับการ ออกแบบคือ การสร้ างลักษณะของตัวอักษระ (Typography) ที่จะกล่าวถึงเกี่ยวกับชนิดของตัวอักขระ (Font Type) รูปร่างการ แสดงของอักขระ (Font Face) ปั จจุบนั มีการประยุกต์ใช้ ข้อความและตัวอักษรเป็ นสือ่ กลางในการสือ่ สารโดยใช้ คอมพิวเตอร์ ดาเนินการด้ วยกระบวนการ เรี ย บเรี ยง ประมวลผล จัด เก็ บ น าเสนอ รวมทัง้ นามาใช้ งาน อย่างที่เห็น ชัดเจนคือ สื่อสิ่งพิม พ์ ข้ อความที่ เป็ นเท็กซ์ (Text messaging) ในอุปกรณ์สื่อสารต่างๆ รวมทังการน ้ าตัวอักษรมาใช้ เผยแพร่ ผา่ นทางเว็บไซต์นนั ้ ปั ญหาที่เกิดอย่างหนึ่งคือ การ แสดงผลตัวอักษรหรื อข้ อความไม่ได้ ของคอมพิวเตอร์ ปลายทาง เนื่องจากรู ปแบบและคุณลักษณะของอักขระมีความแตกต่าง กันระหว่างระบบคอมพิวเตอร์ ที่สร้ างข้ อความ และเครื่ องที่เปิ ดอ่าน ปั ญหานี ้แก้ ได้ โดยการใช้ มาตรฐานอักขระแบบเดียวกัน ซึ่ง ปั จจุบนั มาตรฐานของตัวอักขระที่ใช้ กนั แพร่หลายมี 2 ชนิด ได้ แก่ แอสกี (ASCII) และยูนิโค้ ด (Unicode)  แอสกี (ASCII) มาตรฐานอักขระแอสกี (ASCII ย่อ มาจาก American Standrad for Information Interchange) ได้ พัฒ นาขึน้ มา ในช่วงปี ค.ศ. 1970 โดยเริ่ มต้ นแอสกีใช้ รหัสขนาด 7 บิต ซึง่ สามารถรองรับตัวอักษรภาษาอังกฤษทังตั ้ วพิมพ์เล็ก -พิมพ์ ใหญ่ ตัว เลข สัญ ลัก ษณ์ พิ เศษต่ า งๆ ได้ จ านวน 128 ตัว ตัว อัก ษรแอสกี 7 สามารถใช้ สื่ อ สารได้ ใ นพื น้ ที่ ข อง สหรัฐอเมริ กา แต่ปัญหาที่เกิดขึ ้นคือ แสดงผลไม่ถกู ต้ องหากส่งไปยังประเทศอื่นๆ สาหรับการใช้ มาตรฐานอักขระแอ สกีในปั จจุบนั ให้ สามารถรองรับตัวอักษรทุกๆ ภาษาทัว่ โลก จึงมีการพัฒนาให้ ใช้ แอสกีขนาด 16 บิต 24 บิต และ 32 บิต  ยูนิโค้ ด (Unicode) ยูนิโค้ ดเป็ นรหัสที่พฒ ั นาขึน้ มาให้ ใช้ งานในระบบคอมพิวเตอร์ ในหลายชนชาติ โดยองค์กรที่เป็ นผู้พฒ ั นาคือ องค์กร กาหนดมาตรฐานสากล หรื อ ISO (International Organization for Standard) รองรับอักขระและสัญลักษณ์ พิเศษ ต่างๆในแต่ละภาษา โดยใช้ ขนาด 16 บิต

68

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

รูปแบบของตัวอักษร มีดงั ต่อไปนี ้  Serif และ Sans Serif ตัวอักษรที่มีรูปแบบเป็ น Serif หมายถึง ตัวอักษรที่มีเส้ นหรื อขีดสันๆ ้ ที่ปลายสุดของตัวอักษรตัวนันๆ ้ แต่ในขณะที่ Sans Serif จะไม่มีเส้ นขีดที่ปลายของตัวอักษร (คาว่า Sans หมายถึง ไม่มี) 1) ความกว้ าง (Set width) ความกว้ างของตัวอักษร หมายถึ ง ตัวอักษรหนึ่งตัวที่แสดงออกทางหน้ าจอ มีอยู่ 2 ลักษณะ ได้ แก่ ตัวอักษรที่มีขนาดความกว้ างของพื ้นที่แสดงผลของทุกตัวเท่ากัน และขนาดช่องว่างตามสัดส่วนของ อักษร เช่น ตัว w มีความกว้ างกว่า ตัว i 2) โครงสร้ างของตัวอักษร

ภาพ 33 โครงสร้ างตัว อัก ษร ที่ มา HTTPS://PLAYTYPE . COM/ABOUT/ TYPEFACES/ GLOSSARY

Serif Mean Line Base Line Point Size Cap height Shoulder Set Width X-Height Ascender Descended

คือ เส้ นของส่วนปลายสุดของตัวอักษร คือ เส้ นที่กาหนดความสูงของอักษรตัวพิมพ์เล็ก คือ เส้ นที่กาหนดขอบล่างของตัวอักษร คือ ช่วงความสูงทังหมดที ้ ่ตวั อักษรต้ องใช้ คือ ความสูงขงตัวอักษรตัวพิมพ์ใหญ่ คือ ช่องว่างที่เผื่อไว้ สาหรับการเว้ นบรรทัด คือ ความกว้ างของอักษร คือ ความสูงของอักษรตัวพิมพ์เล็ก คือ ส่วนที่เลย Mean Line ขึ ้นไปด้ านบนตัวพิมพ์เล็ก คือ ส่วนที่เลย Base Line ลงมาด้ านล่างตัวพิมพ์เล็ก 69

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

2. ภาพกราฟิ ก (Graphics) สาหรับมุมมองด้ านเทคโนโลยี รูปภาพ (Image) กราฟิ ก (Graphics) มีความจาเป็ นมากสาหรับโปรแกรมประยุกต์ด้าน สื่อมัลติมีเดีย และเว็บไซต์ เพราะภาพหนึ่งภาพแทนคาพูดได้ เป็ นพันคา การประยุกต์ใช้ ภาพในงานมัลติมีเดีย โดยมากจะใช้ สาหรับเป็ นภาพพื ้นหลัง ปุ่ ม ไอคอน(Icon) สัญลักษณ์แสดงทิศทาง แผนที่ หรื อ โลโก้ (Logo) เป็ นต้ น

 ลักษณะของเส้ นและสี 1. ภาพลายเส้ น (Line art) เป็ นลักษณะของภาพวาด (Drawing) ประกอบด้ วยลายเส้ นเรี ยบๆ ไม่มี การสร้ างความแตกต่างของระดับสี 2. ภาพระดั บ สี ต่ อเนื่ อง (Continuous – tone image) เป็ นรู ป ภาพที่ มี สี สัน ระดับ ต่ า งๆ เช่ น ภาพถ่าย เป็ นต้ น หรื อภาพ Gray scale ที่ไล่ระดับสีขาว-สีดา  มิติของภาพ 1. ภาพ 2 มิติ (2 Dimensions Image) เป็ นภาพที่สร้ างด้ วยโปรแกรมประยุกต์ใ นคอมพิวเตอร์ โดย สร้ างภาพรู ปทรงเรขาคณิ ต เช่น เส้ น วงกลม วงรี และรู ป หลายเหลี่ยม แล้ วกาหนดสีลงไปใน รูปภาพที่สร้ างขึ ้น 2. ภาพ 3 มิ ติ (3 Dimension Image) เป็ นภาพที่ เกิ ด จากการสร้ างด้ วยโปรแกรมประยุก ต์ ใ น คอมพิ ว เตอร์ เช่ น เดี ย วกัน แต่ ก ารสร้ างภาพชนิ ด นี จ้ ะสร้ างในแนวแกน X Y และ Z (แนวตัง้ แนวนอน และแนวลึก ตามลาดับ) ภาพที่ สร้ างเกิดเป็ นมิติทาให้ สมจริ งเหมือนธรรมชาติมากกว่า ภาพ 2 มิติ

 ลักษณะการสร้ างภาพ 1. ภาพเวกเตอร์ (Vector graphic) เป็ นภาพที่ ป ระกอบไปด้ วยเส้ นตรง เส้ น โค้ ง ที่ เกิ ดจากการ อ้ างอิงความสัมพันธ์ ทางคณิตศาสตร์ ซึ่งภาพที่สร้ างขึ ้นมาจะมีความเป็ นอิสระต่อกัน เมื่อมีการ ขยายภาพความละเอียดของภาพจะไม่ลดลง และยังคงความคมชัดไว้ เหมือนเดิมไม่เปลีย่ นแปลง ภาพลักษณะนี ้ เหมาะกับการสร้ างภาพกราฟิ กที่เป็ นสีพื ้นๆ ไม่มีการไล่โทนสี และการออกแบบ ต่างๆ

70

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

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

ภาพ 34 ภาพเวกเตอร์ ( ซ้ าย) และ บิ ตแมป(ขวา)

 คุณภาพของภาพ (Image Quality) 1. จอภาพ (Monitor) จอภาพที่ใช้ สาหรับแสดงผล มีมาตรฐานและความละเอียดการแสดงสีตา่ งๆ กัน ดังต่อไปนี ้ มาตรฐาน ความละเอียด จานวนสี หน่วยความจาทีต่ ้ องการต่อ 1 เฟรม VGA 640x480x8 bit 256 307.2 kB XGA 640x480x16 bit 64k 614.4 kB 1024x768x8 bit 256 786.43 kB SVGA 800x600x16 bit 64k 960 kB 1024x768x8 bit 256 786.43 kB 1024x768x24 bit 16M 2359.30 kM

71

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

2. ความละเอียดของภาพ (Image Resolution) ความละเอียดของภาพจะพิจารณาจาก 2 อย่าง คือ 1) ความละเอียดของสี (Color resolution) ที่ จะแสดงได้ ในแต่ละพิกเซล หมายถึงจานวนของบิตสีที่บรรจุอยู่ในแต่ละพิกเซล ภาพที่มีบิตสีมาก ขึ ้นจะสามารถแสดงสีในภาพได้ มากขึ ้นด้ วย ดังภาพต่อไปนี ้ Color Resolution 32 32-bit 2 16.7 + million colors plus an 8-bit (256-level) gray scale 24-bit 224 16.7 + million colors 16-bit 216 65.5 thousand colors 8-bit 28 256 colors 4-bit 24 16 colors 2-bit 22 4 colors 1-bit 21 2 colors และอีกอย่างหนึ่งคือ ความละเอียดของภาพ (Image resolution) หมายถึง จานวนพิกเซลแต่ละ ภาพ โดยปกติแล้ วจะวัดโดยจานวนพิกเซลต่อหนึ่งนิ ว้ (pixel per inch: ppi) ภาพที่มีจานวน ppi สูง จะมีความชัดเจนกว่าภาพที่มีจานวน ppi ต่า แต่ปกติแล้ วจอภาพสาหรับแสดงผลทั่วไปจะ แสดงเพียง 72 ppi เท่านัน้  ขนาดของไฟล์ ภาพ (Image Size) เราจะสังสัยว่าทาไมไฟล์ภาพที่เราได้ มามีขนาดกว้ างและยาวเท่ากัน แต่ขนาดของไฟล์ภาพไม่เท่ากัน ปั จจัยที่สง่ ผล ต่อขนาดของไฟล์รูปภาพประกอบด้ วย ขนาด และความละเอียดของสี เราสามารถคานวณหาขนาดของไฟล์ภาพ เบื ้องต้ นได้ โดยใช้ สตู ร ขนาดไฟล์ภาพ = กว้ าง x ยาว x บิตสี 8 โดยที่

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

72

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

นอกจากนี ้ หากเราใช้ โปรแกรม Adobe Photoshop เพื่อสร้ างภาพใหม่ขึ ้นมา โปรแกรม นี ้จะคานวณขนาดของไฟล์เบื ้องต้ นให้ เราทราบเพื่อตัดสินใจว่าจะกาหนดขนาดภาพและจานวน บิตสีตามที่เราต้ องการหรื อไม่

ภาพ 35 ขนาดไฟล์ภาพ

ภาพ 36 สีใ นรู ป ภาพ

73

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

 HSB (Hue, Saturation, Brightness) เป็ นแสงสีที่ตอบสนองการมองเห็นของสายตามนุษย์ Hue คือสีของวัตถุที่สะท้ อนออกมาจากวัตถุแล้ วเข้ าสูส่ ายตาของ เรา ทาให้ เราสามารถมองเห็นวัตถุเป็ นสีได้ ซึ่งแต่ละสีจะแตกต่าง กันตามความยาวของคลืน่ แสงที่มากระทบวัตถุและสะท้ อนกลับมา ที่ตาของเรา ซึง่ มักเรี ยกสีตามชื่อสี เช่น สีเขียว สีแดง สีเหลือง เป็ น ต้ น ค่า Hue จะบอกค่าสีเป็ นองศาจาก 0 องศาหมุน ไปถึง 360 องศา ภาพ 37 ระบบสี HSB

Saturation คือ ความสดหรื อความอิ่มตัวของสี หรื อ คือสัดส่วนของสีเทาที่มีอยู่ในสีนนั ้ โดยค่าความสดของสี จะเริ่ มที่ 0% ถึง 100% ถ้ ากาหนด Saturation ที่ 0% สีจะมีความสดน้ อย แต่ถ้ากาหนดที่ 100% สีจะมีความ สดมาก (ไม่มี สีเทาเลย หรื อ คื อ สีที่ มี ค วามอิ่ ม ตัว เต็ ม ที่ ) Saturation เป็ นการแสดงแบบสัม พัท ธ์ ข องแสงที่ มองเห็นจากแหล่งกาเนิด การเพิ่ม Saturation สีจะมีความบริ สทุ ธิ์มากขึ ้น Brightness คือระดับความสว่างของสี โดยค่าความสว่างของสีจะเริ่ มที่ 0% ถึ ง 100% ถ้ ากาหนดที่ 0% ความ สว่างจะน้ อ ยซึ่งจะเป็ นสีดา แต่ถ้ากาหนดที่ 100% สีจะมีค วามสว่างมากที่สุด Brightness เป็ นการแสดง ความสัมพันธ์ของความหนาแน่น จากพลังงานของแหล่งกาเนิดที่มองเห็นได้ และสามารถค่าเป็ นพลังงานรวม หรื อเป็ นความสูงของคลื่นที่มีความหนาแน่นสูงในสีแบบ RGB ความสูงของคลื่นของสีแดง เขียว และน ้าเงิน มี ช่วงจากร้ อยละ 0 ถึง 100 ของความสดใสเต็มที่ ในระดับนี ้สามารถนาเสนอโดยเลขฐาน 10 จาก 0 ถึง 255 หรื อเลขฐาน 16 จาก 00 ถึง FF

74

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

 RGB (Red, Green, Blue) เป็ นแสงสีพื ้นฐานที่ใช้ งานกับจอภาพ ทังจอคอมพิ ้ วเตอร์ และLCD ตามหลักการมองเห็นสีของเครื่ องคอมพิวเตอร์ RGB ย่อมาจาก Red (สีแดง), Green (สีเขียว) และ Blue (สีน ้า เงิน) โดยการใช้ สดั ส่วนของสี 3 สีต่างกัน จะทาให้ เกิดสีต่างๆ ได้ อีกมากมาย ผู้ใช้ สีสามารถกาหนดสีได้ ต่างๆ มากมาย โดยใช้ ตวั อักษรปะปนกันไปมากกว่า 16 ล้ านรู ป แบบ ซึ่งชุดรหัสดังกล่าวจะถูกแปลงเป็ นสีต่างๆ ด้ วย กฎการใช้ กล่าวคือ จะใช้ ตวั เลขใดๆ ก็ได้ 0-9 จานวนไม่เกิน 6 ตัว สามารถมีอกั ษรภาษาอังกฤษผสมด้ วยได้ ซึง่ จะใช้ ได้ ตงแต่ ั ้ A-B-C-D-E-F เท่านัน้ นับตังแต่ ้ ตวั G ขึ ้นไปจะไม่สามารถประเมินผลได้ สีที่ใช้ ในเว็บไซต์ ตาม มาตรฐานของสี มีหลักการอ้ างอิงถึงในลักษณะสองแบบ คือ อ้ างอิงตามชื่อสีมาตรฐานในภาษาอังกฤษ และ รหัสสีในเลขฐานสิบหก

ภาพ 38 ระบบสี RBG

 Lab เป็ นมาตรฐานการรองรับแสงสีทกุ มาตรฐาน ตามมาตรฐานของ CIE (Commission Internationale d’Eclarirage) เป็ นค่าสีที่ถกู กาหนดขึ ้นให้ เป็ นมาตรฐาน การวัดสีทกุ รูปแบบ ครอบคลุมทุกสีใน RGB และ CMYK (รูปที่ 32) และใช้ กบั สีที่เกิดจากอุปกรณ์ทกุ อย่าง ไม่ ว่าจะเป็ นจอคอมพิวเตอร์ , เครื่ องพิมพ์, เครื่ องสแกน และอื่นๆ จึงเป็ นระบบสีที่ไม่ขึ ้นกับอุปกรณ์ ใด ๆ (Device Independent) เป็ นโหมดสีที่มีความเหมือนจริ งที่สดุ สาหรับงานพิมพ์ที่เป็ น Photo CD หรื อภาพที่ต้องการใช้ งานระหว่าง ระบบคอมพิวเตอร์ ที่แตกต่างกัน เช่น Windows ไปยัง Mac โดยแบ่งออกเป็ น 3 ส่วนคือ “L” หรื อ Luminance เป็ นการกาหนดความสว่างซึง่ มีคา่ ตังแต่ ้ 0 ถึง 100 ถ้ ากาหนดที่ 0 จะกลายเป็ นสีดา แต่ถ้ากาหนด ที่ 100 จะกลายเป็ นสีขาว, “A” เป็ นค่าของสีที่ไล่จากสีเขียวไปสีแดง และ“B” เป็ นค่าของสีที่ไล่จากสีน ้าเงินไปสี เหลือง

75

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

ภาพ 39 ระบบสี LAB ที่ มา HTTP://WWW.THYON.COM/BLOG/GAMUT-LETS-GET-TECHNI-COLOUR

 CMYK (Cyan, Magenta, Yellow, black) เป็ นแสงสีที่เหมาะสมกับงานสิง่ พิมพ์ ตามหลักการแสดงสีของเครื่ องพิมพ์ CMYK ย่อมาจาก Cyan (สีฟ้าอมเขียว), Magenta (สีม่วงแดง), Yellow (สีเหลือง)และ Key (สีดา) (รูปที่ 29) การผสมสีจะเกิดจากการผสมของเม็ดสีเหล่านี ้ในปริ มาณต่างๆ คิดเป็ น % ของปริ มาณเม็ดสี ซึ่งกาหนดเป็ น 10-20-30-40-50-60-70-80-90 จนถึง 100 % นามาใช้ ในการพิมพ์สี ต่าง ๆ เป็ นระบบสีที่ใช้ กบั เครื่ องพิมพ์ที่พิมพ์ออกทางกระดาษหรื อวัสดุผิวเรี ยบอื่นๆ

ภาพ 40 ระบบสี CMYK

76

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

 JPEG มาจากคาว่า Joint Photographic Experts Group นามสกุลของไฟล์รูปแบบนี ้คือ .jpg หรื อ .jpeg เป็ นไฟล์ที่ ถูกสร้ างขึ ้นมาเพื่อบีบอัดข้ อมูลภาพเพื่อให้ มีขนาดกะทัดรัด นิยมนาใช้ งานในระบบอินเทอร์ เน็ต เพราะไฟล์มี ขนาดเล็ก สามารถดาวน์โหลดได้ รวดเร็ ว โดยให้ รายละเอียดของภาพสูง เพราะ JPEG สามารถเก็บภาพสีได้ สงู ถึง 16.7 ล้ านสี ภาพจึงมีความคมชัดสูงและมีสีสนั มาก เนื่องจากเป็ นไฟล์ที่ได้ รับความนิยมมาก จึงสามารถ เรี ยกดูไฟล์ภาพสกุลนี ้ได้ ในโปรแกรมแสดงภาพกราฟิ กทุกตัว แต่ข้อด้ อยของไฟล์ภาพชนิดนี ้คือ ไม่สามารถทา ให้ พื ้นที่ของภาพเป็ นแบบโปร่งใสได้ (Transparent/Opacity)

 TIFF มาจากคาว่า Tagged Image File Format ของไฟล์รูปแบบนี ้คือ .tif เป็ นไฟล์กราฟิ กที่สร้ างมาเพื่อโปรแกรม ประเภทจัดหน้ าหนังสือ มีรูปแบบที่ใช้ เก็บภาพพร้ อมรายละเอียดต่างๆ เช่น เลเยอร์ (Layer) และ โหมดภาพ ต่างๆ ตลอดจนข้ อมูลประกอบอื่นๆ ตามต้ นฉบับเดิมของภาพ เหมาะสมต่อการเก็บบันทึกภาพต้ นฉบับ และ ภาพสาหรั บ ใช้ ป ระกอบการสร้ างสื่อ สิ่งพิ ม พ์ ข้ อ ดีข องไฟล์ TIFF คื อ สามารถใช้ ได้ กับ โปรแกรมกราฟิ กทุก ประเภท และสามารถใช้ ได้ ในระบบคอมพิวเตอร์ หลายๆ ระบบ เช่น ระบบ PC และ Macintosh เป็ นต้ น อย่างไร ก็ตาม ไฟล์ภาพชนิดนี ้จะมีขนาดใหญ่ เพราะต้ องเก็บรายละเอียดความคมชัดไว้ สงู

 GIF มาจากคาว่า Graphics Interchange Format นามสกุลไฟล์คือ .gif เป็ นไฟล์กราฟิ กมาตรฐานสาหรับระบบ อินเทอร์ เน็ต เพราะไฟล์ที่มีขนาดเล็ก แต่จานวนสีและความละเอียดของภาพไม่สงู มากนักคือ แสดงผลสี ได้ เพียง 256 สี แต่จุดเด่นของไฟล์ชนิดนีค้ ือสามารถมีพืน้ แบบโปร่ งใส (Transparent/Opacity) นอกจากนี ้ยัง สามารถนาเสนอภาพแบบภาพเคลื่อนไหว (GIF Animation) โดยนาเอาไฟล์ภาพหลายๆ ไฟล์มารวมกันและ นาเสนอภาพเหล่านันโดยอาศั ้ ยหลักการหน่วงเวลา จนทาให้ เกิดลักษณะภาพเคลือ่ นไหว

 PNG มาจากคาว่า Portable Network Graphics นามสุกลของไฟล์รูปแบบนี ้คือ .png เป็ นกราฟิ กไฟล์รูปแบบล่าสุด ในการนาเสนอภาพบนระบบอินเทอร์ เน็ต มีความคมชัดสูง เป็ นการรวมเอาคุณสมบัติที่โดดเด่นของ JPEG กับ GIF มาใช้ คือสามารถเลือกระดับสีได้ ถึง 16.7 ล้ านสี และโปร่งใสได้ (Transparent/Opacity) อย่างไรก็ตามไฟล์ ภาพPNG ไม่สนับสนุนภาพเคลือ่ นไหว เพราะไม่สามารถเก็บภาพหลายๆภาพไว้ ด้วยกันได้ 77

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

 PDF มาจากคาว่า Portable Document Format นามสุกลของไฟล์รูปแบบนี ้คือ .pdf ไฟล์ PDF เป็ นไฟล์เอกสารของ Adobe Acrobat ใช้ ในการแสดงเอกสารในรู ป แบบของกราฟิ ก ซึ่ ง จะต้ องใช้ โปรแกรม Adobe Acrobat Reader ในการอ่าน โดยผู้ใช้ สามารถบันทึกไฟล์กราฟิ กหรื อเอกสารทุกประเภทให้ เป็ นไฟล์ PDF ได้ ซึ่งจะคง ลักษณะเดิมของเอกสารไว้ ไม่วา่ จะเปิ ดที่ใด ปั จจุบนั ในวงการสิง่ พิมพ์เริ่ มหันมาสนใจรูปแบบไฟล์ PDF กันมาก ขึ ้น เพราะสามารถแก้ ไขตัวอักษรได้ โดยการใช้ โปรแกรม Adobe Acrobat Professional แต่ข้อเสียคือ ต้ องอ่าน ไฟล์ชนิดนี ้ด้ วย โปรแกรม Adobe Acrobat Reader เท่านัน้

 PSD เป็ นไฟล์กราฟิ กของโปรแกรมตกแต่งรูปภาพของ Adobe Photoshop นามสุกลของไฟล์รูปแบบนี ้คือ .psd ไฟล์ PSD นี ้จะใช้ กบั โปรแกรม Adobe Photoshop เพื่อการแก้ ไขรู ปภาพ มีการแบ่งเลเยอร์ (Layer) เพื่อง่ายแก่การ แก้ ไขในภายหลัง และสามารถบันทึกกราฟิ กแบบเวคเตอร์ (Vector) ลงในไฟล์ได้ แต่มีขนาดไฟล์ที่ใหญ่เพราะ ต้ องเก็บรายละเอียดคุณสมบัติต่าง ๆ อันเป็ นคุณสมบัติพิเศษของโปรแกรม เช่น เลเยอร์ (Layer), แชนแนล (Channel), โหมดสี(Color Mode) และ สไตล์(Style) เป็ นต้ น

 EPS มาจากคาว่า Encapsulated PostScript นามสกุลของไฟล์รูปแบบนี ้คือ.eps เป็ นไฟล์ที่ถกู สร้ างขึ ้นมาเพื่อใช้ ใน งานออกแบบสื่อสิ่งพิมพ์ (Desktop Publishing) เป็ นไฟล์เวคเตอร์ (Vector) มาตรฐาน ใช้ งานได้ กบั โปรแกรม หลายโปรแกรม สามารถทาการแยกสีเพื่องานพิมพ์ได้ นอกจากนี ้ยังใช้ ในการบันทึกไฟล์เวคเตอร์ (Vector) จาก โปรแกรมหนึ่งเพื่อนาไปโหลดใช้ งานในอีกโปรแกรมหนึ่งอีกด้ วย ซึ่งไฟล์ชนิดนี ้จะมีขนาดใหญ่กว่าไฟล์เวคเตอร์ (Vector) ชนิดอื่นๆ

 SVG มาจากคาว่า Scalable Vector Graphics นามสกุลของไฟล์รูปแบบนี ้คือ.svg เป็ นไฟล์ภาพรู ปแบบเวคเตอร์ ที่ เก็ บ ข้ อมูลแบบ XML ภาพจะมี ความละเอีย ดสูงและคมชัด สามารถแสดงทัง้ ในรู ปแบบของการไล่ระดับ สี ภาพเคลื่อนไหว นอกจากนี ้ยังสามารถนาไฟล์มาแก้ ไขใน Adobe Illustrator ได้ ภายหลัง แต่มีข้อเสียคือ จะมี ไฟล์ขนาดใหญ่

78

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

 SWF มาจากคาว่า Shockwave Flash นามสกุลของไฟล์รูปแบบนี ้คือ.swf เป็ นไฟล์เวคเตอร์ (Vector) ของโปรแกรม Adobe Flashที่ อ อกแบบมาให้ ไฟล์ มี ขนาดกะทัด รั ด สาหรั บ น าเสนอบนเว็บ ไซต์ คุณ ภาพของไฟล์ มี ค วาม ละเอียดที่สงู และเหมาะกับการแสดงภาพเคลือ่ นไหวหรื อแอนิเมชัน และเกมส์บนระบบอินเทอร์ เน็ต

 AI เป็ นไฟล์กราฟิ กของโปรแกรมวาดรูปของ Adobe Illustrator นามสุกลของไฟล์รูปแบบนี ้คือ .ai เป็ นไฟล์พื ้นฐาน ของโปรแกรม Adobe Illustrator เช่น เลเยอร์ สี เอฟเฟ็ กต์ ฯลฯ เพื่อเราจะสามารถเปลีย่ นแปลงแก้ ไขภาพได้ แต่ มีข้อเสียคือ ใช้ กับโปรแกรม Adobe Illustrator ได้ อย่างเดียวเท่านัน้ (ถ้ าจะนาไปใช้ ในโปรแกรมอื่นต้ องต้ อง บันทึกเป็ นฟอร์ แมตอื่นก่อน)

 FLA เป็ นไฟล์กราฟิ กของโปรแกรมของ Adobe Flash นามสุกลของไฟล์รูปแบบนี ้คือ .fla จะใช้ ไฟล์นี ้กับโปรแกรม Adobe Flash เพื่อแก้ ไขงานภาพเวคเตอร์ ที่สร้ างด้ วยโปรแกรมดังกล่าว ไม่วา่ จะเป็ นแอนิเมชัน อินเตอร์ แอคทีฟ ในเว็บเพจ และเกมส์ เป็ นต้ น

79

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

3. เสียง (Sound) เสียงเป็ นสื่ออีกชนิดหนึ่งที่ถกู นามาประกอบในงานมัลติมีเดีย เพื่อสร้ างความน่าสนใจและความบันเทิง เช่น ปุ่ มคลิก การวาง เมาส์ทบั บนลิงค์แล้ วเกิดเสียง เป็ นต้ น นอกจากนี ้แล้ วยังนาเสียงมาเป็ นการถ่ายทอดเนื ้อหาที่ต้องการสือ่ สารกับผู้ชมอีกด้ วย เสียงที่เราได้ ยินจะอยูใ่ นลักษณะของคลืน่ เสียง (waveform) โดยประกอบด้ วย 3 ส่วนประกอบคือ ระดับความดังของ เสียง (amplitude) ความถี่เสียง (frequency) เนื ้อหาความต่อเนื่อง (harmonic content) คลืน่ เสียงที่เราได้ ยินทุกวัน คือ คลืน่ เสียงชนิดอนาล็อค (analog sound) ซึง่ ไม่สามารถนามาใช้ กบั ระบบคอมพิวเตอร์ ได้ จึงจาเป็ นต้ องมีการปรับ ให้ เป็ นเสียงในรูปแบบของดิจิทลั (digital audio) นัน่ คือ เปลี่ยนคลืน่ อะนาล็อกเป็ นเลข 0 และ 1 แทน แล้ วบันทึกหรื อ จัดการด้ วยคอมพิวเตอร์  ระดับความดังของเสียง (amplitude) เป็ นค่าที่วดั ระยะจากจุดฐานไปถึงยอดของคลืน่ เสียง หน่วยวัดเป็ น เดซิ เบล (decibel) เช่น เสียงกระซิบจะมีระดับความดังประมาณ 30 เดซิเบล เสียงพูดคุยกันปกติมีระดับความดัง ประมาณ 60 เดซิเบล เป็ นต้ น  ความถี่เสียง (frequency) เป็ นจานวนคลืน่ เสียงที่เกิดขึ ้นในแต่ละหนึง่ วินาที มีหน่วยเป็ น เฮิรตซ์ (Hertz: Hz)

คุณภาพของเสียงจะส่งผลต่อความน่าเชื่อถือ และประสิทธิภาพของงานมัลติมีเดีย ดังนันการบั ้ นทึกเสียง การ ตัดต่อและตกแต่ง รวมทังเครื ้ ่ องมือ หรื อโปรแกรมที่จะใช้ แสดง (เล่น) เสียง ก็มีผลต่อคุณภาพของเสียงนันๆ ้ ด้ วย คาศัพท์ที่ได้ ยินเกี่ยวกับคุณภาพของเสียงคือ เสียงแบบโมโน (mono) มีลกั ษณะเสียงแบนๆ ไม่ค่อยเป็ น ธรรมชาติเมื่อเทีย บกับ เสียงแบบสเตอริ โอ (stereo) ที่ มีการเกิ ดเสียงที่มีค วามเคลื่อนไหวเหมือ นธรรมชาติ มากกว่า นอกจากนี ้แล้ ว ยังมีปัจจัยที่เกี่ยวกับคุณภาพของเสียง โดยทัว่ ไปประกอบด้ วย อัตรา (rate) และความ ละเอียด (resolution) ดังรายละเอียดต่อไปนี ้  อัตรา (rate) อัตราของคลื่นเสียง หรื อความถี่เสียง หรื อที่เราเรี ยกกันว่า อัตราสุม่ (sample rate) หมายถึง จานวนคลื่นเสียง ที่เกิดในหนึ่งวินาที ปกติจะวัดเป็ นกิโลเฮิรตซ์ (kilohertz : kHz) เช่น 22.025 kHz และ 44.5 kHz เป็ นความถี่ เสียงปกติที่ใช้ สาหรั บการบันทึกและแสดงผล ยิ่งอัตราความถี่ สูงจะทาให้ ได้ เสียงที่มีคุณ ภาพสูงกว่าอัตรา ความถี่ที่ต่ากว่า และไฟล์ที่บนั ทึกก็จะใช้ พื ้นที่ในหน่วยความจามากกว่าด้ วย  ความละเอียด (resolution) ความละเอียดในที่นี ้หมายถึง จานวนบิตที่ใช้ สาหรับประมวลคลืน่ เสียงด้ วยระบบดิจิทลั หรื อเรี ยกว่า sampling size เช่น บันทึกเสียง 8 บิต 16 บิต เป็ นต้ น หากดาเนินการกับความละเอียดบิตสูงจะทาให้ ได้ เสียงที่มีคณ ุ ภาพ ดี และไฟล์เสียงที่มีความละเอียดบิตสูงจะมีขนาดใหญ่กว่าไฟล์เสียงความละเอียดบิตต่า

80

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

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

sampling rate

มีหน่วยเป็ นเฮิร์ตซ์ (Hz)

Sampling size

มีหน่วยเป็ นบิต (bit)

Time

ความยาวของเสียงมีหน่วยเป็ นวินาที (s)

ขนาดของไฟล์ที่คานวณได้ จะให้ หน่วยเป็ นไบต์ (byte)

ชนิดของไฟล์เสียงเป็ นผลลัพธ์ ของการสร้ างจากซอฟท์แวร์ และระบบปฏิบตั ิการที่แตกต่างกัน ชนิดของไฟล์ที่พบใน เว็บไซต์ทวั่ ๆ ไป มีดงั นี ้  AIFF or AIF (Apple’s Audio Interchange Format) เป็ นไฟล์ของเสียงที่เกิดจากระบบปฏิบตั ิการแมคอินทอช (macintosh) ใช้ อตั ราความถี่สงู ถึง 32 บิต สามารถ แสดงผลเสียงได้ ทงบนวิ ั ้ นโดวส์ ยูนิกซ์  WAV (waveform format) ไฟล์ เสีย ง wave เป็ นไฟล์ เสีย งที่ เราคุ้น เคยกัน มากที่ สุด ไฟล์ ป ระเภทนี ม้ ี น ามสกุล .wav จัด เป็ นไฟล์ เสีย ง มาตรฐานที่ใช้ กบั Windows คุณสมบัติที่สาคัญคือครอบคลุมความถี่เสียงได้ ทงหมด ั้ ทาให้ คณ ุ ภาพเสียงดีมาก และยังให้ เสียงในรู ปแบบสเตอริ โอได้ อีกด้ วย ข้ อเสียคือไฟล์ .wav มีขนาดใหญ่ทาให้ สิ ้นเปลืองพื ้นที่ในการเก็บ ข้ อมูลมาก

 MIDI (Musical Instrument Digital Interface) ไฟล์เสียง MIDI ไฟล์ข้อมูลเสียงดนตรี โดยมีนามสกุล .midi ไฟล์ MIDI จะบรรจุข้อมูลของอุปกรณ์ ต่างๆ ที่ให้ เสียงดนตรี เมื่อเล่นไฟล์ MIDI ก็จะเป็ นการสัง่ ให้ อุปกรณ์ นนๆให้ ั ้ มีเสียงดนตรี ออกมา เมื่อนามาเรี ยงกันก็จะ กลายเป็ นท่วงทานองดนตรี ซึ่งก็คือเสียงเพลงนัน่ เอง MIDI มีขนาดของไฟล์ที่เล็กมากทาให้ นิยมใช้ ในการเก็บ ข้ อมูลที่เป็ นเสียงดนตรี

81

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

 MP3 (Motion Picture Expert Group (MPEG) Audio Layer 3) ไฟล์เสียง MP3 เป็ นไฟล์เสียงยอดนิยมในปั จุบนั มีนามสกุล .mp3 ไฟล์mp3 เป็ นไฟล์ที่ถกู บีบอัดข้ อมูลทาให้ ไฟล์ประเภทนี ้มีขนาดเล็กลงมาก ลดลงประมาณ 10 เท่าเมื่อเทียบกับไฟล์ wave คุณภาพเสียง mp3 ค่อนข้ าง ดีจึงนิยมใช้ ไฟล์ประเภทนี ้บันทึกข้ อมูลเพลงลงบนสื่อคอมพิวเตอร์ หรื อแผ่น CD การเล่นไฟล์ mp3 บนเครื่ อง คอมพิ ว เตอร์ ต้ องใช้ โปรแกรมโดยเฉพาะซึ่ ง ในปั จจุ บั น มี ใ ห้ เลื อ กมากมาย เช่ น Winamp, MP3 Player, Windows Media Player, Musicmaatch Jukebox ฯลฯ นอกจากนี ย้ ัง สามารถเล่น ได้ กั บ เครื่ อ งเล่น VCD ,DVD, CD ติ ด รถยนต์ , เครื่ อ งเล่ น MP3 แบบพกพา (ใช้ หน่ ว ยความจ าเฉพาะ เช่ น Flash Memory หรื อ memory Stick) รวมทังโทรศั ้ พท์มือถือรุ่นใหม่ๆอีกด้ วยปั จจุบนั มีการพัฒนาไฟล์ MP3 เป็ นไฟล์ MP4 ให้ มีขนาด เล็กลงและมีคณ ุ ภาพเสียงดีขึ ้น แต่ยงั ไม่เป็ นที่นิยมใช้ มากนัก  MOV (Quicktime) เป็ นชนิด ไฟล์ เสียงของ Apple โดยมากแล้ วซอฟท์ แวร์ นีจ้ ะใช้ สาหรั บ ตัด ต่อ แอนิเมชัน และภาพยนตร์ แต่ก็ สามารถที่จะเลือกบันทึกเสียงออกมาอย่างเดียวได้  Real (RAM, RM, G2) ซอฟท์แวร์ นี ้ถูกพัฒนาโดย RealNetworks เป็ นไฟล์ที่มีเทคนิคการบีบอัดที่สามารถลดขนาดของไฟล์ได้ มากและ คุณภาพเสียงเป็ นที่ยอมรับ  OGG เป็ นรูปแบบของไฟล์เสียงใหม่ลา่ สุด มีชื่อเต็มคือ Ogg มีนามสกุล .ogg ไฟล์ Ogg Vorbis ใช้ เทคโนโลยีการบีบ อัดไฟล์แบบใหม่ ทาให้ ไฟล์ที่ได้ มีขนาดเล็กกว่า MP3 เสียอีก แต่ให้ คณ ุ ภาพเสียงที่ดีกว่าและที่สาคัญคืออยู่ใน กลุม่ ของ Open Source Project ทาให้ กลายเป็ นฟรี แวร์ อีกทังยั ้ งมีความสามารถด้ าน Streaming ด้ วย ทาให้ ได้ รับความนิยมมากในหมูผ่ ้ เู ล่นอินเทอร์ เน็ต ไฟล์ Ogg Vorbis สามารถเล่นได้ โดยใช้ โปรแกรมสาหรับเล่นไฟล์ MP3 โดยมีข้อแม้ ว่าโปรแกรมนัน้ จะต้ องมี Plug-in สาหรับ Ogg ด้ วย Ogg Vorbis นับเป็ นคลื่นลูกใหม่ของ วงการไฟล์เสียง เพราะมีขนาดที่เล็กมาก สามารถเข้ ารหัสเสียงได้ หลายแบบทัง้ mono,stereo จนถึงระบบ 5.1 Surround Sound

82

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

 WMA ไฟล์ WMA เป็ นรู ปแบบไฟล์แบบหนึ่งของบริ ษัทไมโครซอฟท์ ชื่อเต็มคือ Windows Media Audio เป็ นไฟล์ทีมี นามสกุลเป็ น .wma ไฟล์ WMA จัดได้ ว่าเป็ นคู่แข่งของ mp3 และ Real Audio เพราะมีคุณ สมบัติ ด้านการ Streaming เช่นเดียวกัน แต่ให้ คณ ุ ภาพเสียงที่ดีกว่าในขณะที่ขนาดของไฟล์เล็กกว่าประมาณครึ่งหนึง่ ทาให้ ใช้ เวลาน้ อ ยกว่าในการดาวน์ โหลดผ่านอิ น เทอร์ เน็ ต เมื่ อ ก่ อ นการเล่น ไฟล์ ป ระเภทนี ต้ ้ อ งเล่น ผ่านโปรแกรม Windows Media Player เท่ านั น้ แต่ ปั จ จุ บั น มี โป รแกรม หลาย โป รแกรม ที่ ส าม ารถ เล่ น ไฟ ล์ นี ไ้ ด้ Real Audio ไฟล์ Real Audio เป็ นไฟล์ที่มีนามสกุล .ra เป็ นไฟล์ประเภท Streaming ที่ใช้ สาหรับการชมภาพ และเสียงบนอินเทอร์ เน็ต ไฟล์ประเภท Streaming จะใช้ เทคโนโลยีในการบีดอัดข้ อมูลที่ปรับเปลีย่ นได้ เพื่อให้ ได้ ไฟล์ขนาดเล็ก ที่มีขนาดเหมาะสมสาหรับการส่งผ่านระบบอินเทอร์ เน็ตในระดับความเร็ วที่แตกต่างกัน ไฟล์ ประเภทนี ้ทาให้ เราสามารถชมภาพและเสียงผ่านระบบอินเทอร์ เน็ตได้ อย่างต่อ เนื่อง ผ่านโปรแกรมประเภท Real ต่างๆ ได้ โดยไม่ต้องรอให้ การดาวน์โหลดข้ อมูลเสร็ จสิ ้น โปรแกรม Real Player ก็เป็ นโปรแกรมประเภท หนึง่ ที่ใช้ เล่นไฟล์ Real Audio ได้

4. วิดีโอ (Video)

 อะนาล็อกวิดีโอ (analog video) วิดีโอชนิดนี ้ถูกบันทึกภาพและเสียงอยู่ในรู ปสัญญาณประเภทอะนาล็อก ที่เห็นทั่วไปคือ VHS (Video Home System) เป็ นม้ วนวิ ดี โอที่ ใช้ สาหรั บ ชมกัน ตามบ้ า น หรื อ ที่ เรี ย กกั น ติ ด ปากว่า วิ ดี โอเทป (video tape) ด้ ว ย เทคโนโลยีปัจจุบนั ความนิยมวิดีดอประเภทนี ้ลดน้ อยลง เนื่องจากราคาในการผลิตที่สงู คุณภาพที่ได้ ไม่ดีนกั จึง ต้ องนาวิดีโอเทปเก่าๆมาแก้ ไข ตัดต่อใหม่ด้วยระบบดิจิทลั โดยการแปลงสัญญาณภาพและเสียงชนิดอะนาล็อก ให้ เป็ นดิจิทลั ด้ วยการใช้ การ์ ด video-capture แปลงเป็ นไฟล์ในระบบคอมพิวเตอร์ และนาไปใช้ ในลักษณะของ วิดีโอประเภทดิจิทลั (digital video)

 ดิจิทลั วิดีโอ (digital video) เป็ นวิดีโอที่บนั ทึกข้ อมูลภาพและเสียงอยู่ในรูปแบบของดิจิทลั เช่น กล้ องบันทึกจะถูกผลิตออกมาด้ วยมาตรฐาน DV เราจะเรี ยกว่า กล้ อง DV บันทึกภาพและเสียงอยู่ในรู ปแบบสัญญาณดิจิทลั คือรหัส 0 และ 1 ในสื่อบันทึก ของกล้ องชนิดนันๆ ้ การถ่ายโอนข้ อมูลจากกล้ องเข้ าสูร่ ะบบคอมพิวเตอร์ ทางหนึง่ เราจะใช้ ช่องต่อเชื่อม FireWire หรื อ IEEE 1934 การถ่ายโอนข้ อมูลวิดี โอผ่านระบบดิ จิทัลนี ม้ ีข้ อดี คือ ไม่สูญ เสียคุณ ภาพ และไม่ก่อให้ เกิ ด สัญญานรบกวนด้ วย และกล้ องวิดีโอสมัยใหม่จะใช้ สอื่ ดิจิทลั ในการบันทึกข้ อมูล เช่น ซีดี และการ์ ดความจา เป็ น ต้ น 83

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

 อัตราเฟรม (Frame rate) ถ้ าเรากาลังยืนอยู่ข้างถนนเราคงจะเห็นรถที่กาลังวิ่งไปมาบนท้ องถนน ภาพที่เราเห็นนั น้ จะคล้ ายกับวิดีโอ เนื่องจากภาพรถวิ่งบนถนนท้ องถนนมันมีความต่อเนื่อง แต่เราเคยคิดหรื อไม่วา่ ณ เวลาหนึง่ ขณะที่เราจ้ องไปที่ รถที่กาลังวิ่งบนท้ องถนนนัน้ ภาพที่เราจะเห็นในเวลานันๆ ้ จะเป็ นอย่างไร คาตอบคือ ภาพนิ่งหนึ่งภาพนิ่ง นัน่ หมายความว่า ภาพเคลื่อนไหว ที่เราเห็นว่ามันเคลื่อนไหวอย่างสมจริ งในวิดีโอ เป็ นการเอาภาพนิ่งมาเรี ยงต่อ กันแล้ วฉายหรื อแสดงต่อเนื่องกันออกมาให้ เราเห็นเป็ นภาพเคลื่อนไหว ที่กล่าวมาข้ างต้ นเป็ นหลักการเบื ้องต้ น ของวิด๊โอนั่นเอง แล้ วเราจะฉายต่อเนื่องกันเท่าไหร่ จึงจะเห็นเป็ นภาพที่สมจริ ง มีหน่วยวัด เป็ น อัตราเฟรม หมายถึง ความเร็ วในการบันทึกหรื อการเล่นภาพหนึ่งภาพ (frame) เทียบกับเวลา ปกติแล้ วจะใช้ หน่วยเป็ น เฟรมต่อวินาที (frames per second: fps) โดยทัว่ จะอยูร่ ะหว่าง 15 ถึง 30 เฟรมต่อวินาที  ความละเอียด (Resolution) ความละเอียดสาหรับวิดีโอมีอยู่ 3 ปั จจัยด้ วยกัน ดังนี ้ 1) สัดส่วนของมุมมอง (Aspect ratio) เป็ นสัดส่วนระหว่างด้ านกว้ างและสูงที่จะใช้ สาหรับแสดงภาพในแต่ละเฟรม ตัวอย่างเช่น 4:3 สาหรับจอภาพธรรมดา หรื อ 16:9 สาหรับการแสดงแบบไวด์สกรี น (wide screen) 2) ขนาดเฟรม (Frame size) หมายถึง จานวนพิกเซิลที่ใช้ แสดงวิดีโอในแนวนอนและแนวตัง้ เช่น 800 x 600 พิกเซล 3) ความลึกบิต (Bit depth) หมายถึ ง จ านวนบิ ต สี ที่ จ ะแสดงได้ ในแต่ละพิ ก เซล ยิ่ งจ านวนบิ ต สูงจะสามารถแสดงสีได้ มากกว่าบิตต่า ทาให้ ภาพที่เกิดขึ ้นมีคณ ุ ภาพดีไปด้ วย  คุณภาพของเสียงในวิดีโอ เนื ้อหาได้ กล่าวในหัวข้ อที่ผา่ นมาแล้ ว

84

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

 AVI ( Audio Video Interleave) เป็ นรูปแบบที่ถกู พัฒนาขึ ้นโดยบริ ษัท ไมโครซอฟท์ สนับสนุนการใช้ งานภายใต้ ระบบปฏิบตั ิการวินโดวส์ และใช้ ร่วมกับทุกเบราวเซอร์ ได้ นามสกุลไฟล์ชนิดนี ้คือ .avi  WMV เป็ นรูปแบบของไฟล์วิดีโอตระกูล Windows Media ถูกพัฒนาขึ ้นโดยบริ ษัท ไมโครซอฟท์ เช่นเดียวกับ AVI ไฟล์ ชนิดนี ้ใช้ งานกันอย่างกว้ างขวางบนอินเทอร์ เน็ต แต่มีข้อเสียคือ ไม่สามารถทางานร่วมกับระบบปฏิบตั ิการอื่น ยกเว้ น ระบบปฏิบัติการวินโดวส์ หรื อต้ องติดตัง้ ส่วนเสริ ม (component) ลงไป นามสกุลของไฟล์ชนิดนีค้ ื อ .wmv  MPEG (Moving Pictures Expert Group) เป็ นรู ปแบบของไฟล์วิดีโอที่ได้ รับความนิยมบนอินเทอร์ เน็ต เนื่องจากทุกระบบปฏิบัติการใช้ งานได้ และทุก เบราว์เซอร์ ใช้ งานได้ ด้วย นามสกุลของไฟล์จะเป็ น .mpg หรื อ .mpeg  RealVideo ถูกพัฒนาโดยทีมอินเทอร์ เน็ตของ Real Media รู ปแบบนี ้จะใช้ สาหรับการทาสตรี มมิ่งของวิดีโอได้ เป็ นอย่างดี (streaming video) ใช้ สาหรับวิดีโอออนไลน์ และทีวีบนอินเทอร์ เน็ต ที่แบนด์วิดท์ต่า (bandwidth) นามสกุล ของไฟล์ชนิดนี ้คือ .rm หรื อ .ram  Shockwave รู ปแบบนี ้เกิดการสร้ างโดย Macromedia Flash ซึ่งถูกพัฒ นาขึน้ โดยบริ ษัท Macromedia เป็ นไฟล์ที่จะต้ อง อาศัยส่วนเสริ มเพื่อการแสดงภาพ และส่วนเสริ มนี ้จะมาพร้ อมกับเบราว์เซอร์ เวอร์ ชนั ใหม่ๆ นามสกุลของไฟล์ ชนิดนี ้คือ .swf  Quicktime ถู ก พั ฒ นาขึ น้ มาโดยบริ ษั ท แอปเปิ ล (Apple) เป็ นไฟล์ ที่ ไ ด้ รั บ ความนิ ย มบนอิ น เทอร์ เ น็ ต ส าหรั บ ระบบปฏิบตั ิการอื่นๆ ยกเว้ นแมคอินทอช จะต้ องติดตังส่ ้ วนเสริ มเพื่อเล่นไฟล์วิดีโอ นามสกุลของไฟล์ชนิดนี ้คือ .mov 85

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

5. แอนิเมชัน (Animation) แอนิเมชัน (Animation) หมายถึง การทาให้ ภาพนิ่งหลายๆ ภาพ เคลื่อนไหวต่อเนื่องกันด้ วยความเร็ วสูง ซึ่งจะทาให้ เกิดภาพลวงตา / ภาพติดตา หมายถึง เมื่อมนุษย์จะคงยังมองเห็นภาพค้ างในดวงตาระยะหนึ่งหลังจากที่เห็นภาพ นันๆ ้ ไปแล้ ว ทฤษฎีนี ้ถูกสาธิตโดย พอล โรเจ็ต (Paul Roget) ชาวฝรั่งเศส นอกจากนี ้แล้ วยังมีคาอธิบายเกี่ยวกับการ เคลือ่ นไหว คือ ภาพที่เห็นว่าเคลือ่ นไหวนัน้ เป็ นเพราะว่ามนุษย์เรามีการจาการสัมผัส (Sensory Memory) ซึง่ ภาพแต่ ละภาพจะคงติดตาอยูเ่ พียง 1 ต่อ 10 วินาทีเท่านัน้ ปรากฏการณ์นี ้เรี ยกว่า Persistence of Vision

 การสร้ างงานแอนิเมชั่นแบบดัง้ เดิม (Traditional Animation หรือ Drawn Animation) เป็ นการสร้ างชิ ้นงานแอนิเมชั่นด้ วยภาพวาดซึ่งจะมีการวาดภาพลงบนกระดาษก่อน เพื่อสร้ างภาพลวงตาของ การเคลือ่ นไหว แต่ละรูปวาดจะแตกต่างกันเล็กน้ อยหลายพันภาพ และฉายภาพเหล่านันผ่ ้ านกล้ องบันทึกภาพ หรื อกล้ องวิดีโอ เมื่อนาถูกเฟรมมาฉายต่อเนื่องกัน ทาให้ เกิดภาพเคลือ่ นไหว ซึง่ แบ่งเป็ น 2 รูปแบบ ดังนี ้ 1. แอนิเมชันชนิดเต็มรูปแบบ (Full Animation) เป็ นการวาดภาพที่ใส่รายละเอียดของตัวการ์ ตนู และฉากอย่างปราณีต เน้ นความสมจริ งของแอนิเมชัน 2. แอนิเมชั่นลดทอนรายละเอียด (Limited Animation) เป็ นการวาดที่จะไม่เน้ นความสมจริ ง เป็ นการวาดที่มีการลดทอนรายละเอียด ทาให้ ดเู ป็ นการ์ ตนู มากขึ ้น  การสร้ างแอนิเมชั่นแบบสต๊ อปโมชั่น (Stop Motion หรือเรียกว่ า Model Animation) สต็อปโมชัน (Stop Motion) มีพืน้ ฐานมาจาก Flip Book เป็ นการใช้ เทคนิคการถ่ายภาพหรื อวาด ที่พบมาก ได้ แก่ ภาพเคลื่อนไหวแบบหุ่นเชิด ภาพเคลื่อนไหวดินน ้ามัน เป็ นต้ น แอนิเมชั่นแบบนี ้ต้ องอาศัยเวลา ความ อดทนและความสามารถมากต้ องใช้ ทักษะทางศิลปะ และการถ่ายภาพ ทัง้ นี ้ เพราะหุ่นจาลอง หรื อสิ่งของ ประกอบฉากนัน้ หลายๆสิ่งมีการขยับหรื อเคลื่อนไหวไปพร้ อมๆ กัน ในหนึ่งภาพ สต็อปโมชันมีเทคนิคในการ ทาหลากหลายรูปแบบ เช่น 1. เคลย์ แอนิเมชัน (Clay Animation) เป็ นการทาแอนิเมชันโดยใช้ หนุ่ ที่ปัน้ ขึ ้นจากดินเหนียว ดินน ้ามัน ขี ้ผึ ้ง หรื อวัสดุอื่นๆ โดยใช้ โครงลวดไว้ ข้าง ในเพื่อดัดท่าทางได้ ตามต้ องการ

86

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

2. คัตเอาท์ แอนิเมชัน (Cutout Animation) เป็ นเทคนิคเก่าในการทางานคือ สมัยก่อนแอนิเมชันจะทาโดยใช้ กระดาษหรื อผ้ า ตัดเป็ นรู ปต่างๆ และ นามาขยับเพื่อถ่ายเก็บไว้ ทีละเฟรม แต่ปัจจุบนั ใช้ วิธีวาดหรื อสแกนภาพเข้ าไปขยับในคอมพิวเตอร์ ได้ เลย 3. กราฟิ กแอนิเมชัน (Graphic Animation) เป็ นการนากล้ องมาถ่ายภาพนิ่งต่างๆ ที่เราเลือกไว้ (จะเป็ นภาพจากนิตยสาร หนังสือพิมพ์ ฯลฯ) ทีละภาพ ทีละเฟรม แล้ วน ามาตัดต่อ เข้ าด้ วยกัน เหมือนเทคนิคคอลลาจ (Collage – ปะติ ด ) โดยอาจใช้ เทคนิ ค แอนิเมชันแบบอื่นมาประกอบด้ วยก็ได้ 4. โมเดลแอนิเมชัน (Model Animation) คือการทาตัวละครโมเดลขึ ้นมาขยับ แล้ วซ้ อนภาพเข้ ากับฉากที่มีคนแสดงจริ ง และแบ็คกราวนด์เหมือน จริ ง 5. พิกซิลเลชัน (Pixilation) เป็ นสต็อปโมชันที่ใช้ คนจริ งๆ มาขยับท่าทางทีละนิดแล้ วถ่ายไว้ ทีละเฟรม เทคนิคนี ้เหมาะมากถ้ าเราทา แอนิ เมชัน ที่มีหุ่น แสดงร่ วมกับคน และอยากให้ ทัง้ หุ่น ทัง้ คนดูเคลื่อนไหวคล้ ายคลึงกัน หรื อที่อยากได้ อารมณ์ไม่ราบลืน่ คล้ ายการถ่ายทีละเฟรม 6. แอนิเมชันที่เล่ นกับวัตถุอ่ ืนๆ (Object Animation) ไม่ว่าจะเป็ นของเล่น หุ่น ตุ๊กตา ตัวต่อเลโก้ ฯลฯ อะไรก็ตามที่ไม่ใช่วสั ดุซึ่งดัดแปลงรู ปร่ างหน้ าตาได้ แบบ ดินเหนียว

87

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

 การสร้ างแอนิเมชั่นด้ วยคอมพิวเตอร์ (Computer Animation) 1. ภาพเคลื่อนไหวแบบ 2 มิติ (2D Animation) คือแอนิเมชัน ที่สร้ างส่วนประกอบต่างๆ ของงานภาพกราฟิ ก 2 มิติ และตัดต่อบนคอมพิวเตอร์ สามารถ มองเห็นได้ ทงความสู ั้ งและความกว้ าง

2. ภาพเคลื่อนไหวแบบ 3 มิติ (3D Animation) เป็ นการทาแอนิเมชันด้ วยคอมพิวเตอร์ โดยใช้ โปรแกรม 3 มิติ เช่น Autodesk 3D Max, Autodesk Maya เป็ นต้ น

 Gif Animation เป็ นไฟล์ลกั ษณะพิเศษของไฟล์ภาพ GIF รู้ จักกันในรู ปแบบ GIF89a เป็ นไฟล์ชนิดแรกที่สามารถแสดงการ เคลื่อนไหวของภาพได้ บนเบราว์เซอร์ เทคนิคการสร้ างไฟล์ชนิดนีอ้ ย่างง่าย คือการวางภาพนิ่งหลายๆภาพ ต่อเนื่องกัน เมื่อบันทึกเป็ นไฟล์ .gif แล้ วจะแสดงภาพนิ่งจากภาพแรกไปเรื่ อยๆ จนหมดแล้ ววนใหม่ จะทาให้ เรา เห็นภาพเคลือ่ นไหวได้  SWF ถูกออกแบบมาเพื่อนาเสนอภาพกราฟิ กและแอนิเมชันบนเว็บไซต์ เป็ นการบีบอัดไฟล์จาก Macromedia Flash หรื อ Shockwave Flash สกุลของไฟล์ ช นิ ด นี ค้ ื อ .swf เป็ นไฟล์ ที่ มี ข นาดเล็ก จึงสะดวกสาหรั บ การน าเสนอ แอนิเมชันที่มีทงภาพและเสี ั้ ยงอย่างมีประสิทธิภาพบนเว็บ

88

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

บทที่ 11 การประยุกต์ใช้งานมัลติมีเดีย 1. การประยุกต์ ใช้ งานมัลติมีเดียกับงานด้ านอื่นๆ มัลติมีเดียถูกนาไปใช้ ประโยชน์อย่างแพร่ หลายในวงการธุรกิจและอุตสาหกรรม โดยเฉพาะได้ นามาใช้ ในการฝึ กอบรม และให้ ข้อมูลข่าวสาร ความบันเทิง ส่วนในวงการการศึกษามัลติมีเดียถูกนามาใช้ เพื่อการเรี ยนการสอนทังในและนอกระบบ ้ โรงเรี ยน ฉะนันจึ ้ งกล่าวได้ ว่ามัลติมีเดียได้ เข้ ามามีบทบาทในชีวิตประจาวันนของคนเรามากยิ่งขึ ้น โดยมีตวั อย่างการนาไปใช้ ประโยชน์ตอ่ งานด้ านต่างๆ ดังนี ้

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

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

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

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

89

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

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

ความสามารถในการแสดงผลแบบมัลติมีเดียทาให้ การศึกษาสภาพพื ้นที่ทางภูมิศาสตร์ สะดวกง่ายดายขึ ้น ผู้ใช้ สามารถ มองเห็ น สภาพพื น้ ที่ ได้ อ ย่างชัด เจน สามารถศึก ษาสภาพการเปลี่ยนแปลงทางภูมิ ศ าสตร์ ไ ด้ จากแบบจาลองที่ สร้ างจาก โปรแกรมคอมพิวเตอร์ นอกจากนี ้มัลติมีเดียทางภูมิศาสตร์ ยงั นามาใช้ ในชีวิตประจาวันของคนทัว่ ไปมากขึ ้น ตัวอย่างเช่น การ ใช้ Google Earth แสดงแผนที่ GPS (Global Positioning System) ในการศึกษาและวางแผนเส้ นทางการเดินทาง เป็ นต้ น

มัลติมีเดียช่วยเพิ่มช่องทางรู ปแบบใหม่ให้ แก่แวดวงการพิมพ์ จากกระดาษมาสู่ยุคของ E-Book และ E-Magazine ที่ ปั จจุบันมีออกมาอย่างแพร่ หลาย ทังในรู ้ ปแบบ CD/DVD –ROM หรื อ การเผยแพร่ ผ่านอินเทอร์ เน็ต อันจะส่งผลให้ สิ่งพิมพ์ ต่างๆ มีความน่าสนใจมากขึ ้น

นอกจากจะใช้ เป็ นสื่อประกอบการสอนของครู แล้ ว มัลติมีเดียยังช่วยลดข้ อจากัดทางการศึกษาด้ วย ไม่วา่ จะเป็ นการเปิ ด โลกกว้ างในการศึกษาค้ นคว้ าความรู้ ด้วยแหล่งข้ อมูลรู ปแบบใหม่ๆ เช่น ห้ องสมุดแบบดิจิทัล (Digital Library) พิพิธภัณ ฑ์ เสมือนจริ ง (Virtual Museum) หรื อช่วยในการเรี ยนการสอนที่ต้องการความปลอดภัย เช่น ห้ องปฏิบตั ิการเสมือนจริ ง (Virtal Lab) เป็ นต้ น

90

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

2. ฮาร์ ดแวร์ และซอฟท์ แวร์ ท่ นี ามาใช้ กับมัลติมีเดีย การพัฒนาฮาร์ ดแวร์ และซอฟท์แวร์ สาหรับมัลติมีเดียถูกกาหนดมาตรฐานโดย Multimedia Marketing Council (MMC) ซึ่งเป็ นคณะกรรมการที่ทาหน้ าที่ก าหนดมาตรฐานให้ กับเทคโนโลยีมลั ติมีเดียบนเครื่ องคอมพิวเตอร์ (Multimedia Personal Computer : MPC) ทาให้ การพัฒ นามัลติมีเดียของผู้ผลิตต่างๆ มีความเป็ นมาตรฐานสากล นอกจากนี ค้ ณะกรรมการยัง ประกอบด้ ว ยองค์ ก รต่า งๆ ได้ แ ก่ Creative Labs Inc, Fujitsu, Media Vision, Microsoft Corporation, NEC Technology, Olivetti, Consumer Electronic Co. และ Zenith Data System ร่ ว มกัน ท าหน้ าที่ ระบุรายละเอี ย ดเกี่ ย วกับ ฮาร์ ด แวร์ แ ละ ซอฟท์แวร์ ที่ใช้ สาหรับพัฒนา และแสดงผลมัลติมีเดียบนเครื่ องคอมพิวเตอร์ ฮาร์ ดแวร์ และซอฟท์แวร์ ที่นามาใช้ ในการแสดงผล มัลติมีเดีย ประกอบด้ วย หน่วยประมวลผลกลาง(CPU) ที่ทางานเร็ วจะทาให้ การตอบสนองคาสัง่ เป็ นไปอย่างรวดเร็ ว โดยCPU จะทาหน้ าที่ เก็ บข้ อมูลคาสัง่ และผลลัพธ์ ตลอดจนควบคุมและประสานงานทัง้ ระบบ ส่วนสาคัญ ของ CPU คือหน่วยควบคุม (Control Unit) มีหน้ าที่แปลความหมายของคาสัง่ ที่รับไปเก็บไว้ ในหน่วยความจา จัดลาดับการทางานให้ หน่วยต่างๆ และควบคุมการปฏิบตั ิงานของหน่วยอื่นๆ เช่น ควบคุมการรับและการส่งข้ อมูลไปยังอุปกรณ์อื่นๆ ควบคุมการบันทึก ข้ อมูล ควบคุมการนาข้ อมูลเข้ า-ออก จากหน่วยความจาหลัก เป็ นต้ น

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

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

91

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

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

ซาวนด์การ์ ด (Sound Card หรื อ Sound Board) หรื อแผงวงจรเสียงมีหน้ าที่หลักในการเก็บบันทึกเสียง และแสดงผล เสียงจากโปรแกรมสาหรับงานด้ านมัลติมีเดีย สามารถทาการบันทึกเสียงจากแหล่งกาเนิดเสียงต่างๆ เช่นไมโครโฟน เครื่ องดนตรี หรื อแหล่งกาเนิดเสียงอื่นๆ จากนันจะท ้ าการแปลงสัญญาณให้ อยู่ในรู ปแบบของดิจิทลั ซึ่งสามารถเก็บ ไฟล์เสียงไว้ ในหน่วยจัดเก็บข้ อมูลสารอง

ประกอบด้ วยคีย์บอร์ ด (Keyboard) สาหรับป้อนขอความหรื อตัวอักษรและเมาส์ (Mouse) ทาหน้ าที่ควบคุมการใช้ งานผ่านทางหน้ าจอ โดยสามารถเพิ่มอุปกรณ์รับข้ อมูลในรูปแบบอื่นได้ เช่น สแกนเนอร์ (Scanner) จะแปลงรูปภาพ บนกระดาษให้ อยู่ในรู ปแบบอิเล็กทรอนิกส์ และการ์ ดวิดีโอ (Video Capture Card) ทาหน้ าที่แปลงสัญญาณจาก อนาล็อก (Analog) ให้ เป็ นดิจิทลั (Digital) เพือ่ จัดเก็บข้ อมูลบนเครื่ องคอมพิวเตอร์ ได้

ล าโพงภายนอก )External Speaker) เป็ นส่ ว นส าคั ญ ที่ ส นั บ สนุ น ให้ มั ล ติ มี เ ดี ย คอมพิ ว เตอร์ ส ามารถเล่ น เสียงเพลง และเพิ่มคุณภาพในหลายระดับด้ วยกัน เช่น ระดับธรรมดา ระดับคุณภาพสูงที่ประกอบด้ วยทังล ้ าโพงเสียง แหลม ลาโพงเสียงกลางและลาโพงเสียงทุ้ม

สาหรับผลิตสื่อมัลติมีเดีย ได้ แก่ “Editing Software” ใช้ สาหรับแก้ ไข และจัดการองค์ประกอบของสื่อ เช่น โปรแกรม สาหรับแก้ ไขรู ปภาพ ได้ แก่ โปรแกรม Adobe Photoshop และ CorelDrawโปรแกรมสาหรับแก้ ไขไฟล์เสียง ได้ แก่ โปรแกรม Cool Edit และ Sound Forge โปรแกรมสาหรับ แก้ ไขไฟล์วิดีโอได้ แก่ โปรแกรม Adobe Premiere และ Adobe After Effect และโปรแกรมสาหรับสร้ างหนังแอนิเมชัน ได้ แก่โปรแกรม Adobe Flash และ 3D Studio Max

92

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

 ซอฟท์ แวร์ สาหรับสร้ างสื่อมัลติมีเดีย (Multimedia Authoring) เป็ นซอฟท์ แ วร์ ที่ ผนวกเอาสื่อ หลาย ๆ ชนิ ด (multimedia) เช่น ข้ อ ความ เสีย ง รู ป ภาพ รวมถึ งเทคนิ ค การ เคลื่อนไหวต่าง ๆ มาประกอบกันเพื่อให้ การนาเสนอมีความน่าสนใจมากยิ่งขึ ้น รวมถึงความสามารถในการ สร้ างชิ ้นงานประเภทสื่อปฏิสมั พันธ์ กบั ผู้ใช้ (interactive) ซึ่งทาให้ ผลงานที่ผลิตได้ มีความน่าสนใจและใช้ งาน ง่ายมากยิ่งขึ ้น เหมาะสาหรับการนาไปประยุกต์ใช้ กบั สือ่ บทเรี ยนคอมพิวเตอร์ ช่วยสอน การนาเสนองานขันสู ้ ง รวมถึงการจัดทา CD-Training ต่าง ๆ ด้ วย  ซอฟท์ แวร์ สาหรับการตัดต่ อวิดีโอและเสียง (Video and audio editing) เป็ นซอฟท์แวร์ ที่มีคณ ุ สมบัติหลัก ๆ คือ การจัดการเสียงและรู ปแบบไฟล์ที่เป็ นภาพเคลื่อนไหว เช่น การตัดต่อ วิดีโอ การผสมเสียง การสร้ างเอฟเฟ็ คต์สาหรับภาพเคลื่อนไหว เหมาะสาหรับใช้ กบั งานวงการตัดต่อภาพยนตร์ โทรทัศน์และสตูดิโอบันทึกเสียงต่าง ๆ

เช่ น Internet Explorer เป็ นต้ น จะเชื่ อ มต่อ กับ โปรแกรม Media Player เช่น QuickTime Movie Player หรื อ Real Media Player เป็ นต้ น เพื่อแสดงผลมัลติมีเดียบนเครื อข่ายอินเทอร์ เน็ตรวมทังโปรแกรมส ้ าหรับอ่านเอกสารต่างๆ เช่น Power Point Viewer หรื อ Adobe Reader การสร้ างเว็ บ มั ล ติ มี เ ดี ย สามารถสร้ างได้ จากโปรแกรมต่ า งๆ เช่ น Microsoft Front Page และ Dreamweaver ซึ่งสามารถสร้ างดารเชื่ อ มโยงกับ มัล ติ มี เดี ย ด้ วยภาษา HTML และ JavaScript เป็ นต้ น

93

เอกสารประกอบการสอนวิชา 229221 แนวคิดการออกแบบมัลติมีเดีย (Concepts of Multimedia Design)

บรรณานุกรม ณัฐกร สงคราม. 2557. การออกแบบและพัฒนามัลติมีเดียเพื่อการเรี ยนรู้ . กรุงเทพฯ : สานักพิมพ์แห่งจุฬาลงกรณ์ มหาวิทยาลัย. ณรงค์ ลา่ ดี. 2550. การออกแบบอินเตอร์ เฟส (Interface Design).กรุงเทพฯ : เคทีพี คอมพ์ แอนด์คอนซัลท์. ทวีศกั ดิ์ กาญจนสุวรรณ. 2546. Multimedia ฉบับพื ้นฐาน. กรุงเทพฯ : เคทีพี คอมพ์ แอนด์ คอนซัลท์ จากัด. วรลักษณ์ วงศ์โดยหวัง ศิริเจริ ญ. 2557. ปฏิสมั พันธ์ระหว่างคอมพิวเตอร์ กบั มนุษย์ สุวิช ถิระโคตร. 2554. เว็บไซต์:ทฤษฎีและหลักการ. มหาสารคาม : มหาวิทยาลัยมหาสารคาม.

David Sherwin. Creative Workshop. 2557. นนทบุรี: ไอดีซีฯ.

Dix, A.J., Finlay, J.E., Abowd, G.D., Beale, R. Human-Computer Interaction. 3rd ed. Prentice Hall Europe, 2004.

Ben Shneiderman and Catherine Plaisant, Designing the User Interface, Pearson Education, 2005.

Nielsen Jacob. Designing Web Usability. Indianapolis: Newriders Publishing, 2000

94