Grow with AppMaster Grow with AppMaster.
Become our partner arrow ico

หลักการออกแบบของเกสตัลต์ - ตัวอย่างที่ดีที่สุด

หลักการออกแบบของเกสตัลต์ - ตัวอย่างที่ดีที่สุด

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

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

หลักการเกสตัลต์

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

หนังสือ "Theory of Form" โดย Max Wertheimer ซึ่งตีพิมพ์ในปี 1923 และยังเป็นที่รู้จักในชื่อ "the dot Essay" เพราะมันถูกวาดภาพประกอบด้วยข้อความภาพของจุดและเส้น จึงเป็นที่มาของผลกระทบถาวรต่อศิลปะและการออกแบบ . Wertheimer เชื่อว่าความชอบตามธรรมชาติของเราที่จะพิจารณาองค์ประกอบที่อยู่ติดกัน (การจัดกลุ่มความใกล้เคียง) ที่ดูเหมือนว่า (การจัดกลุ่มความคล้ายคลึงกัน) หรือเศรษฐกิจเชิงโครงสร้าง (ความต่อเนื่องที่ดี) ที่ร่วมกันก่อให้เกิดการก่อตัวของการตั้งครรภ์บางอย่าง สมมติฐานของเขาคือสิ่งที่หลักการเกสตัลต์สร้างขึ้นเพื่อเป็นรากฐาน

Principles of Gestalt

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

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

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

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

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

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

หลักการสำคัญของเกสตัลต์

1. ความต่อเนื่อง

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

ตัวอย่าง: โลโก้

แนวคิดเกี่ยวกับความต่อเนื่องของ Gestalt สามารถพบได้ในโลโก้ของบริษัทต่างๆ เช่น ProQuest, Amazon และ Coca-Cola โลโก้ Amazon มีลูกศรที่ขึ้นต้นด้วยตัวอักษร A และลงท้ายด้วยตัวอักษร Z ลูกศรนี้มีขึ้นเพื่อแสดงความจริงที่ว่า Amazon ขายทุกอย่างตั้งแต่ A ถึง Z ในทำนองเดียวกันเมื่อเราดูโลโก้ของ soft ที่รู้จักกันดี เครื่องดื่มยี่ห้อ Coca Cola สายตาของเราเดินทางจาก "C" ในข้อความ Cola ถึง "C" ในข้อความ Coca ผ่านตัวอักษร L และ A ไปพร้อมกัน การช่วยเหลือด้วยภาพหลายประเภทเหล่านี้ช่วยให้ดวงตาของเราติดตามวัตถุหรือข้อความที่เข้าใกล้ได้ง่ายขึ้น

2. ความเหมือน

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

create logos

ตัวอย่าง: โลโก้

Panda Security Touts, NBC และ Sun Microsystems มีโลโก้ที่มีอ็อบเจ็กต์และรูปแบบที่มีคุณสมบัติด้านภาพที่คล้ายคลึงกัน แม้ว่าสิ่งของและรูปแบบเหล่านี้จะไม่ใช้โทนสี แบบรูปร่าง หรือแบบขนาดเดียวกัน เครื่องหมายคำและเครื่องหมายโลโก้ของโลโก้ Panda Security Tout เข้ากันได้เป็นอย่างดี ในทำนองเดียวกัน ใบไม้ที่ประกอบเป็นโลโก้ NBC แต่ละใบมีสีที่เป็นเอกลักษณ์ แต่ทั้งหมดนั้นสามารถจดจำได้ว่าอยู่ในกลุ่มเดียวกัน เพราะมีภาพหรือการออกแบบเหมือนกัน

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

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

ตัวอย่าง: โลโก้ของ IBM

เมื่อเราดูที่โลโก้ IBM เราพบตัวอักษรสามตัวที่ประกอบด้วยเส้นแนวนอนสั้น ๆ ซ้อนกัน ซึ่งตรงกันข้ามกับโลโก้ดั้งเดิม ซึ่งประกอบด้วยเส้นแนวนอนแปดเส้นที่มีระยะห่างระหว่างกันอย่างสม่ำเสมอ

4. ภูมิภาคทั่วไป

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

5. ปราญานซ์;

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

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

ตัวอย่าง: โลโก้ของ Olympic

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

6. รูปสู่พื้น

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

7. ปิด

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

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

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

บทสรุป

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

กระทู้ที่เกี่ยวข้อง

หลักพื้นฐานของการเขียนโปรแกรมด้วย Visual Basic: คู่มือสำหรับผู้เริ่มต้น
หลักพื้นฐานของการเขียนโปรแกรมด้วย Visual Basic: คู่มือสำหรับผู้เริ่มต้น
สำรวจการเขียนโปรแกรม Visual Basic ด้วยคู่มือสำหรับผู้เริ่มต้นเล่มนี้ ซึ่งครอบคลุมแนวคิดและเทคนิคพื้นฐานสำหรับการพัฒนาแอปพลิเคชันอย่างมีประสิทธิภาพและมีประสิทธิผล
PWA ช่วยเพิ่มประสิทธิภาพและประสบการณ์ผู้ใช้บนอุปกรณ์พกพาได้อย่างไร
PWA ช่วยเพิ่มประสิทธิภาพและประสบการณ์ผู้ใช้บนอุปกรณ์พกพาได้อย่างไร
สำรวจว่า Progressive Web Apps (PWA) ปรับปรุงประสิทธิภาพอุปกรณ์เคลื่อนที่และประสบการณ์ของผู้ใช้ได้อย่างไร โดยผสานการเข้าถึงของเว็บกับฟังก์ชันคล้ายแอปเพื่อการมีส่วนร่วมที่ราบรื่น
การสำรวจข้อได้เปรียบด้านความปลอดภัยของ PWA สำหรับธุรกิจของคุณ
การสำรวจข้อได้เปรียบด้านความปลอดภัยของ PWA สำหรับธุรกิจของคุณ
สำรวจข้อได้เปรียบด้านความปลอดภัยของ Progressive Web Apps (PWA) และทำความเข้าใจว่าสิ่งเหล่านี้สามารถปรับปรุงการดำเนินธุรกิจของคุณ ปกป้องข้อมูล และมอบประสบการณ์ผู้ใช้ที่ราบรื่นได้อย่างไร
เริ่มต้นฟรี
แรงบันดาลใจที่จะลองสิ่งนี้ด้วยตัวเอง?

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

นำความคิดของคุณมาสู่ชีวิต