Material Design
จาก Morange Wiki
รุ่นแก้ไขเมื่อ 08:17, 25 กรกฎาคม 2559 โดย Nobpadon (คุย | มีส่วนร่วม)
เนื้อหา
Material Design Introduction
Material Design ถูกคิดค้นหรือเป็นแนวทางการออกแบบ โดย Google และเปิดตัว Material Design ในงาน Google I/O ในปี 2014 โดย Material Design ที่ Google ได้วางแนวทางไว้นั้น เหตุเพราะ Google เป็นบริษัทเปิดหรือ แบบเสรี ที่นักพัฒนาจะสามารถหยิบเอาบางส่วนไปพัฒนาต่อได้ หรือเปรียบเสมือนกับ Open Source Company โดย จึงยากต่อการควบคุมนักพัฒนาซอฟต์แวร์ว่า จะต้องออกแบบหรือบังคับให้ใช้แบบนี้ตามนี้ Google สร้าง Metaphor (อุปมา) ขึ้นมาเพื่อเป็นแนวทางการออกแบบ เรียกว่า Material Design และเปรียบเสมือน ภาษาของการออกแบบ (Visual Language) โดยจะรวบรวม แนวทางการออกแบบ ไว้ด้วยกัน
แนวทางการออกแบบหรือหลักการออกแบบ (Principles)
มี 3 ปัจจัยสำคัญ
- มีข้อผิดพลาดในการสร้างรูปย่อ: ไฟล์สูญหาย
- มีข้อผิดพลาดในการสร้างรูปย่อ: ไฟล์สูญหาย
- มีข้อผิดพลาดในการสร้างรูปย่อ: ไฟล์สูญหาย
- Material is the metaphor
- Material คือ วัสดุที่เสมือนจริง ทางด้านกายภาพ ทั้งเรื่องของ แสง-เงา (Light-Edge Shadow) ,พื้นผิว (Surface) การตอบสนองหรือ การเคลื่อนไหว
- ว่าง่ายๆคือ พื้นผิวและเงาของขอบวัตถุที่ออกแบบนั้น เป็นหัวใจสำคัญของการบ่งบอกว่า วัตถุนั้นเคลื่อนย้ายหรือเคลื่อนไหวอย่างไรและมีความสัมพันธ์กับวัตถุอื่นๆอย่างไร
- และแสงที่เสมือนแสงจริง จะแสดงให้เห็น การแบ่งแยกพื้นที่ของวัตถุและส่วนที่มีการเคลื่อนไหวของวัตถุนั้น
- Bold, graphic, intentional
- คือ การจงใจออกแบบส่วนสำคัญต่างๆ อันได้แก่ ช่องตารางการออกแบบ (Grid) , ตัวอักษรในการการออก (Typography) , พื้นที่ว่าง (Space) , สี (Color) และ รูปภาพ (Imagery)
- การจัดลำดับชั้นของความหมายและบ่งบอกจุดโฟกัสที่สำคัญของสายตา เน้นการกระทำของผู้ใช้เป็นหลัก (UX)
- Motion provides meaning
- 'Motion to Meaning คือ การเคลื่อนไหวหรือการแสดงให้เห็นว่า วัตถุที่เคลื่อนไหวนั้น จะให้ความหมายอย่างไรกับผู้ใช้โดย
Material Design Environment
การออกแบบสภาพแวดล้อมแบบสามมิติที่มีแสงวัตถุและเงาสะท้อน
- 3D World
- การออกแบบวัตถุที่เป็นพื่อนที่ 3มิติ ซึ่งวัตถุทั้งหมดจะมี X,Y และขนาดแกน Z ที่ตั่งฉากกับระนาบของหน้าจอแสดงผล
- มีข้อผิดพลาดในการสร้างรูปย่อ: ไฟล์สูญหาย
- Light and shadow
- การใช้แสงและเงากับวัตถุ เพื่อให้วัตถุ ดูมีมิติมากขึ้น
- มีข้อผิดพลาดในการสร้างรูปย่อ: ไฟล์สูญหาย
- มีข้อผิดพลาดในการสร้างรูปย่อ: ไฟล์สูญหาย
- มีข้อผิดพลาดในการสร้างรูปย่อ: ไฟล์สูญหาย