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

1. บทนำ

อัปเดตล่าสุด: 21/09/21

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

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

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

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

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

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

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

สิ่งที่คุณต้องมี

• บัญชี Figma
• ไฟล์ Designlab สีแบบไดนามิกของ Figma
• ปลั๊กอิน Figma Material Theme Builder

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

ตั้งค่า

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

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

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

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

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

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

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

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

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

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

3. แนวคิดเกี่ยวกับสี

สีแบบเปลี่ยนอัตโนมัติคืออะไร

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

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

ความสว่าง

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

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

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

จานสีโทน

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

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

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

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

4. การแยกสี

ตั้งแต่เริ่มต้นจนถึงการวางแผน

มาดูวิธีที่สีแบบไดนามิกทำงานร่วมกับเครื่องมือสร้างธีม Material กัน

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 Design

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

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

6. การสมัครรับ UI

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

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

สไตล์ Figma ที่ใช้ในการ์ดของการออกแบบ

จากนั้นเราจะสร้างการจำลองเพิ่มเติมเพื่อวนซ้ำผ่านส่วนที่เหลือของสคีมา

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

หากมีคำถาม โปรดถามเราได้ทุกเมื่อโดยใช้ @MaterialDesign บน Twitter

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