ภาพกราฟิกสวย ๆ มีความลับซ่อนอยู่เสมอ ซึ่งในครั้งนี้ความลับนั้นก็คือ “การเรียงลำดับภาพ (Visual Hierarchy)” เป็นเทคนิคที่สายกราฟิกใช้เพื่อไล่ระดับการมองเห็น เพื่อให้ผู้ชมเข้าใจภาพรวมของงานไปในทิศทางเดียวกัน ไม่ให้พวกเขาหลงทางระหว่างการมองงานกราฟิก ซึ่งสามารถนำไปใช้ในงานเว็บไซต์ แอปพลิเคชั่น โปสเตอร์ ฯลฯ
ในครั้งนี้เราจะมาให้ความรู้เกี่ยวกับการเรียงลำดับ ภาพกราฟิก ทั้ง 6 รูปแบบ หลังอ่านจบแล้วคุณจะกลายเป็นผู้เชี่ยวชาญการใช้เทคนิค “การเรียงลำดับภาพ” ทันที
การเรียงลำดับภาพในงานภาพกราฟิก
สิ่งนี้หมายถึงการจัดการองค์ประกอบบนเลย์เอาท์เพื่อให้มีความเป็นระเบียบ และให้ความสำคัญการการไล่ลำดับการมองเห็นด้วยวิธีการใช้ขนาด คอนทราสต์ สี หรือการจัดตำแหน่งภาพประกอบในเลย์เอาท์ ทุกงานออกแบบกราฟิกคุณสามารถเรียงลำดับความสำคัญของภาพได้
เป้าหมายสำคัญของการใช้เทคนิคการเรียงลำดับภาพก็คือ การถ่ายทอดข้อมูลสำคัญให้ออกมาอย่างมีประสิทธิภาพในระยะสั้น ถ้าปราศจากเทคนิคนี้จะทำให้ผู้ชมอ่านงานได้ยาก จนสูญเสียความสนใจระหว่างการมองงานไป
แบรนด์หรือธุรกิจต่าง ๆ มักพึ่งพาเทคนิคการเรียงลำดับภาพกราฟิกเพื่อแนะนำผู้บริโภคในการซื้อหรือใช้ผลิตภัณฑ์ ในระยะเวลาที่รวดเร็วและได้ประสิทธิภาพสูง
สิ่งนี้สามารถนำไปใช้กับงานประเภทใดก็ได้ เช่น งานภาพกราฟิกการ์ตูน งานภาพกราฟิกธรรมชาติ ภาพสมจริง หรือจะเป็น ภาพกราฟิก เคลื่อนไหว ไม่ว่างานภาพกราฟิกคืออะไรก็ตามแต่สามารถใช้เทคนิคนี้ได้
การเรียงลำดับภาพคืออะไร?
ถ้าพูดถึงงานภาพกราฟิกและการออกแบบ การเรียงลำดับภาพก็คือการวางองค์ประกอบเรียงตามความสำคัญและความเป็นเหตุเป็นผลอย่างที่เคยกล่าวไปข้างต้น เพื่อสร้างเส้นนำสายตาไปยังข้อมูลที่เรากำหนดไว้หรือ CTAs (calls-to-action)
ซึ่งสิ่งนี้สำคัญอย่างยิ่งถ้าคุณออกแบบเว็บไซต์และแอปพลิเคชัน เพราะสิ่งนี้จะทำให้ธุรกิจมีความน่าเชื่อถือมากขึ้นและสร้างกำไรให้คุณมากขึ้น ซึ่งสามารถทำได้โดยคำนึงถึงสิ่งต่อไปนี้
- ขนาด: ยิ่งวัตถุมีขนาดใหญ่จะยิ่งได้รับความสนใจมากกว่าขนาดเล็ก
- สี: สีสว่างและเข้มสามารถดึงดูดผู้ใช้งานมากกว่าสีโทนตุ่นและสีค่ากลาง
- คอนทราสต์: ยิ่งคอนทราสต์เยอะยิ่งดึงดูดสายตา
- การจัดตำแหน่ง: จัดวางตำแหน่งให้เรียบร้อย จะทำให้ภาพดูน่ามอง
- การทำซ้ำ: สามารถใช้ไอคอนหรือสีซ้ำไปซ้ำมาเพื่อสร้างแพทเทิร์นได้ด้วย
- การวางคู่: องค์ประกอบที่เกี่ยวข้องกัน ถ้านำมาวางด้วยกันจะสร้างความเกี่ยวโยงได้
- พื้นที่ว่าง: อย่าลืมมีพื้นที่ว่างภายในเว็บไซต์ เพื่อไม่ให้เว็บไซต์ดูแน่นเกินไป
- สไตล์: งานภาพกราฟิกควรมีสไตล์ โฟกัสที่สไตล์ของแบรนด์และอย่าผสมหลายสไตล์จนเกินไป
6 คุณลักษณะที่ควรรู้กับการเรียงลำดับภาพ
ก่อนจะเริ่มลงมือก็ควรเรียนรู้ทฤษฎีกันก่อน สิ่งที่เราจะบอกคุณต่อไปนี้ก็คือคุณลักษณะทั้ง 6 แบบที่คุณต้องเรียนรู้ไว้เสียก่อนจะเริ่มลงมือออกแบบ ซึ่งจะรวมถึงงานฟอนต์ งานออกแบบภาพ และงานออกแบบเว็บไซต์
1.การเรียงลำดับภาพด้วยสี
พวกเราหลายคนน่าจะพอทราบกันดีว่าสีมีผลกระทบทางจิตวิทยาและการตอบสนอง ซึ่งเป็นสิ่งประหลาดที่เราหลีกเลี่ยงไม่ได้ แต่คุณรู้ไหมว่าคุณยังสามารถใช้สเปกตรัมสีหรือวงล้อสีในการเรียงลำดับภาพได้ด้วย ทำให้บางสิ่งในงานภาพกราฟิกเป็นสำคัญและถูกโฟกัสเป็นพิเศษ จากการเลือกใช้สีที่ชาญฉลาด
ตัวอย่างการใช้สีอยู่ใกล้ (Advancing colors) เช่น สีแดง สีส้ม และสีเหลือง มีความสามารถในการดึงดูดสายตามากกว่าสีโทนเย็น เช่น สีน้ำเงินหรือเขียว
คุณสามารถสังเกตเห็นได้ง่าย ๆ ในแอปพลิเคชันหรือเว็บไซต์ทั่วไป ปุ่มข้อความแจ้งเตือนหรือ CTA มักใช้สีโทนอุ่น เพราะโดยธรรมชาติสีเหล่านั้นให้ความรู้สึกอันตราย เราจึงสังเกตเห็นสีเหล่านี้ก่อนสีอื่น
ดังนั้นคุณสามารถนำสีเหล่านี้มาใช้ในการออกแบบกราฟิกได้ ถ้าสิ่งใดที่ควรให้ความสำคัญเป็นอันดับแรกก็ควรเป็นตัวหนา ใช้สีสว่างหรือสีนีออนเพื่อเน้นย้ำความสำคัญ
ในตัวอย่างด้านล่าง คุณจะเห็นว่าพวกเขาใช้สีเข้มเพื่อนเน้นย้ำองค์ประกอบในงานสไตล์มินิมอล ช่วยให้องค์ประกอบบางอย่างในงานมีความชัดเจนขึ้นมา
2.ความสำคัญของขนาดและอัตราส่วน
เมื่อพูดถึงการเรียงลำดับการออกแบบ ขนาดมีความสำคัญเพราะมีผลต่อการมองเยอะที่สุดและกินพื้นที่ผลงานเยอะที่สุด สิ่งที่ใหญ่สุดจะถูกมองเห็นก่อน
นี่จึงเป็นสาเหตุที่ว่าทำไมหัวข้อถึงต้องใหญ่กว่าเนื้อหาและรายละเอียด เห็นได้ชัดในหนังสือพิมพ์และเว็บไซต์ โดยส่วนใหญ่จะเป็นตัวหนังสือ ภาพประกอบ และสัญลักษณ์
เมื่อคุณทดลองหาขนาดขององค์ประกอบในงานออกแบบ คุณควรตรวจสอบองค์ประกอบโดยรวมก่อนว่าอะไรที่ควรใหญ่หรือเล็กตามลำดับ เช่นเดียวกับการเลือกลำดับหัวข้อ H1,H2 และ H3 ในงานออกแบบเว็บไซต์ ซึ่งจะต้องมีขนาดแตกต่างกันเพื่อให้ส่วนสำคัญมีลำดับชัดเจน ถ้าความแตกต่างของขนานน้อยเกินไปจะทำให้ความแข็งแรงของงานกราฟิกหายไป
หรือจะแบ่งเป็น A,B และ C โดยแยกองค์ประกอบที่อยู่ใน A ใหญ่ที่สุดและค่อย ๆ ไล่ลำดับลงมายัง C ที่เล็กที่สุด ทำให้องค์ประกอบ A จะต้องใหญ่ที่สุดและดึงดูดสายตาที่สุดเสมอ
3.วิธีใช้ฟอนต์ตัวอักษรในการเรียงลำดับ
สิ่งสำคัญอีกประการหนึ่งในงานออกแบบก็คือตัวอักษร การจับคู่ตัวอักษรและการใช้ฟอนต์เป็นของคู่กัน เพื่อสร้างความเกี่ยวข้องภายในภาพกราฟิกให้มีความหมายสมบูรณ์ ส่งเสริมความชัดเจนให้ผลงาน
คุณสามารถเน้นตัวหนังสือในงานด้วยการเพิ่มสีและคอนทราสต์ หรือจะขยายให้ใหญ่ขึ้นเพื่อดึงดูดสายตาก็ได้ ที่สำคัญอย่าลืมใส่ตัวหนาด้วย ยิ่งหนาและคอนทราสต์จัดเท่าไหร่ยิ่งดึงดูดสายตาเท่านั้น เช่น เปิดด้วยชื่อเรื่องและหัวข้อ ตามด้วยหัวข้อย่อย ข้อความเนื้อหาและรายละเอียดเพิ่มเติม
4.วิธีใช้พื้นที่ว่างในการพัฒนาส่วนโฟกัส
พื้นที่ว่าง (Negative space) หรือ White space เป็นพื้นที่ปรากฎรอบ ๆ วัตถุหลักไม่ว่าจะเป็นบริเวณหัวข้อหรือภาพ ถูกใช้เพื่อมอบพื้นที่พักสายตาให้กับองค์ประกอบ และนำสายตาไปยังพื้นที่ถัดไป ช่วยแยกองค์ประกอบในงานให้น่ามองมากขึ้น
ลองจินตนาการถึงพิพิธภัณฑ์ศิลปะที่มีผลงานแสดงโชว์อยู่เต็มไปหมด แต่ละชิ้นงานก็จะมีพื้นที่ว่างให้ทุกคนได้โฟกัสกับงานที่อยู่ตรงหน้าจริง ๆ เพียงเท่านั้น
5.การจัดตำแหน่ง (Alignment)
สำหรับงานจำพวกหนังสือพิมพ์หรือกราฟิกที่ต้องใส่ข้อมูลหนัก ๆ อยู่เต็มไปหมด การจัดตำแหน่งที่ดีสามารถย่อยข้อมูลให้ผู้ชมอ่านได้ง่ายขึ้น สามารถใช้หลักการเรียงลำดับภาพเข้าช่วย พร้อมกับฟีเจอร์เส้น Grid ในการทำงานได้
6.ใช้คอนทราสต์อย่างชำนาญ
ถ้างานออกแบบของคุณดูไม่โดดเด่น ให้เพิ่มคอนทราสต์ใส่เข้าไปเพื่อสีมีความตัดกัน แต่อย่าใส่มากเกินไปจนขัดกับตัวอักษรภายในงาน อีกทั้งยังช่วยให้ผู้ที่มีปัญหาในการมองเห็นได้เห็นงานชัดขึ้น
คอนทราสต์สามารถทำได้หลายรูปแบบ ไม่ว่าจะเป็นสี ตัวอักษร ภาพ ความอิ่มตัวของสี หรือเฉดสี ยิ่งเป็นงานสื่อสิ่งพิมพ์การใช้คอนทราสต์ยิ่งช่วยให้งานสวยงาม โดยเฉพาะวัสดุที่มีพื้นผิวเป็นเอกลักษณ์ เช่น กระดาษมัน แผ่นเหล็ก ไม้ ฯลฯ
สรุป:การสร้างสมดุลด้วยวิธีการเรียงลำดับภาพกราฟิก สามารถทำให้ผลงานออกมาสวยงาม และช่วยเรียงลำดับข้อมูลและการมองเห็นได้ นอกจากจะเป็นประโยชน์ต่อผู้ชมที่เข้าใจงานได้ง่ายขึ้นแล้ว ยังช่วยให้คนทำภาพกราฟิกมองออกว่าผลงานขิ้นต่อไปควรทำอย่างไรอีกด้วย
บทความโดย : What Is Visual Hierarchy?
เรียบเรียงโดย : ทีมงานชัตเตอร์สต็อกประเทศไทย ดำเนินงานโดย นัมเบอร์ 24
Date: 12/06/2567
