บทที่ 6 การออกแบบเว็บเพจเบื้องต้น
หลักการออกแบบเว็บเพจ
หลักการออกแบบเว็บเพจ การออกแบบและพัฒนาเว็บเพจ สามารถทำได้หลายระบบ ขึ้นอยู่กับลักษณะของข้อมูล ความชอบของผู้พัฒนา ตลอดจนกลุ่มเป้าหมายที่ต้องการนำเสนอ เช่น หากกลุ่มเป้าหมายเป็นเด็กวัยรุ่น และนำเสนอ ข้อมูลเกี่ยวกับความบันเทิง อาจจะออกแบบให้มีทิศทางการไหลของหน้าเว็บที่หลากหลายใช้ลูกเล่นได้มากกว่าเว็บ ที่นำเสนอให้กับผู้ใหญ่ หรือเว็บด้านวิชาการ ทั้งนี้หลักการออกแบบเว็บเพจ สามารถแบ่งได้สามลักษณะ คือ
แบบลำดับขั้น ( Hierarchy ) เป็นการจัดแสดงหน้าเว็บเรียงตามลำดับกิ่งก้าน แตกแขนงต่อเนื่องไปเหมือนต้นไม้กลับหัว เหมาะสำหรับการนำเสนอข้อมูล ที่มีการแบ่งเป็นหมวดหมู่ที่ไม่มากนัก และมีข้อมูลย่อยไม่ลึกมาก เช่นเว็บไซต์แนะนำ ประวัติส่วนตัว ที่มีข้อมูล 4 - 5 หน้าเป็นต้น
แบบเชิงเส้น ( Linear ) เป็นการจัดแสดงหน้าเว็บเรียงต่อเนื่องไปในทิศทางเดียว เหมาะสำหรับการนำเสนอข้อมูลที่เป็นรูปภาพ เช่นเว็บไซต์นำเสนอสไลด์จาก Microsoft PowerPoint
แบบผสม ( Combination ) เป็นการจัดหน้าเว็บชนิดผสมระหว่างแบบลำดับขั้น และแบบเชิงเส้น มักจะเป็นแบบที่นิยมใช้กันอย่างแพร่หลายในปัจจุบัน เนื่องจากสามารถควบคุมการนำเสนอและการเรียกดูได้สะดวก และรวดเร็ว
องค์ประกอบของการออกแบบเว็บไซต์
- ความเรียบง่าย (Simplicity) หมาย ถึง การจำกัดองค์ประกอบเสริมให้เหลือเฉพาะองค์ประกอบหลัก กล่าวคือในการสื่อสารเนื้อหากับผู้ใช้นั้น เราต้องเลือกเสนอสิ่งที่เราต้องการนำเสนอจริง ๆ ออกมาในส่วนของกราฟิก สีสัน ตัวอักษรและภาพเคลื่อนไหว ต้องเลือกให้พอเหมาะ ถ้าหากมีมากเกินไปจะรบกวนสายตาและสร้างความคำราญต่อผู้ใช้ตัวอย่างเว็บไซต์ ที่ได้รับการออกแบบที่ดี ได้แก่ เว็บไซต์ของบริษัทใหญ่ ๆ อย่างเช่น Apple Adobe Microsoft หรือ Kokia ที่มีการออกแบบเว็บไซต์ในรูปแบบที่เรียบง่าย ไม่ซับซ้อน และใช้งานอย่างสะดวก
- ความสม่ำเสมอ ( Consistency) หมาย ถึง การสร้างความสม่ำเสมอให้เกิดขึ้นตลอดทั้งเว็บไซต์ โดยอาจเลือกใช้รูปแบบเดียวกันตลอดทั้งเว็บไซต์ก็ได้ เพราะถ้าหากว่าแต่ละหน้าในเว็บไซต์นั้นมีความแตกต่างกันมากจนเกินไป อาจทำให้ผู้ใช้เกิดความสับสนและไม่แน่ใจว่ากำลังอยู่ในเว็บไซต์เดิมหรือไม่ เพราะฉะนั้นการออกแบบเว็บไซต์ในแต่ละหน้าควรที่จะมีรูปแบบ สไตล์ของกราฟิก ระบบเนวิเกชั่น (Navigation) และโทนสีที่มีความคล้ายคลึงกันตลอดทั้งเว็บไซต์
- ความเป็นเอกลักษณ์ (Identity) ใน การออกแบบเว็บไซต์ต้องคำนึงถึงลักษณะขององค์กรเป็นหลัก เนื่องจากเว็บไซต์จะสะท้อนถึงเอกลักษณ์และลักษณะขององค์กร การเลือกใช้ตัวอักษร ชุดสี รูปภาพหรือกราฟิก จะมีผลต่อรูปแบบของเว็บไซต์เป็นอย่างมาก ตัวอย่างเช่น ถ้าเราต้องออกแบบเว็บไซต์ของธนาคารแต่เรากลับเลือกสีสันและกราฟิกมากมาย อาจทำให้ผู้ใช้คิดว่าเป็นเว็บไซต์ของสวนสนุกซึ่งส่งผลต่อความเชื่อถือของ องค์กรได้
- เนื้อหา (Useful Content) ถือ เป็นสิ่งสำคัญที่สุดในเว็บไซต์ เนื้อหาในเว็บไซต์ต้องสมบูรณ์และได้รับการปรับปรุงพัฒนาให้ทันสมัยอยู่เสมอ ผู้พัฒนาต้องเตรียมข้อมูลและเนื้อหาที่ผู้ใช้ต้องการให้ถูกต้องและสมบูรณ์ เนื้อหาที่สำคัญที่สุดคือเนื้อหาที่ทีมผู้พัฒนาสร้างสรรค์ขึ้นมาเอง และไม่ไปซ้ำกับเว็บอื่น เพราะจะถือเป็นสิ่งที่ดึงดูดผู้ใช้ให้เข้ามาเว็บไซต์ได้เสมอ แต่ถ้าเป็นเว็บที่ลิงค์ข้อมูลจากเว็บอื่น ๆ มาเมื่อใดก็ตามที่ผู้ใช้ทราบว่า ข้อมูลนั้นมาจากเว็บใด ผู้ใช้ก็ไม่จำเป็นต้องกลับมาใช้งานลิงค์เหล่านั้นอีก
- ระบบเนวิเกชั่น (User-Friendly Navigation) เป็น ส่วนประกอบที่มีความสำคัญต่อเว็บไซต์มาก เพราะจะช่วยไม่ให้ผู้ใช้เกิดความสับสนระหว่างดูเว็บไซต์ ระบบเนวิเกชั่นจึงเปรียบเสมือนป้ายบอกทาง ดังนั้นการออกแบบเนวิเกชั่น จึงควรให้เข้าใจง่าย ใช้งานได้สะดวก ถ้ามีการใช้กราฟิกก็ควรสื่อความหมาย ตำแหน่งของการวางเนวิเกชั่นก็ควรวางให้สม่ำเสมอ เช่น อยู่ตำแหน่งบนสุดของทุกหน้าเป็นต้น ซึ่งถ้าจะให้ดีเมื่อมีเนวิเกชั่นที่เป็นกราฟิกก็ควรเพิ่มระบบเนวิเกชั่นที่ เป็นตัวอักษรไว้ส่วนล่างด้วย เพื่อช่วยอำนวยความสะดวกให้กับผู้ใช้ที่ยกเลิกการแสดงผลภาพกราฟิกบนเว็บเบราเซอร์
- คุณภาพของสิ่งที่ปรากฏให้เห็นในเว็บไซต์ (Visual Appeal)ลักษณะ ที่น่าสนใจของเว็บไซต์นั้น ขึ้นอยู่กับความชอบส่วนบุคคลเป็นสำคัญ แต่โดยรวมแล้วก็สามารถสรุปได้ว่าเว็บไซต์ที่น่าสนใจนั้นส่วนประกอบต่าง ๆ ควรมีคุณภาพ เช่น กราฟิกควรสมบูรณ์ไม่มีรอยหรือขอบขั้นบันได้ให้เห็น ชนิดตัวอักษรอ่านง่ายสบายตา มีการเลือกใช้โทนสีที่เข้ากันอย่างสวยงาม เป็นต้น
- ความสะดวกของการใช้ในสภาพต่าง ๆ (Compatibility) การ ใช้งานของเว็บไซต์นั้นไม่ควรมีขอบจำกัด กล่าวคือ ต้องสามารถใช้งานได้ดีในสภาพแวดล้อมที่หลากหลาย ไม่มีการบังคับให้ผู้ใช้ต้องติดตั้งโปรแกรมอื่นใดเพิ่มเติม นอกเหนือจากเว็บบราวเซอร์ ควรเป็นเว็บที่แสดงผลได้ดีในทุกระบบปฏิบัติการ สามารถแสดงผลได้ในทุกความละเอียดหน้าจอ ซึ่งหากเป็นเว็บไซต์ที่มีผู้ใช้บริการมากและกลุ่มเป้าหมายหลากหลายควรให้ ความสำคัญกับเรื่องนี้ให้มาก
- ความคงที่ในการออกแบบ (Design Stability) ถ้า ต้องการให้ผู้ใช้งานรู้สึกว่าเว็บไซต์มีคุณภาพ ถูกต้อง และเชื่อถือได้ ควรให้ความสำคัญกับการออกแบบเว็บไซต์เป็นอย่างมาก ต้องออกแบบวางแผนและเรียบเรียงเนื้อหาอย่างรอบคอบ ถ้าเว็บที่จัดทำขึ้นอย่างลวก ๆ ไม่มีมาตรฐานการออกแบบและระบบการจัดการข้อมูล ถ้ามีปัญหามากขึ้นอาจส่งผลให้เกิดปัญหา
- ความคงที่ของการทำงาน (Function Stability) ระบบ การทำงานต่าง ๆ ในเว็บไซต์ควรมีความถูกต้องแน่นอน ซึ่งต้องได้รับการออกแบบสร้างสรรค์และตรวจสอบอยู่เสมอ ตัวอย่างเช่น ลิงค์ต่าง ๆ ในเว็บไซต์ ต้องตรวจสอบว่ายังสามารถลิงค์ข้อมูลได้ถูกต้องหรือไม่ เพราะเว็บไซต์อื่นอาจมีการเปลี่ยนแปลงได้ตลอดเวลา ปัญหาที่เกิดจากลิงค์ ก็คือ ลิงค์ขาด ซึ่งพบได้บ่อยเป็นปัญหาที่สร้างความรำคาญกับผู้ใช้เป็นอย่างมาก
_____________________________________________________________________
บทที่ 7 การออกแบบเว็บไซต์ให้เหมาะกับสิ่งแวดล้อม
ปัจจัยหลักที่เกี่ยวข้องกับการท่องเว็บไซต์
1. เบราเซอร์ที่ใช้
- เบราเซอร์ คือ โปรแกรที่ใช้เรียกดูเว็บ สามารถแสดงได้ทั้งตัวอักษร รูปภาพ และภาพเคลื่อนไหว เบราเซอร์ที่ได้ความนิยม เช่น Google Chrome , IE, Opera มาตรฐานกลางของเบราเซอร์ คือ W3C
- เป็นองค์กรที่กำหนดคุณสมบัติของเบราเซอร์ เราควรออกแบบตามคุณสมบัติดังนี้
- สามารถใช้ได้กลับเบราเซอร์ได้ทุกรุ่น
- เว็บไซต์สำหรับเบราเซอร์รุ่นล่าสุด
- เว็บไซต์ตามความสามารถของเบราเซอร์
- เว็บไซต์ที่มีหลายรูปแบบ
- เป็นระบบที่เป็นปัจจัยหลักต่อ มีผลต่อการทำง่านของเบราเซอร์มาก โดยแต่ละระบบปฏิบัติการจะมีความแตกต่างกันในเรื่องของชนิดและรุ่น ของ เบราเซอร์ที่ใช้ได้ ระดับความละเอียดของหน้าจอ ชุดสีของระบบ และชนิดของตัวอักษรที่มาพร้อมกับระบบ
- ความละเอียดของหน้าจอ (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)
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.สีกับอารมณ์ ความรู้สึก และความสัมพันธ์กับสิ่งต่าง ๆ
- สีแดง คือ ความมีพลัง อำนาจ ความรัก ความอบอุ่น
- สีน้ำเงิน คือ ความซื่อสัตย์ ความมั่นคง ความปลอดภัย
- สีเขียว คือธรรมชาติ ความอบอุ่น การเริ่มต้นใหม่
- สีเหลือง คือ ความสดใส่ ร่าเริง การมองโลกในแง่ดี
- สีน้ำตาล คือ ความสะดวกสบาย ความมั่นคง ความน่าเชื่อถือ
- สีขาว คือ ความบริสุทธิ์ ความไร้เรียงสา ความฉลาด
- สีดำ คือ อำนาจ ความฉลาด ความเป็นเลิศ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น