อินเทอร์เฟซ Material You และสีสันแบบไดนามิกที่ปรับตามพื้นหลังของคุณ

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

อินเทอร์เฟซ Material You และสีสันแบบไดนามิกที่ปรับตามพื้นหลังของคุณ

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

ปรัชญาการออกแบบใหม่นี้ ซึ่งมีมาตั้งแต่ปี... Android 12 และได้รับการพัฒนาเพิ่มเติมใน Android 13 โดยเป็นการรวมเอา... สีสันสดใส การเคลื่อนไหวที่ลื่นไหล และวิดเจ็ตที่ได้รับการปรับปรุงใหม่ผลลัพธ์ที่ได้คือประสบการณ์การรับชมภาพที่ให้ความรู้สึกเป็นธรรมชาติและเข้าถึงอารมณ์ได้มากขึ้น แต่ในขณะเดียวกันก็เคารพในผลงานของนักออกแบบ นักพัฒนา และแบรนด์ต่างๆ ที่ต้องการควบคุมเอกลักษณ์ทางภาพของตนเอง

Material You หรือ Material Design 3 คืออะไร?

วัสดุของคุณ หรือที่รู้จักกันในชื่อ การออกแบบวัสดุ 3นี่คือวิวัฒนาการล่าสุดของระบบการออกแบบของ Google สำหรับอินเทอร์เฟซ UX/UI ไม่ใช่แค่สไตล์ภาพ แต่เป็นชุดขององค์ประกอบต่างๆ คู่มือ ส่วนประกอบ และอัลกอริธึม ซึ่งช่วยให้สามารถสร้างอินเทอร์เฟซที่สม่ำเสมอได้บนโทรศัพท์มือถือ แท็บเล็ต นาฬิกา และอุปกรณ์ Android อื่นๆ

แตกต่างจาก Material Design เวอร์ชันก่อนๆ Material You เน้นที่... การแสดงออกส่วนบุคคลและการปรับตัวให้เข้ากับผู้ใช้แนวคิดก็คือ คนสองคนที่มีโทรศัพท์มือถือรุ่นเดียวกัน อาจมีอินเทอร์เฟซที่แตกต่างกันมาก แต่ทั้งสองแบบยังคงใช้งานได้ เข้าถึงได้ และสอดคล้องกับระบบนิเวศของ Android

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

สิ่งที่น่าสนใจคือ Material You ไม่ได้จำกัดอยู่แค่เพียงเท่านั้น พิกเซล Googleตรรกะสีแบบไดนามิกและแนวทางการออกแบบได้รับการขยายไปสู่การปรับแต่งหลายระดับ เช่น หนึ่ง UI, OxygenOS, ColorOS, OriginOS หรือ MIUIโดยได้รับการสนับสนุนเป็นพิเศษจาก Google เพื่อให้มั่นใจได้ถึงประสบการณ์การใช้งานที่สม่ำเสมอในอุปกรณ์ส่วนใหญ่ที่ใช้ Android 12 และเวอร์ชันที่ใหม่กว่า

วิธีสร้างวอลเปเปอร์ด้วย AI บน Android
บทความที่เกี่ยวข้อง:
วิธีสร้างวอลเปเปอร์ AI ของคุณเองสำหรับ Android

อารมณ์ ความเป็นปัจเจกบุคคล และการเปลี่ยนแปลงกระบวนทัศน์

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

เป็นเวลาหลายปีแล้วที่ทั้ง iOS และ Android ค่อนข้างมีความยืดหยุ่นน้อยในแง่ของ... การปรับแต่ง UI อย่างแท้จริงนอกเหนือจากการเปลี่ยนพื้นหลัง เพิ่มวิดเจ็ต หรือติดตั้งแอปพลิเคชันตัวเรียกใช้งานแล้ว ตัวเลือกอื่นๆ ก็มีจำกัด ด้วย Android 12 และ Material You กูเกิลได้นำเอาจิตวิญญาณของสโลแกนเก่าที่ว่า "อยู่ด้วยกัน แต่ไม่เหมือนกัน" กลับมาอีกครั้ง โดยเน้นที่ระบบนิเวศทั่วไป แต่มีอินเทอร์เฟซที่ปรับแต่งให้เหมาะกับผู้ใช้แต่ละคน

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

คุณสมบัติใหม่หลักของ Material You

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

การปรับแต่งอินเทอร์เฟซที่ล้ำลึก

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

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

ความสามารถในการปรับตัวให้เข้ากับหน้าจอและรูปแบบต่างๆ

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

ในกรณีของโทรศัพท์พับได้ Google ได้กำหนดแนวทางเฉพาะในด้านต่างๆ เช่น ความสามารถในการเข้าถึงองค์ประกอบต่างๆ จุดเชื่อมต่อหลัก และรูปแบบที่ซับซ้อนที่สุดตัวอย่างเช่น ส่วนบนสุด 25% ของหน้าจอที่เปิดอยู่ ถือว่าเข้าถึงได้ยาก ดังนั้นจึงไม่แนะนำให้วางการกระทำหลักไว้ในบริเวณนั้น และข้อมูลสำคัญไม่ควรวางไว้เหนือบานพับโดยตรง

การเคลื่อนไหวและการตอบสนองทางสัมผัส

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

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

สีสันสดใส: หัวใจสำคัญของ Material You

อินเทอร์เฟซ Material You และสีสันแบบไดนามิกที่ปรับตามพื้นหลังของคุณ

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

ระบบนี้อาศัยวิธีการทางเทคนิคที่ค่อนข้างซับซ้อนซึ่งผสมผสานพื้นที่สีเข้าด้วยกัน CAM16, โทนสีและบทบาทของสีเป้าหมายคือการรักษาความสามารถในการอ่านที่ดี ความคมชัดที่เพียงพอ และความสวยงามที่ลงตัวทั้งในโหมดสว่างและโหมดมืด แม้ว่าผู้ใช้จะเลือกภาพพื้นหลังที่ค่อนข้างซับซ้อนก็ตาม

วิธีการสร้างพาเล็ตสีใน Material You ทำงานอย่างไร

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

  • การสกัดสีจากเมล็ดพืช โดยอิงจากภาพพื้นหลัง เนื้อหาแอป หรือสีคงที่ที่ผู้ใช้หรือแบรนด์เลือกไว้
  • การแปลงและการวิเคราะห์ในพื้นที่ CAM16 เพื่อให้ได้ค่าโทนสี ความอิ่มตัวของสี และพารามิเตอร์การรับรู้ด้านอื่นๆ
  • การสร้างชุดโทนสีหลักห้าชุด (accent1, accent2, accent3, neutral1 และ neutral2) จากสีต้นฉบับและการปรับแต่งค่าความอิ่มตัวของสีและโทนสี
  • สร้างเฉดสี 13 สีต่อพาเล็ตโดยมีระดับความสว่างที่แตกต่างกัน (0, 10, 50, 100, 200, 300… จนถึง 1000) ส่งผลให้ได้สีแบบไดนามิกทั้งหมด 65 สี
  • การจับคู่โทนสีเหล่านั้นกับบทบาทสีของส่วนติดต่อผู้ใช้ (UI)เช่น หลัก รอง พื้นผิว พื้นหลัง ข้อความ คอนเทนเนอร์ เป็นต้น
วิธีทดสอบ Android 16 ก่อนใคร
บทความที่เกี่ยวข้อง:
Android 16 และ Material 3 Expressive: การเกิดใหม่ของภาพที่กำหนดประสบการณ์มือถือใหม่

แต่ละพาเล็ตทั้งห้ามีคุณสมบัติเฉพาะตัว เช่น accent1 มักจะเป็นสีหลักของแบรนด์หรือธีมของผู้ใช้accent2 และ accent3 ทำหน้าที่เป็นสีเน้นเสริม และ neutral1/neutral2 สงวนไว้สำหรับพื้นหลัง พื้นผิว และองค์ประกอบที่ไม่เด่นชัดมากนัก

รูปแบบธีมใน Android 13

ใน Android 13 ระบบได้ก้าวไปอีกขั้นและอนุญาตให้คุณเลือกได้ระหว่าง หกรูปแบบธีมที่แตกต่างกันซึ่งจะแตกต่างกันไปว่าสีดั้งเดิมนั้นจะถูกตีความอย่างไรเพื่อสร้างชุดสีสุดท้าย:

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

ระบบจะรับข้อมูล JSON ที่จัดเก็บไว้ใน การตั้งค่า.การรักษาความปลอดภัย.THEME_CUSTOMIZATION_OVERLAY_PACKAGES โดยระบุสีต้นฉบับ (เช่น "746BC1") และอาจระบุสไตล์ธีม (เช่น "EXPRESSIVE") ด้วย จากนั้น Android จะสร้างสีต่างๆ 65 แบบโดยอัตโนมัติ ซึ่งแอปจะนำไปใช้

สีพื้นฐานมาจากไหน?

Material You พิจารณาสามเส้นทางหลักในการได้รับ สีดั้งเดิม ซึ่งจะใช้เป็นจุดเริ่มต้นสำหรับอัลกอริทึม:

  • จากภาพพื้นหลังของผู้ใช้นี่เป็นกรณีที่พบได้บ่อยที่สุด ระบบจะวิเคราะห์ภาพโดยใช้การลดจำนวนสี (color quantization) คัดเลือกภาพที่เป็นไปได้หลายภาพ และเลือกภาพที่ตรงตามเกณฑ์ความอิ่มตัวของสีขั้นต่ำ (เช่น ค่า CAM16 ≥ 5) เพื่อให้แน่ใจว่าผลลัพธ์จะไม่ดูจืดชืดเกินไป
  • จากเนื้อหาของแอปหรือเว็บไซต์แอปพลิเคชันสามารถตัดสินใจได้เองว่าสีหลักของอินเทอร์เฟซจะมาจากเนื้อหาภายใน ทำให้คงไว้ซึ่งความสวยงามที่สดใสแต่สอดคล้องกับตัวผลิตภัณฑ์
  • จากสีที่เลือกด้วยตนเองแบรนด์หรือผู้ใช้เลือกสีที่ต้องการ และระบบจะสร้างชุดสีทั้งหมดจากสีนั้น โดยไม่จำเป็นต้องพึ่งพาสีพื้นหลัง

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

การควบคุมสำหรับแบรนด์ นักออกแบบ และนักพัฒนา

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

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

ธีมและรูปแบบแบรนด์ที่กำหนดเอง

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

ธีมที่กำหนดเองเหล่านี้จะกำหนดค่าต่างๆ โทเค็นสีที่จำเป็น และอนุญาตให้แอปของคุณดำเนินการดังต่อไปนี้:

  • ควรออกแบบให้สอดคล้องกับระบบนิเวศของ Material You โดยรวม
  • รักษาการเข้าถึงที่เหมาะสมทั้งในโหมดสว่างและโหมดมืด
  • หากต้องการใช้งานการผสมผสานสีแบบไดนามิกในอนาคต โปรดเลือกใช้สีของระบบได้ตามต้องการ

คุณยังสามารถ ผสมผสานสีของแบรนด์เข้ากับสีสันที่สดใสรูปแบบหลักสามารถรับเอาการปรับแต่งบางส่วนของผู้ใช้มาใช้ได้ ในขณะที่ชุดสีเพิ่มเติม (เช่น สำหรับสถานะความหมายเฉพาะเจาะจงหรือจุดเด่นของแบรนด์) จะคงที่

โทเค็นการออกแบบและบทบาทสี

Material You สนับสนุนการใช้งานอย่างยิ่ง โทเค็นการออกแบบนั่นคือ ชื่อเชิงความหมายที่ใช้แทนค่าโดยตรง เช่น รหัสเลขฐานสิบหก แทนที่จะใช้ "#6200EE" เพียงอย่างเดียว จะใช้โทเค็นแทน เช่น สีหลัก, บนพื้นผิว, คอนเทนเนอร์หลักฯลฯ

โทเค็นเหล่านี้เชื่อมต่อกับ ชุดโทนสีแบบไดนามิก (system_accent1_600, system_neutral1_10 เป็นต้น) เพื่อให้แอปสามารถอัปเดตรูปลักษณ์ได้โดยไม่ต้องเขียนโค้ดใหม่ทั้งหมด ชุดเครื่องมือออกแบบและปลั๊กอิน Figma จะสร้างโทเค็นเหล่านี้และแมปเข้ากับสไตล์ภายในไฟล์ออกแบบ ทำให้การถ่ายโอนไปยังขั้นตอนการพัฒนาทำได้ง่ายขึ้นมาก

ลำดับชั้นทางภาพและการเข้าถึง

เมื่อนำบทบาทของสีมาใช้กับ UI ของคุณ สิ่งสำคัญคือต้องเคารพใน... ลำดับความสำคัญสีที่เข้มข้นที่สุดควรใช้สำหรับข้อความกระตุ้นการกระทำและองค์ประกอบสำคัญ ส่วนสีโทนกลางและสีอ่อนกว่าควรใช้สำหรับพื้นหลังและเนื้อหาเสริม

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

สีสันแบบไดนามิกในระบบนิเวศของ Android

ในตอนแรก ระบบสีแบบไดนามิกไม่ได้เป็นส่วนหนึ่งของ AOSP ซึ่งทำให้เกิดข้อสงสัยว่าระบบนี้จะมีเฉพาะในโทรศัพท์ Pixel เท่านั้นหรือไม่ เมื่อเวลาผ่านไป Google ก็ได้เพิ่มระบบนี้เข้ามา การผสานรวมตรรกะการแยกและการสร้างพาเลทสีใน Android 12 และ 13โดยมีการจัดเตรียมแพทช์และเอกสารประกอบเพื่อช่วยให้ผู้ผลิตอุปกรณ์สามารถนำไปใช้ได้อย่างสม่ำเสมอ

แบรนด์เช่น ซัมซุง, ออนเพิล, ออปโป้, วีโว่, เรียลเม่ หรือ เสี่ยวหลง พวกเขาได้ประกาศไปแล้วว่ารองรับสีแบบไดนามิกในเลเยอร์ที่ใช้ Android 12 ขึ้นไป เพื่อให้แอปอย่าง Gmail สามารถปรับรูปลักษณ์ได้โดยยังคงใช้โทนสีเดียวกันบนอุปกรณ์ต่างๆ

ข้อกำหนดสำหรับผู้ผลิต (OEM)

เพื่อนำเสนอ การจัดเรียงให้สอดคล้องกับวัสดุที่คุณพันธมิตรของ Android ต้อง:

  • ใช้ ใช้ตรรกะการแยกสีแบบเดียวกับ AOSP เพื่อให้ได้สีดั้งเดิมของวอลเปเปอร์
  • ขยายสีนั้นใน สี 65 API อย่างเป็นทางการ (ชุดสีเน้นและสีกลาง โดยแต่ละชุดมี 13 เฉดสี)
  • ใช้ชุดสีเหล่านี้ทั้งใน ส่วนติดต่อผู้ใช้ของระบบ เช่นเดียวกับในแอปพลิเคชันต่างๆ ของระบบเองเพื่อให้ผู้พัฒนาซอฟต์แวร์ภายนอกมีพฤติกรรมที่สอดคล้องกัน
  • เพื่อมอบประสบการณ์ ตัวเลือกธีมและวอลเปเปอร์ โดยผู้ใช้สามารถดูและเลือกชุดสีต่างๆ โดยอิงจากพื้นหลังหรือสีพื้นฐานได้

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

วอลเปเปอร์, ตัวเลือกธีม และชุดสีคงที่

การไหลของสีแบบไดนามิกมาตรฐานเริ่มต้นจาก ตัวเลือกวอลเปเปอร์หรือธีมเมื่อผู้ใช้เปลี่ยนพื้นหลังหรือเลือกชุดสี ระบบจะดำเนินการดังนี้:

  1. คำนวณสีพื้นหลังหลัก (หรืออ่านค่าสีพื้นฐานที่เลือกไว้)
  2. กรองสีเหล่านั้นโดยใช้ค่าความอิ่มตัวของสีและกฎอื่นๆ เพื่อเลือกสีที่ถูกต้อง
  3. สร้างชุดสีโทนต่างๆ ทั้งห้าชุด และเติมข้อมูลสีลงใน API ทั้ง 65 รายการ
  4. อัปเดต UI ของระบบและแสดงสีเหล่านั้นให้แอปต่างๆ สามารถใช้งานได้

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

เครื่องมือสำหรับนักออกแบบ: ตัวสร้างธีม Material และชุดเครื่องมือออกแบบ

เพื่ออำนวยความสะดวกในการนำ Material Design มาใช้ในวงการออกแบบ Google ได้สร้างเครื่องมือเฉพาะหลายอย่าง โดยเน้นไปที่ Figma เป็นหลัก เครื่องมือที่สำคัญที่สุดคือ... ปลั๊กอิน Material Theme Builderซึ่งช่วยให้คุณสร้างโทนสีที่มีชีวิตชีวาและเป็นเอกลักษณ์ของแบรนด์ได้โดยไม่ต้องยุ่งยากกับการคำนวณทางคณิตศาสตร์ของสี

กับ เครื่องมือนี้ ผู้หญิงเลว:

  • โหลด หัวข้ออ้างอิง หรือสร้างขึ้นมาใหม่ตั้งแต่เริ่มต้น
  • กำหนดสีหลัก (หลัก รอง ตติยภูมิ กลาง) และดูว่าพวกมันกระจายตัวอย่างไรในส่วนติดต่อผู้ใช้
  • นำแผนงานที่สร้างขึ้นไปใช้กับ ส่วนประกอบชุด Material Design รวมอยู่ในไฟล์ Figma แล้ว
  • ขยายโครงการด้วย สีที่กำหนดเองเพิ่มเติม (Custom0, Custom1…) สำหรับความต้องการด้านการสร้างแบรนด์หรือความหมายเฉพาะเจาะจง

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

นอกเหนือจากอุปกรณ์มือถือ: วิดเจ็ต ไอคอน และตัวเรียกใช้งาน

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

ในทางกลับกัน ชุมชนผู้พัฒนาแอปพลิเคชันตัวเรียกใช้งานและชุดไอคอนก็ให้ความสนใจเช่นกัน มีชุดไอคอนแบบไดนามิกที่ สีของมันจะเปลี่ยนไปตามภาพพื้นหลังหรือสีเน้นของระบบและสามารถปรับให้เข้ากับทั้งโหมดสว่างและโหมดมืดได้ ในการใช้งาน คุณต้องใช้แอปพลิเคชัน Launcher ที่เข้ากันได้ (เปิดโนวา(เช่น Lawnchair, Hyperion, Niagara, Smart Launcher เป็นต้น) และหลังจากเปลี่ยนพื้นหลังหรือธีมแล้ว ให้ใช้ชุดไอคอนอีกครั้งเพื่อสร้างจานสีใหม่

Google Material 3 Expressive คืออะไร?
บทความที่เกี่ยวข้อง:
วัสดุที่ 3 การแสดงออก: การปฏิวัติทางภาพและส่วนตัวในประสบการณ์ Google

Material You ได้เปลี่ยนโฉม Android ให้กลายเป็นแพลตฟอร์มที่สีและรูปทรงปรับเปลี่ยนได้อย่างชาญฉลาดให้เข้ากับผู้ใช้แต่ละคน โดยไม่ทิ้งนักออกแบบ แบรนด์ หรือนักพัฒนาไว้เบื้องหลัง ด้วยระบบของ สีสันสดใส โทนสี และสัญลักษณ์การออกแบบเป็นไปได้ที่จะมีอินเทอร์เฟซที่ปรับแต่งได้สูง แต่ยังคงมีความสอดคล้อง เข้าถึงง่าย และคาดเดาได้ในเชิงเทคนิค ไม่ว่าคุณจะใช้ Pixel, Samsung หรือ Xiaomi แนวคิดก็คือโทรศัพท์ของคุณควรสะท้อนบุคลิกของคุณ ในขณะที่ยังคงทำงานและมีรูปลักษณ์ตามที่ผู้คนนับล้านในระบบนิเวศ Android คาดหวัง แบ่งปันข้อมูลเพื่อให้ผู้ใช้เพิ่มเติมสามารถเรียนรู้เกี่ยวกับหัวข้อนั้นๆ