1. บทนำ
อัปเดตครั้งล่าสุด: 18/04/22
แอปสามารถใช้อาร์เรย์ของสีจากรูปแบบพื้นฐาน สีแบบไดนามิกที่ผู้ใช้สร้างขึ้น หรือสีของแบรนด์
ห้องทดลองสี Material You ก่อนหน้านี้ได้ศึกษาวิธีแสดงภาพสีแบบไดนามิกภายในแบบจำลองการออกแบบ แต่คุณใช้ธีม Material เพื่อปรับแต่งแอปด้วยสีของแบรนด์ได้ด้วย การใช้ระบบสีใหม่ร่วมกับสีของแบรนด์จะทำให้เกิดรูปแบบสีที่เข้าถึงได้และสามารถใช้ฟีเจอร์แบบไดนามิกมากขึ้นได้
สิ่งที่คุณจะได้เรียนรู้
- วิธีสร้างธีมที่กำหนดเองด้วยเครื่องมือสร้างธีม Material
- การใช้ธีมที่กำหนดเองในการจำลองการออกแบบ
- สามารถใส่สีแบบไดนามิกและสีที่กำหนดเองได้
ข้อกำหนดเบื้องต้น
สำหรับห้องทดลองนี้ เราจะต่อยอดจากแนวคิดการออกแบบขั้นพื้นฐาน
- ความรู้เกี่ยวกับแนวคิดการออกแบบพื้นฐาน: ชุดสี
- ความรู้เกี่ยวกับรูปแบบและบทบาทสีปัจจุบันของ Android
- ความรู้เกี่ยวกับ Figma
- ไม่บังคับ: การแสดงสีแบบไดนามิกใน Codelab ของแอป
สิ่งที่ต้องมี
- บัญชี Figma
- ไฟล์ Figma 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 และวิธีการทำงานของระบบสีใหม่กัน
สีใช้เพื่อแสดงรูปแบบและสื่อความหมายว่าความหมายนั้นเป็นเรื่องส่วนบุคคลของผู้ใช้ การสร้างแบรนด์ หรือความหมายในเชิงความหมาย ระบบสีจะจัดการกับความแปรปรวนของรูปแบบสีที่เปลี่ยนแปลงแบบไดนามิกที่เกิดขึ้นตามการเปลี่ยนแปลงอินพุตของผู้ใช้ ตรรกะของความสัมพันธ์เชิงโทนและการเปลี่ยนแปลงของโทนสีและสีช่วยสร้างพื้นฐานการใช้สีที่ยืดหยุ่น
พื้นที่สีช่วยให้คุณสร้างรูปแบบสีสว่างและสีเข้มที่เข้าถึงได้โดยดึงมาจากสีต้นฉบับด้วยการสร้างสีหลัก 5 สีแล้วตามด้วยชุดโทนสี โดยเลือกขั้นตอนของโทนบางขั้นตอนไว้
เทคนิคการเปลี่ยนสีนี้ไม่เพียงแต่จะให้รูปแบบสีที่เข้าถึงได้เท่านั้น แต่ยังเป็นวิธีในการสร้างรูปแบบที่มีแบรนด์ที่เข้าถึงได้ง่ายและสอดคล้องกับรูปแบบสีที่ผู้ใช้สร้างขึ้นอีกด้วย
รูปแบบสีสร้างขึ้นจากสีหลัก 5 สีลงในชุดโทนสีเพื่อสร้างรูปแบบที่เข้าถึงได้
ธีมที่มีแบรนด์
M3 รองรับการใช้พารามิเตอร์ที่กำหนดเองอย่างเป็นระบบเพื่อช่วยกำหนดและคงสไตล์ที่สื่อถึงแบรนด์ของคุณ
รูปแบบที่กำหนดเองคือรูปแบบสีที่ไม่ได้มาจากวอลเปเปอร์อุปกรณ์ของผู้ใช้ แต่มาจากผู้สร้างแอป ระบบสี M3 และรูปแบบที่กำหนดเองเป็นพื้นฐานของการเปิดใช้สีแบบไดนามิกในแอป
สคีมที่กำหนดเองจะเชื่อมช่องว่างระหว่าง M2 และ M3 เพื่อให้ย้ายข้อมูลได้ง่ายด้วยการตั้งค่าโทเค็น (ช่องสี) ที่จำเป็น และสร้างประสบการณ์การใช้งานที่มีแบรนด์มากขึ้น
การเพิ่มสีของแบรนด์ลงใน Material Theme Builder
4. รูปแบบสี: สีเฉพาะจุด
พื้นฐานของรูปแบบสีคือชุดสีหลัก 5 สีที่เกี่ยวข้องกับชุดสีโทนอยู่แยกกันซึ่งมี 13 โทน ระบบจะกำหนดโทนเฉพาะจากชุดสีแต่ละชุดให้กับบทบาทสีใน UI เริ่มด้วยการเปิดปลั๊กอิน Material Theme Builder และตั้งค่าสีเฉพาะจุดแรกเป็นหลัก
การป้อนเฉพาะหลักจะใช้เป็นต้นฉบับในการสร้างรูปแบบสีทั้งหมด
- คลิกกำหนดเองในโมดัลปลั๊กอิน การเปลี่ยนธีมเป็นธีมที่กำหนดเอง สำหรับห้องทดลองนี้ เราจะใช้ธีม Material ที่มีอยู่แล้ว แต่คุณสามารถสร้างธีมใหม่ได้หากต้องการ ดูข้อมูลเพิ่มเติมในการแสดงภาพสีแบบไดนามิก
- ต่อไป เราจะตั้งค่าสีคีย์หลัก โดยหลักอาจเป็นสีหลักของแบรนด์หรือสีเฉพาะจุดหลักที่มีการใช้มากที่สุด สีหลักที่เหลือจะปรากฏขึ้นตามสีหลัก ซึ่งหมายความว่าคุณไม่จำเป็นต้องใส่สีเพิ่มเติมหากไม่จำเป็นต้องใช้
5. สร้างธีมส่วนที่เหลือ
ระบบจะใช้สีหลักในการสร้างธีม แต่คุณอาจมีสีเฉพาะจุดเพื่อรองรับสีหลักของแบรนด์
- ในโมดัลปลั๊กอิน ให้เพิ่มสีรองโดยคลิกสีรอง บทบาทรองใช้สำหรับคอมโพเนนต์ที่ไม่ค่อยโดดเด่นใน UI ในขณะที่เพิ่มโอกาสการแสดงสี สีรองจะอัปเดตในสคีมาสีและ UI ของแอป
- ทำแบบเดียวกันนี้สำหรับระดับอุดมศึกษา บทบาทลำดับที่ 3 จะใช้ในการเน้นสีที่ตัดกัน ซึ่งใช้เพื่อปรับสมดุลสีหลักและสีรอง หรือเพื่อเพิ่มความน่าสนใจให้กับองค์ประกอบได้ บทบาท "สีที่ 3" ปล่อยให้ผู้ผลิตใช้ตามดุลยพินิจและมีไว้เพื่อสนับสนุนการแสดงสีในผลิตภัณฑ์ให้กว้างขึ้น
- แต่ตอนนี้ระบบจะใช้บทบาทกลางๆ กับพื้นผิวและพื้นหลัง รวมถึงข้อความและไอคอนที่เน้นความสำคัญ
ระบุรูปแบบสีรอง ลำดับที่สาม และสีกลาง เพื่อปรับแต่งรูปแบบสีโดยสมบูรณ์
ตอนนี้สีของแบรนด์จะรวมอยู่ในรูปแบบสีหลักที่เปลี่ยนไปให้เข้ากับพื้นที่สี M3 ซึ่งเข้าถึงได้อย่างเต็มรูปแบบ รวมถึงส่งออกและใช้งานภายในโค้ดเป็นธีมได้
6. กำลังใช้ธีมของคุณ
บทบาท & โทเค็น
สีเฉพาะจุดแต่ละสี (หลัก รอง และลำดับที่สาม) จะแบ่งออกเป็นสีต่างๆ กัน 4 สีที่เข้ากันได้สำหรับการจับคู่ การเน้นสี และการแสดงออกทางภาพ กลุ่มนี้จะใช้สีเฉพาะจุด บนสี คอนเทนเนอร์ และบนคอนเทนเนอร์
บทบาทที่เป็นกลางจะใช้สำหรับพื้นผิวและพื้นหลัง รวมถึงข้อความและไอคอนที่เน้นความสำคัญ
โทเค็นการออกแบบแสดงถึงการตัดสินใจด้านการออกแบบเล็กๆ น้อยๆ ที่ทำซ้ำซึ่งประกอบขึ้นเป็นสไตล์ภาพของระบบการออกแบบ โทเค็นจะแทนที่ค่าคงที่ เช่น รหัสสีแบบเลขฐาน 16 ซึ่งมีชื่อที่เข้าใจได้ง่าย การออกแบบโทเค็นให้เชื่อมโยงตัวเลือกของสไตล์อย่างมีความหมาย ซึ่งอาจขาดความสัมพันธ์ที่ชัดเจน
ปลั๊กอิน Figma จะสร้างโทเค็นและป้อนสีต้นทางของคุณเองในรูปแบบของสไตล์ Figma เพื่อเชื่อมต่อกับแบบจำลอง คู่มือเกี่ยวกับสไตล์ของแบรนด์ และแม้กระทั่งระบบการออกแบบที่มีอยู่
โทเค็นการออกแบบจะสร้างภาษาร่วมระหว่างบทบาทของสีและการใช้งาน
ลำดับชั้นของสี
เมื่อใช้บทบาทสีกับภาพจำลอง ให้พิจารณาลำดับความสำคัญหรือลำดับชั้นขององค์ประกอบ แนวคิดนี้จะช่วยกำหนดสีของแบรนด์ให้กับบทบาทที่เกี่ยวข้อง และยังแมปสีภายใน UI ด้วย โดยทั่วไปแล้ว สีที่มีความอิ่มตัวหรือความเข้มข้นมากกว่าจะดึงดูดความสนใจของผู้ใช้เป็นอันดับแรก นี่จึงเป็นเหตุผลที่บทบาทสีหลักคือคอมโพเนนต์การแมปซึ่งเน้นคำกระตุ้นให้ดำเนินการ (Call-To-Action) มากกว่า แม้ว่า Material Theme Builder ใช้ระบบสี M3 เพื่อสร้างสีที่เหมาะสม การให้สีรองหรือสีที่ 3 ที่มีความอิ่มตัวสูงกว่าจะสร้างสีที่เด่นชัดกว่าสีหลัก ลองพิจารณาลำดับที่คุณต้องการให้ผู้ใช้มีส่วนร่วมใน UI และเนื้อหาเพื่อช่วยกำหนดบทบาทสี ไม่ใช่คอมโพเนนต์ทั้งหมดที่ควรเลือกใช้หลัก
สีอิ่มตัวแบบทึบจะดึงดูดความสนใจได้มากที่สุด
7. สลับไปที่ธีม
หากต้องการใช้ธีมที่กำหนดเองซึ่งคุณสร้างขึ้นกับงานออกแบบ เราจำเป็นต้องตั้งค่าแบบจำลองกับโทเค็นในธีม Material ที่มีอยู่
คอมโพเนนต์ Material จะมีบทบาทที่แมปไว้ล่วงหน้า และจะทำงานร่วมกับ Material Theme Builder โดยอัตโนมัติ
สลับเป็นธีมจากโมดัล Material Theme Builder
- มาตั้งค่าโทเค็นทั้งหมด (รูปแบบ Figma) ในเลย์เอาต์ด้านขวาเพื่อใช้ธีมนี้โดยเลือกเฟรมของเลย์เอาต์แล้วคลิกสลับ คุณจะเห็นการอัปเดตคำนำหน้ารูปแบบในสีที่เลือก
- ทุกอย่างไม่ได้อัปเดตใช่ไหม คอมโพเนนต์ที่กำหนดเอง เช่น การ์ดเคล็ดลับการดูแลต้นไม้ จะต้องใช้รูปแบบ Figma ก่อน เลือกที่เก็บเคล็ดลับการดูแลที่เลือกคอนเทนเนอร์ไว้ แล้วคลิกไอคอน 4 จุดเพื่อกำหนดรูปแบบ จากนั้นเลือกคอนเทนเนอร์ลำดับที่ 3 ให้ทำแบบเดียวกันนี้กับเนื้อหาของการ์ดเคล็ดลับการดูแล ยกเว้นการกำหนดคอนเทนเนอร์ที่ 3 ป้ายกำกับเล็กๆ ในรายการนี้เป็นคอมโพเนนต์ที่กำหนดเองด้วย แต่เราจะกลับมาดูอีกครั้งในภายหลัง
- คอมโพเนนต์ดีไซน์ Material ใช้การแมปเริ่มต้น แต่คุณทดสอบการกำหนดรูปแบบให้เหมาะกับ UI มากที่สุดได้ ใช้เวลาสักครู่เพื่อลองใช้ลำดับชั้นของสีและการแสดงออกถึงแบรนด์ในรูปแบบต่างๆ
(เฉพาะธีมที่รวมอยู่ในไฟล์ส่งออกสำหรับโค้ด หากทำงานร่วมกับวิศวกร ให้แชร์แบบจำลองเพื่อสื่อสารเกี่ยวกับการแมปโทเค็น เนื่องจากจะไม่มีการรวมข้อมูลดังกล่าวไว้ในการส่งออก)
การเปิดปลั๊กอินโดยไม่มีธีมจะแสดงหน้าจอการตั้งค่าเพื่อเริ่มต้นใช้งาน "เริ่มต้นใช้งาน" จะสร้าง "material-theme" พื้นฐานเริ่มต้น เป็นกลุ่มสไตล์ Figma เพื่อเชื่อมต่อกับแบบจำลองของคุณ หรือใช้กับชุดดีไซน์ Material
8. การขยายให้ไกลกว่าแผนหลัก
ตอนนี้คุณมีธีมสีที่มีแบรนด์ที่แมปกับคอมโพเนนต์และแบบจำลองการออกแบบแล้ว แต่คุณมีสีอื่นๆ ที่ต้องรวมไว้ด้วย นี่คือที่มาของรูปแบบเพิ่มเติมเพื่อให้สามารถใส่สีที่กำหนดเองได้
ซึ่งอาจเป็นสีที่สื่อความหมาย สีเฉพาะของแบรนด์ หรือแม้แต่สีเฉพาะผลิตภัณฑ์ก็ได้ ซึ่งจะต้องมีการกำหนดบทบาทและเลื่อนไปตามอัลกอริทึมสีหรือยังคงเป็นสีที่ป้อนไว้
นอกจากนี้ รูปแบบสีที่ขยายยังเพิ่มความเป็นไปได้ในการรวมสีแบบไดนามิก (สร้างโดยผู้ใช้) เข้ากับสีของแบรนด์ ให้รูปแบบหลักมีผลกับการปรับเปลี่ยนให้เหมาะกับผู้ใช้ ส่วนสีของแบรนด์จะกำหนดไว้ในรูปแบบเพิ่มเติม ซึ่งหมายความว่าองค์ประกอบ UI จะเหมาะกับผู้ใช้มากขึ้น และสีของแบรนด์อาจให้ผลลัพธ์ที่แม่นยำมากขึ้นในแอป
รูปแบบหลักสามารถขยายให้รวมสีที่กำหนดเองได้ 
9. การขยายและ การปรับแต่ง
การขยายรูปแบบด้วยสีที่กำหนดเองจะช่วยให้เพิ่มสีต่างๆ ได้ เช่น สีที่สื่อความหมายหรือสีของแบรนด์อื่นๆ เพิ่มเติม
สคีมที่กำหนดเองที่เพิ่มสีที่กำหนดเองแล้ว
- ในโมดัลปลั๊กอิน ให้คลิกเพิ่มสีใต้สีคีย์
- ธีมปัจจุบันจะอัปเดตด้วยแถว Custom0 ใหม่ อัปเดตสีนี้โดยคลิกสีที่ต้องการ แล้วเลือกสีใหม่
- สีแบบขยายเหล่านี้จะพบเป็นสไตล์ภายในรูปแบบอ่านอย่างเดียวเป็น Custom0 มีทั้งชุดสีและโทนการเล่าเรื่อง มาจับคู่ป้ายกำกับของรายการกับสีใหม่กัน โดยเลือกพื้นหลังของป้ายกำกับและกำหนดบทบาทหนึ่งให้กับสีของสีที่เพิ่มเข้ามา (คอนเทนเนอร์ที่ปรับแต่งเอง)
กำลังตั้งค่าสีที่กำหนดเองในสีที่เลือก
- Material Theme Builder จะสร้างสีเป็น Custom# โดยอัตโนมัติ หากต้องการเปลี่ยนชื่อสีที่กำหนดเองที่เพิ่มแล้ว ให้ขยายกลุ่มสไตล์ของธีมในแผงรูปแบบ (ซึ่งจะปรากฏขึ้นเมื่อไม่ได้เลือก) จากนั้นมองหา Custom0 ภายในกลุ่มย่อยต้นทาง การเปลี่ยนชื่อแหล่งที่มาที่นี่จะเปลี่ยนชื่อสีภายในโมดัลปลั๊กอิน
ดูรูปแบบสีที่กำหนดเองได้ในแผงรูปแบบ
- การลบสีที่เพิ่มลงไปนั้นสามารถทำได้ในลักษณะคล้ายกัน โดยการคลิกขวาแล้วลบรูปแบบนั้นๆ ครั้งถัดไปที่เปิดปลั๊กอิน สีที่เพิ่มจะถูกนำออก การเปลี่ยนชื่อและการลบอาจไม่แสดงในแผนภาพสี
10. ขอแสดงความยินดี
เยี่ยมมากที่เรียนรู้วิธีสร้างธีมสีที่กำหนดเองโดยใช้เครื่องมือสร้างธีมของวัสดุ นำธีมดังกล่าวไปใช้กับแบบจำลองการออกแบบ และเพิ่มเติมลงไปในโทนสี ระบบสี Material 3 ใหม่ทำให้ดีไซน์ต่างๆ เข้าถึงได้ ยืดหยุ่น และเข้ากันได้ เราอดใจรอดูการใช้งานของคุณไม่ไหวแล้ว
หากมีข้อสงสัย โปรดติดต่อเราได้ทุกเมื่อโดยใช้ @MaterialDesign บน Twitter
โปรดติดตามเนื้อหาการออกแบบและบทแนะนำเพิ่มเติมได้ที่ youtube.com/MaterialDesign