บทที่ 6 การออกแบบเว็บเพจเบื้องต้น
หลักการออกแบบเว็บ
- การออกแบบและพัฒนาเว็บเพจ สามารถทำได้หลายระบบ ขึ้นอยู่กับลักษณะของข้อมูล ความชอบของ ผู้พัฒนา ตลอดจนกลุ่มเป้าหมายที่ต้องการนำเสนอ เช่น หากกลุ่มเป้าหมายเป็นเด็กวัยรุ่น และนำเสนอ ข้อมูลเกี่ยวกับความบันเทิง อาจจะออกแบบให้มีทิศทางการไหลของหน้าเว็บที่หลากหลายใช้ลูกเล่นได้มากกว่าเว็บ ที่นำเสนอให้กับผู้ใหญ่ หรือเว็บด้านวิชาการ ทั้งนี้หลักการออกแบบเว็บเพจ สามารถแบ่งได้สามลักษณะ คือ
แบบลำดับขั้น ( Hierarchy ) เป็นการจัดแสดงหน้าเว็บเรียงตามลำดับกิ่งก้าน
แตกแขนงต่อเนื่องไปเหมือนต้นไม้กลับหัว เหมาะสำหรับการนำเสนอข้อมูล
ที่มีการแบ่งเป็นหมวดหมู่ที่ไม่มากนัก และมีข้อมูลย่อยไม่ลึกมาก เช่นเว็บไซต์แนะนำ
ประวัติส่วนตัว ที่มีข้อมูล 4 - 5 หน้าเป็นต้น
แบบเชิงเส้น
( Linear ) เป็นการจัดแสดงหน้าเว็บเรียงต่อเนื่องไปในทิศทางเดียว
เหมาะสำหรับการ
นำเสนอข้อมูลที่เป็นรูปภาพ
เช่นเว็บไซต์นำเสนอสไลด์จาก Microsoft PowerPoint
แบบผสม
( Combination ) เป็นการจัดหน้าเว็บชนิดผสมระหว่างแบบลำดับขั้น
และแบบเชิงเส้น มักจะเป็นแบบที่นิยมใช้กันอย่างแพร่หลายในปัจจุบัน เนื่องจากสามารถควบคุมการนำเสนอและการเรียกดูได้สะดวก
และรวดเร็ว
องค์ประกอบของการออกแบบเว็บไซต์
1.
ความเรียบง่าย (Simplicity) หมาย ถึง การจำกัดองค์ประกอบเสริมให้เหลือเฉพาะองค์ประกอบหลัก
กล่าวคือในการสื่อสารเนื้อหากับผู้ใช้นั้น
เราต้องเลือกเสนอสิ่งที่เราต้องการนำเสนอจริง ๆ ออกมาในส่วนของกราฟิก สีสัน
ตัวอักษรและภาพเคลื่อนไหว ต้องเลือกให้พอเหมาะ
ถ้าหากมีมากเกินไปจะรบกวนสายตาและสร้างความคำราญต่อผู้ใช้ตัวอย่างเว็บไซต์ ที่ได้รับการออกแบบที่ดี
ได้แก่ เว็บไซต์ของบริษัทใหญ่ ๆ อย่างเช่น Apple Adobe Microsoft หรือ Kokia ที่มีการออกแบบเว็บไซต์ในรูปแบบที่เรียบง่าย ไม่ซับซ้อน
และใช้งานอย่างสะดวก
2.
ความสม่ำเสมอ ( Consistency) หมาย ถึง
การสร้างความสม่ำเสมอให้เกิดขึ้นตลอดทั้งเว็บไซต์
โดยอาจเลือกใช้รูปแบบเดียวกันตลอดทั้งเว็บไซต์ก็ได้
เพราะถ้าหากว่าแต่ละหน้าในเว็บไซต์นั้นมีความแตกต่างกันมากจนเกินไป
อาจทำให้ผู้ใช้เกิดความสับสนและไม่แน่ใจว่ากำลังอยู่ในเว็บไซต์เดิมหรือไม่
เพราะฉะนั้นการออกแบบเว็บไซต์ในแต่ละหน้าควรที่จะมีรูปแบบ สไตล์ของกราฟิก
ระบบเนวิเกชั่น (Navigation) และโทนสีที่มีความคล้ายคลึงกันตลอดทั้งเว็บไซต์
3.
ความเป็นเอกลักษณ์ (Identity) ใน การออกแบบเว็บไซต์ต้องคำนึงถึงลักษณะขององค์กรเป็นหลัก
เนื่องจากเว็บไซต์จะสะท้อนถึงเอกลักษณ์และลักษณะขององค์กร การเลือกใช้ตัวอักษร
ชุดสี รูปภาพหรือกราฟิก จะมีผลต่อรูปแบบของเว็บไซต์เป็นอย่างมาก ตัวอย่างเช่น
ถ้าเราต้องออกแบบเว็บไซต์ของธนาคารแต่เรากลับเลือกสีสันและกราฟิกมากมาย
อาจทำให้ผู้ใช้คิดว่าเป็นเว็บไซต์ของสวนสนุกซึ่งส่งผลต่อความเชื่อถือของ องค์กรได้
4.
เนื้อหา (Useful Content) ถือ เป็นสิ่งสำคัญที่สุดในเว็บไซต์
เนื้อหาในเว็บไซต์ต้องสมบูรณ์และได้รับการปรับปรุงพัฒนาให้ทันสมัยอยู่เสมอ
ผู้พัฒนาต้องเตรียมข้อมูลและเนื้อหาที่ผู้ใช้ต้องการให้ถูกต้องและสมบูรณ์
เนื้อหาที่สำคัญที่สุดคือเนื้อหาที่ทีมผู้พัฒนาสร้างสรรค์ขึ้นมาเอง
และไม่ไปซ้ำกับเว็บอื่น
เพราะจะถือเป็นสิ่งที่ดึงดูดผู้ใช้ให้เข้ามาเว็บไซต์ได้เสมอ
แต่ถ้าเป็นเว็บที่ลิงค์ข้อมูลจากเว็บอื่น ๆ มาเมื่อใดก็ตามที่ผู้ใช้ทราบว่า
ข้อมูลนั้นมาจากเว็บใด ผู้ใช้ก็ไม่จำเป็นต้องกลับมาใช้งานลิงค์เหล่านั้นอีก
5.
ระบบเนวิเกชั่น (User-Friendly Navigation) เป็น
ส่วนประกอบที่มีความสำคัญต่อเว็บไซต์มาก
เพราะจะช่วยไม่ให้ผู้ใช้เกิดความสับสนระหว่างดูเว็บไซต์
ระบบเนวิเกชั่นจึงเปรียบเสมือนป้ายบอกทาง ดังนั้นการออกแบบเนวิเกชั่น
จึงควรให้เข้าใจง่าย ใช้งานได้สะดวก ถ้ามีการใช้กราฟิกก็ควรสื่อความหมาย
ตำแหน่งของการวางเนวิเกชั่นก็ควรวางให้สม่ำเสมอ เช่น
อยู่ตำแหน่งบนสุดของทุกหน้าเป็นต้น
ซึ่งถ้าจะให้ดีเมื่อมีเนวิเกชั่นที่เป็นกราฟิกก็ควรเพิ่มระบบเนวิเกชั่นที่
เป็นตัวอักษรไว้ส่วนล่างด้วย
เพื่อช่วยอำนวยความสะดวกให้กับผู้ใช้ที่ยกเลิกการแสดงผลภาพกราฟิกบนเว็บเบราเซอร์
6.
คุณภาพของสิ่งที่ปรากฏให้เห็นในเว็บไซต์ (Visual Appeal)ลักษณะ ที่น่าสนใจของเว็บไซต์นั้น
ขึ้นอยู่กับความชอบส่วนบุคคลเป็นสำคัญ
แต่โดยรวมแล้วก็สามารถสรุปได้ว่าเว็บไซต์ที่น่าสนใจนั้นส่วนประกอบต่าง ๆ
ควรมีคุณภาพ เช่น กราฟิกควรสมบูรณ์ไม่มีรอยหรือขอบขั้นบันได้ให้เห็น
ชนิดตัวอักษรอ่านง่ายสบายตา มีการเลือกใช้โทนสีที่เข้ากันอย่างสวยงาม เป็นต้น
7.
ความสะดวกของการใช้ในสภาพต่าง ๆ (Compatibility) การ
ใช้งานของเว็บไซต์นั้นไม่ควรมีขอบจำกัด กล่าวคือ
ต้องสามารถใช้งานได้ดีในสภาพแวดล้อมที่หลากหลาย
ไม่มีการบังคับให้ผู้ใช้ต้องติดตั้งโปรแกรมอื่นใดเพิ่มเติม
นอกเหนือจากเว็บบราวเซอร์ ควรเป็นเว็บที่แสดงผลได้ดีในทุกระบบปฏิบัติการ
สามารถแสดงผลได้ในทุกความละเอียดหน้าจอ
ซึ่งหากเป็นเว็บไซต์ที่มีผู้ใช้บริการมากและกลุ่มเป้าหมายหลากหลายควรให้
ความสำคัญกับเรื่องนี้ให้มาก
8.
ความคงที่ในการออกแบบ (Design Stability) ถ้า ต้องการให้ผู้ใช้งานรู้สึกว่าเว็บไซต์มีคุณภาพ
ถูกต้อง และเชื่อถือได้ ควรให้ความสำคัญกับการออกแบบเว็บไซต์เป็นอย่างมาก
ต้องออกแบบวางแผนและเรียบเรียงเนื้อหาอย่างรอบคอบ ถ้าเว็บที่จัดทำขึ้นอย่างลวก ๆ
ไม่มีมาตรฐานการออกแบบและระบบการจัดการข้อมูล
ถ้ามีปัญหามากขึ้นอาจส่งผลให้เกิดปัญหา
9.
ความคงที่ของการทำงาน (Function Stability) ระบบ การทำงานต่าง ๆ
ในเว็บไซต์ควรมีความถูกต้องแน่นอน
ซึ่งต้องได้รับการออกแบบสร้างสรรค์และตรวจสอบอยู่เสมอ ตัวอย่างเช่น ลิงค์ต่าง ๆ
ในเว็บไซต์ ต้องตรวจสอบว่ายังสามารถลิงค์ข้อมูลได้ถูกต้องหรือไม่
เพราะเว็บไซต์อื่นอาจมีการเปลี่ยนแปลงได้ตลอดเวลา ปัญหาที่เกิดจากลิงค์ ก็คือ
ลิงค์ขาด ซึ่งพบได้บ่อยเป็นปัญหาที่สร้างความรำคาญกับผู้ใช้เป็นอย่างมาก
_________________________________________
บทที่
7 การออกแบบเว็บไซต์ให้เหมาะกับสิ่งแวดล้อม
ปัจจัยหลักที่เกี่ยวข้องกับการท่องเว็บไซต์
1. เบราเซอร์ที่ใช้
- เบราเซอร์ คือ โปรแกรที่ใช้เรียกดูเว็บ สามารถแสดงได้ทั้งตัวอักษร รูปภาพ และภาพเคลื่อนไหว เบราเซอร์ที่ได้ความนิยม เช่น Google Chrome , IE, Opera มาตรฐานกลางของเบราเซอร์ คือ W3C
- เป็นองค์กรที่กำหนดคุณสมบัติของเบราเซอร์ เราควรออกแบบตามคุณสมบัติดังนี้
- สามารถใช้ได้กลับเบราเซอร์ได้ทุกรุ่น
- เว็บไซต์สำหรับเบราเซอร์รุ่นล่าสุด
- เว็บไซต์ตามความสามารถของเบราเซอร์
- เว็บไซต์ที่มีหลายรูปแบบ
2. ระบบปฏิบัติการของคอมพิวเตอร์
- เป็นระบบที่เป็นปัจจัยหลักต่อ มีผลต่อการทำง่านของเบราเซอร์มาก โดยแต่ละระบบปฏิบัติการจะมีความแตกต่างกันในเรื่องของชนิดและรุ่นของ เบราเซอร์ที่ใช้ได้ ระดับความละเอียดของหน้าจอ ชุดสีของระบบ และชนิดของตัวอักษรที่มาพร้อมกับระบบ
3. ความละเอียดของหน้าจอ
- ความละเอียดของหน้าจอ (monitor resolution)มีหน่วยเป้น pixel ความละเอียดของหน้าจอไม่ขึ้นกับขนาดของมอนิเตอร์ที่ใช้
4. จำนวนสีที่จอของผู้ใช้สามารถแสดงได้
- มอนิเตอร์มีความสามารถใหการแสดงสีแตกต่างกน ขึ้นอยู่กับประสิทธิภาพของการ์ดจอ จำนวนหน่วยความจำในการ์ดจอมากขึ้นจะทำให้สามารถแสดงสีได้มากขึ้น จำนวนสีที่การ์ดจอสามารถแสดงได้นั้น ขึ้นอยู่กับค่าความละเอียดของสีที่เรียกว่า bit depth and color depth ซึ่งก็คือจำนวนบิตที่ใช้ในการเก็บข้อมูลแค่ละพิกเซล
- ขุดสีสำหรับเว็บ (Web palette) หมายถึว ชุดสีจำนวน 216 สีที่มีอยู่เหมือนกันในระบบปฏิบัติการ Windows and Mac
5. ชนิดของตัวอักษรที่มีอยู่ในเครื่อง
ชนิดของตัวอักษรมี
2 แบบ
- MS Sans Serif VS Microsoft Sans Serif
- MS Sans Serif เป็นฟอนต์แบบชิตแมท ซึ่งออกแบบขึ้นจากจุดของพิกเซล โดยมีการออกแบบแต่ละตัวอักษรไว้เป็นขนาดที่แน่นอน Microsoft Sans Serif เป็นฟอนด์ที่มีโครงสร้างของอักขระเป็นแบบเวคเตอร์หรือลายเส้น โอยมีกรออกแบบเอาท์ไลน์ไว้เพียงแบบเดียวแต่สามารถปรับขนาดได้อย่างไม่จำกัดตัวอักษรแบบกราฟิก (Graphic Text)
6. ความเร็วในการเชื่อมต่ออินเตอร์เน็ต
7. ความสว่างและค่าความต่างของโทนสี
__________________________________________
บทที่ 8 การเลือกใช้สีสำหรับเว็บไซต์
การเลือกใช้สีสำหรับเว็บไซต์
1.เลือกใช้สีสำหรับเว็บไซต์
- สีสันในเว็บเพจเป็นสิ่งสำคัญมากในการดึงดูดความสนในของผู้ใช้
- สามารถเลือกใช้สีได้กับทุกองค์ประกอบของเว็บเพจ
- ใช้สีพื้นหลังใกล้เคียงกับสีตัวอักษร อาจสร้างความลำบากในการอ่าน
- ใช้สีมากเกินความจำเป็นอาจสร้างความสับสนให้กับผู้อ่านได้
- การใช้สีกลมกลืนกันช่วยให้เว็บไซต์น่าดูน่าชมมากขึ้น
2.ประโยชน์ของสีในเว็บไซต์
- สามารถชักนำสายตาผู้อ่านให้ไปยังทุกบริเวณในหน้าเว็บเพจที่เราต้องการได้
- สีช่วยเชื่อมโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน
- ใช้ในการดึงดูดความสนในของผู้อ่าน
- สร้างอารมณ์โดยรวมของเว็บเพจได้
- ช่วยสร้างความเป็นระเบียบให้กับข้อความต่าง ๆ ได้
- ส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานได้
3.การผสมสี (Color Mixing)
- การผสมสีแบบบวก (Additive mixing) จะเป็นรูปแบบการผสมของแสง ไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษ
- การผสมสีแบบลบ (Subtraction mixing) จะไม่เกี่ยวข้องกับแสงแต่จะเกี่ยวข้องกับการดูดกลืนและสะท้อน แสงของวัตถุต่าง ๆ
- การผสมแบบบวก จะนำไปใช้ในสื่อใด ๆ ที่ใช้แสงส่องออกมา เช่น จอโปรเจ็คเตอร์ ทีวี
- การผสมแบบลบ จะนำไปใช้ในสื่อที่เกี่ยวข้องกับการใช้วัตถุมีสี เช่น ภาพวาดของศิลปิน รูปปั้น
4.วง
- ล้อของสี (Color Wheel)
- เป็นรูปแบบการจัดลำดับเฉดสีอย่างมีเหตุผลและก็ง่ายต่อการนำไปใช้งาน จะมี 2 แบบ คือ วงล้อสีแบบลบ กับ วงล้อสีแบบบวก
- สีที่เป็นกลาง(Neutral Color) สีกลุ่มหนึ่งที่ไม่ได้ถูกบรรจุไว้ในวงล้อสี เพราะเป็นสีที่ไม่ได้รับอิทธิพลมากกว่าสีอื่น คือ สีเทา สีขาว สีดำ สีอ่อน สีเข้ม และโทนสี(Tint Shade and Tone)
5.การผสมสีกลางเข้ากับสีบริสุทธิ์
- จะเกิดเป็นสีต่าง ๆ เช่น สีบริสุทธิ์ผสมกับสีขาว จะได้เป็นสี อ่อน , สีบริสุทธิ์ ผสมกับสีเทา จะได้โทนสีระดับต่าง ๆ , สีบริสุทธิ์ผสมกับสีดำ จะได้เป็นสีเข้ม สีอ่อน สีเข้ม และโทนสี จะช่วยทำให้สามารถแสดงออกถึงความรู้สึกได้หลายแบบ
6.ความกลมกลืนของสี (Color
Harmony)
- การใช้สีที่จืดชืดเกินไป จะทำให้เกิดความรู้สึกที่น่าเบื่อ และไม่สามารถดึงดูดความสนใจจากผู้ชมได้
- การใช้สีมากเกินไป ก็จะดูวุ่นวาย ขาดระเบียบ และอาจสร้างความสับสนให้กับผู้ชม
7.รูปแบบชุดสีพื้นฐาน
- ชุดสีร้อน (Warm Color Scheme) จะสร้างความรู้สึกอบอุ่น สบาย และรู้สึกต้อนรับแก่ผู้ชม
- ชุดสีเย็น(Cool Color Scheme) จะทำให้รู้สึกเย็นสบาย ดูสุภาพ เรียบร้อย และตามหลักจิตวิทยาจะทำให้ดูเศร้า
- ชุดสีแบบเดียว(Monochromatic Color Scheme) เป็นรูปแบบสีที่ง่ายที่สุด จะทำให้ขาดความสนใจจากผู้ชม
- ชุดสีแบบสามเส้า(Tricia Color Scheme) เป็นชุดสีที่อยู่ที่มุมของสามเหลี่ยมด้านเท่าทั้งสาม จะทำให้รู้สึกว่า หน้าเว็บดูมีชีวิตชีวา
- ชุดสีคลายคลึงกัน(Analogous Color Scheme) ประกอบด้วยสี 2 หรือ 3 สีที่อยู่ติดกันในวงล้อ เช่น โทน ส้ม- เหลือง จะให้บรรยากาศต้อนรับและความอบอุ่น
- ชุดสีตรงข้าม(Com;commentary Color Scheme) เช่น เว็บไซต์ที่ใช้สีน้ำเงินและส้มเป็นสีหลัก ซึ่งจะเป็นคู่สีที่ ตรงข้ามที่ตัดกันอย่างสะดุดตา
- ชุดสีตรงข้ามข้างเคียง(Split Complementary Color Scheme) เป็นชุดสีที่เปลี่ยนแปลงมาจากชุดสีตรงข้าม
- ชุดสีตรงข้ามข้างเคียงทั้ง 2 ด้าน (Double Split Complementary Color Scheme) จะมีความหลากหลายของสี มากขึ้น แต่จะสร้างความสดใสและความกลมกลืนของสีที่ลดลง ผลทางจิตวิทยาที่มีต่อสี (Color Psychology) มนุยษ์เราจะตอบสนองต่อสีด้วยจิตใจ ไม่ใช่สมอง
8.สีกับอารมณ์ ความรู้สึก
และความสัมพันธ์กับสิ่งต่าง ๆ
- สีแดง คือ ความมีพลัง อำนาจ ความรัก ความอบอุ่น
- สีน้ำเงิน คือ ความซื่อสัตย์ ความมั่นคง ความปลอดภัย
- สีเขียว คือธรรมชาติ ความอบอุ่น การเริ่มต้นใหม่
- สีเหลือง คือ ความสดใส่ ร่าเริง การมองโลกในแง่ดี
- สีน้ำตาล คือ ความสะดวกสบาย ความมั่นคง ความน่าเชื่อถือ
- สีขาว คือ ความบริสุทธิ์ ความไร้เรียงสา ความฉลาด
- สีดำ คือ อำนาจ ความฉลาด ความเป็นเลิศ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น