Lecture

บทเรียน

จัดระบบโครงสร้า้างข้อ้อมูล(Information Architecture)

Phase 1 : สำรวจปัจจัยสำคัญ(Research)

1. รู้จักตัวเอง-กำหนดเป้าหมายและสำรวจความพร้อม

2. เรียนรู้ผู้ใช้-ระบุกลุ่มผู้ใช้และศึกษาความต้องการการ

3. ศึกษาคู่แข่ง-สำรวจการแข่งขันและการเรียนรู้คู่แข่ง

สิ่งที่ได้รับ

1. เป้าหมายหลักของเว็บ

2. ความต้องการของผู้ใช้

3. กลยุทธ์ในการแข่งขัน

Phase 2 : พัฒนาเนื้อหา(Site Content)

4. สร้างกลยุทธ์การออกแบบ

5. หาข้อสรุปขอบเขตเนื้อหา

สิ่งที่ได้รับ

1. แนวทางการออกแบบเว็บ

2. ขอบเขตเนื้อหาและการใช้งาน

3. ข้อมูลที่ถูกจัดอย่างเป็นระบบ

Phase 3 : พัฒนาโครงสร้างเว็บไซท์(Site Structure)

6. จัดระบบข้อมูล

7. จัดทำโครงสร้างข้อมูล

8. พัฒนาระบบเนวิเกชัน

 สิ่งที่ได้รับ

1. แนวทางการออกแบบเว็บ

2. ขอบเขตเนื้อหาและการใช้งาน

3. ข้อมูลที่ถูกจัดอย่างเป็นระบบ

Phase 4 : ออกแบบและพัฒนาหน้าเว็บ(Visual Design)

9. ออกแบบลักษณะหน้าตาเว็บ

10. พัฒนาเว็บต้นแบบและข้อกำหนดสุดท้าย

สิ่งที่ได้รับ

1. ลักษณะหน้าตาของเว็บ

2. เว็บต้นแบบที่จะใช้ในการพัฒนา

3. รูปแบบโครงสร้างของเว็บ

4. ข้อกำหนดในการพัฒนาเว็บ

Phase 5 : พัฒนาและดำเนินการ (Production & Operation)

11. ลงมือพัฒนาเว็บ

12. เปิดเว็บไซท์

13. ดูแลและพัฒนาต่อเนื่อง

สิ่งที่ได้รับ

1. เว็บที่สมบูรณ์

2. เปิดตัวเว็บและทำให้เป็นที่รู้จัก

 ความสำคัญของระบบเนวิเกชั่น

การออกเเบบโครงสร้างข้อมูลที่ดีช่วยให้ผู้ใช้เข้าถึงข้อมูลได้ง่ายขึ้น ส่วนระบบเนวิเกชั่นเป็น

ส่วนเสริมในการสร้างสิ่งเเวดล้อมที่สื่อความหมายเพื่อช่วยให้ผู้ใช้ท่องเว็บได้อย่างคล่องตัว

โดยไม่หลงทาง โดยทำให้ผู้ใช้สามารถรู้ได้ว่าตัวเองกำลังอยู่ที่ไหน ได้ผ่านที่ใดมาบ้างเเละ

ควรจะไปไหนต่อ

 

 รูปแบบของระบบเนวิเกชั่น เเบ่งออกเป็น 4รูปแบบ

1.ระบบเนวิเกชั่นเเบบลำดับขั้น

เป็นเเบบพื้นฐาน คือ มีหน้าโฮมเพจหนึ่งหน่าเเละมีลิงค์ไปยังหน้าอื่นๆ ภายในเว็บถือเป็บลำดับ

ขั้นอย่างหนึง่เเล้ว

2.ระบบเนวิเกชั่นเเบบโกลบอล

เป็นระบบที่ช่วยเสริมข้อจำกัดของระบบเนวิเกชั่นเเบบลำดับขั้น ทำให้สามารถเคลื่อนที่ได้ทั้ง

ในเเนวตั้งเเละเเนวนอนอย่างมีประสิทธิภาพ

3. ระบบเนวิเกชั่นเเบบโลคอล

สำหรับเว็บที่มีความซับซ้อนมากอาจต้องใช้ระบบเเบบโลคอลหรือเเบบเฉพาะส่วน

4. ระบบเนวิเกชั่นเฉพาะที่

เป็นเเบบเฉพาะที่ตามความจำเป็นของเนื้อหาซึ่งก็คือลิงค์ของคำที่ฝั่งอยู่ในประโยค เเต่ไม่ควร

ใช้มากจนเกินไป เพราะผู้ใช้อาจ มองข้ามไปทำให้ไม่สนใจ

 

องค์ประกอบของระบบเนวิเกชันหลัก

 

ระบบเนวิเกชันที่สำคัญและพบมากที่สุด คือเนวิเกชันที่อยู่ในหน้าเดียวกับเนื้อหา

ไม่ใช่เนวิเกชันที่อยู่ในหน้าแรกเนื่องจากเมื่อผู้ใช้ผ่านหน้าแรกเข้าไปสู่ภายในเว็บแล้ว

ก็ไม่อยากจะกลับมาเริ่มต้นใหม่ที่หน้าแรกทุกครั้งก่อนจะเข้าไปดูเนื้อหาในส่วนอื่น ๆ ต่อ 

มีได้หลายรูปแบบ ได้แก่ เนวิเกชันบาร์, เนวิเกชันระบบเฟรม, pull down menu,

pop up menu, image map และsearch box

 

เนวิเกชันบาร์ 

 

ระบบเนวิเกชันบาร์เป็นพื้นฐานที่ใช้ได้หลายรูปแบบ ทั้งแบบลำดับขั้น แบบโกลบอล

และแบบโลคอล โดยทั่วไปเนวิเกชันบาร์จะประกอบด้วยกลุ่มของลิงค์ต่าง ๆ ที่อยู่

รวมกันในบริเวณหนึ่งของหน้าเว็บ อาจเป็นตัวหนังสือหรือกราฟิก ก็ได้ 

 

วิเกชันบาร์ระบบเฟรม

 

คุณสมบัติของเฟรมจะทำให้สามารถแสดงเว็บหลาย ๆ หน้าในหน้าต่างบราวเซอร์เดียวกัน

โดยแต่ละหน้ายังเป็นอิสระต่อกัน การลิงค์เฟรมที่เป็นเนวิเกชันบาร์สามารถควบคุมการแสดงผล

ของข้อมูลอีกเฟรมหนึ่งได้ ส่วนที่เป็นเนวิเกชันบาร์จะปรากฏอยู่คงที่เสมอ ในขณะที่ผู้ใช้เลื่อนดู

ข้อมูลใด ๆ ในอีกเฟรมหนึ่ง การแยกระบบเนวิเกชันแบบนี้ทำให้ผู้ใช้เข้าถึงระบบเนวิเกชันได้

ตลอดเวลาและยังคงความสม่ำเสมอทั่วทั้งไซท์ 

 

Pull Down Menu

 

เป็นส่วนประกอบของฟอร์มที่มีลักษณะเด่นคือ มีรายการให้เลือกมากมายแต่ใช้พื้นที่น้อย

เมื่อเทียบองค์ประกอบชนิดอื่น ๆ วิธีนี้จะช่วยให้ผู้ใช้เลือกรายการย่อยเข้าไปสู่เป้าหมาย

ได้อย่างสะดวกเมนูแบบนี้เหมาะสำหรับข้อมูลประเภทเดียวกันที่มีจำนวนมาก

เช่น รายชื่อประเทศ จังหวัด หรือ ภาษา แต่ไม่เหมาะกับข้อมูลจำนวนน้อยหรือข้อมูลต่างประเภทกัน

และไม่ควรใช้pull down menu มากจนเกินไป

 

 Pop Up Menu

 

เป็นเมนูอีกรูปแบบหนึ่งที่มีลักษณะคล้าย Pull downmenu แต่รายการย่อยของเมนูจะปรากฏขึ้นเองเมื่อผู้ใช้นำ

เมาส์ไปวางเหนือตำแหน่งของรายการในเมนูหลัก จากนั้นผู้ใช้ก็สามารถเลื่อนเมาส์ไปเลือกรายการต่าง ๆ ที่ปรากฏขึ้น

ได้ วิธีนี้ช่วยให้หน้าเว็บดูไม่รกเกินไปด้วยลิงค์จำนวนมากและยังช่วยประหยัดพื้นที่แสดงรายการย่อยของเมนูได้

 

 

การเลือกใช้สีให้เว็บไซต์

 

 เลือกใช้สีสำหรับเว็บไซต์

สีสันในเว็บเพจเป็นสิ่งที่สำคัญมากในการดึงดูดความสนใจของผู้ใช้ เนื่องจากสิ่งเเรกที่ผู้ใช้
มองเห็นจากเว็บก็คือสี ซึ่งเป็นสิ่งกำหนดบรรยากาศเเเละความรู้สึกการใช้สีพื้นใกล้เคียงกับ
สีตัวอักษร บางครั้งอาจสร้างความลำบากในการอ่าน ดังดั้นควรหลีกเลี่ยงสีที่มีมากจนเกินไป

การใช้สีที่กลมกลืนกันช่วยให้เว็บไซต์ดูน่าชมมากขึ้น

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

• สีสามารถสร้างอารมณ์ของเว็บเพจ
• สีสามารถใช้ในการดึงดูดความสนใจของผู้อ่าน
• สามารถส่งเสริมเอกลักษณ์หน่วยงาน หรือองค์กรนั้นๆ
• สีสามารถนำไปใช้ในการเเบ่งบริเวณต่างๆ ออกจากกัน
• สามารถชักนำสายตาผู้อ่านให้ไปยังทุกบริเวณในหน้าเว็บเพจที่เราต้องการ 
•  สีช่วยเชื่อมโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน

ความรู้เบื้องต้นเกี่ยวกับสี

สีขั้นที่ 1 คือ แม่สี ได้แก่ สีแดง   สีเหลือง  สีน้ำเงิน
สีขั้นที่ 2 คือ สีที่เกิดจากสีขั้นที่ 1 หรือแม่สีผสมกันในอัตราส่วนที่เท่ากัน

จะทำให้  เกิดสีใหม่ 3 สี ได้แก่สีแดง ผสมกับสีเหลืองได้สี ส้ม สีแดง ผสมกับสีน้ำเงินได้สีม่วง

สีเหลือง ผสมกับสีน้ำเงิน  ได้สีเขียว

สีขั้นที่ 1 สีขั้นที่2

สีขั้นที่ 3 คือ สีที่เกิดจากสีขั้นที่ 1 ผสมกับสีขั้นที่ 2 ในอัตราส่วนที่เท่ากันจะได้สีอื่น ๆ 

จะเกิดสีขึ้นอีก 6สี

 สีแดง ผสมกับสีส้ม  ได้สี ส้มแดง

                   สีแดง ผสมกับสีม่วง  ได้สีม่วงแดง
                   สีเหลือง ผสมกับสีเขียว ได้สีเขียวเหลือง
                   สีน้ำเงิน ผสมกับสีเขียว  ได้สีเขียวน้ำเงิน
                   สีน้ำเงิน ผสมกับสีม่วง  ได้สีม่วงน้ำเงิน
                   สีเหลือง ผสมกับสีส้ม ได้สีส้มเหลือง

วงล้อสี 

เป็นรูปแบบหนึ่งในการจัดจัดเรียงสีทั้งหมดไว้ในวงกลม เเละเป็นการจัดลำดับเฉดสีอย่างมีเหตุผลเเละง่ายนต่อการนำไปใช้ 

 สำหรับในเรื่องวรรณะของสี จะแบ่งออกเป็น สีวรรณะร้อน และ สีวรรณะเย็น ได้ดังรูป