LECTURE

  LECTURE  

บทที่ 5 

ออกแบบระบบเนวิเกชั่น Designing Web Navigation


ความสำคัญ

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



วัตถุประสงค์

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

รูปแบบของเนวิเกชัน แบ่งเป็น 4 รูปแบบ
    1. ระบบเนวิเกชันแบบลำดับขั้น
    2. ระบบเนวิเกชันแบบโกลบอล
    3. ระบบเนวิเกชันแบบโลคอล
    4. ระบบเนวิเกชันเฉพาะที่

องค์ประกอบของระบบเนวิกเกชันหลัก (Main Navigation Elements)
        ระบบเนวิกเกชันที่สำคัญและพบได้มากที่สุดคือ เนวิเกชันที่อยู่ในหน้าเดียวกับเนื้อหา ไม่ใช่เนวิกเกชันที่อยู่ในหน้าแรก เนื่องจากเมื่อผู้ใช้ผ่านหน้าแรกเข้าไปสู่ภายในเว็บไซท์แล้ว ก็ไม่อยากจะกลับมาเริ่มต้นใหม่ที่หน้าแรกทุกครั้งก่อนจะเข้าไปดูเนื้อหาในส่วนอื่นๆต่อ ระบบเนวิเกชันหลักทั้งแบบโกบอลและแบบโลคอล จึงช่วยให้ผู้ใช้สามารถย้ายจากหน้าใดๆ ไปสู่ส่วนอื่นในเว็บไซท์ได้อย่างคล่องตัว องค์ประกอบของเนวิกเกชันมีได้หลายรูปแบบ ได้แก่ เนวิเกชั่นบาร์ เนวิกเกชันเฟรม Pull down, menu, pop-up menu, image map และ search box


บทที่ 9
 ออกแบบกราฟฟิกสำหรับเว็บไซต์( Designing Web Graphics )

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

       ปัญหาที่มักเกิดขึ้นกับการสร้างกราฟฟิกคือ การเลือกใช้รูปแบบรากฟฟิกที่ไม่เหมาะสมกับลักษณะของรูป โดยไม่รู้จักความแตกต่างของรูปแบบกราฟฟิก ส่งผลให้รูปที่ได้มีลักษณะไม่สมบูรณ์และมีไฟล์ใหญ่เกินความจำเป็นรูปแบบกราฟฟิกสำหรับเว็บ (GIF , JPG และ PNG)

           GIF ย่อมาจาก Graphic Interchange Formatได้รับความนิยมในยุคแรก
  • มีระบบสีแบบ 
    • Index ซึ่งมีข้อมูลสีขนาด 8 บิต ทำให้มีสีมากสุด 256 สี
  • มีการบีบอัดข้อมูลตามแนวของพิกเซล เหมาะสำหรับกราฟฟิกที่ประกอบด้วยสีพื้น

           JPG ย่อมาจาก Joint Photographic Experts Groupมีข้อมูลสีขนาด 24 บิต (True Color) สามารถแสดงสีได้ถึง 16.7ล้านสีใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย (lossy)
  • ไฟล์ประเภทนี้ควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่
    • ระดับสีอย่างละเอียด

           PNG ย่อมาจาก Portable Network Graphic

  • สามารถสนับสนุนระบบสีได้ทั้ง 8 บิต 16 บิต และ 24 บิต
  • มีระบบการบีบอัดแบบ Deflate ที่ไม่ทำให้เกิดการสูญเสีย (lossless)
  • มีระบบการควบคุมค่าแกมม่า (Gamma) และความโปร่งใส(Transparency)ในตัวเอง
ระบบการวัดขนาดรูปภาพ
          รูปภาพที่ใช้หน่วยวัดขนาดตามหน้าจอมอนิเตอร์ คือ หน่วยพิกเซล(Pixel) ซึ่งมีประโยชน์ในการเปรียบเทียบขนาดของกราฟฟิกกับองค์ประกอบอื่นๆในหน้าเว็บรวมถึงขนาดของหน้าต่างบราวเซอร์ด้วย
ระบบการวัดความละเอียดของรูปภาพ
         ระบบความละเอียดของรูปภาพที่แสดงผลบนจอมอนิเตอร์ควรใช้หน่วย Pixel per inch(ppi) แต่ในทางการใช้งานจะนำหน่วย dot per inch(dpi) ซึ่งเป็นหน่วยวัดความละเอียดของสิ่งพิมพ์มาใช้แทนโดยความละเอียดของรูปภาพที่ใช้ควรมีความละเอียดแค่ 72 ppi ก้อเพียงพอแล้ว
  • สามารถสนับสนุนระบบสีได้ทั้ง 
    • 8 บิต 16 บิต และ 24 บิต
  • มีระบบการบีบอัดแบบ 
    • Deflate ที่ไม่ทำให้เกิดการสูญเสีย (lossless)
  • มีระบบการควบคุมค่าแกมม่า 
    • (Gamma) และความโปร่งใส(Transparency)ในตัวเอง
ระบบการวัดขนาดรูปภาพ รูปภาพที่ใช้หน่วยวัดขนาดตามหน้าจอมอนิเตอร์ คือ หน่วยพิกเซล(Pixel) ซึ่งมีประโยชน์ในการเปรียบเทียบขนาดของกราฟฟิกกับองค์ประกอบอื่นๆในหน้าเว็บรวมถึงขนาดของหน้าต่างบราวเซอร์ด้วยระบบการวัดความละเอียดของรูปภาพ ระบบความละเอียดของรูปภาพที่แสดงผลบนจอมอนิเตอร์ควรใช้หน่วย Pixel per inch(ppi) แต่ในทางการใช้งานจะนำหน่วย dot per inch(dpi) ซึ่งเป็นหน่วยวัดความละเอียดของสิ่งพิมพ์มาใช้แทนโดยความละเอียดของรูปภาพที่ใช้ควรมีความละเอียดแค่ 72 ppi ก้อเพียงพอแล้ว





บทที่ 10

 จัดรูปแบบตัวอักษรสำหรับเว็บไซต์ (Typography on the Web)
  • ตัวอักษรมีหลายชนิด แต่ละชนิดจะให้อารมณ์และความรู้สึกที่แตกต่างกัน ควรเลือกใช้ตัวอักษรให้ เหมาะสมกับเนื้อหาและข้อมูลที่ต้องการสื่อ 
  • ตัวอักษรมีความสำคัญในการสื่อข้อความถึงผู้ใช้

ส่วนประกอบของตัวอักษร

Ascender : ส่วนบนของตัวอักษรพิมพ์เล็กที่สูงกว่าความสูง x-height ของตัวอักษร
Descender : ส่วนล่างของตัวอักษรพิมพ์เล็กที่ต่ำกว่าเส้น baseline
Baseline : เส้นสมมติที่ตัวอักษรส่วนใหญ่ตั้งอยู่ 
Cap height : ความสูงจากเส้น baseline ไปถึงส่วนบนสุดของตัวอักษรพิมพ์ใหญ่ 
X-height : ความสูงของตัวอักษร x ในแบบพิมพ์เล็ก ซึ่งมักใช้อ้างถึงความสูงของตัวอักษรที่ไม่รวม ascender และ descender   Point size : ระยะความสูงทั้งหมดวัดจากส่วนบนสุดถึงส่วนล่างสุดของตัวอักษร 
ค่าความสูง x-height : จะมีผลต่อภาพรวมของตัวอักษรและความยากง่ายในการอ่าน
ความสะดวกในการอ่าน (Legibility) 
  •  หลีกเลี่ยงการใช้คำที่เป็นตัวพิมพ์ใหญ่ทั้งหมด เพราะจะทำให้อ่านยาก และลดความสะดุดตาลง
  • การใช้ตัวพิมพ์เล็กทั้งหมดในประโยค จะสร้างความรู้สึกไม่เป็นทางการ และแสดงถึงความไม่สมบูรณ์ของเนื้อหา
  • การใช้ตัวพิมพ์ใหญ่สำหรับตัวอักษรตัวแรกของแต่ละคำในประโยค ควรใช้อย่างจำกัด เพราะเป็นการรบกวนรูปแบบโดยรวมของคำ ส่งผลให้อ่านยากขึ้น
  • ไม่ควรแบ่งครึ่งสีตัวอักษรเพราะทำให้ภาพรวมของตัวอักษรขาดหายไป


สิ่งที่ควรคำนึงในการจัดข้อความให้หน้าเว็บ 
  • การจัดตำแหน่ง (Alignment)
  • ช่องว่างระหว่างตัวอักษร และช่องว่างระหว่างคำ
  • การจัดตำแหน่งแบบ justify ทำให้เกิดช่องว่างของแต่ละคำ
  • ระยะห่างระหว่างบรรทัด
  • ความยาวของหน้าเว็บ
  • ขนาดของตัวอักษร
  • ดึงดูดความสนใจด้วยอักษรตัวใหญ่
  • การเน้นข้อความให้เด่นชัด
  • การใช้สีกับตัวอักษร
  • การกำหนดขอบแบบ Aliased และ Anti-aliased
คำแนะนำในการใช้ตัวอักษรในหน้าเว็บ
  • ไม่ควรใช้ตัวอักษรชนิดที่หายากหรือไม่ได้มาพร้อมกับโปรแกรมต่างๆหรือเครื่องคอมฯ
  • ระบุชนิดตัวอักษรให้ครอบคลุม
  • กำหนดลักษณะของตัวอักษรที่อยู่ในทุกช่องของตาราง
  • ระบุขนาดของตัวษรเสมอ
  • ใช้ CSS ในการควบคุมรูปแบบการแสดงผล  

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

สมัครสมาชิก: ความคิดเห็น (Atom)