1. ภาพรวม
ใน Google I/O 2019, Material Design ได้แนะนำแนวทางในการสร้างธีมมืดเพื่อเสริมธีม Material ที่มีอยู่ของผลิตภัณฑ์ แม้ว่าธีมสว่างจะเหมาะสำหรับการอ่านเนื้อหายาวๆ และมีคอนทราสต์ที่อ่านง่ายกว่า แต่ความสว่างที่ลดลงของธีมมืดจะช่วยให้ปลอดภัยในสภาพแวดล้อมที่มืดและช่วยลดอาการเมื่อยล้าของดวงตาได้
ใน Material ธีมมืดได้รับการออกแบบมาให้ใช้เป็นโหมดเสริมสำหรับธีมสว่างเริ่มต้น เพื่อรักษาเอกลักษณ์เฉพาะของแอป (รวมถึงรูปแบบสำหรับสี รูปร่าง ประเภท และระดับความสูง) ผ่านการนำเสนอที่ละเอียดอ่อนและเหมาะกับเวลากลางคืน
ใน Designlab นี้ เราจะอธิบายขั้นตอนที่จำเป็นในการสร้างธีมมืดโดยอิงตามธีม Material ที่มีอยู่ โดยใช้ Material Study อย่างใดอย่างหนึ่งของเรา
เราจะทำงานร่วมกับ Reply ซึ่งเป็นแอปอีเมลที่ออกแบบมาเพื่อความชัดเจน ความสามารถในการอ่าน ความเข้าใจ และความสะดวกในการใช้งาน เราจะศึกษาข้อมูลประจำตัวของ Reply และตัดสินใจอย่างรอบคอบเพื่อคงช่วงเวลาที่มีการสร้างแบรนด์ไว้ในแอป พร้อมทั้งสร้างธีมที่ยังคงสบายตาในโหมดมืด
นอกจากนี้ เราจะพัฒนาธีมต่อไปและทำงานร่วมกับสีพื้นผิวที่กำหนดเองซึ่งนอกเหนือจากธีมมืดพื้นฐานเพื่อเน้นย้ำเอกลักษณ์เฉพาะตัวของ Reply อีกครั้ง
สื่อการเรียนการสอนของชั้นเรียนที่ต้องใช้
2. รวบรวมไฟล์ที่จำเป็น
ก่อนเริ่มต้นใช้งาน คุณจะต้องดาวน์โหลดไฟล์เริ่มต้นของ Figma ไฟล์นี้มีทุกอย่างที่คุณต้องใช้สำหรับ Design Lab
3. ตั้งค่าสภาพแวดล้อม
จากนั้น คุณจะต้องตั้งค่าสภาพแวดล้อมการออกแบบ
ก่อนอื่น ให้ลงชื่อเข้าใช้ Figma หรือสร้างบัญชี
เมื่อลงชื่อเข้าใช้แล้ว ให้นำเข้าไฟล์ที่ดาวน์โหลดในขั้นตอนก่อนหน้า โดยค้นหาไอคอน "นำเข้าไฟล์" ที่มุมซ้ายบนของหน้าจอไฟล์ Figma แล้วค้นหาไฟล์ในโฟลเดอร์ "ดาวน์โหลด"
โปรดใช้เวลาสักครู่เพื่อดูไฟล์ ซึ่งประกอบด้วยธีมสว่าง ชุดสีตามโทนที่สร้างไว้ล่วงหน้าตามแบรนด์ของแอป และสำเนาของธีมมืดสุดท้ายที่เราจะสร้าง
- เปิดคำแนะนำเกี่ยวกับธีมมืดของ Material Design ในแท็บอื่น เราจะอ้างอิงหลักเกณฑ์เหล่านี้ตลอดทั้ง Design Lab
4. ทำความเข้าใจข้อมูลระบุตัวตนของผลิตภัณฑ์
ก่อนที่จะเริ่มใช้ธีมมืดสำหรับ Reply เราต้องทำความเข้าใจลักษณะเฉพาะของแบรนด์ Reply บางอย่างก่อน ซึ่งจะช่วยให้เราเลือกธีมได้อย่างรอบคอบเพื่อให้เอกลักษณ์และแบรนด์ของ Reply แสดงออกอย่างสอดคล้องกันทั้งในธีมสว่างและธีมมืด
แบรนด์ Reply ให้ความสำคัญกับการสื่อสาร แอปให้ความสำคัญกับคุณภาพด้านฟังก์ชันการทำงาน โดยเน้นความสะดวกในการใช้งานมากกว่าองค์ประกอบการออกแบบที่ไม่มีวัตถุประสงค์ด้านฟังก์ชันการทำงาน
สำหรับวัตถุประสงค์ของเราใน Designlab นี้ องค์ประกอบที่สำคัญที่สุดของการแสดงออกถึงแบรนด์ใน Reply คือสี แบบอักษร และรูปร่าง
สี
ธีมสีของ Reply ใช้สีหลักเป็นสีน้ำเงินเทาเข้มและใช้สีรองเป็นสีส้มเหลือง
เนื่องจากสีรองไม่ค่อยได้ใช้ UI ของ Reply จึงมักจะเป็นสีเดียวโดยใช้สีหลักในเฉดต่างๆ ธีมสีที่ละเอียดอ่อนนี้ช่วยให้อ่านเนื้อหาได้ง่ายโดยไม่มีสิ่งรบกวน และช่วยให้เห็นอวตารที่เป็นภาพถ่ายได้ง่าย
ดังนั้น สีรองของ Reply จึงมีผลกระทบอย่างมากในทุกที่ที่ใช้ โดยเน้นการดำเนินการที่สำคัญและประกาศช่วงเวลาของแบรนด์อย่างชัดเจนทั่วทั้งแอป
ประเภท
ในฐานะแอปที่เน้นเนื้อหาแบบข้อความและประสิทธิภาพเป็นหลัก ตัวอักษรและการจัดตัวอักษรจึงเป็นหัวใจสำคัญในการแสดงอัตลักษณ์ของ Reply แอปใช้ Work Sans สำหรับการปรับขนาดตัวอักษรทั้งหมด โดยใช้รูปแบบต่างๆ ที่รวมน้ำหนัก 6 แบบของ Work Sans ได้แก่ Light, Regular, Medium, SemiBold และ Bold
การสร้างทั้งชุดแบบอักษรจาก Work Sans ทำให้ Reply มีการจัดรูปแบบข้อความที่สอดคล้องกันและคาดการณ์ได้ แต่ก็ยังดูเป็นธรรมชาติและอ่านง่าย
Wei Huang ผู้ออกแบบ Work Sans กล่าวว่าตระกูลนี้ได้รับการเพิ่มประสิทธิภาพสำหรับการใช้งานบนหน้าจอ ฟีเจอร์นี้จึงเหมาะสำหรับการอ่านข้อความในอีเมลหรือเนื้อหาอื่นๆ อย่างมีประสิทธิภาพ พื้นฐานที่หลวมๆ ในรูปแบบของตัวอักษร Grotesque ยุคแรกๆ ทำให้ตัวอักษรนี้ดูเป็นมิตรและมีกลิ่นอายของความเป็นมนุษย์มากขึ้น ในขณะที่การติดตามที่กว้างขึ้นทำให้การอ่านราบรื่นขึ้น
รูปร่าง
Reply มีเรื่องราวเกี่ยวกับรูปร่างที่ซับซ้อน โดยจับคู่คอมโพเนนต์กลมและคมในลักษณะที่เสริมประสิทธิภาพและลักษณะการทำงานของรายการอีเมล ในขณะเดียวกันก็ให้ความนุ่มนวลแก่การดำเนินการที่สำคัญและคอมโพเนนต์ขนาดใหญ่
- คอมโพเนนต์ขนาดเล็ก
- คอมโพเนนต์ขนาดกลาง
- คอมโพเนนต์ขนาดใหญ่
คอมโพเนนต์ขนาดเล็ก เช่น ปุ่มและ FAB จะโค้งมนทั้งหมด ส่วนคอมโพเนนต์ขนาดกลาง เช่น การ์ดอีเมลและแถบแอปด้านล่างจะเป็นสี่เหลี่ยมจัตุรัสทั้งหมด คอมโพเนนต์ขนาดใหญ่ เช่น ตัวสลับบัญชีและชีตด้านล่าง จะมีมุมโค้งเล็กน้อย
รูปร่างเหล่านี้รวมกันเพื่อเสริมความเข้าใจของผู้ใช้เกี่ยวกับตำแหน่งของตนในแอปและวิธีที่แต่ละคอมโพเนนต์ได้รับการออกแบบ รวมถึงความสัมพันธ์กับส่วนอื่นๆ ของอินเทอร์เฟซ
5. การทำงานกับสี
เมื่อทราบว่าสีมีความเกี่ยวข้องกับการแสดงออกถึงแบรนด์ของ Reply ในธีมสว่างเริ่มต้นอย่างไร เราจึงสามารถปรับชุดสีของธีมมืดได้อย่างเหมาะสมเพื่อให้ใช้งานได้และสื่อถึงแบรนด์
ใน Material ระบบสีจะอิงตามชุดสีโทน ซึ่งชุดสีเหล่านี้จะใช้สีของแบรนด์เพื่อสร้างชุดสีที่กลมกลืนกันซึ่งรวมกันเป็นระบบสีที่ครอบคลุมซึ่งใช้ในแอป เพื่อให้มั่นใจในสไตล์และความสามารถในการอ่าน
ในไฟล์ Figma คุณจะเห็นจานสีโทนหลักและโทนรองของ Reply ลูกศรสีอ่อนเหนือแต่ละจานสีแสดงค่าที่ใช้ในธีมสว่างของ Reply ส่วนลูกศรสีเข้มแสดงค่าที่ใช้ในธีมมืด
เมื่อสร้างธีมมืดด้วย Material ระบบจะเลือกสีที่อ่อนกว่าเพื่อให้ระบบสีของคุณยังคงแสดงออกและรักษาคอนทราสต์ที่เหมาะสมได้โดยไม่ทำให้ปวดตา สีที่มีความอิ่มตัวสูงมักจะ "สั่น" เมื่ออยู่บนพื้นหลังที่เข้มกว่า ทำให้ข้อความอ่านยากขึ้น นอกจากนี้ โทนสีอ่อนยังให้ความยืดหยุ่นมากขึ้นในการเปลี่ยนสีของพื้นผิวที่ยกระดับขึ้น ซึ่งเราจะดูในอีกไม่นาน
6. ปรับสีพื้นผิว
ตอนนี้เรามีชุดสีของ Reply และสีที่จะใช้ในธีมมืดแล้ว ก็ถึงเวลาเริ่มปรับค่าสีในโมเดลจำลอง
ในธีม Material สีเข้ม โดยทั่วไปแล้วเลเยอร์ล่างสุดของอินเทอร์เฟซจะเป็นสีเทาเข้มที่มีค่าฐานสิบหก #121212
- ในไฟล์ Figma ให้ค้นหาอาร์ตบอร์ดที่ชื่อ "Reply Starter" แล้วเลือกเลเยอร์ที่ชื่อ "Background"
- ในส่วน "เติมสี" ในแผงตัวตรวจสอบทางด้านขวาของหน้าจอ ให้ตั้งค่าสีเป็น 121212 แล้วกด Return
- อาร์ตบอร์ดควรมีลักษณะดังนี้
ในมุมมองกล่องจดหมายแบบโมโนโครมของ Reply การ์ดอีเมลจะมีสีอ่อนกว่าพื้นหลังเล็กน้อย ดังนั้นเราจึงควรใช้การ์ดในธีมสีเข้มในลักษณะเดียวกันเพื่อรักษาลำดับชั้นภาพของกล่องจดหมาย
- ในอาร์ตบอร์ดเดียวกัน ให้ขยายกลุ่มที่ชื่อ "Email cards" แล้วเลือกเลเยอร์ทั้งหมดที่ชื่อ "Email card"
- เช่นเดียวกับก่อนหน้านี้ ให้เลือกค่าเติมในแผง Inspector ตั้งค่าเป็น 121212 แล้วกด Return
- ตอนนี้ให้เลือกเฉพาะเลเยอร์ที่ชื่อ "ภาพซ้อนทับการ์ดอีเมล" เลเยอร์เหล่านี้จะช่วยให้เราสร้างภาพซ้อนทับที่แยกการ์ดอีเมลออกจากพื้นหลังได้
- กำหนดการเติมให้กับเลเยอร์และตั้งค่าเป็น FFFFFF ที่ความทึบแสง 2%
ตอนนี้การ์ดอีเมลเป็นสีเข้มแล้ว ข้อความของเราจึงอ่านไม่ออก จากนั้นเราจะมาดูสีข้อความกัน
7. ปรับสีข้อความ
หากต้องการทำความเข้าใจสีข้อความในธีมมืด คุณต้องเข้าใจวิธีใช้สีกับข้อความในระบบ Material Design ในวงกว้าง
คอมโพเนนต์ Material กำหนดแนวคิดของสี "บน" ซึ่งมีชื่อเช่นนี้เนื่องจากเป็นสีที่ปรากฏ "บน" คอมโพเนนต์และพื้นผิวหลักที่ใช้สีหลัก สีรอง สีพื้นผิว สีพื้นหลัง หรือสีข้อผิดพลาด สี "เปิด" ส่วนใหญ่ใช้กับข้อความเพื่อให้มั่นใจว่าข้อความจะยังคงอ่านได้บนพื้นผิวเหล่านี้
สี "เปิด" เริ่มต้นใน Material คือสีขาว (#FFFFFF) และสีดำ (#000000) เนื่องจากสีดำหรือสีเข้มที่แสดงสถานะ "เปิด" ไม่เหมาะกับพื้นผิวที่มืดลง เราจึงจะใช้สีขาว
ระบบสำหรับการสร้างลำดับชั้นของข้อความด้วยสี "เปิด" นี้เป็นระบบที่เรียบง่าย ข้อความที่มีการเน้นสูงมีความทึบแสง 87% ขณะที่ข้อความที่มีการเน้นปานกลางมีความทึบแสง 60% และข้อความที่ปิดใช้มีความทึบแสง 38%
ข้อความที่มีลำดับความสำคัญสูงไม่ใช่สีขาวล้วน เนื่องจากตามที่ได้กล่าวไว้ในขั้นตอนที่ 5 สี #FFFFFF ซึ่งเป็นสีสว่างจะ "สั่น" เมื่ออยู่บนพื้นหลังสีเข้ม นอกจากนี้ ข้อความสี #FFFFFF บนพื้นหลังสีเข้มอาจทำให้ความชัดเจนในการอ่านลดลง เนื่องจากแสงจากข้อความดังกล่าวจะดูเหมือนเลือนหรือเบลอบนพื้นหลังสีเข้ม
เมื่อทราบข้อมูลทั้งหมดนี้แล้ว เรามาแก้ไขสีข้อความในธีมมืดกัน
- ข้อความทั้งหมดในเลย์เอาต์เริ่มต้นจะจัดกลุ่มเพื่อให้เข้าถึงได้ง่าย ค้นหากลุ่มที่ชื่อข้อความในกล่องจดหมาย แล้วขยายเพื่อดูเลเยอร์ทั้งหมดที่ประกอบกันเป็นกลุ่ม
- เลือกเลเยอร์ทั้งหมดที่ขึ้นต้นด้วย "Hi -" ซึ่งเป็นข้อความทั้งหมดที่มีการเน้นสูงในเลย์เอาต์
- ในแผงเครื่องมือตรวจสอบ ให้ตั้งค่าการเติมเป็น FFFFFF โดยมีความทึบแสง 87%
- กลับไปที่กลุ่มข้อความกล่องจดหมาย แล้วเลือกเลเยอร์ทั้งหมดที่ขึ้นต้นด้วย "Med -"
- ในแผงเครื่องมือตรวจสอบ ให้ตั้งค่าการเติมสีเป็น FFFFFF โดยมีความทึบแสง 60%
8. ปรับสีคอมโพเนนต์
ในธีมมืดที่สร้างด้วย Material พื้นผิวและคอมโพเนนต์ที่ยกระดับจะมีสีโดยใช้ภาพซ้อนทับ ยิ่งพื้นผิวสูงขึ้นเท่าใด การซ้อนทับก็จะยิ่งแข็งแรงและสว่างมากขึ้นเท่านั้น นี่เป็นวิธีสื่อสารระดับความสูงและลำดับชั้นเมื่อพื้นหลังมืดเกินกว่าที่จะแสดงเงาที่มืดได้อย่างน่าเชื่อถือ
แถบด้านล่างของแอป
สำหรับแถบแอปด้านล่างของฟีเจอร์ตอบกลับ ซึ่งอยู่เหนือ UI ของกล่องจดหมายอื่นๆ เราจะใช้การวางซ้อนแบบบาง
- ค้นหากลุ่มที่ชื่อแถบแอปด้านล่างในรายการเลเยอร์ แล้วขยายเพื่อให้เห็นเลเยอร์ที่เป็นส่วนประกอบ
- ค้นหาเลเยอร์ที่ชื่อ Surface ในกลุ่มนั้น แล้วตั้งค่าการเติมเป็น 121212
- ค้นหาเลเยอร์เหนือเลเยอร์ดังกล่าวชื่อ Surface overlay แล้วกำหนดค่าการเติมเป็น FFFFFF โดยมีความทึบแสง 12%
ปุ่มการทำงานแบบลอย
จากนั้นเราจะใช้สีใหม่กับ FAB โดยให้กลับไปที่จานสีโทนัลที่เราดูเมื่อสักครู่ แล้วนำค่า 700 ของสีรองของ Reply มาใช้
คุณอาจเลือกสีที่มีความอิ่มตัวมากขึ้นเล็กน้อยสำหรับคอมโพเนนต์ขนาดเล็กแต่มีผลกระทบสูงในแอปของคุณเองได้ หากยังคงคอนทราสต์ที่เหมาะสมกับสีพื้นฐานไว้ เราจะดูตัวเลือกนี้ในขั้นตอนถัดไป
- ค้นหากลุ่มที่ชื่อ FAB ในรายการเลเยอร์ แล้วขยายเพื่อดูส่วนประกอบ
- ค้นหาเลเยอร์ Surface แล้วเลือก ตั้งค่าการเติมเป็น FCC13B
การ์ดที่เลือก
คุณอาจสังเกตเห็นว่าสีส้มเหลืองที่โดดเด่นเดียวกันนี้ยังปรากฏที่มุมของการ์ดอีเมลที่เลือกในกล่องจดหมายของ Reply ด้วย นี่เป็นอีกช่วงเวลาที่แบรนด์แข็งแกร่ง แต่ไม่เหมาะกับคอมโพเนนต์ พื้นผิว หรือข้อความ
ในกรณีเช่นนี้ เราขอแนะนำให้เริ่มจากสีตัวแปรรอง (ในกรณีนี้คือ #FFFBE6) แล้วย้อนกลับเพื่อหาสีที่สื่อถึงความรู้สึกได้อย่างเหมาะสมโดยไม่รบกวนความสวยงามเชิงฟังก์ชันของฟีเจอร์ตอบกลับ สำหรับฟีเจอร์ตอบกลับ เราสามารถใช้ตัวเลือกย่อยรองตามปกติได้
- เลือกเลเยอร์ที่ชื่อ Earmark แล้วตั้งค่าเติมเป็น FFF5A0
9. ไปให้ไกลกว่าเดิม: พื้นผิวที่กำหนดเอง
ดังที่เราได้ทราบไปก่อนหน้านี้ ปุ่มการทำงานแบบลอย (FAB) ใน Reply เป็นคอมโพเนนต์ที่เน้นย้ำอย่างมากและยังแสดงถึงช่วงเวลาที่แอปมีการสร้างแบรนด์อย่างชัดเจนด้วย ด้วยเหตุนี้ เราจึงอาจตัดสินใจคงการแสดงสีของปุ่มดังกล่าวไว้ในธีมมืดของ Reply โดยใช้สีรองเดิมของ Reply
- ค้นหากลุ่มที่ชื่อ FAB ในรายการเลเยอร์ แล้วขยายเพื่อดูส่วนประกอบ
- ค้นหาเลเยอร์ Surface แล้วเลือก ตั้งค่าสีเติมกลับเป็น F9AA33
นอกจากนี้ เราอาจต้องการนำสีหลักของ Reply กลับมาเป็นสีพื้นผิวที่กำหนดเองสำหรับแถบแอปด้านล่างและการ์ดอีเมล ในการดำเนินการนี้ เราเพียงแค่ต้องเปลี่ยนภาพซ้อนทับให้ใช้สีหลักเข้มที่ระบุไว้ในจานสีโทนที่เราอ้างอิง
- ค้นหากลุ่มที่ชื่อแถบแอปด้านล่างในรายการเลเยอร์ แล้วขยายเพื่อให้เห็นเลเยอร์ที่เป็นส่วนประกอบ
- ค้นหาเลเยอร์ที่ชื่อ Surface overlay แล้วกำหนดค่าการเติมสีใหม่เป็น 344955 โดยมีความทึบแสงเป็น 48% ซึ่งจะทำให้มีสีแบรนด์ที่ชัดเจนยิ่งขึ้นในขณะที่ยังคงคอนทราสต์ที่เหมาะสม
- ค้นหาเลเยอร์ที่ชื่อการวางซ้อนการ์ดอีเมลในรายการเลเยอร์ แล้วเลือกทั้งหมด
- ตั้งค่า Fill เป็น ADC0CB โดยมีความทึบแสง 4%
10. สรุป
ใน Material ธีมมืดคือส่วนขยายที่รอบคอบและตั้งใจของเอกลักษณ์เฉพาะตัวของผลิตภัณฑ์ตามที่แสดงในธีมสว่าง เพียงปรับสีและวิธีสื่อถึงระดับความสูง คุณก็สร้างธีมมืด Material ธีมแรกได้สำเร็จแล้ว ยินดีด้วย
โปรดพิจารณาขั้นตอนในดีไซน์แล็บนี้เป็นเฟรมเวิร์กสำหรับทำความเข้าใจและกำหนดดาร์กธีมของผลิตภัณฑ์ของคุณเอง และคำนึงถึงคุณสมบัติและเป้าหมายของแบรนด์และผลิตภัณฑ์ของคุณอยู่เสมอ
ดูคำแนะนำเพิ่มเติมเกี่ยวกับธีมมืดได้ที่ข้อกำหนดของ Material Design สำหรับธีมมืด
หากมีคำถาม โปรดถามเราได้ทุกเมื่อโดยใช้ @MaterialDesign บน Twitter
โปรดติดตามเนื้อหาด้านการออกแบบและบทแนะนำเพิ่มเติมในช่อง YouTube ของ Google Design