Skip to main content
UX/UI

จัดลำดับความสำคัญ UI ด้วย Visual Hierarchy

ในส่วนของบทความนี้ หลายๆคนคงเคยเจอปัญหาหน้าเว็บรกจนไม่รู้ว่าจะมองตรงไหน ถ้าคุณเคยเจอปัญหานี้ แปลว่าเว็บนั้นขาดการ Visual Hierarchy วันนี้เราขอเสนอบทความเรื่องเกี่ยวกับการจัดลำดับความสำคัญขององค์ประกอบต่าง ๆ ในการออกแบบ User Interface เรียกอีกอย่างว่า Visual Hierarchy นั่นเอง และเพื่อการยกระดับการออกแบบไปอีกขั้น ดังนั้นเรามาทำความรู้จักกันเลยว่า Visual Hierarchy ในบทความนี้กันได้เลย……..

เขียนโดย
Thanatorn Prangsrithong – Internship @ borntoDev

Visual Hierarchy คืออะไร?

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


Visual Hierarchy สามารถทำได้โดยวิธีดังต่อไปนี้:


1. การเลือกใช้สียังไงให้เหมาะกับงาน

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

 

2. แล้ว Contrast คืออะไรล่ะ ?

Image from sketchappsources  

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

 

3. ทำไมต้องกำหนดสัดส่วน…

Image from Cartoonity.com by Martin

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

 

4. แล้วการจัดกลุ่มมันดียังไง

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

 

สรุปสุดท้ายสิ่งที่ผู้อ่านจะได้รับ

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

        เป็นอย่างไรกันบ้างคะทุกคน การสร้าง Visual Hierarchy ไม่ได้ยากอย่างที่คิดเลยใช่ไหมคะ หวังว่าบทความนี้จะเป็นประโยชน์กับผู้อ่านไม่มากก็น้อยนะคะ

 

อ้างอิงจาก

1. Design Stack24, [UI Design] Visual Hierarchy แบบเข้าใจง่ายมากๆๆ, May 6, 2020, from: https://medium.com/@4namikaze.minato4/visual-hierarchy-แบบเข้าใจง่ายมากๆๆ-9234626ff62a [Accessed 12 Jan 2022]

2. UI blogger, Visual Hierarchy in UX/UI Design, Jan 12, from : https://uxplanet.org/visual-hierarchy-in-ux-ui-design-97d8526c5e35 [Accessed 12 Jan 2022]

หากคุณสนใจพัฒนา สตาร์ทอัพ แอปพลิเคชัน
และ เทคโนโลยีของตัวเอง ?

อย่ารอช้า ! เรียนรู้ทักษะด้านดิจิทัลเพื่ออัพเกรดความสามารถของคุณ
เริ่มตั้งแต่พื้นฐาน พร้อมปฏิบัติจริงในรูปแบบหลักสูตรออนไลน์วันนี้

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

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

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

  • คุกกี้สำหรับการติดตามทางการตลาด

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

บันทึกการตั้งค่า