ธีม

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

สรุปประเด็นสำคัญ

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

ประเภทของธีม

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

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

ธีมของระบบ

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

ธีมสว่างและมืด

ธีมสว่างหรือโหมดวัน ประกอบด้วยโหมดการแสดงผลแบบสว่างและ ความสว่างและพื้นผิวที่สร้างจากค่าโทนสีสูง ส่วนธีมมืด หรือโหมดกลางคืน ปรับ UI เพื่อลดความสว่าง แพลตฟอร์มต่างๆ สร้างขึ้นมาจากที่มืด สีเทาหรือค่าโทนต่ำ

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

วันที่

พิจารณาสิ่งสำคัญต่อไปนี้เมื่อใช้ธีมสว่างและธีมมืด

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

ธีมที่ผู้ใช้สร้างขึ้น

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

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

วันที่

วันที่

ธีมของผู้ผลิต

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

ธีมของแอป

พื้นฐาน

คอมโพเนนต์ Material ในไลบรารี Material มีธีมพื้นฐานที่ ใช้รูปแบบสีม่วงและแบบอักษร Roboto แอปที่ไม่ได้กำหนดธีม จะเปลี่ยนกลับไปเป็นแอตทริบิวต์พื้นฐานเหล่านี้

กำหนดเอง (แบรนด์)

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

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

วันที่

วันที่

เนื้อหา

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

วันที่

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

วันที่

วัสดุ

ดีไซน์ Material มีธีมพื้นฐานและระบบการกำหนดธีม (สี, ประเภท รูปร่าง) ยังสามารถขยายธีมของวัสดุเพื่อให้บรรลุ ให้กับธีม

แบรนด์

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

ดูวิธีใช้ระบบที่กำหนดเองใน Compose

แอตทริบิวต์ของธีม

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

สี

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

ภายในธีม รูปแบบสีคือกลุ่มของโทนสีที่กำหนดให้กับบทบาทเฉพาะ ซึ่งแมปกับคอมโพเนนต์ เรียนรู้เพิ่มเติมเกี่ยวกับสีใน Android UI และระบบสีของ Material 3

วันที่

ประเภท

แบบอักษรระบบของ Android คือ Roboto (ซึ่งใช้งานได้ฟรีกับทุกแอป) แต่คุณ สามารถปรับแต่งประเภท คำนึงถึงความอ่านง่ายของแบบอักษรที่เลือกเพื่อให้สอดคล้องกับข้อความ บทบาทของพวกเขา อ่านเกี่ยวกับประเภทการใช้

วันที่

รูปทรง

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

วันที่

ไอคอน

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

วันที่

แอตทริบิวต์ธีมอื่นๆ

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

ใช้ธีมในแอป

ธีมเทียบกับสไตล์และคลาส

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

ใช้งานธีมในการเขียน

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้ Jetpack ที่ Material Design 3 in Compose เขียนเพื่อสร้างการใช้งานธีมดีไซน์ Material 3

Color.kt
val md_theme_light_primary = Color(0xFF476810)
val md_theme_light_onPrimary = Color(0xFFFFFFFF)
val md_theme_light_primaryContainer = Color(0xFFC7F089)
val md_theme_dark_primary = Color(0xFFACD370)
val md_theme_dark_onPrimary = Color(0xFF213600)
val md_theme_dark_primaryContainer = Color(0xFF324F00)

นำธีมไปใช้ใน View

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

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

Colors.xml
<resources>
<color name="home_yellow">#E8D655</color>
</resources>

WebView

เนื้อหาเว็บใน WebView ยังใช้การจัดรูปแบบสว่าง มืด หรือค่าเริ่มต้นได้ด้วย อ่านวิธีการ รองรับธีมมืดใน WebView

ปรับแต่งธีม Material

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

วันที่