ชู่ว! อย่าเปิดเผยความลับภายในนี้เกี่ยวกับหลักการออกแบบ CRAP

การใช้หลักการออกแบบ CRAP เป็นวิธีที่ยอดเยี่ยมในการสร้างการออกแบบภาพที่มีประสิทธิภาพ

“อะไรนะ?!” ที่คุณพูดไม่ได้คุณ? แน่นอนว่านี่เป็นเรื่องที่น่าประหลาดใจสำหรับคุณหากคุณไม่เคยได้ยิน CRAP มาก่อน โรบิน แพทริเซีย วิลเลียมส์ นักเขียนชาวอเมริกันผู้เก่งกาจที่เขียนหนังสือเกี่ยวกับคอมพิวเตอร์หลายเล่ม ได้บรรยายถึงหลักการออกแบบกราฟิกชุดหนึ่งไว้ในหนังสือ The Non-Designer's InDesign Book ของเธอ เธอเรียกมันว่าอึ

(คุณสามารถอ่านบทสัมภาษณ์สั้นๆ กับเธอได้ ที่นี่ )

ดังนั้น CRAP คืออะไร? ไม่ใช่คนที่เรารู้จักแน่นอน!

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

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

CRAP เป็นตัวย่อที่ย่อมาจาก Contrast, Repetition, Alignment และ Proximity

1. ตัดกัน

ความเปรียบต่างถูกอธิบายว่าเป็น “การวางองค์ประกอบที่ไม่เหมือนกัน (เช่น สี โทนสี หรืออารมณ์) ในงานศิลปะ” คอนทราสต์คือสิ่งที่ทำให้องค์ประกอบโดดเด่น ก่อนเข้าไปมีเคล็ดลับหนึ่งข้อที่คุณควรพิจารณา หากคุณใช้คุณสมบัติตัดกันหลายครั้งเกินไป แสดงว่าคุณเพียงแค่ลดความคมชัด ไม่ใช่เพิ่มความคมชัด ทำไม? เพราะความเปรียบต่างหมายถึงความหมายเมื่อคุณต้องการให้องค์ประกอบบางอย่างโดดเด่น หากทุกอย่างโดดเด่น ก็ไม่มีอะไรโดดเด่น! ในฐานะองค์ประกอบสำคัญในหลักการออกแบบอึ คุณต้องรู้วิธีใช้งานให้ดี เอาล่ะไปลุยกันเลย!

สี

คุณสามารถใช้ความแตกต่างของสีเพื่อสร้างคอนทราสต์ World Wide Web Consortium (W3C) ได้สร้างแนวทางเกี่ยวกับความคมชัดขั้นต่ำที่จำเป็นระหว่างข้อความและพื้นหลัง แม้ว่าข้อความและพื้นหลังจะต้องมีความเปรียบต่างสูง แต่สิ่งนี้ไม่เป็นความจริงเมื่อเราพูดถึงองค์ประกอบที่แตกต่างกัน ความเปรียบต่างสูงระหว่างองค์ประกอบต่าง ๆ อาจทำให้สายตาของผู้ใช้ตึงเครียด คุณสามารถดูการออกแบบของคุณในเวอร์ชันสีเทาเพื่อดูว่ามีการใช้คอนทราสต์ที่เหมาะสมหรือไม่

ตามหลักการทั่วไป การใช้ เฉดสีที่ เสริมกันซึ่งไม่ทำให้คอนทราสต์สูงจนแสบตาอาจเป็นวิธีที่ดี

ขนาด

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

รูปร่าง

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

แบบอักษร

เราสามารถจัดประเภทฟอนต์ออกเป็นกลุ่มต่างๆ Serif, Sans-serif, script, monospaced และ display เป็นการจัดประเภท typescript พื้นฐาน การใช้กลุ่มฟอนต์ต่างๆ สามารถสร้างคอนทราสต์ให้กับข้อความที่เราต้องการให้มีความหมายได้ นอกจากนี้ การใช้น้ำหนักแบบอักษรที่แตกต่างกัน (ตัวหนาหรือปกติ) รูปแบบแบบอักษร (ตัวเอียง ทึบแสง หรือปกติ) และการตกแต่งแบบอักษร (ขีดเส้นใต้ ขีดทับ ฯลฯ) สามารถยกระดับเกมของคุณไปอีกระดับ

2. การทำซ้ำ

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

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

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

3. การจัดตำแหน่ง

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

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

4. ความใกล้ชิด

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

กฎ 3 วินาที

“ใช้เวลาเพียง 3 วินาทีในการตกหลุมรัก”

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

ความสัมพันธ์

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

บทสรุป

ออสการ์ ไวลด์ ในคำนำของหนังสือที่มีชื่อเสียงที่สุดของเขา “The Picture of Dorian Grey” กล่าวว่า “ศิลปินคือผู้สร้างสิ่งสวยงาม การเปิดเผยงานศิลปะและปกปิดศิลปินเป็นจุดมุ่งหมายของศิลปะ”

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