Flat Design vs. Material Design: origins

Blog

วิวัฒนาการของ Apple จาก Skeuomorphic เป็น Flat

อะไรคือ Flat Design ?

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

สามารถพูดได้ว่า Flat Design สะท้อน Digital landscape อย่างแท้จริง ทำไมล่ะ? ก็เพราะผู้คนไม่ต้องการความสมจริงอีกต่อไปเพื่อทำความเข้าใจวิธีใช้เทคโนโลยี การออกแบบ Minimal และ Flat Design จึงเข้ากันได้ดี ดังนั้น Flat Design จำนวนมากจึงดูเบาบางลงโดยเจตนา

อย่างไรก็ตามสำหรับผู้ที่ไม่ต้องการใช้ Flat Design จึงมีจุดกึ่งกลางระหว่าง Skeuomorphic Design และ Neumorphic Design

ข้อดีของ Flat Design

  • – การออกแบบที่ไม่กระจายและปราศจากสิ่งรบกวน
  • – อ่านง่ายด้วยตัวอักษรที่ชัดเจน
  • – ปรับเปลี่ยนได้ง่ายสำหรับการออกแบบที่ตอบสนอง
  • – โหลดใน Browser และแอปได้เร็วขึ้น

ข้อเสียของ Flat design

  • – การขาดความลึกทำให้องค์ประกอบดูไม่น่าคลิก
  • – การออกแบบที่สร้างสรรค์และโดดเด่นนั้นยากกว่า
  • – ไม่มีแนวทางการออกแบบเหมือนระบบการออกแบบอื่น ๆ

อะไรคือ Materail Design ?

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

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

องค์ประกอบของ Materail Design ที่เลียนแบบกระดาษ

Material Design ใช้แกน z เพื่อสร้างเงาและความลึก

ซึ่งแตกต่างจาก Flat Design วัสดุ เช่นเงากระดาษที่สร้างความลึกให้กับองค์ประกอบ UI นอกจากนี้ยังสามารถเปลี่ยนรูปร่างและจัดการได้หลายวิธีโดยผู้ใช้

ในหลาย ๆ แง่มุม Material Design มีจุดมุ่งหมายเพื่อห่อหุ้มสิ่งที่ดีที่สุดของทั้งสองโลกจาก Flat Design และ Skeuomorphic Design เช่นเดียวกับ Flat Design และ Material Design ยังมีจุดมุ่งหมายเพื่อใช้สีที่โดดเด่นและสัญลักษณ์ 2D ที่มีจุดมุ่งหมายในการปรับใช้ UI ตามเจตนา ซึ่งได้รับแรงบันดาลใจจากการออกแบบโดยใช้การพิมพ์

ข้อดีของ Material Design

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

ข้อเสียของ Material Design

  • – องค์ประกอบต่างๆเช่นปุ่มการทำงานแบบลอยตัวอาจไม่จำเป็น
  • – การออกแบบใช้ได้กับอุปกรณ์ Android เท่านั้น
  • – เชื่อมโยงกับ Google อย่างมากโดยมีพื้นที่ในการสร้างแบรนด์น้อยลง
  • – UI ที่ออกแบบโดยไม่มีการเคลื่อนไหวมักขาดความเข้าใจง่าย

Flat Design vs. Material Design: ต่างกันอย่างไร?

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

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

ในทางกลับกัน Flat Design ไม่ใช้เงาใด ๆ และไม่ได้ใช้ประโยชน์จากแกน z ทำให้ทุกอย่างฝังรากแน่นในมิติที่สอง สิ่งนี้ช่วยเพิ่มความเรียบง่ายให้กับการออกแบบและสามารถลดเวลาในการโหลดหน้าเว็บลงได้อย่างมากแม้ว่าปุ่มต่าง ๆ จะดูไม่สามารถคลิกได้

จากซ้ายไปขวา : Material Design vs. Flat Design UI

สุนทรียศาสตร์

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

Material Design ยังมุ่งเน้นไปที่ความเรียบง่าย แต่พยายามจากมุมที่ต่างออกไป: ปฏิสัมพันธ์พื้นฐานกับองค์ประกอบในโลกแห่งความจริง (เช่นกระดาษ) ซึ่งตรงกันข้ามกับ Flat Design ที่ไม่ได้พยายามเลียนแบบสิ่งใดจากโลกแห่งความเป็นจริง

แรงบันดาลใจ

Flat design ได้รับแรงบันดาลใจจากการเคลื่อนไหวในการออกแบบเช่น Bauhaus หลักการที่สำคัญประการหนึ่งของ Bauhaus คือฟังก์ชันตามแบบฟอร์ม นั่นคือเหตุผลว่าทำไม Flat Design จึงไม่มีความหรูหรา

Material Design มีอิทธิพลอย่างมากต่อรูปแบบการพิมพ์และลักษณะการพิมพ์

ง่ายต่อการออกแบบ

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

สิ่งหนึ่งที่แน่นอนคือ Flat Design นั้นออกแบบได้เร็วกว่า Material Design อย่างแน่นอน เพราะความเรียบง่ายล้วน ๆ ในทางกลับกัน Material Design ต้องการรายละเอียดเพิ่มเติมเล็กน้อย โดยเฉพาะการเพิ่มความลึกที่ละเอียดอ่อนให้กับ UI และเป็นการออกแบบที่เกี่ยวข้องกับ Google จึงต้องมีการปฏิบัติตามแนวทางที่เข้มงวดกว่าด้วย

ไอคอน Flat Design ที่สวยงามและเรียบง่าย