ระบบสี (The Color System)

ระบบสี (The Color System)

ระบบสีของ Material Design สารมารถใช้สร้างสรรค์ธีมสีที่สะท้อนถึงสไตล์หรือแบรนด์ของคุณได้

สารบัญ

  • พาเลทและการใช้สี
  • การสร้างธีมสี
  • เครื่องมือในการเลือกสี

พาเลทและการใช้สี

ระบบสี Material Design ใช้วิธีการจัดการอย่างเป็นระบบเพื่อใช้สีกับ UI ของคุณ ในระบบนี้แม่สีหลัก (Primary color) และสีรอง(Secondary color) จะถูกเลือกเพื่อแสดงถึงแบรนด์ของคุณ สีเข้มและสีอ่อนของแต่ละสีสามารถนำไปใช้กับ UI ของคุณได้หลายวิธี

สีต่างๆและการสร้างธีม

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

ในการเลือกสีหลักและสีรอง และการสร้างสีอ่อนและสีเข้มของแต่ละสีสามารถใช้เครื่องมือพาเลท Material design หรือ Theme editor หรือ 2014  Material Design palette ได้

ตัวอย่างพาเลทสีหลัก (Primary color)และ (Secondary color)

  1. เครื่องมือบอกแม่สีหลัก Primary color indicator
  2. เครื่องมือบอกแม่สีรอง Secondary color indicator
  3. สีอ่อนและสีเข้มต่างๆ Light and dark variants

 

หลักการ (Principles)

เป็นลำดับชั้น

สีจะบ่งบอกว่าองค์ประกอบใดเป็นแบบโต้ตอบ ทั้งบ่งบอกถึงความสัมพันธ์ขององค์ประกอบนั้นกับองค์ประกอบอื่น ๆ และระดับความโดดเด่น องค์ประกอบที่สำคัญควรโดดเด่นที่สุด

อ่านได้ง่าย

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

การแสดงออก

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

 


การสร้างธีมสี

ธีมสีพื้นฐานของ Material Design

Material Design  มาพร้อมด้วยธีมพื้นฐานที่มีอยู่ในตัว ซึ่งสามารถใช้งานได้ตามความเป็นจริง ส่งตรงจากกล่องเครื่องมือ

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

ธีมสีพื้นฐานของ Material Design


สีหลัก (Primary color)

สีหลัก (primary color) เป็นสีที่เห็นได้บ่อยที่สุดตามหน้าจอและองค์ประกอบของแอพ หากคุณไม่มีสีรอง (secondary color) คุณสามารถใช้สีหลักในการเน้นองค์ประกอบนั้นๆได้

สีเข้มและสีอ่อนของสีหลัก (Dark and light primary variants)

คุณสามารถใช้ธีมสีสำหรับแอพ โดยใช้สีหลักและสีเข้ม สีอ่อนของสีหลักได้

การแยกองค์ประกอบของ UI

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

การใช้สีอ่อนหรือสีเข้มของสีหลักแยกแถบบนของแอพจากแถบระบบ

UI นี้ใช้สีหลักและสองชุดสีของสีหลัก


สีรอง (Secondary color)

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

สีรอง (Secondary Color) เหมาะกับ:

  • ปุ่มแบบ Floating action
  • Selection control เช่น slider และ switch
  • ข้อความที่ต้องการเน้น
  • Progress bars
  • ลิ้งค์และ headline ต่างๆ

สีเข้มและสีอ่อนของสีรอง

เช่นเดียวกับสีหลัก สีรองสามารถมีสีเข้มและสีอ่อนที่แตกต่างกัน คุณสามารถสร้างธีมสีโดยใช้สีหลัก สีรอง และชุดสีเข้มและสีอ่อนของแต่ละสี

ชุดสีเข้มและสีอ่อนของสีหลักและสีรอง

UI นี้ใช้ธีมสีจากสีหลัก การไล่สีของสีหลัก และสีรอง


สีของพื้นผิว พื้นหลัง และข้อผิดพลาด

โดยทั่วไปสีของพื้นผิว พื้นหลังและข้อผิดพลาด จะไม่แสดงถึงแบรนด์นั้นๆ

สีพื้นผิวจะมีผลถึงพื้นผิวขององค์ประกอบต่างๆ เช่น การ์ด ชีท และเมนู

  • สีของพื้นหลังมักปรากฎหลังเนื้อหาที่สามารถเลื่อนได้ (scrollable content) โดยสีพื้นหลังและสีพื้นผิวพื้นฐานคือสี #FFFFFF
  • สีของข้อผิดพลาดต่างๆ (Error color) เป็นตัวแสดงข้อผิดพลาดขององค์ประกอบนั้น เช่น ช่องเติมข้อความ สีข้อผิดพลาดพื้นฐานคือสี #B00020

UI นี้ได้แสดงถึงสีพื้นฐานของพื้นหลัง พื้นผิว และข้อผิดพลาด (error)


สีของข้อความและไอคอน

 “On” colors

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

สีหมวดหมูนี้เรียกว่า “On” color บ่งบอกถึงว่าสีหมวดนี้เป็นสีขององค์ประกอบที่วางอยู่บนพื้นผิวหลัก ซึ่งใช้สีหลัก สีรอง สีพื้นผิว สีพื้นหลังและสี error โดยจะมีป้ายกำกับร่วมกับหมวดสีเดิม เช่น สีหลัก (Primary color) จะมีคำนำหน้าด้วย “On”

ส่วนใหญ่สีที่มีคำนำหน้าว่า “On” จะใช้กับข้อความ ไอคอนและเส้นสโตรค บางครั้งยังใช้กับพื้นผิวอีกด้วย

สีตั้งต้นของหมวดนี้คือ #FFFFFF และ #000000

UI นี้แสดงให้เห็นสีพื้นฐานสำหรับข้อความและไอคอน


สีที่สามารถเข้าถึงได้ (Accessible colors)

เพื่อให้มั่นใจว่าสีที่ใช้ทำให้พื้นหลังสามารถเข้าถึงได้ตามหลังข้อความสีอ่อนหรือสีเข้ม คุณสามารถใช้สีอ่อนและสีเข้มของสีหลักและสีรองได้

อีกทางเลือกหนึ่งคือสีเหล่านี้สามารถใช้สำหรับข้อความที่ปรากฏด้านหน้าของพื้นหลังสีเข้มและสีอ่อน

สวอท (Color swatch)

สวอทช์ ( swatch ) เป็นตัวอย่างสีที่เลือกจากช่วงสีที่คล้ายกัน

เครื่องหมายถูกบ่งชี้ว่าสามารถอ่านสีของข้อความว่าบนพื้นหลังนี้ได้หรือไม่

  • เครื่องหมายถูกสีขาวแสดงถึงว่าสามารถอ่านข้อความสีขาวบนพื้นหลังสีนี้ได้
  • เครื่องหมายถูกสีดำแสดงถึงว่าสามารถอ่านข้อความสีขาวบนพื้นหลังสีนี้ได้

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

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


สีทางเลือก (Alternative colors)

ระบบสีของ  Material Design รองรับสีทางเลือก (alternative colors) ซึ่งเป็นสีที่ใช้แทนสีหลักและสีรองของแบรนด์  แอพสามารถใช้สีอื่นเพื่อสร้างธีมที่แยกส่วนต่าง ๆ ได้

สีทางเลือก(Alternative colors) เหมาะกับ:

  • แอพที่มีธีมสีเข้มและสีอ่อน
  • แอพที่มีธีมที่แตกต่างกันในแต่ละส่วนที่ต่างกัน
  • แอพที่มีเป็นส่วนหนึ่งของชุดผลิตภัณฑ์

ควรใช้สีที่เป็นทางเลือกอย่างระมัดระวัง เนื่องจากสีทางเลือกมีการเปลี่ยนโทนไปมา  ดังนั้นควรเลือกใช้ให้เหมาะสมธีมสีที่ใช้อยู่

สีทางเลือก (Alternative colors) สำหรับธีมของส่วนต่างๆ

สีทางเลือกสามารถใช้เป็นธีมให้กับส่วนต่างๆของแอพ

แอพนี้ใช้ 3 สีหลัก ธีมที่ต่างกันใช้ในส่วนต่างๆของแอพทำให้ผู้ใช้สามารถแยกได้ว่า ตนกำลังอยู่ในส่วนใด

ธีม 1

สีเหลืองใช้เป็นสีหลักสำหรับพื้นที่ต่างๆ เช่น onboarding และการเลือกพื้นที่ที่น่าสนใจ

ธีม 2

สีน้ำเงินใช้เป็นสีหลักสำหรับพื้นที่ของแอพที่เกี่ยวข้องกับบัญชีส่วนตัวของผู้ใช้

ธีม 3

สีชมพูเป็นสีหลัก


สีเพิ่มเติมสำหรับ data visualization

แอพสามารถใช้สีเพิ่มเติมเพื่อถ่ายทอดส่วนอื่นที่อยู่นอกเหนือจากธีมสีหลัก และยังใช้ full color palette แบบเดิมได้อีกด้วย

แอพนี้มีธีมสีและห้าสีเพิ่มเติม ซึ่งจะใช้เมื่อมีการแสดง data visualization หลายภาพในหน้าเดียวกัน

  1. ส่วนของบัญชีเป็นสีเขียว
  2. ส่วนของบิลเป็นสีส้มและเขียว
  3. ส่วนของงบประมาณเป็นสีม่วงและฟ้า

 


เครื่องมือสำหรับการเลือกสี

Material palette generator

เครื่องมือสร้างพาเลทของ Material

เครื่องมือสร้างพาเลทของ Material สามารถสร้างพาเลทสีใดๆก็ได้ที่คุณใส่ข้อมูลเข้าไป การปรับอัลกอริธึ่มของเฉดสี ( Hue) ความเข้มของสี (Chroma) และความสว่าง (lightness) สร้างพาเลทที่ทั้งใช้งานได้

สีที่ป้อนเข้าไป

สามารถสร้างพาเลทได้ตามสีหลักที่ระบุ ไม่ว่าเราจะต้องการพาเลทแบบสีใกล้เคียง (analogous) สีคู่ ( complementary) หรือสีไตรสัมพันธ์ (triadic) ที่สัมพันธ์กับสีหลัก จานสีสามารถสร้างขึ้นได้ตามสีของที่ป้อนเข้าไป

ชุดสีต่างๆสำหรับผู้พิการทางสายตา (accessibility)

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

บทความแปลจากเว็บไซต์: Material Design

Complete Web & App Design Course - UX, UI and Design Thinking With Big Data Bootcamp

เรียนรู้ หัวใจหลักสำคัญของการทำ Product ด้วย UX และ UI
การออกแบบโดยใช้ Concept ของ Design Thinking
นำข้อมูลที่ได้มาพัฒนา Product อย่างสม่ำเสมอ โดยใช้ Concept ของ Big Data
รายละเอียดเพิ่มเติมและสมัครที่นี่
หลักสูตรยาว 12 ครั้ง รวมเวลากว่า 72 ชั่วโมง จบมาทำงานได้จริง
ราคาคุ้มค่าที่สุด ตอนนี้มี promotion มา 2 คนลดเพิ่ม 10% 3 คนลดเพิ่ม 15%
สามารถขอ code ส่วนลดได้ที่ page LEAN upskill
Portal tech co.