ผลต่างระหว่างรุ่นของ "Material Design"
จาก Morange Wiki
Patcharapun (คุย | มีส่วนร่วม) (ADD LINK) |
Nobpadon (คุย | มีส่วนร่วม) |
||
| แถว 30: | แถว 30: | ||
; Motion provides meaning | ; Motion provides meaning | ||
: ''''Motion to Meaning''' คือ การเคลื่อนไหวหรือการแสดงให้เห็นว่า วัตถุที่เคลื่อนไหวนั้น จะให้ความหมายอย่างไรกับผู้ใช้โดย | : ''''Motion to Meaning''' คือ การเคลื่อนไหวหรือการแสดงให้เห็นว่า วัตถุที่เคลื่อนไหวนั้น จะให้ความหมายอย่างไรกับผู้ใช้โดย | ||
| + | |||
| + | == Material Design Environment == | ||
| + | การออกแบบสภาพแวดล้อมแบบสามมิติที่มีแสงวัตถุและเงาสะท้อน | ||
| + | ; 3D World | ||
| + | :การออกแบบวัตถุที่เป็นพื่อนที่ 3มิติ ซึ่งวัตถุทั้งหมดจะมี X,Y และขนาดแกน Z ที่ตั่งฉากกับระนาบของหน้าจอแสดงผล | ||
| + | <div> | ||
| + | ::::::::::: [[ไฟล์:Whatismaterial environment 3d.png|thumb|none|300px|3D World]] | ||
| + | </div> | ||
| + | ;Light and shadow | ||
| + | :การใช้แสงและเงากับวัตถุ เพื่อให้วัตถุ ดูมีมิติมากขึ้น | ||
| + | <div align="center"><ul> | ||
| + | <li style="display: inline-block;"> [[ไฟล์:Whatismaterial environment shadow1.png|thumb|none|250px|Shadow cast by key light]] </li> | ||
| + | <li style="display: inline-block;"> [[ไฟล์:Babababab.png|thumb|none|250px|Shadow cast by ambient light]] </li> | ||
| + | <li style="display: inline-block;"> [[ไฟล์:Whatismaterial environment shadow3.png|thumb|none|250px|Combined shadow from key and ambient lights]] </li> | ||
| + | </ul></div> | ||
รุ่นแก้ไขเมื่อ 08:17, 25 กรกฎาคม 2559
เนื้อหา
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
- การใช้แสงและเงากับวัตถุ เพื่อให้วัตถุ ดูมีมิติมากขึ้น
