การออกแบบเว็บไซต์

บทที่ 3
หลกั การออกแบบเวบ็ ไซต์

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

1. การใช้สี
สีเป็ นปัจจยั ท่ีช่วยทาให้เวบ็ ไซต์มีความน่าสนใจ ดงั น้นั ในการพฒั นาเวบ็ ไซต์จึงควรให้

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

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

44

1.2 ประโยชน์ของสีในเวบ็ ไซต์
สีเป็ นเคร่ืองมือท่ีสามารถสื่อถึงความรู้สึกและอารมณ์ และช่วยสร้างความสัมพันธ์
ระหวา่ งสถานท่ีกบั เวลา สีเป็ นปัจจยั สาคญั ที่ช่วยสร้างความหมายขององคป์ ระกอบในหนา้ เวบ็ เพจ
ประโยชนข์ องสีในรูปแบบตา่ งๆ ธวชั ชยั ศรีสุเทพ (2544:185-187) กล่าวไวด้ งั น้ี

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

(2) สีช่วยเชื่อมโยงบริเวณท่ีไดร้ ับการออกแบบเขา้ ดว้ ยกนั ผูอ้ ่านจะมีความรู้สึกว่า
บริเวณที่มีสีเดียวกันจะมีความสาคญั เท่ากนั วิธีการเช่ือมโยงแบบน้ีช่วยจดั กลุ่มของข้อมูลท่ีมี
ความสมั พนั ธ์อยา่ งไมเ่ ด่นชดั เขา้ ดว้ ยกนั ได้

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

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

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

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

(7) สีสามารถส่งเสริมเอกลกั ษณ์ขององคก์ รหรือหน่วยงานน้นั ๆ ได้ ด้วยการใช้สีท่ี
เป็นเอกลกั ษณ์ขององคก์ รมาเป็นโทนสีหลกั ของเวบ็ ไซต์

45

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

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

สีน้าเงิน สีแดง สีเหลือง

รูปที่ 3.1 แมส่ ี ประกอบดว้ ย สีน้าเงิน สีแดง และสีเหลือง

สีข้นั ท่ีสอง เกิดจากการผสมสีของแมส่ ีเขา้ ดว้ ยกนั ไดแ้ ก่ สีน้าเงินผสมกบั สีแดงจะได้ สี
ม่วง สีน้าเงินผสมกบั สีเหลืองจะได้ สีเขียว และสีแดงผสมกบั สีเหลืองจะได้ สีส้ม ดงั รูปท่ี 3.2

สีน้าเงิน สีแดง สีมว่ ง

สีน้าเงิน สีเหลือง สีเขียว

สีแดง สีเหลือง สีส้ม

รูปที่ 3.2 สีข้นั ท่ีสอง เกิดจากการผสมของแมส่ ีเขา้ ดว้ ยกนั

สีข้นั ที่สาม เกิดจากการนาสีข้นั ท่ีหน่ึง และข้นั ท่ีสองมาผสมกนั ไดท้ ้งั หมด 6 สี ไดแ้ ก่ สีส้ม
แดง สีม่วงแดง สีเขียวเหลือง สีส้มเหลือง สีเขียวน้าเงิน และสีมว่ งน้าเงิน ดงั รูปที่ 3.3

46

สีส้ม สีแดง สีส้มแดง
สีมว่ ง สีแดง สีมว่ งแดง

สีเขียว สีเหลือง สีเขียวเหลือง

สีส้ม สีเหลือง สีส้มเหลือง

สีเขียว สีน้าเงิน สีเขียวน้าเงิน

สีม่วง สีน้าเงิน สีมว่ งน้าเงิน

รูปท่ี 3.3 สีข้นั ท่ีสาม เกิดจากการนาสีข้นั ที่หน่ึงและข้นั ท่ีสองผสมกนั

1.3.1 การผสมสี
การผสมสีเพื่อให้เกิดเป็ นสีต่างๆ สามารถแบ่งได้เป็ น 2 แบบ คือการผสมของแสง
หรือการผสมแบบบวก (additive mixing) และการผสมของรงควตั ถุ (pigment) หรือการผสมแบบ
ลบ (subtractive mixing) ซ่ึงมีรายละเอียดดงั ตอ่ ไปน้ี

1.3.1.1 การผสมสีแบบบวก (Additive Mixing) เป็ นรูปแบบการผสมของแสง
ไม่ใช่การผสมของวตั ถุมีสีบนกระดาษ เน่ืองจากแสงสีขาวประกอบดว้ ยลาแสงท่ีมีสีตา่ งๆ ตามความ
ยาวคล่ืนแสง ความยาวคลื่นแสงพ้ืนฐานไดแ้ ก่ สีแดง เขียว และน้าเงิน เมื่อคลื่นแสงมีการซ้อนทบั
กนั จะเกิดการบวกและรวมตวั กนั ของความยาวคลื่นแสง เมื่อแสงท้งั สามสีมีการผสมกนั เป็ นคู่ จะ
เกิดเป็ นสีน้าเงินแกมเขียว หรือ cyan ซ่ึงเกิดจากสีน้าเงินบวกกบั เขียว สีแดงแกมม่วงหรือ magenta
เกิดจากสีแดงบวกกบั น้าเงิน และสีเหลือง เกิดจากสีแดงบวกกบั เขียว และเมื่อผสมสีท้งั สามเข้า
ดว้ ยกนั จะไดเ้ ป็นแสงสีขาว

47

ส่ือใดๆ ที่มีการใช้แสงส่องออกมา เช่น จอโปรเจคเตอร์ (movie projector) ทีวี
หรือจอมอนิเตอร์จะใช้กฎของการผสมสีแบบบวก ดังน้ันในการออกแบบเว็บไซต์ จึงต้องใช้
หลกั การผสมสีแบบบวก

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

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

1.3.2 วงล้อสี และความกลมกลืนของสี
1.3.2.1 วงล้อสี หรือ Color Wheel ถูกสร้างข้ึนเพ่ือให้เขา้ ใจถึงความสัมพนั ธ์

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

วงล้อสี มีอีกช่ือเรี ยกว่า วงล้อสี 12 ข้ัน สาเหตุที่ได้ชื่อว่า วงล้อสี 12 ข้ัน
เพราะวา่ ใน 1 วงลอ้ สี จะประกอบไปดว้ ยสี 12 สีที่ไล่ระดบั กนั ดงั รูปท่ี 3.4

48

รูปที่ 3.4 วงลอ้ สี 12 ข้นั
1.3.2.2 ความกลมกลืนของสี ในการออกแบบเวบ็ ไซตใ์ หส้ ีมีความกลมกลืน

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

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

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

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

49

1.3.3.1 ชุดสีร้อน และชุดสีเยน็ พนั จนั ทร์ ธนวฒั นเสถียร (2551, 10) กล่าวถึง
ชุดสีร้อนและชุดสีเยน็ ไวด้ งั น้ี

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

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

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

รูปท่ี 3.5 ตวั อยา่ งการออกแบบเวบ็ ไซต์ https://www.powersmart.ca โดยใชช้ ุดสีแบบสีเดียว

50

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

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

รูปที่ 3.6 ตวั อยา่ งการออกแบบเวบ็ ไซต์ http://www.butterfly.com.au โดยใชช้ ุดสีแบบสามเส้า

1.3.3.4 ชุดสีคล้ายกัน หรือ Analogous Color Scheme ซ่ึงจะประกอบดว้ ยสี 2
หรือ 3 สีที่อยูต่ ิดกนั ในวงลอ้ สี เช่นสีแดงแกมม่วง สีแดง และสีส้ม ชุดสีที่อยูใ่ นรูปแบบน้ีมีจานวน
มากที่สามารถเลือกมาใช้งานได้ และสามารถเพ่ิมจานวนสีในชุดสีให้มากข้ึนเป็ น 4 หรือ 5 สีก็ได้

51

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

รูปท่ี 3.7 ตวั อยา่ งการออกแบบเวบ็ ไซต์ http://silverbackapp.com โดยใชช้ ุดสีคลา้ ยกนั
1.3.3.5 ชุดสีตรงข้าม หรือ Complementary Color Scheme เป็ น สีท่ีอยู่ตรงกนั

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

52

รูปท่ี 3.8 ตวั อยา่ งการออกแบบเวบ็ ไซต์ http://www.weareapartments.org โดยใชช้ ุดสีตรงขา้ ม
1.3.3.6 ชุดสีตรงข้ามข้างเคียง หรือ Split Complementary Color Scheme มี

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

รูปที่ 3.9 ตวั อยา่ งการออกแบบเวบ็ ไซต์ http://www.tvsafety.org โดยใชช้ ุดสีตรงขา้ มขา้ งเคียง

53
1.3.3.6 ชุดสีตรงข้ามข้างเคียงท้ัง 2 ด้าน หรือ Double Split Complementary
Color Scheme หรือ Tetradic ชุดสีแบบน้ีจากสีตรงขา้ มกนั ในวงลอ้ เลือกสีดา้ นขา้ งท้งั 2 ดา้ น จะได้
ชุดสี 4 สี เช่น สีแดงแกมม่วงกบั น้าเงินแกมเขียว และน้าเงินอ่อนกบั ส้ม ชุดสีแบบน้ีจะมีความ
หลากหลายท่ีเพิ่มข้ึน แต่จะมีความสดใสและความกลมกลืนของสีลดลง ตวั อย่างการออกแบบ
เวบ็ ไซตโ์ ดยใชช้ ุดสีตรงขา้ มขา้ งเคียงท้งั 2 ดา้ น ดงั รูปท่ี 3.10

รูปที่ 3.10 ตวั อย่างการออกแบบเว็บไซต์ http://www.f-i.com/google/ramayana โดยใช้ชุดสีตรง
ขา้ มขา้ งเคียงท้งั 2 ดา้ น
1.4 ความหมายของสีกบั ความรู้สึก

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

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

54

รูปที่ 3.11 ตวั อยา่ งการออกแบบเวบ็ ไซต์ http://www.hag.ch/de/ โดยใชส้ ีแดง
1.4.2 สีน้าเงิน หมายถึงทอ้ งฟ้า ทอ้ งทะเล ให้ความรู้สึกสดชื่น และอาจจะดูเรียบง่าย

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

รูปที่ 3.12 ตวั อยา่ งการออกแบบเวบ็ ไซต์ โดยใชส้ ีน้าเงิน

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

รูปท่ี 3.13 ตวั อยา่ งการออกแบบเวบ็ ไซต์ http://www.felixblanco.net โดยใชส้ ีเขียว
1.4.4 สีเหลือง สื่อถึงแสงท่ีส่องยามเชา้ ให้ความรู้สึกถึงความร่าเริง ความสนุกสนาน

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

รูปท่ี 3.14 ตวั อยา่ งการออกแบบเวบ็ ไซต์ http://reconstitute.net โดยใชส้ ีเหลือง

56
1.4.5 สีส้มและสีนา้ ตาล สื่อถึงเปลวไฟ ทอ่ นไม้ เป็นสีที่ใหค้ วามรู้สึกเรียบง่าย แตโ่ ดด
เด่น แฝงไปดว้ ยความแข็งแรง ตวั อยา่ งการออกแบบเวบ็ ไซตโ์ ดยใชส้ ีส้ม ดงั รูปท่ี 3.15 และตวั อยา่ ง
การออกแบบเวบ็ ไซตโ์ ดยใชส้ ีน้าตาล ดงั รูปที่ 3.16

รูปที่ 3.15 ตวั อยา่ งเวบ็ ไซตท์ ี่มีการออกแบบเวบ็ ไซต์ โดยใชส้ ีส้ม

รูปท่ี 3.16 ตวั อยา่ งการออกแบบเวบ็ ไซต์ http://www.brightcreative.com โดยใชส้ ีน้าตาล

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

รูปท่ี 3.17 ตวั อยา่ งการออกแบบเวบ็ ไซต์ http://www.thesum.ca โดยใชส้ ีขาว
1.4.7 สีดา สื่อถึงความลึกลับ ความน่ากลวั และความมืด เป็ นสัญลกั ษณ์ของความ

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

รูปที่ 3.18 ตวั อยา่ งการออกแบบเวบ็ ไซต์ โดยใชส้ ีดา

58

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

1.5 การใช้สีให้เกดิ ประโยชน์กบั เวบ็ ไซต์
การใชส้ ีที่ก่อใหเ้ กิดประโยชน์กบั เวบ็ ไซต์ มีขอ้ ดงั น้ี

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

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

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

1.6 ระบบสีในเวบ็ ไซต์
ระบบสีในเวบ็ ไซตม์ ีรูปแบบเฉพาะที่แตกตา่ งจากสีอ่ืนๆ เน่ืองจากมีปัจจยั 3 ปัจยั ที่มี
อิทธิพลตอ่ การปรากฎของสี ไดแ้ ก่

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

59

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

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

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

2. การจัดการตัวอกั ษร
การเลือกใชข้ นาดตวั อกั ษรในการออกแบบเวบ็ ไซตเ์ ป็ นสิ่งสาคญั มาก หากใชต้ วั อกั ษรท่ีมี

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

2.1 การจัดแนวตวั อกั ษร
การจดั แนวตวั อกั ษรแบง่ ออกเป็น 4 รูปแบบ คือ

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

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

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

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

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

60

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

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

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

2.4.2 ชนิดตวั อกั ษรแบบ San Serif เป็นรูปแบบที่ใหค้ วามรู้สึกเรียบง่าย ทนั สมยั อ่าน
ไดง้ ่าย เหมาะสาหรับขอ้ ความส้นั ๆ

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

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

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

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

61

3.1.1.1 GIF (Graphic Interchange Format) เป็ นภาพท่ีแสดงสีไดส้ ูงสุด 256
สี เหมาะกบั ภาพโลโก้ การ์ตูน ภาพลายเส้นง่ายๆ ภาพตวั อกั ษร ไม่มีการไล่เฉดสีท่ีมากนกั ภาพชนิด
น้ีมีจุดเด่นเรื่องการทาภาพเคลื่อนไหวและความโปร่งใส นามสกลุ ของไฟลช์ นิดน้ีคือ .gif

3.1.1.2 JPG (Joint Photographic Expert Group) เป็ นภาพท่ีแสดงสีได้สูงสุด
16.7 ลา้ นสี เหมาะกบั ภาพท่ีตอ้ งการการไล่เฉดสี เช่น ภาพถ่าย หรือภาพท่ีตอ้ งการความคมชดั ของสี
นามสกุลของไฟลช์ นิดน้ีคือ .jpg, .jpeg

3.1.1.3 PNG (Portable Network Graphic) เป็ นภาพที่แสดงสีได้เท่ากับไฟล์
GIF ในกรณีที่เป็ น PNG-8 และสามารถแสดงสีไดเ้ ท่ากบั ไฟล์ JPEG ในกรณีท่ีเป็ น PNG-24 ท้ัง
สองแบบสามารถเป็นภาพที่มีพ้นื หลงั โปร่งใสได้ โดยการโปร่งสามารถไล่เฉดสีได้

3.1.2 ภาพเวกเตอร์ (Vector) เป็ นภาพท่ีประกอบข้ึนด้วยคาสั่งโปรแกรมและค่า
ตวั เลขซ่ึงเกิดจากการคานวณค่าทางคณิตศาสตร์ ภาพประเภทน้ี จะมีความคมชัดคงเดิมไม่ว่าจะ
ขยายขนาดใหญ่เท่าใดกต็ าม

3.2 การจัดองค์ประกอบให้กบั รูปภาพ สามารถแบ่งออกเป็น 3 แบบดงั น้ี
3.2.1 การสร้างความใกลช้ ิดใหก้ บั องคป์ ระกอบ เป็ นการนารูปภาพท่ีอยกู่ ระจายในที่

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

3.2.2 การสร้างความซ้ากนั ให้กบั องค์ประกอบ เป็ นการสร้างรูปภาพหรือเส้นต่างๆ
ใหม้ ีความซ้ากนั ก่อใหเ้ กิดความหมายใหม่ หรือทาใหด้ ูสวยงามมากยงิ่ ข้ึน

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

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

4. การออกแบบโครงสร้างหน้าเวบ็ ไซต์
โครงสร้างหน้าเวบ็ ไซต์ หรือ Site Structure คือ การวางโครงสร้างหน้าเวบ็ เพจที่อยู่ใน

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

62

4.1 โครงสร้างแบบเรียงลาดบั (Sequential Structure)
เป็ นโครงสร้างที่เชื่อมโยงหน้าเวบ็ เพจแต่ละหนา้ แบบเรียงลาดบั การออกแบบโครงสร้าง
แบบเรียงลาดบั ส่วนใหญ่เป็ นเวบ็ เพจที่มีลกั ษณะเป็ นเรื่องราวตามลาดบั ของเวลา เหมาะสาหรับ
เว็บไซต์ท่ีมีเน้ือหาไม่มาก และตอ้ งการนาเสนอเน้ือหาแบบลาดับข้นั ตอน ทิศทางของการเขา้ สู่
เน้ือหา (Navigation) ภายในเวบ็ ไซตจ์ ะเป็นการดาเนินเร่ืองในลกั ษณะเส้นตรง โดยสามารถเปิ ดหนา้
ถดั ไปและหนา้ ก่อนหนา้ (Next-Previous) หรือคลิกกลบั มาที่หนา้ แรกของเวบ็ ไซต์ (Home) ขอ้ ดีคือ
สามารถออกแบบไดง้ ่าย เพิม่ เติมเน้ือหาไดส้ ะดวก ขอ้ เสียของโครงสร้างระบบน้ีคือ ผใู้ ชไ้ ม่สามารถ
กาหนดทิศทางการเขา้ สู่เน้ือหาของตนเองได้ ตวั อยา่ งการออกแบบหนา้ เวบ็ ไซตแ์ บบเรียงลาดบั ดงั
รูปที่ 3.19

รูปท่ี 3.19 โครงสร้างหนา้ เวบ็ ไซตแ์ บบเรียงลาดบั

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

63

รูปที่ 3.20 โครงสร้างหนา้ เวบ็ ไซตแ์ บบลาดบั ช้นั

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

Page Page Page
ABC

Page Page Page
A.1 B.1 C.1

Page Page Page
A.2 B.2 C.2

รูปท่ี 3.21 โครงสร้างหนา้ เวบ็ ไซตแ์ บบตาราง

64

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

Page 1

Page 6 Page 2

Page 5 Page 3

Page 4

รูปที่ 3.22 โครงสร้างหนา้ เวบ็ ไซตแ์ บบใยแมงมุม

5. การออกแบบระบบเนวเิ กช่ัน
ระบบเนวิเกชน่ั (Navigation) หรือส่วนนาทางผูใ้ ช้หรือ ลิงค์ เพื่อเชื่อมโยงไปยงั หน้าเวบ็

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

5.1 รูปแบบระบบเนวเิ กช่ัน
ระบบเนวเิ กชน่ั แบง่ ออกเป็น 4 รูปแบบ ดงั น้ี

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

65

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

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

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

5.1.4 ระบบเนวิเกชัน่ เฉพาะท่ี (Ad Hoc) เป็ นระบบเนวิเกชน่ั ท่ีสร้างข้ึนมาเฉพาะที่
ตามความจาเป็นของเน้ือหาในหนา้ เวบ็ เพจน้นั ๆ

5.2 องค์ประกอบของระบบเนวเิ กชั่นหลกั
เป็ นระบบนาทางหลกั ของเวบ็ ไซต์ เพื่อนาผชู้ มเขา้ ไปสู่เวบ็ เพจเน้ือหาต่างๆ ของเวบ็ ไซต์
ประกอบดว้ ยหลากหลายรูปแบบ ได้แก่ เนวิเกชนั่ บาร์, เนวิเกชน่ั เฟรม, Pull down menu, Pop-up
menu, Image map และ Search box

5.2.1 เนวเิ กชนั่ บาร์ (Nevigation Bar) ประกอบดว้ ยกลุ่มของลิงคต์ ่างๆ ที่อยรู่ วมกนั
ในบริเวณหน่ึงของหนา้ เวบ็ เพจ โดยอาจเป็นตวั หนงั สือหรือรูปภาพกราฟิ ก ตวั อยา่ งดงั รูปที่ 3.23

เนวเิ กชน่ั บาร์

รูปท่ี 3.23 ตวั อยา่ งระบบเนวเิ กชน่ั บาร์
5.2.2 เนวิเกชน่ั บาร์ระบบเฟรม (Frame-Based) จะใช้คุณสมบตั ิของเฟรมท่ีสามารถ

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

66

12

รูปที่ 3.24 ตวั อยา่ งเนวเิ กชน่ั บาร์ระบบเฟรม
จากรูปที่ 3.24 ส่วนท่ี 1 คือ เฟรมแสดงเนวเิ กชน่ั บาร์ เมื่อคลิกเลือกรายการจากเนวเิ กชน่ั

บาร์จะนาหนา้ เวบ็ เพจไปแสดงผลในส่วนท่ี 2 ซ่ึงเป็นเฟรมสาหรับแสดงผลโดยเฉพาะ ดงั น้นั เฟรม
ในส่วนท่ี 1 จะไมม่ ีการเปล่ียนแปลงใดๆ

5.2.3 เนวิเกชน่ั แบบ Pull down Menu เป็ นเนวิเกชนั่ ที่มีรายการยอ่ ยจากรายการหลกั
เม่ือผูใ้ ชน้ าเมาส์ไปวางเหนือตาแหน่งของรายการหลกั จะปรากฏรายการยอ่ ยออกมาให้เลือกโดย
แสดงผลในลกั ษณะจากบนลงล่าง เหมาะสาหรับเวบ็ เพจที่ไม่มีพ้ืนท่ีใหจ้ ดั วางเนวเิ กชนั่ ตวั อยา่ งดงั
รูปท่ี 3.25

รูปท่ี 3.25 ตวั อยา่ งระบบเนวเิ กชนั่ แบบ Pull down Menu
5.2.4 เนวเิ กชน่ั แบบ Pop-Up Menu เป็นเนวเิ กชน่ั ท่ีมีรายการหรือรายการยอ่ ยใหเ้ ลือก

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

67

รูปที่ 3.26 ตวั อยา่ งเนวิเกชนั่ แบบ Pop-Up Menu
จากรูปที่ 3.26 เมื่อนาเมาส์วาง ณ ตาแหน่งรูปภาพ จะปรากฎรายการแสดงเป็ นเนวิเกช่นั

ใหค้ ลิกเลือกเพือ่ นาเขา้ สู่เน้ือหาเกม
5.2.5 Image Map เป็ นการนาภาพมาสร้างเป็ นตวั เช่ือมโยงไปยงั ส่วนต่างๆ ที่ตอ้ งการ

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

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

รูปท่ี 3.27 ตวั อยา่ ง Search Box ระบบสืบคน้ ขอ้ มูลภายในเวบ็ ไซต์

68
5.3 องค์ประกอบของระบบเนวเิ กช่ันเสริม
เป็นส่วนช่วยทาใหส้ ามารถท่องเขา้ ไปในเวบ็ ไซตไ์ ดอ้ ยา่ งสะดวก ไดแ้ ก่

5.3.1 ระบบสารบญั (Table Contents) เป็ นการแสดงรายการขอ้ มูลท้งั หมดภายใน
เว็บไซต์ โดยแบ่งเน้ือหาออกเป็ นหมวดหมู่และเช่ือมโยงไปยงั เวบ็ เพจน้ัน ตวั อย่างเช่นเวบ็ ไซต์
www.msn.com ท่ีมีการจดั หมวดหมุเ่ น้ือหา เพอื่ ใหผ้ ใู้ ชเ้ ลือกตามความตอ้ งการดงั รูปที่ 3.28

รูปท่ี 3.28 แสดงตวั อยา่ งระบบสารบญั ของเวบ็ ไซต์ www.msn.com

69
5.3.2 ระบบดัชนี (Index System) เป็ นการนาเอาคาหรือข้อความมาจัดเรียงตาม
ตวั อกั ษรเพอื่ ใหผ้ ใู้ ชส้ ามารถใชง้ านไดง้ ่าย ตวั อยา่ งดงั รูปที่ 3.29

รูปที่ 3.29 แสดงตวั อยา่ งระบบดชั นี
5.3.3 แผนท่ีเว็บไซต์ (Site Map) เป็ นการแสดงโครงสร้างข้อมูลในเว็บไซต์แบบ

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

รูปท่ี 3.30 ตวั อยา่ งแผนท่ีเวบ็ ไซต์

70

5.3.4 ไกด์ทวั ร์ (Guided Tour) เป็ นการนาเสนอขอ้ มูลสาธิตการใช้งานเวบ็ ไซต์ เพ่ือ
แสดงใหเ้ ห็นตวั อยา่ งการใชง้ านและขอ้ มูลที่จะไดร้ ับจากการเยยี่ มชมเวบ็ ไซตใ์ นส่วนตา่ งๆ

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

ไดอ้ ยา่ งสะดวกและรวดเร็ว คุณสมบตั ิของระบบเนวเิ กชน่ั ท่ีดีน้นั ควรจะประกอบดว้ ยดงั น้ี
5.4.1 เขา้ ใจง่าย ควรสร้างระบบเนวเิ กชน่ั ที่ชดั เจนและง่ายตอ่ การเขา้ ใจ
5.4.2 มีความสม่าเสมอ ควรสร้างระบบเนวิเกชน่ั ในหน้าเวบ็ เพจของเวบ็ ไซตท์ ่ีเป็ น

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

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

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

5.4.5 นาเสนอหลายทางเลือก ควรมีเนวิเกช่ันไวใ้ ห้ผูใ้ ช้เลือกใช้ได้หลากหลาย
รูปแบบ โดยอาจจะมีการสร้างระบบสารบญั , Site map, หรือ Search Box ใหเ้ ลือกใชต้ ามความถนดั
ของผใู้ ช้

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

5.4.7 มีรูปแบบที่ส่ือความหมาย ควรออกแบบระบบเนวิเกชนั่ ท่ีส่ือความหมายถึง
เน้ือหาภายในเวบ็ ไซต์

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

71

6. บทสรุป
ในการออกแบบเวบ็ ไซต์ที่ดี จะทาให้เวบ็ ไซต์ที่พฒั นาออกมามีคุณภาพน่าเย่ียมชม ส่ิง

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

7. แบบฝึ กหดั ท้ายบท
1. จงอธิบายประโยชนข์ องสีในเวบ็ ไซตม์ าใหพ้ อเขา้ ใจ
2. จงอธิบายประโยชน์การออกแบบเวบ็ ไซต์โดยการใช้ชุดสีร้อน ชุดสีเยน็ ชุดสีตรงขา้ ม

ชุดสีแบบสีเดียว ชุดสีแบบสามเส้า และชุดสีคลา้ ยกนั
3. จงระบุความหมายกบั ความรู้สึกของสีแดง สีน้าเงิน สีเขียว สีเหลือง สีดา และสีขาว
4. จงอธิบายการใชส้ ีใหเ้ กิดประโยชนก์ บั เวบ็ ไซต์
5. จงอธิบายระบบสีในเวบ็ ไซต์
6. หากตอ้ งการตกแตง่ เวบ็ ไซตด์ ว้ ยรูปภาพที่มีความโปร่งใสควรใชร้ ูปภาพชนิดใด
7. อธิบายขอ้ ดีของภาพเวกเตอร์
8. จงอธิบายรูปแบบโครงสร้างหนา้ เวบ็ ไซต์ มาพอเขา้ ใจ
9. จงยกตวั อยา่ งเวบ็ ไซตพ์ ร้อมรูปภาพประกอบที่ใช้ระบบเนวิเกชน่ั ระบบเนวิเกชน่ั บาร์

เนวเิ กชน่ั แบบ Pull down Menu เนวเิ กชน่ั แบบ Pop-Up Menu อยา่ งละ 3 เวบ็ ไซต์
10. จงยกตัวอย่างเว็บไซต์พร้อมรูปภาพประกอบที่ใช้ระบบ Search Box จานวน 3

เวบ็ ไซต์

72