1. บทนำ
อัปเดตล่าสุด: 21/09/21
แอปสามารถใช้สีได้หลากหลายจากรูปแบบพื้นฐาน สีแบบไดนามิกที่ผู้ใช้สร้างขึ้น หรือสีของแบรนด์
เตรียมพร้อมที่จะสำรวจฟีเจอร์สีแบบไดนามิกใหม่ที่เปิดตัวพร้อมกับ Material You ในแล็บนี้ คุณจะได้สร้างชุดสีแบบไดนามิกเพื่อเรียนรู้วิธีการทำงานของระบบสี แนวคิดที่ขับเคลื่อนการสร้างชุดสีที่เข้าถึงได้ และวิธีการที่จะช่วยให้เห็นภาพแอปของคุณด้วยสีแบบไดนามิกโดยใช้เครื่องมือออกแบบล่าสุด
สิ่งที่คุณจะได้เรียนรู้
- มีอะไรใหม่ในสีของ Material Design
- วิธีใช้สีที่ผู้ใช้สร้างขึ้นกับแอป
- เครื่องมือที่จะช่วยคุณ
ข้อกำหนดเบื้องต้น
สำหรับ Lab นี้ เราจะต่อยอดจากแนวคิดการออกแบบพื้นฐานบางอย่าง
- ความรู้เกี่ยวกับแนวคิดการออกแบบพื้นฐาน: ชุดสี
- ความรู้เกี่ยวกับรูปแบบสีและบทบาทปัจจุบันของ Android
- ความรู้เกี่ยวกับ Figma
สิ่งที่คุณต้องมี
2. เริ่มต้นใช้งาน
ตั้งค่า
หากต้องการเริ่มต้นใช้งาน คุณจะต้องเข้าถึงไฟล์ Designlab Figma ทุกอย่างที่คุณต้องการสำหรับ Lab อยู่ในไฟล์ Figma คุณจะดาวน์โหลดและนำเข้าไฟล์หรือทำซ้ำจากชุมชน Figma ก็ได้
ก่อนอื่น ให้ลงชื่อเข้าใช้ Figma หรือสร้างบัญชี
ทำซ้ำจากชุมชน Figma
ไปที่ไฟล์การแสดงสีแบบไดนามิกในแอปด้วย Material Design หรือค้นหาการแสดงสีแบบไดนามิกในแอปด้วย Material Design ในชุมชน Figma คลิกทำซ้ำที่มุมขวาบนเพื่อคัดลอกไฟล์ลงในไฟล์ของคุณ
เลย์เอาต์ไฟล์
ดูไฟล์ คุณจะเห็นว่าไฟล์มีเนื้อหาในตัว โดยเริ่มจากการแนะนำ แต่ละส่วนจะแบ่งออกเป็นแถวของอาร์ตบอร์ดที่ลิงก์กัน โดยมีแนวคิดหลักบางอย่างสำหรับส่วนนั้นๆ ตามด้วยแบบฝึกหัด ส่วนและแบบฝึกหัดจะต่อยอดซึ่งกันและกัน ดังนั้นคุณควรทำตามลำดับ
Codelab นี้จะแนะนำแนวคิดและแบบฝึกหัดเหล่านั้นอย่างละเอียด เราขอแนะนำให้อ่านไปพร้อมกับ Codelab เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์ใหม่ของ Material You
เริ่มจากอาร์ตบอร์ดข้อมูลเบื้องต้น จะมีปุ่มที่ลิงก์อาร์ตบอร์ดเข้าด้วยกันตามลำดับ เข้าถึงลิงก์ได้โดยคลิกปุ่ม
ติดตั้งปลั๊กอิน Figma
Codelab นี้ใช้ปลั๊กอิน Figma ใหม่เป็นอย่างมากในการสร้างโทเค็นและชุดรูปแบบสีแบบไดนามิก ติดตั้งปลั๊กอิน Figma โดยตรงจากหน้าชุมชน Figma หรือค้นหา "Material Theme Builder" ในชุมชน Figma
3. แนวคิดเกี่ยวกับสี
สีแบบเปลี่ยนอัตโนมัติคืออะไร
Material You ออกแบบสีใหม่ให้เป็นประสบการณ์การใช้งานที่เฉพาะบุคคลมากขึ้น การดึงสีแบบไดนามิกช่วยขยายช่วงของประสบการณ์ด้านสีที่เป็นไปได้ให้กว้างขึ้นอย่างมาก
สีแบบไดนามิกเป็นส่วนสำคัญของ Material You ซึ่งอัลกอริทึมจะดึงสีแบบกำหนดเองจากวอลเปเปอร์ของผู้ใช้เพื่อนำไปใช้กับแอปและ UI ของระบบ
ความสว่าง
สีแบบไดนามิกสร้างขึ้นมาเพื่อให้ใช้งานได้ในบริบทที่คาดเดาไม่ได้ ระดับความสว่างเป็นแอตทริบิวต์สำคัญที่ช่วยให้สีผสมกันได้อย่างลงตัวแม้ว่าทีมผลิตภัณฑ์จะไม่ได้ทดสอบชุดค่าผสมสีแต่ละชุดก็ตาม เพื่อจัดการอัตราส่วนคอนทราสต์ในบริบทการดูต่างๆ
องค์ประกอบที่มีความสว่างคล้ายกันจะไม่มีคอนทราสต์ที่เหมาะสมเพื่อให้มองเห็นได้ชัดเจน ในขณะที่องค์ประกอบที่มีค่าความสว่างต่างกันจะแยกแยะได้ง่ายกว่า
จานสีโทน
ชุดสีคือการแปลงเฉดสีหนึ่ง (สีแบบไดนามิกที่ดึงออกมา) เป็นสเปกตรัมของโทนสีที่เกี่ยวข้อง การแปลสีเป็น 13 โทนช่วยให้ใช้กลุ่มช่วงโทนสีที่เรียกว่าชุดสีในบริบทต่างๆ ได้ ตั้งแต่องค์ประกอบแต่ละรายการภายในคอมโพเนนต์ไปจนถึงธีมแอปทั้งหมด
สีที่แปลงเป็นช่วงโทนสี
4. การแยกสี
ตั้งแต่เริ่มต้นจนถึงการวางแผน
มาดูวิธีที่สีแบบไดนามิกทำงานร่วมกับเครื่องมือสร้างธีม Material กัน
- เปิด Material Theme Builder เมื่อเลือกไดนามิกแล้ว ให้วางรูปภาพหรือเลือกรูปภาพจากโปรแกรมเรียกดูไฟล์ คุณจะเห็นว่าสีเริ่มต้นจะอัปเดตตามรูปภาพ
- ระบบจะดึงค่าสีจากวอลเปเปอร์และกำหนด "ประเภท" ซึ่งจะกำหนดว่าสีจะสัมพันธ์กับสีอื่นๆ ในรูปแบบอย่างไร เราได้อัปเดต "สีหลัก" เหล่านี้ (ทางด้านขวา) ให้สอดคล้องกับค่าดังกล่าว
- จากนั้นจะมีการแปลเป็นชุดสีตามโทนสีที่อิงตามความสว่าง ซึ่งจะสร้างช่วงสี 5 ช่วงที่มีโทนสีจากอ่อนไปเข้ม โดยจานสีโทนัลจะมีป้ายกำกับในเอาต์พุตสี
- จากช่วงโทน 5 ช่วง ระบบจะจัดโทนสีที่เฉพาะเจาะจง (ตามความสว่าง) ลงในบทบาทที่กำหนดไว้ล่วงหน้าซึ่งประกอบกันเป็นรูปแบบ สีจะเชื่อมโยงกับรูปแบบผ่านโทเค็นการออกแบบ
บทบาทสีระดับที่ 3 สร้างขึ้นจากช่วงสีระดับที่ 3 และแมปกับคอมโพเนนต์
5. ธีมและโทเค็น
โทเค็นการออกแบบช่วยให้ผลิตภัณฑ์มีความยืดหยุ่นและสอดคล้องกันโดยอนุญาตให้นักออกแบบกำหนดบทบาทสีขององค์ประกอบใน UI แทนที่จะกำหนดค่าที่ตั้งไว้ เป็นต้น โทเค็นทำหน้าที่เป็นตัวเชื่อมระหว่างบทบาทที่กำหนดขององค์ประกอบกับค่าสีที่เลือกสำหรับบทบาท การออกแบบตามบทบาทของสีแทนที่จะเป็นสีที่เฉพาะเจาะจงนั้นมีความสำคัญมากขึ้นเมื่อมีการเปิดตัวสีแบบไดนามิก
ธีมมีโทเค็น Material Design สำหรับทั้งสีและแบบอักษร เพื่อให้มั่นใจว่าการออกแบบและโค้ดมีแหล่งข้อมูลเดียวที่เชื่อถือได้เพื่อแสดงถึงพื้นฐาน รวมถึงชุดสีที่ผู้ใช้สร้างขึ้นและค่าที่กำหนดเอง
ใน Figma ปลั๊กอินจะสร้างโทเค็นเหล่านี้เป็นสไตล์ ซึ่งหมายความว่าหากใช้สไตล์ที่สร้างขึ้น คุณจะใช้โทเค็น MD
ระบบจะแมปสีในชุดสีกับธีมสว่างหรือธีมมืดผ่านโทเค็นการออกแบบ
ระบบการแมปจะกำหนดโทนสีให้กับแต่ละองค์ประกอบในคอมโพเนนต์
โทเค็นการตั้งค่า
หากต้องการใช้สีแบบไดนามิกกับการออกแบบ เราจะต้องตั้งค่าแบบจำลองเป็นโทเค็นในธีม Material ที่มีอยู่
- มาตั้งค่าโทเค็นทั้งหมด (สไตล์ Figma) ในเลย์เอาต์ทางด้านขวาเพื่อใช้ธีมนี้โดยเลือกเฟรมของเลย์เอาต์แล้วคลิกสลับ คุณจะเห็นการอัปเดตคำนำหน้าของสไตล์ในสีของการเลือก
คลิกสลับเพื่ออัปเดตธีมที่เชื่อมต่อซึ่งใช้ในการออกแบบที่เลือก
- ตอนนี้ให้วางรูปภาพหรือเลือกรูปภาพจากโปรแกรมเรียกดูไฟล์ ค่าของโมเดลจำลองจะใช้สีแบบไดนามิกที่แยกจากรูปภาพ
- คลิกปุ่มสับเปลี่ยนเพื่อสุ่มสีเริ่มต้นแทนการแยกจากรูปภาพ นี่เป็นอีกวิธีหนึ่งในการดูอย่างรวดเร็วว่าสีแบบไดนามิกส่งผลต่อการจำลองการออกแบบอย่างไร
การคลิกปุ่มสับเปลี่ยนเพื่อสุ่มสีเริ่มต้น
การเปิดปลั๊กอินโดยไม่มีธีมจะแสดงหน้าจอการตั้งค่าเพื่อเริ่มต้นใช้งาน "เริ่มต้นใช้งาน" จะสร้างพื้นฐานเริ่มต้น "material-theme" เป็นกลุ่มรูปแบบ Figma เพื่อเชื่อมต่อกับแบบจำลองหรือใช้กับชุดเครื่องมือ Material Design
6. การสมัครรับ UI
เลย์เอาต์ที่ระบุสร้างขึ้นด้วย Material Design Kit ซึ่งใช้โทเค็น Material Design แต่มีองค์ประกอบที่กำหนดเองบางอย่างที่ไม่ได้แมป
- เลือกการ์ดบทความ ในการเติม ให้ตั้งค่าสไตล์ (ไอคอนจุด 4 จุด) เป็น material-theme/surface (คุณยังค้นหา Surface ได้ด้วย)
- ในกระบวนการที่คล้ายกัน ให้เลือกประเภทในการ์ดและตั้งค่าเป็นบนแพลตฟอร์มและช่องทำเครื่องหมายเป็นหลัก
สไตล์ Figma ที่ใช้ในการ์ดของการออกแบบ
จากนั้นเราจะสร้างการจำลองเพิ่มเติมเพื่อทำซ้ำผ่านส่วนที่เหลือของสคีมา
สร้างธีมและทำซ้ำ
ตอนนี้เราได้เชื่อมต่อแบบจำลองอย่างเต็มรูปแบบเพื่อแสดงภาพสีแบบไดนามิกแล้ว แต่เรายังสร้างธีมหลายธีมและสลับธีมเหล่านั้นไปยังแบบจำลองแยกต่างหากเพื่อแสดงภาพช่วงสีแบบไดนามิกพร้อมกันได้ด้วย
- ในโมดอลปลั๊กอิน ให้คลิกเมนูแบบเลื่อนลง แล้วเลือก "เพิ่มธีมใหม่"
- ตั้งชื่อธีมที่ไม่ซ้ำกัน แล้วคลิก "สร้างธีม" การดำเนินการนี้จะสร้างแผนภาพสีใหม่สำหรับแต่ละธีมที่สร้างขึ้นด้วย
การเพิ่มธีมใหม่ผ่านเมนูแบบเลื่อนลง
- เพิ่มรูปภาพหรือสับเปลี่ยนสีเริ่มต้น
- ในโมดัลปลั๊กอิน ให้เลือกแบบจำลอง (คอมโพเนนต์ UI ของแอป) แล้วคลิกสลับ การดำเนินการนี้จะอัปเดตค่ารูปแบบเป็นธีมปัจจุบันที่แสดงในเมนูแบบเลื่อนลง
- ทำซ้ำ (CMD + D) โมเดลจำลอง
คลิกสลับเพื่ออัปเดตธีมที่เชื่อมต่อซึ่งใช้ในการออกแบบที่เลือก
- ทำขั้นตอนที่ 1-5 ซ้ำ
ตอนนี้คุณมีดีไซน์หลายแบบที่มีการทำซ้ำสีแบบไดนามิกที่แตกต่างกันแล้ว
7. ขอแสดงความยินดี
เยี่ยมมากที่ได้เรียนรู้และใช้สีแบบไดนามิก Material Theme Builder พร้อมช่วยให้คุณใช้สีใน Material Design ได้ง่ายขึ้นด้วยการแสดงภาพสีแบบไดนามิก สร้างธีมที่กำหนดเอง และส่งออกไปยังโค้ด
หากมีคำถาม โปรดถามเราได้ทุกเมื่อโดยใช้ @MaterialDesign บน Twitter
โปรดติดตามเนื้อหาการออกแบบและบทแนะนำเพิ่มเติมได้ที่ youtube.com/MaterialDesign