การออกแบบหน้าจอสำหรับการเรียนการสอนบนเว็บ

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

computer design

การออกแบบหน้าจอแบ่งออกเป็น

  1. การออกแบบทั่วไป เน้นความเรียบง่ายไม่ซับซ้อนแต่สวยงามและกลมกลืน หลีกเลี่ยงการออกแบบที่ตกแต่งเกินความพอดี เพราะจะดูน่ารำคาญไม่น่าเชื่อถือ การออกแบบเนื้องหา ถูกต้อง กระชับ จัดเจน ทันสมัย จัดลำดับหมวดหมู่ชัดเจน มีการอ้างอิงที่มา
    จัดให้มีเนื้อที่ว่างบนหน้าจอ (white space)เพื่อให้หน้าจอไม่แน่นจนเกินไป ออกแบบให้มีการต่อเนื่อง และสม่ำเสมอ
    ไม่ควรใช้ไฟล์ข้อมูลที่ใหญ่เกินไป เพราะจำให้เสียเวลาในการเปิดหน้าเว็บ
    ควรตรวจสอบการมองเห็นจากหลาย Browser
  2. การเลือกสี ใช้สีเพื้นหลังกับสีอักษรที่แตกต่างกันเพื่อให้มองเห็นได้ชัดเจน ไม่ควรใช้สีตัดกันเกินไป สีการเชื่อมโยง ช่วยแยกความแตกต่างของข้อความธรรมดากับข้อความเป็นตัวเชื่อมได้ เช่น Hiperlink การเน้นสีข้อความ ควรเป็นสีที่เด่นกว่าเนื้อความ
  3. การออกแบบปุ่มและสัญรูป มีความเป็นรูปธรรม สากล มองเห็นและแปลความง่าย รวมทั้งมีรูปแบบที่เป็นอันหนึ่งอันเดียวกัน เช่น สัญลักษณ์ปุ่ม facebook จัดกลุ่มที่มีหน้าที่ใกล้เคียงกันไว้ใกล้กัน โดยแยกกลุ่มหน้าที่แตกต่างกันไว้ห่างกัน จัดวางในตำแหน่งที่มองเห็นได้ชัดเจน และตำแหน่งเดิมทุกหน้าจอ หากภาพสื่อความหมายไม่ชัดเจน ควรใช้ข้อความกำกับหรืออาจใช้แถบสีครอบข้อความ
  4. รูปแบบตัวอักษร ใช้รูปแบบตัวอักษรที่อ่านง่าย ไม่หวือหวา และเป็นรูปแบบมาตรฐาน หลีกเลี่ยงตัวอักษรแบบเอียง หรือขีดเส้นใต้ ควรใช้อักษรตัวหน้าหรือสีแทนหากต้องการเน้นตัวอักษรภาษาอังกฤษ ให้ใช้ตัวพิมพ์เล็ก หลีกเลี่ยงอักษรตัวพิมพ์ใหญ่ทั้งหมด ยกเว้นขึ้นต้นคำหรือประโยค ใช้ตัวอักษรให้มีขนาดที่อ่านได้ง่าย โดยชื่อเรื่องหรือหัวข้อควรมีขนาดใหญ่กว่าเนื้อความ ไม่ควรบรรจุข้อความเต็มหน้าจอ ข้อความแต่ละบรรทัดไม่ควรยาวเกินไป ใช้ตัวอักษรหัวข้อหลัก หัวข้อรองในแต่ละหน้าอย่างคงเส้นคงวา
  5. กราฟิก ใช้ภาพที่มีขนาดใหญ่เพียงพอ และสามารถดาวน์โหลดได้อย่างรวดเร็ว โดยไม่เกินกว่า 10 วินาที สามารถใช้กราฟิกกับหัวข้อเรื่องกับข้อความเพื่อลดปัญหาการไม่มีรูปแบบตัวอักษรในคอมพิวเตอร์ของผู้ใช้ ใช้เส้นแบ่งหรือเส้นคั่น เพื่อแยกหัวข้อกับส่วนท้ายของหน้า ภาพพื้นหลังไม่ควรเด่นกว่าข้อความ

Cr. thai mooc –การออกแบบสาร | Message Design

Visits: 103

Comments

comments

Back To Top