Page 12 - ชิ้นงานโครงงาน สหรัฐ

่
1.3 กำรออกแบบเวบไชด์ทีดี ควรมีลักษณะดังต่อไปน ี ้
็
่
็
ู
ู
กำรออกแบบเวบไซต์ 1.3.1โครงสร ้ำงทีชัดเจน ผ้ออกแบบเวบไชด์ควรจัดโครงสร ้ำงหรือจัตระเบียบของข้อมล
็
่
้
็
ทีชัดเจบแยกอยเนอหำออกเปนส่วนต่ำงๆ
ื
่
่
1.3.2 กำรใช ้งำนทีง่ำย ลักษณะของเวบทีมีกำรใช ้งำนง่ำย จะช่วยให้ผ้ใช ้รู้สึกสบำย ต่อ
ู
็
่
้
ื
่
ู
็
กำรอ่ำนและสำมำรถท�ำควำมข้ำใจกับเนอหำได้อย่ำงเตมที ผ้ออกแบบควรก�ำหนดปุมกำรใช ้งำนที ่
้
่
่
ชัดเจนเหมำะสมโดยเฉพำะปุมควบคุมเส้นทำงกำรเข้ำสูเนอหำ (Navigaloa) ไมว่ำจะเปนเดินหน้ำ
ื
่
็
1. หลักกำรออกแบบเวบไซต์ ่
็
็
็
็
็
หรือถอยหลัง หำกเปนเวบไชทีมีเวบเพจจ�ำนวนมำกควรจะจัดท�ำแผนผังของเวบไซต์ (Sแe Map
่
่
้
่
่
ู
ี
เพือช่วยให้ผ้ใช ้รู้ว่ำตอนนอยู ณจุดใด หรือมีเครืองมือสีบคัน (Seach Engine) เพือช่วยในกำร
่
ค้นหำข้อมลทีต้องกำร
ู
่
่
่
่
่
็
่
่
็
�
็
กำรสร ้ำงเวบไชด์ทีดีควรนำควำมรู้ในหลำยๆ ด้ำนมำประกอบกัน ไมว่ำจะเปนควำมรู้ด้ำนภำษำ 1.3.3 กำรเชือมโยง link ครจัดอยูในรูปแบทีเปนมำตรฐำนทัวไป กำรเชือมโยงมำกและ
่
่
่
่
่
่
HTML ควำมรู้ด้ำนกรำพิก ควำมรู้ด้ำนกำรออกแบบ ควำมรู้ด้ำนศิลปะและสี เพือท�ำให้เวบไซค์ กระจัดกระจำยอยูทัวไปอำจก่อให้เกิดควำมสับสนค�ำทีใช ้ส�ำหรับกำรเชือมโยงจะต้องเข้ำใจงำยมี
็
่
้
่
้
้
้
่
็
ึ
็
ดูเหมำะสมสวยงำมและมีเอกลักษณ์ทีท�ำให้นำสนใจ ตังนนกำรออกแบบเวบไซต์จะต้องค�ำนงถึงผ้ ู ควำมชัดเจนและไมสันจนเกินไปนอกจำกนในเเต่ละเวบเพจทีสร ้ำงขึนมำควรมีจุดเชือมโยงกลับ
ั
ี
่
่
่
้
้ ่
่
่
้
ี
็
่
เยียมชมเวบไซต์เปนส�ำคัญ เชน กำรท�ำเวบไชต์เพือกำรศึกษำ ดังนนลักษณะของเวบไชต์ทออกมำ มำยังหน้ำแรกของเวบไซต์ทีก�ำลังใช ้งำนอยูด้วยทังนเผือว่ำผ้ใช ้เกิดหลงทำงและไมทรำบว่ำจะท�ำ
็
็
็
็
ู
่
็
ั
่
่
่
่
่
ควรจะเปนไปอย่ำงเรียบงำยสบำยตำ กำรใช ้งำนและหำข้อมลต่ำงๆ ไมควรยุงยำกขับซ ้อนมำกเกิน อย่ำงไรต่อไป จะได้มีหนทำงกลับมำสูจุดเริมตันใหม ระวังอำจให้มีหน้ำทีไมมีกำรเชือมโยง (Oเplan
็
่
ู
่
่
ู
่
�
ไปนก Page) เพรำะจะทำให้ผ้ใช ้ไมรู้จะท�ำอย่ำงไรต่อไป
ั
้
้
่
ื
็
1.1 กำรก�ำหนดรนำดเวบเพจ ในปจจุบันเวบไซต์นอกจำกจะสำมำรถเรียกดูได้ทำงคอมพิวเตอร ์ 1.3.4 ควำมเหมำะสมในหน้ำจอ เนอหำทีนำเสนอในแต่ละหน้ำจอควรสัน กระชับ และทันมัย
็
�
ั
่
่
่
้
่
็
็
็
แล้วอุปกรณ์อืนๆ เช่น แทบเลต โทรศัพท์มือถือทีเปนแบบ Smart Phane กสำมำรถรียกดูใต้เช่น หลีกเลียงกำรใช ้หน้ำจอทีมีลักษณะกำรเสือนขึนลง Saollang) แต่ถ้ำจ�ำเปนต้องมีควรจะให้ข้อมล
็
็
ู
่
่
่
่
้
้
ั
็
กัน ซึงขนำดหน้ำจอทีแตกต่ำงกันไปตำมอุปกรณ์นน ดังนนในกำรก�ำหนดนำดเวบเพจต้องค�ำนงถึง ทีมีควำมส�ำคัญอยูบริเวณด้ำนบนสุดของหน้ำจอหลีกเสียงกำรใช ้กรำพิกด้ำนบนของหน้ำจอเพรำะ
่
ึ
ั
่
้
่
ู
ู
อุปกรณ์ทีจะเรียกดูเวบไชต์ด้วย โดยขึนอยูกับกำรออกแบบเวบไซต์ว่ำต้องกำรให้แสดงบนอุปกรณ์ ถึงแม้จะดูสวยงำมแต่จะท�ำให้ผ้ใช ้เสียเวลำในกำรได้รับข้อมลทีต้องกำร และหำกต้องมีกำรใช ้ภำพ
็
็
่
่
้
้
่
้
้
ั
ื
็
ี
ิ
ชนดไหน ส�ำหรับเนอหำในหัวข้อนจะกลำวถึงกำรก�ำหนดขนำดของเวบเพทีแสคงบนคอมพิวเตอร ์ ประกอบกควรใช ้เฉพำะทีมีควำมสัมพันธ์กับเนอหำเทำนน
็
ื
้
่
่
่
้
ิ
ั
เทำนน ขนำดของเวยเพจทีนยมนำมำใช ้เพือแสดงผลบนคอมพิวเตอร ์ในอดีตและปจจุบัน มีตังน ี ้ 1.3.5 กำรใช ้รูปภำพเพือเปนพืนหลัง (Badground) ไมควรเน้นสีสันทีฉดฉำดมำกนก
�
ั
่
็
ั
ู
็
้
่
่
็
1.1.1 เวบเพอชนำด 800x 600 pixels เปนชนำดทีสำมำรถใช ้โด้กับหน้ำจอทุกขนำด เพรำะอำจจะไปลดควำมเด่นชัดของเนอหำลง ควรใช ้ภำพทีมีสีอ่อนๆ ไมสว่ำงจนเกินไป ส่วนกำร
็
่
ื
่
่
่
่
่
ิ
ในปจจุบันและเปนขนำดของกำรออกแบบเวบไชต์ทีใช ้ในอดีต เนองจำกอดีตขนำดของจอคอมฟว ใช ้เทคนคต่ำงๆเช่น ภำพเคลือนไหวหรือตัวอักษวิง (Maqure) ซึงอำจจะเกิดกำรรบกวนกำรอ่ำนได้
็
ื
็
ิ
ั
่
้
่
่
ั
�
็
่
่
เตอร ์มีขนำดเลกและควำมละเอียดของจอกยังไมมำกเท่ำทุกวันน ี ้ ควรใช ้เฉพำะทีจ�ำเปนจริงๆ เท่ำนน ตัวอักษรทีนำมำแสดงบนจอภำพควรเลือกขนำดทีอ่ำนงำยไมมี
็
็
่
่
็
ู
ิ
1.1.2 เวบเพจชนำด J026x 768 pixes เปนชนำดทีนยมในปจจุบัน เพรำะผ้ใช ้นยมใช ้ สีสันและเวดลำยมำกเกินไป
ิ
ั
็
่
่
่
่
่
่
้
่
็
ู
ู
ื
ู
จอคอมพิวเตอร ์ขนำดใหญ่ขึนเนองมำจำกรำคำจอคอมพิวเตอร ์ทีถูกลง ส�ำหรับผ้ทีใช ้ควำละเอียด 1.3.6 ควำมรวดเร็ว เปนสิงส�ำคัญส�ำหรับผ้ใช ้ ซึงผ้ใช ้อำจจะเกิดอำกำรเบือหนำยและหมด
่
่
้
หน้ำจอด�ำกว่ำน เวบไชค์จะนจอและทำให้เกิดแกบสกรอสบำร ์12 กำรออกแบบเวบไซด์ ส่วนใหญ่ ควำมสนใจเวบทีใช ้เวลำในกำรแสดงนำน สำเหตุส�ำคัญทีจะท�ำให้กรแสดงผลนำน คือ กำรใช ้ภำพ
�
ี
็
็
็
่
้
่
้
่
่
็
�
ื
ั
จะมองดูองค์ประกอบขององค์กร หนวยงำน หรือเนอหำทีนำเสนอเปนหลัก โดยมีหลักกำรออกแบบ กรำฟกหรือภำพเคลือนไหวทีขนำดใหญ่เเละมีมำกเกินไป จำกนนในกำรออกแบบจึงควรหลีกเสียง
ิ
่
่
ิ
็
่
ี
ดังน ้ กำรใช ้ภำพขนำดใหญ่หรือภำพเคลือนไหวทีไมจ�ำเปน และพยำยำมใช ้กรำฟกแทนตัวอักษรธรรมดำ
้
่
่
็
่
ื
1.2 กำรออกแบบเวบไซต์ ส่วนใหญ่จะมองดูองค์ประกอบขององค์กร หนวยงำน หรือเนอหำที ่ ให้น้อยทีสุดโดยไมควรใช ้กิน 2-3 บรรทัดในแต่ละหน้ำจอ
้
�
ื
็
็
็
นำเสนอเปนหลัก 1.4 กำรออกแบบโรงสร ้ำงเวบไชด์ คือ กำรวำงแผนกำรจัดล�ำดับเนอหำสำระของเวบไซด์
้
่
่
่ ้
่
ั
็
�
็
็
ู
็
็
1.2.1 กำรออกแบบหน้ำของเวยไซต์ มีอยู 3 แบบ คือกำรออกแบบเวบไต์ทีเนนกำรนำเสนอ ออกเปนหมวดหม ู ่ เพือจัดท�ำเปนโครงสร ้ำงในกำรจัดวำงหน้ำเวบเพจทังหมดท�ำให้ผ้เข้ำเยียมชม
้
่
่
้
่
้
ู
�
เนอหำ เปนกำรออกแบบเวไชต์ทีเน้นกำรนำเสนอเนอหำมำกกว่ำรูปภำพ โดยโครงสร ้งใช ้รูปแบบ สำมำรถคันหำข้อมลในเวบเพจได้อย่ำงเปนระบบ ซึงถือว่ำเปนชันตอนทีส�ำคัญของกำรออกแบบ
็
ื
็
็
็
ื
็
้
่
้
่
็
ู
ื
ตำรำงเปนหลัก มีกำรออกแบบหน้ำตำรูปแบบงำยเชน มีเมนสำรบัญและเนอหำ เปนต้น2 กำร โครงสร ้ำงหรือจัดระเบียบของข้อมลทีชัดน แยกย่อยเนอหำออกเปนส่วนต่ำงๆ ทีมีควำมสัมพันธ์กัน
่
ุ
็
ื
็
่
่
่
่
็
่
่
็
ออกแบบเวบไชต์ทีเน้นภำพกรำฟก เปนกำรออกแบบเวบไชต์ทีเน้นภำพกรำฟกทีสวยงำม ซึงอำจ จะช่วยให้นำใช ้งำนและงำยต่อกำรเข้ำใช ้งำนเวบไซต์ หลักในกำรออกแบบโครงสร ้ำงเวบไชด์ ควร
็
็
็
ิ
ิ
จะใช ้โปรแกรม Photshop ส�ำหรับกรตกแต่งภำพ ข้อดี สวยงำม นำสนใจ ข้อเสีย อำจจะใช ้เวลำใน พิจำรณำดังน ี ้
�
่
่
่
้
้
ื
็
็
กำรโหลดเวบนำน กำรออกแบบวบไชต์ทีมีทังภำพและเนอหำ เปนกำรออกแบบเวบทีนยมในปจจุบัน 1.4.1 ก�ำหนดวัตประสงค์ของกำรสร ้ำงเวบไซต์ว่ำท�ำเพืออะไร
ิ
ั
็
็
็
่
่
่
้
่
็
ซึงประกอบด้วข้อควำม รูปภำพ โดยมีกำรจัดองค์ประกอบต่ำงๆ เพือให้เวีบนำสนใจ 1.4.2 ก�ำหนดกลุมเปำหมำยของผ้ทีจะเข้ำมำดูเวบไซต์
่
ู
้
่
่
ื
1.2.2 กำรเลือกใช ้ทโโลวบไซค์เพือให้มีควำมเหมำะสมกับงำน เช่น HTMLS, CSS. 1.4.3 วำงแผนเกียวกับกำรจัดรูปแบบโครงสร ้ำงเนอหำ
็
่
่ ้
ื
ู
็
Semantic Wb เปนต้น กำรออกแบบเวบไซด์ต้องมีกำรจัดโครงสรัำงหรือจัดระเบียบชัอมลทีชัดเจนกำรทีเนอหำมีควำมต่อ
็
่
้
่
้
่
ู
ื
็
ั
1.2.3 เลือกโปรแกรมเบรำมีซอร ์ทีใช ้ในกำรแสดงเวบไซด์ เช่น TE, Chrome, Safarl, เนองไปไมสินสุดหรือกระจำยมำกเกินไปอำจท�ำให้กิดควมสับสนด่อผ้ใช ้ได้ ฉะนนจึงควรออกแบบ
็
่
Firefox ให้มีลักษณะทีชัดเจนแยกยอยออกเปนส่วนต่ำงๆ
่
เปนต้น ซึงโปรแกรมเบรำว์เซอร ์แต่ละตัวแสดงผลกำรท�ำงำนต่ำงกัน
็
12 13