หลักการออกแบบหน้าเว็บ
1.สร้างลำดับชั้นความสำคัญขององค์ประกอบ(Visual Hierarchy)
จัดตำแหน่งและลำดับขององค์ประกอบ แสดง
ลำดับความสำคัญของข้อมูลที่ต้องการให้ผู้ใช้ได้รับ
เนื่องจากภาษาส่วนใหญ่จะอ่านจากซ้ายไปขวา
และจากบนลงล่างจึงควรจัดวางสิ่งที่สำคัญไว้ที่ส่วนบนหรือด้านซ้ายของหน้า
อยู่เสมอ เพื่อให้ผู้ใช้มองเห็นได้ก่อน
สีและความแตกต่างของสี แสดง
ถึงความสำคัญและความสัมพันธ์ของสิ่งต่างๆ ภายในหน้า
สีที่เด่นชัดเหมาะสำหรับองค์กรที่สำคัญมาก
ส่วนองค์ประกอบที่ใช้สีเดียวกันย่อมสื่อความหมายถึงความสัมพันธ์ที่ใกล้ชิด
และความสำคัญที่เท่าเทียมกัน
การใช้สีที่แตกต่างกันอย่างชัดเจนจะสามารถดึงดูดควาามสนใจจากผู้ใช้ให้มอง
เห็นและตอบสนองได้อย่างรวดเร็ว
ภาพเคลื่อนไหว เป็น
สิ่งที่ดึงดูดความสนใจได้เป็นอย่างดีแต่จะต้องใช้อย่างจำกัดและระมัดระวัง
เพราะใช้สิ่งเคลื่อนไหวมากเกินไปจะทำให้จุดสนใจบนหน้าจอมากจนตัดสินใจได้
ยากกว่าสิ่งไหนสำคัญ
2.สร้างรูปแบบ บุคลิก และสไตล์
บุคลิก เว็บ แต่ละประเภทอาจมีบุคลิกลักษณะแตกต่างกันชึ้นอยู่กับเนื้อหาและเป้าหมายในการ นำเสนอ บุคลิกที่เหมาะกับเนื้อหาย่อมทำให้ผู้ใช้เข้าถึงเนื้อหาได้ดีขึ้น
สไตล์ คือ ลักษณะการจัดโครงสร้างของหน้า รูปแบบกราฟิกชนิดและการจัดตัวอักษร ชุดสีที่ใช้ รวมถึงองค์ประกอบอื่นๆ ซึ่งไม่ควรสร้างสไตล์ของเว็บตามใจชอบแต่ควรคำนึงถึงความเหมาะสม
ไม่ว่าจะเลือกรูปแบบ บุคลิก และสไตล์ใดมาใช้ ควรใช้ลักษณะเหล่านั้นให้สม่ำเสมอตลอดทั้งเว็บเพื่อป้องกันความสับสนที่อาจ เกิดขึ้นได้
3.สร้างความสม่ำเสมอตลอดทั่วทั้งไซต์
ความสม่ำเสมอของโครงสร้างหน้าเว็บและระบบเนวิเกชันทำให้ผู้ใช้รู้สึกคุ้นเคยและสามารถคาดการณ์ลักษณะของเว็บได้ล่วงหน้า
ทางด้านเทคนิคเราสามารถใช้ CSS ช่วยในการกำหนดสไตล์มาตรฐานได้
ข้อควรระวัง คือ บางครั้งอาจกลายเป็นข้อจำกัดทำให้เว็บดูน่าเบื่อ แนวทางแก้ไขคือการสร้างความต่างที่น่าสนใจในแต่ละหน้าโดยใช้องค์ประกอบที่ คล้ายคลึงกัน แต่มีสีหรือลักษณะ ต่างกันเล็กน้อยเพื่อทำให้เกิดลักษณะพิเศษของหน้านั้น
4.จัดวางองค์ประกอบทีสำคัญไว้ในส่วนบนของหน้าเสมอ
ส่วนบนสุดนี้ควรประกอบด้วย
1.ชื่อของเว็บ เพื่อให้ผู้ใช้ได้รู้ทันทีว่ากำลังอยู่ในเว็บอะไร
2.ชื่อหัวเรื่องหรือชื่อแสดงหมาวหมู่ของเนื้อหาที่ปรากฏ
3.สิ่งสำคัญที่เราต้องการโปรดมตเว็บ
4.ระบบเนวิเกชัน เพื่อให้ผู้ใช้คลิกส่วนที่ต้องการได้ทันที
5.สร้างจุดสนใจด้วยความแตกต่าง
เราสามารถใช้ความแตกต่างของสีเข้ามาช่วยสร้างลักษณะเด่นในหน้าเว็บ เพื่อนำสายตาผู้อ่านไปยังส่วนสำคัญของเนื้อหาได้
6.จัดแต่งหน้าให้เป็นระเบียบและเรียบง่าย
เราจำเป็นต้องจัดการข้อมูลในหน้าเว็บให้มีความรู้สึกที่เรียบร้อยเป็นกันเอง การจัดวางตัวอักษร และรูปภาพให้เกิดพื้นที่ว่าง ทำให้ภาพรวมไม่แน่นจนเกินไป รวมถึงควรจัดวางหัวข้อและเนื้อเรื่องอย่างเป็นระบบและชัดเจน
เนื้อหา ที่มีบรรทัดยาวเต็มความกว้างของหน้าจอเป็นสิ่งที่สร้างความลำบากต่อการอ่าน ควรจัดตัวหนังสือให้อยู่ในคอลัมน์ที่ไม่กว้างเกินไป
ข้อควรระวัง การ มีคอลัมน์ขนาดเล็กหลายคอลัมน์ต่อกันผู้อ่านต้องอ่านจากบนลงล่างและต้อง เลื่อนหน้าจอขึ้นมาด้านบนเพื่ออ่านคอลัมน์ถัดไป เพราะเป็นสิ่งที่ไม่สะดวกอย่างยิ่ง
7.ใช้กราฟฟิกอย่างเหมาะสม
ควรใช้กราฟฟิกที่เป็นไอคอน ปุ่ม ลายเส้น และสิ่งอื่นๆ ตามความเหมาะสมและไม่มากเกินไป เพื่อหลีกเลี่ยงโครงสร้างของหน้าที่ยุ่งเหยิงและไม่เป็นระเบียบ
ส่วนตัวอักษรขนาดใหญ่ด้วยคำสั่ง H1 และ H2 ควรใช้ในบริมาณน้อยๆ เพื่อให้ได้ผลลัพธ์สูงสุด การใช้กราฟฟิกมากเกินความจำเป็ฯทำให้เกิดจุดเด่นทั่งทั้งหน้าเป็นผลให้ไม่มี อะไรในหน้านั้นเด่นขึ้นมาจริงๆ
ปัจจัยหลักที่เกี่ยวข้องกับการท่องเว็บไซต์
เบราเซอร์ที่ใช้
เบราเซอร์คือโปรแกรมที่ใช้เรียกดูเว็บเพจ โดยสามารถแสดงผลได้ทั้งรูปแบบตัวอักษร,รูปภาพ และภาพเคลื่อนไหว มีเบราเซอร์หลายชนิดที่ได้รับความนิยม เช่น
- Internet explorer
- Netscape Navigator
- The World
- Opera
- Mozilla
- Firefox
ในอดีต มีการแข่งขันของเว็บเบราเซอร์สูง แต่ละผู้ผลิต ต่างพัฒนาคุณสมบัติใหม่ๆให้กับเบราเซอร์ของตัวเอง
ปัจจุบันได้มีองค์กรกลางได้ทำการกำหนดมาตรฐานเพื่อให้เป็นมาตรฐานกลาง นั่นคือ W3C
ปัจจุบันคนส่วนใหญ่นิยมใช้งาน IE ทำให้ผู้พัฒนาเว็บมีความสะดวกขึ้น แต่ก็ยังพบปัญหาที่เกิดขึ้นระหว่าง version ของ IE ที่สนับสนุนคุณสมบัติแตกต่างกัน
ระบบปฏิบัติการ(Operating System)
ระบบปฏิบัติการเป็นปัจจัยที่มีผลต่อการทำงานของเบราเซอร์มาก
โดยแต่ละระบบปฏิบัติการจะมีความแตกต่างกันในเรื่องของชนิดและรุ่นของ
เบราเซอร์ที่ใช้ได้, ระดับความละเอียดของหน้าจอ,ชุดสีของระบบ และชนิดของตัวอักษรที่มาพร้อมกับระบบ เป็นต้น
ความละเอียดของหน้าจอ
ขนาดของจอมอนิเตอร์มีหลายขนาด เช่น 15”,17”,21” และอื่นๆความละเอียดของหน้าจอ(monitor resolution) มีหน่วยเป็น Pixel
ความละเอียด 640x480 หมายถึง หน้าจอมีจุดพิกเซลเรียงตัวตามแนวนอน 640พิกเซล และตามแนวตั้ง 480 พิกเซล
ความ
ละเอียดของหน้าจอจะไม่ขึ้นอยู่กับขนาดของมอนิเตอรืที่ใช้
แต่จะขึ้นกับประสิทธิภาพของการ์ดแสดงผลว่าสามารถทำได้ละเอียดแค่ไหน
จำนวนสีที่จอผู้ใช้สามารถแสดงได้
มอนิเตอร์มีความสามารถแสดงสีที่แตกต่างกัน ขึ้นอยู่กับประสิทธิภาพของการ์ดจอ(Video Card)
จำนวนหน่วยความจำในการ์ด (Video memory) ที่มากขึ้นจะทำให้สามารถแสดงสีได้มากขึ้น
จำนวน สีที่การ์ดจอสามารถแสดงได้นั้น ขึ้นอยู่กับค่าความละเอียดของสีที่เรียกว่า bit depth หรือ color depth ซึ่งก็คือจำนวนบิตที่ใช้ในการเก็บข้อมูลแต่ละพิกเซล
ชุดสีสำหรับเว็บ (Web Palette) หมายถึงชุดสีจำนวน 216 สีที่มีอยู่เหมือนกันในระบบปฏิบัติการ Windows และ Mac
ปัจจุบัน Web Palette มีความสำคัญลดน้อยลง เนื่องจากจอของผู้ใช้สามารถแสดงสีได้มากขึ้น แต่ใน tool ต่างๆ เช่น Dreamweaver ก็ยังเห็นชุดสีได้มากขึ้น แต่ใน tool ต่างๆ เช่น Dreamweaver ก็ยังเห็นชุดสีเหล่านี้ปรากฏอยู่
จำนวน สีที่การ์ดจอสามารถแสดงได้นั้น ขึ้นอยู่กับค่าความละเอียดของสีที่เรียกว่า bit depth หรือ color depth ซึ่งก็คือจำนวนบิตที่ใช้ในการเก็บข้อมูลแต่ละพิกเซล
ชุดสีสำหรับเว็บ (Web Palette) หมายถึงชุดสีจำนวน 216 สีที่มีอยู่เหมือนกันในระบบปฏิบัติการ Windows และ Mac
ปัจจุบัน Web Palette มีความสำคัญลดน้อยลง เนื่องจากจอของผู้ใช้สามารถแสดงสีได้มากขึ้น แต่ใน tool ต่างๆ เช่น Dreamweaver ก็ยังเห็นชุดสีได้มากขึ้น แต่ใน tool ต่างๆ เช่น Dreamweaver ก็ยังเห็นชุดสีเหล่านี้ปรากฏอยู่
ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้
เบราเซอร์จะแสดงฟอนต์ที่กำหนดไว้ในเว็บเพจได้ก็ต่อเมื่อ คอมพิวเตอร์เครื่องนั้นมีฟอนต์เหล่านั้นติดตั้งอยู่ในเครื่อง
MS Sans Serif VS Microsoft Sans Serif
MS Sans Serif เป็นฟอนต์แบบบิตแมพ(bitmapped font)
ที่ออกแบบขึ้นจากจุดของพิกเซล
โดยมีการออกแบบแต่ละตัวอักษรไว้เป็นขนาดที่แน่นอน
Microsoft
Sans Serif
เป็นฟอนต์ที่มีโครงสร้างของอักขระเป็นแบบเวคเตอร์หรือลายเส็น(Vector font)
โดยมีการออกแบบเอาท์ไลน์ไว้เพียงแบบเดียว
แต่สามารถปรับขนาดได้อย่างไม่จำกัด
ความเร็วในการเชื่อมต่ออินเตอร์เน็ต
ความเร็วของอินเตอร์เน็ตจะมีผลต่อเวลาที่ใช้ในการแสดงผลของเว็บความเร็วของอินเตอร์เน็ตมีหลายระดับ
ผู้ใช้ตามบ้านส่วนใหญ่จะใช้ความเร็ว 56 kbps ในหน่วยงานบางแห่งอาจใช้อินเตอร์เน็ตความเร็วสูง เช่น ADSL,Cable modem ซึ่งมีความเร็วตั้งแต่ 128 kbps จนถึง 10 Mbps
ในฐานะผู้ออกแบบเว็บไซต์จึงเป็นเรื่องที่ท้าทายที่จะต้องออกแบบเว็บให้สวยงาม น่าสนใจ และดาวน์โหลดได้เร็ว โดยทำให้ไฟล์มีขนาดเล็กที่สุด
ขนาดหน้าต่างเบราเซอร์
ขนาดหน้าต่างของเบราเซอร์มีโอกาสที่ถูกปรับเปลี่ยนเป็นขนาดเท่าไหร่ก็ได้ตามความประสงค์ของผู้ใช้
คำถาม คือ เว็บเพจควรถูกออกแบบให้มีขนาดคงที่ตายตัว หรือเป็นแบบที่มีขนาดเปลี่ยนแปลงไปตามขนาดหน้าต่างเบราเซอร์
ออกแบบเว็บเพจให้เปลี่ยนแปลงขนาดได้ (Flexible Design)
ข้อดี
พื้นที่หน้าจอทั้งหมดถุกใช้อย่างเต็มที่เว็บเพจจะถูกจัดเรียงในรูปแบบที่เหมาะสมกับหน้าจอเสมอ
ข้อเสีย
ไม่สามารถคาดการณ์รูปแบบที่จะปรากฏต่อสายตาผู้ชมได้เนื่องจากมีการจัดรูปแบบใหม่ จึงทำให้เสียรูปแบบหน้าจอที่ออกแบบไว้เดิม
ออกแบบเว็บเพจให้มีขนาดคงที่ (Flexed design)
ข้อดี
เว็บเพจจะปรากฏต่อสายตาผู้ใช้เป็นรูปแบบเดียวกันเสมอสามารถควบคุมความยาวของตัวอักษรในบรรทัดได้ดี ทำให้ตัวอักษรไม่ยาวจนเกินไปในหน้าจอที่มีขนาดใหญ่มาก
ข้อเสีย
ต้องอาศัย scroll bar ในการเลื่อนดูข้อมูล
ความสว่างและค่าความต่างของโทนสี
นอกเหนือจากค่าแกมม่าที่มีผลต่อความสว่างของหน้าจอแล้ว ตัวผู้ใช้เองยังสามารถปรับระดับความสว่าง (Brightness) และความต่างของโทนสี (Contrast) จากมอนิเตอร์ได้
ผู้ออกแบบเว้บเพจต้องระวังไม่ให้หน้าเว็บมีโทนสีมืดหรือสว่างจนเกินไป และควรเลือกใช้โทนสีที่ต่างกันพอสมควร
การออกแบบกราฟฟิกสำหรับเว็บไซต์
- กราฟ ฟิกเป็นองค์ประกอบที่สำคัญอย่างหนึ่งของเว็บเพจ ช่วยสื่อความหมายสร้างความเข้าใจให้กับผู้ใช้ รวมทั้งช่วยสร้างความสวยงามให้เว็บไซต์น่าดูชมยิ่งขึ้น
- ปัญหาที่มักเกิดขึ้น กับการสร้างกราฟฟิกคือ การเลือกใช้รูปแบบกราฟฟิกที่ไม่เหมาะสมกับลักษณะของรูป โดยไม่รู้จักความแตกต่างของรูปแบบกราฟฟิก ส่งผลให้รูปที่ได้มีลักษณะไม่สมบูรณ์และมีไฟล์ใหญ่เกินความจำเป็น
โปรแกรมกราฟฟิกสำหรับเว็บ
- ปัจจุบันมีโปรแกรมหลายประเภทที่นำมาใช้ในากรสร้างกราฟฟิกสำหรับเว็บ
-Adobe PhotoShop
-Adobe ImageReady
-Firework
- ค่าพื้นฐานที่สามารถเลือกปรับได้คือ รูปแบบไฟล์,ชุดสีที่ใช้,จำนวนสี,ระดับความสูญเสีย,ความโปร่งใส และสีพื้นหลัง
- Adobe PhotoShop เป็นโปรแกรมที่ได้รับความนิยมตั้งแต่อดีตจนถึงปัจจุบัน
- Adobe ImageReady ลักษณะหน้าตาและเครื่องมือจะคล้ายคลึงกับ PhotoShop แต่จะถูกพัฒนาขึ้นเพื่องานกราฟฟิกโดยเฉพาะ และเพิ่มความสามารถในการสร้าง animation ได้
- Macromedia Fireworks มีคุณสมบัติในการตกแต่งตัวอักษรกราฟฟิกที่เห็นผลทันที การแสดงค่าของสีในระบบเลขฐานสิบหก การสร้างภาพเคลื่อนไหว และการตัดแบ่งภาพให้มีขนาดเล็กๆ สำหรับไฟล์ HTML
กราฟฟิกรูปแบบ GIF
- มีไฟล์นามสกุลเป็น .gif
- ลักษณะเด่นของ GIF คือการไม่ขึ้นกับระบบปฏิบัติการใดๆ
- GIF เป็นกราฟฟิกประเภทเดียวที่สามารถนำไปใช้กับเบราเซอร์ทุกชนิด โดยไม่ต้องคำนึงถึงเวอร์ชันใดๆ
- GIF มีคุณสมบัติในการเคลื่อนไหว
- GIF มีระบบสีแบบ Index เก็บข้อมูลสีได้สูงสุด 8 bit
- คุณสมบัติ Interlacing คือการบันทึกไฟล์ GIF เป็น 4 ระดับคือ ที่คุณภาพ 12.5%,25%,50% และ 100% ตามลำดับ ข้อดีคือผู้ใช้เห็นภาพที่กำลังดาว์นโหลดอยู่มีความชัดเตนขึ้นเรื่อยๆ ข้อเสียคือขนาดไฟล์จะเพิ่มขึ้นเล็กน้อย
- ระบบ การบีบอัดข้อมูลของ GIF - GIF มีการบีบอัดข้อมูลแบบไม่สูญเสีย (Lossless) หมายความว่าจะไม่มีการสูญเสียข้อมูลภาพจากการบีบอัด - GIF ใช้การบีบอัดที่เรียกว่า LZW (Lempel-Ziv-Welch) ซึ่งเป็นแบบเดียวกับที่ใช้ในโปรแกรม Zip โดยใช้ประโยชน์จากการจากความซ้ำซ้อนของข้อมูล
กราฟฟิกรูปแบบ JPEG
- มีนามสกุลเป็น .jpg หรือ .jpeg
- ใช้วิธีการบีบอัดข้อมูลแบบ JFIF(JPEG File interchange format)
- ไฟล์ประเภท JPEG ไม่ยึดติดกับระบบปฏิบัติการใดๆ และสามารถใช้ได้กับเบราเซอร์ทั้ง Netscape และ IE version 2 เป็นต้นไป
- ใช้ระบบสีขนาด 24 บิต ซึ่งจะให้สีสมจริงมากถึง 16.7 ล้านสีส่งผลให้ได้รูปที่มีคุณภาพสูง
- ระบบ การบีบอัดแบบ lossy คือสูญเสียรายละเอียดบางส่วนของภาพไป อาศัยประโยชน์จากการที่สายตาคนเราสามารถสังเกตเห็นการเปลี่ยนแปลงอย่างช้าๆ ในบริเวณกว้างๆ ได้ดีกว่าการเปลี่ยนแปลงในบริเวณแคบๆ
- ระบบ การบีบอัดข้อมูลในไฟล์ JPEG - ใช้วิธีเก็บข้อมูลความสัมพันธ์ของสีและความสว่างในรูปเหลี่ยมขนาด 8X8 พิกเซลให้อยู่ในรูปแผนภาพความถี่ โดยมีระบบ Discrete Cosine Transform(DCT) แบ่งแยกข้อมูลที่มีความถี่สูงและต่ำออกจากกัน จากนั้นข้อมูลบางส่วนในความถี่สูงจะถูกตัดไป จะมากหรือน้อยขึ้นอยู่กับระดับคุณภาพที่กำหนด
- ประสิทธิภาพ จะขึ้นอยู่กับการรวมกลุ่มของรายละเอียดในรูป เช่นท้องฟ้า(ความถี่ข้อมูลต่ำ) จะบีบอัดได้ดีกว่าใบไม้ใบหญ้า (ความถี่ข้อมูลสูง)
ไม่มีความคิดเห็น:
แสดงความคิดเห็น