บทที่ 6 ออกแบบหน้าเว็บ
หลักสำคัญในการออกแบบหน้าเว็บ คือ
การใช้รูปภาพและองค์ประกอบต่าง ๆ ร่วมกัน เพื่อสื่อความหมายเกี่ยวกับเนื้อหาหรือลักษณะสำคัญของเว็บให้น่าสนใจ บนพื้นฐานของความเรียบง่ายและสะดวกของผู้ใช้
ใช้แบบจำลองเปรียบเทียบ (Metaphor)
การใช้แบบจำลองเปรียบเทียบ คือ การใช้สิ่งที่คุ้นเคยในการอธิบายถึงสิ่งที่ไม่คุ้นเคย ไม่ว่าจะเป็นรูปภาพจากสิ่งพิมพ์หรือรูปแบบของร้านขายของ
สิ่งสำคัญ คือ รูปแบบที่เลือกมาใช้ต้องมีลักษณะที่คนส่วนใหญ่คุ้นเคย เข้าใจง่าย สนับสนุนแนวคิดและส่งเสริมกระบวนการของเว็บ
ลักษณะต่าง ๆ ของแบบจำลอง
การใช้แบบจำลองมีด้วยกัน 3 ประการ ดังนี้
1. จำลองแบบการจัดระบบ คือ ใช้ประโยชน์จากความคุ้นเคยของการจัดระบบที่คุ้นเคย เพื่อใช้ผู้ใช้เข้าถึงโครงสร้างในระบบใหม่ได้ง่ายขึ้น เช่น เว็บร้านขายหนังสือ สามารถจำลองแบ่งการจัดหมวดหมู่หนังสือได้ตามที่ใช้ในร้านหนังสือจริง
2. จำลองการใช้ร้าน คือ เชื่อมโยงการใช้งานที่สามารถทำได้ในชีวิตจริงกับการใช้งานบนเว็บ เช่น เว็บของโรงภาพยนตร์ที่ควรให้ผู้ใช้สามารถดูโปรแกรมหนัง, จองที่นั่งล่วงหน้า ได้เหมือนกับไปโรงภาพยนตร์จริง
3. จำลองลักษณะที่มองเห็น คือ วิธีนี้จะเกี่ยวข้องกับสิ่งที่มีลักษณะที่คุ้นเคยของคนทั่วไป เช่น เว็บไซต์เกี่ยวกับดนตรีที่ให้บริการฟังเพลงบนเว็บได้ การนำลักษณะของปุ่มเล่นเพลง ปิดเพลง ที่ทุกคนรู้จักจากเครื่องเสียงมาใช้ ทำให้เข้าใจง่ายและรวดเร็ว
หลักการออกแบบหน้าเว็บ
1. สร้างลำดับชั้นความสำคัญขององค์ประกอบ
2. สร้างรูปแบบ บุคลิกและสไลต์
3. สร้างความสม่ำเสมอตลอดทั่วทั้งเว็บไซต์
4. จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้าเสมอ
5. สร้างจุดสนใจด้วยความแตกต่าง
6. จัดแต่งหน้าเว็บให้เป็นระเบียบและเรียบง่าย
7. ใช้กราฟิกอย่างเหมาะสม
รูปแบบโครงสร้างของหน้าเว็บ
โครงสร้างหน้าเว็บที่พบเห็นบ่อย ๆ แบ่งออกเป็น 4 รูปแบบ ดังนี้
1. โครงสร้างหน้าเว็บในแนวตั้ง
2. โครงสร้างหน้าเว็บในแนวนอน
3. โครงสร้างหน้าเว็บที่พอดีกับหน้าจอ
4. โครงสร้างหน้าเว็บแบบสร้างสรรค์
ส่วนประกอบของหน้าเว็บ
เราอาจแบ่งหน้าเว็บออกเป็นส่วนประกอบหลัก 3 หลัก
1. ส่วนหัว (Page Header)
2. ส่วนเนื้อหา (Page Body)
3. ส่วนท้าย (Page Footer)
ออกแบบหน้าโฮมเพจ สิ่งสำคัญในการออกแบบหน้าแรก คือ
การคำนึงถึงสิ่งที่ ผู้ใช้คาดหวังและจัดเตรียมสิ่งเหล่านั้นไว้ให้พร้อม ทำให้ผู้ใช้รู้ได้ทันทีว่าเว็บไหนเกี่ยวข้องกับอะไร รวมถึงการสร้างระบบเนวิเกชันให้ผู้ใช้เข้าถึงข้อมูลที่ต้องการได้อย่างสะดวกและรวดเร็ว รูปแบบของหน้าแรกขึ้นอยู่กับลักษณะและวัตถุประสงค์ของเว็บ หน้าโฮมเพจเปรียบเสมือนหน้าปกของนิตยสาร ต้องออกแบบให้น่าสนใจ และมีการแนะนำถึงเนื้อหาสำคัญภายในเล่ม โฮมเพจที่ดีมีลักษณะ ดังนี้
1. แสดงถึงภาพรวมและสิ่งที่เป็นประโยชน์ในเว็บ
2. ดูน่าสนใจและมีลักษณะสำคัญกับเนื้อหา
3. มีลิงค์ที่สามารถเชื่อมโยงไปสู่ส่วนหลัก ๆ ของเว็บ
4. แสดงผลได้อย่างรวดเร็ว โดยใช้รูปกราฟิกอย่างจำกัด
5. แสดงถึงเอกลักษณ์ของเว็บด้วยการแสดงชื่อของเว็บ
6. แสดงถึงสิ่งที่ปรับเปลี่ยนใหม่ เพื่อให้ผู้ใช้เข้าใจว่ามีการเปลี่ยนแปลงของเนื้อหาภายในเว็บ
7. แสดงวันที่ปัจจุบัน
8. เปลี่ยนแปลงรูปกราฟิกเป็นประจำทุกวัน สัปดาห์ หรือ เดือน
9. แสดงข่าวหรือข้อมูลความเคลื่อนไหวใหม่ ๆ ให้ผู้ใช้ได้รับรู้ในหน้าแรก
10. สร้างส่วนของเนื้อหาที่แสดงถึงส่วนใหม่ ๆ ในเว็บ
ประโยชน์ของสีในเว็บไซต์
การผสมสี มี 2 แบบ
บทที่ 7 การออกแบบเว็บไซต์ให้เหมาะกับสิ่งแวดล้อม
ปัจจัยที่เกี่ยวข้องกับการท่องเว็บไซต์
· เบราเซอร์ที่ใช้
· ระบบปฏิบัติการของคอมพิวเตอร์
· ความละเอียดของหน้าจอ
· จำนวนสีที่จอของผู้ใช้สามารถแสดงได้
· ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้
· ความเร็วในการเชื่อมต่ออินเตอร์เน็ต
· ขนาดหน้าต่างเบราเซอร์
· ความสว่างและค่าความต่างของโทนสี
เบราว์เซอร์ หรือ โปรแกรมค้นดูเว็บ คือโปรแกรมคอมพิวเตอร์ ที่ผู้ใช้สามารถดูข้อมูลและโต้ตอบกับข้อมูลสารสนเทศที่จัดเก็บในหน้าเวบที่สร้างด้วยภาษาเฉพาะ เช่น ภาษาเอชทีเอ็มแอล ที่จัดเก็บไว้ที่ระบบบริการเว็บหรือเว็บเซิร์ฟเวอร์หรือระบบคลังข้อมูลอื่น ๆ โดยโปรแกรมค้นดูเว็บเปรียบเสมือนเครื่องมือในการติดต่อกับเครือข่ายคอมพิวเตอร์ขนาดใหญ่ที่เรียกว่าเวิลด์ไวด์เว็บ
เว็บเบราเซอร์ที่ได้รับความนิยม ได้แก่
· Inernet Explore
· Firefox
· Google Chrome
· Opera
· The world
· Netscape Navigator
ระบบปฏิบัติการ
เป็นปัจจัยที่มีผลต่อการทำงานของเบราเซอร์มาก โดยแต่ละระบบปฏิบัติการจะมีความแตกต่างกันในเรื่องของชนิดและรุ่นของเบราเซอร์ที่ใช้ได้, ระบบความละเอียดของหน้าจอ, ชุดสีของระบบและชนิดของตัวอักษรที่มาพร้อมกับระบบ
ความละเอียดของหน้าจอ
· ขนาดของจอมอนิเตอร์มีหลายขนาด เช่น 15”,17”,21” อื่น ๆ
· ออกแบบควรใช้ความละเอียด 800x600 แต่ควรจัดวาง องค์ประกอบสำคัญ เช่น ระบบเนวิชันไว้ในส่วนพื้นที่ 640x480
จำนวนสีที่จอของผู้ใช้สามารถแสดงได้
· มอนิเตอร์มีสามารถแสดงสีที่แตกต่างกัน ขึ้นอยู่กับประสิทธิภาพของการ์ดจอ
· จำนวนหน่วยความจำของการ์ดจอที่มากขึ้นจะทำให้สามารถแสดงสีได้มากขึ้น
· จำนวนสีที่การ์ดจอสามารถแสดงได้นั้นขึ้นอยู่กับความละเอียดของสี
ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้
· เบราเซอร์จะแสดงฟอนต์ที่กำหนดไว้ในเว็บเพจได้ก็ต่อเมื่อคอมพิวเตอร์เครื่องนั้นมีฟอนต์เหล่านั้นติดตั้งอยู่ในเครื่อง
ความเร็วในการเชื่อมต่ออินเตอร์เน็ต
· ความเร็วของอินเตอร์เน็ตจะมีผลต่อเวลาที่ใช้ในการแสดงผลของเว็บ
· ความเร็วของอินเตอร์เน็ตมีผลต่อระดับ
· สิ่งที่เราสนใจในการออกแบบเว็บเพจให้ผู้ชมส่วนใหญ่สามารถเข้าถึงเว็บได้อย่างรวดเร็ว
ขนาดหน้าต่างเบราเซอร์
· ขนาดหน้าต่างของเบราเซอร์มีโอกาสที่ถูกปรับเปลี่ยนเป็นขนาดเท่าไหร่ก็ได้ตามความประสงค์ของผู้ใช้
· ออกแบบเว็บเพจให้เปลี่ยนแปลงขนาดได้
· ออกแบบเว็บเพจให้มีความคงที่
ความสว่างและค่าความต่างของโทนสี
· นอกเหนือจากค่าแกมม่าที่มีผลต่อความสว่างของหน้าจอแล้ว ตัวผู้ใช้เองยังสามารถปรับระดับความสว่าง และความต่างของโทนสี จากมอนิเตอร์ได้
บทที่8 เลือกใช้สีสำหรับเว็บไซต์
สีสันเป็นสิ่งสำคัญมากในการดึงดูดความสนใจของผู้ใช้ เนื่องจากเป็นสิ่งแรกที่ผู้ใช้มองเห็น
- การใช้สีพื้นใกล้เคียงกับตัวอักษร บางครั้งลำบากในการอ่าน
- การใช้สีมากเกินอาจสร้างความสับสนให้ผู้อ่านได้
- การใช้สีที่กลมกลืน ช่วยให้น่าดูมากยิ่งขึ้น
ประโยชน์ของสีในเว็บไซต์
- ชักนำสายตาทุกบริเวณในหน้าเว็บ
- เชื่อมโยงบริเวณที่ไดรับการออกแบบเข้าด้วยกัน
- แบ่งบริเวณต่างๆออกจากกัน
- ดึงดูดความสนใจของผู้อ่าน
- สร้างอารมณ์โดยรวมของเว็บ
- สร้างระเบียบ
- ส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้นๆ
การผสมสี มี 2 แบบ
- การผสมแบบบวก เป็นรูปแบบการผสมของแสงไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษ
- การผสมแบบลบ ไม่เกี่ยวข้องกับแสงแต่เกี่ยวกับการดูดกลืนและสะท้อนแสงของวัตถุต่างๆ
รูปแบบชุดสีพื้นฐาน (Simple Color Schemes)- ชุดสีร้อน
- ชุดสีเเบบเดียว
- ชุดสีที่คล้ายคลึงกัน
- ชุดสีตรงข้ามเคียง
- ชุดสีตรงข้ามข้างเคียงทั้ง 2 ด้าน
- ชุดสีเย็น
- ชุดสีเเบบสามเส้า
- ชุดสีตรงข้าม
สีกับอารมณ์ ความรู้สึก เเละความสัมพันธ์กับสิ่งต่างๆ
สีเเดง เเสดง ถึงพลัง อำนาจความโมโห ความก้าวร้าว
สีน้ำเงิน เเสดง ถึงความซื่อสัตย์ ความมั่นคง ปลอดภัย
สีเขียว เเสดงถึง ธรรมชาติ สุขภาพ ความยินดี
สีเหลือง เเสดงถึง ความสดใส ร่าเริง การมองโลกในเเง่ดี ความหวัง ความอบอุ่น
สีม่วง เเสดงถึง ความสูงส่ง ความสร้างสรรค์ ความรอบรู้ ความแปลกใหม่
สีส้ม เเสดงถึง กำลังความสามารถ ความเข้มเเข็ง กระตือรือร้น
สีน้าตาล เเสดงถึง ความเรียบง่าย ความสะดวกสบาย ความมั่นคง เชื่อถือได้
สีเทา แสดงถึง ความสุภาพ ความเป็นไปได้ ความมั่นคง
สีขาว เเสดงถึง ความบริสุทธฺ์ ความไร้เดียงสา ความรัก ความฉลาด
สีดำ เเสดงถึง อำนาจ ความฉลาด ความเป็นเลิศ ความสุขม รอบคอบ
รูปแบบชุดสีพื้นฐาน (Simple Color Schemes)- ชุดสีร้อน
- ชุดสีเเบบเดียว
- ชุดสีที่คล้ายคลึงกัน
- ชุดสีตรงข้ามเคียง
- ชุดสีตรงข้ามข้างเคียงทั้ง 2 ด้าน
- ชุดสีเย็น
- ชุดสีเเบบสามเส้า
- ชุดสีตรงข้าม
สีกับอารมณ์ ความรู้สึก เเละความสัมพันธ์กับสิ่งต่างๆ
สีเเดง เเสดง ถึงพลัง อำนาจความโมโห ความก้าวร้าว
สีน้ำเงิน เเสดง ถึงความซื่อสัตย์ ความมั่นคง ปลอดภัย
สีเขียว เเสดงถึง ธรรมชาติ สุขภาพ ความยินดี
สีเหลือง เเสดงถึง ความสดใส ร่าเริง การมองโลกในเเง่ดี ความหวัง ความอบอุ่น
สีม่วง เเสดงถึง ความสูงส่ง ความสร้างสรรค์ ความรอบรู้ ความแปลกใหม่
สีส้ม เเสดงถึง กำลังความสามารถ ความเข้มเเข็ง กระตือรือร้น
สีน้าตาล เเสดงถึง ความเรียบง่าย ความสะดวกสบาย ความมั่นคง เชื่อถือได้
สีเทา แสดงถึง ความสุภาพ ความเป็นไปได้ ความมั่นคง
สีขาว เเสดงถึง ความบริสุทธฺ์ ความไร้เดียงสา ความรัก ความฉลาด
สีดำ เเสดงถึง อำนาจ ความฉลาด ความเป็นเลิศ ความสุขม รอบคอบ
0 Response to "Lecture"
แสดงความคิดเห็น