อะไรคือความแตกต่างระหว่าง "ลักษณะแบน" และ "การออกแบบวัสดุ"?

หลังจาก Windows 8 ออกมาพูดเกี่ยวกับ "Metro UI" และต่อมาเกี่ยวกับ "Flat design" ตอนนี้หลังจาก Android Lollipop ออกมาพูดถึงเรื่อง "การออกแบบวัสดุ" ใครสามารถอธิบายความแตกต่างระหว่าง "การออกแบบวัสดุ" และ "สไตล์แบน" ได้หรือไม่?

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

มันเป็นไปตามหลักการ 3

1. วัสดุเป็นอุปมา
2. เป็นตัวหนากราฟิกเจตนา
3. ให้ความหมายกับการเคลื่อนไหว

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

_{นักออกแบบของ Google สร้างแบบจำลองกระดาษเพื่อระบุเลเยอร์และเงาสำหรับการออกแบบวัสดุ}

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

วิธีที่ดีในการเรียนรู้เพิ่มเติมเกี่ยวกับการออกแบบวัสดุและวิธีการใช้งานคือการใช้แอพที่ Google สร้างขึ้นโดยใช้การออกแบบวัสดุและอ่านรายละเอียดการออกแบบสิ่งนี้คือโดยBrian Lovinในแอป Inbox

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

Flat design = ศัพท์ทั่วไปที่อ้างถึงความสวยงาม UI อันทันสมัยที่ทันสมัยของไอคอนแบนบล็อคและบล็อกของสี

Metro Design = การออกแบบ UI ใหม่ของ Microsoft (ปัจจุบันเรียกว่าภาษาการออกแบบของ Microsoft ) สำหรับ Windows 8 ที่ใช้การออกแบบที่สวยงาม

Material Design = การออกแบบ UI ใหม่ของ Google สำหรับ Android ที่ใช้การออกแบบที่สวยงาม

(โปรดทราบว่าทั้งเมโทรและวัสดุนั้นเป็นมากกว่าเพียงแค่ความสวยงามในการออกแบบแฟลตพวกเขายังพูดคุยเกี่ยวกับการออกแบบการโต้ตอบกระแสไลบรารีรูปแบบ ฯลฯ )

ขอบคุณ Johannes ที่สังเกตเห็นการเปลี่ยนชื่อสำหรับ UI ของ Microsoft

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

นอกจากนี้ยังมีแนวทางการออกแบบที่ระบุสีระยะห่างและด้านอื่น ๆ ของเค้าโครงของคุณ

นี่คือบางส่วนของพวกเขา แต่คุณสามารถค้นหามากขึ้นด้วยการค้นหาของ google ไม่กี่

http://www.google.com/design/spec/material-design/introduction.html#

"การออกแบบแบบเรียบ" เป็นไปตามที่พวกเขาอธิบายคุณไว้ที่นั่นและการออกแบบ "การออกแบบวัสดุ" นั้นไม่ใช่ "skeuomorphic" ที่แท้จริง แต่เป็น "การออกแบบแนวราบ Skeuomorphed" "การออกแบบวัสดุ" ใช้สิ่งแบน ๆ และจัดแนวในแกน Z เพื่อให้มี "3D Flat Design" ฉันหวังว่าจะช่วย

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