จัดวางเพจ (Page) อย่างไรให้สะดุดตา

จัดวางเพจ (Page) อย่างไรให้สะดุดตา

 

ความเรียบง่าย

 

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

 

ตัวอย่างของข้อมูล

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

 

ตัวอย่าง 

 

 

 

แม้จะเรียบง่าย แต่ก็ตื่นตา และน่าสนใจในขณะเดียวกัน

 

เนื้อหาอยู่กึ่งกลาง

 

       จากที่เคยกล่าวถึงไปเมื่อบทความก่อนหน้านี้ evolution of CSS layout ว่าหน้าเว็บในปัจจุบันเริ่มถูกออกแบบให้มีเนื้อหาอยู่กึ่งกลาง ตอนนี้เราก็สรุปได้แล้วว่าการวางเนื้อหาไว้ตำแหน่งกลางหน้าเว็บนั้น เป็นหลักการออกแบบที่ดีของดีไซน์ยุค 2.0

 

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

 

น้อยคอลัมน์

 

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

แยกส่วนหัวของหน้าเว็บอย่างชัดเจน

 

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

 

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

 

ส่วนต่างๆ ของหน้าเว็บประกอบไปด้วย

  • เมนู
  • พื้นหลัง
  • เนื้อหา
  • ส่วนอื่นๆ
  • ลิงค์

เมนูเรียบง่าย

 

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

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

 

       สิ่งสำคัญ คือ ต้องทำให้ลิงค์และเมนูดูโดดเด่นแตกต่างจากเนื้อหาส่วนที่ไม่ได้เป็นลิงค์

 

โลโก้ตัวหนา

 

       สอดคล้องไปกับหลักการดีไซน์ยุค 2.0 เพื่อสร้างภาพลักษณ์ที่ชัดเจนและหนักแน่น

 

ตัวอย่าง โลโก้ดังต่อไปนี้เป็นขนาดจริง สังเกตได้ว่าขนาดจะค่อนข้างใหญ่

 

คุณสมบัติของโลโก้

  • จำได้ง่ายและแตกต่าง
  • แสดงออกให้มองเห็นได้อย่างชัดเจน

          • เป็นตัวแทนภาพลักษณ์

 

ตัวอักษรตัวใหญ่

 

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

 

       การใช้ตัวอักษรตัวใหญ่ทำให้เราสามารถเข้าถึงกลุ่มเป้าหมายได้มากขึ้น ไม่ว่าจะเป็นคนสายตาสั้น ผู้อ่านที่อ่านผ่านๆ ผู้คนที่นั่งห่างไกลจากจอ หรือผู้ใช้จอ LCD ภายใต้แสงแดด

 

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

สีสันสดใส

 

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

 

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

 

มีลูกเล่นบนพื้นผิว

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

 

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

 

เงาสะท้อน

 

มีหลักๆ อยู่ 2 แบบ คือ

  • เงาสะท้อนบนพื้นผิวของตัววัตถุเอง

 

  • และเงาสะท้อนบนพื้นผิวที่วัตถุวางอยู่

 

 

Icon น่ารัก

 

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

 

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

 

ป้ายดาว

       ควรใช้เพื่อดึงดูดสายตาไปยังสิ่งที่สำคัญจริงๆเท่านั้น และไม่ควรใช้เกิน 1 ดาวต่อ 1 หน้า

  

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

 

 

 

 

Credit : คุณปัญญ์ชลี ไชยอุปละ อ้างอิง :  http://www.enjoyday.net/good-page-design.html

โดย :
 2597
ผู้เข้าชม

บทความที่เกี่ยวข้อง

แนะนำเครื่องมือ Text Editor สำหรับพัฒนาเว็บไซต์ที่นักพัฒนานิยมใช้ และมาแรงในช่วงนี้
มีคนถามเข้ามามากมายว่า "ทำอย่างไร ให้ Search Engine มองเห็นเว็บผมครับ?" หรือ บางคนก็ถามว่า "ทำอย่างไร ให้ Search Engine เข้าเว็บเราบ่อยๆคะ? ถึงขนาดมาทุกวันได้ยิ่งดี" บทความนี้จะไม่แค่ทำให้ Search Engine เข้าเว็บคุณบ่อยๆ แต่จะทำให้ Search Engine หลงรักเว็บคุณอย่างหัวปักหัวปำเลยทีเดียว

Feature SoGoodWeb

SoGoodWeb มีระบบรับชำระเงินแบบใหม่ผ่าน Pay Solution รองรับทุกธนาคารชั้นนำ ทำให้การจ่ายเงินผ่านช่องทางออนไลน์เป็นเรื่องง่าย ช่วยให้ลูกค้าจ่ายเงินออนไลน์ได้อย่างสะดวก
LINE Notify คือ บริการที่คุณสามารถได้รับข้อความแจ้งเตือนจากเว็บเซอร์วิสต่างๆ ที่คุณสนใจได้ทาง LINE โดยหลังเสร็จสิ้นการเชื่อมต่อกับทางเว็บเซอร์วิสแล้ว คุณจะได้รับการแจ้งเตือนจากบัญชีทางการของ “LINE Notify” ซึ่งให้บริการโดย LINE นั่นเอง
เหมาะสำหรับลูกค้าที่เปิดธุรกิจทัวร์ - ทัวร์ท่องเที่ยว ทั้งที่เป็นเจ้าของเอง หรือเป็นรายย่อย เป็นระบบจองทัวร์ ที่ช่วยทำให้การจัดการธุรกิจทัวร์ - ทัวร์ท่องเที่ยว ให้เป็นเรื่องง่าย
สร้างเว็บไซต์สำเร็จรูปฟรี ร้านค้าออนไลน์