บทที่ 1: บทนํา 1

บทที่ 1 บทนํา

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

วัตถุประสงค์
1. รับทราบถึงความหมายของการออกแบบของส่วนติดต่อผู้ใช้
2. รับทราบถึงความสําคัญของส่วนติดต่อผู้ใช้
3. รับทราบถึงประวัติโดยย่อของการออกแบบส่วนติดต่อผู้ใช้

1. User Interface คือ ?

User Interface (UI) คือ ส่วนติดต่อผู้ใช้งาน ซึ่งเป็นสิ่งที่สําคัญมากในระบบคอมพิวเตอร์ทุกประเภท
เป็นศาสตร์หนึ่งที่เป็น subset ของ Human-Computer Interactive (HCI) ซึ่งเป็นการศึกษา การวางแผน
และการออกแบบวิธีการที่มนุษย์และคอมพิวเตอร์สามารถทํางานร่วมกันได้อย่างมีประสิทธิภาพสูงสุด นัก
ออกแบบ HCI จะต้ อ งคํ า นึ ง ถึ ง ปั จ จั ย หลายอย่ า ง ได้ แ ก่ มุ ม มองและสิ่ ง ที่ ม นุ ษ ย์ ต้ อ งการ ข้ อ จํ า กั ด เชิ ง
ความสามารถและเชิงกายภาพของมนุษย์ กระบวนการจัดการข้อมูลของระบบ และวิธีการที่ดึงดูดให้มนุษย์
สามารถใช้งานระบบได้อย่างดี ซึ่งแน่นอนว่า HCI จะคํานึงถึงข้อจํากัดและคุณลักษณะของทั้ง Software และ
Hardware
ส่วนติดต่อผู้ใช้งานเป็นเพียงส่วนหนึ่งของคอมพิวเตอร์ในแง่ของ Software ที่มนุษย์จะสามารถรับรู้
ผ่านการมองเห็น การได้ยิน การสัมผัส การพูดคุย หรือวิธีการใด ๆ ที่ทําให้มนุษย์และคอมพิวเตอร์สามารถ
สื่อสารกันได้ทั้งทางตรงและทางอ้อม โดยส่วนติดต่อผู้ใช้งานจะเป็นตัวกลางระหว่างคอมพิวเตอร์และมนุษย์
(ดังภาพที่ 1.1) ซึ่งส่วนติดต่อผู้ใช้งานจะประกอบด้วยข้อมูล 2 ส่วนหลัก ๆ คือ ข้อมูลนําเข้า และข้อมูลนํา
ออก
บทที่ 1: บทนํา 2
 

ภาพที่ 1.1 ตําแหน่งของส่วนติดต่อผู้ใช้งาน

1.1 Input คือ ?
Input หรือข้อมูลนําเข้า เป็นข้อมูลที่คอมพิวเตอร์จะต้องนําไปประมวลผล ซึ่งคอมพิวเตอร์จะ
รับข้อมูลผ่านวิธีการที่มนุษย์จะติดต่อสื่อสารโดยการแสดงความต้องการของตนเองไปยังคอมพิวเตอร์ ตัวอย่าง
เครื่องมือในการรับข้อมูลนําเข้า เช่น Keyboard, Mouse, Trackball, นิ้ว และเสียง
1.2 Output คือ ?
Output หรือข้อมูลนําออก เป็นข้อมูลที่ได้จากการประมวลผลของคอมพิวเตอร์ ซึ่งแสดงผล
ผ่านวิธีการที่คอมพิวเตอร์จะแสดงผลลัพธ์ในการประมวลผลออกมา ซึ่งข้อมูลดังกล่าวคือสิ่งที่มนุษย์ต้องการ
ปัจจุบันวิธีการแสดงผลข้อมูลนําออกโดยทั่วไป คือ หน้าจอ หรือ Display Screen ซึ่งเป็นวิธีการที่มีประโยชน์
แก่มนุษย์ที่บกพร่องด้านการฟัง

ภาพที่ 1.2 ทิศทางของข้อมูลนําเข้าและข้อมูลนําออก

การออกแบบส่วนติดต่อผู้ใช้งานที่ดีจะต้องมีการผสมผสานกลไกในการรับข้อมูลนําเข้า และข้อมูลนํา
ออก ที่รองรับความสามารถ และข้อจํากัดของผู้ใช้งานได้มากที่สุดเท่าที่จะทําได้ และตรงตามความต้องการ
ของผู้ใช้งาน โดยข้อมูลนําเขข้าและข้อมูลนําออกจะมีทิศทางการไหลดังภาพที่ 1.2
บทที่ 1: บทนํา 3
 

2. ทําไมส่วนติดต่อผู้ใช้งานจึงมีความสําคัญ ?
ส่วนติดต่อผู้ใช้งานมีความสําคัญ เพราะระบบคอมพิวเตอร์นั้นเป็นการประมวลผลของชุดคําสั่ง
(Source Codes) จํานวนมาก ผู้ใช้งานทั่วไปจึงไม่สามารถเข้าถึงหรือสั่งการได้ ดังนั้นส่วนติดต่อผู้ใช้งานจึง
เป็นส่วนที่ช่ว ยให้ผู้ใ ช้งานสามารถติดต่อ (ผ่านการมองเห็น การได้ยิน หรือการส่ง-รับข้อมูล ) กับระบบ
คอมพิวเตอร์ได้
ในการพัฒนาส่วนติดต่อผู้ใช้งานจําเป็นต้องอาศัยหลักการออกแบบ โดยพื้นฐานของการออกแบบ
ส่วนติดต่อผู้ใช้งานนั้นต้องทําให้ส่วนติดต่อผู้ใช้งานสามารถตอบคําถามได้ 3 ข้อ คือ
1) จะมีหน้าตาหรือสื่อให้รับรู้อย่างไร เน้นที่ด้านการมองเห็น
2) ส่วนติดต่อผู้ใช้งานจะสามารถทําให้ผใู้ ช้งานเข้าใจว่าแต่ละส่วนที่ปรากฏในส่วนติดต่อผู้ใช้งานคือ
อะไร และสื่อว่าอย่างไร
3) ส่วนติดต่อผู้ใช้งานจะสามารถทําให้ผใู้ ช้งานมีปฏิสัมพันธ์กับมันได้อย่างไร
ถ้าส่วนติดต่อผู้ใช้งานนั้นไม่ผ่านการออกแบบที่ดีจะเกิดปัญหา เช่น
 ระบบไม่สามารถแสดงข้อมูลที่ถูกต้อง และ/หรือครบถ้วน
 ผู้ใช้งานสับสน ไม่สามารถเข้าใช้งานระบบได้
 ผู้ใช้งานเกิดความรู้สึกไม่อยากใช้งานระบบอีก

3. ประวัติโดยย่อและความเป็นมาของส่วนติดต่อผู้ใช้งาน
ส่วนติดต่อผู้ใช้งานสามารถแบ่งเป็นยุคได้ 3 ประเภทหลัก ๆ ได้แก่ 1) ยุคของระบบคอมพิวเตอร์
(System) 2) ยุคของเวิลด์วายเว็บ (WWW) และ 3) ยุคของอุปกรณ์เคลื่อนที่ (Mobile) แสดงดังภาพที่ 1.3

ภาพที่ 1.3 ยุคของการพัฒนาส่วนติดต่อผู้ใช้งาน

บทที่ 1: บทนํา 4
 

ยุคเริ่มต้นของการออกแบบส่วนติดต่อผู้ใช้งานจะเริ่มต้นจากการออกแบบส่วนติดต่อผู้ใช้งานระหว่าง
มนุษย์และระบบคอมพิวเตอร์ทั่วไป โดยคําว่าระบบคอมพิวเตอร์จะหมายถึงซอฟต์แวร์ที่ติดตั้งบนคอมพิวเตอร์
โดยเริ่มต้นในปี ค.ศ. 1962 Steve Russell (ภาพที่ 1.5 (A)) ได้พัฒนาเกมส์คอมพิวเตอร์ (1st Computer
Game Spacewar) ซึ่งเป็นจุดเริ่มต้นของการออกแบบส่วนติดต่อผู้ใช้งาน (ภาพที่ 1.5 (B)) ซึ่งจะพบว่าในยุค
นี้ส่วนติดต่อผู้ใช้งานจะเน้นความเรียบง่าย มีองค์ประกอบในหน้าจอน้อย และเป็นส่วนติดต่อผู้ใช้งานที่ถูก
ออกแบบมาเพื่อตอบสนองต่อการทํางานเพียงเรื่องเดียว ส่งผลให้ยากต่อการทําความเข้าใจของผู้ใช้งาน

(A) (B)
ภาพที่ 1.5 1st Computer Game Spacewar
ปี ค.ศ. 1964 Douglas Engelbart (ภาพที่ 1.6 (A)) ได้พัฒนาเมาส์ชิ้นแรกของโลก (ภาพที่ 1.6 (B))
ซึ่งเมาส์เป็นหนึ่งในประเภทของอุปกรณ์สําหรับรับข้อมูลนําเข้าที่ช่วยอํานวยความสะดวกให้แก่มนุษย์ในการ
ใช้งานส่วนติดต่อผู้ใช้งานได้มาก

(A) (B)
ภาพที่ 1.6 เมาส์ชิ้นแรกของโลก
ยุค 1970 เป็นยุคเริ่มต้นที่มีการใช้งานหน้าจอ โดย Bob Frankston และ Dan Bricklin (ภาพที่ 1.7
(A)) ได้พัฒนา VisiCalc (ภาพที่ 1.7 (B)) คือ แผ่นตารางทําการที่ใช้ในโปรแกรมด้านการคํานวณอันแรกของ
โลก โดยทั้งสองคนได้รับขนานนามว่าเป็นบิดาแห่งแผ่นตารางทําการ (The Father of the Spreadsheet)
โดยโปรแกรมดังกล่าวถือว่าเป็นส่วนติดต่อผู้ใช้งานแบบใช้คําสั่ง (Command Line Interface)
บทที่ 1: บทนํา 5
 

(A) (B)
ภาพที่ 1.7 ส่วนติดต่อผู้ใช้งานแบบใช้คําสั่ง

ต่ อ มาบริ ษั ท IBM ได้ นํ า เสนอส่ ว นติ ด ต่ อ ผู้ ใ ช้ ง านที่ เ ป็ น ตั ว หนั ง สื อ (Text-based UI) ที่ ใ ช้ ง านใน
สํานักงานและองค์กรเฉพาะ จากภาพที่ 1.8 จะเห็นว่าการออกแบบในยุคนี้มีเพียงตัวหนังสือที่เป็นส่วนแนะนํา
การใช้งานเท่านั้น แล้วผู้ใช้งานจะต้องจดจําและกรอกข้อมูลเอง และการใช้สีส่วนใหญ่จะเป็นการใช้สีโทน
เดียว (Monochrome) เช่น สีดํา สีขาว เป็นต้น

ภาพที่ 1.8 ส่วนติดต่อผู้ใช้งานยุค 1970

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

เอื้อต่อการใช้งานของผู้ใช้งานมากยิ่งขึ้น เช่น มีการจัดกลุ่มข้อมูล และเริ่มมีการใช้งานปุ่ม Function มากขึ้น
ดังภาพที่ 1.9
บทที่ 1: บทนํา 6
 

ภาพที่ 1.9 ส่วนติดต่อผู้ใช้งานยุค 1980

ต่ อมาได้มี การพั ฒนาส่ วนติ ด ต่อผู้ใ ช้แ บบใช้ ก ราฟิ กขึ้น เป็นครั้ งแรก หรือเรียกว่า Graphic User
Interface (GUI) โดยระบบคอมพิวเตอร์ที่มีการใช้งานกราฟิกในการออกแบบส่วนติดต่อผู้ใช้เป็นเครื่องแรก
คือ Xerox Star computer (ดังภาพที่ 1.10(A)) ผลิตโดยบริษัท Xerox
แต่ทว่าส่วนติดต่อผู้ใช้แบบใช้กราฟิกและประสบความสําเร็จมาก คือ Lisa จากบริษัท Apple Inc.
(ภาพที่ 1.10 (B)) พัฒนาโดย Steve Jobs (ภาพที่ 1.10 (C)) ซึ่งปัจจัยที่ทําให้ส่วนติดต่อผู้ใช้แบบใช้กราฟิก
ของ Lisa ประสบความสํ า เร็ จ มาก เนื่ อ งจากการใช้ ห ลั ก การของ WIMP (Windows , Icons, Menus,
Pointer) ซึ่งเป็นการสร้างหน้าต่าง (Windows) ที่ประกอบด้วยภาพสัญลักษณ์ไอคอน (Icons) เมนู (Menus)
และตัวชี้ (Pointer) ที่ช่วยให้ผู้ใช้สามารถใช้งานส่วนติดต่อผู้ใช้ได้ง่ายขึ้นมาก

(A)
บทที่ 1: บทนํา 7
 

(B) (C)
ภาพที่ 1.10 Graphic User Interface
ยุค 1990 เริ่มมีการพัฒนาการออกแบบส่วนติดต่อผู้ใช้งานมากขึ้นดังภาพที่ 1.11 แม้ว่าหลัก ๆ แล้ว
ยังมีความเหมือนยุคก่อนหน้า แต่มีการใช้เส้นเพื่อจัดกลุ่มชุดข้อมูลมากขึ้น ส่งผลให้ผู้ใช้สามารถเห็นและ
เชื่อมโยงข้อมูลในกลุ่มเดียวกันได้ดีขึ้น มีการใช้ปุ่ม (Buttons) เมนู (Menus) และกล่องข้อความ (Text Box)
เพื่ออํานวยความสะดวกให้แก่ผู้ใช้งานในการกรอกข้อมูลมากยิ่งขึ้น รวมถึงมีการใช้ขนาด สี และรูปแบบของ
ฟอนต์ตัวอักษรที่แตกต่างกัน

ภาพที่ 1.11 ส่วนติดต่อผู้ใช้งานยุค 1990

บทที่ 1: บทนํา 8
 

โดยยุค 1990 เป็นยุคที่มีจุดเริ่มต้นสู่การ

ใช้งานเวิลด์วายเว็บ (World Wide Web: WWW)
หรื อ ที่ เ รามั ก เรี ย กสั้ น ๆ ว่ า Web หรื อ W3
(WWW) คือ คอมพิวเตอร์ส่วนหนึ่งบนอินเตอร์เน็ต
ที่ถูกเชื่อมต่อกันในแบบพิเศษที่ทําให้คอมพิวเตอร์
เหล่านั้นสามารถเข้าถึงข้อมูลเนื้อหาที่เก็บไว้ภายใน
ของแต่ละเครื่องได้ (กลายเป็นแหล่งข้อมูลขนาด
ใหญ่) โดยผ่านทาง บราวเซอร์ (Browser) ซึ่งเป็น
ซอฟต์ แ วร์ ป ระเภทหนึ่ ง ที่ ถู ก สร้ า งขึ้ น เพื่ อ ใช้ อ่ า นและตอบโต้ ข้ อ มู ล ต่ า งๆที่ มี อ ยู่ ใ น World Wide Web
โดยเฉพาะ บราวเซอร์ที่พบเห็นได้มากที่สุดในปัจจุบัน (ดังภาพที่ 1.12) ได้แก่ Google Chrome, Mozilla
Firefox, Internet Explorer และ Netscape เป็นต้น 

ภาพที่ 1.12 บราวเซอร์ในปัจจุบัน

World Wide Web ถือกําเนิดขึ้นเป็นครั้งแรกโดยมีโครงการทางวิชาการในการแลกเปลี่ยนข้อมูล
ข่าวสารระหว่างนักวิทยาศาสตร์ในทวีปยุโรป โดยมีศูนย์กลางอยู่ที่ CERN ซึ่งเป็นศูนย์วิจัยทางนิวเคลียร์ฟิสิกส์
ที่ประเทศสวิตเซอร์แลนด์ ผู้ที่ได้รับเกียรติเป็นบิดาของเวิร์ลไวด์เว็บได้แก่ Tim Berners-Lee (ภาพที่ 1.13) ที่
ได้คิดโครงการเชื่อมโยงข้อมูลข่าวสารขึ้นมา โดยใช้ระบบไฮเปอร์เท็กซ์ (Hypertext) และโครงการของเขาก็
ได้รับความนิยมขึ้นเรื่อยจนเขากลายเป็นผู้สร้างประวัติศาสตร์ไป ปัจจุบันนี้ Berners-Lee ทํางานอยู่ที่ World
Wide Web Consortium หรือชื่อย่อว่า W3C ซึ่งเป็นองค์กรศูนย์กลางของเครือข่ายใยแมงมุมทําหน้าที่รับ
รอบมาตรฐานต่าง ๆ ของระบบทั้งหมด
บทที่ 1: บทนํา 9
 

ภาพที่ 1.13 Tim Berners-Lee

โดยในการใช้งาน World Wide Web ในยุคนี้ยังคงใช้ส่วนติดต่อผู้ใช้งานผ่านอุปกรณ์คอมพิวเตอร์
ดังนั้นองค์ประกอบโดยทั่วไปยังคงคล้ายคลึงกับส่วนติดต่อผู้ใช้งานของระบบซอฟต์แวร์

ภาพที่ 1.14 เครื่องมือสําหรับใช้ในการออกแบบส่วนติดต่อผู้ใช้งาน

โดยส่วนติดต่อผู้ใช้งานของ World Wide Web จะมีการใช้งานกราฟิก และมัลติมิเดีย (Multimedia)

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

ในยุคเดียวกับการถือกําเนิดของ World Wide Web เริ่มมีการพัฒนาอุปกรณ์คอมพิวเตอร์รูปแบบ

ใหม่ขึ้น เรียกว่า คอมพิวเตอร์แบบพกพาหรือแบบเคลื่อนที่ (Mobile Device) โดยในปี 1991 ได้มีการพัฒนา
อุปกรณ์เคลื่อนที่เครื่องแรกของโลกที่ใช้การติดต่อผู้ใช้งานแบบสัมผัส (Touch Interface) ดังภาพที่ 1.15

ภาพที่ 1.14 Mobile Touch Interface

ส่ ว นติ ด ต่ อ ผู้ ใ ช้ ใ นยุ ค นี้ จ ะใช้ รู ป แบบการสั ม ผั ส ที่ เ กิ ด จาการใช้

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

ในปี 2003 ได้มีการพัฒนาต่อยอดส่วนติดต่อแบบสัมผัสโดยใช้นิ้วมือของมนุษย์ (Finger Works)

หรือ Touchscreen Interface (ดังภาพที่ 1.15) โดยนิ้วมือนั้นสามารถใช้เพื่อเป็นตัวชี้ และยังสั่งการควบคุม
การเปลี่ยนแปลงหน้าจอได้ (Gesture based Interface) เช่น การย่อ-ขยายหน้าจอ การหมุน การเลื่อน (ดัง
ภาพที่ 1.16)
บทที่ 1: บทนํา 11
 

ภาพที่ 1.15 Touchscreen Interface

ภาพที่ 1.16 Gesture based Interface

บทที่ 1: บทนํา 12
 

เทรนด์การออกแบบส่วนติดต่อผู้ใช้
1. Skeuomorphic คือ การจําลองของจริง ซึ่งในการสร้างคอมพิวเตอร์ให้คนทั่วไปใช้ในยุคแรก ผู้ออกแบบ
ส่วนติดต่อผู้ใช้พยายามจําลอง "โลกจริง" มาลงในเครื่อง เพื่อให้คนคุ้นเคย เช่น มีถังขยะ เก็บงานไว้ใน
แฟ้ม (Folder/Directory) มีพื้นโต๊ะ (Desktop) เอาไว้วางของ คนเลยคุ้นเคยได้ว่า จะจัดการไฟล์ต่าง ๆ
อย่างไร จะมีปฏิสัมพันธ์กับสิ่งของต่าง ๆ อย่างไร (เช่น จับไฟล์ลากไปแฟ้มอื่น จับไฟล์ลากลงถังขยะ
ฯลฯ) แต่ทว่าอจํากัดในการ "ปฏิสัมพันธ์" กับสิ่งต่าง ๆ เหล่านั้น เช่น ถ้าเราเห็นปุ่มเหมือนจริง เราก็คิดว่า
มันควรจะแค่ "กด" ได้อย่างเดียว เพราะปุ่มจริ งๆ ไม่สามารถปาดซ้ายขวา หรือ เขย่า หรือ เอียง ฯลฯ ได้
ทําให้เราไม่สามารถพัฒนาการโต้ตอบแบบใหม่ๆ ได้

ภาพที่ 1.17 การออกแบบตามรูปแบบ Skeuomorphic

ที่มา: จักรกฤษณ์ ตาฬวัฒน์. SeedThemes

2. Flat Design เป็ นเทรนด์การออกแบบรู ปแบบใหม่ที่ม าพร้อมการเปิ ดตั ว ของ iOS7 เป็ นแนวคิด การ
ออกแบบที่ ทํ า เว็ บ ไซต์ แ บบสะอาด ๆ เรี ย บ ๆ ไม่ เ น้ น Effect มาก ก่ อ นหน้ า นี้ ค นจะชอบแบบ
Skeuomorphism (แบบสมจริง เช่น ใช้ลายไม้ในการออกแบบแอพอ่านหนังสือ หรือใช้รูปไมโครโฟนใน
การออกแบบแอพอัดเสียง) หรือในไทยก็ชอบแบบ Web 2.0 ที่เน้นการใส่เงา, Gradient เยอะ ๆ ซึ่งเว็บ
บทที่ 1: บทนํา 13
 

ดีไซเนอร์ไทยก็ยังติด Web 2.0 อยู่มาก พวกหนังสือสอนเว็บดีไซน์ส่วนใหญ่ก็ไปแนวนั้นหมด พอมาถึงยุค

ของ Flat Design เป็นการตัดรายละเอียดหลาย ๆ อย่าง พวกการใช้เงา การไล่ Gradient ออกไป ซึ่งจะ
เน้ น การใช้ สี / รู ป ทรงเพื่ อ แสดงว่ า ส่ ว นไหนสํ า คั ญ ในเว็ บ ไซต์ มากกว่ า เมื่ อ ก่ อ นที่ ปุ่ ม ในเว็ บ ต้ อ งไล่
Gradient เด่น ๆ เพื่อให้ปุ่มดูนูนและคนมองเห็นได้ง่าย

ภาพที่ 1.18 ตัวอย่างการดีไซน์เว็บแบบ Flat Design – เว็บไซต์ Mediatemple.net

อย่างไรก็ตาม บางคนมองว่า Flat Design อาจดูธรรมดาเกินไป หรือดูไม่มีความลึกในงานดีไซน์ จึงมี
บางส่วนที่ดีไซน์เป็นแนว Almost Flat Design คือ ไม่ได้เรียบ ๆ ไปหมด แต่บางส่วนมีการใช้ Gradient มา
ช่วยทําให้ดูเด่นขึ้น หรือมีการใช้รูปถ่ายจริงร่วมกับปุ่มแบบ Flat สร้างความแปลกใหม่

ภาพที่ 1.19 ตัวอย่างงานดีไซน์แบบ Long Shadow – รูปประกอบจากเว็บไซต์ unlimitedtricks.com

3. Material Design ซึ่งเป็นหลักที่ใช้ดีไซน์ Product ในเครือ Google ทั้งหมด โดยเน้นการแสดงความลึก
ของสิ่งต่าง ๆ ด้วยแสงเงา เลียนแบบเงาของจริง
บทที่ 1: บทนํา 14
 

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

ภาพที่ 1.20 หลักการออกแบบของ Material Design

บทที่ 1: บทนํา 15
 

แบบฝึกหัด
1) ส่วนติดต่อผู้ใช้งานคืออะไร และมีความสําคัญอย่างไร
2) จงอธิบายถึงปัญหาของส่วนติดต่อผู้ใช้งานที่พบได้ในปัจจุบัน
3) ส่วนติดต่อผู้ใช้งานแบ่งออกเป็นกี่ยุค แต่ละยุคมีความโดดเด่นอย่างไร
4) ส่วนติดต่อผู้ใช้งานในยุค 1970 มีคุณลักษณะอย่างไร มีข้อดี/ข้อเสียอย่างไร
5) หลักการของส่วนติดต่อผู้ใช้งานแบบกราฟิก (Graphic User Interface) คืออะไร คิดค้นโดยใคร
6) จากตัวอย่าง จงอภิปรายว่าส่วนติดต่อผู้ใช้งานดังกล่าวสามารถตอบคําถาม 3 ข้อของพื้นฐานการออกแบบ
ส่วนติดต่อผู้ใช้งานได้หรือไม่ อย่างไร

6.1

6.2
บทที่ 1: บทนํา 16
 

6.3
บทที่ 2: ประเภทของส่วนติดต่อผู้ใช้และหลักการออกแบบส่วนติดต่อผู้ใช้ 14
 

บทที่ 2 ประเภทของส่วนติดต่อผู้ใช้และหลักการออกแบบส่วนติดต่อผู้ใช้

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

วัตถุประสงค์
1. รับทราบถึงประเภทของส่วนติดต่อผู้ใช้
2. รับทราบถึงลักษณะของส่วนติดต่อผู้ใช้งานแบบกราฟิก
3. รับทราบถึงส่วนติดต่อผู้ใช้ของเว็บไซต์
4. รับทราบถึงกระบวนการหลักในการออกแบบส่วนติดต่อผู้ใช้งาน

1. ประเภทของส่วนติดต่อผู้ใช้ (Characteristics of User Interface)

การโต้ตอบด้วย UI มีรูปแบบหลัก ๆ คือ
 การโต้ตอบด้วยภาษามนุษย์ (Natural Language Interaction: NLI)
การโต้ตอบด้วยภาษามนุษย์ เป็นการโต้ตอบโดยผู้ใช้งานจะใช้ภาษามนุษย์ หรือภาษาธรรมชาติ
เช่น ภาษาเขียน หรือเสียงเป็น input ไปยังระบบ และระบบจะประมวลผลกลับมาเป็น output
การโต้ ต อบประเภทนี้ ส่ ว นใหญ่ จ ะถู ก นํ า มาใช้ ใ นเทคโนโลยี ด้ า นปั ญ ญาประดิ ษ ฐ์ (Artificial
Intelligent: AI) เช่น Siri ที่สามารถใช้งานได้ในระบบปฏิบัติการ iOS ดังภาพที่ 2.1
ข้อดี
1) ใช้งานง่าย ไม่ซับซ้อน ผู้ใช้งานไม่จําเป็นต้องศึกษารูปแบบคําสั่งในการสั่งงาน เนื่องจากใช้
งานได้ง่าย ดังนั้นผู้ใช้งานทุกประเภท ไม่ว่าจะมีประสบการณ์หรือไม่ก็สามารถใช้งานได้
ข้อเสีย
1) การพัฒนาต้องใช้เทคโนโลยีขั้นสูง เนื่องจากต้องแปลงจากภาษามนุษย์ให้กลายเป็นภาษา
ของระบบคอมพิวเตอร์
บทที่ 2: ประเภทของส่วนติดต่อผู้ใช้และหลักการออกแบบส่วนติดต่อผู้ใช้ 15
 

ภาพที่ 2.1 Siri

 การโต้ตอบด้วยคําสั่ง (Command Language Interaction: CLI)
การโต้ ต อบด้ ว ยคํ า สั่ ง หรื อ Command เป็ น การโต้ ต อบโดยผู้ ใ ช้ ง านจะต้ อ งใช้ คํ า สั่ ง ที่ เ ป็ น
ตัวอักษร (String) ผ่านคีย์บอร์ดสําหรับเป็นข้อมูลนําเข้าสู่ระบบ และระบบจะแสดงข้อมูลนําออกผ่าน
หน้าจอ เช่น Command Line Interface ดังภาพที่ 2.2

ภาพที่ 2.2 Command Line Interface

ข้อดี
บทที่ 2: ประเภทของส่วนติดต่อผู้ใช้และหลักการออกแบบส่วนติดต่อผู้ใช้ 16
 

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

 การโต้ตอบด้วยกราฟิก (Graphics User Interfaces: GUI)

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

ภาพที่ 2.3 การโต้ตอบด้วยกราฟิก

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

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

2. ส่วนติดต่อผู้ใช้งานแบบกราฟิก (Graphics USER Interface: GUI)

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

ภาพที่ 2.4 Text-based User Interface

บทที่ 2: ประเภทของส่วนติดต่อผู้ใช้และหลักการออกแบบส่วนติดต่อผู้ใช้ 18
 

ภาพที่ 2.5 Graphic User Interface

จากภาพที่ 2.4 และ 2.5 จะพบว่ า ส่ ว นติ ด ต่ อ ผู้ ใ ช้ ง านที่ ใ ช้ ตั ว อั ก ษร (Text-based User
Interface) จะใช้ตัวอักษรล้วนซึ่งไม่ดึงดูดให้ใช้งาน และยากต่อการพิจารณาว่าต้องส่งข้อมูลนํา
ออกผ่านองค์ประกอบใด แต่ในภาพที่ 2.5 จะเห็นการใช้องค์ประกอบต่าง ๆ ในการรับข้อมูล
ข้อมูล และแสดงผลข้อมูลชัดเจน ทําให้ผู้ใช้งานรู้สึกอยากใช้งานมากกว่า
2) ภาพที่เป็นสัญลักษณ์สามารถทําให้เกิดการเรียนรู้ได้เร็วขึ้น เช่น

ภาพที่ 2.6 การเรียนรู้จากภาพสัญลักษณ์

จากภาพที่ 2.6 มนุ ษ ย์ สามารถเรียนรู้และจดจํ าจากภาพสัญ ลักษณ์ไ ด้ ดี เนื่ อ งจากภาพ

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

ลักษณะของส่วนติดต่อผู้ใช้งานแบบกราฟิก
1) การนําเสนอสิ่งที่มีความซับซ้อน (Sophisticated Visual Presentation)
การนําเสนอภาพ คือการสร้างส่วนติดต่อผู้ใช้งานที่ทําให้ผู้ใช้งานสามารถรับรู้ผ่านการมองเห็น
หน้าจอ โดยการนําเสนอความซับซ้อนของภาพกราฟิกจะต้องใช้เส้น ภาพวาด สัญลักษณ์ ซึ่งอาจใช้
รู ป แบบตั ว อั ก ษร สี และขนาดที่ มี ค วามแตกต่ า งกั น หรื อ สามารถนํ า เสนอข้ อ มู ล ผ่ า นภาพถ่ า ย
ภาพเคลื่อนไหว หรือวิดิโอ
ส่วนติดต่อผู้ใช้งานที่สามารถสื่อสารผ่านกราฟิก นั้นจะมีหน้าต่าง (Windows) เมนู (Menu bar,
pull-down, pop-up, cascading) สัญลักษณ์หรือไอคอน (Icon) ส่วนรับข้อมูลนําเข้า (text box,
list box, combination box, scroll bars, button) โดยวัตถุประสงค์ของรูปแบบการนําเสนอสิ่งที่
มีความซับซ้อนคือเพื่อแสดงภาพให้ผู้ใช้งานสามารถรับรู้ เข้าใจความหมายได้อย่างถูกต้อง ชัดเจน
และสมจริงที่สุด
2) การโต้ตอบแบบเลือกและคลิก (Pick-and-Click Interaction)
ส่วนติดต่อผู้ใช้งานแบบกราฟิกจะต้องคําถึงถึงปฏิสัมพันธ์ที่ผู้ใช้งานจะมีต่อระบบ โดยสิ่งที่ผู้ใช้
ต้องแสดงความต้องการใช้งานของตนอย่างแรก คือ การเลือก (Pick) จากนั้นเมื่อผู้ใช้งานต้องการ
สื่อสารกับระบบว่าเขาได้เลือกแล้วจะต้อง คลิก (Click) โดยการเลือกและการคลิกเป็นปฏิสัมพันธ์
พื้นฐานที่ผู้ใช้งานจะกระทํากับส่วนติดต่อผู้ใช้งานโดยมากจะใช้ผ่านพอยเตอร์ (Pointer) เมาส์หรือ
คีย์บอร์ด
3) การใช้วัตถุ (Object Orientation)
ส่วนติดต่อผู้ใช้งานแบบกราฟิกจะประกอบด้วยวัตถุ (Object) และปฏิสัมพันธ์ (Action) โดยวัตถุ
คือสิ่งที่ผู้ใช้งานสามารถมองเห็นได้บนหน้าจอ ซึ่งวัตถุต่างๆจะต้องถูกผสมผสานให้กลมกลืนเป็นหนึ่ง
เดียว การออกแบบที่ดีจะทําให้ผู้ใช้งานสามารถโฟกัสไปที่วัตถุเหล่านั้นได้และจะทําให้สามารถเข้าใจ
วิธีการมีปฏิสัมพันธ์กับวัตถุเหล่านั้นได้

3. ส่วนติดต่อผู้ใช้ของเว็บไซต์ (The Web User Interface)

Web User Interface หรือส่วนติดต่อผู้ใช้งานสําหรับเว็บ เริ่มมีการใช้กราฟิกมากขึ้นเรื่อย ๆ โดยการ
ออกแบบส่วนติดต่อผู้ใช้งานสําหรับเว็บ คือ การออกแบบการนําทาง (Navigation) และการนําเสนอข้อมูลใน
เว็บนั้น ๆ โดยการออกแบบส่วนติดต่อผู้ใช้งานสําหรับเว็บ ที่ดีจะต้องออกแบบให้วัตถุแต่ละอย่างในหน้าเว็บ
นั้นเกิดความสมดุล ไม่ว่าจะเป็นเมนู เนื้อหา เอกสาร และกราฟิกอื่น ๆ ที่จะต้องมีความกลมกลืน เชื่อมโยงกัน
เป้าหมายของการออกแบบส่วนติดต่อผู้ใช้งานสําหรับเว็บ คือ การสร้างระดับชั้นของเมนูแต่ละเพจที่เป็น
ธรรมชาติตามความต้องการดูข้อมูลของผู้ใช้งานจริง ๆ
เช่น การออกแบบการนําทาง (Navigation) ในที่นี้หมายถึงการนําทางของการรับข้อมูลจากหน้าจอ
ที่ผู้พัฒนาต้องสร้างการนําทางที่ดีเพื่อให้ผู้ใช้งานรับข้อมูลไปตามลําดับที่ควรเป็น
บทที่ 2: ประเภทของส่วนติดต่อผู้ใช้และหลักการออกแบบส่วนติดต่อผู้ใช้ 20
 

ภาพที่ 2.7 การออกแบบการนําทางที่ไม่เหมาะสม

ภาพที่ 2.8 การออกแบบการนําทางที่เหมาะสม

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

4. กระบวนการหลักในการออกแบบส่วนติดต่อผู้ใช้งาน

หลักการออกแบบส่วนติดต่อผู้ใช้งาน คือ
 การออกแบบส่วนประสานการใช้งานระหว่างผู้ใช้กับระบบ
บทที่ 2: ประเภทของส่วนติดต่อผู้ใช้และหลักการออกแบบส่วนติดต่อผู้ใช้ 21
 

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

The Design Team จะต้องมีความเชี่ยวชาญด้าน

 การพัฒนา (Development) สําหรับพัฒนาระบบหรือเว็บไซต์ที่ตรงตามส่วนติดต่อผู้ใช้งานที่
ออกแบบไว้
 มนุ ษยศาสตร์ (Human factors) สําหรับ ใช้ในการวิเคราะห์พฤติ กรรมและคุณลักษณะของ
ผู้ใช้งาน
 การออกแบบ (Visual design) เพื่อใช้ออกแบบการจัดวางตําแหน่งขององค์ประกอบ การใช้
กราฟิก การใช้สีที่เหมาะสมและสวยงาม
 การประเมินการใช้งาน (Usability assessment) เพื่อใช้ในการประเมินความเหมาะสมของส่วน
ติดต่อผู้ใช้งานว่าตรงตามความต้องการของผู้งานและความต้องการของระบบหรือไม่
 การทํ า เอกสาร (Documentation) เพื่ อ จั ด ทํ า เอกสารสํ า หรั บ ใช้ เ ป็ น หลั ก ฐานที่ แ สดง
รายละเอียดในการพัฒนา เพื่อใช้ในการตรวจสอบความถูกต้องของการออกแบบและพัฒนา
และเพื่อใช้ในการสื่อสารระหว่างทีมงานพัฒนา
 การฝึกฝน หรือนําเสนอการใช้งาน (Training) เพื่อนําไปใช้ในการทดลองใช้งาน และส่งมอบงาน
ให้แก่ผู้ใช้งาน

กระบวนการออกแบบส่วนติดต่อผู้ใช้งาน
กระบวนการออกแบบ UI ประกอบด้วย 12 ขั้นตอน คือ
1) การทําความรู้จักผู้ใช้งาน (Know your user or client)
2) การทําความเข้าใจการทํางานของระบบ (Understand the business function)
3) การพัฒนาระบบเมนูและการนําทาง (Develop system menu and navigation)
4) การเลือกหน้าต่างที่เหมาะสม (Select the proper kinds of windows)
5) การเลือกเครื่องมือในการควบคุมการใช้งานที่เหมาะสม (Select the proper device-based
controls)
6) การเลือกเครื่องมือควบคุมการแสดงผลบนหน้าจอที่เหมาะสม (Select the proper screen-
based controls)
7) การเตรียมเนื้อหาหรือข้อความที่ชัดเจน (Write clear text and message)
8) การสร้างส่วนตอบรับฟีดแบ็กและแนวทางทางการใช้งาน (Provide effective feedback and
guidance and assistance)
9) การสร้างกราฟิก ไอคอน และภาพที่สื่อความหมาย (Create Meaningful Graphics, Icons
and Images)
บทที่ 2: ประเภทของส่วนติดต่อผู้ใช้และหลักการออกแบบส่วนติดต่อผู้ใช้ 22
 

10) การเลือกใช้สีที่เหมาะสม (Choose the proper colors)

11) การจัดการเลย์เอาท์ หน้าต่าง และเพจ (Organize and Layout Windows and Pages)
12) การทดสอบ (Test, Test, and Retest)

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

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

บทที่ 3 การวิเคราะห์ผู้ใช้งานและความต้องการและการทํางานของระบบ

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

วัตถุประสงค์
1. รับทราบถึงการสื่อสารระหว่างคอมพิวเตอร์และมนุษย์
2. รับทราบถึงวิธีการศึกษาความต้องการของระบบ

1. ทําความรู้จักผูใ้ ช้งาน
การทําความรู้จักผู้ใช้งาน เราจะต้องประเมินทักษะผู้ใช้งาน เพราะผู้ใช้งานมีหลากหลาย การ
รู้จักผู้ใช้ เป็นหลักการแรกที่ต้องทํา (Hansen, 1971) เราอาจแบ่งทักษะผู้ใช้งานออกเป็น 3 ส่วนใหญ่ ๆ
คือ
 ผู้ใช้มือใหม่ (Novice or first-time user)
 ผู้ใช้ระดับกลาง (Knowledgeable intermittent users)
 ผู้เชี่ยวชาญ (Expert frequent user)
หากจะออกแบบให้ใช้งานได้กับกลุ่มใดกลุ่มหนึ่งจะเป็นเรื่องง่าย แต่ถ้าต้องออกแบบให้คนทั้งสาม
กลุ่มเข้าใจร่วมกันได้ จะเป็นเรื่องที่ยากและท้าทายมาก โดยการพิจารณาทักษะของผู้ใช้งาน เราสามารถ
ประเมินได้จากเกณฑ์ดังตารางที่ 3.1

ตารางที่ 3.1 เกณฑ์การพิจารณาทักษะของผู้ใช้งาน

เกณฑ์
ความเชี่ยวชาญด้านคอมพิวเตอร์
ประสบการณ์การใช้งานระบบ
ประสบการณ์การใช้งานแอพลิเคชัน
การศึกษา
คําอธิบาย
ความเชี่ยวชาญในการใช้งานคอมพิวเตอร์
ประสบการณ์เกี่ยวกับวิธีการมีปฏิสัมพันธ์กับระบบ
ประสบการณ์เกี่ยวกับวิธีการมีปฏิสัมพันธ์กับแอพลิเคชัน
ระดับการศึกษา
บทที่ 3: การวิเคราะห์ผู้ใช้งานและความต้องการและการทํางานของระบบ 25
 

ตารางที่ 3.1 (ต่อ) 

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

เพราะฉะนั้น สิ่งที่ควรพิจารณาเกี่ยวกับผู้ใช้งานจึงสรุปได้ คือ

 ความหลากหลายของผู้ใช้งานทั้งทางกายภาพและสภาพแวดล้อม
 บุคลิกของผู้ใช้ที่แตกต่างกัน / ความต่างระหว่างบุคคล มนุษย์เราย่อมมีความแตกต่างกัน
 ความแตกต่างของสติปัญญาและความสามารถในการรับรู้
 ความหลากหลายทางเชื้อชาติและวัฒนธรรม
 ผู้ใช้งานที่ไร้ความสามารถหรือพิการ
 อายุของผู้ใช้งาน
 การออกแบบสําหรับเด็ก เด็กต้องการการออกแบบที่แตกต่างจากผู้ใหญ่ ต้องมีการเร้าความ
สนใจสูง
 การปรับให้เข้ากับซอฟท์แวร์และฮาร์ดแวร์ ที่มีอยู่เพื่อไม่ให้เกิดปัญหาความเข้ากันไม่ได้ของ
ระบบ
ลักษณะของมนุษย์ที่สาํ คัญที่ควรคํานึงถึงในการออกแบบส่วนติดต่อผูใ้ ช้งาน คือ
1) ความสามารถในการทําความเข้าใจ (Perception) สิ่งที่ต้องคํานึงถึงในการออกแบบ คือ
1.1 มนุษย์จะสร้างความสัมพันธ์ระหว่างวัตถุที่อยู่ใกล้กัน ดังภาพที่ 3.1
บทที่ 3: การวิเคราะห์ผู้ใช้งานและความต้องการและการทํางานของระบบ 26
 

ภาพที่ 3.1 ความสัมพันธ์ระหว่างวัตถุที่อยู่ใกล้กัน

1.2 มนุษย์จะจัดกลุ่มสิ่งที่มขี นาด สี รูปร่าง ของวัตถุที่อยู่ใกล้กัน ดังภาพที่ 3.2

ภาพที่ 3.2 การจัดกลุ่มสิ่งทีม่ ขี นาด สี รูปร่าง ของวัตถุที่อยู่ใกล้กัน

2) ความสามารถในการจดจํา (Memory) โดยจะแบ่งเป็น 2 แบบ คือ ความจําสั้น (Short-
term memory) และความจําดี (Long-term memory) โดยทั่วไปมนุษย์จะมีความสามารถ
ในการจดจําคําศัพท์ได้ประมาณ 2000-3000 คํา และรับรู้คําศัพท์ได้ราว 100,000 คํา ซึ่ง
สําหรับผู้ที่มีความจําดีจะส่งผลให้พวกเขาสามารถจดจําองค์ประกอบในส่วนติดต่อผู้ใช้งาน
อีกทั้งสามารถเรียนรู้ และอนุมานการมีปฏิสัมพันธ์กับระบบได้ง่าย ผู้ออกแบบส่วนติดต่อ
บทที่ 3: การวิเคราะห์ผู้ใช้งานและความต้องการและการทํางานของระบบ 27
 

ผู้ใช้งานสามารถใช้ตัวอักษร หรือกราฟิกช่วยให้ผู้ใช้งานสามารถเรียนรู้ จดจํา และรับรู้

ความหมายที่ต้องการสื่อได้
3) ความเร็วในการโต้ตอบ (Human Interaction Speed) แสดงดังตารางที่ 3.2
ตารางที่ 3.2 ความเร็วในการโต้ตอบของมนุษย์
การอ่าน
ข้อความทั่วไป 250-300 คําต่อนาที
การพิสูจน์อักษรบนกระดาษ 200 คําต่อนาที
การพิสูจน์อักษรบนหน้าจอ (Monitor) 180 คําต่อนาที
การฟัง
คําพูดทั่วไป 150-160 คําต่อนาที
การพูด
พูดกับคอมพิวเตอร์ 105 คําต่อนาที
พูดกับคอมพิวเตอร์หลังจากมีการแก้ไขสําเนียง 25 คําต่อนาที
การเขียน
เขียนเอง 31 คําต่อนาที
เขียนตามเนื้อหาที่มีอยู่แล้ว 22 คําต่อนาที
การพิมพ์
การพิมพ์
บุคคลที่พิมพ์ในอัตราเร็ว 150 คําต่อนาที หรือสูงกว่า
บุคคลที่พิมพ์ในอัตราปกติ 60-70 คําต่อนาที
คอมพิวเตอร์
พิมพ์ตามคําบอก 33 คําต่อนาที
พิมพ์ตามเนื้อหาที่มีอยู่แล้ว 19 คําต่อนาที
การพิมพ์โดยใช้สองนิ้ว (สมาร์ทโฟน)
พิมพ์เอง 37 คําต่อนาที
พิมพ์ตามเนื้อหาที่มีอยู่แล้ว 27 คําต่อนาที

4) ความสามารถในการมองเห็นและขอบเขตของสายตา (Visual) มนุษย์จะเสพย์ติดความ

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

ภาพที่ 3.3 การเสพย์ติดความสมบูรณ์แบบของมนุษย์

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

2. การทําความเข้าใจการทํางานของระบบ (Understand the business function)

การทําความเข้าใจการทํางานของระบบ ประกอบด้วย
 วิเคราะห์ความต้องการของระบบ ได้แก่ วิธีการโดยตรง ดังตารางที่ 3.3 และวิธีการโดยอ้อม
ดังตารางที่ 3.4
บทที่ 3: การวิเคราะห์ผู้ใช้งานและความต้องการและการทํางานของระบบ 29
 

ตารางที่ 3.3 เทคนิคการวิเคราะห์ความต้องการของระบบทางตรง

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

ตารางที่ 3.4 เทคนิคการวิเคราะห์ความต้องการของระบบทางอ้อม

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

ตารางที่ 3.4 (ต่อ)

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

 วิเคราะห์การทํางานหลักของระบบ
การวิเคราะห์การทํางานหลักของระบบ มีกระบวนการการวิเคราะห์ คือ
1) การทํ า ความเข้ า ใจพื้ น ฐานความเข้ า ใจของผู้ ใ ช้ ง าน (Understanding the User’s
Mental Model) เป็นการสร้างแบบวิเคราะห์งาน (Task Analysis) เป็นการสร้างแบบ
รายการกิจกรรมหรืองานที่ผู้ใช้งานต้องกระทําในระบบ เพื่อนําไปใช้ในการออกแบบ
การมีปฏิสัมพันธ์ (Interaction)
2) การพัฒนาแบบจําลองขอบเขตของระบบ (Developing Conceptual Models) เพื่อ
นําไปใช้ในการออกแบบส่วนติดต่อผู้ใช้งาน ซึ่งจะจําลองจาก "แบบวิเคราะห์งาน"

 ออกแบบแนวทางการใช้งานระบบ
การวิเคราะห์การทํางานหลักของระบบ มีกระบวนการการวิเคราะห์ คือ การทําความเข้าใจ
พื้นฐานความเข้าใจของผู้ใช้งาน (Understanding the User’s Mental Model) เป็นการ
สร้างแบบวิเคราะห์ งาน (Task Analysis) เป็นการสร้างแบบรายการกิจกรรมหรือ งานที่
ผู้ใช้งานต้องกระทําในระบบ เพื่อนําไปใช้ในการออกแบบการมีปฏิสัมพันธ์ (Interaction)
การพั ฒ นาแบบจํ า ลองขอบเขตของระบบ (Developing Conceptual Models) เพื่ อ
นําไปใช้ในการออกแบบส่วนติดต่อผู้ใช้งาน ซึ่งจะจําลองจาก "แบบวิเคราะห์งาน"

ข้อดีของการออกแบบแนวทางการใช้งานระบบ
 ช่วยให้พัฒนาระบบได้มีประสิทธิภาพขึ้น
 ลด error ที่จะเกิดขึ้น
 ลดระยะเวลาในการฝึกฝนการใช้งานระบบ
 เพิ่มความพึงพอใจของผู้ใช้งานต่อระบบ
บทที่ 3: การวิเคราะห์ผู้ใช้งานและความต้องการและการทํางานของระบบ 31
 

 ช่วยในการแบ่งงานการพัฒนา และติดตามการพัฒนาระบบได้ง่ายขึ้น

เอกสารในการออกแบบแนวทางการใช้งานระบบ ประกอบด้วย
 วัตถุประสงค์ในการใช้งานเอกสาร
 รายละเอียดเงื่อนไขในการออกแบบ
 รายละเอียดดรรชนีและสารบัญของเอกสาร
 รายการตรวจสอบองค์ประกอบของระบบ
 ตัวอย่างแนวทางในการออกแบบ (ที่ชัดเจน)
 แหล่งอ้างอิงของแนวทางการออกแบบ
บทที่ 3: การวิเคราะห์ผู้ใช้งานและความต้องการและการทํางานของระบบ 32
 

แบบฝึกหัด
1) ทําไมการทําความเข้าใจผู้ใช้งานจึงเป็นกระบวนการที่สําคัญในการออกแบบส่วนติดต่อผู้ใช้งาน
2) ในการออกแบบส่วนติดต่อผู้ใช้งานสําหรับ www.youtube.com ซึ่งเป็นเว็บไซต์สําหรับเข้าชมคลิปวิดิโอ
ผู้พัฒนาต้องศึกษาทักษะใดบ้างของมนุษย์สําหรับนํามาใช้ในการวิเคราะห์
3) จงวิเคราะห์ข้อดีและข้อเสีย ของวิธีการวิเคราะห์ความต้องการของระบบโดยวิธีการทางตรง และวิธีการ
ทางอ้อม
บทที่ 4 หลักการออกแบบเลย์เอาท์ 33
 

บทที่ 4 หลักการออกแบบเลย์เอาท์

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

วัตถุประสงค์
1. รับทราบถึงความหมายและความสําคัญของเลย์เอาท์
2. รับทราบถึงการจัดวางองค์ประกอบในเลย์เอาท์
3. รับทราบถึงองค์ประกอบในเลย์เอาท์

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

รูปแบบเลย์เอาท์ ที่ดี คือ

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

รูปแบบเลย์เอาท์ ที่ไม่ดี เช่น

 การใช้คําอธิบาย/หัวข้อ ที่ไม่ชัดเจนหรือไม่เหมาะสม
บทที่ 4 หลักการออกแบบเลย์เอาท์ 34
 

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

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

องค์ประกอบของเลย์เอาท์ ได้แก่
1) การจัดวางตําแหน่งองค์ประกอบในเลย์เอาท์ (Layout Composition)
2) เนื้อหา (Text)
3) ระบบเมนูและการนําทาง (System menu and navigation)
4) หน้าต่าง (Windows)
5) ตัวอักษร (Font/Typography)
6) องค์ประกอบในการปฏิสัมพันธ์กับเลย์เอาท์ (Layout Interaction Elements)
บทที่ 4 หลักการออกแบบเลย์เอาท์ 35
 

1. การจัดวางตําแหน่งองค์ประกอบในเลย์เอาท์ (Layout Composition)

องค์ประกอบต้องมีความคงเส้นคงวา ทั้งตําแหน่งจัดวาง วิธีการโต้ตอบ และวัตถุประสงค์การใช้งาน
อีกทั้งการจัดวางข้อมูล หรือเนื้อหาในเลย์เอาท์ จะต้องมีระเบียบ โดยผู้พัฒนาจะต้องพยายามจัดกลุ่มข้อมูลที่
เป็นประเภทเดียวกันและแสดงข้อมูลเพื่อให้ง่ายต่อการเปรียบเทียบ และควรมีการนําเสนอข้อมูลที่มีการใช้
งานบ่อยในทุกเลย์เอาท์
Streveler and Wasserman (1984) ได้ทดสอบการมองเลย์เอาท์ ของ users โดยการตรวจจับการ
มอง (Eye Tracking) พบว่า
 มนุษย์จะสนใจมองเลย์เอาท์ ในตําแหน่งมุมซ้ายบนสุดของหน้าก่อนเสมอ
 จากนั้นจะเลื่อนสายตาไปยังจุดกึ่งกลางของเลย์เอาท์ และวนไปรอบเลย์เอาท์ ตามเข็มนาฬิกา
 มนุษย์จะมองวัตถุที่มีขนาดใหญ่ก่อน แล้วจึงเลื่อนไปมองวัตถุเล็กรอบๆ
 มนุษย์จะมองวัตถุที่มีรูปทรงประหลาดก่อนวัตถุที่มีรูปทรงพื้นฐาน
 มนุษย์จะมองสีที่มีความสดก่อนสีอ่อน

การจัดวางองค์ประกอบในเลย์เอาท์ มีหลักการ คือ

1) ความสมดุ ล (Balance) เป็ น การออกแบบที่ ใ ห้ ว างองค์ ป ระกอบหน้ า เลย์ เ อาท์ ให้ มี น้ํ า หนั ก เท่ า กั น
(Weight) ระหว่ า ง บน-ล่ า ง และซ้ า ย-ขวา โดยสี เ ข้ ม , วั ต ถุ รู ป ทรงประหลาด และขนาดใหญ่ จะให้
ความรู้ สึ ก ว่ า น้ํ า หนั ก มากกว่ า ความสมดุ ล จะเป็ น หลั ก การจั ด วางที่ ต รงกั น ข้ า มกั บ ความไม่ เ สถี ย ร
(Instability) ดังภาพที่ 4.1

ภาพที่ 4.1 ความสมดุล (Balance) และความไม่มั่นคง (Instability)

2) ความสมมาตร (Symmetry) เป็นการออกแบบที่ด้าน ซ้าย-ขวา มีองค์ประกอบที่เหมือน ๆ กัน และจะทํา
ให้สามารถเห็นเส้นกลาง (Centerline) โดยจะเป็นหลักการจัดวางที่ตรงกันข้ามกับความไม่สมมาตร
(Asymmetry) ดังภาพที่ 4.2
บทที่ 4 หลักการออกแบบเลย์เอาท์ 36
 

ภาพที่ 4.2 ความสมมาตร (Symmetry) และความไม่สมมาตร (Asymmetry)

ภาพที่ 4.3 ความสม่ําเสมอ (Regularity) และความไม่สม่าํ เสมอ (Irregularity)

3) ความสม่ําเสมอ (Regularity) เป็นการออกแบบที่กําหนดองค์ประกอบในหน้าเลย์เอาท์ ให้มีขนาด สี
รูปร่าง ที่เหมือนกัน รวมถึงช่องว่างระหว่างองค์ประกอบที่มีระยะเท่า ๆ กัน โดยจะเป็นหลักการจัดวางที่
ตรงกันข้ามกับความไม่สม่ําเสมอ (Irregularity) ดังภาพที่ 4.3
บทที่ 4 หลักการออกแบบเลย์เอาท์ 37
 

4) คาดการณ์ได้ (Predictability) ออกแบบเลย์เอาท์ ที่สามารถคาดการณ์ได้โดยใช้องค์ประกอบที่คงเส้นคง

วา และมีการจัดวางองค์ประกอบเหล่านั้นอย่างมีระเบียบ โดยจะเป็นหลักการจัดวางที่ตรงกันข้ามกับ
ความเป็นธรรมชาติ (Spontaneity) ที่จะไม่สามารถคาดการณ์การจัดวางได้ ดังภาพที่ 4.4

ภาพที่ 4.4 ความคาดการณ์ได้ (Predictability) และความเป็นธรรมชาติ (Spontaneity)

5) ลําดับชัดเจน (Sequentiality) ออกแบบเลย์เอาท์ โดยการจัดเรียงองค์ประกอบที่ทําให้เกิดเส้นนําสายตา

ตามเงื่อนไข เช่น
 การใช้สีสว่างไล่ไปยังสีเข้ม หรือไล่ไปยังสีขาว-ดํา
 การใช้ภาพที่มีความคมชัด ไปยังภาพเบลอ
 การใช้กราฟิกไปยังการใช้ตัวอักษร
 การใช้วัตถุที่มีขนาดใหญ่ไล่ไปยังขนาดเล็ก
 การใช้วัตถุรูปทรงประหลาดไล่ไปยังวัตถุรูปทรงปกติ
6) ความเรียบ โล่ง สะอาดตา (Economy) เป็นการออกแบบเลย์เอาท์ ที่มีองค์ประกอบน้อย สีซ้ํา ๆ กัน
และรูปแบบการนําเสนอที่เน้นความเรียบง่าย โดยจะเป็นหลักการจัดวางที่ตรงกันข้ามกับความวุ่นวาย
สับสน (Intricacy) หรือแบบหรูหรา (Luxury) ที่จะเน้นการออกแบบเลย์เอาท์ ที่ใช้วัตถุจํานวนมากซึ่งจะ
ทําให้การวางนั้นวุ่นวายและสับสนได้ง่าย ดังภาพที่ 4.5
บทที่ 4 หลักการออกแบบเลย์เอาท์ 38
 

ภาพที่ 4.5 ความเรียบ โล่ง สะอาดตา (Economy) และความวุ่นวาย สับสน (Intricacy)

7) ความเป็นอันหนึ่งอันเดียวกัน (Unity) ความเป็นอันหนึ่งอันเดียวกัน (Unity) จะคล้ายกับความสม่ําเสมอ

(Regularity) ที่จะใช้วัตถุที่รูปร่าง สี และขนาดแบบเดียวกัน แต่จะแตกต่างที่จะต้องพื้นที่ว่างระหว่างวัตถุ
ที่เท่ากัน ดังภาพที่ 4.6

ภาพที่ 4.6 ความเป็นอันหนึ่งอันเดียวกัน (Unity)

8) ความเป็ นสัดส่วน (Proportion) เป็นการจัดการองค์ประกอบต่าง ๆ ให้ อยู่ ใ นหน้ าต่างที่ เป็นสัดส่วน
โดยทั่วไปสัดส่วนขององค์ประกอบจะมีดังนี้
บทที่ 4 หลักการออกแบบเลย์เอาท์ 39
 

ภาพที่ 4.7 สัดส่วนของขององค์ประกอบในหน้าจอ

ภาพที่ 4.8 ความเรียบง่าย (Simplicity) และความซับซ้อน (Complexity)

9) ความเรียบง่าย (Simplicity) เป็นการออกแบบที่เลย์เอาท์ มีองค์ประกอบจํานวนน้อย เป็นระเบียบ ส่วน
ใหญ่จะใช้แนวคิดร่วมกับความเป็นสัดส่วน (Proportion) และ ความเป็นอันหนึ่งอันเดียวกัน (Unity) โดย
บทที่ 4 หลักการออกแบบเลย์เอาท์ 40
 

จะเป็นหลั กการจั ดวางที่ตรงกันข้ามกับความซับซ้อน (Complexity) ที่จะมีรายละเอี ยดเนื้อหาหรือ

องค์ประกอบจํานวนมาก ไม่เป็นระเบียบ
10) การจัดกลุ่ม (Groupings) เป็นการจัดกลุ่มองค์ประกอบที่มีความเหมือนกันไว้ใกล้กัน

2. การออกแบบเนื้อหา (Text)
เนื้อหาถือเป็นสิ่งสําคัญมากในระบบ เนื้อหาในระบบต้องสมบูรณ์และได้รับการปรับปรุงพัฒนาให้
ทันสมัยอยู่เสมอ ผู้พัฒนาต้องเตรียมข้อมูลและเนื้อหาที่ผู้ใช้ต้องการให้ถูกต้องและสมบูรณ์ เนื้อหาที่สําคัญ
ที่สุดคือเนื้อหาที่ทีมผู้พัฒนาสร้างสรรค์ขึ้นมาเอง และไม่ซ้ํากับระบบอื่น
รูปแบบของเนือ้ หาที่ดี
- กระชับและใช้ภาษาที่เข้าใจง่าย
- สื่อถึงข้อมูลที่ตอ้ งการนําเสนอชัดเจน
- ใช้ภาษาในเชิงบวกและสร้างสรรค์
เนื้อหาในระบบประกอบด้วย
- เนื้อหาลิงก์ (Link) คือ ตัวอักษรที่ทําหน้าที่เป็นลิงก์เชื่อมโยงไปยังข้อมูลหรือหน้าจออื่น ๆ โดย
เนื้อหาในลิงก์จะต้องเข้าใจง่าย กระชับ และครอบคลุมเนือ้ หาที่จะลิงก์ไปทั้งหมด โดยห้ามมี
ตัวอักษรเกิน 60 ตัวอักษร
- หัวข้อเพจ (Page Title) คือ เนื้อหาที่ทําหน้าที่เป็นหัวข้อของหน้าเพจหนึ่ง ๆ โดยหัวข้อเพจ
จะต้องสื่อถึงหน้าเพจและในแต่ละเพจของระบบสามารถใช้หัวข้อเพจที่มีความแตกต่างกันได้
- หัวข้อ (Heading) คือ เนื้อหาที่แสดงถึงข้อมูลหลักในหน้าเพจนั้น กรณีเป็นภาษาอังกฤษ ควร
หลีกเลี่ยงการใช้คํานําหน้านาม (a, an, the)
- เนื้ อ หาในหน้ า จอ (Layout Content) คื อ ข้ อ มู ล ในระบบซึ่ ง จะต้ อ งสมบู ร ณ์ แ ละได้ รั บ การ
ปรับปรุงพัฒนาให้ทันสมัยอยู่เสมอ โดยการใช้ภาษานั้นขึ้นอยู่กับระบบและผู้ใช้งาน
โดยเนื้อหาทั้งหมดในหน้าจอจะมีตําแหน่งดังภาพที่ 4.9
บทที่ 4 หลักการออกแบบเลย์เอาท์ 41
 

Page Title  Heading Link

Layout Content 

ภาพที่ 4.9 เนื้อหาในหน้าจอ

3. การพัฒนาระบบเมนูและการนําทาง (Develop system menu and navigation)

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

พื้นฐานของระบบการนําทาง
1. ตอนนี้กําลังอยู่ที่ไหน
2. จากนี้สามารถไปที่ใดได้บ้าง
3. จะไปสู่ที่ต่างๆได้อย่างไร
4. จะกลับมาที่เดิมได้อย่างไร
บทที่ 4 หลักการออกแบบเลย์เอาท์ 42
 

คุณสมบัติสําคัญของระบบการนําทาง
1. เข้าใจง่าย
2. มีความสม่ําเสมอ
3. มีการตอบสนองต่อผู้ใช้
4. มีความพร้อมและเหมาะสมต่อการใช้งาน
5. นําเสนอหลายทางเลือก
6. มีขั้นตอนสั้นและประหยัดเวลา
7. รูปแบบที่สื่อความหมาย
8. มีคําอธิบายที่ชัดเจนและเข้าใจง่าย
9. มีความเหมาะสมกับวัตถุประสงค์ของเว็บไซต์
10. สนับสนุนเป้าหมายและพฤติกรรมของผู้ใช้

ภาพที่ 4.10 ระบบการนําทางแบบลําดับขั้น

รูปแบบของระบบการนําทาง แบ่งออกเป็น 4 รูปแบบ
1) ระบบการนําทางแบบลําดับขั้น (Hierarchical) เป็นเป็นแบบพื้นฐานคือ มีหน้าโฮมเพจหนึ่งหน้า
และมีลิงก์ไปยังหน้าอื่น ๆ ภายในระบบ แต่มีข้อจํากัดคือเคลื่อนที่ได้เฉพาะแนวตั้ง บนล่าง ซึ่งหมายถึงผู้ใช้งาน
ต้องท่องไปในระบบตามลําดับ ไม่สามารถข้ามขั้นใดขั้นหนึ่งไปได้ โดยโครงสร้างระบบนําทางแสดงดังภาพที่
4.10
2) ระบบการนําทางแบบโกลบอล (Global) หรือเรียกว่าแบบตลอดทั่วทั้งไซต์ เป็นระบบที่ช่วย
เสริมข้อจํากัดของระบบการนําทางแบบลําดับขั้น ทําให้สามารถเคลื่อนที่ได้ทั้งในแนวตั้งและแนวนอน หรือ
ผู้ใช้งานสามารถเลือกเมนูเพื่อท่องไปได้อย่างมีประสิทธิภาพตลอดทั้งไซต์
บทที่ 4 หลักการออกแบบเลย์เอาท์ 43
 

ภาพที่ 4.11 ระบบการนําทางแบบโกลบอล

3) ระบบการนําทางแบบโลคอล (Local) สําหรับเว็บที่มีความซับซ้อนมากอาจต้องใช้ระบบแบบโล
คอลหรือแบบเฉพาะส่วนเข้ามาช่วยเมื่อมีบางส่วนที่ต้องการระบบการนําทางที่มีลักษณะเฉพาะตัว เช่น หัวข้อ
ย่อยของเนื้อหาที่อยู่ในส่วนหลัก ๆ ของเว็บ เพื่อเพิ่มความสะดวกและสื่อความหมายให้ดีขึ้น ดังภาพที่ 4.12

ภาพที่ 4.12 ระบบการนําทางแบบโลคอล

4) ระบบการนําทางเฉพาะที่ (Ad Hoc) เป็นแบบเฉพาะที่ตามความจําเป็นของเนื้อหาซึ่งก็คือลิงก์

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

โครงสร้างของเมนู (Structures of Menus)

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

 Single Menus เมนูเดี่ยว เป็นโครงสร้างพื้นฐานของเมนูทั่วไป ในเมนูจะประกอบด้วยตัวเลือกที่

กําหนดไว้แล้ว ดังภาพที่ 4.13

ภาพที่ 4.13 เมนูเดี่ยว

 Sequential Linear Menus เมนู เ ชิ ง เส้ น เป็ น รู ป แบบชุ ด เมนู ที่ มี ทิ ศ ทางเดี ย ว เหมื อ นเป็ น
single menu ที่ต่อเนื่องกัน ดังภาพที่ 4.14

ภาพที่ 4.14 เมนูเชิงเส้น

 Simultaneous Menus เมนูแบบมีเงื่อนไขการทํางาน โดยเงื่อนไขเกิดจากการรับข้อมูลจาก
ผู้ใช้ แล้วระบบจะกําหนดตัวเลือกหรือข้อมูลมาแสดงในเมนู ดังภาพที่ 4.15

ภาพที่ 4.15 เมนูแบบมีเงื่อนไขการทํางาน

บทที่ 4 หลักการออกแบบเลย์เอาท์ 45
 

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

ภาพที่ 4.16 เมนูแบบมีลําดับชั้น

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

ภาพที่ 4.17 เมนูแบบเครือข่าย

 Event-Trapping Menus เมนูที่เกิดขึ้นจากการมีปฏิสัมพันธ์กับผู้ใช้ เมนูประเภทนี้มักจะใช้ งาน
ร่วมกับ simultaneous menu, menu bar และ Hierarchical Menus โดยหลักการทํางานจะมี
1) เมื่อผู้ใช้โต้ตอบกับระบบผ่านเมนู เมนูดังกล่าวจะมีการเปลี่ยนแปลง (เช่น เปลี่ยน font หรือสี
ของตัวอักษร) 2) จะเกิดเมนูใหม่ โดยไม่มีการเปลี่ยนแปลงหน้าต่างการทํางาน (เช่น มี dialog box
ขึ้นมาให้กรอกข้อมูล) หรือ 3) จะปิดเมนูเดิมและแสดงเมนูใหม่ขึ้นมา

การทํางานของเมนู (Functions of Menus) เมนูจะมีการทํางาน 4 รูปแบบ คือ

 Navigation to a New Menu เมนูที่ทําหน้าที่นําทางไปยังเมนูอื่น เช่น Hierarchical Menus หรือ
Connected Menus เมนูแต่ละตัวจะมีการนําทางไปยังเมนูอื่นเสมอ
 Execute an Action or Procedure เมนูที่ทําหน้าที่ประมวลผลคําสั่ง เช่น เมนูสําหรับเปิด/ปิดไฟล์
เมนูสําหรับคัดลอก หรือเมนูสําหรับส่งข้อความ
 Displaying Information เมนูที่ทําหน้าที่เพื่อแสดงผลข้อมูล เช่น เมนูในระบบสืบค้นข้อมูลจาก
ฐานข้อมูลหรือเว็บไซต์ โดยเมื่อระบบประมวลผลแล้วจะแสดงข้อมูลเป็นเมนูเพื่อให้ผู้ใช้กดเลือกเข้า
ไปดูรายละเอียดข้อมูลได้
 Data or Parameter Input เมนู ที่ ทํ า หน้ า ที่ รั บ ข้ อ มู ล หรื อ เงื่ อ นไขจากผู้ ใ ช้ ง าน สํ า หรั บ นํ า ไป
ประมวลผลต่อ
บทที่ 4 หลักการออกแบบเลย์เอาท์ 47
 

เนื้อหาของเมนู (Content of Menus) เนื้อหาในเมนูจะประกอบด้วย 4 ส่วน คือ

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

Choose one: Do you want to save and exit?

 Save and exit  Yes
 Exit without saving  No

(A) (B)
ภาพที่ 4.18 คําอธิบายเพิ่มเติมหลังจากเลือกเมนู

จากภาพที่ 4.18 พบว่า (A) จะเหมาะสมและเป็นคําถามที่ชัดเจนสําหรับผู้ใช้งานมากกว่า แต่ (B) จะ

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

 การใช้คําในเมนู (Phrasing the Menu) เป็นการใช้คําหรือสัญลักษณ์สําหรับการเลือกเมนู ดังภาพ

ที่ 4.18 ได้แก่

Hotkeys 
Window Indicator 

Direct Action 
Cascade Indicator 

Standard Keyboard Equivalents 

ภาพที่ 4.18 คําอธิบายเพิ่มเติมหลังจากเลือกเมนู

o Cascade Indicator การแสดงเมนูย่อย (Submenu) เมื่อเลือกเมนูดังกล่าว

o Window Indicator เป็นสัญลักษณ์ในเมนูที่บ่งชี้ว่าเมื่อเลือกเมนู นี้จะแสดงหน้ า (window)
ใหม่เพื่อแสดงข้อมูลเพิ่มเติม
o Direct action เป็นการแสดงถึงการดําเนินการตามเนื้อหาเมนู
o Keyboard Equivalents เป็นการใช้แป้นพิมพ์ในการเลือกเมนู 1) การใช้ปุ่มลัด (Hotkeys)
และ 2) การใช้ตัวอักษร (Standard Keyboard Equivalents) โดยการขีดเส้นใต้ตัวอักษรที่
เป็นปุ่มลัดซึ่งมีมาตรฐานดังภาพที่ 4.19
บทที่ 4 หลักการออกแบบเลย์เอาท์ 49
 

ภาพที่ 4.19 มาตรฐานปุ่มลัดจากแป้นพิมพ์

ปัจจัยในการเลือกหัวข้อเมนู
1) จํานวนข้อมูลในเมนู
2) ความถี่ในการใช้งานเมนู
3) ความถี่ในการเปลี่ยนแปลงข้อมูลในเมนู

รูปแบบของเมนู (Kinds of Graphical Menus)

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

ภาพที่ 4.19 เมนูบาร์ 1

คุณลักษณะทั่วไป
 ส่วนใหญ่แล้วเมนูบาร์จะมีทิศทางการแสดงข้อมูลเป็นแถวในแนวนอนและอยู่บนสุดของหน้า
ระบบ
 เมนูบาร์จะแสดงหัวข้อเมนูหลักของระบบ (เมนูลําดับสูงสุดของ Hierarchical Menus) ซึ่งจัด
ว่าเป็นจุดเริ่มต้นของการนําทางในระบบ
บทที่ 4 หลักการออกแบบเลย์เอาท์ 50
 

 เมนูบาร์จะต้องมีการออกแบบที่คงเส้นคงวา ใช้งานง่าย
 ส่วนใหญ่แล้วเมนูบาร์จะใช้ตัวอักษรหรือปุ่มเพื่อแสดงหัวข้อเมนู โดยการแสดงผลอาจมีการใช้
ร่วมกับเมนูแบบพูลดาวน์ (Pull-down)

ภาพที่ 4.20 เมนูบาร์ 2

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

2) Pull-down Menu
วัตถุประสงค์ คือ ใช้สําหรับแสดงเมนูร่วมกับเมนูบาร์ ซึ่งใช้กับเนื้อหาในเมนูจะไม่เปลี่ยนแปลงเช่นกัน
จากข้อเสียของเมนูบาร์ที่รองรับหัวข้อเมนูได้จํานวนจํากัด เมนูแบบพูลดาวน์จึงสามารถช่วยลดปัญหานั้นได้
โดยสามารถแสดงรายการเมนูย่อยในทิศทางแนวตั้งได้

ภาพที่ 4.20 พูลดาวน์เมนู

ข้อดี
 พูลดาวน์เมนูจะประหยัดพื้นที่ในการแสดงหัวข้อเมนูจํานวนมาก
 พูลดาวน์เมนูสามารถแสดงหัวข้อเมนูได้จํานวนมาก และสามารถจัดกลุ่มเมนูได้
ข้อเสีย
บทที่ 4 หลักการออกแบบเลย์เอาท์ 51
 

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

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

ภาพที่ 4.21 แคสเคตเมนู

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

4) Iconic Menu
วัตถุประสงค์ คือ ใช้สําหรับแสดงเมนูที่มีการใช้งานบ่อย และเป็นเมนูที่สามารถทําให้ผู้ใช้งานเข้าใจได้
ด้วยสัญลักษณ์
บทที่ 4 หลักการออกแบบเลย์เอาท์ 52
 

ภาพที่ 4.22 เมนูแบบไอคอน

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

ฉะนั้นการเลือกรูปแบบของเมนูมีเงื่อนไขเบื้องต้นดังตาราง

รูปแบบเมนู การใช้งาน
เมนูบาร์ เมนูที่มีการใช้งานทั่วไป และมีความถี่ในการใช้งานสูง
เมนูที่จะถูกเรียกใช้งานในทุกหน้าจอของระบบ
เมนูที่ไม่มีการเปลี่ยนแปลงในทุกหน้าจอของระบบ
พูลดาวน์เมนู เมนูที่มีการใช้งานทั่วไป และมีความถี่ในการใช้งานสูง
เมนูที่มีเมนูย่อยปริมาณมาก (ในแต่ละเมนูสามารถมีเมนูย่อยไม่เกิน 10 เมนูย่อย)
หัวข้อในเมนูสามารถเปลี่ยนแปลงได้แต่ไม่บ่อย
แคสเคตเมนู สามารถแสดงเมนูที่มีเมนูปริมาณมาก และมีความซับซ้อนของลําดับชั้นเมนูสูง
กําหนดลําดับชั้นได้ไม่เกิน 2 ลําดับชั้น
เมนูแบบไอคอน ใช้สําหรับระบบที่มีการทํางานที่ชัดเจน
ใช้สําหรับระบบที่เน้นด้านการออกแบบสวยงาม
ไม่ควรใช้กับเมนูที่ไม่ได้เป็นการทํางานทั่วไป
บทที่ 4 หลักการออกแบบเลย์เอาท์ 53
 

4. หน้าต่าง (Windows)

ภาพที่ 4.23 หน้าต่างของส่วนติดต่อผู้ใช้งาน

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

Title Icon Bar  Title Bar  Menu Bar  Window Buttons 

Frame  Work Area  Scroll Bar  Status Bar 

ภาพที่ 4.24 องค์ประกอบของหน้าต่าง

องค์ประกอบของหน้าต่าง (Components of a Window)

1) กรอบ (Frame) คือ เส้นกรอบที่ล้อมรอบข้อมูลทั้งหมด ส่วนใหญ่จะเป็นรูปสี่เหลี่ยม
2) บาร์แสดงชื่อ (Title Bar) คือ แถบบาร์ที่อยู่เส้นขอบบนสุดของของหน้าต่าง รายละเอียดที่แสดง
บนแถบบาร์คือ ชื่อ ที่แสดงรายละเอียดของข้อมูลในหน้าต่าง
3) ไอคอนบนบาร์ (Title Bar Icon) คือ ไอคอนที่แสดงบนบาร์แสดงชื่อ มักเป็นสัญลักษณ์ที่แสดงถึง
ระบบ
4) เมนูบาร์ (Menu Bar) คือ แถบของบาร์ที่แสดงเมนูต่าง ๆ อาจะใช้ไอคอนเป็นเมนูได้ มักใช้งาน
ร่วมกับเมนูบาร์และพูลดาวน์บาร์
บทที่ 4 หลักการออกแบบเลย์เอาท์ 55
 

5) สกรอล์บาร์ (Scroll Bars) คือ แถบบาร์ที่อยู่ในตําแหน่งด้านขวาหรือด้านล่างของหน้าต่าง ใช้ใน

กรณีที่หน้าต่างไม่สามารถแสดงผลข้อมูลได้หมายในหน้า ดังนั้นหน้าต่างจําเป็นต้องมีสกรอล์บาร์เพื่อควบคุม
การแสดงผลบนหน้าจอให้สามารถเลื่อนขึ้น-ลงได้เพื่อให้ผู้ใช้งานสามารถแสดงข้อมูลทั้งหมดได้
6) สเตตัสบาร์ (Status Bar) คือ แถบด้านล่างของหน้าต่างที่ใช้แสดงผลสถานะต่าง ๆ ของระบบ
7) ปุ่ม (Window Buttons) คือ ชุดรับคําสั่งที่อยู่ในตําแหน่งขวาบนสุดของหน้าต่าง มักใช้สําหรับลด
ตําแหน่งหน้าต่าง ย่อ-ขยาย และปิดหน้าต่าง
8) พื้นที่แสดงผล (Work Area) คือ พื้นที่ตําแหน่งตรงกลางของหน้าต่างเพื่อแสดงผลข้อมูล

รูปแบบการนําเสนอในหน้าต่าง (Window Presentation Styles)

การนําเสนอข้อมูลในหน้าต่างนั้นขึ้นอยู่กับรูปแบบการจัดกลุ่มข้อมูลที่ต้องการนําเสนอในหน้าต่าง ใน
ปัจจุบันหน้าต่างถูกนําเสนอใน 2 รูปแบบ คือ
1) หน้าต่างแบบตาราง (Tiled Windows) เป็นรูปแบบการจัดวางหน้าต่างที่เรียงเป็นตารางคล้าย
กระเบื้องบนพื้นหรือฝาผนัง โดยมีโครงสร้างดังภาพที่ 4.25

ภาพที่ 4.25 หน้าต่างแบบตาราง

ข้ อ ดี คื อ สามารถแสดงผลหน้ า ต่ า งที่ เ กี่ ย วข้ อ งกั น ให้ ผู้ ใ ช้ ง านสามารถแสดงผลพร้ อ มกั นได้
เหมาะสมกับผู้ใช้งานที่ไม่มีประสบการณ์ในการใช้งาน แต่ข้อเสีย คือ การแสดงผลแบบนี้จะเป็นการจํากัด
หน้าต่าง และบางครั้งบางหน้าต่างอาจะไม่จําเป็นกับผู้ใช้งานบางคน
2) หน้าต่างแบบซ้อนทับกัน (Overlapping Windows) เป็นรูปแบบการจัดวางหน้าต่างที่เรียงซ้อน
กัน ซึ่งแต่ละหน้าต่างสามารถปรับเปลี่ยนขนาดและตําแหน่งในการแสดงผลได้ เป็นรูปแบบที่ลดข้อจํากัดของ
หน้าต่างแบบตารางได้ โดยมีโครงสร้างดังภาพที่ 4.26
บทที่ 4 หลักการออกแบบเลย์เอาท์ 56
 

ภาพที่ 4.26 หน้าต่างแบบซ้อนทับกัน

3) หน้าต่างแบบเรียงลําดับ (Cascading Windows) เป็นรูปแบบการจัดลําดับแสดงผลหน้าต่าง

ที่เรียงเป็นลําดับ โดยแสดงผลทีละหน้าต่างซึ่งมีโครงสร้างดังภาพที่ 4.27

ภาพที่ 4.27 หน้าต่างแบบเรียงลําดับ

5. ตัวอักษร (Font/Typography)
ตัวอักษร เรียกว่า character และถ้าหากตัวอักษรที่มีลักษณะเหมือนกันเป็นชุดเดียวกัน เรียกว่า
ฟอนต์ (Font) เช่ น angsana UPC,arial, lily, cordia new, tahoma, เป็ น ต้ น ประวั ติ ค วามเป็ น มาของ
สิ่งพิมพ์เริ่มขึ้นจากการประดิษฐ์แท่นพิมพ์โลหะ โดย Johannes Gutenberg (ดังภาพที่ 4. (A)) ในปีค.ศ.
1440 ซึ่งทําให้เกิดระบบการพิมพ์เป็นจํานวนมาก โดยการพิมพ์นั้นสร้างจากแท่นพิมพ์ (ดังภาพที่ 4.28 (B))
ซึ่งทําให้เกิดการออกแบบตัวอักษรขึ้นตั้งแต่นั้นมา
บทที่ 4 หลักการออกแบบเลย์เอาท์ 57
 

(A) (B)
ภาพที่ 4.28 Johannes Gutenberg และแท่นพิมพ์

ส่วนประกอบของตัวอักษร (Font Anatomy)

ปัจจุบันมีองค์กรที่เรียกว่า The International Standard Organization (ISO) ตั้งที่ Geneva,
Switzerland มีหน้าที่กําหนดมาตรฐานของตัวอักษรที่ใช้ในงานสิ่งพิมพ์ ทั้งขนาด ลักษณะของตัวอักษรที่
สามารถอ่านได้ง่าย ความสูงและรายละเอียดต่าง ๆ

ภาพที่ 4.29 ตัวอักษรที่ใช้ในงานสิ่งพิมพ์

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

กันว่า "Anatomy" โดยมีรายละเอียดดังภาพที่ 4.30
บทที่ 4 หลักการออกแบบเลย์เอาท์ 58
 

ภาพที่ 4.30 Font Anatomy

ประเภทและลักษณะของฟอนต์ แบ่งออกเป็น
1) Serif เป็นฟอนต์ที่มีลักษณะทางการ พัฒนามาจากรูปแบบตัวอักษรที่เขียนด้วยมือ ลักษณะ
เด่นอยู่ที่หาง (Serif) ดังภาพที่ 4.31

ภาพที่ 4.31 Serif Font

2) San Serif พัฒนาจาก Serif ให้มีการลดทอนตัดส่วน Serif ออกจนดูทันสมัย เรียบง่าย ดัง
ภาพที่ 4.32
บทที่ 4 หลักการออกแบบเลย์เอาท์ 59
 

ภาพที่ 4.32 San Serif Font

3) Script ตัวอักษรที่มีลักษณะเหมือนเขียนด้วยมือ เป็นลายมือลักษณะต่าง ๆ กันไป ส่วนมาก
นิยมออกแบบให้ตัวอักษรมีลักษณะเอียงเล็กน้อย ดังภาพที่ 4.33

ภาพที่ 4.33 Script

4) Display ตัวอั ก ษรที่ ออกแบบเฉพาะให้ มี ลัก ษณะแปลกตาเพื่ อใช้ใ นการสร้ า งหัว โฆษณา
ประกาศ ไม่เน้นนําไปใช้ในการพิมพ์บทความ หรือเนื้อหาจํานวนมาก ดังภาพที่ 4.34
บทที่ 4 หลักการออกแบบเลย์เอาท์ 60
 

ภาพที่ 4.34 Display

ลักษณะของฟอนต์ (Type Face) แสดงดังภาพที่ 4.35

1) Normal/Regular ประเภทตัวธรรมดา
2) Bold ประเภทตัวหนา
3) Italic ประเภทตัวเอียง
4) Extra ประเภทตัวหนาพิเศษ
5) Light ประเภทตัวบางพิเศษ
6) Extended ประเภทตัวกว้างพิเศษ
7) Narrow ประเภทตัวแคบพิเศษ
8) Outline ประเภทตัวอักษรแบบมีขอบ
บทที่ 4 หลักการออกแบบเลย์เอาท์ 61
 

ภาพที่ 4.35 ลักษณะของฟอนต์

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

การจัดวางหน้ากระดาษ (Arranging) แสดงดังภาพที่ 4.36

1) Flush Left วางตัวอักษรเสมอซ้าย
2) Flush Right วางตัวอักษรเสมอขวา
3) Centered วางตัวอักษรตรงกลาง
4) Justified วางตัวอักษรเสมอซ้ายและขวา
5) Contour วางตัวอักษรให้สอดคล้องลักษณะของภาพ
6) Concrete วางตัวอักษรเป็นรูปร่างตามต้องการ
7) Direction วางตัวอักษรแบบมีทิศทาง
บทที่ 4 หลักการออกแบบเลย์เอาท์ 62
 

ภาพที่ 4.36 การจัดวางหน้ากระดาษ

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

ภาพที่ 4.37 การให้พื้นที่ตัวอักษร

1) ให้พื้นที่ตัวอักษร การให้พื้นที่กับตัวอักษรจะทําให้คนอ่านไม่รู้สึกปวดตาหรืออึดอัดเกินไป
ดังภาพที่ 4.37
บทที่ 4 หลักการออกแบบเลย์เอาท์ 63
 

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

ภาพที่ 4.38 การเว้นบรรทัดให้พอเหมาะ

3) ห้ามย่อ “สเกล” ให้ผิดรูป การย่อหรือเพิ่มขนาดตัวอักษรแบบไม่ดูสเกลของตัวอักษรจัดเป็น

ข้อผิดพลาดอย่างมากของการใช้ฟอนต์ โดยเทคนิค คือ เวลาย่อทุกครั้งควรกด Shift ไปด้วย
ทุกครั้งเพื่อให้เพิ่มหรือลดขนาดของฟอนต์โดยไม่ให้ผิดสเกลหรือรูปทรงเดิมของมัน ดังภาพที่
4.39
บทที่ 4 หลักการออกแบบเลย์เอาท์ 64
 

ภาพที่ 4.39 การย่อสเกล

4) ทําสีสันให้ดึงดูด ถ้าอยากให้คนสนใจในงานออกแบบ ผู้พัฒนาจะต้องออกแบบและจัดวาง
ตัวอักษรในหน้าจอให้สามารถอ่านได้ง่าย และหลักการ คือ การเลือกสีสันให้คนอ่านสามารถ
อ่านได้ง่าย เลือกสีให้ตัดกัน จะสามารถทําให้อ่านได้ง่ายมากขึ้น ดังภาพที่ 4.40

ภาพที่ 4.40 การทําสีสันให้ดงึ ดูด

บทที่ 4 หลักการออกแบบเลย์เอาท์ 65
 

5) การเลือกฟอนต์ เนื่องจากฟอนต์บางชนิดไม่เหมาะกับการอ่านที่เยอะ ๆ โดยฟอนต์แต่ละตัว

จะมีคุณสมบัตเิ ฉพาะตัว ดังภาพที่ 4.41

ภาพที่ 4.41 การเลือกฟอนต์ 1

ห้ามใช้ฟอนต์หลายตระกูล ในการออกแบบระบบ เว็บไซต์ หรือออกแบบใด ๆ ไม่ควรใช้

ฟอนต์เกิน 3 ตระกูล ไม่เช่นนั้นจะทําให้งานออกแบบดูยุ่งเหยิง และอ่านยากจนเกินไปดัง
ภาพที่ 4.42

ภาพที่ 4.42 การเลือกฟอนต์ 2

อีกทั้งการเลือกฟอนต์ให้เหมาะสมกับงานเป็นเรื่องที่ต้องใส่ใจให้มากทีส่ ดุ ดังภาพที่ 4.43

บทที่ 4 หลักการออกแบบเลย์เอาท์ 66
 

ภาพที่ 4.43 การเลือกฟอนต์ 3

6) การจัดการคําขาด ที่มักเกิดจากเนื้อหายาว ๆ ที่ต้องนํามาใช้ในการออกแบบและจัดวาง โดย

พยายามเว้ นบรรทัดจั ดหน้าให้ดูดีที่สุดแต่ในการจัดทุกครั้งมันจะมี “ติ่ ง” ข้อความหลุด
ออกมาเสมอ ดังภาพที่ 4.44

ภาพที่ 4.44 การจัดการคําขาด

บทที่ 4 หลักการออกแบบเลย์เอาท์ 67
 

7) ระมัดระวังการใส่เอฟเฟกต์ให้แก่ตัวอักษร โดยส่วนใหญ่แล้วเอฟเฟกต์ที่ตั้งค่ากับโปรแกรม
ต่าง ๆ จะไม่ได้รับความนิยม เช่น การดัดงอตัวอักษร เป็นต้น ฉะนั้นการใส่เอฟเฟกต์ที่ดีให้แก่
ตัวอักษร เช่น การทําตัวหนา ใส่เงา เป็นต้น ดังภาพที่ 4.45

ภาพที่ 4.45 การใส่เอฟเฟกต์ให้แก่ตัวอักษร

8) การปรับขนาดฟอนต์ ในงานออกแบบควรจะมีการปรับขนาดของตัวอักษรที่แสดงข้อมูลให้มี
ขนาด หรือความหนาที่แตกต่างกันบ้างตามความสําคัญของข้อมูล เช่น หัวข้อหรือคีย์เวิร์ดจะ
ใช้ตัวอักษรแบบหนา หรือให้มีขนาดใหญ่ขนึ้ ส่วนข้อความธรรมดาก็ควรปรับให้เล็กลง ดัง
ภาพที่ 4.46

ภาพที่ 4.46 การปรับขนาดฟอนต์

บทที่ 4 หลักการออกแบบเลย์เอาท์ 68
 

เทคนิคการใช้ฟอนต์ เพื่อให้ตัวอักษรในงานออกแบบมีความโดดเด่น และน่าสนใจ ดังนี้

1) การใช้สีที่ตัดกัน (Contrast of Color)

ภาพที่ 4.47 การใช้สีที่ตัดกัน

2) การใช้ทิศทางของฟอนต์ที่ตัดกัน (Contrast of Direction)

ภาพที่ 4.48 การใช้ทิศทางของฟอนต์ที่ตัดกัน

บทที่ 4 หลักการออกแบบเลย์เอาท์ 69
 

3) การใช้รูปแบบที่ตัดกัน (Contrast of Form)

ภาพที่ 4.49 การใช้รูปแบบทีต่ ัดกัน

4) การใช้ขนาดที่ตัดกัน (Contrast of Size)

ภาพที่ 4.50 การใช้ขนาดที่ตัดกัน

5) การใช้โครงสร้างแบบตัดกัน (Contrast of Structure)

ภาพที่ 4.51 การใช้โครงสร้างแบบตัดกัน

บทที่ 4 หลักการออกแบบเลย์เอาท์ 70
 

6) การใช้น้ําหนักที่ตัดกัน (Contrast of Weight)

ภาพที่ 4.52 การใช้น้ําหนักที่ตัดกัน

6. องค์ประกอบในการปฏิสัมพันธ์กับเลย์เอาท์ (Layout Interaction Elements)

องค์ประกอบในการปฏิสัมพันธ์หมายถึง เครื่องมือในการรับข้อมูลนําเข้า และแสดงผลข้อมูล
ให้แก่ผู้ใช้งานผ่านหน้าเลย์เอาท์
1) การใช้กล่องรับข้อความ (TextField) ประกอบด้วย
a. กล่องรับข้อความบรรทัดเดียว (Single line TextField) กล่องรับข้อความบรรทั ด
เดียวจะใช้กรอกข้อความสั้นๆ เช่นชื่อ, นามสกุล, เบอร์โทรศัพท์, หรืออีเมล์ เป็นต้น
ดังภาพที่ 4.53

ภาพที่ 4.53 กล่องรับข้อความบรรทัดเดียว

b. กล่ อ งรั บ รหั ส ผ่ า น (PasswordField) กล่ อ งรั บ รหั ส ผ่ า นจะรั บ ข้ อ มู ล เป็ น รหั ส ผ่ า น
โดยเฉพาะ เนื่ อ งจากผู้ ใ ช้ ก รอกข้ อ มู ล ลงในกล่ อ งรั บ รหั ส ผ่ า นจะปรากฏเป็ น
เครื่องหมายดอกจัน (*) หรือจุดสีดําแทนตัวอักษรแต่ละตัวในรหัสผ่าน ดังภาพที่ 4.54

ภาพที่ 4.54 กล่องรับข้อความบรรทัดเดียว

บทที่ 4 หลักการออกแบบเลย์เอาท์ 71
 

2) กล่องรับข้อความหลายบรรทัด (TextArea)
กล่องรับข้อความหลายบรรทัดเหมาะสําหรับเป็นกล่องรับข้อความยาวๆ เช่น กล่องรับที่
อยู่ หรือกล่องรับความคิดเห็น เป็นต้น ดังภาพที่ 4.55

ภาพที่ 4.55 กล่องรับข้อความหลายบรรทัด

3) การใช้ปุ่มตัวเลือก การสร้างข้อมูลเป็นแบบปุ่มตัวเลือกซึ่งมีอยู่ 2 ประเภทหลักด้วยกันคือ

a. ปุ่มตัวเลือกแบบปุ่มกลม (Radio)
ลักษณะของ ปุ่มตัวเลือกแบบ Radio คือ ใน 1 ชุดคําถามผู้ใช้สามารถเลือกคําตอบได้
เพียงแค่ 1 คําตอบเท่านั้น เช่นข้อมูลประเภท เพศ, ศาสนา หรือข้อสอบที่เลือกตอบ
ได้เพียงคําตอบเดียวเท่านั้น ดังภาพที่ 4.56

ภาพที่ 4.56 ปุ่มตัวเลือกแบบปุ่มกลม

b. ปุ่มตัวเลือกแบบปุ่มเหลี่ยม (Checkbox)
ลั ก ษณะของปุ่ ม Checkbox คื อ สามารถเลื อ กได้ ม ากกว่ า 1 ตั ว เลื อ ก เช่ น เลื อ ก
เกี่ยวกับความชอบ หรือเลือกข้อสอบที่ให้เลือกตอบมากกว่า 1 ข้อ เป็นต้น ดังภาพที่
4.57

ภาพที่ 4.57 ปุ่มตัวเลือกแบบปุ่มเหลี่ยม

4) กล่องรับตัวเลขแบบกําหนดขอบเขต (Input Restrictions) ใช้สําหรับรับค่าตัวเลขโดยมี
ช่วงตัวเลขที่บังคับไว้ ผู้ใช้งานสามารถกดที่ลูกศรเพื่อเพิ่มหรือลดได้แต่อยู่ในช่วงขอบเขตที่
กําหนดไว้เท่านั้น ดังภาพที่ 4.58

ภาพที่ 4.58 กล่องรับตัวเลขแบบกําหนดขอบเขต

บทที่ 4 หลักการออกแบบเลย์เอาท์ 72
 

ภาพที่ 4.59 กล่องรับวันที่

5) กล่ องรับวั นที่ (Date) สามารถรั บวันที่โดยผู้ใ ช้ ส ามารถกรอกข้ อมูล เองหรือ กดลู ก ศร
ด้านข้างเพื่อเลือกจากปฏิทิน ดังภาพที่ 4.59
6) กล่องเลือกสี (Color) สามารถรับค่าสีได้ โดยเมื่อผู้ใช้กดที่กล่องเลือกสีระบบจะแสดง
หน้าต่างใหม่สําหรับเลือกสี ดังภาพที่ 4.60

ภาพที่ 4.60 กล่องรับสี

7) แถบเลือกค่าตามช่วงที่กําหนด (Range) เป็นเส้นที่แสดงแถบช่วงข้อมูล โดยผู้ใช้สามารถ

ส่งค่าเข้าสู่ระบบโดยการเลื่อนปุ่มตามแถบเลือกค่าตามช่วงที่กําหนด ดังภาพที่ 4.61

ภาพที่ 4.61 แถบเลือกค่าตามช่วงที่กําหนด

บทที่ 4 หลักการออกแบบเลย์เอาท์ 73
 

8) กล่องแสดงรายการข้อมูล (Drop down menu) เป็นกล่องที่แสดงรายการข้อมูลที่ได้

กําหนดไว้แล้ว ดังภาพที่ 4.62

ภาพที่ 4.62 กล่องแสดงรายการข้อมูล

บทที่ 4 หลักการออกแบบเลย์เอาท์ 74
 

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

3.1

3.2

3.3

3.4
บทที่ 4 หลักการออกแบบเลย์เอาท์ 75
 

3.5

3.6

3.7

4) แคสเคตเมนูคืออะไร มีข้อดี และ/หรือข้อจํากัดอย่างไร

5) การใช้งานหน้าต่างในเลย์เอาท์เหมาะสมกับส่วนติดต่อผู้ใช้งานแบบใด เพราะอะไร
6) ถ้านิสิตได้รับมอบหมายให้ออกแบบเว็บไซต์ระบบทะเบียน นิสิตจะใช้ฟอนต์รูปแบบใด เพราะอะไร
7) ในงานด้านการออกแบบผู้พัฒนาสามารถใช้ฟอนต์ได้กี่ตระกูล เพราะอะไร
บทที่ 4 หลักการออกแบบเลย์เอาท์ 76
 

8) ให้นิสิ ตต้องออกแบบสรีนสํ าหรั บ สมัค รสมาชิ ก ชมรมปี น เขา โดยนิสิตต้ อ งวิ เ คราะห์ ผู้ ใ ช้ ง าน ข้ อมู ล ที่
จําเป็นต้องใช้ในการสมัครสมาชิก การใช้องค์ประกอบต่าง ๆ ในเลย์เอาท์ และการจัดวางตําแหน่งในเลย์เอาท์
บทที่ 5 หลักการใช้กราฟิกและสี 77
 

บทที่ 5 หลักการใช้กราฟิกและสี

คําอธิบาย
การออกแบบส่วนติดต่อผู้ใช้งานและสกรีนที่ใช้กราฟิกนั้นเริ่มต้นสมัยยุค 1980 และรุ่งเรื่องที่สุดใน
สมัย Apple'Lisa ของบริษัท Macintosh โดยส่วนติดต่อผู้ใช้งานแบบใช้กราฟิกนั้นเริ่มต้นจากการพัฒนามา
จากส่วนติดต่อผู้ใช้งานแบบตัวอักษรจึงได้กลายเป็นส่วนติดต่อผู้ใช้งานที่ได้รับความนิยมมากขึ้น ลักษณะที่
โดดเด่นของส่วนติดต่อผู้ใช้งานแบบใช้กราฟิก คือ การใช้งานไอคอน (Icon)
ต่อมาในปี 1990 เมื่อเริ่มมีการใช้งานเวิลด์วายเว็บ (WWW) ส่งผลให้หน้าสกรีนเริ่มมีการใช้งาน
กราฟิกมากยิ่งขึ้น ได้แ ก่ ภาพ (Images) ภาพถ่าย (Photographs) วิดิโอ (Video) แผนภาพ (Diagrams)
ภาพวาด (Drawings) และเสียง (Audio) ดังนั้นจึงทําให้เกิดคําว่ามัลติมิเดีย (Multimedia) ขึ้นซึ่งหมายถึงการ
ใช้งานกราฟิกหรือมิเดียที่มีความหลากหลายนั่นเอง
การใช้งานกราฟิกที่เหมาะสมจะส่งผลให้ส่วนติดต่อผู้ใช้งานนั้นสามารถสื่อสารและดึงดูดความสนใจ
จากผู้ใช้งานได้มาก ในขณะเดียวกันถ้าใช้กราฟิกที่ไม่เหมาะสมจะทําให้สกรีนดูสับสน และอาจทําให้เกิดการ
ใช้งานที่ผิดพลาดได้ ในบทนี้จะนําเสนอเกี่ยวกับเทคนิคการใช้งานกราฟิกสําหรับส่วนติดต่อผู้ใช้งานแบบใช้
กราฟิกหรือการออกแบบสกรีน ซึ่งจะเริ่มจากไอคอน การออกแบบไอคอน การใช้งานกราฟิก และหลักการ
และทฤษฎีสี

วัตถุประสงค์
1. รับทราบถึงหลักการของไอคอน
2. รับทราบถึงการใช้งานมัลติมิเดีย
3. รับทราบถึงหลักการและทฤษฎีสี
บทที่ 5 หลักการใช้กราฟิกและสี 78
 

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

ภาพที่ 5.1 ไอคอนทั่วไป

รูปแบบของไอคอน
การใช้งานไอคอนจะสะท้อนถึงวัตถุ (Objects) แนวคิด (Ideas) และการมีปฏิสัมพันธ์ (Actions) ที่เป็นที่
คุ้นเคยของมนุษย์ โดย Rogers (1989) ได้แบ่งรูปแบบของไอคอนเป็น 5 รูปแบบ คือ

 Resemblance คื อ ภาพที่มีความคล้ายคลึ งกั บวั ตถุจริ งที่ ต้อ งการสื่ อ เช่ น ไอคอนของหนั งสื อ หรื อ
พจนานุกรม ดังภาพที่ 5.2

ภาพที่ 5.2 ไอคอนของหนังสือหรือพจนานุกรม

บทที่ 5 หลักการใช้กราฟิกและสี 79
 

 Symbolic คือ ภาพที่นํามาใช้เป็นตัวแทนของบางสิ่งบางอย่าง (ที่เป็นนามธรรม) เช่น ไอคอนรูปแก้วที่มี

รอยแตก สามารถสื่อถึงใด ๆ ก็ตามที่มีคุณลักษณะเปราะบาง แตกง่าย ดังภาพที่ 5.3

ภาพที่ 5.3 ไอคอนที่สื่อถึงคุณลักษณะเปราะบาง

 Exemplar คือ ภาพที่เป็นตัวอย่างของคุณลักษณะของบางสิ่งบางอย่าง (ที่เป็นรูปธรรม) เช่น ไอคอนมีด

และส้อมอาจใช้เป็นสัญลักษณ์เพื่อสื่อถึงร้านอาหาร ดังภาพที่ 5.4

ภาพที่ 5.4 ไอคอนแบบ Exemplar

 Arbitrary คือ ภาพที่เป็นตัวแทนของบางสิ่งบางอย่าง (ที่เป็นรูปธรรม) ซึ่งสามารถทําให้เกิดการเรียนรู้ได้

เช่น สัญลักษณ์หน้ายิ้ม :-) ที่เมื่อลดทอนเหลือ :) หรือ ) ก็ยังคงทําให้มนุษย์เข้าใจได้ เพราะเกิดจากการ
เรียนรู้
บทที่ 5 หลักการใช้กราฟิกและสี 80
 

 Analogy คือ ภาพที่สื่อถึงลักษณะทางกายภาพหรือความหมายที่เกี่ยวกับสิ่งที่ต้องการสื่อ เช่น ภาพของ

รถขนย้ายที่มีก้อนอิฐ สามารถสื่อถึงลักษณะการขนย้าย หรือภาพคนที่กําลังลื่นล้ม สามารถสื่อถนนเปียก
หรือลื่น

ไอคอนสามารถใช้เพื่อเป็นสัญลักษณ์ของสิ่งต่าง ๆ ได้แก่
 ไอคอนที่เป็น วัตถุ (Objects) เช่น เอกสาร จะเกิดจากการใช้สี ลวดลาย
 ไอคอนที่เป็น การกระทํา (Actions) เช่น การวาง (Paste) ดังภาพที่ 5.5

ภาพที่ 5.5 ไอคอนที่เป็นการกระทํา

 ไอคอนที่เป็น สถานะของระบบ (System States) เช่น พร้อ มใช้งาน (Ready) หรือไม่พร้อ มใช้งาน
(Busy) ดังภาพที่ 5.6

ภาพที่ 5.6 ไอคอนที่เป็นสถานะของระบบ

 ไอคอนที่เป็นประเภทข้อความ (Message Types) เช่น คําเตือน (Warning) ดังภาพที่ 5.7

ภาพที่ 5.7 ไอคอนที่เป็นประเภทข้อความ

บทที่ 5 หลักการใช้กราฟิกและสี 81
 

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

คุณลักษณะของไอคอนที่ดี
 ไอคอนมีรูปแบบที่แตกต่างจากไอคอนอื่น
 ไอคอนมีความชัดเจนในการสื่อถึงสิ่งที่ต้องการนําเสนอ
 ไอคอนมีความชัดเจนแม้ว่าจะอยู่ในรูปแบบสีขาว-ดําหรือรูปแบบสี
 ไอคอนมีความชัดเจนแม้จะมีขนาดอยู่ที่ 16x16 pixels (ขนาดเล็กที่สุดเท่าที่มนุษย์จะสามารถเห็น
รายละเอียดได้)

ขนาดของไอคอน
 ขนาดมาตรฐาน
o 16x16 pixels จะเป็นขนาดเล็กที่สุด
o 32x32 pixels
o 48x48 pixels
 ขนาดของไอคอนจะขึ้นอยู่กับอุปกรณ์ที่ใช้
o การใช้สไตลัส: 15x15 pixels
o การใช้เมาส์: 20x20 pixels
o การใช้นิ้วมือ: 40x40 pixels

ภาพของไอคอน
 ควรเลือกใช้สที ี่นํามาจากแถบสีของระบบ (System Palette)
 ควรเลือกใช้งานไอคอนที่มีอยู่แล้ว ซึ่งจะเป็นไอคอนที่มนุษย์ทั่วไปคุ้นเคย เรียนรู้ และสามารถทําความ
เข้าใจได้อยู่แล้ว ซึ่งองค์กร The International Standards Organization (ISO) ได้พัฒนาไอคอน
มาตรฐานไว้
 ควรใช้ภาพเพื่อเป็นไอคอนของสิ่งใด ๆ ที่เป็นคํานาม
 ควรใช้ภาพที่มนุษย์คุ้นเคย
 ในการเลือกใช้ภาพจะต้องระมัดระวังเรื่องความเข้าใจพื้นฐานและวัฒนธรรมเชิงสังคม
บทที่ 5 หลักการใช้กราฟิกและสี 82
 

การสร้างไอคอน
 ใช้รูปทรงที่ใกล้เคียงกับวัตถุจริงและเป็นรูปทรงทั่วไป
 ไม่ควรใส่เส้นขอบให้แก่ไอคอน
 ไม่ควรใส่รายละเอียดให้ไอคอนมากเกินไป โดยจะต้องออกแบบให้เรียบง่ายที่สุด เพราะการใส่
รายละเอียดในภาพเยอะจะทําให้กวนตา และยากต่อการจดจํา
 สี เฉดสี แสงเงา และขนาดของเส้นกราฟิก ควรมีขนาดที่เหมาะสม ตรงนี้อาจใช้วิธีการย่องานเพื่อดูความ
ละเอียด ส่วนมากงานไอคอนที่ปรากฏบนหน้าเว็บไซต์จะมีขนาดเล็ก ฉะนั้นงานที่ออกแบบในขนาดปกติ
500 พิกเซล เมื่อถูกย่อเป็นขนาด 15 พิกเซลบนหน้าเว็บแล้ว มันควรจะต้องดูดีอยู่ เช่น ไม่เบลอ เส้นไม่
หนาจนดูตัน หรือไม่บางจนเกินไป
 ถ้าต้องการออกแบบไอคอนให้เป็นเซ็ต (Set) เพื่อใช้ในงานเดียวกัน ดีไซเนอร์ต้องคําถึง “รูปแบบ” ที่
สอดคล้องกันด้วย (Consistency) ไม่ว่าจะเป็นเรื่องสี เส้น หรือมุมมอง (Perspective)

Multimedia
มั ล ติ (Multi) หมายถึ ง หลายๆ อย่ า งผสมรวมกั น มี เ ดี ย (Media) หมายถึ ง สื่ อ ข่ า วสาร ช่ อ งทางการ
ติดต่อสื่อสาร ดังนั้น มัลติมีเดีย (Multimedia) หมายถึง การนําองค์ประกอบของสื่อต่างๆ มาผสมผสาน
รวมเข้าด้วยกัน เพื่อให้เกิดปฏิสัมพันธ์ (Interactive) กับผู้ใช้งาน

มัลติมีเดียสามารถจําแนกองค์ประกอบของสื่อต่างๆ ได้เป็น 5 ชนิด ประกอบด้วย ข้อความหรือตัวอักษร

(Text) ภาพนิ่ง (Still Image) ภาพเคลื่อนไหว (Animation) เสียง (Sound) และภาพวิดีโอ (Video) แล้ว
นํามาผสมผสานเข้าด้วยกันเพื่อใช้สําหรับการปฏิสัมพันธ์หรือโต้ตอบ (Interaction) ระหว่างคอมพิวเตอร์กับ
ผู้ใช้ซึ่งถือได้ว่าเป็นกิจกรรมที่ผู้ใช้สามารถเลือกกระทําต่อมัลติมีเดียได้ตามต้องการ ตัวอย่างเช่น ผู้ใช้ได้ทําการ
เลือกรายการและตอบคําถามผ่านทางจอภาพของเครื่องคอมพิวเตอร์ จากนั้นระบบคอมพิวเตอร์ก็จําทําการ
ประมวลผลและแสดงผลลัพธ์ย้อนกลับผ่านทางจอภาพให้ผู้ใช้เป็นอีกครั้ง เป็นต้น

นอกจากนี้ ยังมีการปฏิสัมพันธ์ในรูปแบบอื่นๆ อีกมากมาย ทั้งนี้ขึ้นอยู่กับเครื่องมือและรูปแบบที่จะนํามา

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

1. ข้อความหรือตัวอักษร (Text)
2. ภาพนิ่ง (Still Image)
3. ภาพเคลื่อนไหว (Animation)
บทที่ 5 หลักการใช้กราฟิกและสี 83
 

4. เสียง (Sound)
5. ภาพวิดีโอ (Video)

ข้อความหรือตัวอักษร (Text)
 ข้อความหรือตัวอักษรถือว่าเป็นองค์ประกอบพื้นฐานที่สําคัญของมัลติมีเดีย ระบบมัลติมีเดียที่นําเสนอ
ผ่านจอภาพของเครื่องคอมพิวเตอร์ นอกจากจะมีรูปแบบและสีของตัวอักษรให้เลือกมากมายตามความ
ต้องการแล้วยังสามารถกําหนดลักษณะของการปฏิสัมพันธ์ (โต้ตอบ)ในระหว่างการนําเสนอได้อีกด้วย
 ข้อความ เป็นส่วนที่เกี่ยวกับเนื้อหาของมัลติมีเดีย ใช้แสดงรายละเอียด หรือเนื้อหาของเรื่องที่นําเสนอ ซึ่ง
ปัจจุบัน มีหลายรูปแบบ ได้แก่
o ข้ อ ความที่ ไ ด้ จ ากการพิ ม พ์ เป็ น ข้ อ ความปกติ ที่ พ บได้ ทั่ ว ไป ได้ จ ากการพิ ม พ์ ด้ ว ย โปรแกรม
ประมวลผลงาน (Word Processor) เช่น NotePad, Text Editor, Microsoft Word โดยตัวอักษร
แต่ละตัวเก็บในรหัส เช่น ASCII
o ข้อความจากการสแกน เป็นข้อความในลักษณะภาพ หรือ Image ได้จากการนําเอกสารที่พิมพ์ไว้
แล้ว (เอกสารต้นฉบับ) มาทําการสแกน ด้วยเครื่องสแกนเนอร์ (Scanner) ซึ่งจะได้ผลออกมาเป็น
ภาพ (Image) 1 ภาพ ปัจจุบันสามารถแปลงข้อความภาพ เป็นข้อความปกติได้ โดยอาศัยโปรแกรม
OCR ข้อความอิเล็กทรอนิกส์ เป็นข้อความที่พัฒนาให้อยู่ในรูปของสื่อ ที่ใช้ประมวลผลได้
o ข้อความไฮเปอร์เท็กซ์ (HyperText) เป็นรูปแบบของข้อความ ที่ได้รับความนิยมสูงมาก ในปัจจุบัน
โดยเฉพาะการเผยแพร่เอกสารในรูปของเอกสารเว็บ เนื่องจากสามารถใช้เทคนิค การลิงก์ หรือเชื่อม
ข้อความ ไปยังข้อความ หรือจุดอื่นๆ ได้

ภาพนิ่ง (Still Image)

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

 ภาพนิ่งเป็นสื่อในการนําเสนอที่ดี เนื่องจากมีสีสรร มีรูปแบบที่น่าสนใจ สามารถสื่อความหมายได้กว้าง

ประกอบด้วย
o ภาพบิตแมพ (Bitmap) เป็นภาพที่มีการเก็บข้อมูลแบบพิกเซล หรือจุดเล็กๆ ที่แสดงค่าสี ดังนั้นภาพ
หนึ่งๆ จึงเกิดจากจุดเล็กๆ หลายๆ จุดประกอบกัน (คล้ายๆ กับการปักผ้าครอสติช) ทําให้รูปภาพแต่
ละรูป เก็บข้อมูลจํานวนมาก เมื่อจะนํามาใช้ จึงมีเทคนิคการบีบอัดข้อมูล ฟอร์แมตของภาพบิตแมพ
ที่รู้จักกันดี ได้แก่ .BMP, .PCX, .GIF, .JPG, .TIF
บทที่ 5 หลักการใช้กราฟิกและสี 84
 

o ภาพเวกเตอร์ (Vector) เป็นภาพที่สร้างด้วยส่วนประกอบของเส้นลักษณะต่างๆ และคุณสมบัติ

เกี่ยวกับสีของเส้นนั้นๆ ซึ่งสร้างจากการคํานวณทางคณิตศาสตร์ เช่น ภาพของคน ก็จะถูกสร้างด้วย
จุดของเส้นหลายๆ จุด เป็นลักษณะของโครงร่าง (Outline) และสีของคนก็เกิดจากสีของเส้นโครง
ร่างนั้นๆ กับพื้นที่ผิวภายในนั่นเอง เมื่อมีการแก้ไขภาพ ก็จะเป็นการแก้ไขคุณสมบัติของเส้น ทําให้
ภาพไม่สูญเสียความละเอียด เมื่อมีการขยายภาพนั่นเอง ภาพแบบ Vector ที่หลายๆ ท่านคุ้นเคยก็
คือ ภาพ .wmf ซึ่งเป็น clipart ของ Microsoft Office นั่นเอง นอกจากนี้คุณจะสามารถพบภาพ
ฟอร์แมตนี้ ได้กับภาพในโปรแกรม Adobe Illustrator หรือ Macromedia Freehand
o คลิปอาร์ต (Clipart) เป็นรูปแบบของการจัดเก็บภาพ จํานวนมากๆ ในลักษณะของตารางภาพ หรือ
ห้องสมุดภาพ หรือคลังภาพ เพื่อให้เรียกใช้ สืบค้น ได้ง่าย สะดวก และรวดเร็ว
o HyperPicture มักจะเป็นภาพชนิดพิเศษ ที่พบได้บนสื่อมัลติมีเดีย มีความสามารถเชื่อมโยงไปยัง
เนื้อหา หรือรายละเอียดอื่นๆ มีการกระทํา เช่น คลิก (Click) หรือเอาเมาส์มาวางไว้เหนือตําแหน่งที่
ระบุ (Over) สํ า หรั บ การจั ด หาภาพ หรื อ เตรี ย มภาพ ก็ มี ห ลายวิ ธี เช่ น การสร้ า งภาพเอง ด้ ว ย
โปรแกรมสร้างภาพ เช่น Adobe Photoshop, PhotoImpact, CorelDraw หรือการนําภาพจาก
อุปกรณ์ เช่น กล้องถ่ายภาพดิจิตอล, กล้องวิดีโอดิจิตอล หรือสแกนเนอร์

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

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

ลักษณะของเสียง ประกอบด้วย
 คลื่นเสียงแบบออดิโอ (Audio) ซึ่งมีฟอร์แมตเป็น .wav, .au การบันทึกจะบันทึกตามลูกคลื่นเสียง โดยมี
การแปลงสัญญาณให้เป็นดิจิทัล และใช้เทคโนโลยีการบีบอัดเสียงให้เล็กลง (ซึ่งคุณภาพก็ต่ําลงด้วย)
 เสียง CD เป็นรูปแบบการบันทึก ที่มีคุณภาพสูง ได้แก่ เสียงที่บันทึกลงในแผ่น CD เพลงต่างๆ
บทที่ 5 หลักการใช้กราฟิกและสี 85
 

 MIDI (Musical Instrument Digital Interface) เป็ น รู ป แบบของเสี ย งที่ แ ทนเครื่ อ งดนตรี ช นิ ด ต่ า งๆ
สามารถเก็บข้อมูล และให้วงจรอิเล็กทรอนิกส์ สร้างเสียงตามตัวโน้ต เสมือนการเล่นของเครื่องเล่นดนตรี
นั้นๆ เทคโนโลยีเกี่ยวกับเสียง ประกอบด้วย
o Synthesize Sound เป็นเสียงที่เกิดจากตัววิเคราะห์เสียง ที่เรียกว่า MIDI โดยเมื่อตัวโน้ตทํางาน
คําสั่ง MIDI จะถูกส่งไปยัง Synthesize Chip เพื่อทําการแยกสียงว่าเป็นเสียงดนตรีชนิดใด ขนาด
ไฟล์ MIDI จะมีขนาดเล็ก เนื่องจากเก็บคําสั่งในรูปแบบง่ายๆ
o Sound Data เป็นเสียงจากที่มีการแปลงจากสัญญาณ analog เป็นสัญญาณ digital โดยจะมีการ
บันทึกตัวอย่างคลื่น (Sample) ให้อยู่ที่ใดที่หนึ่งในช่วงของเสียงนั้นๆ และการบันทึกตัวอย่างคลื่น
เรียงกันเป็นจํานวนมาก เพื่อให้มีคุณภาพที่ดี ก็จะทําให้ขนาดของไฟล์โตตามไปด้วย

Sample Rate จะแทนด้ วย kHz ใช้ อธิ บายคุณภาพของเสียง อัตรามาตรฐานของ sample rate เท่ ากับ
11kHz, 22kHz, 44kHz Sample Size แทนค่าด้วย bits คือ 8 และ 16 บิท ใช้อธิบายจํานวนของข้อมูลที่ใช้
จัดเก็บในคอมพิวเตอร์ คุณภาพเสียงที่ดีที่สุด ได้แก่ Auido-CD ที่เท่ากับ 44kHz ระบบ 16 บิท เป็นต้น

มาตรฐานการบีบอัดข้อมูล เสียงที่มีคุณภาพดี มักจะมีขนาดโต จึงต้องมีการบีบอัดข้อมูลให้มีขนาดเล็กลง

มาตรฐานการบีบอัดข้อมูล ได้แก่
 ADPCM - Adaptive Differential Pulse Code Modulation โดยจะทําการบีบอัดข้อมูลที่มีการบันทึก
แบบ 8 หรือ 16 บิท โดยมีอัตราการบีบอัดประมาณ 4:1 หรือ 2:1
 u-law, A-law เป็นมาตรฐานที่กําหนดโดย CCITT สามารถบีบอัดเสียง 16 บิท ได้ในอัตรา 2:1
 MACE มีจุดเด่นคือ บีบอัดและขยายข้อมูลให้มีขนาดเท่าเดิมได้ จึงใช้ได้เฉพาะข้อมูลเสียง 8 บิต อัตรา
การบีบอัดคือ 3:1 และ 6:1 อย่างไรก็ตามคุณภาพเสียงไม่ดีเท่าที่ควร และทํางานได้เฉพาะกับ Mac
เท่านั้น
 MPEG เป็ นมาตรฐานการบีบอั ดข้อมู ล ที่ นิยมมากในปัจจุ บัน โดยชื่อนี้ เป็ นชื่อย่อของที มงานพัฒนา
Moving Picture Export Group โดยปัจจุบันมีฟอร์แมตที่นิยมคือ MP3 (MPEG 1 Audio Layer 3) ซึ่ง
ก็คือเทคโนโลยีการบีบอัดข้อมูลเสียงของมาตรฐาน MPEG 1 นั่นเอง เป็นไฟล์ที่นิยมใช้กับเครือข่าย
อินเทอร์เน็ตด้วย

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

การสิ้นเปลืองทรัพยากรของพื้นที่บนหน่วยความจําเป็นจํานวนมาก เนื่องจากการนําเสนอวิดีโอด้วยเวลาที่
เกิดขึ้นจริง (Real-Time) จะต้องประกอบด้วยจํานวนภาพไม่ต่ํากว่า 30 ภาพต่อวินาที (Frame/Second) ถ้า
บทที่ 5 หลักการใช้กราฟิกและสี 86
 

หากการประมวลผลภาพดังกล่าวไม่ได้ผ่านกระบวนการบีบอัดขนาดของสัญญาณมาก่อน การนําเสนอภาพ
เพี ย ง 1 นาที อ าจต้ อ งใช้ ห น่ ว ยความจํ า มากกว่ า 100 MB ซึ่ ง จะทํ า ให้ ไ ฟล์ มี ข นาดใหญ่ เ กิ น ขนาดและมี
ประสิทธิภาพในการทํางานที่ด้อยลง ซึ่งเมื่อมีการพัฒนาเทคโนโลยีที่สามารถบีบอัดขนาดของภาพอย่าง
ต่อเนื่องจนทําให้ภาพวิดีโอสามารถทํางานได้อย่างมีประสิทธิภาพมากยิ่งขึ้นและกลายเป็นสื่อที่มีบทบาท
สําคัญต่อระบบมัลติมีเดีย (Multimedia System)

Video file format เป็นรูปแบบที่ใช้บันทึกภาพและเสียงที่สามารถทํางานกับคอมพิวเตอร์ได้เลย มีหลาย

รูปแบบได้แก่
 AVI (Audio / Video Interleave) เป็ น ฟอร์ แ มตที่ พั ฒ นาโดยบริษั ท ไมโครซอฟต์ เรี ย กว่ า Video for
Windows มีนามสกุลเป็น .avi ปัจจุบันมีโปรแกรมแสดงผลติดตั้งมาพร้อมกับชุด Microsoft Windows
คือ Windows Media Player
 MPEG - Moving Pictures Experts Group รูปแบบของไฟล์ที่มีการบีบอัดไฟล์ เพื่อให้มีขนาดเล็กลง
โดยใช้เทคนิคการบีบข้อมูลแบบ Inter Frame หมายถึง การนําความแตกต่างของข้อมูลในแต่ละภาพมา
บีบ และเก็บ โดยสามารถบีบข้อมูลได้ถึง 200 : 1 หรือเหลือข้อมูลเพียง 100 kb/sec โดยคุณภาพยังดีอยู่
มีการพัฒนาอย่างต่อเนื่อง โดย MPEG-1 มีนามสกุล คือ .mpg Quick Time เป็นฟอร์แมตที่พัฒนาโดย
บริษัท Apple นิยมใช้นําเสนอข้อมูลไฟล์ผ่านอินเทอร์เน็ต มีนามสกุลเป็น .mov

ประโยชน์ของมัลติมีเดีย
แนวทางการนํ า มั ล ติ มี เ ดี ย มาประยุ ก ต์ ใ ช้ ง านกั บ โปรแกรมคอมพิ ว เตอร์ มี ห ลายรู ป แบบทั้ ง นี้ ขึ้ น อยู่ กั บ
วั ต ถุ ป ระสงค์ ข องการนํ า ไปใช้ ง าน ตั ว อย่ า งเช่ น สื่ อ มั ล ติ มี เ ดี ย ที่ ผ ลิ ต เป็ น บทเรี ย นสํ า เร็ จ รู ป (CD-ROM
Package) สําหรับกลุ่มผู้ใช้ในแวดวงการศึกษาและฝึกอบรม สื่อมัลติมีเดียที่ผลิตขึ้นเพื่อนําเสนอผลิตภัณฑ์
และบริการ(Product and Services) สําหรับการโฆษณาในแวดวงธุรกิจ เป็นต้น นอกจากจะช่วยสนับสนุน
ประสิทธิภาพในการดําเนินงานแล้วยังเป็นการเพิ่มประสิทธิผลให้เกิดความคุ้มค่าในการลงทุนอีกด้วย โดย
สามารถแยกแยะประโยชน์ที่จะได้รับจากการนํามัลติมีเดียมาประยุกต์ใช้งานได้ดังนี้

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

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

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

สรุปได้ว่า คําว่า “มัลติมีเดีย” มีความหมายที่ค่อนข้างกว้าง ทั้งนี้ขึ้นอยู่กับมุมมองของผู้ที่สนใจ อย่างไรก็ตาม

กระแสนิยมด้านมัลติมีเดียมักจะนําคอมพิวเตอร์มาประยุกต์ใช้งานร่วมด้วย เนื่องจากเป็นอุปกรณ์ที่มีขีด
ความสามารถในการผลิตสื่อได้หลากหลายรูปแบบ รวมทั้งยังสามารถนําเสนอและติดต่อสื่อสารได้อีกด้วย
สําหรับในที่นี้คําว่า “มัลติมีเดีย” หมายถึง การนําองค์ประกอบของสื่อชนิดต่าง ๆ มาผสมผสานเข้าด้วยกัน ซึ่ง
ประกอบด้วย ตัวอักษร(Text) ภาพนิ่ง (Still Image) ภาพเคลื่อนไหว (Animation) เสียง (Sound) และวิดีโอ
(Video) โดยผ่ า นกระบวนการทางระบบคอมพิ ว เตอร์ เ พื่ อ สื่ อ ความหมายกั บ ผู้ ใ ช้ อ ย่ า งมี ป ฏิ สั ม พั น ธ์
(Interactive Multimedia) และได้บรรลุผลตรงตามวัตถุประสงค์การใช้งาน ในส่วนของแต่ละองค์ประกอบ
บทที่ 5 หลักการใช้กราฟิกและสี 88
 

ของมัลติมีเดียทั้ง 5 ชนิดจะมีทั้งข้อดี-ข้อเสียที่แตกต่างกันไปตามคุณลักษณะและวิธีการใช้งาน สําหรับ

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

หลักการทํางานและการแสดงผลของภาพคอมพิวเตอร์กราฟิก
ภาพที่เกิดบนจอคอมพิวเตอร์ เกิดจากการทํางานของโหมดสี RGB ซึ่งประกอบด้วยสีแดง (Red) สีเขียว
(Green) และสีน้ําเงิน (Blue) โดยใช้หลักการยิงประจุไฟฟ้าให้เกิดการเปล่งแสงของสีทั้ง 3 สีมาผสมกันทําให้
เกิดเป็นจุดสีสี่เหลี่ยมเล็ก ๆ ที่เรียกว่า พิกเซล (Pixel) ซึ่งมาจากคําว่า Picture กับ Element โดยพิกเซลจะมี
หลากหลายสี เมื่อนํามาวางต่อกันจะเกิดเป็นรูปภาพ ซึ่งภาพที่ใช้กับเครื่องคอมพิวเตอร์มี 2 ประเภท คือ แบบ
Raster และแบบ Vector

1. หลักการของกราฟิกแบบ Raster
หลักการของภาพกราฟิกแบบ Raster หรือแบบ Bitmap เป็นภาพกราฟิกที่เกิดจากการเรียงตัวกัน
ของจุดสี่เหลี่ยมเล็ก ๆ หลากหลายสี ซึ่งเรียกจุดสีเหลี่ยมเล็ก ๆ นี้ว่าพิกเซล (Pixel) ดังภาพที่ 5.8 ในการสร้าง
ภาพกราฟิกแบบ Raster จะต้องกําหนดจํานวนของพิกเซลให้กับภาพที่ต้องการสร้าง ถ้ากําหนดจํานวน
พิกเซลน้อย เมื่อขยายภาพให้มีขนาดใหญ่ขึ้นจะทําให้แฟ้มภาพมีขนาดใหญ่ ดังนั้นการกําหนดพิกเซลจึงควร
กําหนดให้เหมาะกับงานที่สร้างคือ ถ้าต้องการใช้งานทั่ว ๆ ไปจะกําหนดจํานวนพิกเซลประมาณ 100-150
ppi (Pixel/inch) “จํานวนพิกเซลต่อ 1 ตารางนิ้ว” ถ้าเป็นงานที่ต้องการความละเอียดน้อยและแฟ้มภาพมี
ขนาดเล็ก เช่น ภาพสําหรับใช้กับเว็บไซต์จะกําหนดจํานวนพิกเซลประมาณ 72 ppi และถ้าเป็นแบบงาน
พิมพ์ เช่น นิตยสาร โปสเตอร์ขนาดใหญ่ จะกําหนดจํานวนพิกเซลประมาณ 300-350 เป็นต้น ข้อดีของ
ภาพกราฟิกแบบ Raster คือ สามารถแก้ไขปรับแต่งสี ตกแต่งภาพได้ง่ายและสวยงาม ซึ่งโปรแกรมที่นิยมใช้
สร้างภาพกราฟิกแบบ Raster คือ Adobe Photoshop, Paint เป็นต้น

ภาพที่ 5.8 กราฟิกแบบ Raster

บทที่ 5 หลักการใช้กราฟิกและสี 89
 

นามสกุลทีใ่ ช้เก็บแฟ้มภาพกราฟิกแบบ Raster มีหลายนามสกุล เช่น .BMP, .DIB, .JPG, .JPEG, .JPE, .GIF,
.TIFF, .TIF, .PCX, .MSP, .PCD, .FPX, .IMG, .MAC, .MSP และ .TGA เป็นต้น ซึ่งลักษณะของแฟ้มภาพจะ
แตกต่างกันไป ยกตัวอย่างดังตารางที่ 5.1

ตารางที่ 5.1 แฟ้มภาพกราฟิกแบบ Raster และคุณลักษณะของแฟ้มภาพกราฟิก

ตัวอย่างซอฟต์แวร์
นามสกุลทีใ่ ช้เก็บ ลักษณะงาน
ที่ใช้สร้าง
.JPG, .JPEG, .JPE ใช้สําหรับรูปภาพทั่วไปงานเว็บเพจ และงาน โปรแกรม PhotoShop,
ที่มีความจํากัดด้านพื้นที่ PaintShopPro, Illstratior
.GIF หน่วยความจํา
.TIFF, .TIF เหมาะสําหรับงานด้านนิตยสาร เพราะมี
ความละเอียดของภาพสูง
.BMP, .DIB ไฟล์มาตรฐานของระบบปฏิบัติการวินโดว์ โปรแกรม PaintShopPro, Paint
.PCX เป็นไฟล์ดั้งเดิมของโปรแกรมแก้ไขภาพแบบ โปรแกรม CorelDraw,
บิตแมป ไม่มีโมเดลเกรย์สเกล ใช้กับภาพ Illustrator, Paintbrush
ทั่วไป

2. หลักการของกราฟิกแบบ Vector
หลักการของกราฟิกแบบ Vector เป็นภาพกราฟิกที่เกิดจากการอ้างอิงความสัมพันธ์ทางคณิตศาสตร์
หรือการคํานวณ ซึ่งภาพจะมีความเป็นอิสระต่อกัน โดยแยกชิ้นส่วนของภาพทั้งหมดออกเป็นเส้นตรง เส้นโค้ง
รูปทรง เมื่อมีการขยายภาพความละเอียดของภาพไม่ลดลง แฟ้มมีขนาดเล็กกว่าแบบ Raster ภาพกราฟิก
แบบ Vector นิยมใช้เพื่องานด้านสถาปัตยกรรมตกแต่งภายในและการออกแบบต่าง ๆ เช่น การออกแบบ
อาคาร การออกแบบรถยนต์ การสร้างโลโก้ การสร้างการ์ตูน เป็นต้น ดังภาพที่ 5.9 ซึ่งโปรแกรมที่นิยมใช้
สร้างภาพแบบ Vector คือ โปรแกรม Illustrator, CoreDraw, AutoCAD, 3Ds max เป็นต้น แต่อุปกรณ์ที่
ใช้แสดงผลภาพ เช่น จอคอมพิวเตอร์จะเป็นการแสดงผลภาพเป็นแบบ Raster
บทที่ 5 หลักการใช้กราฟิกและสี 90
 

ภาพที่ 5.9 กราฟิกแบบ Vector

นามสกุ ล ที่ ใ ช้เก็ บ แฟ้ ม ภาพกราฟิ กแบบ Vector มีหลายนามสกุล เช่น .EPS, .WMF, .CDR, .AI, .CGM,
.DRW, .PLT, .DXF, .PIC และ .PGL เป็นต้น ซึ่งลักษณะของแฟ้มภาพจะแตกต่างกันไป ดังตารางที่ 5.2

ตารางที่ 5.2 แฟ้มภาพกราฟิกแบบ Vector และคุณลักษณะของแฟ้มภาพกราฟิก

ตัวอย่างซอฟต์แวร์
นามสกุลทีใ่ ช้เก็บ ลักษณะงาน
ที่ใช้สร้าง
.AI ใช้ สําหรั บงานที่ต้องการความละเอียดของภาพมาก โปรแกรม Illustrator
.EPS เช่น การสร้างการ์ตูน การสร้างโลโก เป็นต้น
.WMF ไฟล์มาตรฐานของโปรแกรม Microsoft Office โปรแกรม CorelDraw

ภาพกราฟิกแบบ Raster และ แบบ Vector มีความแตกต่างกันดังตารางที่ 5.3

ตารางที่ 5.3 ความแตกต่างระหว่างภาพแบบ Raster และ Vector

ภาพกราฟิกแบบ Raster ภาพกราฟิกแบบ Vector
1. ภ า พ ก ร า ฟิ ก เ กิ ด จ า ก จุ ด สี่ เ ห ลี่ ย ม เ ล็ ก ๆ 1. ภาพเกิ ด จากการอ้ า งอิ ง ความสั ม พั น ธ์ ท าง
หลากหลายสี (Pixels) มาเรียงต่อกันจนกลายเป็น คณิตศาสตร์หรือการคํานวณ โดยองค์ประกอบของ
รูปภาพ ภาพมีอิสระต่อกัน
2. การขยายภาพกราฟิกให้มีขนาดใหญ่ขึ้น จะทําให้ 2. การขยายภาพกราฟิก ให้มีขนาดใหญ่ขึ้น ภาพ
ความละเอียดของภาพลดลง ทําให้มองเห็นภาพเป็น ยังคงความละเอียดคมชัดเหมือนเดิม
จุดสี่เหลี่ยมเล็ก ๆ
บทที่ 5 หลักการใช้กราฟิกและสี 91
 

3. การตกแต่งและแก้ไขภาพ สามารถทําได้ง่ายและ 3. เหมาะกับงานออกแบบต่าง ๆ เช่น งานสถาปัตย์

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

หลักการใช้สีและแสงในคอมพิวเตอร์
สีที่ใช้งานด้านกราฟิกทั่วไปมี 4 ระบบ คือ
1. RGB
2. CMYK
3. HSB
4. LAB

RGB
เป็นระบบสีที่ประกอบด้วยแม่สี 3 สีคือ แดง (Red), เขียว (Green) และสีน้ําเงิน (Blue) เมื่อนํามาผสม
กันทําให้เกิดสีต่าง ๆ บนจอคอมพิวเตอร์มากถึง 16.7 ล้านสี ซึ่งใกล้เคียงกับสีที่ตาเรามองเห็นปกติ สีที่ได้จาก
การผสมสีขึ้นอยู่กับความเข้มของสี โดยถ้าสีมีความเข้มมาก เมื่อนํามาผสมกันจะทําให้เกิดเป็นสีขาว จึงเรียก
ระบบสีนี้ว่าแบบ Additive หรือการผสมสีแบบบวก ดังภาพที่ 5.10

ภาพที่ 5.10 ระบบสี RGB

บทที่ 5 หลักการใช้กราฟิกและสี 92
 

CMYK
เป็นระบบสีที่ใช้กับเครื่องพิมพ์ที่พิมพ์ออกทางกระดาษหรือวัสดุผิวเรียบอื่น ๆ ซึ่งประกอบด้วยสีหลัก 4 สีคือ
สีฟ้า (Cyan), สีม่วงแดง (Magenta), สีเหลือง (Yellow) และสีดํา (Black) เมื่อนํามาผสมกันจะเกิดสีเป็นสีดํา
แต่จะไม่ดําสนิทเนื่องจากหมึกพิมพ์มีความไม่บริสุทธิ์ จึงเป็นการผสมสีแบบลบ (Subtractive) หลักการเกิดสี
ของระบบนี้คือ หมึกสีหนึ่งจะดูดกลืนแสงจากสีหนึ่งแล้วสะท้อนกลับออกมาเป็นสีต่าง ๆ เช่น สีฟ้าดูดกลืนแสง
ของสีม่วงแล้วสะท้อนออกมาเป็นสีน้ําเงิน ซึ่งจะสังเกตได้ว่าสีที่สะท้อนออกมาจะเป็นสีหลักของระบบ RGB
การเกิดสีในระบบนี้จึงตรงข้ามกับการเกิดสีในระบบ RGB ดังภาพ

ภาพที่ 5.10 ระบบสี RGB

HSB
เป็นระบบสีแบบการมองเห็นของสายตามมนุษย์ ซึ่งแบ่งออกเป็น 3 ส่วน คือ
 Hue คือสีต่าง ๆ ที่สะท้อนออกมาจากวัตถุแล้วเข้าสู่สายตาของเรา ซึ่งมักเรียกสีตามชื่อสี เช่น สีเขียว
สีเหลือง สีแดง เป็นต้น
 Saturation คือความสดของสี โดยค่าความสดของสีจะเริ่มที่ 0 ถึง 100 ถ้ากําหนด Saturation ที่ 0
สีจะมีความสดน้อย แต่ถ้ากําหนดที่ 100 สีจะมีความสดมาก
 Brightness คือระดับความสว่างของสี โดยค่าความสว่างของสีจะเริ่มที่ 0 ถึง 100 ถ้ากําหนดที่ 0 ความ
สว่างจะน้อยซึ่งจะเป็นสีดํา แต่ถ้ากําหนดที่ 100 สีจะมีความสว่างมากที่สุด
บทที่ 5 หลักการใช้กราฟิกและสี 93
 

ภาพที่ 5.11 ระบบสี HSB

LAB
เป็นระบบสีที่ไม่ขึ้นกับอุปกรณ์ใด ๆ (Device Independent) โดยแบ่งออกเป็น 3 ส่วน คือ
 “L” หรือ Luminance เป็นการกําหนดความสว่ า งซึ่งมี ค่ าตั้ งแต่ 0 ถึง 100 ถ้ากําหนดที่ 0 จะ
กลายเป็นสีดํา แต่ถ้ากําหนดที่ 100 จะเป็นสีขาว
 “A” เป็นค่าของสีที่ไล่จากสีเขียวไปสีแดง
 “B” เป็นค่าของสีที่ไล่จากสีน้ําเงินไปเหลือง

ภาพที่ 5.11 ระบบสี LAB

บทที่ 5 หลักการใช้กราฟิกและสี 94
 

Color Theory
ความรู้เรื่องทฤษฎีสีเป็นสิ่งสําคัญมากสําหรับงานออกแบบทุกชนิดและหากต้องการให้งานออกแบบดูสวยงาม
ต้องเข้าใจเรื่องพื้นฐานของสีเพื่องานออกแบบก่อน ฉะนั้นไม่ควรมองข้ามเรื่องนี้ไป โดยเรื่องที่นํามาอธิบาย
เป็นทฤษฎีสีเบื้องต้นจากสีวัตถุธาตุเพื่อนํามาใช้กับ งานออกแบบดังนี้

สีสามารถแยกออกเป็น 2 ประเภท คือ

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

ภาพที่ 5.12 วงจรสี

จากภาพที่ 5.12 การผสมกันของแม่สี ได้สีอยู่ 3 ขั้น ดังนี้

 สีขั้นที่ 1 (Primary Color) ได้แก่ สีแดง – สีเหลือง - สีนา้ํ เงิน

 สีข้นั ที่ 2 (Secondary Hues) เป็นการนําเอาแม่สีมาผสมกันในปริมาณเท่า ๆ กัน จะได้สีใหม่อีก 3 สี
ดังนี้
o สีแดง ผสมกับ สีเหลือง เป็น สีส้ม
o สีแดง ผสมกับ สีน้ําเงิน เป็น สีม่วง
o สีเหลืองผสมกับ สีน้ําเงิน เป็น สีเขียว
บทที่ 5 หลักการใช้กราฟิกและสี 95
 

 สีขั้นที่ 3 (Tertiary Hues) เกิดจากนําเอาแม่สีมาผสมกับสีขั้นที่ 2 โดยจะได้สีใหม่เพิ่มอีก 6 สี ดังนี้

o สีแดง ผสม สีม่วง เป็น สีม่วงแดง
o สีแดง ผสม สีส้ม เป็น สีส้มแดง
o สีเหลือง ผสม สีส้ม เป็น สีส้มเหลือง
o สีเหลือง ผสม สีเขียว เป็น สีเขียวเหลือง
o สีน้ําเงิน ผสม สีม่วง เป็น สีม่วงน้ําเงิน
o สีน้ําเงิน ผสม สีเขียว เป็น สีเขียวน้ําเงิน

วรรณะของสี
วรรณะของสี คือสีที่ให้ความรู้สึกร้อน-เย็น ในวงจรสีจะมีสีร้อน 7 สี และสีเย็น 7 สี ซึ่งแบ่งที่ สีม่วงกับสี
เหลือง ซึ่งเป็นได้ทั้งสองวรรณะ แบ่งออกเป็น 2 วรรณะ
1. วรรณะสีร้อน (WARM TONE) ประกอบด้วยสีเหลือง สีส้มเหลือง สีส้ม สีส้มแดง สีม่วงแดงและสีม่วง สีใน
วรรณะร้อนนี้จะไม่ใช่สีสดๆ ดังที่เห็นในวงจรสีเสมอไป เพราะสีในธรรมชาติย่อมมีสีแตกต่างไปกว่าสีใน
วงจรสีธรรมชาติอีกมาก ถ้าหากว่าสีใด ค่อนข้างไปทางสีแดงหรือสีส้ม เช่น สีน้ําตาลหรือสีเทาอมทอง ก็
ถือว่าเป็นสีวรรณะร้อน
2. วรรณะสีเย็น (COOL TONE) ประกอบด้วย สีเหลือง สีเขียวเหลือง สีเขียว สีเขียวน้ําเงิน สีน้ําเงิน สีม่วง
น้ําเงิน และสีม่วง ส่วนสีอื่นๆ ถ้าหนักไปทางสีน้ําเงินและสีเขียวก็เป็นสีวรรณะเย็นดังเช่น สีเทา สีดํา สี
เขียวแก่ เป็นต้น จะสังเกตได้ว่าสีเหลืองและสีม่วงอยู่ทั้งวรรณะร้อนและวรรณะเย็น ถ้าอยู่ในกลุ่มสีวรรณะ
ร้อนก็ให้ความรู้สึกร้อนและถ้า อยู่ในกลุ่มสีวรรณะเย็นก็ให้ความรู้สึกเย็นไปด้วย สีเหลืองและสีม่วงจึงเป็น
สีได้ทั้งวรรณะร้อนและวรรณะเย็น

หลักการใช้สี

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

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

ตารางที่ 5.4 ความหมายของสี

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

สีน้ําเงินเข้ม สื่อถึงความรู้ ความมั่นคง ความขรึม ความเป็นผู้ใหญ่ และเอาจริงเอาจัง

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

ภาพที่ 5.13 ตัวอย่างการเลือกใช้สี

บทที่ 5 หลักการใช้กราฟิกและสี 98
 

จากภาพที่ 5.13 การเลือกใช้สีในงานออกแบบโลโก้ของธุรกิจต่าง ๆ จะสื่อถึงอารมณ์และความหมายของ

ธุรกิจนั้น ๆ เช่น สีเหลือง สื่อ ถึงความสว่าง ความชัดเจน (Clarity) ธุรกิจที่ใช้โทนสีนี้เป็นหลัก ได้แก่ Nikon
ซึ่งเป็นธุรกิจกล้องถ่ายรูป, Subway ที่เป็นธุรกิจร้านอาหารที่เน้นความสะดวก รวดเร็ว และ DHL ที่เป็น
ธุรกิจโลจิสติกด้านการขนส่ง เป็นต้น สีแดง ที่ในแง่ดีจะสื่อถึงความตื่นเต้น (Excitement) ธุรกิจที่ใช้โทนสีนี้
เป็นหลัก ได้แก่ Nintendo ซึ่งเป็นธุรกิจเกมส์ของญี่ปุ่น และ Coca Cola ซึ่งเป็นเครื่องดื่มอัดลม

2. เลือกใช้สีตามทฤษฎีสี
สีแต่ละสีมีความเข้ม สว่างที่แตกต่างกัน การเลือกใช้สีจึงแบ่งเป็น
2.1 การใช้สีเอกรงค์ (Monochrome)
หมายถึง การใช้สี สีเดียว หรือการใช้สีที่แสดงความเด่นชัดออกมาเพียงสีเดียว แต่มีการลดหลั่น
กันในเรื่องน้ําหนักสี เพื่อให้เกิดความแตกต่าง วิธีการใช้สีเอกรงค์ คือจะใช้สีใดสีหนึ่งที่เป็นสีแท้ (Hue) หรือมี
ความสด (Intensity) เป็นตัวยืนเพียงสีเดียวให้เป็นจุดเด่นของภาพ ส่วนประกอบรอบๆนั้นจะใช้สีเดียวกันแต่
ลดความสดของสีให้น้อยกว่าสีหลัก สีที่นํามาเป็นส่วนประกอบอาจแบ่งน้ําหนักได้ตั้งแต่ 3 - 6 สี ดังภาพที่
5.14

ภาพที่ 5.14 การใช้สีแบบ Monochrome

2.2 การใช้สีแบบสีใกล้เคียง (Relate Colors หรือ Analogous Colors)

สีใกล้เคียง (Relate Colors) หมายถึง สีที่อยู่ใกล้เคียงกันในวงสี เราสามารถกําหนดสีใกล้เคียง
ได้โดยยึดสีใดสีหนึ่งเป็นหลักก่อน แล้วนับไปทางซ้าย หรือขวาทางใดทางหนึ่งหรือทั้ง 2 ทาง นับร่วมกับสีหลัก
แล้วไม่เกิน 4 สี ถือว่าเป็นกลุ่มสีที่กลมกลืน และถ้าจะ ให้สีกลมกลืนกันที่สุดก็นับเพียง 3 สี เท่านั้น การใช้สี
ใกล้เคียงมีข้อแนะนําการใช้การใช้ 3 วิธี ดังภาพที่ 5.15
บทที่ 5 หลักการใช้กราฟิกและสี 99
 

ภาพที่ 5.15 การใช้สีแบบ Analogous Colors

2.3 การใช้สีแบบคู่ตรงกันข้าม (Complementary Colors)

หมายถึง สีคู่ตรงข้ามหรือสีที่อยู่ตรงข้ามกันในวงจรสี การเลือกใช้เพื่อเน้น หรือ สร้างความ
สะดุดตาเฉพาะจุด ดังภาพที่ 5.16

ภาพที่ 5.16 การใช้สีแบบ Complementary Colors

สีที่อยู่ในตําแหน่งตรงกันข้ามกันและมีค่าทีต่ ัดกันอย่างรุนแรง สีเหล่านี้ประกอบด้วย
 สีเหลือง ตัดกับ สีม่วง
 สีส้มเหลือง ตัดกับ สีม่วงน้ําเงิน
 สีส้ม ตัดกับ สีน้ําเงิน
บทที่ 5 หลักการใช้กราฟิกและสี 100
 

 สีส้มแดง ตัดกับ สีเขียวน้ําเงิน

 สีแดง ตัดกับ สีเขียว
 สีม่วงแดง ตัดกับ สีเขียวเหลือง

สีที่ตัดกันเรียกว่า สีคู่โดยนอกจากสีจะอยู่คู่ตรงข้ามกันในวงสีแล้ว ยังมีอิทธิพลซึ่งกันและกัน ใน

การออกแบบงานให้มีความโดดเด่น สะดุดตา น่าสนใจ แต่ควรมีแนวทางการใช้ที่ถูกต้อง เพราะสีคู่เหล่านี้มีค่า
ของสีที่ตัดกันอย่างรุนแรง
แนวทางการใช้สีตัดกันอย่างแท้จริงให้มีประสิทธิภาพ คือการลดความรุนแรง ความขัดแย้งของ
คู่สีให้น้อยลง เพื่อให้การใช้สคี ู่ตัดกันดูสบายตาขึ้นและมีความสัมพันธ์กันเป็นอย่างดี มีแนวทางดังต่อไปนี้
 เมื่อต้องการใช้สีคู่ตัดกัน โดยไม่ผสมสีอื่นใด ให้ใช้ในอัตราส่วนแตกต่างกัน เช่น 90:10,
80:20, 70:30 เป็นต้น
 ใช้สีหนักหรือสีเข้มตัดเส้นในวัตถุที่มีสีสดใส
 ลดความสดใสของสีใดสีหนึ่งลง โดยใช้สีคู่ตรงกันข้าม

2.4 การใช้สีแบบคู่ตรงกันข้าม 3 สี (Triadic Colors)

หมายถึง สีคู่ตรงข้ามหรือสีที่อยู่ตรงข้ามกันในวงจรสี 3 สี เพื่อเน้น หรือ สร้างความสะดุดตา
เฉพาะจุด ดังภาพที่ 5.17

ภาพที่ 5.17 การใช้สีแบบ Triadic Colors

บทที่ 5 หลักการใช้กราฟิกและสี 101
 

2.5 การใช้สีแบบคู่ตรงกันข้าม 4 สี (Tetradic Colors หรือ Double Complementary)

หมายถึง สีคู่ตรงข้ามหรือสีที่อยู่ตรงข้ามกันในวงจรสี 4 สี ดังภาพที่ 5.18

ภาพที่ 5.18 การใช้สีแบบ Tetradic Colors

บทที่ 5 หลักการใช้กราฟิกและสี 102
 

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

บทที่ 6 เครื่องมือในการออกแบบเลย์เอาท์

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

วัตถุประสงค์
1. รับทราบถึงความสําคัญของ Layout
2. รับทราบถึงการออกแบบ Layout และเครื่องมือในการออกแบบ

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

สิ่งที่ต้องคํานึงในการออกแบบ Layout
1. ผู้ใช้งาน
จากบทที่ 3 การวิเคราะห์ผู้ใช้งานและความต้องการและการทํางานของระบบ ผู้ใช้งาน คือ กลุ่มเป้าหมาย
(Target Users) ที่จะใช้งานระบบ ดังนั้นในการออกแบบ Layout จะต้องคํานึงถึงผู้ใช้งานเป็นสิ่งสําคัญ ซึ่ง
สามารถนําผลวิเคราะห์ที่ได้จากขั้นตอนการทําความรู้จักผู้ใช้งานมาใช้เป็นองค์ความรู้ในการออกแบบการจัด
วางได้
2. ความต้องการของระบบ
จากบทที่ 3 เช่นกัน ในการวิเคราะห์ความต้องการของระบบ ผู้พัฒนาสามารถใช้แบบวิเคราะห์งาน (Task
Analysis) เป็นการสร้างแบบรายการกิจกรรมหรืองานที่ผู้ใช้งานต้องกระทําในระบบ เพื่อนํามาวิเคราะห์ว่า
ผู้ใช้จะมีกิจกรรมใดที่ทําร่วมกับระบบบ้าง โดยเครื่องมือที่สามารถใช้ในการออกแบบปฏิสัมพันธ์ของผู้ใช้ ได้แก่
Use Case Diagram
บทที่ 6 เครื่องมือในการออกแบบเลย์เอาท์ 104
 

Use Case Diagram คือ แผนภาพที่แสดงการทํางานของผู้ใช้ระบบ (User) และความสัมพันธ์กับระบบ

ย่ อ ย (Sub systems) ภายในระบบใหญ่ ในการเขี ย น Use Case Diagram จะประกอบด้ ว ยสั ญ ลั ก ษณ์
เบื้องต้น แสดงดังภาพที่ 6.1
Connection
ระหว่าง Use Case กับ Actor

Use Case << relationship name >> System

Connection
Actor ระหว่าง Use Case กับ Use Case
ภาพที่ 6.1 สัญลักษณ์ของ Use Case Diagram
จากภาพที่ 6.1 สัญลักษณ์เบื้องต้นที่ใช้ในการเขียน Use Case Diagram ประกอบด้วย
1) ผู้ใช้ระบบ (User) จะถูกกําหนดให้เป็น Actor
2) ระบบย่อย (Sub systems) หรือก็คือ Use Case
3) ความสัมพันธ์ (Connection) ซึ่งเป็นเส้นที่เชื่อมโยงระหว่างสัญลักษณ์ในแผนภาพ ประกอบด้วย (1)
ความสั ม พั น ธ์ ร ะหว่ า ง Use Case กั บ Actor เพื่ อ ระบุ ว่ า ผู้ ใ ช้ จ ะมี ป ฏิ สั ม พั น ธ์ ใ ดกั บ ระบบบ้ า ง และ (2)
ความสัมพันธ์ระหว่าง Use Case ด้วยกันเอง ซึ่งเป็นเส้นที่มีหัวลูกศร โดยเส้นความสัมพันธ์ประเภทนี้จะต้องมี
ชื่อความสัมพันธ์ (Relation Name) เพื่ออธิบายรายละเอียดว่า Use Case มีความสัมพันธ์กันอย่างไร
4) ระบบ (System) เป็นเส้นแบ่งขอบเขตระหว่างระบบกับผู้กระทําต่อระบบ (Use Case กับ Actor) ใช้
รูปสี่เหลี่ยมเป็นสัญลักษณ์ พร้อมทั้งเขียนชื่อระบบไว้ด้านใน
จุดประสงค์หลักของการเขียน Use Case Diagramก็เพื่อเล่าเรื่องราวทั้งหมดของระบบว่ามีการทํางาน
อะไรบ้าง เป็นการดึง Requirement หรือเรื่องราวต่าง ๆ ของระบบจากผู้ใช้งาน ซึ่งถือว่าเป็นจุดเริ่มต้นในการ
วิเคราะห์และออกแบบระบบ สัญลักษณ์ที่ใช้ใน Use Case Diagram จะใช้สัญลักษณ์รูปคนแทน Actor ใช้
สัญลักษณ์วงรีแทน Use Case และใช้เส้นตรงในการเชื่อม Actor กับ Use Case เพื่อแสดงการใช้งานของ
Use Case ของ Actor นอกจากนั้น Use Case ทุกๆ ตัวจะต้องอยู่ภายในสี่เหลี่ยมเดียวกันซึ่งมีชื่อของระบบ
ระบุอยู่ด้วย ดังตัวอย่างในภาพที่ 6.2
บทที่ 6 เครื่องมือในการออกแบบเลย์เอาท์ 105
 

ภาพที่ 6.2 ตัวอย่าง Use Case Diagram

จากภาพที่ 6.2 Use Case Diagram ของระบบการลงทะเบี ย น (Registration System) โดย
“Register Course” ซึ่งเป็น Base Use Case คือ ทําหน้าที่รับลงทะเบียนตามปกติ แต่เมื่อมีเงื่อนไขหรือมี
เหตุการณ์พิเศษเกิดขึ้น คือ “นักศึกษาบางคนอาจมีการลงทะเบียนเรียนซ้ําเพื่อปรับเกรดด้วย (Regrade)” จึง
ได้เพิ่ม Extending Use Case เพื่อมารองรับหน้าที่พิเศษดังกล่าว นั่นคือ “Register Regrade”
3. อุปกรณ์ที่ใช้งาน
อุปกรณ์ที่ใช้งาน คือ อุปกรณ์ที่ผู้ใช้จะใช้เป็นสื่อกลางในการเข้าถึงระบบ ได้ว่าจะเป็นคอมพิวเตอร์ตั้งโต๊ะ
(Desktop) คอมพิวเตอร์เคลื่อนที่ (Laptop) แท็บเล็ต (Tablet) หรือสมาร์ทโฟน (Smartphone) ซึ่งสิ่งที่
ส่งผลต่อการออกแบบและพัฒนาระบบอย่างมากได้แก่ ขนาดของ Layout จากภาพที่ 6.3 6.4 และ 6.5
แสดงตัวอย่างขนาด Layout สําหรับอุปกรณ์ในการใช้งานขนาดต่าง ๆ
ดั ง นั้ น การที่ จ ะสรุ ป ว่ า อุ ป กรณ์ ที่ จ ะใช้ เ ป็ น ตั ว กลางในการเข้ า ถึ ง ส่ ว นติ ด ต่ อ ผู้ ใ ช้ ง าน ผู้ พั ฒ นาจะต้ อ ง
วิเคราะห์ผ่านผู้ใช้งานว่ากลุ่มผู้ใช้งานเป้าหมายเป็นใคร ระบบทํางานอย่างไร และผู้ใช้งานจะใช้อุปกรณ์ชนิดใด
เพื่อเข้าถึงระบบ
บทที่ 6 เครื่องมือในการออกแบบเลย์เอาท์ 106
 

ภาพที่ 6.3 ตัวอย่างขนาดของสกรีนในการออกแบบ Layout (1)

ภาพที่ 6.4 ตัวอย่างขนาดของสกรีนในการออกแบบ Layout (2)

บทที่ 6 เครื่องมือในการออกแบบเลย์เอาท์ 107
 

ภาพที่ 6.5 ตัวอย่างขนาดของสกรีนในการออกแบบ Layout (3)

2. เครื่องมือสําหรับใช้ในการออกแบบ Layout
ในบทนี้นําเสนอเครื่องมือที่ใช้ในการออกแบบ Layout สําหรับนักออกแบบและพัฒนาส่วนติดต่อผู้ใช้งาน
โดยเครื่องมือที่นําเสนอจะประกอบด้วยดังนี้
2.1 มูดบอร์ด (Moodboard)
Moodboard คือ ตัวรวบรวมความคิดและแรงบันดาลใจก่อนที่จะเริ่มต้นลงมือทํางาน ซึ่งมันจะ
ประหยัดเวลาในการคิดออกแบบงานต่าง ๆ
Moodboard มีประโยชน์ คือ
1) ช่วยในการนําเสนองานให้ลูกค้าหรือผู้ใช้งานดู ช่วยให้ลูกค้าของคุณรับรู้ถึงอารมณ์ของงานและ
แนวทางที่ควรจะเป็น
2) หลีกเลี่ยงการเข้าใจไม่ตรงกันระหว่างคนทํางานกับลูกค้า บางทีการพยายามอธิบายแนวคิดการ
ออกแบบด้วยคําพูด ลูกค้าอาจจะยังมองไม่ภาพไม่ออกซึ่ง Moodboard จะช่วยได้มากกว่า
องค์ประกอบใน Moodboard ได้แก่
1) ภาพ (Image) ตั ว อย่ า งภาพที่ จ ะใช้ ใ นการออกแบบส่ ว นติ ด ต่ อ ผู้ ใ ช้ ง าน โดยภาพที่ ใ ช้ ใ น
Moodboard อาจเป็นภาพเกี่ยวกับระบบนั้น ๆ และภาพที่สื่อถึงอารมณ์ของระบบนั้น ๆ เช่น
ดังภาพที่ 6.6 เป็น Moodboard เว็บไซต์งานแต่งงาน โดยภาพที่ปรากฏใน Moodboard จะ
เป็นภาพที่สื่อถึงงานแต่งงาน มีภาพกิจกรรมที่จะเกิดขึ้น
บทที่ 6 เครื่องมือในการออกแบบเลย์เอาท์ 108
 

ภาพที่ 6.6 ตัวอย่าง Moodboard เว็บไซต์งานแต่งงาน

2) สี (Color Palates) คือ ชุดสีที่จะใช้ในการออกแบบส่วนติดต่อผู้ใช้ (รายละเอียดดังบทที่ 5) ซึ่ง
โดยปกติสีที่ใช้จะเป็นชุดสีเดียวกับภาพที่ปรากฏใน Moodboard
3) รูปแบบตัวอักษร (Font Theme) คือ รูปแบบตัวอักษรที่จะใช้เป็นหลักในการออกแบบส่วน
ติดต่อผู้ใช้
โดยรวมแล้วการออกแบบ Moodboard จะระบุองค์ประกอบที่จะใช้ในงานออกแบบลงไปให้ได้
ทั้งหมด เช่น ในการออกแบบเว็บไซต์จะต้องประกอบไปด้วย สี , ตัวอักษร, รูปภาพ, icon , UI , สี , ภาพ ,
เมนู และอีกหลายๆ อย่างในงาน อีกทั้งต้องมีการจัดวางองค์ประกอบต่าง ๆ ให้สวยงาม โดยใช้ขนาดของภาพ
ที่แตกต่างกัน เพื่อเน้นย้ําว่าภาพใดจะถูกเน้นในงานออกแบบ และอาจะเพิ่มคําอธิบายบางส่วน ที่คิดว่าจําเป็น
บทที่ 6 เครื่องมือในการออกแบบเลย์เอาท์ 109
 

ภาพที่ 6.7 ตัวอย่าง Moodboard เว็บไซต์ประชาสัมพันธ์บริษัทด้านการออกแบบ

จากภาพที่ 6.7 Moodboard ดั ง กล่ า วเป็ น Moodboard สํ า หรั บ ออกแบบส่ ว นติ ด ต่ อ
ผู้ใช้งานของเว็บไซต์ประชาสัมพันธ์บริษัทด้านการออกแบบ โดยจาก Moodboard จะเห็นว่าผู้ออกแบบใช้
ภาพที่เป็นเฟอร์นิเจอร์ ของตกแต่งซึ่งสื่อถึงบริษัทที่เป็นแนว Home-Office โดยใช้ภาพที่สื่ออารมณ์แนว
สบาย ๆ และโมเดิร์น สีที่ใช้เป็นหลักของงานประกอบด้วยสีน้ําเงินเข้ม สีเทาอ่อน และสีน้ําตาลอ่อน ซึ่งชุดสี
ดังกล่าวสอดคล้องกับภาพที่นํามาใช้ และใช้รูปแบบตัวอักษร 2 แบบ โดยรวม Moodboard ดังกล่าวสามารถ
สื่อถึงอารมณ์และแนวทางการออกแบบส่วนติดต่อผู้ใช้ได้
2.2 ไวร์เฟรม (Wireframe)
Wireframe คือ การเอาเนื้อหาที่ได้ออกแบบไว้มาจัดเรียงลงบน Layout
องค์ ป ระกอบใน Wireframe คื อ หั ว เรื่ อ ง โครงร่ า งของข้ อ มู ล และการจั ด วางตํ า แหน่ ง ของ
องค์ประกอบต่าง ๆ
บทที่ 6 เครื่องมือในการออกแบบเลย์เอาท์ 110
 

ภาพที่ 6.8 Wireframe

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

ภาพที่ 6.8 การวาด Wireframe ในกระดาษ

บทที่ 6 เครื่องมือในการออกแบบเลย์เอาท์ 111
 

2) วาด Wireframe ในคอมพิวเตอร์

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

ภาพที่ 6.10 การวาด Wireframe ในคอมพิวเตอร์

2.3 โปรโตไทป์ (Prototype)
Prototype เป็นการทําตัวอย่าง Layout ที่ลูกค้าหรือผู้ใช้งานสามารถลองเล่นกับมันได้
องค์ประกอบใน Prototype จะเหมือนใน Wireframe แต่จะแตกต่างที่ว่าใน Prototype ลูกค้าต้อง
สามารถลองคลิกลิงค์ในนั้นเพื่อไปหน้าอื่น ๆ ได้ด้วย เพื่อให้ลูกค้าเข้าใจหลักการทํางานของระบบว่าลิงค์ไหน
จะไปโผล่ที่ไหน แตกต่างกับจุดประสงค์ของ Wireframe ซึ่งจะมีไว้สําหรับให้ลูกค้าเข้าใจเกี่ยวกับการจัดวาง
เนื้อหามากกว่า
บทที่ 6 เครื่องมือในการออกแบบเลย์เอาท์ 112
 

แบบฝึกหัด
1) Layout คืออะไร มีความสําคัญอย่างไร
2) ในการออกแบบ Layout ต้องคํานึงถึงเรื่องใดบ้าง เพราะอะไร
3) Moodboard คืออะไร มีความสําคัญอย่างไร
4) ในการออกแบบส่วนติดต่อผู้ใช้งาน นิสิตคิดว่าจะใช้เครื่องมือใดในการออกแบบ เพราะอะไร
บทที่ 7 การทดสอบส่วนติดต่อผู้ใช้งาน 113
 

บทที่ 7 การทดสอบส่วนติดต่อผู้ใช้งาน

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

วัตถุประสงค์
1. รับทราบถึงความสําคัญของการทดสอบส่วนติดต่อผู้ใช้
2. รับทราบถึงขอบเขตที่ใช้ในการทดสอบ
3. รับทราบถึงการสร้างการสร้างการทดสอบ

1. แนวคิดของ Lean
Lean คือ แนวคิดที่ให้ความสําคัญกับการลดทอนสิ่งที่ไม่จําเป็น
หลักการของ Lean นั้นจะมุ่งให้ความสําคัญกับการสร้างคุณค่าให้กับผู้บริโภคหรือผู้ใช้ให้มากที่สุด
โดยใช้ทรัพยากรเท่าที่จําเป็นเท่านั้น
แนวคิดเรื่อง Lean นี้มีพื้นฐานมาจากระบบการจัดการการผลิตของโตโยต้า (Toyota Production
System) ที่นําพาโตโยต้าสู่ความสําเร็จอันยิ่งใหญ่ในวงการยานยนต์
Validated Learning เรียนรู้ให้แน่ใจว่าผู้ใช้งานต้องการอะไร
กระบวนการของ Lean ให้ความสําคัญกับการเรียนรู้เป็นอย่างมาก ผู้สร้างสรรค์ต้องออกจากสถานที่
ทํางานของตนเองเพื่อไปพบปะพูดคุยกับกลุ่มลูกค้าจริง เช็คดูว่าความต้องการของพวกเขากับสิ่งที่ตนคิดนั้น
ตรงกันหรือไม่ นอกเหนือจากความเข้าใจผู้บริโภคที่เพิ่มมากขึ้นแล้ว ผู้สร้างสรรค์อาจได้ข้อมูลใหม่ ๆ ที่ไม่เคยรู้
มาก่อนมาเป็นแนวทางสําหรับพัฒนาผลิตภัณฑ์ต่อไปด้วย
บทที่ 7 การทดสอบส่วนติดต่อผู้ใช้งาน 114
 

ภาพที่ 7.1 กระบวนพัฒนาตามแนวคิดของ Lean

จากภาพที่ 7.1 กระบวนการพัฒนาตามแนวคิดของ Lean จะประกอบด้วย
1) Learn การเรียนรู้ ในการพัฒนาระบบหรือ Product ใด ๆ จุดเริ่มต้นผู้พฒ ั นาจะต้องเรียนรู้
ข้อมูลที่เกี่ยวข้องกับสิ่งที่ตนจะพัฒนา เมื่อเรียนรู้แล้วสิ่งที่จะเกิดขึ้น คือ แนวคิดหรือ Idea
2) Build การพัฒนา เป็นขั้นตอนที่จะนําแนวคิดที่ได้จากการเรียนรู้มาพัฒนาระบบ ซึ่งจะได้เป็น
Product
3) Measure การวัดผล เป็นการทดสอบว่า Product ที่ได้จากการพัฒนานั้นมีความถูกต้องหรือ
เหมาะสมมากเพียงใด เมื่อนําผลการทดสอบนั้นมาผ่านการวิเคราะห์จะทําให้เกิดข้อมูล หรือ
Data
จากภาพที่ 7.1 จะเห็นว่ากระบวนการพัฒนาตามแนวคิดของ Lean นั้นเป็นวงจร ซึ่งจะเห็นได้ว่าเมื่อ
ผู้พัฒนาทําการทดสอบ Product และวิเคราะห์ผลจะทําให้เกิดข้อมูลสําหรับนําไปเรียนรู้ใหม่ ดังนั้นจะเห็นได้
ว่ากระบวนการทดสอบเป็นกระบวนการที่มีความสําคัญมากในการพัฒนาสิ่งใด ๆ
Usability Testing
Usability Testing คือ การทดสอบการใช้งาน โดยการนํา Product หรือในที่นี่คือส่วนติดต่อผู้ใช้งาน
ไปให้กลุ่มคนที่คาดว่าจะเป็น target users ลองใช้งาน โดยการกําหนดเป้าหมายให้เค้าทําให้สําเร็จเป็นข้อ ๆ
แล้วเฝ้าดูและสังเกตว่าผู้ใช้มีวิธีการคิด การตัดสินใจ การใช้งานส่วนติดต่อผู้ใช้งานของเราอย่างไร ที่จะทําให้
เป้าหมายนั้นสําเร็จ
บทที่ 7 การทดสอบส่วนติดต่อผู้ใช้งาน 115
 

ดั ง นั้ น Usability Testing เป็ น ขั้ น ตอนที่ จ ะ Measure และ Learn ก่ อ นที่ จ ะนํ า ไปปรั บ ปรุ ง ส่ ว น
ติดต่อผู้ใช้งานเพื่อใช้พัฒนาระบบจริงนั่นเอง
ความสําคัญของ Usability Testing
1) ทําได้ง่าย ในที่นี้หมายถึงง่ายกว่าการทดสอบประเภทอื่น ๆ เช่น Unit Testing ซึ่งจะเป็นการ
ทดสอบที่ตัวระบบ ดังนั้นผู้พัฒนาจะต้องพัฒนาระบบก่ อนแล้ วจึงจะทดสอบได้ ดังนั้น การ
ทดสอบการใช้งานผ่านส่วนติดต่อผู้ใช้จึงสะดวกในการออกแบบมากกว่า
2) ประหยัดค่าใช้จ่ายในระยะยาว นั่นหมายถึงเมื่อผู้พัฒนาทดสอบการใช้งานของส่วนติดต่อผู้ใช้
ผู้พัฒนาจะสามารถแก้ไขปัญหาที่เกิดขึ้นก่อนนําไปพัฒนาระบบจริง ซึ่งประหยัดค่าใช้จ่ายที่ต้อง
ใช้แก้ไขระบบในภายหลังได้มากกว่า
3) ทําให้เราเข้าใจผู้ใช้มากขึ้น ซึ่งเมื่อผู้พัฒนานําส่วนติดต่อผู้ใช้ที่ได้รับการออกแบบไปให้ผู้ใช้งาน
ทดสอบจะทําให้เห็นถึงรูปแบบความเข้าใจและความพึงพอใจของผู้ใช้งาน ซึ่งข้อมูลดังกล่าว
สามารถนํามาใช้ในการพัฒนาการออกแบบต่อไปได้
4) ช่ ว ยในการตั ด สิ น ใจ และวางแผนการพั ฒ นา Product ได้ ง่ า ยขึ้ น หมายถึ ง การนํ า ผลการ
วิเคราะห์ที่ได้จากการทดสอบมาใช้ในการตัดสินใจปรับปรุงหรือเพิ่มเติมส่วนต่าง ๆ ได้สะดวกขึ้น
5) การทดสอบโดยวั ด ความพึ ง พอใจจากการออกแบบส่ ว นติ ด ต่ อ ผู้ ใ ช้ ง าน ตรงกั บ ทฤษฎี ก าร
ออกแบบโดยมีผู้ใช้เป็นศูนย์กลาง (User-Centered Design: UCD) ซึ่งเป็นทฤษฎีที่ผู้พัฒนาและ
ออกแบบ Product ใด ๆ จะต้องคํานึงถึงผู้ใช้เป็นปัจจัยหลักในการออกแบบ ซึ่งส่วนติดต่อผู้ใช้ที่
จะนําไปใช้ในการพัฒนาระบบจริงนั้นจะสอดคล้องกับรูปแบบความเข้าใจของผู้ใช้ และจะทําให้
ผู้ใช้มีความพึงพอใจและสามารถใช้งานระบบได้อย่างมีประสิทธิภาพ
ขั้นตอนการทํา Usability Testing
1) ตั้งเป้าหมายในการทดสอบ คือ การกําหนดวัตถุประสงค์ในการทดสอบ
2) จัดหาผู้ที่จะมาทําการทดสอบ คือ การกําหนดผู้ใช้งานเป้าหมายที่ใช้ในการทดสอบ
3) สร้างการทดสอบ คือ การสร้างแบบทดสอบ และเงื่อนไขในการวิเคราะห์
4) เริ่มทดสอบ
5) สรุปผล คือ การนําผลการทดสอบมาวิเคราะห์ เพื่อหาข้อมูลไปใช้ในการแก้ไขปรับปรุง
6) แก้ไขปรับปรุง เป็นการนําข้อมูลที่ได้จากการวิเคราะห์มาปรับปรุงส่วนติดต่อผู้ใช้ก่อนนําไป
พัฒนาระบบจริง

การสร้างการทดสอบ
1) สร้างตัวอย่างงาน Interactive Prototype คือ การสร้างตัวงานที่จะนําไปใช้ในการทดสอบ ซึ่งมี
2 รูปแบบ คือ
บทที่ 7 การทดสอบส่วนติดต่อผู้ใช้งาน 116
 

 Low-fidelity prototype คื อ ตั ว อย่ า งงานแบบหยาบ ๆ ที่ ทํ า ขึ้ น มาเร็ ว ๆ เช่ น การ

sketch รูปที่วาดด้วยดินสอ หรือใช้wireframe ของเว็บก็สามารถทํามาใช้ดู flow การใช้
งานของแอพ/เว็บได้
 Hi-fidelity prototype คือ ตัวอย่างงานที่มีรายละเอียดมากขึ้น เช่น screen ที่ออกแบบ
ไว้จาก Photoshop หรือโปรแกรม Sketch มาทําเป็น prototype ซึ่งอาจจะไม่ต้องดีไซน์
ให้เนียบนัก แต่พอให้เห็น mood & tone ของโปรดัก และยังคงเน้นในเรื่องของ Flow การ
ใช้งาน
2) สร้าง Usability Testing คือ การสร้างแบบทดสอบความพึงพอใจจากผู้ใช้งาน ซึ่งเป็นรูปแบบ
ของแบบสํารวจหรือแบบสอบถามที่ใช้งานตามหลักสถิตทิ ั่วไป ที่จะประกอบด้วยคุณสมบัติของ
ผู้ใช้ที่สามารถนําไปวิเคราะห์เป็นข้อมูลได้ เช่น อายุ, เพศ, ระดับการศึกษา เป็นต้น โดยเกณฑ์ที่
ใช้ในการสร้างแบบทดสอบสําหรับการทดสอบความพึงพอใจของส่วนติดต่อผู้ใช้งานจะเป็นไป
ตามทฤษฎีของ Jacob Nielsen ผู้เชี่ยวชาญในการออกแบบ Web Usability
10 เงื่อนไขที่ใช้ทดสอบการใช้งาน UI
1. ระบบแสดงให้ผู้ใช้งานเห็นเสมอว่าตนกําลังทําอะไรอยู่ กําลังจะเกิดอะไรขึ้น และให้ผล
ป้อนกลับในเวลาที่เหมาะสมหรือไม่
2. ระบบสามารถพูดภาษาเดียวกันกับผู้ใช้โดยมีตรรกะการใช้งานที่เป็นธรรมชาติ ไม่ใช้ภาษาที่
แปลกไปจากปรกติหรือไม่
3. ระบบสนับสนุนการ Undo และ Redo หรือไม่
4. ระบบมีความสม่ําเสมอและเป็นมาตรฐานไปทุก ๆ หน้าจอของการออกแบบ ผู้ใช้งานไม่
สับสนในเรื่องการจัดวางหรือขนาดของตัวหนังสือหรือไม่
5. ระบบมีคําเตือนให้ระวังความผิดพลาดที่จะช่วยป้องกันความผิดพลาดหรือไม่ ระบบมีการตก
ลงใจซ้ําอีกครั้งเพื่อตรวจสอบความแน่นอนของการตัดสินใจของผู้ใช้หรือไม่ เช่น ท่าน
ต้องการแก้ไขหรือไม่ ให้ตอบ แก้ไข หรือ ไม่แก้ไข
6. ผู้ใช้งานต้องใช้ความจําในการจดจําคําสั่งต่าง ๆ ในระบบหรือไม่ ซึ่งระบบมีส่วนประกอบ
หน้าจอ การออกคําสั่งปฏิบัติและส่วนตัวเลือกมีความชัดเจน วิธีการใช้งานต้องเข้าถึงได้ง่าย
และรับรู้ได้ง่ายหรือไม่
7. มีความยืดหยุ่นสําหรับผู้ใช้งานหลากหลายกลุ่ม และมีประสิทธิผลในการทํางานหรือไม่
8. การนําเสนอเนื้อหามีเรื่องที่ไม่เกี่ยวข้องหรือเรื่องที่ผู้ใช้ต้องการใช้หรือไม่
9. ข้อความแสดงความผิดพลาดปรากฏในแบบตัวอักษรธรรมดาที่เข้าใจได้ง่าย ระบุปัญหาและ
บอกวิธีแก้ไข ให้ผู้ใช้งานสามารถแก้ไขได้เองได้หรือไม่
10. ระบบมีคู่มือทีอ่ ธิบายวิธีการใช้งาน มีการแบ่งสารบัญข้อมูลที่ทําให้หาง่ายเจาะจงไปยังหน้าที่
ต่าง ๆ มีการเรียงลําดับอย่างเป็นระบบ และไม่มากจนเกินไปหรือไม่
บทที่ 7 การทดสอบส่วนติดต่อผู้ใช้งาน 117
 

ตัวอย่างแบบทดสอบความพึงพอใจ
บทที่ 8 แนวคิด Responsive 118
 

บทที่ 8 แนวคิด Responsive

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

วัตถุประสงค์
1. รับทราบถึงแนวคิดของ Responsive
2. รับทราบถึงความสําคัญของ Responsive
3. รับทราบถึงเทคนิคการทํา Responsive

1. ที่มาและความหมายของ Responsive

อินเทอร์เน็ต (Internet) เป็นระบบเครือข่ายที่ครอบคลุมการใช้งานไปทั่วโลก จากประชากรทั้งหมด

ของโลก กว่า 83.6% เป็นกลุ่มผู้ใช้งานที่มีการเข้าใช้งานอินเทอร์เน็ต (ดังภาพที่ 8.1) ซึ่งเป็นหลักฐานที่ชัดเจน
ว่า อินเทอร์เน็ตเข้ามามีบทบาทสําคัญมากในการขับเคลื่อนของโลกนี้ ในอดีตการใช้งานอินเทอร์เน็ตจะต้องมี
การเชื่อมต่อกับคอมพิวเตอร์ แต่ในปัจจุบันผู้ใช้งานเริ่มเข้าใช้อินเทอร์เน็ตผ่านอุปกรณ์ที่หลากหลายมากยิ่งขึ้น
จากภาพที่ 8.1 สถิติและแนวโน้มการใช้งานอินเทอร์เน็ตพบว่าแนวโน้มการใช้งานอินเทอร์เน็ตของ
ประชากรโลกมีแนวโน้มจะพุ่งไปถึง 90% ในปี 2017 อาจด้วยปัจจุบันระบบอินเทอร์เน็ตนั้นครอบคลุมพื้นที่
ไปทั่วโลก อีกทั้งยังอํานวยความสะดวกให้แก่ผู้ใช้ผ่านอุกปรณ์ที่หลากหลาย ซึ่งจากสถิติจะเห็นว่าในจํานวน
ผู้ใช้งานอินเทอร์เน็ตทั้งหมดในปี 2015 กว่า 52.4% ได้เข้าถึงอินเทอร์เน็ตผ่านอุปกรณ์เคลื่อนที่ เช่น แท็บเล็ต
หรือสมาร์ทโฟน โดยแนวโน้มในปี 2017 การใช้งานอินเทอร์เน็ตผ่านอุปกรณ์เคลื่อนที่จะเพิ่มขึ้นที่ 57.8%
บทที่ 8 แนวคิด Responsive 119
 

ภาพที่ 8.1 สถิติการใช้งานและแนวโน้มการใช้งานอินเทอร์เน็ต

อุปกรณ์เคลื่อนที่มีความหลากหลายมาก ได้แก่
1) ระบบปฏิบัติการ (Operating System: OS) ซึ่งปัจจุบันที่ค่ายนักพัฒนาจํานวนมาก เช่น iOS,
Android, Window Phone และอื่น ๆ หันมาพัฒนาระบบปฏิบัติการสําหรับอุปกรณ์เคลื่อนที่
จํานวนมากเพื่อให้สอดรับการปริมาณผู้ใช้งานที่หันไปใช้งานอุปกรณ์เคลื่อนที่มากขึ้น
2) แนวของการแสดงผล (Orientation) ข้อดีของอุปกรณ์เคลื่อนที่คือผู้ใช้สามารถใช้งานได้ทั้ง
แนวตั้งและแนวนอน ขึ้นอยู่กับฟังก์ชันการทํางานที่เหมาะสมกับผูใ้ ช้
3) ขนาดและความละเอียดของหน้าจอแสดงผล (Screen Size and Resolution) ซึ่งจากบทที่ 6
ได้มีการกล่าวถึงความหลากหลายของขนาดหน้าจอแสดงผลไปแล้ว ดังภาพที่ 8.2

ภาพที่ 8.2 ขนาดและความละเอียดของหน้าจอแสดงผลทีม่ ีความหลากหลาย

บทที่ 8 แนวคิด Responsive 120
 

จากความหลากหลายดังกล่าวนั้นจัดว่าเป็นสิ่งที่อํานวยความสะดวกให้แก่ผู้ใช้งานเป็นอย่างมากที่จะ
สามารถเลือกใช้งานอุปกรณ์ ระบบปฏิบัติการ ทิศทางการแสดงผล และขนาดที่เหมาะสมและตนมีความพึง
พอใจ แต่ทว่าสําหรับนักพัฒนาระบบ แอพลิเคชัน และนักออกแบบส่วนติดต่อผู้ใช้งานสิ่งที่เป็นปัญหามาก คือ
ขนาดและความละเอียดของหน้าจอการแสดงผลที่มีความหลากหลาย ดังนั้นจึงทําให้เกิดแนวคิดการออกแบบ
Responsive ขึ้น
Responsive Design คือ การออกแบบส่วนติดต่อผู้ใช้งานด้วยแนวคิดใหม่ ที่จะทําให้ส่วนติดต่อผู้ใช้
สามารถแสดงผลได้อย่างเหมาะสม บนอุปกรณ์ที่แตกต่างกัน (Desktops, Tablets, and Phones) โดยใช้
โค้ดร่วมกัน URL เดียวกัน
2. เทคนิคการทํา Responsive มี 4 วิธี คือ
2.1 Responsive Retrofitting
แปลงระบบเก่าให้กลายเป็น Responsive เปรียบเทียบได้ดังภาพที่ 8.3

ภาพที่ 8.3 Responsive Retrofitting

เป็นการเอา Desktop Site (เว็บไซต์ที่ทําขึ้นมาเพื่อรองรับหน้าจอคอมพิวเตอร์) ที่มีอยู่แล้ว
มาเขียน CSS3 Media Query เพิ่มเข้าไป เพื่อให้รองรับหน้าจอแบบ Responsive
ข้อดี
 ทําได้เร็ว ง่าย แค่ใส่ CSS เพิ่มไปอีกไฟล์ก็รองรับ Responsive แล้ว
 User เก่าไม่งง ดีไซน์เก่ายังอยู่
 ไม่ต้อง Redesign ทําให้ไม่ต้องถกปัญหาเรื่อง Branding กับบริษัทใหม่อีกครั้ง และไม่
เสียงบค่าดีไซน์เพิ่มด้วย
ข้อเสีย
 เน้นแค่ให้ Layout เปิดได้บนมือถือเฉย ๆ บางส่วนเช่น Navigation, Slider อาจจะยัง
ใช้บนมือถือไม่ได้
 เว็บ Desktop เป็นเว็บที่หนักมีรายละเอียดมากมาย พอเปิดในมือถือมันจะหนักมาก
 บาง Device ไม่รองรับ Media Query ทําให้เปิดไม่เจอเวอร์ชัน Responsive
บทที่ 8 แนวคิด Responsive 121
 

2.2 Responsive Mobile Site

เริ่มจาก Mobile Site แล้วแปลงเป็น Responsive
เป็นการทํา Responsive Website เหมือนหว่านเมล็ดเป็น Mobile Site (เว็บไซต์ที่ทําขึ้น
เพื่อรองรับหน้าจอมือถือโดยเฉพาะ) แยกออกมาก่อน จากนั้นค่อย ๆ ทําการพัฒนา Mobile Site ตัวนี้ให้
สามารถดูใน Tablet และ Desktop ได้สวยงาม ซึ่งพอเสร็จสมบูรณ์แล้ว ก็ย้ายคนที่เข้าทาง Desktop ให้เปิด
มาเจอเว็บไซต์ใหม่ด้วย และทิ้งเว็บเก่าไป
ข้อดี
 User เก่าที่เข้าทางคอมยังใช้ได้อยู่
 มีเวลาให้ทีม Designer ค่อย ๆ เรียนรูใ้ นการดีไซน์เว็บไซต์ที่เหมาะกับ Responsive
 ช่วยลดขนาดเว็บให้เล็กลงกว่าเดิมได้ โดยการตัดทอน Element เก่าใน Desktop Site
ที่ไม่จําเป็นออก
ข้อเสีย
 การทํา Mobile Site แยกจากเว็บหลัก อาจทําให้เกิดปัญหาเรื่อง URL Redirect, SEO
เป็นต้น
 อาจเจอปัญหาเรื่องระยะเวลา ความสามารถของทีมงาน และแรงกดดันในการเปลี่ยน
จากผู้ใช้เก่า ๆ

2.3 Mobile-First Responsive Site

ทําระบบใหม่ แ บบ Mobile-First (หรือProgressive Enhancement) เปรี ยบเทีย บได้ ดั ง
ภาพที่ 8.4

ภาพที่ 8.4 Mobile-First Responsive Site

การสร้างเว็บไซต์ใหม่ขึ้นมาเลย โดยดีไซน์ให้รองรับ Mobile ก่อน เน้นทําให้เว็บไซต์มีเฉพาะ
Element ที่สําคัญจะได้โหลดไว จากนั้นค่อยพัฒนาให้เหมาะกับ Desktop Site
ข้อดี
 การทําเว็บไซต์แบบเริ่มใหม่ทั้งหมด ทําให้ Designer / Developer ทํางานได้ง่ายขึ้น
บทที่ 8 แนวคิด Responsive 122
 

ข้อเสีย
 การทํา Mobile Site แยกจากเว็บหลัก อาจทําให้เกิดปัญหาเรื่อง URL Redirect, SEO
เป็นต้น
 อาจเจอปัญหาเรื่องระยะเวลา ความสามารถของทีมงาน และแรงกดดันในการเปลี่ยน
จากผู้ใช้เก่า ๆ

2.4 Piecemeal
แปลงระบบเก่าให้กลายเป็น Responsive ทีละนิด วิธีนี้เป็นการค่อย ๆ แปลงทีละส่วนบน
เว็บไซต์ให้เป็น Responsive ซึ่งเหมาะกับเว็บไซต์บางเว็บที่ไม่สามารถ Redesign ใหม่หมดได้ อาจจะติดเรื่อง
Branding, งบประมาณ หรืออะไรก็แล้วแต่ แบ่งเป็น 2 แบบ คือ
1) PAGE BY PAGE
ทํ า เป็ น Responsive ที ล ะหน้ า วิ ธี นี้ ถู ก ใช้ โ ดย Microsoft คื อ ทํ า หน้ า แรกให้
Responsive ก่ อ น แล้ ว เปิ ด ให้ ค นใช้ โดยที่ ห น้ า อื่ น ๆ ยั ง ไม่ ไ ด้ ทํ า ให้ ร องรั บ
Responsive
ข้อดี
 เลือกทําหน้าที่คนเข้าเยอะ ๆ ให้เป็น Responsive
 มีเวลาให้ทีมงานเรียนรู้การทํา และนําสิ่งที่เรียนรู้ไปปรับใช้ต่อกับหน้าอื่น
 สามารถนําไปใช้จริงได้เร็ว ไม่ต้องรอเสร็จทั้งเว็บก่อน
ข้อเสีย
 ถ้า User ที่เข้าทางมือถือคลิกไปอ่านหน้าอื่นที่ไม่ Responsive ก็จะทําให้การใช้
งานเว็บไซต์ดูไม่ต่อเนื่อง
 บางครั้ ง การทํ า แบบนี้ อ าจทํ า ให้ ทีม งานไม่ มี Deadline ว่ า จะเสร็ จ ทั้ ง เว็ บ ไซต์
เมื่อไหร่

2) COMPONENT BY COMPONENT
เป็นการทําให้ Element ทีละส่วนในเว็บกลายเป็น Responsive (เช่น header ก่อน
แล้วค่อยมาทํา footer)
ข้อดี
 การค่อย ๆ เปลี่ยน Interface ทําให้ User เรียนรู้หน้าตาแบบใหม่ทีละนิด
 การแบ่งส่วนในเว็บเป็น Element ย่อย ๆ ทําให้ Developer สามารถทําเว็บไซต์
ได้ง่ายขึ้น และ Design ไปในทิศทางเดียวกันมากขึ้น
บทที่ 8 แนวคิด Responsive 123
 

ข้อเสีย
 ในระหว่างที่ยังไม่เสร็จสมบูรณ์ User อาจรู้สึกแปลก ๆ ที่บาง Element ดูใหม่
บาง Element ดูเก่า
 เหมือนกับการทํา Page by Page คืออาจไม่มี Deadline แน่นอน ทําให้เว็บไม่
เสร็จสักที

3. เกณฑ์ในการเลือกทํา Responsive Design

 เวลาที่มีในการพัฒนา
 งบประมาณในการพัฒนา
 ความสามารถของสมาชิกในทีม (Web Developer, Web Designer, Content Manager,
etc.)
 ผลลัพธ์ที่เราต้องการจากส่วนติดต่อผู้ใช้งานแบบ Responsive (เช่น ทําให้คนซื้อสินค้าใน
เว็บได้ง่ายขึ้น หรือเว็บไซต์โหลดเร็วขึ้นบนมือถือ)