ผลต่างระหว่างรุ่นของ "Material Design"
จาก Morange Wiki
Patcharapun (คุย | มีส่วนร่วม) |
Patcharapun (คุย | มีส่วนร่วม) (add reference) |
||
| (ไม่แสดง 9 รุ่นระหว่างกลางโดยผู้ใช้ 2 คน) | |||
| แถว 1: | แถว 1: | ||
| − | |||
| − | |||
| − | |||
== Material Design Introduction == | == Material Design Introduction == | ||
Material Design ถูกคิดค้นหรือเป็นแนวทางการออกแบบ โดย Google และเปิดตัว Material Design ในงาน Google I/O ในปี 2014 | Material Design ถูกคิดค้นหรือเป็นแนวทางการออกแบบ โดย Google และเปิดตัว Material Design ในงาน Google I/O ในปี 2014 | ||
| แถว 12: | แถว 9: | ||
== แนวทางการออกแบบหรือหลักการออกแบบ (Principles) == | == แนวทางการออกแบบหรือหลักการออกแบบ (Principles) == | ||
=== มี 3 ปัจจัยสำคัญ === | === มี 3 ปัจจัยสำคัญ === | ||
| + | |||
| + | <div align="center"><ul> | ||
| + | <li style="display: inline-block;"> [[ไฟล์:Materialdesign_material.png|thumb|none|200px|Material]] </li> | ||
| + | <li style="display: inline-block;"> [[ไฟล์:Materialdesign_bold.png|thumb|none|200px|Intentional]] </li> | ||
| + | <li style="display: inline-block;"> [[ไฟล์:Materialdesign_motion.png|thumb|none|200px|Motion]] </li> | ||
| + | </ul></div> | ||
| + | |||
; Material is the metaphor | ; Material is the metaphor | ||
| − | : Material คือ วัสดุที่เสมือนจริง ทางด้านกายภาพ ทั้งเรื่องของ แสง-เงา (Light-Edge Shadow) ,พื้นผิว (Surface) การตอบสนองหรือ การเคลื่อนไหว | + | : '''Material''' คือ วัสดุที่เสมือนจริง ทางด้านกายภาพ ทั้งเรื่องของ แสง-เงา (Light-Edge Shadow) ,พื้นผิว (Surface) การตอบสนองหรือ การเคลื่อนไหว |
| − | : ว่าง่ายๆคือ พื้นผิวและเงาของขอบวัตถุที่ออกแบบนั้น เป็นหัวใจสำคัญของการบ่งบอกว่า วัตถุนั้นเคลื่อนย้ายหรือเคลื่อนไหวอย่างไรและมีความสัมพันธ์กับวัตถุอื่นๆอย่างไร | + | :: ว่าง่ายๆคือ พื้นผิวและเงาของขอบวัตถุที่ออกแบบนั้น เป็นหัวใจสำคัญของการบ่งบอกว่า วัตถุนั้นเคลื่อนย้ายหรือเคลื่อนไหวอย่างไรและมีความสัมพันธ์กับวัตถุอื่นๆอย่างไร |
| − | : และแสงที่เสมือนแสงจริง จะแสดงให้เห็น การแบ่งแยกพื้นที่ของวัตถุและส่วนที่มีการเคลื่อนไหวของวัตถุนั้น | + | :: และแสงที่เสมือนแสงจริง จะแสดงให้เห็น การแบ่งแยกพื้นที่ของวัตถุและส่วนที่มีการเคลื่อนไหวของวัตถุนั้น |
; Bold, graphic, intentional | ; Bold, graphic, intentional | ||
| − | : | + | : '''คือ''' การจงใจออกแบบส่วนสำคัญต่างๆ อันได้แก่ ช่องตารางการออกแบบ (Grid) , ตัวอักษรในการการออก (Typography) , พื้นที่ว่าง (Space) , สี (Color) และ รูปภาพ (Imagery) |
: การจัดลำดับชั้นของความหมายและบ่งบอกจุดโฟกัสที่สำคัญของสายตา เน้นการกระทำของผู้ใช้เป็นหลัก (UX) | : การจัดลำดับชั้นของความหมายและบ่งบอกจุดโฟกัสที่สำคัญของสายตา เน้นการกระทำของผู้ใช้เป็นหลัก (UX) | ||
| + | |||
; Motion provides meaning | ; Motion provides 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> | ||
| + | ---- | ||
| + | |||
| + | = คุณสมบัติของ Material = | ||
| + | ---- | ||
| + | '''Concept ของ Material จะเปรียบเสมือนกระดาษขาว ที่จะนำมาวางทับกันหรือ เขียนข้อความทับกระดาษ''' | ||
| + | ---- | ||
| + | === ลักษณะของ Material === | ||
| + | [[ไฟล์:What is material material properties.png|thumb|200px|Material characteristics]] | ||
| + | * แข็งแกร่ง , แข็งแรง (Solid) เป็นวัตถุที่ไม่สามารถทะลุผ่านได้ | ||
| + | * ไม่สามารถซ้ำกันในพื้นที่เดียวกันได้(Occupies unique points in space) | ||
| + | * ไม่สามารถผ่านเข้าไปได้ (Impenetrable) | ||
| + | * รูปร่างไม่แน่นอน (Mutable shape) | ||
| + | * การเปลี่ยนแปลงขนาดจะขึ้นอยู่ตามระนาบของมันเท่านั้น (Changes in size only along its plane) | ||
| + | * ไม่มีการบิดงอ (Unbendable) | ||
| + | * สามารถรวมกันได้ (Can join to other material) | ||
| + | * สามารถแยกตัวได้โดยหลังจากแยกตัวแล้วจะต้องรวมกับเช่นเดิม(Can separate, split, and heal) | ||
| + | * สามารถสร้างขึ้นและลบหรือทำลายได้(Can be created or destroyed) | ||
| + | * สามารถเคลื่อนย้ายไปตามแกนต่างๆได้(Moves along any axis) | ||
| + | ---- | ||
| + | |||
| + | === คุณสมบัติทางกายภาพ === | ||
| + | [[ไฟล์:Whatismaterial materialproperties physicalproperties thickness 01 yes.png|thumb|200px|Material Properties]] | ||
| + | * คุณสมบัติของ Material นั้น ความยาวและความกว้าง จะสามารถเปลี่ยนแปลงได้ และ มีขนาดเท่าใดก็ได้ แต่ในขณะเดียวกัน ความหนา จะต้องมีแค่ 1dp เท่านั้น | ||
| + | * เงาของวัตถุจะแสดงให้เห็นถึง ระดับของการ ยก ระหว่าง วัตถุ และ พื้นหลัง หรือ Material and Elements | ||
| + | * Material จะสามารถแสดงผล รูปภาพ / วิดีโอ / สี บน รูปร่างต่างๆได้ | ||
| + | * Material จะไม่สามารถให้ Input ทะลุผ่านด้านหลังได้ สามารถ รับ Input ผ่านทาง Foreground เท่านั้น | ||
| + | * Material จะไม่สามารถครอบครองพื้นผิวทับกันหรือเป็นแผ่นเดียวกันได้ ต้องแสดงความสูง หรือ ใช้ Light / Shadow เพื่อให้เห็นชัดเจนว่าคนละแผ่นกัน | ||
| + | * Material จะไม่สามารถทะลุผ่านซึ้งกันและกันได้ | ||
| + | <br /> | ||
| + | <br /> | ||
| + | <br /> | ||
| + | <br /> | ||
| + | ---- | ||
| + | |||
| + | === การปรับเปลี่ยนของ Material === | ||
| + | * จะสามารถเปลี่ยนแปลงรูปร่างของวัตถุหรือ Material ได้ | ||
| + | * จะสามารถยืดและหดตัวได้ตามแนวระนาบเท่านั้น | ||
| + | * Material จะไม่มีการ โค้ง หรือ พับ | ||
| + | * Material จะสามารถรวม Sheets ได้ | ||
| + | * Material เมื่อถูกแยกออกจากกันแล้ว (แยก Sheet ออกจากกันเป็นส่วน) จะสามารถกลับมารวมกันได้เช่นเดิม | ||
| + | ---- | ||
| + | |||
| + | === การเคลื่อนไหวของ Material === | ||
| + | * Spontaneously วัตถุหรือ Material จะสามารถเกิดขึ้นได้เอง และจะถูกทำลายได้เองเช่นกัน | ||
| + | * Material จะสามารถ เลื่อนหมุนและเคลื่อนที่ไปตามแกนต่างๆ ได้ (AXIS) | ||
| + | * Material การหมุนหรือการตอบโต้ของแกน Z (Z-AXIS) จะเกิดขึ้นเมื่อ โต้ตอบกับ ผู้ใช้เท่านั้น | ||
| + | Reference[[ Material properties ]] | ||
| + | ---- | ||
| + | = ระดับความสูงและเงา = | ||
| + | '''การออกแบบ Material นั้น จะเปรียบเสมือนกับ วัตถุเสมือนจริง ที่อยู่ด้าน กายภาพ มีมุมมอง มี แสงและเงา''' | ||
| + | <div align="center">[[ไฟล์:What is material elevation and shadows.png|thumb|none|350px| ]] </div> | ||
| + | ---- | ||
| + | === ระดับของวัตถุ === | ||
| + | * วัตถุใดวัตถุหนึ่งที่อยู่ด้านหน้าของอีกวัตถุหรือพื้นผิวอื่น จะมีการบ่งบอกว่ามีความสูงและลึกโดยเงาของวัตถุเอง | ||
| + | ---- | ||
| + | === Resting elevation === | ||
| + | * ทุกๆ วัตถุ หรือ element จะมีการวางระดับไว้ในตัวของมันเอง โดยในขณะที่ส่วนประกอบย่อยๆ ก็จะมีการวางระดับความสูงไว้ให้สอดคล้องกับข้ามแอพลิเคชั่น และสิ่งเหล่านั้่นจะมีการวางความแตกต่างของระดับข้าม แพลตฟอร์มและข้ามอุปกรณ์ | ||
| + | ---- | ||
| + | === การชดเชยความสูงแบบไดนามิก === | ||
| + | * ในการชดเชยความสูง จะมีเป้าหมายของการวางระดับความสูงไว้โดยส่วนประกอบจะเคลื่อนที่ไปเมื่อเทียบกับ Resting elevation | ||
| + | ---- | ||
| + | = อ้างอิง = | ||
| + | === https://material.google.com === | ||
รุ่นแก้ไขปัจจุบันเมื่อ 10:12, 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
- การใช้แสงและเงากับวัตถุ เพื่อให้วัตถุ ดูมีมิติมากขึ้น
คุณสมบัติของ Material
Concept ของ Material จะเปรียบเสมือนกระดาษขาว ที่จะนำมาวางทับกันหรือ เขียนข้อความทับกระดาษ
ลักษณะของ Material
- แข็งแกร่ง , แข็งแรง (Solid) เป็นวัตถุที่ไม่สามารถทะลุผ่านได้
- ไม่สามารถซ้ำกันในพื้นที่เดียวกันได้(Occupies unique points in space)
- ไม่สามารถผ่านเข้าไปได้ (Impenetrable)
- รูปร่างไม่แน่นอน (Mutable shape)
- การเปลี่ยนแปลงขนาดจะขึ้นอยู่ตามระนาบของมันเท่านั้น (Changes in size only along its plane)
- ไม่มีการบิดงอ (Unbendable)
- สามารถรวมกันได้ (Can join to other material)
- สามารถแยกตัวได้โดยหลังจากแยกตัวแล้วจะต้องรวมกับเช่นเดิม(Can separate, split, and heal)
- สามารถสร้างขึ้นและลบหรือทำลายได้(Can be created or destroyed)
- สามารถเคลื่อนย้ายไปตามแกนต่างๆได้(Moves along any axis)
คุณสมบัติทางกายภาพ
- คุณสมบัติของ Material นั้น ความยาวและความกว้าง จะสามารถเปลี่ยนแปลงได้ และ มีขนาดเท่าใดก็ได้ แต่ในขณะเดียวกัน ความหนา จะต้องมีแค่ 1dp เท่านั้น
- เงาของวัตถุจะแสดงให้เห็นถึง ระดับของการ ยก ระหว่าง วัตถุ และ พื้นหลัง หรือ Material and Elements
- Material จะสามารถแสดงผล รูปภาพ / วิดีโอ / สี บน รูปร่างต่างๆได้
- Material จะไม่สามารถให้ Input ทะลุผ่านด้านหลังได้ สามารถ รับ Input ผ่านทาง Foreground เท่านั้น
- Material จะไม่สามารถครอบครองพื้นผิวทับกันหรือเป็นแผ่นเดียวกันได้ ต้องแสดงความสูง หรือ ใช้ Light / Shadow เพื่อให้เห็นชัดเจนว่าคนละแผ่นกัน
- Material จะไม่สามารถทะลุผ่านซึ้งกันและกันได้
การปรับเปลี่ยนของ Material
- จะสามารถเปลี่ยนแปลงรูปร่างของวัตถุหรือ Material ได้
- จะสามารถยืดและหดตัวได้ตามแนวระนาบเท่านั้น
- Material จะไม่มีการ โค้ง หรือ พับ
- Material จะสามารถรวม Sheets ได้
- Material เมื่อถูกแยกออกจากกันแล้ว (แยก Sheet ออกจากกันเป็นส่วน) จะสามารถกลับมารวมกันได้เช่นเดิม
การเคลื่อนไหวของ Material
- Spontaneously วัตถุหรือ Material จะสามารถเกิดขึ้นได้เอง และจะถูกทำลายได้เองเช่นกัน
- Material จะสามารถ เลื่อนหมุนและเคลื่อนที่ไปตามแกนต่างๆ ได้ (AXIS)
- Material การหมุนหรือการตอบโต้ของแกน Z (Z-AXIS) จะเกิดขึ้นเมื่อ โต้ตอบกับ ผู้ใช้เท่านั้น
ReferenceMaterial properties
ระดับความสูงและเงา
การออกแบบ Material นั้น จะเปรียบเสมือนกับ วัตถุเสมือนจริง ที่อยู่ด้าน กายภาพ มีมุมมอง มี แสงและเงา
ระดับของวัตถุ
- วัตถุใดวัตถุหนึ่งที่อยู่ด้านหน้าของอีกวัตถุหรือพื้นผิวอื่น จะมีการบ่งบอกว่ามีความสูงและลึกโดยเงาของวัตถุเอง
Resting elevation
- ทุกๆ วัตถุ หรือ element จะมีการวางระดับไว้ในตัวของมันเอง โดยในขณะที่ส่วนประกอบย่อยๆ ก็จะมีการวางระดับความสูงไว้ให้สอดคล้องกับข้ามแอพลิเคชั่น และสิ่งเหล่านั้่นจะมีการวางความแตกต่างของระดับข้าม แพลตฟอร์มและข้ามอุปกรณ์
การชดเชยความสูงแบบไดนามิก
- ในการชดเชยความสูง จะมีเป้าหมายของการวางระดับความสูงไว้โดยส่วนประกอบจะเคลื่อนที่ไปเมื่อเทียบกับ Resting elevation
