บทท� 3

หลกการออกแบบเวบไซต การพฒนาเวบไซตผพฒนาตองกาหนดเปาหมายของการพฒนาเวบไซตอยางชดเจน

เพ!อใหมผใชท!เปนกลมเปาหมายเขาเย!ยมชมและเขาใชงานเวบไซตจานวนมาก หากเวบไซตมจานวนผเขาใชงานจานวนมาก จะทาใหหนวยงานหรอองคกรท! เปนเจาของเวบไซตมความไดเปรยบในธรกจสง ดงน-นในการพฒนาเวบไซตผพฒนาจงตองคานงถงหลกการออกแบบเวบไซต การเลอกสรรเน-อหาท!มประโยชนและตรงวตถประสงคบรรจในเวบไซต ออกแบบเวบไซตใหมความสวยงามโดดเดน เพ!อสรางความประทบใจ ทาใหผใชกลบเขาใชเวบไซตอกในอนาคต และเพ!อเพ!มจานวนผใชรายใหม ทาใหเวบไซตเปนท!รจกกนอยางกวางขวาง ในบทน-จะกลาวถงการใชส การจดตวอกษรสาหรบเวบ รปภาพและการจดวาง รปแบบโครงสรางหนาเวบ และการออกแบบระบบเนวกเกช!น โดยมรายละเอยดดงน-

1. การใชส

สเปนปจจยท!ชวยทาใหเวบไซตมความนาสนใจ ดงน-นในการพฒนาเวบไซตจงควรใหความสาคญกบการเลอกใชส เพ!อดงดดใหมผใชเขามาเวบไซตมากข-น

1.1 การเลอกใชสสาหรบเวบไซต

สสนในหนาเวบเพจ เปนส!งสาคญท!ชวยทาใหเวบมความนาสนใจ เน!องจากสเปนชวยสรางบรรยากาศและความรสกโดยรวมของเวบ หากเลอกใชสในทกองคประกอบของเวบเพจ เชน สพ-นเวบเพจ สขอความ สกราฟกท!ใชตกแตง สปมหรอแถบเมนเนวเกช!น มความเหมาะสมและส!อความหมาย กจะทาใหเวบไซตมความนาสนใจ และเพ!มความสวยงามใหกบเวบไซต ในทางตรงกนขามหากเลอกใชสท!ไมเหมาะสม อาจจะทาใหเกดความยากลาบากในการอานหรอรบกวนสายตา ผใชเกดความเบ!อหนาย ซ! งการเลอกใชสสาหรบเวบไซตน-นจะข-นอยกบเปาหมายของเวบไซตตองการส!อสารถงอะไร และสยงส!อถงความเปนเอกลกษณขององคกรหรอธรกจ ดงน-นในการออกแบบเวบไซตท!ด จงควรเขาใจเก!ยวกบทฤษฎส รจกเลอกใชสท!เหมาะสมเพ!อการส!อความหมายอยางสวยงาม เพ!อการตดสนใจเลอกใชสในเวบไซตใหเหมาะสมกบลกษณะและเปาหมายของเวบไซต การเลอกใชชดสท!เหมาะสม กลมกลน ไมเพยงแตจะสรางความพงพอใจใหกบผใช แตยงทาใหผใชมความรสกรวมไปกบเปาหมายของเวบไซตน-นดวย ไมวาจะเปนการใหความร ขอมล สรางความบนเทง รวมถงการขายสนคาหรอบรการ

50

1.2 ประโยชนของสในเวบไซต

สเปนเคร! องมอท!สามารถส! อถงความรสกและอารมณ และชวยสรางความสมพนธระหวางสถานท!กบเวลา สเปนปจจยสาคญท!ชวยสรางความหมายขององคประกอบในหนาเวบเพจ ประโยชนของสในรปแบบตางๆ ธวชชย ศรสเทพ (2544:185-187) กลาวไวดงน-

(1) สสามารถชกนาสายตาผอานใหไปยงทกบรเวณในหนาเวบเพจ ผอานจะมการเช!อมโยงความรสกกบบรเวณของสในรปแบบท!คาดหวงได การเลอกเฉดสและตาแหนงของสอยางรอบคอบในหนาเวบ สามารถนาทางใหผอานตดตามเน-อหาในบรเวณตางๆ ตามท!กาหนดได วธน-จะเปนประโยชนอยางมากเม!อตองการใหผอานใหความสนใจกบสวนใดสวนหน!งในเวบไซตเปนพเศษ เชน ขอมลใหม โปรโมช!นพเศษ หรอบรเวณท!ไมคอยไดรบความสนใจมากอน

(2) สชวยเช!อมโยงบรเวณท!ไดรบการออกแบบเขาดวยกน ผอานจะมความรสกวาบรเวณท!มสเดยวกนจะมความสาคญเทากน วธการเช!อมโยงแบบน- ชวยจดกลมของขอมลท!มความสมพนธอยางไมเดนชดเขาดวยกนได

(3) สสามารถนาไปใชในการแบงบรเวณตางๆ ออกจากกน ทานองเดยวกบการเช!อมโยงบรเวณท!มสเหมอนกนเขาดวยกน แตในขณะเดยวกนกเปนการแบงแยกบรเวณท!มสตางกนออกจากกน

(4) สสามารถใชในการดงดดความสนใจของผอาน สายตาผอานจะมองไปยงสท!มลกษณะเดน หรอผดปกตเสมอ การออกแบบเวบไซตดวยการเลอกใชสอยางรอบคอบ ไมเพยงแตจะกระตนความสนใจของผอานเพยงเทาน-น แตยงชวยหนวงเหน!ยวใหผอานอยในเวบไซตไดนานย!งข-น สวนเวบไซตท!ใชสไมเหมาะสม เสมอนเปนการขบไลผชมไปสเวบอ!นท!มการออกแบบท!ดกวา

(5) สสามารถสรางอารมณโดยรวมของเวบเพจ และกระตนความรสกตอบสนองจากผชมไดนอกเหนอจากความรสกท!ไดรบจากสตามหลกจตวทยาแลว ผชมยงอาจมอารมณและความรสกสมพนธกบสบางสหรอบางกลมเปนพเศษ

(6) สชวยสรางระเบยบใหกบขอความตางๆ เชน การใชสแยกสวนระหวางหวเร!องกบตวเร!อง หรอการสรางความแตกตางใหกบขอความบางสวน โดยใชสแดงสาหรบคาเตอน หรอใชสเทาสาหรบส!งท!เปนทางเลอก

(7) สสามารถสงเสรมเอกลกษณขององคกรหรอหนวยงานน-นๆ ได ดวยการใชสท!เปนเอกลกษณขององคกรมาเปนโทนสหลกของเวบไซต

51

การเลอกชดสมาใชในเวบไซตน-นข- นอยกบความตองการสวนบคคลหรอความตองการขององคกร รวมท-งความเขาใจหลกการใชสเบ-องตน จากการเลอกใชสชดใดชดหน!งจากชดสพ-นฐานอ!นๆ ไดอยางเหมาะสมกบลกษณะของเวบไซต

1.3 ความรเบ)องตนเก�ยวกบสและการผสมส ความรเบ-องตนเก!ยวกบสและการผสมส สประกอบดวย แมส 3 ส คอสน- าเงน สแดงและ

สเหลอง ซ! งแมส 3 สน- ไมสามารถเกดจากการผสมสของสอ!นๆ ได แตเปนสท!เปนตนกาเนดของสอ!นๆ หรอเรยกวา สข-นตน ดงรปท! 3.1

สน-าเงน

สแดง

สเหลอง

รปท� 3.1 แมส ประกอบดวย สน-าเงน สแดง และสเหลอง

สข-นท!สอง เกดจากการผสมสของแมสเขาดวยกน ไดแก สน-าเงนผสมกบสแดงจะได สมวง สน-าเงนผสมกบสเหลองจะได สเขยว และสแดงผสมกบสเหลองจะได สสม ดงรปท! 3.2

สน-าเงน

สแดง

สมวง

สน-าเงน

สเหลอง

สเขยว

สแดง

สเหลอง

สสม

รปท� 3.2 สข-นท!สอง เกดจากการผสมของแมสเขาดวยกน สข-นท!สาม เกดจากการนาสข-นท!หน!ง และข-นท!สองมาผสมกนไดท-งหมด 6 ส ไดแก สสม

แดง สมวงแดง สเขยวเหลอง สสมเหลอง สเขยวน-าเงน และสมวงน-าเงน ดงรปท! 3.3

52

สสม

สแดง

สสมแดง

สมวง

สแดง

สมวงแดง

สเขยว

สเหลอง

สเขยวเหลอง

สสม

สเหลอง

สสมเหลอง

สเขยว

สน-าเงน

สเขยวน-าเงน

สมวง

สน-าเงน

สมวงน-าเงน

รปท� 3.3 สข-นท!สาม เกดจากการนาสข-นท!หน!งและข-นท!สองผสมกน

1.3.1 การผสมส การผสมสเพ!อใหเกดเปนสตางๆ สามารถแบงไดเปน 2 แบบ คอการผสมของแสง

หรอการผสมแบบบวก (additive mixing) และการผสมของรงควตถ (pigment) หรอการผสมแบบลบ (subtractive mixing) ซ! งมรายละเอยดดงตอไปน-

1.3.1.1 การผสมสแบบบวก (Additive Mixing) เปนรปแบบการผสมของแสง ไมใชการผสมของวตถมสบนกระดาษ เน!องจากแสงสขาวประกอบดวยลาแสงท!มสตางๆ ตามความยาวคล!นแสง ความยาวคล!นแสงพ-นฐานไดแก สแดง เขยว และน- าเงน เม!อคล!นแสงมการซอนทบกนจะเกดการบวกและรวมตวกนของความยาวคล!นแสง เม!อแสงท-งสามสมการผสมกนเปนค จะเกดเปนสน- าเงนแกมเขยว หรอ cyan ซ! งเกดจากสน- าเงนบวกกบเขยว สแดงแกมมวงหรอ magenta เกดจากสแดงบวกกบน- าเงน และสเหลอง เกดจากสแดงบวกกบเขยว และเม!อผสมสท-งสามเขาดวยกน จะไดเปนแสงสขาว

53

ส!อใดๆ ท!มการใชแสงสองออกมา เชน จอโปรเจคเตอร (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

54

รปท� 3.4 วงลอส 12 ข-น

1.3.2.2 ความกลมกลนของส ในการออกแบบเวบไซตใหสมความกลมกลน จะทาใหเวบไซตดนาสนใจมากข-น เพราะจะทาใหผใชเกดความรสกถงความเปนระเบยบ สมดล และทาใหเวบไซตเกดความสวยงามในเวลาเดยวกน

การใชสท!ชดเกนไป จะทาใหเวบไซตดนาเบ!อ และในทางกลบกนหากใชสท!มากเกนไปกจะทาใหดวนวาย จะสรางความสบสนในกบผใช โดยในตวอยางเปนสท!มความกลมกลน จะเหนไดวาสเกดการไลระดบ ไมวาจะเปนสขาว สเทา และสดา และสวนทายจะเปนสสม สน-าตาล และสแดงเขม โดยในแตละสจะไมเหล!อมล-าหรอตางกนมากนก

ผสรางเวบไซตสามารถคดเลอกสท!มความกลมกลนซ!งกนและกนมาใสในเวบไซตของตนเอง ซ! งการใสสตางๆ น-น ควรจะใสใหมน-าหนกท!เทากน ไมควรใสสใดสหน!งมากเกนไป เพราะจะทาใหเกดความแตกตางระหวางส

1.3.3 ชดสพ)นฐาน

ชดของสพ-นฐานท!นยมใชจะพจารณาจากวงลอของส ซ! งสามารถแบงออกเปนหลากหลายลกษณะ โดยในเอกสารฉบบน- จะพจารณาชดส เปน 7 ชดดงน- ชดสรอนและชดสเยน ชดสแบบสเดยว ชดสแบบสามเสา ชดสคลายกน ชดสตรงขาม ชดสตรงขามขางเคยง และชดสตรงขามขางเคยงท-ง 2 ดาน โดยแตละชดสมรายละเอยดดงน-

55

1.3.3.1 ชดสรอน และชดสเยน พนจนทร ธนวฒนเสถยร (2551, 10) กลาวถงชดสรอนและชดสเยนไวดงน-

ชดสรอน เปนชดสท!ทาใหเกดความรสกสบาย และอบอน ใหความรสกตอนรบผชม และจะชวยดงดดความสนใจกบเวบไซตไดมาก ในทางจตวทยาชดสรอนเปนชดสท! มความสมพนธกบความสข ความสบาย ชดสรอนจะประกอบไปดวย สเขยวอมเหลอง สเหลอง สสม สแดง และสมวงแกมแดง โดยสตางๆ ในชดสรอนจะเปนสท!กลมกลนอยตวเอง

ชดสเยน เปนชดสท!ทาใหเกดความรสกท!เยนสบาย ผอนคลาย แตในทางจตวทยาชดสเยนมความสมพนธกบความซมเศรา ความหดห ชดสเยนจะประกอบไปดวย สเขยว สน-าเงนแกมเขยว สฟา สน-าเงนออน สน-าเงน และสมวง

1.3.3.2 ชดสแบบสเดยว หรอ Monochromatic Color Scheme เปนชดของสท!เกดจากสบรสทธe เพยงคาเดยว เกดจากความเขมและออนของสท!แตกตางกนหลายระดบ ตวอยางการชดสแบบสเดยวในเวบไซตท!วไป เชน โลโกใชตวอกษรสน- าเงน ท!ตดกบพ-นหลงสฟา และกรอบของโลโกใชสฟา ในการนาเสนอ ซ! งทาใหรสกถงความสบาย ผอนคลาย และพ-นหลงตรงกลางของโลโกเปนสฟาแกมขาว ทาใหรสกโดดเดนและเบา ในการตกแตงเวบไซตแบบน- จะทาใหรสกกลมกลน แตในขณะเดยวกนในบางคร- งอาจทาใหรสกนาเบ!อ ตวอยางการตกแตงเวบไซตโดยใชชดสแบบสเดยว ดงรปท! 3.5

รปท� 3.5 ตวอยางการออกแบบเวบไซต https://www.powersmart.ca โดยใชชดสแบบสเดยว

56

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 สกได

57

แตผลท!ไดจะมขอบเขตของสท!มความกวางเกนไป ทาใหสท!อยตรงปลายท-งสองของชดสไมมความสมพนธกน เปนสาเหตใหลกษณะการท!มสคลายคลงกนลดลง ณ บางตาแหนงของวงลอส ชดสคลายคลงกน 3-4 สท!อยตดกนอาจดเหมอนเปนสเดยวกน เพราะมสใดสหน! งคลมโทนของสท-งหมดไว ไมเพยงแตชดสแบบน-จะนามาใชงานไดสะดวก ความคลายคลงกนของสยงกอใหเกดความกลมกลนกนอกดวย แตในทางกลบกนอาจทาใหไมมความโดดเดน ไมดงดดความสนใจของผใชได ตวอยางการออกแบบเวบไซตโดยใชชดสคลายกน ดงรปท! 3.7

รปท� 3.7 ตวอยางการออกแบบเวบไซต http://silverbackapp.com โดยใชชดสคลายกน

1.3.3.5 ชดสตรงขาม หรอ Complementary Color Scheme เปน สท!อยตรงกนขามกนในวงลอส เชน สแดงกบฟา หรอสน- าเงนออนกบสม ซ! งท-งสองสจะตดกนมาก เม!อนาสท-งสองมาใชคกนกจะทาใหสท-งสองมความสวางและสดใสมากข-น ซ! งถอเปนคสท!มความแตกตางมากท!สด และยงมความเสถยรมากท!สด (maximum contrast and maximum stability) ขอไดเปรยบของสในรปแบบน- คอ ความสดใส สะดดตา ทาใหไมดจดชด ผอานใหความสนใจไดงาย ตวอยางการออกแบบเวบไซตโดยใชชดสตรงขาม ดงรปท! 3.8

58

รปท� 3.8 ตวอยางการออกแบบเวบไซต http://www.weareapartments.org โดยใชชดสตรงขาม

1.3.3.6 ชดสตรงขามขางเคยง หรอ Split Complementary Color Scheme มรปแบบมาจากชดสตรงขาม แตใชสท!อยดานขางท-งสอง เชน สแดง มสตรงขามคอ สฟา และสฟามสดานขางท-งสองเปนสน- าเงนออนกบสน- าเงนแกมเขยว ดงน-นชดสตรงขามขางเคยงท!ไดจงประกอบดวย สแดง สน- าเงนออน และสน- าเงนแกมเขยว ลกษณะของชดสแบบน- คอมความหลากหลายมากข-น แตสงผลใหมความสดใสและความสะดดตาลดลง และความเขากนของสกลดลงเชนกน ตวอยางการออกแบบเวบไซตโดยใชชดสตรงขามขางเคยง ดงรปท! 3.9

รปท� 3.9 ตวอยางการออกแบบเวบไซต http://www.tvsafety.org โดยใชชดสตรงขามขางเคยง

59

1.3.3.6 ชดสตรงขามขางเคยงท)ง 5 ดาน หรอ 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

60

รปท� 3.11 ตวอยางการออกแบบเวบไซต http://www.hag.ch/de/ โดยใชสแดง

1.4.2 สน)าเงน หมายถงทองฟา ทองทะเล ใหความรสกสดช!น และอาจจะดเรยบงายในเวลาเดยวกน ความหมายในทางลบสน- าเงนใหความรสกหดห เศรา หรอเสยใจ ตวอยางการออกแบบเวบไซตโดยใชสน-าเงน ดงรปท! 3.12

รปท� 3.12 ตวอยางการออกแบบเวบไซต โดยใชสน-าเงน

61

1.4.3 สเขยว ส!อถงตนไม ธรรมชาต และความสดช!น ใหความรสกถงความปลอดภย ความอบอนและความแขงแรง ตวอยางการออกแบบเวบไซตโดยใชสเขยว ดงรปท! 3.13

รปท� 3.13 ตวอยางการออกแบบเวบไซต http://www.felixblanco.net โดยใชสเขยว

1.4.4 สเหลอง ส!อถงแสงท!สองยามเชา ใหความรสกถงความราเรง ความสนกสนานและความสดใส หากใชสเหลองตดกบสเขยวจะทาใหเวบไซตดโดดเดนมาก ตวอยางการออกแบบเวบไซตโดยใชสเหลอง ดงรปท! 3.14

รปท� 3.14 ตวอยางการออกแบบเวบไซต http://reconstitute.net โดยใชสเหลอง

62

1.4.5 สสมและสน)าตาล ส!อถงเปลวไฟ ทอนไม เปนสท!ใหความรสกเรยบงาย แตโดดเดน แฝงไปดวยความแขงแรง ตวอยางการออกแบบเวบไซตโดยใชสสม ดงรปท! 3.15 และตวอยางการออกแบบเวบไซตโดยใชสน-าตาล ดงรปท! 3.16

รปท� 3.15 ตวอยางเวบไซตท!มการออกแบบเวบไซต โดยใชสสม

รปท� 3.16 ตวอยางการออกแบบเวบไซต http://www.brightcreative.com โดยใชสน-าตาล

63

1.4.6 สขาว ส!อถงฤดหนาวหรอความเยอกเยน ใหความรสกถงความสะอาด ความสบายตา เวบไซตท!วไปจงใชสขาวเปนหลก เพ!อทาใหรสกถงความเรยบงายของเวบไซต ในทางลบสขาวจะส!อถงความออนแอ ความเจบปวย และความโศกเศรา ตวอยางการออกแบบเวบไซตโดยใชสขาว ดงรปท! 3.17

รปท� 3.17 ตวอยางการออกแบบเวบไซต http://www.thesum.ca โดยใชสขาว

1.4.7 สดา ส!อถงความลกลบ ความนากลวและความมด เปนสญลกษณของความโศกเศรา สวนใหญจะใชกบสนคาท!หรหราและมเกยรต สดาทาใหเวบไซตโดดเดน หากทาเปนสพ-นจะทาใหสอ!นๆ เดนข-นมา ตวอยางการออกแบบเวบไซตโดยใชสดา ดงรปท! 3.18

รปท� 3.18 ตวอยางการออกแบบเวบไซต โดยใชสดา

64

ในการออกแบบเวบไซตเพ!อตองการส!อถงความหมายน-น มวธการเลอกใชสหลากหลายวธ เชน หากเลอกใชสโทนสเดยว อาจส!อความหมายเดยว แตถาเลอกใชโทนสท!แตกตางกน ความเหมายกอาจจะเปล!ยนไป ตวอยางเชน สแดงเขมอาจจะส!อถงเลอด แตหากใชสแดงออนลงมาอาจจะส!อถงความรก หรอหวใจ เปนตน ดงน-นในการเลอกใชสในเวบไซต จงควรคานงถงความเหมาะสมและความหมายของส เพ!อส!อถงวตถประสงคของการนาเสนอขอมลบนเวบไซต และเลอกใชสท!มความกลมกลนกนเพ!อความสบายตาของผเย!ยมชม

1.5 การใชสใหเกดประโยชนกบเวบไซต การใชสท!กอใหเกดประโยชนกบเวบไซต มขอดงน-

1.5.1 ใชสอยางสม!าเสมอ การออกแบบเวบไซตโดยใชสอยางสม!าเสมอชวยสรางความรสกถงบรเวณของสถานท! เชนการใชสท!เปนชดเดยวกนตลอดท-งเวบไซตเพ!อสรางขอบเขตของเวบไซตท!สมผสไดดวยตา เม!อผใชคลกเขาไปในแตละหนากยงรสกไดวากาลงอยภายในเวบไซตเดยวกน

1.5.2 ใชสอยางเหมาะสม เวบไซตเปรยบเสมอสถานท!หน! งๆ ท!มลกษณะเฉพาะ เชนเดยวกบสถานท!ตางๆ ในชวตจรงอยาง ธนาคาร โรงเรยน หรอรานคาตางๆ ดงน-น การเลอกใชสท! เหมาะสมกบลกษณะของเวบไซต จะชวยสงเสรมเปาหมายและภาพพจนของเวบไซตได นอกจากน- ควรคานงถงปจจยหลายๆ อยางท! มผลตอความเหมาะสมของสในเวบไซต เชน วฒนธรรม แนวโนม ของแฟช!น อายและประสบการณของผใช เชนความรสกเหนดวยเม!อมการใชสชมพเพ!อแสดงถงความรก ใชโทนสน-าตาลดา ส!อถงเหตการณในอดต ใชสสดใสสาหรบเดก และการใชสตามแฟช!นในเวบไซตเก!ยวกบเคร!องแตงกาย

1.5.3 ใชสเพ!อส! อความหมาย ดงท!ไดเหนแลววา สแตละสใหความหมายและความรสกตางกน โดยสหน! งๆ อาจส! อความหมายไปในทางบวกหรอทางลบกได ข- นอยกบสถานการณ ตวอยางเชน สดาใหความรสกโศกเศราในงานศพ แตกลบแสดงถงความเปนมออาชพในการแสดงผลงานของศลปน ดงน- นสท!ใหความหมายและความรสกตรงกบเน-อหา จะชวยสนบสนนใหผใชไดรบขอมลท!ถกตองและครบถวน

1.6 ระบบสในเวบไซต ระบบสในเวบไซตมรปแบบเฉพาะท!แตกตางจากสอ!นๆ เน!องจากมปจจย 3 ปจยท!ม

อทธพลตอการปรากฎของส ไดแก 1.6.1 จอภาพ เน!องการการเขาถงเวบไซตน-นจะตองทางานผานทางอปกรณตางๆ ไม

วาจะเปนทางเคร!องคอมพวเตอร อปกรณเคล!อนท!ตางๆ เชน โทรศพทมอถอ แทปเลต ซ! งเปนปจจยสาคญของการแสดงผลของส เน!องจากแตละอปกรณมความละเอยดของการแสดงผลท!แตกตางกน

65

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 การใชขนาดตวอกษร การเลอกใชขนาดตวอกษรในเวบไซต ควรเลอกใหพอดกบวตถประสงคในการใช เชน

หากเปนตวอกษรหวเร!องควรเปนตวอกษรท!มขนาดใหญกวาปกตและอาจจะมไลสท!แตกตางกน เพ!อใหสงเกตไดงาย หรออาจจะใชตวอกษรท!มขนาดใหญแสดงโลโกของเวบไซต การใชตวอกษร

66

ขนาดใหญจะทาใหรสกสนใจและตองการตดตาม สวนขอความปกตควรจะมขนาดท!พอดอานไดงาย ขนาดท!นยมใชกนคอขนาด 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) ซ! งภาพประเภทน- มคาท!แนนอนตายตว เม!อขยายขนาดภาพจงหยาบและเหนจดสชดเจน ตวอยางภาพประเภทบทแมพ ไดแก

67

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 รปแบบ ดงน-

68

4.1 โครงสรางแบบเรยงลาดบ (Sequential Structure) เปนโครงสรางท!เช!อมโยงหนาเวบเพจแตละหนาแบบเรยงลาดบ การออกแบบโครงสราง

แบบเรยงลาดบ สวนใหญเปนเวบเพจท!มลกษณะเปนเร!องราวตามลาดบของเวลา เหมาะสาหรบเวบไซตท!มเน-อหาไมมาก และตองการนาเสนอเน-อหาแบบลาดบข-นตอน ทศทางของการเขาสเน-อหา (Navigation) ภายในเวบไซตจะเปนการดาเนนเร!องในลกษณะเสนตรง โดยสามารถเปดหนาถดไปและหนากอนหนา (Next-Previous) หรอคลกกลบมาท!หนาแรกของเวบไซต (Home) ขอดคอ สามารถออกแบบไดงาย เพ!มเตมเน-อหาไดสะดวก ขอเสยของโครงสรางระบบน- คอ ผใชไมสามารถกาหนดทศทางการเขาสเน-อหาของตนเองได ตวอยางการออกแบบหนาเวบไซตแบบเรยงลาดบดงรปท! 3.19

รปท� 3.19 โครงสรางหนาเวบไซตแบบเรยงลาดบ

4.2 โครงสรางแบบลาดบช)น (Hierarchical Structure) เปนโครงสรางหนาเวบเพจท!มการแบงเน-อหาออกเปนกลม และมการเช!อมโยงตาม

ระดบช-นของเน-อหา ใชแนวคดเดยวกบการสรางแผนภมองคกร โดยมจดเร!มตนเพยงจดเดยว คอ โฮมเพจ (Homepage) การเช!อมโยงเน-อหาจะเช!อมโยงจากลาดบบนลงลาง และเวบเพจท!อยระดบลางจะสามารถเช!อมโยงข-นมาในระดบบนเทาน-น เหมาะสาหรบเวบไซตท!มขนาดใหญ มเน-อหาคอนขางมาก แตโครงสรางไมซบซอน สะดวกตอการจดระบบขอมล ปรบปรงเวบไซตทาไดงาย เน!องจากมการจดหมวดหมขอมลชดเจน ขอเสย คอตองออกแบบโครงสรางเวบไซตใหชดเจน แบงกลมเน-อหาใหเหมาะสม ตวอยางการออกแบบหนาเวบไซตแบบลาดบข-น ดงรปท! 3.20

69

รปท� 3.20 โครงสรางหนาเวบไซตแบบลาดบช-น

4.3 โครงสรางแบบตาราง (Grid Structure) เปนโครงสรางหนาเวบเพจท!มการเช!อมโยงระหวางเน-อหา ทาใหทกเน-อหาของเวบไซต

สามารถเช!อมโยงถงกนได ทาใหผใชสามารถเปล!ยนเน-อหาไดดวยตนเอง โครงสรางแบบตารางเหมาะสาหรบเวบไซตท!มขนาดใหญ มเน-อหามาก โครงสรางซบซอน เน-อหาท!นามาใชควรมลกษณะเหมอนกน สามารถใชรปแบบรวมกนได ขอเสย คอการออกแบบตองมการวางแผนท!ด เน!องจากมการเช!อมโยงกนหลายทศทาง ทาใหการปรบปรงแกไขเกดความยงยาก ตวอยางการออกแบบหนาเวบไซตโครงสรางแบบตาราง ดงรปท! 3.21

รปท� 3.21 โครงสรางหนาเวบไซตแบบตาราง

Page

A

Page A.1

Page A.2

Page B.2

Page B.1

Page

B

Page

C

Page C.1

Page C.2

70

4.4 โครงสรางแบบใยแมงมม (Web Structure) เปนโครงสรางหนาเวบเพจท!สามารถจะเช!อมโยงกนทกหนา สามารถเขาสเน-อหาท!เปน

อสระ ผใชสามารถกาหนดวธการเขาสเน-อหาไดดวยตนเอง การเช!อมโยงแตละหนาใชไฮเปอรเทกซหรอไฮเปอรมเดย การจดรปแบบเปนลกษณะท!ไมมโครงสราง (Unstructured) นอกจากการเช!อมโยง ภายในเวบไซตแลวยงสามารถเช!อมโยงไปยงนอกเวบไซตได ขอเสยของการเช!อมโยงลกษณะน- คอ ถามการเพ!มเน-อหาใหมจะตองปรบปรงหนาเวบเพจทกหนา เพ!อใหสามารถเช!อมโยงถงกนได ตวอยางการออกแบบหนาเวบไซตโครงสรางแบบตาราง ดงรปท! 3.22

รปท� 3.22 โครงสรางหนาเวบไซตแบบใยแมงมม 5. การออกแบบระบบเนวเกช�น

ระบบเนวเกช!น (Navigation) หรอสวนนาทางผใชหรอ ลงค เพ!อเช!อมโยงไปยงหนาเวบ

เพจตางๆ ของเวบไซต หรอเช!อมโยงไปยงเวบไซตอ!นๆ ซ! งสวนนาทางสามารถเปนไดท-งขอความ รปภาพ หรอตาราง

5.1 รปแบบระบบเนวเกช�น ระบบเนวเกช!นแบงออกเปน 4 รปแบบ ดงน-

5.1.1 ระบบเนวเกช!นแบบลาดบช-น (Hierarchical) เปนระบบท!มการเช!อมโยงจากหนาโฮมเพจไปยงหนายอยอ!นๆ หรอยอนกลบข- นมาไดจากหนายอยมาหนาหลก ตวอยางเชน

Page 1

Page 2

Page 3

Page 4

Page 5

Page 6

71

เวบไซตใหความรเก!ยวกบการพฒนาเวบไซต โดยสรางเวบเพจแสดงข-นตอนแตละข-นตอน การเขาไปศกษาขอมลจาเปนตองเขาไปศกษาเน-อหาเรยงลาดบตามข-นตอน โดยหนาเวบเพจแตละหนาจะมการสรางเนวเกช!นแบบเรยงลาดบ จากหนาแรกไปยงหนาถดไป และยอนกลบไปหนากอนหนา โครงสรางของเวบไซตจะเปนโครงสรางแบบเรยงลาดบ หรอโครงสรางแบบลาดบช-น

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 ตวอยางระบบเนวเกช!นบาร

เนวเกช!นบาร

72

5.2.2 เนวเกช!นบารระบบเฟรม (Frame-Based) จะใชคณสมบตของเฟรมท!สามารถแบงหนาจอออกเปนหลายไฟลมาสรางเปนระบบเนวเกช!น โดยมเฟรมท!ทาหนาท!คมการแสดงผล ทาใหผใชเขาถงระบบเนวเกช!นไดตลอด ตวอยางดงรปท! 3.24

รปท� 3.24 ตวอยางเนวเกช!นบารระบบเฟรม

จากรปท! 3.24 สวนท! 1 คอ เฟรมแสดงเนวเกช!นบาร เม!อคลกเลอกรายการจากเนวเกช!น

บารจะนาหนาเวบเพจไปแสดงผลในสวนท! 2 ซ! งเปนเฟรมสาหรบแสดงผลโดยเฉพาะ ดงน-นเฟรมในสวนท! 1 จะไมมการเปล!ยนแปลงใดๆ

5.2.3 เนวเกช!นแบบ Pull down Menu เปนเนวเกช!นท!มรายการยอยจากรายการหลก เม!อผใชนาเมาสไปวางเหนอตาแหนงของรายการหลก จะปรากฏรายการยอยออกมาใหเลอกโดยแสดงผลในลกษณะจากบนลงลาง เหมาะสาหรบเวบเพจท!ไมมพ-นท!ใหจดวางเนวเกช!น ตวอยางดงรปท! 3.25

รปท� 3.25 ตวอยางระบบเนวเกช!นแบบ Pull down Menu

1 2

73

5.2.4 เนวเกช!นแบบ Pop-Up Menu เปนเนวเกช!นท!มรายการหรอรายการยอยใหเลอก เม!อผใชนาเมาสไปวางเหนอตาแหนงของวตถใดๆ บนเวบเพจ ตวอยางดงรปท! 3.26

รปท� 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 ระบบสบคนขอมลภายในเวบไซต

74

5.3 องคประกอบของระบบเนวเกช�นเสรม เปนสวนชวยทาใหสามารถทองเขาไปในเวบไซตไดอยางสะดวก ไดแก

5.3.1 ระบบสารบญ (Table Contents) เปนการแสดงรายการขอมลท-งหมดภายในเวบไซต โดยแบงเน-อหาออกเปนหมวดหมและเช!อมโยงไปยงเวบเพจน-น ตวอยางเชนเวบไซต www.msn.com ท!มการจดหมวดหมเน-อหา เพ!อใหผใชเลอกตามความตองการดงรปท! 3.28

รปท� 3.28 แสดงตวอยางระบบสารบญของเวบไซต www.msn.com

75

5.3.2 ระบบดชน (Index System) เปนการนาเอาคาหรอขอความมาจดเรยงตามตวอกษรเพ!อใหผใชสามารถใชงานไดงาย ตวอยางดงรปท! 3.29

รปท� 3.29 แสดงตวอยางระบบดชน

5.3.3 แผนท!เวบไซต (Site Map) เปนการแสดงโครงสรางขอมลในเวบไซตแบบกราฟก เพ!อความสวยงามและส!อความหมายของเน-อหา ทาใหเขาใจไดงาย ผใชสามารถคลกเลอกหนาเวบเพจในแผนท!เวบไซตเพ!อนาทางไปสหนาเวบเพจน-นๆ โดยไมตองผานหนาโฮมเพจ หรอหนาเวบเพจหลก ตวอยางดงรปท! 3.30

รปท� 3.30 ตวอยางแผนท!เวบไซต

76

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.| มรปแบบท!ส!อความหมาย ควรออกแบบระบบเนวเกช!นท!ส!อความหมายถงเน-อหาภายในเวบไซต

5.5.8 มคาอธบายท!ชดเจนและเขาใจไดงาย ไมควรใชคาเฉพาะหรอคายอท!เขาใจยาก 5.5.9 มความเหมาะสมกบวตถประสงคของเวบไซต 5.5.10 สนบสนนเปาหมายและพฤตกรรมของผใช

77

6. บทสรป

ในการออกแบบเวบไซตท!ด จะทาใหเวบไซตท!พฒนาออกมามคณภาพนาเย!ยมชม ส! ง

สาคญในการออกแบเวบไซต นอกจากเน-อหาในเวบไซตแลว กคอ สท!ใชตกแตงเวบไซต เพราะสจะชกนาความสนใจของผเย!ยมชม สสามารถส!อถงอารมณท!ตองการนาเสนอใหกบผเย!ยมชมได หากเวบไซตใดออกแบบโดยใชสท!เหมาะสมกจะทาใหผเย!ยมชมเกดความเพลดเพลน และอกปจจยหน!งท!ทาใหเวบไซตมความนาสนใจคอตวอกษรและรปภาพท!นามาตกแตงเวบไซต ควรจะเลอกใชใหเหมาะสมเพ!อใหเวบไซตมความสวยงาม อกท-งเวบไซตท!ดจะตองมระบบนาทางในการเย!ยมชมเน-อหาของเวบไซตท!ด หรอเรยกวา เนวเกช!น ซ! งจะเปนส!งท!ชวยทาใหผใชเขาถงขอมลท!ตองการ

7. แบบฝกหดทายบท

1. จงอธบายประโยชนของสในเวบไซตมาใหพอเขาใจ 2. จงอธบายประโยชนการออกแบบเวบไซตโดยการใชชดสรอน ชดสเยน ชดสตรงขาม

ชดสแบบสเดยว ชดสแบบสามเสา และชดสคลายกน 3. จงระบความหมายกบความรสกของสแดง สน-าเงน สเขยว สเหลอง สดา และสขาว 4. จงอธบายการใชสใหเกดประโยชนกบเวบไซต 5. จงอธบายระบบสในเวบไซต 6. หากตองการตกแตงเวบไซตดวยรปภาพท!มความโปรงใสควรใชรปภาพชนดใด 7. อธบายขอดของภาพเวกเตอร 8. จงอธบายรปแบบโครงสรางหนาเวบไซต มาพอเขาใจ 9. จงยกตวอยางเวบไซตพรอมรปภาพประกอบท!ใชระบบเนวเกช!น ระบบเนวเกช!นบาร

เนวเกช!นแบบ Pull down Menu เนวเกช!นแบบ Pop-Up Menu อยางละ 3 เวบไซต 10. จงยกตวอยางเวบไซตพรอมรปภาพประกอบท!ใชระบบ Search Box จานวน 3

เวบไซต

78

8. เอกสารอางอง

กองบรรณาธการ. ออกแบบ สรางและโปรโมต Website ฉบบสมบรณ. กรงเทพฯ: รไววา, 2556. ธวชชย ศรสเทพ. คมภร Web Design. กรงเทพฯ: โปรวช!น, 2544. พนจนทร ธนวฒนเสถยร. ออกแบบ และสรางเวบไซตฉบบสมบรณ. กรงเทพฯ: ซคเซสมเดย, 2551. เกยรตพงษ บญจตร. คมอ Dreamweaver CS6 Professional Guide ฉบบสมบรณ. นนทบร:

ไอดซฯ, 2556