ผลต่างระหว่างรุ่นของ "Material Design"

จาก Morange Wiki
แถว 34: แถว 34:
 
การออกแบบสภาพแวดล้อมแบบสามมิติที่มีแสงวัตถุและเงาสะท้อน
 
การออกแบบสภาพแวดล้อมแบบสามมิติที่มีแสงวัตถุและเงาสะท้อน
 
; 3D World
 
; 3D World
:การออกแบบวัตถุที่เป็นพื่อนที่ 3มิติ ซึ่งวัตถุทั้งหมดจะมี X,Y และขนาดแกน Z ที่ตั่งฉากกับระนาบของหน้าจอแสดงผล
+
:การออกแบบวัตถุที่เป็นพื่นที่ 3มิติ ซึ่งวัตถุทั้งหมดจะมี X,Y และขนาดแกน Z ที่ตั่งฉากกับระนาบของหน้าจอแสดงผล
 
<div>
 
<div>
 
::::::::::: [[ไฟล์:Whatismaterial environment 3d.png|thumb|none|300px|3D World]]
 
::::::::::: [[ไฟล์:Whatismaterial environment 3d.png|thumb|none|300px|3D World]]

รุ่นแก้ไขเมื่อ 08:21, 25 กรกฎาคม 2559

Material properties


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
  • มีข้อผิดพลาดในการสร้างรูปย่อ: ไฟล์สูญหาย
    Intentional
  • มีข้อผิดพลาดในการสร้างรูปย่อ: ไฟล์สูญหาย
    Motion
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 ที่ตั่งฉากกับระนาบของหน้าจอแสดงผล
มีข้อผิดพลาดในการสร้างรูปย่อ: ไฟล์สูญหาย
3D World
Light and shadow
การใช้แสงและเงากับวัตถุ เพื่อให้วัตถุ ดูมีมิติมากขึ้น
  • มีข้อผิดพลาดในการสร้างรูปย่อ: ไฟล์สูญหาย
    Shadow cast by key light
  • มีข้อผิดพลาดในการสร้างรูปย่อ: ไฟล์สูญหาย
    Shadow cast by ambient light
  • มีข้อผิดพลาดในการสร้างรูปย่อ: ไฟล์สูญหาย
    Combined shadow from key and ambient lights