Material Design ภาษาใหม่สำหรับนักออกแบบ โดย Google

Material Design ภาษาใหม่สำหรับนักออกแบบ โดย Google

Material Design ทาง Google ซึ่งเป็นผู้พัฒนาได้นำเสนอว่าเป็นการสร้างภาษาสำหรับการออกแบบใหม่ (Design Language) โดยลักษณะการออกแบบจะอาศัยกระดาษเป็นแม่แบบ สำหรับคนที่อาจจะไม่ได้ติดตามข่าวงาน Google I/O และนึกภาพไม่ออกว่า Material Design หน้าตาเป็นอย่างไร แนะนำให้ดูวิดีโอนำเสนอของกูเกิลก่อนครับ จะได้เห็นภาพตรงกัน




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



หลักการออกแบบ (Design Principle) ของ Material Design
  1. ใช้หลักการเลียนแบบ "วัสดุ" (Material) ในโลกความเป็นจริง เน้นการใช้พื้นผิว (Surface) และขอบ (Edge) ใช้แสงเงา-ภาพเคลื่อนไหวเหมือนกับแสงเงา-การเคลื่อนไหวของวัตถุเชิงกายภาพ
  2. เป็นการออกแบบที่ "ตั้งใจนำเสนอ" (Intentional) ใช้วิธีการนำเสนอแบบเดียวกับสิ่งพิมพ์กระดาษ เช่น ฟอนต์ ที่ว่าง สีสัน ภาพประกอบ
  3. แสดงการเคลื่อนไหว (Motion) เพื่อบอกความหมาย (Meaning) ของการกระทำ
แนวคิดของ Material Design เชื่อว่า "ขอบ" และ "พื้นผิว" เป็นสิ่งที่มีอยู่ในชีวิตจริง และมีการเรียนรู้อยู่ในสมองมนุษย์อยู่แล้ว จึงควรจะใช้ขอบเพื่อให้มนุษย์สามารถแยกแยะวัตถุได้โดยอัตโนมัติ ถึงแม้จอจะเป็น 2 มิติ แต่ Material Design มองว่าโลกแห่งความจริงมันเป็น 3 มิติ มีแสงเงา และการเคลื่อนไหว เพื่อสร้างการรับรู้ ฉะนั้นใน ภาษาดีไซน์ตัวนี้จึงมี "ความลึก" ของวัตถุมาด้วย วัตถุต้องไม่เนียนเรียบไปกับอันอื่นๆ แต่ต้องถูกแสดงให้เห็นอย่างชัดเจน ใช้สีที่ตัดกัน ไอคอนที่สื่อความหมายชัดเจน Animation และ Transition ต้องมีความลื่นไหล การเปลี่ยนจากหน้านึงไปอีกหน้านึงไม่ควรเปลี่ยนไปแบบกระทันหัน ควรใช้ Transition ค่อยๆเปลี่ยนไปอย่างเนียนๆ ดังนั้นเราอาจนิยามให้มันเป็น "หลักการ" หรือ "แนวทาง" การออกแบบ UI น่าจะตรงกว่า การวางวัตถุต่างๆ บนหน้าจอจึงมีแนวคิดของ "เลเยอร์" เข้ามา ตัวอย่างตามภาพข้างล่างคือ เลเยอร์ของระบบ (เช่น ภาพพื้นหลัง) จะอยู่หลังสุด ทับด้วยเลเยอร์ของแอพ และทับด้วยเลเยอร์ของระบบ (เช่น ไดอะล็อกแจ้งเตือน) อีกชั้นหนึ่ง


Material Design ใช้ความเป็นเหตุเป็นผล ใช้ตรรกะ (Rational) กับความเป็นธรรมชาติ (Natural) เพื่อให้ผู้ใช้งานไม่ต้องเปลืองแรงสมองในการคิดว่าจะทำอะไร เนื่องจากรูปแบบลักษณะรูปร่าง เค้าโครง ออกแบบมาสอดคล้องกับวิธีคิดของมนุษย์อยู่แล้ว และการใช้ระบบกริดเพื่อกำหนดขนาดของวัตถุ (ทุกอย่างใน Material Design จะใช้ตัวคูณ 8 พิกเซลเสมอ เช่น 8, 16, 32)


ตัวอย่างสีทั้งหมดของ Material Design (ซ้าย) และสีที่ทีม Google Play คัดเลือกไปใช้งาน (ขวา)


สำหรับฟอนต์ (Font) กูเกิลประกาศชัดเจนว่าใช้ฟอนต์ Roboto เพียงฟอนต์เดียวเพื่อความสม่ำเสมอ แต่เป็น Roboto เวอร์ชันปรับปรุงใหม่ให้เหมาะกับการแสดงผลบนหน้าจอทุกแบบ



ตัวอย่างการออกแบบของกูเกิลตาม Material Design บนหน้าจออุปกรณ์ต่างๆ


สำหรับข้อมูลเพิ่มเติม ศึกษาได้ที่ http://www.google.com/design/spec/material-design/introduction.html#introduction-principles


แชร์บทความ

Facebook Twitter Google Digg Reddit LinkedIn StumbleUpon Email
กำลังโหลด ...