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