ใช้สีเพื่อแสดงสไตล์และสื่อความหมาย การตั้งค่าสีของแอปอาจมีความสำคัญต่อการปรับเปลี่ยนในแบบของคุณ การกำหนดวัตถุประสงค์เชิงความหมาย และแน่นอนการกำหนดเอกลักษณ์ของแบรนด์
สรุปประเด็นสำคัญ
- วิธีตรวจสอบการช่วยเหลือพิเศษ
- ตรวจสอบคอนทราสต์ของสีและหลีกเลี่ยงการจับคู่สีที่มีโทนคล้ายกัน
- โปรดทราบว่าสีแดงและสีเขียวเป็นรูปแบบที่พบได้ทั่วไป แต่ผู้ใช้ที่ตาบอดสีบางประเภทอาจไม่สามารถเข้าถึงได้
- ฝึกใช้สีอย่างมีความหมาย: แอปอาจดูสดใสและสื่ออารมณ์ได้ แต่ให้ใช้สีในชุดสีเดียวกัน การขยายรูปแบบด้วยสีเชิงความหมายมากเกินไปอาจทำให้เกิดความสับสน ส่วนการใช้สีตกแต่งมากเกินไปอาจทำให้ลายตา
- สีอาจมีลวดลาย ดังนั้นให้ใช้ลวดลายสีที่กำหนดไว้ซ้ำ หากใช้สีเชิงความหมายในแอป ให้ใช้สีที่สอดคล้องกัน
- สร้างรูปแบบสีสว่างและสีเข้ม (และธีมแบบคอนทราสต์จะเหมาะที่สุด) เพื่อให้แอปทำงานได้ดีในบริบทต่างๆ
- กําหนดสีด้วยโทเค็นเพื่อระบุบทบาทสีขององค์ประกอบแทนการใช้ค่าที่กําหนดไว้ล่วงหน้า
- สีอาจมาจากแหล่งที่มาแบบไดนามิกและแบบคงที่ต่างๆ แต่หลีกเลี่ยงการผสมสีมากเกินไปในมุมมองเดียวกัน
- เมื่อใช้สีของเนื้อหาแบบไดนามิก ให้พยายามหลีกเลี่ยงการดึงสีจากเนื้อหาหลายชิ้น
พื้นที่สีใน Android
หากต้องการทําความเข้าใจวิธีที่ Android ใช้สีใน UI อย่างถูกต้อง คุณควรทราบก่อนว่าสีจะแสดงในอุปกรณ์อย่างไร
ลักษณะการแสดงสีในอุปกรณ์
แอปของคุณจะแสดงบนหน้าจอที่มีแสงด้านหลัง ซึ่งใช้สีดิจิทัลและเป็นไปตามรูปแบบและกฎบางอย่างที่ช่วยให้ดวงตาของเรารับรู้สีนั้น สีดิจิทัลคือสีเชิงบวก ซึ่งสร้างขึ้นโดยการ "เพิ่ม" หรือผสมแสงสีต่างๆ เพื่อสร้างสเปกตรัมสีที่สมบูรณ์ วิธีที่มนุษย์รับรู้สีจากหน้าจอหนึ่งไปยังอีกหน้าจอหนึ่งอาจแตกต่างกันอย่างมาก โดยขึ้นอยู่กับการปรับเทียบสีของอุปกรณ์ ประเภทหน้าจอ การตั้งค่า และพื้นที่สี
เมื่อออกแบบแอป ให้พิจารณาว่าสีที่ใช้อาจไม่เหมือนกันเนื่องจากปัจจัยเหล่านี้ ยังไม่นับถึงการรับรู้สีที่ไม่เหมือนกันของผู้ใช้แต่ละราย
เกี่ยวกับระบบสี
พื้นที่สีคือการจัดระเบียบสีที่ใช้รูปแบบสี RGB เป็นรูปแบบสีแบบเพิ่ม ซึ่งสร้างสเปกตรัมสีผ่านสีแดง เขียว และน้ำเงิน ส่วน CMYK ซึ่งใช้สําหรับการพิมพ์เป็นรูปแบบสีแบบหัก ด้วยเหตุนี้ นักออกแบบอินเทอร์แอกทีฟจึงมักใช้โมเดล RGB หรือโมเดลที่คล้ายกันเพื่อเลือกสี
Material 3 (M3) ได้เปิดตัว HCT ซึ่งเป็นพื้นที่สีใหม่ที่ใช้สี โครมา และโทนเพื่อกำหนดสีที่ถูกต้องตามการรับรู้เมื่อเทียบกับรูปแบบอื่นๆ เช่น HSL
ดูข้อมูลเพิ่มเติมเกี่ยวกับวิทยาศาสตร์สีและการพัฒนา HCT ได้ที่วิทยาศาสตร์สีและการออกแบบ
เฉดสี ความสดของสี และโทนสี
HCT ช่วยให้ใช้สีที่ปรับเปลี่ยนในแบบของคุณและมีความยืดหยุ่นมากขึ้นโดยยังคงอยู่ในพารามิเตอร์ของระบบ HCT จำลองสีโดยใช้สี โครมา และโทน ดังนี้
- โทนสี: โทนสีเปรียบเสมือนคำคุณศัพท์ที่ผู้ใช้แต่ละรายอาจใช้อธิบายสี เช่น "แดง" หรือ "สีม่วงไฟฟ้า" ค่า HCT ของสีจะอยู่ระหว่าง 0-360
- ความเข้มของสี: ความเข้มของสีแสดงถึงสีสันของสี ซึ่งอยู่ในช่วงตั้งแต่สีเทากลางไปจนถึงสีสันสดใส ในพื้นที่สี HCT โครมามีค่าสูงสุดประมาณ 120
- โทนสี: โทนสีคือความสว่างของสี HCT ใช้โทนสีเพื่อสร้างคอนทราสต์ สีที่ตั้งค่าเป็นค่าโทนเดียวกันจะใช้งานไม่ได้ในบริบทการช่วยเหลือพิเศษบางอย่าง โทนสีที่มีค่าต่ำจะเข้มกว่า ส่วนโทนสีที่มีค่าสูงจะสว่างกว่า
กระบวนการของระบบสี
สี M3 สร้างขึ้นจากรูปแบบ HCT เพื่อหารูปแบบสีที่เข้าถึงได้ง่ายและกลมกลืนกัน รวมถึงช่วยฟีเจอร์สีแบบไดนามิก ระบบสี M3 เริ่มต้นจากสีต้นทาง ระบบจะเปลี่ยนสีต้นฉบับนี้เป็นสีหลัก 5 สี ได้แก่ สีหลัก สีรอง สีสามัญ สีกลาง และสีกลางแบบต่างๆ สีหลัก 5 สีเหล่านี้จะสร้างชุดสีโทนซึ่งประกอบด้วยโทนสีที่เพิ่มขึ้นสำหรับสีหลักแต่ละสี
หากคุณกำหนดสีหลักด้วยตนเอง ให้สังเกตความเข้มของสีและโทนของอินพุต เนื่องจากโทนสีของสีอาจไม่ใช่ค่าโทนของบทบาทสี
ระบบสี M3 ทำงานด้วย Material Color Utilities (MCU) ซึ่งเป็นชุดไลบรารีสีที่มีอัลกอริทึมและยูทิลิตีที่ช่วยให้คุณพัฒนาธีมและรูปแบบสีในแอปได้ง่ายขึ้น
วิดีโอต่อไปนี้อธิบายวิธีสร้างชุดสี
ข้อจํากัดด้านสี
ข้อจำกัดด้านสีคือขีดจำกัดทางกายภาพของสี ไม่ว่าจะเป็นขีดจำกัดทางฟิสิกส์จริง ข้อจำกัดทางสายตาทางชีววิทยาของเราเอง หรือข้อจำกัดของการแสดงผลสีบนหน้าจอ เช่น โทนสีบางโทนใช้ร่วมกับความเข้มหรือระดับสีบางระดับไม่ได้ ข้อจำกัดด้านสีเป็นสาเหตุที่ทำให้สีต่างๆ เช่น น้ำเงินอ่อนหรือแดงอ่อนใช้ไม่ได้ การแมปสีโทนต้องสอดคล้องกันสำหรับค่าสีทั้งหมด
รูปภาพก่อนหน้าแสดงแผนภูมิการแมปโทนสี 3 แบบสำหรับค่าสี H105, H25 และ H285
แผนภูมิ 1 – โทนสี 105 (สีเหลือง) บ่งบอกถึงความพร้อมจำหน่ายสี โครมาและโทนจะทำงานเหมือนกราฟ สีเหลืองมีสีที่จำกัดในบางโทนตามกราฟ สีเหลืองไม่มีความสดใสที่หลากหลายในโทนสีต่ำ
แผนภูมิ 2 – เฉดสี 25 (สีแดง) แสดงตัวเลือกสีมากกว่าเฉด 105 (สีเหลือง) ในแผนที่โทนสีนี้ จุดที่มีสีสันมากที่สุดอยู่ในระดับโทนสีที่ต่ำกว่า
แผนภูมิ 3 - โทนสี 285 (น้ำเงิน) แสดงให้เห็นว่าสีสันที่มากที่สุดอยู่ในโทนที่เข้มกว่า ในทางกลับกัน ความจุของโครมาจะลดลงเมื่อใช้โทนสีอ่อน
รูปแบบสี
รูปแบบสีคือชุดของสีเน้นและพื้นผิวที่มาจากโทนสีที่เฉพาะเจาะจงและกำหนดให้กับบทบาทของสี จากนั้นระบบจะแมปกับองค์ประกอบและคอมโพเนนต์ UI บทบาทของสีหมายถึงการใช้สี ไม่ใช่โทนสี เช่น บนสีหลักแทนที่จะเป็นบนสีน้ำเงิน
รูปแบบสีได้รับการออกแบบมาให้กลมกลืนกัน ตรวจสอบว่าข้อความเข้าถึงได้ และแยกองค์ประกอบและแพลตฟอร์ม UI ออกจากกัน คู่บทบาทสี (ประกอบด้วยบทบาทของคอนเทนเนอร์และบทบาทในคอนเทนเนอร์) มีค่าโทนสีที่ให้คอนทราสต์ที่เข้าถึงได้
ระบบจะสร้างรูปแบบสว่างและมืด รวมถึงกำหนดโทนสีเฉพาะ
ระบบสีของ Material และรูปแบบที่กำหนดเองจะให้ค่าเริ่มต้นสำหรับสีเพื่อเป็นจุดเริ่มต้นในการปรับแต่ง
ดูข้อมูลเพิ่มเติมเกี่ยวกับระบบสี M3
หากต้องการรูปแบบสีที่ปรับแต่งได้ ให้ดูชุด UI ของ Android
ใช้สีใน UI
สี UI ประกอบด้วยสีเฉพาะจุด สีเชิงความหมาย และสีพื้นผิว
- สีไฮไลต์หมายถึงสีหลักที่มักเป็นส่วนหนึ่งของชุดสีของแบรนด์ Android
- สีเชิงความหมาย (หรือสีที่กำหนดเองภายใน Material 3) คือสีที่มีความหมายเฉพาะ
- สีพื้นหมายถึงสีกลางที่ดึงมาจากสีอื่นๆ ซึ่งใช้เป็นสีพื้นหลัง
สีเฉพาะจุด
โดยปกติแล้ว สีไฮไลต์จะแสดงออกได้มากที่สุดภายใน UI ไม่ว่าจะเป็นการสร้างแบรนด์ การไฮไลต์การดําเนินการ การแสดงออกส่วนตัว หรือการแสดงออกของผู้ใช้
สีเฉพาะจุดแต่ละสี (หลัก รอง และรองลงมา) จะอยู่ในกลุ่มสีที่เข้ากันได้ 4-8 สีในโทนที่แตกต่างกันเพื่อใช้จับคู่ กำหนดจุดเน้น และการแสดงออกทางภาพ
สีแบบเปลี่ยนอัตโนมัติ
คุณกำหนดสีเฉพาะจุดจากแหล่งที่มาแบบไดนามิกได้
ตั้งแต่ Android 12 (API ระดับ 31) เป็นต้นไป สีแบบไดนามิกจะช่วยให้ระบบดึงสีต้นทางจากวอลเปเปอร์หรือเนื้อหาในแอปของผู้ใช้ เช่น ชิ้นงานคีย์อาร์ต สีแบบไดนามิกใช้อัลกอริทึมและกระบวนการ MCU เพื่อสร้างรูปแบบและนำไปใช้งานได้อย่างง่ายดาย หากต้องการใช้สีแบบไดนามิกกับแอป โปรดอ่านเปิดใช้ให้ผู้ใช้ปรับเปลี่ยนประสบการณ์สีในแอป
ลองใช้ Codelab สําหรับการแสดงภาพสีแบบไดนามิกเพื่อดูภาพรวมของสีแบบไดนามิก
คงที่
สคีมาแบบคงที่คือสคีมาที่มีค่าที่ไม่เปลี่ยนแปลง (หรือเปลี่ยนแปลงแบบสัมพัทธ์) วิธีทั่วไปในการสร้างรูปแบบแบบคงที่คือการใช้สีของแบรนด์ โดยปรับสีหลัก สีรอง และสีเสริมให้เข้ากับชุดสีหลักของแบรนด์
แม้ว่าคุณจะใช้สีแบบไดนามิก แต่เราขอแนะนําอย่างยิ่งให้สร้างรูปแบบแบบคงที่ไว้เป็นสำรองในกรณีที่อุปกรณ์ของผู้ใช้ใช้สีแบบไดนามิกไม่ได้ มิฉะนั้น ระบบจะใช้รูปแบบสีพื้นฐานสีม่วง
เมื่อใช้เครื่องมือสร้างธีม Material คุณจะใช้อัลกอริทึมสี MCU เพื่อสร้างธีมแบบคงที่ที่กําหนดเองได้ การดำเนินการนี้จะส่งผลให้คุณได้รับสีที่เลือกไว้ แต่สอดคล้องกับโทเค็นระบบสี M3 และหลักการการช่วยเหลือพิเศษที่กลมกลืนกัน
คุณยังคงสร้างรูปแบบคงที่ที่กำหนดเองทั้งหมดได้ โดยให้กําหนดค่าที่แตกต่างกันภายในสไตล์สี (color.kt หรือ color.xml) หรือส่งออกไฟล์ธีมจาก Material Theme Builder สําหรับ Figma หลังจากอัปเดตพร็อพเพอร์ตี้สไตล์ Figma
การใช้งาน
คอมโพเนนต์ Material มีบทบาทสีที่กำหนดไว้ล่วงหน้า แต่คุณใช้โทนสีได้ทั่วทั้ง UI และองค์ประกอบที่กำหนดเอง ใช้สีเฉพาะจุดทั้งหมดอย่างระมัดระวัง โดยคำนึงถึงว่าดวงตาของมนุษย์จะดึงดูดไปยังสีสันที่สดใสเป็นพิเศษ
ระบบจะใช้สีตามลําดับชั้นเช่นเดียวกับแบบอักษร โดยกําหนดสีหลักและบทบาทที่เกี่ยวข้องให้กับคํากระตุ้นให้ดำเนินการ (Call-To-Action) ที่สําคัญ เราขอแนะนําให้ใช้คอมโพเนนต์ เช่น ปุ่มการดำเนินการแบบลอย (FAB) เป็นตัวหลัก
เมื่อเลือกสีหลัก คุณควรกำหนดสีหลักของแบรนด์ หรือจะเลือกสีเพื่อแสดงถึงคอมโพเนนต์แบบอินเทอร์แอกทีฟก็ได้ ซึ่งจะช่วยให้ใช้สีของแบรนด์ได้น้อยลง สีรองและสีสามัญจะอยู่ในลําดับชั้นที่ต่ำลงของความสำคัญของการไฮไลต์
การใช้สีที่เข้มจนเกินไปอาจส่งผลให้ใช้เฉพาะบทบาทสีพื้นฐานของสีหลัก สีรอง หรือสีเสริม ใช้รูปแบบสีเพื่อรวมสีของคอนเทนเนอร์ที่ฉูดฉาดน้อยลงและบทบาทของขอบ
ใช้สีหลักที่สดใสมากขึ้นเพื่อบ่งบอกถึงการดำเนินการที่โดดเด่นยิ่งขึ้นในลําดับชั้นภาพของแอป เพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดียิ่งขึ้น ในรูปภาพต่อไปนี้ FAB ในรูปภาพแรกมีสีที่กลมกลืนกับโทนและสีของการนำทาง ทำให้กลมกลืนไปกับส่วนอื่นๆ รูปภาพที่สองแสดง FAB ที่ดึงดูดความสนใจด้วยสีหลักที่สดใส
หากต้องการดูตัวอย่างสีแบบไดนามิก ลองใช้ห้องทดลองโค้ดสําหรับการปรับแต่งสีของวัสดุ
สีเชิงความหมาย
สีเชิงความหมายคือสีที่มีความหมายเฉพาะเจาะจง เช่น ข้อผิดพลาดเป็นสีเชิงความหมาย
ใช้สีอย่างสม่ำเสมอตามความหมายที่กำหนดไว้ หากกำหนดรูปแบบไว้แล้ว ให้ใช้รูปแบบนั้นตลอดทั้งแอป เช่น หากกำหนดสีม่วงเพื่อบ่งบอกถึงฟีเจอร์การเป็นสมาชิก ให้ใช้สีม่วงกับฟีเจอร์การเป็นสมาชิกทุกอินสแตนซ์
ในตัวอย่างต่อไปนี้ แอปใช้สีแดงเพื่อระบุข้อผิดพลาดในช่องข้อความหนึ่ง แต่ใช้สีม่วงสำหรับอีกช่องหนึ่ง ซึ่งอาจทำให้เกิดความสับสนเมื่อเรียกดูแบบย่อ
แม้ว่ารูปแบบสีของ Material จะมีสีข้อผิดพลาดตามความหมาย แต่ระบบจะสร้างสีตามความหมายเพิ่มเติมผ่านสีที่กำหนดเองเพื่อขยายรูปแบบสี อ่านเพิ่มเติมเกี่ยวกับสีที่กำหนดเอง
การปรับให้กลมกลืนเป็นวิธีปรับสีแบบไดนามิกที่ผู้ใช้สร้างขึ้นให้สอดคล้องกับสีที่กำหนดเองภายในแอปเพื่อสร้างชุดสีที่กลมกลืนกันมากขึ้น
สีพื้นผิว
สีพื้นผิวออกแบบมาสำหรับองค์ประกอบพื้นหลัง เช่น คอนเทนเนอร์ ชีต และแผง และใช้แทนสีส่วนใหญ่ของแอป อย่ากลัวที่จะใช้พื้นที่บนแพลตฟอร์มอย่างกว้างขวาง ดวงตาของมนุษย์ต้องการพื้นที่เพื่อผ่อนคลาย พื้นผิวยังช่วยจัดเก็บเนื้อหาและนำทางผู้อ่านด้วย
M3 ได้เปิดตัวแนวคิดพื้นผิวโทนสี ซึ่งหมายความว่าสีทั้งหมดมาจากชุดสีโทน โทนสีจะสร้างทั้งความลึกและคอนทราสต์มากขึ้นเพื่อช่วยในการเข้าถึง ดูข้อมูลเพิ่มเติมเกี่ยวกับบทบาทของแพลตฟอร์มได้ที่คำแนะนำ M3 เกี่ยวกับบทบาทของแพลตฟอร์ม
การช่วยเหลือพิเศษและสี
ผู้คนมองเห็นสีแตกต่างกันไป ขึ้นอยู่กับความคมชัดของภาพ เนื่องจากผู้อ่านบางรายตาบอดสี คุณจึงต้องตรวจสอบการผสมสีเพื่อให้แน่ใจว่าองค์ประกอบ UI ไม่ได้กลืนกัน แม้ว่าความทึบแสงและน้ำหนักอาจไม่ใช่เฉดสีที่แท้จริงของสี แต่ก็มีผลกระทบทางสายตาอย่างมากต่อวิธีที่ผู้ใช้รับรู้สี
ความคมชัดของสีคือความแตกต่างระหว่างความสว่างขององค์ประกอบพื้นหน้าและพื้นหลัง ซึ่งแสดงในรูปแบบอัตราส่วน เกณฑ์อัตราส่วนนี้จะได้รับคะแนน เช่น การวัดคอนทราสต์ระหว่างข้อความบนปุ่มกับคอนเทนเนอร์ของปุ่มจะช่วยระบุความอ่านง่ายของข้อความ หลักเกณฑ์ด้านคอนทราสต์ของสีแบ่งออกเป็นข้อความและไม่ใช่ข้อความ โดยแต่ละหมวดหมู่จะมีระดับคะแนนเป็นของตัวเอง อ่านรายละเอียดเพิ่มเติมที่หัวข้อออกแบบด้วยสีที่เข้าถึงได้ง่าย
อย่าใช้สีเป็นสิ่งกระตุ้นหรือตัวบ่งชี้เพียงอย่างเดียวสําหรับการดําเนินการที่พร้อมใช้งาน ใช้ปุ่มคอมโพเนนต์ การเปลี่ยนแปลงน้ำหนักแบบอักษร หรือแม้แต่ไอคอนเพื่อช่วยแจ้งให้ผู้ใช้ทราบว่าสามารถโต้ตอบกับองค์ประกอบได้
ใช้สี
โทเค็นคือการแสดงข้อมูลการออกแบบแบบตัวแปรขนาดเล็ก โดยจะใช้ซ้ำได้และแทนที่ค่าคงที่ เช่น รหัสฐาน 16 สำหรับสี ด้วยชื่อที่สื่อความหมาย หากต้องการกำหนดบทบาทสีขององค์ประกอบ ให้ใช้โทเค็นแทนค่าสีที่กำหนดไว้ล่วงหน้า
ดูตัวอย่างตอนนี้ในตัวอย่าง Figma ของ Android เพื่อดูตัวอย่างการแมปบทบาทสี
ค่าสีจะตั้งค่าภายในไฟล์สี color.kt โดยใช้เขียน (หรือ color.xmlโดยใช้มุมมอง) สีที่ตั้งเป็นสไตล์เหล่านี้เป็นส่วนหนึ่งของธีม ดูข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้ได้ในการออกแบบธีมสำหรับอุปกรณ์เคลื่อนที่ Android
หากต้องการตั้งค่าสีใน Android ให้ใช้รหัส Hex ซึ่งแสดง RGB ในรูปแบบ 6 หลัก หากต้องการบันทึกระดับความทึบ ให้ใส่ค่าต่อท้ายด้านหน้าเพื่อสร้างรหัส 8 หลัก
วิธีใช้เครื่องมือสร้างธีม Material
คุณสามารถสร้างชุดค่าผสมสีอ่อนและสีเข้มที่ปรับแต่งเองได้โดยใช้ Material Theme Builder (MTB)
MTB ช่วยให้คุณเห็นภาพสีแบบไดนามิก สร้างโทเค็น Material Design และปรับแต่งชุดสีได้
คุณปรับแต่งรูปแบบสีได้อย่างเต็มที่โดยอัปเดตพร็อพเพอร์ตี้สไตล์ภายในแผงเครื่องมือตรวจสอบของ Figma ระบบจะส่งออกค่าที่แก้ไขเหล่านี้
