Lecture

การออกแบบระบบเนวิเกชั่น

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

เนวิเกชั่นที่ดี จะต้องบรรลุวัตถุประสงค์ต่อไปนี้
        1.ผู้ชมกำลังอยู่ในส่วนใดของเว็บ
        2.สามารถเข้าถึงข้อมูลได้อย่างไร
        3. สามารถกลับไปยังหน้าเดิมได้อย่างไร
        4. หน้าเว็บเพจใดที่ได้เยี่ยมชมข้อมูลเเล้ว

รูปแบบของระบบเนวิเกชั่น เเบ่งออกเป็น 4รูปแบบ
       1.ระบบเนวิเกชั่นเเบบลำดับขั้น
              เป็นเเบบพื้นฐาน คือ มีหน้าโฮมเพจหนึ่งหน่าเเละมีลิงค์ไปยังหน้าอื่นๆ ภายในเว็บถือเป็บลำดับขั้นอย่างหนึ่งเเล้ว
        2.ระบบเนวิเกชั่นเเบบโกลบอล
              เป็นระบบที่ช่วยเสริมข้อจำกัดของระบบเนวิเกชั่นเเบบลำดับขั้น ทำให้สามารถเคลื่อนที่ได้ทั้งในเเนวตั้งเเละเเนวนอนอย่างมีประสิทธิภาพ
         3. ระบบเนวิเกชั่นเเบบโลคอล
              สำหรับเว็บที่มีความซับซ้อนมากอาจต้องใช้ระบบเเบบโลคอลหรือเเบบเฉพาะส่วน
        4. ระบบเนวิเกชั่นเฉพาะที่
             เป็นเเบบเฉพาะที่ตามความจำเป็นของเนื้อหาซึ่งก็คือลิงค์ของคำที่ฝั่งอยู่ในประโยค เเต่ไม่ควรใช้มากจนเกินไป เพราะผู้ใช้อาจ มองข้ามไปทำให้ไม่สนใจ

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

                             pull down
                             pop up menu
                             image map
                             searchbox

ระบบเนวิเกชั่นที่มีประสิทธิภาพ ควรมีคุณสมบัติ ดังนี้
           1. เข้าใจง่าย
           2. มีความสม่ำเสมอ
           3. มีการตอบสนองต่อผู้ใช้
           4. มีความพร้อมเเละเหมาะสมต่อการใช้งาน
           5. นำเสนอหลายทางเลือก
           6. มีขั้นตอนสั้นเเละประหยัดเวลา
           7. มีรูปแบบที่สื่อความหมาย
           8. มีคำอธิบายที่ชัดเจนเเละเข้าใจได้ง่าย
           9. เหมาะสมกับวัตถุประสงค์ของเว็บ
          10. สนับสนุนเป้าหมายเเละพฤติกรรมของผู้ใช้

การออกเเบบหน้าเว็บไซต์

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

         เเนวคิดในการออกเเบบหน้าเว็บ

• เรียนรู้จากเว็บไซต์ต่างๆ
• ประยุกต์รูปแบบจากสื่อพิมพ์
• ใช้เเบบจำลองเปรียบเทียบ (Metaphor)
•  ออกแบบอย่างสร้างสรรค์
  
  
  หลักการออกเเบบหน้าเว็บ

       1.สร้างลำดับชั้นความสำคัญขององค์ประกอบ

           จัดตำเเหน่งเเละลำดับขององค์ประกอบ เเสดงลำดับความสำคัญของข้อมูลที่ต้องการให้ผู้ใช้ได้รับเนื่องจากภาษาส่วนใหญ่จะอ่านจากซ้ายไปขวา เเละจากบน ลงล่าง จึงควรจัดวางสิ่งที่สำคัญ
ไว้ที่ส่วนบนหรือด้านซ้ายของหน้าอยู่เสมอ
       2. สร้างรูปแบบ บุคลิกเเละสไตล์
           รูปแแบบ การเลือกรูปแบบเว็บที่เหมาะสมจะช่วยสร้างความเข้าใจของผู็ใช้ได้ดีขึ้น บุคลิก เว็บเเต่ละประเภทอาจมีบุคลิกลักษณะแตกต่างกันขึ้นอยู่กับเนื้อหาเเละเป้าหมายในการนำเสนอสไตล์ คือ ลักษณะการจัดโครงสร้างของหน้า ณุปแบบกราฟิก ชนิดเเละการจัดตัวอักษร ชุดสีที่ใช้ รวมถึงองค์ประกอบอื่นๆ ซึ่งไม่ควรสร้างตามใจชอบ
       3.สร้างความสม่ำเสมอตลอดทั่วทั้งไซต์
          ความสม่ำเสมอของโครงสร้างเว็บเเละระบบเนวิเกชั่น ทำให้รู้สึกคุ้นเคยเเละสามารถคาดการณ์
ลักษณะของเว็บได้ล่วงหน้า ทางด้านเทคนิดสามารถใช้ css กำหนดได้เพื่อให้เป็นมารตฐานเดียวกัน
       4.จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้าเสมอ    ควรประกอบด้วย
               1.ชื่อของเว็บ เพื่อให้ผู้ใช้ได้รู้ทันทีว่ากำลังอยู่ในเว็บอะไร
               2.ชื่อหัวเรื่อง
               3.สิ่งสำคัญที่เราต้องการโปรโมตเว็บ
               4.ระบบเนวิเกชั่น
       5.สร้างจุดสนใจด้วยความเเตกต่าง
           การจัดองค์ประกอบให้ภาพรวมของหน้ามีความเเตกต่างเป็นสิ่งสำคัญที่จะนำสายตาผู้อ่านไป
ยังบริเวณต่างๆ โดยการใช้สีที่ตัดกัน
       6. จัดเเต่งหน้าเว็บให้เป็นระเบียบ
เนือ้หาในหน้าเว็บจำเป็นต้องอยู่ในรูปแบบที่ดูง่ายเเยกเป็นสัดส่วน เเละดูไม่เเน่นจนเกินไป
       7.ใช้กราฟฟิกอย่างเหมาะสม
           ควรใช้กราฟิกที่เป็นไอคอน ปุ่ม ลายเส้น เเละสิ่งอื่นๆ ตามความเหมาะสมเเละไม่มากเกินไป
เพื่อหลีกเลี่ยงโครงสร้างที่หยุ่งเหยิงเเละไม่เป็นระเบียบ ส่วนตัวอักษรขนาดใหญ่ด้วยคำสั่ง h1 เเละ h2 ควรใช้ในปริมาณน้อยๆ เพื่อให้ได้ผลลัพธ์สูงสุด

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

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

 

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

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


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

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

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

  
  
       

                   

          วรรณะของสี คือสีที่ให้ความรู้สึกร้อน-เย็น ในวงจรสีจะมีสีร้อน 7 สี และ สีเย็น 7 สี     ซึ่งแบ่งที่ สีม่วงกับสีเหลือง ซึ่งเป็นได้ทั้งสองวรรณะ

  

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

         

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

            -สีเทาเกิดจากสีทุกสีๆ สีในวงจรสีผสมกันในอัตราส่วนเท่ากัน สีเทามีคุณสมบัติที่สำคัญคือใช้ผสมกับสีอื่นๆแล้วจะทำให้มืดหม่น ใช้ในส่วนที่เป็นเงา ซึ่งมีน้ำหนักอ่อนแก่ในระดับต่างๆ ถ้าผสมมากๆ เข้าจะกลายเป็นสีเทา

             สีกับอารมณ์ ความรู้สึก เเละความสัมพันธ์กับสิ่งต่างๆ

สีเเดง เเสดงถึงพลัง อำนาจความโมโห ความก้าวร้าว
สีน้ำเงิน เเสดงถึงความซื่อสัตย์ ความมั่นคง ปลอดภัย
สีเขียว เเสดงถึงธรรมชาต สุขภาพ ความยินดี
สีเหลือง เเสดงถึงความสดใส ร่าเริง การมองโลกในเเง่ดี ความหวัง ความอบอุ่น
สีม่วง เเสดงถึงความสูงส่ง ความสร้างสรรค์ ความรอบรู้ ความแปลกใหม่
สีส้ม เเสดงถึงกำลังความสามารถ ความเข้มเเข็ง กระตือรือร้น
สีน้าตาล เเสดงถึงความเรียบง่าย ความสะดวกสบาย ความมั่นคง เชื่อถือได้
สีเทา แสดงถึงความสุภาพ ความเป็นไปได้ ความมั่นคง
สีขาว เเสดงถึงความบริสุทธฺ์ ความไร้เดียงสา ความรัก ความฉลาด
สีดำ เเสดงถึงอำนาจ ความฉลาด ความเป็นเลิศ ความสุขม รอบคอบ