บทที่ 6 ออกแบบหน้าเว็บ
การออกแบบหน้าเว็บ
- หน้าเว็บหน้าแรกเป็นส่วนที่สำคัญมากเพราะมีหน้าที่
เป็นสื่อกลางให้ผู้ใช้เข้าถึงข้อมูลและระบบงานของเว็บนั้นได้
จัดระบบโครงสร้างข้อมูล Information Architectue
Phase 4 : ออกแบบและพัฒนาหน้าเว็บ(Visual Design)
ออกแบบลักษณะหน้าตาเว็บ
พัฒนาเว็บต้นแบบและข้อกำหนดสุดท้าย
สิ่งที่ได้รับ
1.ลักษณะหน้าตาของเว็บ
2.เว็บต้นแบบที่ใช้ในการพัฒนา
3.รูปแบบโครงสร้างของเว็บ
4.ข้อกำหนดในการพัฒนาเว็บ
หลักสำคัญในการออกแบบหน้าเว็บ
-คือการใช้รูปภาพและองค์ประกอบต่างๆ ร่วมกัน
เพื่อสื่อความหมายเกียวกับเนื้อหาหรือลักษณะ
สำคัญของเว็บให้น่าสนใจ บนพื้นฐานของความเรียบง่ายและสะดวกของผู้ใช้
แนวคิดในการออกแบบหน้าเว็บ
-เรียนรู้จากเว็บไซต์ต่างๆ
(สิ่งที่ได้คือรูปแบบและเทคนิคใหม่)
-ประยุทต์รูปแบบจากสิ่งพิมพ์
-ใช้แบบจำลองเปรียบเทียบ (Metaphor)
-ออกแบบบอย่างสร้างสรรค์
ใช้แบบจำลองเปรียบเทียบ (Metaphor)
การใช้แบบจำลองเปรียบเทียบคือ การใช้สิ่งที่คุ้นเคย
ในการอธิบายถึงสิ่งที่ไม่คุ้นเคย ไม่ว่าจะเป็นรูปภาพจาก
สิ่งพิมพ์หรือรูปแบบของร้านขายของ
สิ่งสำคัญ คือรูปแบบที่เลือกมาใช้ต้องมีลักษณะที่คน
ส่วนใหญ่คุ้นเคย เข้าใจง่าย สนับสนุนเนวคิดและ
ส่งเสริมกระบวนการสื่อสารของเว็บ
ลักษณะต่างๆ ของแบบจำลอง
การใช้แบบจำลองมีด้วยกัน 3 ประเภท ดังนี้
1.จำลองแบบการจัดระบบ (Organizational metaphor)
คือใช้ประโยชน์จากคงามคุ้นเคยของการจัดระบบที่คุ้นเคย เพื่อให้ผู้ใช้เข้าถึงโครงสร้าง
ในระบบใหม่ได้ ง่ายขึ้น เช่น เว็บร้านขายหนังสือ สามารถจำลองการแบ่งหมวด
หมู่หนังสือได้ตามที่ใช้ในร้านหนังสือจริง
2.จำลองการใช้งาน(Functional Metaphor)
คือเชื่อมโยงการใช้งานที่สามารถทำได้ในชีวิตจริงกับ การใช้งานบนเว็บ
เช่น เว็บของโรงภาพยนตร์ ที่ควรให้ผู้ใช้สามารถดู โปรแกรมหนัง จองที่นั่งล่วงหน้า
ได้เหมือนกันไป โรงภาพยนต์จริง
3.จำลองลักษณะที่มองเห็น (Visual Metaphor)
คือวิธีนี้จะเกี่ยวข้องกับสิ่งที่มีลักษณะที่ค้นเคยของคนทั่วไป
เช่น เว็บไซต์ เกี่ยวกับดนตรีที่ให้บริการฟังเพลงบนเว็บได้ การนำลักษณะของปุ่มเล่นเพลง ปิดเพลง
ที่ทุกคน รู้จักจาดเครื่องเสียงมาใช้ ทำให้เข้าใจง่ายและรวดเร็ว
หลักการออกแบบหน้าเว็บ
1.สร้างลำดับขั้นความสำคัญขององค์ประกอบ(Visual Hierarchy)
2.สร้างรูปแบบ บุคลิดและสไตล์
3.สร้างความสม่ำเสมอตลอดทั่วทั้งไซต์
4.จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้าเสมอ
5.สร้างจุดสนใจด้วยความแตกต่าง
6.จัดแต่งหน้าเว็บให้เป็นระเบียบและเรียบง่าย
7.ใช้กราฟิกอย่างเหมาะสม
1.สร้างลำดับชั้นความสำคัญขององค์ประกอบ(Visual Hierarchy)
จัดตำแหน่งและลำดับขององค์ประกอบ แสดงลำดับ
ความสำคัญของข้อมูลที่ต้องการให้ผู้ใช้ได้รับ เนื่องจาก
ภาษาส่วนใหญ่จะอ่านจากซ้ายไปขวา และจากบนลงล่าง
จึงควรจัดวางสิ่งที่สำคัญไว้ที่ส่วนบนหรือด้านซ้ายของหน้า
อยู่เสมอ เพื่อให้ผู้ใช้มองเห็นได้ก่อน
สีและความแตกต่างของสี แสดงถึงความสำคัญและ
ความสัมพันธ์ของสิ่งต่างๆ ภายในหน้า สีที่เด่นชัดเหมาะ
สำหรับองค์กรที่สำคัญมาก ส่วนองค์ประกอบที่ใช้สีเดียวกัน
ย่อมเสื่อมความมหายถึงความสัมพันธ์ที่ใกล้ชิดและความสำคัญ
ที่เท่าเทียวกัน การใช้สีที่แตกต่างกันอย่างชีเจนจะสามารถ
ดึงดูดความสนใจจากผู้ใช้ให้มองเห็นและตอบสองได้อย่างรวเร็ว
ภาพเคลื่อนไหว เป็นสิ่งที่ดึงดูดความสนใจได้เป็นอย่างดี
แต่จะต้องใช้อย่างจำกัดและระมัดระวังเพราะใช้สิ่ง
เคลื่อนไหวมากเกินไปจะทำให้จุดสนใจบนหน้าจอมาก
จนตัดสินใจได้ยากกว่าสิ่งไหนสำคัญ
2.สร้างรูปแบบ บุคลิก และสไตล์
รูปแบบ การเลือกรูปแบบเว็บที่เหมาะสมจะช่วยสร้าง
ความเข้าใจของผู้ใช้ได้ดีขึ้น
บคลิก เว็บแต่ละประเภทอาจมีบุคลิกลักษณะแตกต่างกัน
ขึ้นอยู่กับเนื้อหาและเป้าหมายในการนำเสมอ บุคลิกที่
เหมาะกับเนื้อหาย่อมทำให้ผู้ใช้เข้าถึงเนื้อหาได้ดีขึ้น
สไตล์
คือลักษณะการจัดโครงสร้างของหน้า รูปแบบกราฟิก
ชนิดและการจัดตัวอักษร ชุดสีที่ใช้ รวมถึงองค์ประกอบ
อื่น ๆ ซึ่งไม่ควรสร้างสไตล์ของเว็บตามใจชอบแต่ควร
คำนึงถึงความเหมาะสม
ไม่ว่าจะเลือกรูปแบบ บุคลิก และสไตล์ใดมาใช้ ควรใช้
ลักษณะเหล่านั้นให้สม่ำเสมอตลอดทั้งเว็บเพื่อป้องกัน
ความสับานที่อาจเกิดขึ้นได้
3.สร้างความสม่ำเสมอตลอดทั่วทั้งไซต์
ความสม่ำเสมอของโครงสร้างหน้าเว็บและระบบเนวิเกชัน
ทำให้ผู้ใช้รู้สึกคุ้นเคยและสามารถคาดกราณ์ลักษณะของ
เว็บได้ล่วงหน้า
ทางด้านเทคนิคเราสามารถใช้ Cascading_Style Sheet ช่วย
ในการกำหนดสไตล์มาตรฐานได้
ข้อควรระวัง คือบางครั้งอาจกลายเป็นข้อจำกัดทำให้เว็บ
ดูน่าเบื่อ แนวทางแก้ไขคือการสร้างความต่างที่น่าสนใจ
ในแต่ละหน้าโดยใช้องค์ประกอบที่คล้ายคลึงกัน แต่มีสี
หรือลักษณะ ต่างกันเล็กน้อยเพื่อทำให้เกิดลักษณะพิเศษ
ของหน้านั้น
4.จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้าเสมอ
ส่วนบนของหน้า หมายถึง ส่วนแรกของหน้าที่จะปรากฎขึ้นใน
หน้าบราวเซอร์โดยที่ยังไม่มีการเลื่อนหน้าจอใดๆ
ส่วนบนสุดนี้ควรประกิบด้วย
1.ชื่อของเว็บ เพื่อให้ผู้ใช้ได้รู้ทันทีว่ากำลังอยู่ในเว็บอะไร
2.ชื่อหัวเรื่องหรือชื่อเเสดงหมวดหมู่ของเนื้อหาที่ปรากฎ
3.สิ่งสำคัญที่เราต้องการโปรโมดเว็บ
4.ระบบเนวิเกชัน เพื่อให้ผู้ใช้คลิกส่วนที่ต้องการได้ทันที
5.สร้างจุดสนใจด้วยความแตกต่าง
การจัดองค์ประกอบให้ภาพรวมของหน้ามีความแตกต่าง
เป็นสิ่งสำคัญที่จะนำสายตาผู้อ่านไปยังบริเวณต่างๆ เว็บที่
ออกแบบมาไม่ดีโดยเน้นการใช้กราฟิกหรือตัวอักษรที่มาก
เกินไป จะทำให้ยากต่อการมองหาข้อมูลที่มีความสำคัญจริงๆ
เราสามารถใช้ความแตกต่างของสีเข้ามาช่วยสร้างลักษณะเด่น
ในหน้าเว็บ เพื่อนำสายตาผู้อ่านไปยังส่วนสำคัญของเนื้อหาได้
ผู้ใช้มองเห็นเว็บในครังแรกมีลักษณะเป็นกลุ่มก้อนของรูปร่างและสีที่ตัดกัน
ต่อมาก็เริ่มมองเห็นองค์ประกิบได้ชัดเจนขึ้น โดยเริ่มจากรูปภาพและหัวเรื่อง
ขนาดใหญ่ จากนั้นจึงมองเห็นรายละเอียดของเนื้อหาในที่สุด
6.จัดแต่งหน้าเว็บให้เป็นระเบียบและเรียบง่าย
เนื้อหาในหน้าเว็บจำเป็นต้องอยู่ในรูปแบบที่ดูง่าย
แยกเป็นสัดส่วน และดูไม่แน่นจนเกินไป การมีข้อมูล
หรือองค์ประกอบที่มากเกินไปทำให้ผู้อ่านขาดความสนใจ
เราจำเป็นต้องจัดการข้อมูลในหน้าเว็บให้มีความรู้สึกที่
เรียบร้อยเป็นกันเอง การจัดการตัวอักษร และรูปภาพ
ให้เกิดพื้นที่ว่าง ทำให้ภาพรวมไม่แน่นจนเกินไป รวมถึง
ควรจัดวางหัวข้อและเนื้อเรื่องอย่างเป็นระบบและชัดเจน
เนื้อหาที่มีบรรทักยาวเต็มกว้างของหน้าจอเป็นสิ่งที่
สร้างความลำบากต่อการอ่าน ควรจักตัวหนังสือให้อยู่ในคอลัมน์ที่ไม่กว้างเกินไป
ข้อควรระวัง การมีคอลัมน์ขนาดเล็กหลายคอลัมน์ต่อกัน
ผู้อ่านต้องอ่านจากบนลงล่างและต้องเลื่อนหน้าจอขึ้นมา
ด้านบนเพื่ออ่านคอลัมน์ถัดไป เพราะเป็นสิ่งที่ไม่สะดวก
อย่างยิ่ง
7.ใช้กราฟิกอย่างเหมาะสม
ควรใช้กราฟิกที่เป็นไอคอน ปุ่มลายเส้น และสิ่งอื่น ๆ ตาม
ความเหมาะสมและไม่มากเกินไป เพื่อหลีกเลี่ยงโครงสร้าง
ของหน้าที่ยุ่งเหยิงและไม่เป็นระเบียบ
ส่วนตัวอักษรขนาดใหญ่ด้วยคำสั่ง H1 และ H2 ควรใช้ใน
ปริมาณน้อยๆ เพื่อให้ได้ผลลัพธ์สูงสุด การมช้กราฟิกมากเกินความจำเป็นทำให้เกิดจุดเดนทั่วทั้งหน้า
เป็นผลให้ไม่มีอะไรหน้านั้นเด่นขึ้นมาจริงๆ
เข้าใจลักษณะการใช้งานของเว็บ
สำหรับเว็บที่ใช้อ่านบนหน้าจอควรมีขนาดกะทัดรัด
ไม่ยืดยาวหรือใช้กราฟิกมากเกินไป
ส่วนหน้าที่คาดว่าจะพิมพ์ควรออกแบบให้มีการใช้
ประโยชน์ของพื้นที่อย่างเต็มที่เพื่อไม่ให้เปลืองกระดาษ
เข้าใจลักษณะการใช้งานของเว็บ
เราสามารถใช้ประโยชน์จากเว็บได้2แนวทาง
1.การใช้เป็นสื่อโดยตรงให้อ่านบนหน้าจอ
2.การใช้เป็นสื่อกลางในการพิมพ์ข้อมูลลงในหน้ากระดาษเพื่อเก็บรวมรวมหรืออ่านในภายหลัง
ออกแบบหน้าเว็บให้มีความยาวเหมาะสม
หน้าเว็บที่ไม่ยาวนักทำให้ดูน่าอ่าน ขณะที่หน้าเว็บยาวๆ
ทำให้ง่ายต่อการจัดการสำหรับผู้ที่ต้องการดาวน์โหลด
หรือสั่งพิมพ์ห้าเหล่านั้น
โดยทั่วไปควรสร้างเว็บขนาดสั้นสำหรับ
1.หน้าโฮมเพจหรือหน้าที่เป็นแหล่งรวมลิงค์จำนวนมาก
2.หน้าเว็บที่คาดว่าจะถูกอ่านบนหน้าจอ
3.หน้าเว็บที่มีกราฟิกขนาดใหญ่มาก
ออกแบบหน้าเว็บให้มีความยาวเหมาะสม
เลือกใช้เว็บขนาดยาวเพื่อ
1.ความสะดวกในการพิมพ์หรือดาวน์โหลด
2.ความสะดวกในการจัดการกับจำนวนไพล์และลิงค์ที่
น้อยลง
3.โครงสร้างของเนื้อหาจะได้ไม่ถูกตัดแบ่งออกจากกัน
ออกแบบหน้าเว็บสำหรับการพิมพ์
บางครั้งเราอาจจะอำนวยความสะดวกให้กับผู้ใช้ทั้ง 2 ประเภท
พร้อมกันโดยจัดทำเว็บสำหรับพิมพ์แยก คนละชุดกับเว็บสำหรับอ่านบนหน้าจอ
โดยมีวิธีการ ดังนี้
1.แบ่งเนื้อหาออกเป็นส่วนย่อยๆ ส่วนละประมาณ 2-3 หน้าจอ
เพื่อนำไปสร้างเป็นหน้าเว็บ พร้อมกับสร้างลิงค์เชื่อมโยงเว็บ
ทั้งหมดเข้าด้วยกัน เพื่อให้ได้เว็บที่มีหน้าไม่ยาวนัก
เหมาะกับการอ่านบนหน้าจอ
2.สร้างลิงค์จากหน้าเว็บที่ได้ในขั้นแรกไปยังอีกเว็บหนึ่งที่รวม
เนื้อหาทั้งหมดไว้ภายในไพล์เดียวกัน เพื่อสะดวกแก่การพิมพ์
หรือดาวน์โหลด และต้องแน่ใจว่า ความกว้างของหน้าจอจะไม่
เกินพื้นที่ ที่สามารถพิมพ์ได้
รูปแบบโครงสร้างของหน้าเว็บ
โครงส้รางหน้าเว็บที่พบเห็นบ่อย ๆ แบ่งเป็น 4 รูปแบบดังนี้
1.โครงสร้างหน้าเว็บในแนวตั้ง
โครงสร้างหน้าเว็บในแนวติ้งถือเป็นรูปแบบพื้นฐานที่
ได้รับความนิยมมากที่สุด เพราะมีรูปแบบที่ง่ายในการ
พัฒนาและมีข้อจำกัดน้อยสุดเมื่อเทียบกับรูปแบบอื่น
เมื่อใดที่หน้าเว็บมีความยาวมากกว่าพื้นที่หน้าจอ
บราวเซอร์ก็จะแสดงกราบบาร์ ขึ้นที่ขอบด้านขวาของ
หน้าต่าง www.amwayshopping.com
2.โครงส้างหน้าเว็บในแนวนอน
โครงสร้างหน้าเว็บในแนวนอนต้องอาศัยความคิด
สร้างสรรค์และความพยายามมากกกว่าปกติ เนื่องจาก
มีข้อจำกัดและสิ่งที่ต้องระวังค่อนข้างมาก เป็นการใช้
ประโยชน์ของพื้นที่ในแนวนอนอย่างเต็มที่
ปัญหาหนึ่งที่จะพบคือความกว้างของหน้าจอที่ไม่แน่นอน
เนื้องจากความละเอียดของมอนิเตอร์ที่ต่างกัน หากข้อมูล
เป็นตัวอักษรทั้งหมดจะสร้างความลำบากต่อผู้อ่าน ทำให้ผู้ใช้
ต้องเลื่อหน้าไปด้านข้างเพื่อดูข้อมูล
3.โครงสร้างหน้าเว็บที่พอดีกับหน้าจอ
โครงสร้างรูปแบบนี้ใช้พื้นที่หน้าจอน้อยกว่าเว็บทั่วไป
และมักจะจัดอยู่ตรงกึ้งหลางของหน้าจอซึ่งจะออกแบบ
ให้มีขนาดพอดีกับหน้าจอโดยไม่มี Scroll bar ปรากฎ
เพราะที่จะใช้ในการนำเสนอข้อมูลที่มีปริมาณไม่มากนัก
ข้อดีของรูปแบบนี้คือการนำเสนอที่ไม่ซับซ้อนและสะดวก
ต่อการใช้งาน เพราะผู้ใช้จะมองเห็นข้อมูลทุกส่วนของ
หน้าได้พร้อมกันตลอดเวลา
4.โครงสร้างหน้าเว็บแบบสร้างสรรค์
รูปแบบสร้างสรรค์นี้อยู่นอกเหนือกฎเกณฑ์ใดๆ มักมี
รูปแบบและการจัดการวางองค์ประกิบเฉพาะตัวที่คาดไม่ถึง
เป็นเว็บของศิลปิน นักออกแบบ บริษัทโฆษณา เนื่องจาก
เป็นเว็บที่สื่อถึงการแสดงฝีมือและความสามารถในการ
ออกแบบอย่างสร้างสรรค์ได้เต็มที่
โครงสร้างหน้าเว็บที่ดีต้องมีความเหมะสมกับปริมาณเนื้อหา
และลักษณะของเว็บ
สำหรับเว็บที่มีปริมาณเนื้อหามาก หรือเว็บที่มีแนวโน้มจะ
ขยายตัวอย่างรวดเร็วควรใช้โครงสร้างหน้าเว็บในแนวตั้ง
สำหรับเว็บที่มีเป้าหมายเพื่อนำเสมอข้อมูลที่มีปริมาณไม่
มากนักและเกี่ยวข้องกับงานออกแบบ แฟชั่น ความทันสมัย
และสร้างสรรค์ อาจเลือกรูปแบบโครงสร้างหน้าเว็บใน
เเนวนอน แบบพอดีกับหน้าจอหรือแบบสร้างสรรค์ได้ตาม
ความเหมาะสม
ส่วนประกอบของหน้าเว็บ
เราอาจแบ่งหน้าเว็บออกเป็นส่วนประกิบหลัก3ส่วน
1.ส่วนหัว(Page Header)
2.ส่วนเนื้อหา(Page Body)
3.ส่วนท้าย (Page Footer)
แบ่งเพื่อการออกแบบรายละเอียดในแต่ละส่วนได้อย่าง
เหมาะสมทำให้สามารถจัดวางกราฟิกและตัวอักษรสำคัญ
ลงในแต่ละบริเวณอย่างมีเหตุผลและเป็นประโยชน์
1.ส่วนหัวของหน้า
บริเวณส่วนหัวของเว็บเป็นบริเวณที่สำคัญที่สุดในหน้า
โดยปกติแล้วส่วนหัวของหน้ามักประกิบด้วย ชื่อเว็บ
ระบบเนวิเกชัน และ หัวข้อหลักหรือชื่อของเนื้อหา
บริเวณมุมด้านซ้าย บนของหน้าเว็บเป็นส่วนที่มี
ความสำคัญมากเป็นพิเศษ เป็นบริเวณแรกของหน้าจอ
ที่ผู้ใช้จะเริ่มต้นให้ความสนใจ ด้วยเหตุนี้เว็บส่วนใหญ่
จึงวางโลโก้หรือชื่อเว็บไว้ในตำแหน่งนี้
2.ส่วนของเนื้อหา
ส่วนของเนื้อหาบนเว็บควรจะมีความกะทัดรัด และจัด
อย่างเป็นระเบียบเพื่อให้มองหาข้อมูลได้อย่างรวดเร็ว
โดยแสดงใจความสำคัญไว้ในส่วนต้นๆ ของหน้า
มีการจัดรูปแบบตัวอักษรอย่างเหมาะสมเพื่อทำให้เนื้อหา
ดูน่าสนใจ อ่านได้อย่างสะดวก และช่วยสร้างความเชื่อมั่น
ต่อเนื้อหามากยิ่งขึ้น เนื่องจากผู้ใช้ทุกคนต้องการ
แหล่งข้อมูลที่ชัดเจน เป็นระเบียบ และน่าเชื่อถือ
3.ส่วนท้ายของหน้า
เป็นบริเวณที่จะให้ข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาและเว็บโดยอาจเป็นระบบ
เนวิเกชันแบบโกลบอลที่เป็นตัวอักษร
หรืออาจเป็นที่รวมของลิงค์ที่เกี่ยวกับนโยบายทาง
กดฎหมาย ลิขสิทธ์ความเป็นส่วนตัว และวิธีดารติดต่อ
กับผู้ดูแลเว็บ
ซึ่งส่วนท้ายนี้จำเป็นต้องคงความสม่ำเสมอในทุกๆ หน้า
เช่นเดียวกับส่วนหัว
เทคนิคการจัดโครงสร้างของหน้า
จัดโครงสร้างของหน้าโดยใช้ตาราง
เว็บโดยส่วนใหญ่มีการจัดโครงสร้างของหน้าโดยใช้ตาราง
แทบทั้งสิ้น หากไม่มีการใช้ตารางมาช่วยจัดโครงสร้างใน
หน้าเว็บ ตัวอักษรและกราฟิกทั้งหมดก็จะจัดเรียงติดกัน
ทั้วทั้งหน้าอย่างไม่เป็นสัดส่วน
ออกแบบหน้าโฮมเพจ
สิ่งสำคัญในการออกแบบบหน้าแรกคือ
การคำนึกถึงสิ่งที่ ผู้ใช้คาดหวังและจัดเตรียมสิ่งเหล่านั้น
ไว้ให้พร้อม ทำให้ผู้ใช้รู้ได้ทันทีว่าเว็บนั้นเกี่ยวจข้องกับ
อะไร รวมถึงการสร้างระบบเนวิเกชันให้ผู้ใช้เข้าถึง
ข้อมูลที่ต้องการได้อย่างสะดวกและรวดเร็ว รูปแบบ
ของหน้าแรกขึ้นอยู่กับลักษณะและวัตถุประสงค์ของเว็บ
หน้าโฮมเพจเปรียบเสมือนหน้าปกของนิตยสาร ต้อง
ออกแบบให้น่าสนใน และมีการแนะนำถึงเนื้อหาสำคัญ
ภายในเล่ม โฮมเพจที่ดีควรมีลักษณะ ดังนี้
1.แสดงถึงภาพรวมและสิ่งที่เป็นประโยชน์ในเว็บ
2.ดูน่าสนใจและมีลักษณะที่สัมพันธ์กับเนื้อหา
3.มีลิงค์ที่สามารถเชื่อมโยงไปสู่ส่วนหลักๆ ของเว็บ
4.แสดงผลได้อย่างรวดเร็ว โดยใช้รูปกราฟิกอย่างจำกัด
5.แสดงถึงเอกลักษณ์ของเว็บด้วยการเเสดงชื่อของเว็บ
6.แสดงถึงสอ่งที่ปรับเปลี่ยนใหม่ เพื่อให้ผู้ใช้เข้าใจว่ามีการเปลี่ยนแปลงของเนื้อหาภายใน
7.แสดงวันที่ปัจจุบัน
8.เปลี่ยนแปลงรูปกราฟิกเป็นประจำทุกวัน สัปดาห์
หรือเดือน
9.แสดงข่าวหรือข้อมูลความเคลื่อนไหวใหม่ๆ ให้ผู้ใช้
ได้รับรู้ในหน้าแรก
10.สร้างส่วนของเนื้อหาที่แสดงถึงสิ่งใหม่ๆในเว็บ
หน้าก่อนโฮมเพจ
การสร้างหน้าก่อนโฮมเพจจริง ที่เรียกว่า "Splasgh page"
ทำหน้าที่แนะนำหรือสื่อข้อความบางอย่างของเว็บเพื่อสร้าง
ความประทับใจต่อผู้ใช้ โดยปกติแล้วหน้านี้จะต้องแสดงผล
ได้อย่างรวเร็วและดูน่าสนใจด้วยการใช้กราฟิกหรือเทคนิค
พิเศษ เหมาะสำหรับเว็บที่ต้องการนำเสนอข้อมูลพิเศษ
บางอย่าง
แต่สำหรับเว็บโดยทั้วไปหน้าก่อนโฮมเพจนี้อาจไม่จำเป็น
และรบกวนเวลาของผู้ใช้
ข้อแนะนำในการออกแบบโฮมเพจ
1.ออกแบบโครงสร้างของหน้าโดยใช้โปรแกรมกราผิก
2.กำหนดชื่อของเว็ปให้สื่อความหมาย
3.สร้างความแตกต่างของสิ่งที่แตกต่างให้เห็นอย่าง ชัดเจน
เช่น สีของลิงค์ต้องกับสีของตัวอักษร
4.เลือกใช้รูปพื้นหลังที่เหมาะสม
5.หลีกเลี่ยงการใช้เทคโนโลยีขั้นสูง
6.อย่าใช้ภาพเคลื่อนไหวมากจนเกินไป
บทที่ 7 การออกแบบเว็บไซต์ห้เหมาะกับสิ่งเเวดล้อม
ปัจจัยหลักที่เกี่ยวข้องกับการท่องเว็บไซต์
ผู้ใช้แต่ละคนมีสภาวะแวดล้อมทางเทคนิคแตกต่างกันไป ตั้งแต่
ระบบปฎิบัติการของคอมพิวเตอร์ เบราเซอร์ที่ใช้ ความละเอียด
ของหน้าจอ และอื่นๆ อีกมากมาย
เราจะออกแบบอย่างไรถึงจะเข้าได้กับสภาพเเวดล้อมของผู้ใช้ทุกคน
เพื่อให้ทุกคนสามารถเข้าชมเว็บได้อย่างราบรื่นปราศจากปัญหา
ปัจจับหลักที่เกี่ยวข้องกับการท่องเว็บไซต์
๑.เบราเซอร์ที่ใช้
๒.ระบบปฎิบัติการของคอมพิวเตอร์
๓.ความละเอียดของหน้าจอ
๔.จำนวนสีที่จอของผู้ใช้สามารถแสดงได้
๕.ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้
๖.ความเร็วในการเชื่อมต่ออินเตอน์เน็ต
๗.ขนาดหน้าต่างเบราเซอร์
๘.ความสว่างและค่าความต่างของโทนสี
๑. เบราเซอร์ที่ใช้
เบราเซอร์ คือ โปรแกรที่ใช้เรียกดูเว็บ สามารถแสดงได้ทั้งตัวอักษร รูปภาพ และภาพเคลื่อนไหว เบราเซอร์ที่ได้ความนิยม เช่น Google Chrome , IE, Opera มาตรฐานกลางของเบราเซอร์ คือ W3C
เป็นองค์กรที่กำหนดคุณสมบัติของเบราเซอร์ เราควรออกแบบตามคุณสมบัติดังนี้
สามารถใช้ได้กลับเบราเซอร์ได้ทุกรุ่น
เว็บไซต์สำหรับเบราเซอร์รุ่นล่าสุด
เว็บไซต์ตามความสามารถของเบราเซอร์
เว็บไซต์ที่มีหลายรูปแบบ
๒. ระบบปฏิบัติการของคอมพิวเตอร์
เป็นระบบที่เป็นปัจจัยหลักต่อ มีผลต่อการทำง่านของเบราเซอร์มาก โดยแต่ละระบบปฏิบัติการจะมีความแตกต่างกันในเรื่องของชนิดและรุ่นของ เบราเซอร์ที่ใช้ได้ ระดับความละเอียดของหน้าจอ ชุดสีของระบบ และชนิดของตัวอักษรที่มาพร้อมกับระบบ
๓. ความละเอียดของหน้าจอ
ความละเอียดของหน้าจอ (monitor resolution)มีหน่วยเป้น pixel ความละเอียดของหน้าจอไม่ขึ้นกับขนาดของมอนิเตอร์ที่ใช้
๔. จำนวสีที่จอของผู้ใช้สามารถแสดงได้
มอนิเตอร์มีความสามารถใหการแสดงสีแตกต่างกน ขึ้นอยู่กับประสิทธิภาพของการ์ดจอ จำนวนหน่วยความจำในการ์ดจอมากขึ้นจะทำให้สามารถแสดงสีได้มากขึ้น จำนวนสีที่การ์ดจอสามารถแสดงได้นั้น ขึ้นอยู่กับค่าความละเอียดของสีที่เรียกว่า bit depth and color depth ซึ่งก็คือจำนวนบิตที่ใช้ในการเก็บข้อมูลแค่ละพิกเซล
ขุดสีสำหรับเว็บ (Web palette) หมายถึว ชุดสีจำนวน 216 สีที่มีอยู่เหมือนกันในระบบปฏิบัติการ Windows and Mac
๕. ชนิดของตัวอักษรที่มีอยู่ในเครื่อง
ชนิดของตัวอักษรมี 2 แบบ
MS Sans Serif VS Microsoft Sans Serif
MS Sans Serif เป็นฟอนต์แบบชิตแมท ซึ่งออกแบบขึ้นจากจุดของพิกเซล โดยมีการออกแบบแต่ละตัวอักษรไว้เป็นขนาดที่แน่นอน Microsoft Sans Serif เป็นฟอนด์ที่มีโครงสร้างของอักขระเป็นแบบเวคเตอร์หรือลายเส้น โอยมีกรออกแบบเอาท์ไลน์ไว้เพียงแบบเดียวแต่สามารถปรับขนาดได้อย่างไม่จำกัดตัวอักษรแบบกราฟิก (Graphic Text)
๖.ความเร็วในการเชื่อมต่ออินเตอร์เน็ต
ความเร็วของอินเตอร์เน็ตจะมีผลต่อเวลาที่ใช้ในการแสดงผลของเว็บ
สิ่งที่เราสนใจในการออกแบบเว็บเพจให้ผู้ชมส่วนใหญ่สามารถเข้าถึงเว็บ
ได้อย่างรวดเร็ว
ในฐานะผู้ออกแบบเว็บไซต์จึงเป็นเรื่องที่ท้าทายที่จะต้องออกแบบเว็บให้
สวยงาน น่าสนใจ และดาวน์โหลดได้เร็ว โดยทำให้ไฟล์มีขนาดเล็กที่สุด
ขนาดหน้าต่างของเบราเซอร์มีโอกาสที่ถูกปรับเปลี่ยนเป็นขนาดเท่าไหร่
ก็ได้ตามความประสงค์ของผู้ใช้
คำถามคือ เว็บเพจถูกออกแบบให้มีขนาดที่ตายตัว หรือเป็นแบบ
ที่มีขนาดเปลี่ยนแปลงไปตามขนาดหน้าต่างเบราเซอร์
ข้อดี
พื้นที่หน้าจอทั้งหมดถูกใช้อย่างเต็มที่
เว็บเพจจะถูกจัดเรียงในรูปแบบที่เหมาะสมกับหน้าจอเสมอ
ข้อเสีย
ไม่สามารถคาดการณ์รูปแบบที่จะปรากฎต่อสายตาผู้ชมให้
เนื่องจากมีการจัดรูปแบบใหม่จึงทำให้เสียรูปแบบหน้าจอที่ออกแบบไว้เติม
๗.ความสว่างและค่าความต่างของโทนสี
นอกเหนือจากค่าแกมม่าที่มีผลต่อความสว่างของหน้าจอแล้ว ตัวผู้ใช้เอง
ยังสามารถปรับระดับความสว่าง (Brightness) และความต่างของโทนสี
(Contrast) จากมอนิเตอร์ได้
ผู้ออกแบบเว็บเพจต้องระวังไม่ให้หน้าเว็บมีโทนสีมืดหรือสว่าง
จนเกินไป และควรเลือกใช้โทนสรที่ต่างกันพอสมควร
บทที่ 8 เลือกใช้สีสําหรับเว็บไซต์
Designing Web Colors
เลือกใช้สีสําหรับเว็บไซต์ สีสันในเว็บเพจเป็นสิ่งที่สําคัญมากในการดึงดูดความสนใจของผู้ใช้ เนื องจากสิ งแรกที ผู้ใช้มองเห็นจากเว็บก็คือสี ซึ่งเป็นสิ งกําหนดบรรยากาศและความรู้สึกโดยของเว็บไซต์
เราสามารถใช้สีได้กับทุกองค์ประกอบของเว็บเพจ ตั้งแต่รูปภาพ ตักอักษร สีพื้นหลัง การใช้สีที เหมาะสมจะช่วยใน การสื อความหมายของเนื้อหา
ประโยชน์ของสีในเว็บไซต์
สามารถชักนําสายตาผ้อ่านให้ไปยังทุกบริเวณในหน้าเว็บเพจที่เราต้องการได้ เช่น ข้อมูลใหม่ หรือโปรโมชั่นพิเศษ
สีช่วยเชื่อมโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน
สีสามารถนําไปใช้ในการแบ่งบริเวณต่าง ๆ ออกจากกัน
สีสามารถใช้ในการดึงดูดความสนใจของผู้อ่าน
สีสามารถสร้างอารมณ์โดยรวมของเว็บเพจ
ผลทางจิตวิทยาที มีต่อสี (Color Psychology)
มนุษย์เราตอบสนองต่อสีด้วยจิตใจไม่ใช่สมอง เช่นสีบางสีอาจทําให้ร้สึกสดชื น แต่บางสีอาจทําให้รู้สึกซึมเศร้าได้
ดังนั้นหากเราเลือกสีอย่าง
ไม่มีความคิดเห็น:
แสดงความคิดเห็น