1. บทนำ
อัปเดตครั้งล่าสุด: 11/05/22
ระบบสี Material 3 สร้างรูปแบบสีที่เข้าถึงได้ด้วยอัลกอริทึมสีแบบไดนามิก แต่การช่วยเหลือพิเศษสำหรับสีหมายความว่าอย่างไร ระบบสีใหม่ของดีไซน์ Material สร้างรูปแบบสีที่เข้าถึงได้อย่างไรและเครื่องมือใดที่ช่วยได้
สิ่งที่คุณจะได้เรียนรู้
- สีเกี่ยวข้องกับหลักเกณฑ์การช่วยเหลือพิเศษและคอนทราสต์อย่างไร
- การใช้เครื่องมือจะช่วยสร้างรูปแบบสีที่เข้าถึงได้ ทำการแก้ไข และตรวจสอบคอนทราสต์ได้อย่างไร
ข้อกำหนดเบื้องต้น
สำหรับห้องทดลองนี้ เราจะต่อยอดจากแนวคิดการออกแบบขั้นพื้นฐาน
- ความรู้เกี่ยวกับรูปแบบและบทบาทสีที่ใช้ใน Android ในปัจจุบัน
- ความรู้เกี่ยวกับ Figma
สิ่งที่ต้องมี
- บัญชี Figma
- ไฟล์ Figma Designlab
- ปลั๊กอิน Figma Material Theme Builder
2. เริ่มต้นใช้งาน
ตั้งค่า
คุณต้องเข้าถึงไฟล์ Designlab Figma เพื่อเริ่มต้นใช้งาน ทุกสิ่งที่คุณต้องการสำหรับห้องทดลองมีอยู่ในไฟล์ Figma คุณสามารถดาวน์โหลดและนำเข้าไฟล์ หรือทำซ้ำไฟล์จากชุมชน Figma
ก่อนอื่น ให้ลงชื่อเข้าใช้ Figma หรือสร้างบัญชี
ทำซ้ำจากชุมชน Figma
ไปที่ไฟล์การออกแบบด้วยสีที่เข้าถึงได้ หรือค้นหา "การออกแบบด้วยสีที่เข้าถึงได้" ภายในชุมชน Figma คลิกทำสำเนาที่มุมขวาบนเพื่อคัดลอกไฟล์ลงในไฟล์
เลย์เอาต์ของไฟล์
เมื่อคุณตรวจดูไฟล์ จะเห็นว่าไฟล์อยู่ในตัวเอง เริ่มต้นจากข้อความเกริ่นนำ แต่ละส่วนจะแบ่งออกเป็นแถวของอาร์ตบอร์ดซึ่งลิงก์เข้าด้วยกัน โดยมีแนวคิดหลักบางประการของส่วนดังกล่าว ตามด้วยแบบฝึกหัด แต่ละส่วนและแบบฝึกหัดจะต่อยอดกันและควรทำตามตามลำดับ
Codelab นี้จะแนะนำแนวคิดและแบบฝึกหัดเหล่านั้นอย่างละเอียด อ่านไปพร้อมกับ Codelab เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์ใหม่ของ 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 สร้างขึ้นโดยใช้ความสว่างมากกว่าโทนสี ซึ่งหมายความว่าหากนำโทนสีและสีออกไป เราจะเห็นคอนทราสต์ในเฉดสีได้
เมื่อดึงสี จะส่งผลให้เกิดสีหลักที่มีการเลื่อนจาก 5 สีเพื่อสร้างชุดโทนสี ชุดโทนสีประกอบด้วย 13 โทน ซึ่งรวมถึงสีขาวและสีดำ ค่าโทนสี 100 จะเท่ากับค่าความสว่างสูงสุดและได้ผลลัพธ์เป็นสีขาว ค่าทุกโทนระหว่าง 0 ถึง 100 จะแสดงปริมาณแสงที่มีอยู่ในสี
ระบบชุดโทนสีเป็นศูนย์กลางของการทำให้รูปแบบสีใดก็ตามสามารถเข้าถึงได้โดยค่าเริ่มต้น
การรวมสีตามโทนแทนที่จะเป็นค่าเลขฐาน 16 หรือโทนสีเป็นหนึ่งในระบบหลักที่ทำให้เข้าถึงเอาต์พุตสีใดก็ได้ ผลิตภัณฑ์ที่ใช้สีแบบไดนามิกจะเป็นไปตามข้อกำหนดเนื่องจากการผสมผสานอัลกอริทึมที่ผู้ใช้ดูได้นั้นออกแบบมาเพื่อมาตรฐานการช่วยเหลือพิเศษ
องค์ประกอบที่มีความสว่างคล้ายกันมีคอนทราสต์ที่ไม่เหมาะสมเพื่อให้อ่านได้ง่าย ในขณะที่องค์ประกอบที่มีค่าความสว่างต่างกันจะแยกความแตกต่างมากกว่า
สีสันแบบไดนามิกของ Material You ออกแบบมาเพื่อให้ทํางานได้ในบริบทที่คาดเดาไม่ได้ ในการจัดการอัตราส่วนคอนทราสต์ในบริบทการรับชมที่หลากหลาย ระดับความสว่างจึงเป็นคุณสมบัติสำคัญที่ช่วยให้ผสมสีได้สำเร็จ แม้ทีมผลิตภัณฑ์ไม่ได้ทดสอบการผสมสีที่เจาะจงแต่ละสีก็ตาม
6. สร้างธีมที่เข้าถึงได้
เครื่องมือสร้างธีมจะสร้างโทเค็นดีไซน์ Material เป็นรูปแบบ Figma ซึ่งช่วยให้คุณเห็นภาพของสีแบบไดนามิกและสร้างธีมที่กำหนดเอง ซึ่งทำได้ในขณะทำตามระบบสี Material 3 เพื่อสร้างสีที่เข้าถึงได้ในรูปแบบสี
- ในโมดัลปลั๊กอิน ให้คลิกกำหนดเอง การดำเนินการนี้จะเปลี่ยนธีมเป็นธีมที่กำหนดเอง ธีมวัสดุสร้างขึ้นแล้ว แต่คุณสร้างธีมใหม่ได้หากต้องการ ดูข้อมูลเพิ่มเติมได้ที่การแสดงภาพไดนามิกสี
- ต่อไป ให้ตั้งค่าสีของคีย์หลัก โดยหลักอาจเป็นสีหลักของแบรนด์หรือสีเฉพาะจุดหลักที่ใช้บ่อยที่สุดก็ได้ คลิกสีที่มีป้ายกำกับหลักเพื่อเปิดตัวเลือกสีและเลือกสี สีหลักจะใช้สำหรับสีต้นฉบับ คล้ายกับสีต้นฉบับในการตั้งค่าแบบไดนามิก
เพิ่มสีลงใน MTB
- สีหลักที่เหลือจะเติมตามสีหลัก ซึ่งหมายความว่า คุณไม่จำเป็นต้องใส่สีเพิ่มเติมหากไม่ต้องการใช้ เลือกเพิ่มสีรองและสีที่ 3
- แบบแผนสีจะแสดงสีหลักที่ตีความจากสีอินพุต ชุดโทนสีที่สร้างขึ้น และรูปแบบสีที่ได้พร้อมบทบาทสี ทั้งรูปแบบสว่างและมืดพร้อมให้ใช้งาน
- ห้องทดลองมีตัวอย่าง UI เพื่อดูการใช้รูปแบบสี เมื่อเลือกคอมโพเนนต์ UI ของแอปแล้ว ให้คลิกสลับภายในปลั๊กอิน
รูปแบบสีที่มีการจำลองที่เชื่อมต่อ
สำหรับแบบฝึกหัดเหล่านี้ Material Theme Builder ได้สร้างโทเค็นที่จำเป็นในไฟล์ Figma แล้ว
7. ตรวจสอบคอนทราสต์กับ Material Theme Builder
เยี่ยมเลย แต่เราเข้าใจดีว่าคุณจะต้องอัปเดตสไตล์เหล่านี้บางส่วนด้วยสีต่างๆ ด้วยตนเอง Material Theme Builder มีการตรวจสอบคอนทราสต์ในตัวสำหรับสีหลักของรูปแบบเพื่อช่วยในการตัดสินใจ
- เนื่องจากโทเค็นถูกสร้างเป็นรูปแบบ เราจึงสามารถตั้งค่าของสีที่สร้างได้ ภายในรูปแบบ Figma ให้สลับเป็นสีหลักของธีมปัจจุบัน แล้วเลือกไอคอน "แก้ไขรูปแบบ" ทางด้านขวา
- อัปเดตสีหลักในคุณสมบัติ ซึ่งจะแสดงอยู่ในเอาต์พุตสีและ UI ของแอป อัลกอริทึมของสีไม่ได้สร้างสีนี้ เราจึงรับประกันความสามารถในการเข้าถึงไม่ได้
- ในเมนูปลั๊กอิน ให้คลิกตรวจสอบคอนทราสต์ จากนั้นเปิดโมดัลแก้ไขรูปแบบอีกครั้งสำหรับรายการหลัก ซึ่งจะตรวจสอบคอนทราสต์และแสดงการจัดประเภทคอนทราสต์
คอนทราสต์ในกล่องโต้ตอบสไตล์ Figma
8. ขอแสดงความยินดี
เยี่ยมเลย การเข้าถึงควรเป็นส่วนสำคัญในกระบวนการของคุณ และด้วย Material Design และ Material Theme Builder ก็ง่ายยิ่งกว่าเดิม
หากมีข้อสงสัย โปรดติดต่อเราได้ทุกเมื่อโดยใช้ @MaterialDesign บน Twitter
โปรดติดตามเนื้อหาการออกแบบและบทแนะนำเพิ่มเติมได้ที่ youtube.com/MaterialDesign