การออกแบบด้วยสีที่เข้าถึงได้

1. บทนำ

อัปเดตล่าสุด: 11/05/22

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

สิ่งที่คุณจะได้เรียนรู้

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

ข้อกำหนดเบื้องต้น

สำหรับ Lab นี้ เราจะต่อยอดจากแนวคิดการออกแบบพื้นฐานบางอย่าง

มีความรู้เกี่ยวกับรูปแบบสีและบทบาทปัจจุบันของ Android
ความรู้เกี่ยวกับ Figma

สิ่งที่คุณต้องมี

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

ตั้งค่า

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

ก่อนอื่น ให้ลงชื่อเข้าใช้ Figma หรือสร้างบัญชี

ทำซ้ำจากชุมชน Figma

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

เลย์เอาต์ไฟล์

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

โค้ดแล็บนี้จะแนะนำแนวคิดและแบบฝึกหัดเหล่านั้นอย่างละเอียด อ่านไปพร้อมกับโค้ดแล็บเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์ Material You ใหม่

เริ่มต้นด้วยอาร์ตบอร์ดIntro จะมีปุ่มที่ลิงก์อาร์ตบอร์ดเข้าด้วยกันตามลำดับ หากต้องการเข้าถึงลิงก์ ให้คลิกปุ่ม

ติดตั้งปลั๊กอิน Figma

Codelab นี้ใช้ปลั๊กอิน Figma ใหม่ในการสร้างโทเค็นและชุดรูปแบบสีแบบไดนามิกเป็นอย่างมาก ติดตั้งปลั๊กอิน Figma จากหน้าชุมชน Figma โดยตรง หรือค้นหา "Material Theme Builder" ในชุมชน Figma

3. สีและการช่วยเหลือพิเศษ

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

"ฉันเห็นสีบนหน้าจอไหม" เป็นเพียงข้อควรพิจารณาแรกเมื่อออกแบบโดยใช้สี ผู้คนมองเห็นสีในรูปแบบต่างๆ ขึ้นอยู่กับความสามารถในการมองเห็น

การตาบอดสีอาจหมายถึงการตรวจสอบชุดสีเพื่อไม่ให้องค์ประกอบ UI ผสมผสานกัน

แม้ว่าความทึบแสงและน้ำหนักอาจไม่ใช่เฉดสีที่แท้จริง แต่ก็มีผลลัพธ์ทางภาพที่ทรงพลังต่อการรับรู้สี

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

โปรดใช้ความทึบแสงด้วยความระมัดระวังและอย่าใช้ภายใต้หลักเกณฑ์ที่แนะนำ

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

ตัวอักษรบางบนพื้นหลังสีเข้มจะทำให้รู้สึกอึดอัด

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

4. คอนทราสต์ของสี

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

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

ตัวอย่างที่มีคอนทราสต์ของสีไม่ผ่าน

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

ข้อความ

	AA	AAA
ข้อความขนาดใหญ่	3:1	4.5:1
ข้อความปกติ (เนื้อหา)	4.5:1	7:1

ไม่ใช่ข้อความ

	AA
องค์ประกอบที่ไม่ใช่ข้อความ (องค์ประกอบกราฟิก)	3:1

มาลองตรวจสอบความคมชัดและดูวิธีแก้ไขด้วยตนเองกัน

ใน Figma ให้ค้นหาสีในองค์ประกอบ UI โดยเริ่มจากข้อความขนาดใหญ่ (#C0BEC5) ซึ่งอยู่บนสีพื้นหลัง (#F5F5FF) การใช้เครื่องมือตรวจสอบคอนทราสต์ออนไลน์และการป้อนสีเหล่านี้ลงในพื้นหน้าและพื้นหลังแสดงให้เห็นว่าสีดังกล่าวไม่ผ่านการจัดอันดับทั้งหมด
ข้อความสว่างเกินไปสำหรับสีพื้นหลัง ยังคงอยู่ในเครื่องมือตรวจสอบคอนทราสต์ออนไลน์ ให้ปรับสีเบื้องหน้าด้วยเครื่องมือเลือกสีเป็นสีเข้มขึ้นจนกว่าจะผ่านระดับ AAA
กลับไปที่ Figma แล้วใช้สีที่ผ่านการทดสอบใหม่กับข้อความขนาดใหญ่
ทำตามกระบวนการเดียวกันสำหรับข้อความเนื้อหาและปุ่ม โดยตรวจสอบทั้งสีข้อความและสีพื้นหลังของแต่ละรายการ
,ใช้ผลลัพธ์ในส่วนออบเจ็กต์กราฟิกและคอมโพเนนต์ของอินเทอร์เฟซผู้ใช้เพื่อใช้กระบวนการเดียวกันกับไอคอน**
นำสีใหม่ไปยัง Figma สำหรับแต่ละองค์ประกอบ ตอนนี้องค์ประกอบทั้งหมดควรผ่านการจัดประเภทความคมชัดแล้ว

ตัวอย่างที่มีคอนทราสต์ของสีผ่าน

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

5. สร้างขึ้นด้วยความสว่าง

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

เมื่อแยกสีออกมาแล้ว จะได้สีหลักที่เปลี่ยนไป 5 สี ซึ่งใช้สร้างชุดสี ชุดสีประกอบด้วยสี 13 สี รวมถึงสีขาวและสีดำ ค่าโทน 100 เทียบเท่ากับแนวคิดของแสงที่ระดับสูงสุด และส่งผลให้เกิดสีขาว ค่าโทนทุกค่าระหว่าง 0 ถึง 100 จะแสดงปริมาณแสงที่มีอยู่ในสี

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

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

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

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

6. สร้างธีมที่เข้าถึงได้ง่าย

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

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

เพิ่มสีลงใน MTB

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

รูปแบบสีพร้อมภาพจำลองที่เชื่อมต่อ

สำหรับการฝึกหัดเหล่านี้ ตัวสร้างธีม Material ได้สร้างโทเค็นที่จำเป็นในไฟล์ Figma ไว้แล้ว

7. ตรวจสอบคอนทราสต์ด้วย Material Theme Builder

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

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

ความคมชัดในกล่องโต้ตอบสไตล์ Figma

8. ขอแสดงความยินดี

เยี่ยมไปเลย การช่วยเหลือพิเศษควรเป็นส่วนสำคัญของกระบวนการของคุณ และ Material Design รวมถึง Material Theme Builder จะช่วยให้การช่วยเหลือพิเศษเป็นเรื่องง่ายยิ่งขึ้น

หากมีคำถาม โปรดถามเราได้ทุกเมื่อโดยใช้ @MaterialDesign บน Twitter

โปรดติดตามเนื้อหาการออกแบบและบทแนะนำเพิ่มเติมได้ที่ youtube.com/MaterialDesign