เทรนด์ใหม่ในการออกแบบ UI: ภาพรวมของ Neumorphism

เผยแพร่แล้ว: 2022-03-11

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

ต้นกำเนิดของการออกแบบนิวมอร์ฟิค

เมื่อ Apple เปิดตัว Macintosh ในปี 1984 มันเป็นคอมพิวเตอร์ส่วนบุคคลเครื่องแรกที่มีส่วนต่อประสานกราฟิกกับผู้ใช้ ในขณะนั้น สตีฟ จ็อบส์ ผู้ร่วมก่อตั้งของ Apple เชื่อว่าไอคอนและสัญลักษณ์ที่คุ้นเคย เช่น ถังขยะหรือโฟลเดอร์ จะช่วยให้ผู้ใช้คอมพิวเตอร์ครั้งแรกเข้าใจวิธีนำทางอินเทอร์เฟซของ Macintosh ได้ดีขึ้น จ็อบส์ออกจาก Apple ไปในปี 1985 แต่เมื่อกลับมาในปี 1997 เขาได้นำความงามของ UI ของบริษัทไปสู่ ​​skeuomorphism ซึ่งเป็นรูปแบบที่ส่วนประกอบอินเทอร์เฟซสะท้อนสิ่งที่คล้ายคลึงกันในโลกแห่งความเป็นจริงจนถึงรายละเอียดสุดท้าย เมื่อ Mac OS X เปิดตัวในปี 2544 Apple ได้พัฒนาระบบ skeuomorphic เต็มรูปแบบที่เรียกว่า Aqua ซึ่งเป็นภาษาการออกแบบที่มีธีมน้ำพร้อมไอคอน ปุ่ม และเมนูแบบเลื่อนลงที่วาววับ

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

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

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

นิวมอร์ฟิซึ่ม 101

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

ที่มา: JustInMind

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

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

ตัวอย่างการออกแบบ Neumorphic

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

ที่มา: Gavrisov Dmitri, Tesla Concept

ที่มา: Alexander Plyuto, Radio Player Concept

ที่มา: Vadim Demenko, Kettle App Concept

ที่มา: Filip Legierski, Bank App Concept

ข้อดีและข้อเสียของการออกแบบ Neumorphic

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

ข้อดี

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

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

ข้อเสีย

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

การออกแบบ Neumorphic เป็นอมตะ

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