Welcome to SoGoodWeb.com
 ตะกร้า
0
0.00 บาท

เว็บไซต์สำหรับเทสงาน ของ SoGoodWeb, All of our website design projects include a content management system to easily update your website on your own. เว็บไซต์สำหรับเทสงาน ของ SoGoodWeb, our web designers can deliver pixel perfect designs on time and on budget. เว็บไซต์สำหรับเทสงาน ของ SoGoodWeb, สนใจเว็บไซต์สำเร็จรูป ติดต่อ 02-402-6136, 088-258-3434

Material Design ภาษาดีไซน์ใหม่จาก Google

Material Design ภาษาดีไซน์ใหม่จาก Google

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

 

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

Material Design คืออะไร

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

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

Material Design

หลักการออกแบบของ Material Design มีด้วยกัน 3 ข้อคือ
1. ใช้หลักการเลียนแบบ "วัสดุ" (material) ในโลกความเป็นจริง เน้นการใช้พื้นผิว (surface) และขอบ (edge) ใช้แสงเงา-ภาพเคลื่อนไหวเหมือนกับแสงเงา-การเคลื่อนไหวของวัตถุเชิงกายภาพ

2. เป็นการออกแบบที่ "ตั้งใจนำเสนอ" (intentional) ใช้วิธีการนำเสนอแบบเดียวกับสิ่งพิมพ์กระดาษ เช่น ฟอนต์ ที่ว่าง สีสัน ภาพประกอบ
3. แสดงการเคลื่อนไหว (motion) เพื่อบอกความหมาย (meaning) ของการกระทำ

ส่วนรายละเอียดแบบละเอียดยิบๆก็ ไปอ่านที่บทความ รู้จัก Material Design แนวทางการออกแบบ UI ของกูเกิลในยุคต่อไป  กันได้เลยอธิบายพร้อมมีภาพประกอบทุกซ๊อต

สรุปแล้ว มันต่างกับ Flat Design ของ iOS7ยังไงละ??
เท่าที่แอดมินพยายามหาข้อแตกต่างโดยการดูเผินๆ (ซะงั้น..ก็ยังไม่เคยลองใช้จริงอ่ะ) Material Design จะเน้นการตอบสนองได้ละเอียดกว่า คือ มีการเคลื่อนไหวในทุกๆการสัมผัส เปลี่ยนสีเปลี่ยนเงาในทุกๆการเคลื่อนไหว แต่ฝั่งของ iOS7 จะมีในเรื่องของความลึกของวัตถุที่ดูลึกกว่า เช่น ความเบลอของพื้นหลัง การวึ๊บเข้าวึ๊บออกของไอคอน แต่ Material Design นั้นจะดูเป็น"กระดาษ"มากกว่า (ก็ Conceptเขาเป็นกระดาษขาวนี้เนอะ )

แต่ถ้าให้สรุปง่ายๆตามความคิดของแอดมินก็คือ มันก็คือการทำออกมาแข่งขัน ของ2ค่ายยักษ์ใหญ่นั้นเอง ใครไคร่ใช้  Flat Design ก็ใช้ไป ใครไคร่ใช้  Material Design ไป  ซึ่งทั้งสองก็มีจุดเด่นที่แตกต่างกันไป

โพสต์เมื่อ :
2557-10-21
โดย :
แก้ไขล่าสุดเมื่อ :
2557-10-31
โดย :
 1897
ผู้เข้าชม
คะแนน
สร้างเว็บไซต์สำเร็จรูปฟรี ร้านค้าออนไลน์