การแสดงภาพสีแบบไดนามิกในแอป

1. บทนำ

อัปเดตครั้งล่าสุด: 21/09/21

แอปสามารถใช้อาร์เรย์ของสีจากรูปแบบพื้นฐาน สีแบบไดนามิกที่ผู้ใช้สร้างขึ้น หรือสีของแบรนด์

เตรียมพบกับฟีเจอร์ไดนามิกสีใหม่ๆ ที่เปิดตัวใน Material You ในห้องทดลองนี้ คุณจะได้สร้างชุดสีแบบไดนามิกเพื่อเรียนรู้วิธีการทำงานของระบบสี แนวคิดการขับขี่ที่สร้างชุดสีที่เข้าถึงได้ง่าย และวิธีการที่ช่วยแสดงภาพแอปด้วยสีแบบไดนามิกโดยใช้เครื่องมือออกแบบล่าสุด

สิ่งที่คุณจะได้เรียนรู้

• มีอะไรใหม่ในสีดีไซน์ Material
• วิธีใช้สีที่ผู้ใช้สร้างขึ้นกับแอป
• เครื่องมือช่วยเหลือ

ข้อกำหนดเบื้องต้น

สำหรับห้องทดลองนี้ เราจะต่อยอดจากแนวคิดการออกแบบขั้นพื้นฐาน

• ความรู้เกี่ยวกับแนวคิดการออกแบบพื้นฐาน: ชุดสี
• ความรู้เกี่ยวกับรูปแบบและบทบาทสีปัจจุบันของ Android
• ความรู้เกี่ยวกับ Figma

สิ่งที่ต้องมี

• บัญชี Figma
• ไฟล์ Figma Dynamic color Designlab
• ปลั๊กอิน Figma Material Theme Builder

2. เริ่มต้นใช้งาน

ตั้งค่า

คุณจะต้องเข้าถึงไฟล์ Designlab Figma เพื่อเริ่มต้นใช้งาน ทุกสิ่งที่คุณต้องการสำหรับห้องทดลองมีอยู่ในไฟล์ Figma คุณสามารถดาวน์โหลดและนำเข้าไฟล์ หรือทำซ้ำไฟล์จากชุมชน Figma

ก่อนอื่น ให้ลงชื่อเข้าใช้ Figma หรือสร้างบัญชี

ทำซ้ำจากชุมชน Figma

ไปที่ไฟล์การแสดงภาพสีแบบไดนามิกในแอปด้วยดีไซน์ Material หรือค้นหาการแสดงภาพสีแบบไดนามิกในแอปด้วยดีไซน์ Material ภายในชุมชน Figma คลิกทำสำเนาที่มุมขวาบนเพื่อคัดลอกไฟล์ลงในไฟล์

เลย์เอาต์ไฟล์

มองไปรอบๆ ไฟล์ คุณจะสังเกตเห็นว่าไฟล์เป็นแบบอยู่ภายในตัวเอง โดยเริ่มจากบทนำ แต่ละส่วนจะแบ่งออกเป็นแถวของอาร์ตบอร์ดที่เชื่อมต่อกัน โดยมีแนวคิดหลักบางประการสำหรับส่วนนี้ ตามด้วยแบบฝึกหัด แต่ละส่วนและแบบฝึกหัดจะต่อยอดกันไป คุณจึงควรเรียนรู้ตามลำดับ

Codelab นี้จะแนะนำแนวคิดและแบบฝึกหัดเหล่านั้นอย่างละเอียด เราขอแนะนำให้คุณอ่านไปพร้อมๆ กับ Codelab เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์ใหม่ของ Material You

เริ่มตั้งแต่อาร์ตบอร์ด Intro มีปุ่มที่ลิงก์อาร์ตบอร์ดเข้าด้วยกันตามลำดับและเข้าถึงลิงก์ได้โดยคลิกปุ่มดังกล่าว

ติดตั้งปลั๊กอิน Figma

Codelab นี้อาศัยปลั๊กอิน Figma ใหม่ในการสร้างรูปแบบสีและโทเค็นแบบไดนามิก ติดตั้งปลั๊กอิน Figma โดยตรงจากหน้าชุมชน Figma หรือค้นหา "Material Theme Builder" ในชุมชน Figma

3. แนวคิดสี

สีแบบไดนามิกคืออะไร

Material You ปรับโฉมสีเพื่อมอบประสบการณ์การใช้งานที่ปรับเปลี่ยนให้เหมาะกับแต่ละบุคคลมากขึ้น การดึงสีแบบไดนามิกจะทำให้ช่วงการแสดงสีที่เป็นไปได้กว้างขึ้นอย่างมาก

สีแบบไดนามิกเป็นส่วนสำคัญของ Material You ที่อัลกอริทึมดึงสีที่กำหนดเองจากวอลเปเปอร์ของผู้ใช้มาใช้กับแอปและ UI ของระบบ

ความสว่าง

สีแบบไดนามิกได้รับการสร้างขึ้นเพื่อให้ทำงานในบริบทที่คาดเดาไม่ได้ ในการจัดการอัตราส่วนคอนทราสต์ในบริบทการรับชมที่หลากหลาย ระดับความสว่างจึงเป็นแอตทริบิวต์หลักที่ช่วยให้รวมสีได้สำเร็จ แม้ทีมผลิตภัณฑ์ไม่ได้ทดสอบการผสมสีที่เจาะจงแต่ละสีก็ตาม

องค์ประกอบที่มีความสว่างคล้ายกันจะมีคอนทราสต์ที่ไม่เหมาะสมเพื่อให้อ่านได้ง่าย ในขณะที่องค์ประกอบที่มีค่าความสว่างต่างกันจะมีความแตกต่างมากกว่า

ความสว่างหรือโทนอธิบายระดับแสงที่ค่าสีดิจิทัลแสดง

พาเล็ตโทนสี

ชุดโทนสีคือการแปลโทนสีหนึ่ง (สีที่ดึงมาแบบไดนามิก) ออกเป็นสเปกตรัมของโทนที่เกี่ยวข้อง การแปลสีเป็น 13 โทนช่วยให้กลุ่มช่วงโทนสีซึ่งเรียกว่า "ชุดโทนสี" สามารถใช้งานได้ในบริบทต่างๆ ตั้งแต่องค์ประกอบแต่ละรายการภายในคอมโพเนนต์ไปจนถึงธีมแอปทั้งหมด

สีจะแปลงเป็นช่วงโทนสี

สิ่งสำคัญที่เรียนรู้

• การออกแบบพร้อมลังแสงสว่างที่เข้าถึงได้มากขึ้น
• สีต้นฉบับที่แยกออกมาจะกลายเป็นชุดโทนสี 5 สี

4. กำลังแยกสี

Seed to Scheme

มาดูวิธีการทำงานของสีไดนามิกกับ Material Theme Builder

1. เปิด Material Theme Builder เมื่อเลือกไดนามิก ให้วางรูปภาพหรือเลือกรูปภาพจากโปรแกรมเรียกดูไฟล์ โปรดทราบว่าสีเมล็ดจะอัปเดตตามรูปภาพ
2. ค่าสีจะดึงมาจากวอลเปเปอร์และกำหนด "ประเภท" ซึ่งจะกำหนดความเกี่ยวข้องของสีกับสีอื่นๆ ในรูปแบบหนึ่งๆ "สีหลัก" เหล่านี้ (ทางด้านขวา) ได้รับการอัปเดตเพื่อแสดงค่าเหล่านี้

3. จากนั้นจึงแปลงเป็นชุดโทนสีตามความสว่าง ซึ่งจะสร้างช่วงสี 5 ช่วงโดยมีโทนสีจากสว่างไปจนถึงมืด พาเล็ตโทนสีจะมีป้ายกำกับแบบนี้ในเอาต์พุตสี
4. จากช่วงโทนเสียง 5 ช่วง โทนสีเฉพาะ (ตามความสว่าง) จะแบ่งออกเป็นบทบาทที่กําหนดไว้ล่วงหน้าซึ่งประกอบขึ้นเป็นสคีม ระบบจะจับคู่สีกับสคีมผ่านโทเค็นการออกแบบ

บทบาทสีลำดับที่ 3 ที่สร้างจากช่วงโทนสีที่ 3 และจับคู่กับคอมโพเนนต์

สิ่งสำคัญที่เรียนรู้

• Material Theme Builder จะแสดงวิธีการทํางานของสีแบบไดนามิกและรูปแบบสีที่สรุป

5. ธีมและโทเค็น

โทเค็นการออกแบบจะช่วยให้ผลิตภัณฑ์มีความยืดหยุ่นและสอดคล้องกันทั้งหมด โดยให้นักออกแบบสามารถมอบหมายบทบาทสีขององค์ประกอบใน UI แทนค่าที่ตั้งไว้ได้ เป็นต้น โทเค็นทำหน้าที่เป็นสะพานเชื่อมระหว่างบทบาทที่มอบหมายขององค์ประกอบกับค่าสีที่เลือกสำหรับบทบาท การออกแบบสำหรับบทบาทของสีมากกว่าสีใดสีหนึ่งถือเป็นพื้นฐานที่สำคัญกว่าสำหรับการนำสีแบบไดนามิก

ธีมมีโทเค็นของดีไซน์ Material สำหรับทั้งสีและประเภท เพื่อให้มั่นใจว่าการออกแบบและโค้ดมีแหล่งที่มาที่ถูกต้องแห่งเดียวในการแสดงถึงเกณฑ์พื้นฐาน พร้อมกับจานสีที่ผู้ใช้สร้างขึ้นและค่าที่กำหนดเอง

ใน Figma ปลั๊กอินจะสร้างโทเค็นเหล่านี้เป็นรูปแบบ ซึ่งหมายความว่าหากใช้รูปแบบที่สร้างขึ้น คุณจะได้ใช้โทเค็น MD

สีในชุดโทนสีจะจับคู่กับโทนสีอ่อนหรือสีเข้มผ่านโทเค็นการออกแบบ

ระบบการแมปจะกำหนดโทนสีให้กับองค์ประกอบแต่ละรายการในคอมโพเนนต์

ตั้งค่าโทเค็น

หากต้องการใช้สีแบบไดนามิกกับการออกแบบของคุณ เราจำเป็นต้องตั้งค่าแบบจำลองกับโทเค็นในธีม Material ที่มีอยู่

1. มาตั้งค่าโทเค็นทั้งหมด (รูปแบบ Figma) ในเลย์เอาต์ทางด้านขวาเพื่อใช้ธีมนี้โดยเลือกเฟรมของเลย์เอาต์แล้วคลิกสลับ คุณจะเห็นการอัปเดตคำนำหน้ารูปแบบในสีที่เลือก

คลิกสลับเพื่ออัปเดตธีมที่เชื่อมต่อที่ใช้ในการออกแบบที่เลือก

2. จากนั้นวางรูปภาพหรือเลือกรูปภาพจากโปรแกรมเรียกดูไฟล์ ค่าของการจำลองจะนำสีแบบไดนามิกที่ดึงมาจากรูปภาพมาใช้
3. คลิกที่ปุ่มสับเปลี่ยน ซึ่งจะเป็นการสุ่มสีเมล็ดเพื่อคำนวณหาค่านอกเหนือการแยกออกมาจากภาพ นี่เป็นอีกวิธีหนึ่งในการดูได้อย่างรวดเร็วว่าสีแบบไดนามิกจะส่งผลต่อแบบจำลองงานออกแบบอย่างไร

คลิกปุ่มสับเปลี่ยนเพื่อสุ่มสีเมล็ด

โทเค็นการออกแบบเป็นงานออกแบบขนาดเล็กที่นำมาใช้ใหม่ได้ ซึ่งประกอบขึ้นเป็นสไตล์ภาพของระบบการออกแบบ โทเค็นจะแทนที่ค่าคงที่ด้วยชื่อที่บ่งบอกความเป็นตัวเอง

การเปิดปลั๊กอินโดยไม่มีธีมจะแสดงหน้าจอการตั้งค่าเพื่อเริ่มต้นใช้งาน "เริ่มต้นใช้งาน" จะสร้าง "material-theme" พื้นฐานเริ่มต้น เป็นกลุ่มสไตล์ Figma เพื่อเชื่อมต่อกับแบบจำลองของคุณ หรือใช้กับชุดดีไซน์ Material

สิ่งสำคัญที่เรียนรู้

• โทเค็นจะแสดงบทบาทของสีมากกว่าค่า ซึ่งทำให้สีแบบไดนามิกทำงานได้
• เครื่องมือสร้างธีม Material สามารถใช้เพื่อตั้งค่าโทเค็นดีไซน์ Material

6. การปรับใช้กับ UI

เค้าโครงที่ให้มาสร้างขึ้นด้วยชุดดีไซน์ Material ซึ่งใช้โทเค็นของดีไซน์ Material แต่มีองค์ประกอบที่กำหนดเองบางส่วนที่ไม่ได้แมป

1. เลือกการ์ดบทความ ในส่วนเติมสี ให้ตั้งค่ารูปแบบ (ไอคอน 4 จุด) เป็น material-theme/surface (หรือจะค้นหาแพลตฟอร์มก็ได้)
2. ในขั้นตอนที่คล้ายกัน ให้เลือกประเภทในการ์ดและตั้งค่าเป็นบนพื้นผิวและช่องทำเครื่องหมายเป็นการ์ดหลัก

รูปแบบ Figma ที่ใช้ในการ์ดการออกแบบ

ต่อไป เราจะสร้างแบบจำลองเพิ่มเติมเพื่อทำซ้ำในรูปแบบต่างๆ ที่เหลือ

สร้างธีมและทำซ้ำ

ตอนนี้เราได้เชื่อมต่อแบบจำลองที่สมบูรณ์เพื่อให้เห็นภาพสีแบบไดนามิก แต่เราก็สามารถสร้างธีมหลายธีมและสลับแต่ละธีมเป็นแบบจำลองที่แยกจากกันเพื่อให้เห็นภาพของสีแบบไดนามิกได้พร้อมกัน

1. ในโมดัลปลั๊กอิน ให้คลิกเมนูแบบเลื่อนลงและเลือก "เพิ่มธีมใหม่"

ข้อควรระวัง: ธีมควรมีชื่อที่ไม่ซ้ำกันเพื่อป้องกันไม่ให้ลบล้างค่า

2. สร้างชื่อธีมที่ไม่ซ้ำกันแล้วคลิก "สร้างธีม" ซึ่งจะเป็นการสร้างแผนภาพสีใหม่สำหรับแต่ละธีมที่สร้างขึ้นด้วย

การเพิ่มธีมใหม่ผ่านเมนูแบบเลื่อนลง

3. เพิ่มรูปภาพหรือสลับสีเมล็ด
4. ในโมดัลปลั๊กอิน ให้เลือกการจำลอง (คอมโพเนนต์ UI ของแอป) แล้วคลิกสลับ การดำเนินการนี้จะอัปเดตค่ารูปแบบเป็นธีมปัจจุบันที่แสดงในเมนูแบบเลื่อนลง
5. ทำซ้ำ (CMD + D) การจำลอง

คลิกสลับเพื่ออัปเดตธีมที่เชื่อมต่อที่ใช้ในการออกแบบที่เลือก

6. ทำขั้นตอนที่ 1-5 ซ้ำ

ตอนนี้คุณจะมีดีไซน์หลายแบบพร้อมการทำซ้ำสีแบบไดนามิกที่ต่างกัน

สิ่งสำคัญที่เรียนรู้

• The Material Theme Builder มีความสามารถในการแสดงภาพสีแบบไดนามิกด้วยโทเค็นของ Material Design ที่เชื่อมต่ออยู่
• ปลั๊กอินสามารถใช้เพื่อจัดการธีมและสลับระหว่างธีมต่างๆ รวมถึงรูปแบบสว่างและมืด

7. ขอแสดงความยินดี

เยี่ยมมากที่ได้เรียนรู้และการนำสีแบบไดนามิกไปใช้ เครื่องมือสร้างธีมของวัสดุพร้อมช่วยให้คุณปรับสีในดีไซน์ Material ได้ง่ายขึ้นด้วยการแสดงภาพสีแบบไดนามิก สร้างธีมที่กำหนดเอง และส่งออกเป็นโค้ด

ขั้นตอนถัดไป

• คุณยังใช้ประโยชน์จากชุดเครื่องมือดีไซน์ Material ซึ่งมีส่วนประกอบที่เชื่อมต่อไว้แล้วได้ด้วย คุณจึงสร้างธีมและลิงก์ได้ทันที
• สำรวจวิธีต่างๆ ในการสร้างการแสดงสีที่ปรับเปลี่ยนในแบบของผู้ใช้มากขึ้นโดยใช้การปรับแต่ง Material
• เรียนรู้เพิ่มเติมเกี่ยวกับระบบสีใหม่
• นำไปใช้กับการออกแบบของคุณเอง

หากมีข้อสงสัย โปรดติดต่อเราได้ทุกเมื่อโดยใช้ @MaterialDesign บน Twitter

โปรดติดตามเนื้อหาการออกแบบและบทแนะนำเพิ่มเติมได้ที่ youtube.com/MaterialDesign