การใช้วิธีการที่มนุษย์ใช้ประมวลผลข้อมูลภาพในการออกแบบเว็บ

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

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

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

หลักการรับรู้ขององค์การ

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

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

กฎหมายของความคล้ายคลึงกัน

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

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

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

กฎหมายแห่งความใกล้ชิด

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

หลักการนี้ถูกนำไปใช้ในระดับที่ดีบนเว็บเมื่อเร็ว ๆ นี้โดยเฉพาะเมื่อทำงานกับ ลูปเนื้อหา, เช่น. บนบล็อกและเว็บช็อป.

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

เพื่อความสะดวกของคุณฉันจะเสนอราคา Wikipedia และระบุว่า:

กฎหมายของแบบฟอร์มที่ดี

หรือที่รู้จักกันในชื่อ Law of Pragnanz หรือ Good Gestalt กฎหมายนี้ระบุว่าเรามักจะรวมกลุ่มวัตถุเข้าด้วยกันหากพวกเขา รูปแบบรูปแบบที่ง่ายปกติและเป็นระเบียบเรียบร้อย. จิตใจของเราพยายามแยกรูปแบบที่ซับซ้อนและยากออกเป็นหลายกลุ่มที่มีรูปร่างที่เข้าใจง่าย สิ่งนี้นำไปสู่ ความสำคัญของความรัดกุม.

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

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

ทฤษฎีสีการรับรู้และการใช้

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

คุณสมบัติของสี

ยังคงมีสามคุณสมบัติวัตถุประสงค์ของสี; สี, ราคา และ ความรุนแรง.

สี คือชื่อของสีตามที่ระบุไว้บนวงล้อสีหรือในรุ้ง มีหก (หรือสิบสองขึ้นอยู่กับผู้ที่คุณกำลังพูดถึง) สีพื้นฐาน: สีแดง, สีส้ม, สีเหลือง, สีเขียว, สีฟ้าและสีม่วง.

สีเหลืองสีน้ำเงินและสีแดงคือ ประถม, สีส้มสีเขียวและสีม่วงคือ รอง เฉดสี; ยังมี ระดับอุดมศึกษา เฉดสีที่เป็นส่วนผสมโดยตรงของสองเฉดสีหลักและรอง (เช่นสีเหลืองสีเขียวหรือสีม่วงสีแดง).

ราคา คือความสว่างหรือความมืดของสีเรียกว่า ที่มีมูลค่าสูง สำหรับสีอ่อนหรือ มูลค่าต่ำ สำหรับสีเข้ม.

ความรุนแรง หมายถึง ความสว่างหรือความมืด ของสี นี่หมายความว่าสีที่มีเฉดสีเดียวกันและค่าเดียวกันยังคงสามารถหรี่แสงหรือสว่างขึ้นได้โดยการเปลี่ยนความเข้มและสร้างเอาต์พุตสีที่แตกต่างกัน.

ความเข้มสูงสุดของทุกสีคือสีที่พวกเขาแสดงบนวงล้อสี (ดูด้านล่าง) ในขณะที่ต่ำสุดคือสีเทา.

สีตัดกัน

อ้างอิงจากกฎหมายที่กล่าวถึงความคล้ายคลึงกันดังกล่าวจิตใจของผู้รับรู้สร้างกลุ่มของวัตถุขนาดเล็กที่พวกเขาดูโดยยึดตามคุณสมบัติที่คล้ายกันและแตกต่างกัน - มักจะเป็นสี.

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

Johannes Itten มี 7 สีที่แตกต่างกันแม้ว่าฉันจะพูดถึงเพียง 3.

1. ความแตกต่างของสี

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

2. ความเปรียบต่างเสริม

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

3. ความคมชัดแสง - มืด

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

หากคุณต้องการไล่ระดับสีที่แตกต่างกัน 4 สีที่เหลือคุณสามารถค้นหาได้ที่นี่.

การสร้างจานสีและการตรวจสอบความแตกต่าง

การรู้ทฤษฎีนั้นยอดเยี่ยมการตีความความคิดของคุณเป็นอีกสิ่งหนึ่งโดยสิ้นเชิง คุณไม่ควรกังวล แต่เว็บให้การสนับสนุนที่ดีสำหรับความต้องการในการเล่นปาหี่สี มีเครื่องมือมากมายที่ช่วยให้คุณสร้างรูปแบบสีที่กำหนดเองตามกฎความเปรียบต่างของสีเช่น Paletton หรือ Adobe Kuler.

เพื่อจุดประสงค์ทางเว็บคุณอาจต้องการตรวจสอบความแตกต่างที่คุณเลือกใช้ที่ webAIM ที่เว็บไซต์ของ Jonathan Snook หรือดาวน์โหลดอินสแตนซ์ของ Color Contrast Analyzer โดย The Paciello Group ที่นี่.

ข้อสรุป

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

หมายเหตุบรรณาธิการ: โพสต์ของผู้เยี่ยมชมนี้เขียนขึ้นสำหรับ Hongkiat.com โดย Marton Fekete. Marton เป็นผู้พัฒนาเว็บไซต์ชาวฮังการีที่เพิ่งติดใจ WordPress เขาเป็นนักเขียนเนื้อหาที่กระตือรือร้นและเป็นนักออกแบบอิสระที่ชอบเล่นเกม RPG ในเวลาว่าง.