LECTURE

บทที่ 5 ออกแบบระบบเนวิเกชั่น(Designing Web Navigation)

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

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

เนวิเกชั่นที่ดี จะต้องบรรลุวัตถุประสงค์ต่อไปนี้

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

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

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

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

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

           ระบบเนวิเกชั่นที่สำคัญเเละพบมากที่สุด คือเนวิเกชั่นที่อยู่หน้าเีดียวกับเนื้อหา ไม่ใช่เนวิเกชั่นที่อยู่ภายในเว็บ ซึ่งได้แก่ เนวิเกชั่นบาร์ เนวิเกชั่นระบบเฟรม  pull down  ,  pop up menu  ,  mage map  ,  searchbox

การออกแบบระบบเนวิเกชั่น  สร้างระบบเนวิเกชั่นหลัก

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

เนวิเกชั่นเเบบกราฟฟิก VS ตัวอักษร

           จะเลือกใช้เเบบใด้ก็ได้ขึ้นอยู่กับผู้ออกแบบ โดยปรกติรูปแบบกราฟิกจะดูสวยกว่าเเบบตัวอักษรอยู่เเล้ว เเต่อาจทำให้การเเสดงผลช้าลง

เนวิเกชั่นเเบบกราฟิกพร้อมคำอธิบาย

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

พื้นฐานของระบบเนวิเกชั่น

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

เพิ่มความคล่องตัวในการเคลื่อนที่

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

ระบบเนวิเกชั่นที่มีประสิทธิภาพ ควรมีคุณสมบัติ ดังนี้

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

บทที 8 เลือกใช้สีสำหรับเว็บไซต์(Designing Web Colors)

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

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

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

แม่สีขึ้นต้นมี 3 สี

     สีแดง
     สีเหลือง
     สีน้ำเงิน

การผสมสี(Color Mixing)   มี 2แบบ

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

           2.การผสมแบบลบ เป็นการผสมไม่เกี่ยวกับแสง แต่เกี่ยวกับการดูดกลืนและสะท้อนแสงของวัตถุต่างๆ การนำไปใช้งาน ภาพวาดของศิลปิน

วงล้อสี (Color wheel)

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

1.วงล้อสีแบบลบ

   2.วงล้อสีแบบบวก

สีที่เป็นกลาง(Neutral Colors)

    คือกลุ่มสีที่ไม่ได้ถูกบรรจุไว้ในวงล้อสี เพราะเป็นสีที่ไม่ได้รับอิทธิพลมากจากสีอื่น ซึ่งสีเทา ขาว ดำ

สีอ่อน สีเข้ม และโทนสี

           ในการผสมสีกลางเข้าก้บสีบริสุทธ์จะเกิดเป็นสีต่างๆ จำนวนมาก เช่น สีบริสุทธิ์ผสมกับสีขาว จะได้เป็นสีอ่อน สีบริสุทธิ์ผสมสีเทา จะได้เป็นโทนสีระดับต่างๆๆ  สีบริสุทธิ์กับสีดำจะได้เป็นสีเข็ม

รูปแบบชุดสีสามารถจัดเป็นกลุ่มง่ายดังนี้

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

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

รูปแบบกราฟฟิกสำหรับเว็บ (GIF , JPG และ  PNG)

     * GIF  ย่อมาจาก  Graphic  Interchange  Format

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

     * JPG  ย่อมาจาก  Joint  Photogtaphic  Experts  Group

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

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

             สามารถสนับสนุนระบบสีได้ทั้ง 8 บิต 16 บิต และ 24 บิต   มีระบบการบีบอัดแบบ Deflate ที่ไม่ทำให้เกิดการสูญเสีย (lossless) มีระบบการควบคุมค่าแกมม่า (Gamma)  และความโปร่งใส (Transparency) ในตัวเอง

ระบบการวัดขนาดของรูปภาพ

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

โปรแกรมกราฟฟิกสำหรับเว็บ

     -ปัจจุบันมีหลายประเภททีนำมาใช้ในการสร้างกราฟฟิกสำหรับเว็บ

          * Adobe   PhotoShop
          * Adobe  ImangeReady
          * Firework    

     - ค่าพื้นฐานที่สามารถเลือกปรับได้คือ  รูปแบบไฟล์,  ชุดสีที่ใช้ ,  จำนวนสี,  ระดับความสูญเสีย,  ความโปร่งใส และสีพื้นหลัง