ลำดับชั้นภาพสำหรับผู้เริ่มต้น

ลำดับชั้นของภาพคือการจัดระเบียบของออบเจ็กต์ในลำดับเฉพาะเพื่อดึงดูดความสนใจไปยังพื้นที่ที่ต้องการ

ลำดับชั้นของภาพที่ใช้กันทั่วไปในการออกแบบ UX ช่วยให้ผู้อ่านนำทางได้ง่ายขึ้นและช่วยชี้นำความสนใจไปยังที่ที่คุณต้องการ

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

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

บล็อกนี้จะให้ข้อมูลเบื้องต้นเกี่ยวกับลำดับชั้นของภาพแก่ผู้เริ่มต้น

ลำดับชั้นของภาพพังลง

การแบ่งลำดับชั้นของภาพออกเป็นส่วนๆ ที่ง่ายกว่าจะช่วยอธิบายว่านักออกแบบจัดการกับแนวคิดการออกแบบอย่างไร

สามบทบาทหลักในลำดับชั้นภาพ ซึ่งสองบทบาทมีความเกี่ยวข้องกันอย่างมาก

ขนาด

การเปลี่ยนขนาดของวัตถุสามารถช่วยดึงความสนใจมาที่วัตถุหรืออยู่ห่างจากวัตถุได้

สิ่งสำคัญคือต้องปล่อยให้มีขนาดใหญ่ที่สุดสำหรับข้อมูลที่สำคัญที่สุดที่คุณต้องการแสดง การใช้องค์ประกอบที่มีขนาดใกล้เคียงกันมากเกินไปจะทำให้เอฟเฟกต์นี้หายไป เนื่องจากไม่มีสิ่งใดโดดเด่นเท่า

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

หากคุณมีข้อมูลที่ไม่สำคัญ การมีข้อมูลในขนาดที่เล็กจะทำให้ข้อมูลไม่สูญหาย และปล่อยให้ผู้ใช้เห็นในที่สุดท้าย

สีและความคมชัด

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

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

วิธีหนึ่งในการใช้วิธีนี้คือการเปลี่ยนสีของข้อความโดยเน้นสีที่ฉูดฉาด มันจะดึงดูดความสนใจก่อนข้อความสีหม่นๆ

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

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

อีกวิธีหนึ่งในการใช้สีคือการเลือกจานสีที่คล้ายกันเพื่อสร้างความสัมพันธ์ระหว่างวัตถุเฉพาะ

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

การออกแบบ UX ที่ดีนั้นมีความเปรียบต่างมากมาย โดยมีความสวยงามส่วนใหญ่ที่ใช้คอนทราสต์สูงเพื่อสร้างผลงานที่น่าทึ่ง

รูปแบบ F & Z

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

รูปแบบเหล่านี้ใช้ได้กับภาษาส่วนใหญ่ แต่ใช้ได้ดีสำหรับภาษาอังกฤษ เนื่องจากคำต่างๆ จะอ่านจากซ้ายไปขวาและจากบนลงล่าง

รูปแบบ F

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

หลังจากนั้น ผู้ชมจะสแกนกระดูกสันหลังเพื่อหาหัวข้อย่อยหรือหัวข้อข่าว

รูปแบบนี้มีชื่อว่า E-pattern แม้ว่ารูปแบบ F จะเป็นสัญลักษณ์มากกว่า

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

การออกแบบนี้ยอดเยี่ยมในการขจัดความเบื่อหน่ายที่เกี่ยวข้องกับการอ่านข้อความจากย่อหน้าใหญ่

ผู้ใช้สามารถสแกนพาดหัวข่าวเพื่อดูพาดหัวข่าวหรือหัวข้อย่อยที่สะดุดตา เนื่องจากใช้เพื่อดึงดูดความสนใจ

The Z Pattern

แม้ว่ารูปแบบ F จะเหมาะกับเว็บไซต์ที่มีข้อความจำนวนมาก แต่รูปแบบ Z ก็แตกต่างออกไป

รูปแบบ Z เหมาะสำหรับเว็บไซต์หรือโฆษณาที่ไม่มีข้อความหลายย่อหน้า

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

ผู้ใช้จะไปยังส่วนต่างๆ ของรูปแบบ Z ได้อย่างง่ายดาย เนื่องจากเป็นการออกแบบที่ใช้บ่อยและเข้าใจง่าย

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

ตรงกลางของการออกแบบมักจะมีรูปภาพเพื่อเติมส่วนที่ว่างเปล่า

ด้านล่างซ้ายและขวามีข้อความหรือข้อมูลที่คุณต้องการแสดงให้ผู้เยี่ยมชมของคุณเห็น

ทำความเข้าใจวิชาการพิมพ์

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

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

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

หัวเรื่องย่อยให้การนำทางที่ตรงไปตรงมาสำหรับผู้ใช้ในการค้นหาข้อมูลเฉพาะ

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

ความสำคัญของการเว้นวรรค

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

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

เนื้อหาที่ล้อมรอบไปด้วยพื้นที่ทำให้มีการออกแบบ UX ที่เรียบง่ายและติดตามได้ง่าย

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

การใช้การจัดตำแหน่ง

สิ่งสำคัญคือต้องจัดแนวการออกแบบของคุณ เนื่องจากการจัดตำแหน่งข้อความแบบสุ่มจะสร้างภาพที่ดูวุ่นวาย

การออกแบบรูปแบบ F และรูปแบบ Z ผสมผสานการใช้การจัดตำแหน่ง การออกแบบรูปแบบ F ใช้การจัดตำแหน่งด้านซ้าย ในขณะที่การออกแบบรูปแบบ Z ใช้การจัดตำแหน่งด้านซ้ายและด้านขวา และการจัดตำแหน่งกึ่งกลาง

เมื่อออกแบบภาพโดยมีข้อความเป็นจุดโฟกัส วิธีที่ดีที่สุดคือจัดชิดซ้าย

สำหรับการออกแบบภาพที่เคร่งครัดโดยเน้นความเรียบง่าย การจัดองค์ประกอบทั้งหมดให้อยู่ตรงกลางมีแนวโน้มที่จะสร้างการออกแบบที่น่าดึงดูด

การใช้กริด

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

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

วัตถุที่อยู่ใกล้จุดศูนย์กลางจะดึงความสนใจ ในขณะที่วัตถุที่อยู่ไกลจะดึงดูดความสนใจเป็นลำดับสุดท้าย

ความใกล้ชิดและความสัมพันธ์

เมื่อองค์ประกอบอยู่ใกล้กันมากขึ้น ผู้อ่านจะถือว่าองค์ประกอบมีความเกี่ยวข้องกัน

วิธีนี้สามารถช่วยจัดระเบียบข้อมูลจำนวนมากและทำให้ผู้ดูเข้าใจได้ง่ายขึ้น

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

แบบอักษรและลำดับชั้นภาพ

การเปลี่ยนขนาดฟอนต์ของคุณด้วยฟอนต์ขนาดใหญ่ที่สงวนไว้สำหรับข้อมูลสำคัญจะช่วยให้ความสนใจไปที่ฟอนต์นั้นโดยตรง

สำหรับโปสเตอร์ ชื่อควรเป็นแบบอักษรขนาดใหญ่ ในขณะที่รายการต่างๆ เช่น ที่อยู่ ควรเขียนด้วยแบบอักษรขนาดเล็ก

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

เคล็ดลับลำดับชั้นภาพ

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

จดข้อมูลที่สำคัญที่สุดที่คุณต้องจัดลำดับความสำคัญ และวิธีการที่คุณจะใช้เพื่อดำเนินการดังกล่าว

นอกจากนี้ ให้ลองจินตนาการถึงการเดินทางของผู้อ่านและพยายามปรับปรุงการออกแบบ UX และลบรายละเอียดที่ยุ่งเหยิงออกไป

ROI จากการออกแบบ UX ที่ดีนั้นคุ้มค่ากับงานพิเศษเสมอ ดังนั้นอย่าประมาทความสำคัญของมัน

สรุป

ลำดับชั้นของภาพคือการกำหนดลำดับที่คุณต้องการให้ผู้อ่านสนใจ คุณต้องการเห็นข้อมูลสำคัญก่อน ตามด้วยทุกอย่าง

การใช้คอนทราสต์สามารถสร้างสีที่โดดเด่นและเป็นสิ่งแรกที่ผู้อ่านสังเกตเห็นในการออกแบบ

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