จัดการ Sketch Project เตรียมรับมือกับ Dark Mode #EP2

หลังจากพูดถึงพื้นฐานของ Dark Mode เบื้องต้นไปแล้วใน EP. แรกไปแล้ว ก็ถึงเวลานำทฤษฎีทั้งหมดที่ว่าไปมาลงสนามจริงแล้ว ว่าแต่จะใช้แบบไหน ยังไง ก่อนจะไปถึงตรงนั้น…

เพื่อความตื่นเต้น เดี๋ยวให้ดูภาพสุดท้ายที่เราจะได้ก่อนว่าเป็นยังไง

อะไรจะง่ายขนาดนี้!!

จะเห็นได้ชัดเลยว่า การวางโครงสร้าง Design System เป็นอะไรที่สำคัญมาก ตอนนี้หลายๆ องค์กรก็เริ่มหันมาให้ความสำคัญกับ Design System มากขึ้น ถ้าทำโครงสร้างดี การเพิ่ม Dark Mode เข้าไปก็ไม่ใช่เรื่องยาก

เริ่มจาก…

เก็บ Style ทั้งหมดไว้ใน Sketch Library

เราควรเก็บ Style ทั้งหมดแยกจากไฟล์ Symbol กับ Screen หลัก

ย้ำ!! แยก Style ออกจาก Symbol กับ Screen นะครับ

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

ใน Project จะแบ่งกลุ่มไฟล์ออกเป็น 3 กลุ่มหลักๆ คือ

1. Shared Style (Sketch Library)
2. Symbols (Sketch Library)
3. Screen (Normal Sketch File)

พวก Color กับ Typography ต่างๆ ที่เป็นหัวใจของ Dark Mode จะถูกเก็บไว้ในไฟล์จำพวก Shared Style ที่เป็น Sketch Library แต่เราจะเริ่มสร้างจาก Light Theme ก่อน

แยกประเภทของ Color Style ก่อน

สีที่เราใช้กันอยู่ทุกวันมักจะถูกตั้งชื่อตามชื่อสี เช่น Light Green, Carbon Black, Navy แต่ต่อจากนี้ไปเราจะไม่เรียกแบบนั้นแล้ว จะใช้วิธีตั้งชื่อตามตำแหน่งและความสำคัญแทน แบ่งเป็นกลุ่มใหญ่ๆ 3 กลุ่ม

1. Main Color (สีหลักๆที่ใช้ใน UI)
2. Background Color (สีที่ใช้กับพื้นหลัง)
3. On… Color (สีที่ใช้กับอะไรก็ตามที่วางอยู่บนสี 2 ข้อด้านบน)

กลุ่มแรกสีหลัก Main Color

เป็นสีที่ใช้หลักๆ ใน UI เพื่อที่จะสื่อถึงแบรนด์ หรือ CI (Corporate Identity) ที่ถูกออกแบบมาให้สอดคล้องกับธุรกิจของเรา แน่นอนว่าต้องมีสี

• Primary
• Secondary

Primary – สีหลักที่แทบจะเจอบ่อยที่สุดใน UI

Secondary – สีรองที่จะมีแทรกๆ มาบ้างให้เห็นประปราย

ซึ่งจะเป็นสีที่ใช้บ่อยที่สุด จริงๆ ถ้ามี Accent Color อื่นๆ ก็สามารถเพิ่มเข้าไปได้เหมือนกัน

และสี Functional Color ที่หลายคนมักมองข้ามไป สีจะพวกนี้ส่วนใหญ่ใช้กับตัวอักษร (Typography) หรือไอคอน (Icon) จะใช้ในการบอกสถานะ (State) ต่างๆ เช่น… ผ่าน/ไม่ผ่าน, เตือน หรือแจ้งให้ทราบ (คนที่ทำเว็บอาจจะคุ้นกับคำว่า Alert Color มากกว่า)

สีที่เป็นสี Functional Color มีอะไรบ้าง

• Error
• Warning
• Success
• Info

Error – สีที่ใช้บอกสถานะผิดพลาด / แจ้งเตือนร้ายแรง / ไม่สามารถผ่านได้ ส่วนใหญ่มักใช้สีโทนสีแดง

Warning – สีที่ใช้บอกสถานะแจ้งเตือน / สามารถผ่านได้แต่เตือนไว้ก่อน ส่วนใหญ่จะเป็นโทนสีเหลือง

Success – สีที่ใช้บอกสถานะ สำเร็จเรียบร้อย / ผ่าน / สามารถทำได้ ส่วนใหญ่ก็ใช้โทนสีเขียว

Info – สีไว้บอกแจ้งข้อมูลธรรมดาๆ พวก FYI หรือโน้ตเล็กๆ

กลุ่มที่ 2 สีพื้น Background Color

สีในกลุ่มนี้จะไว้ใช้กับพื้นหลังเท่านั้น ตรงตัวตามชื่อ ห้าม! ใช้กับไอคอน (Icon) หรือตัวหนังสือ (Typography) เด็ดขาด

สีในกลุ่มนี้ก็จะมี

• Background
• Surface (เฉพาะ Material Design)
• Overlay
• Error

Background – สีที่ใช้กับพื้นหลังอันดับล่างสุด ส่วนใหญ่จะใช้กับพื้นหลังของหน้านั้นๆ

Surface – อันนี้ใครใช้ Material Design จะได้ใช้บ่อย ซึ่ง…เจ้า Surface มีหลายระดับชั้น แต่ละชั้นก็จะมีเงาที่ต่างกันออกไป ยิ่งสูง เงายิ่งบาง และถ้าเป็น Dark Mode แต่ละชั้นจะมีสีที่ดำไม่เท่ากัน ยิ่งสูง ยิ่งสว่างขึ้น

Overlay – สีพวกนี้จะไป Overlay อยู่บนสีพื้นหลังของ Symbol นั้นๆ หรือบางทีก็ Overlay บังทั้ง Screen ไปเลยใช้กับพวก Components ที่เปลี่ยนสีพื้นหลังได้ ส่วนใหญ่จะเป็นพวกสีบอกสถานะจางๆ (Error, Warning, Success)

Error – สีพื้นหลังของการแจ้งเตือนทุกรูปแบบ

กลุ่มที่ 3 สีที่ใช้กับอะไรก็ตามที่วางอยู่บนสีอื่น On… Color

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

สีกลุ่มนี้คือสีที่ใช้กับไอคอน (Icon) หรือตัวอักษร (Typography) ที่วางอยู่บนสีอื่นๆ

แล้วสีอื่นๆ ที่ว่าคือสีอะไรล่ะ ?

ก็สีสองกลุ่มแรกที่กล่าวไปด้านบนนั่นแหละ มันก็เลยขึ้นต้นด้วย On… เป็นหลัก เช่น

• On Background/Surface (เฉพาะ Material Design)
• On Primary
• On Secondary
• On Error

ในแต่ปกติเรามี Typography สีดำหลายเฉดนี่ แล้วจะตั้งชื่อยังไง?

คำตอบคือ ตั้งตามลำดับความสำคัญ …สมมติ ผมอยากได้สี On Background หลายๆ เฉด

ก็จะแบ่งเป็น

• High Emphasis
• Medium Emphasis
• Low Emphasis
• Disable

High Emphasis จะเป็นสีที่ใช้กับไอคอน หรือข้อความที่มีความสำคัญมากที่สุด มักจะมีสีที่เข้มที่สุด

ส่วนที่เหลือก็ไล่จากเข้มไปอ่อน ตามลำดับความสำคัญ

หมดแล้วอย่าลืม Create Shared Style ให้เรียบร้อย

ทำ Typography โดยแบ่งประเภทอิงตาม Color Style

เรื่องสีจบไปแล้ว ต่อไปมาในเรื่องของ Typography บ้าง

ข่าวดีครับ เราผ่านจุดที่ยากที่สุดมาแล้ว 🎉

จากนี้ต่อไปเราแค่เอา Typography ที่เรามีมาแบ่งกลุ่มโดยอ้างอิงจาก Color Style ที่เราทำไว้ ยกเว้นสี Background ที่เราจะไม่เอามาใช้

ก็จะมี…

• On Background/Surface (เฉพาะ Material Design)
• On Primary
• On Secondary
• On Error
• Primary
• Secondary (อันนี้มีหรือไม่มีก็ได้)
• Error
• Warning
• Success
• Info

ในกลุ่ม On… Color จะแบ่งเป็นเฉดต่างๆ เพิ่มอีก

เสร็จแล้วก็ Create Shared Styleให้เรียบร้อยเหมือนเดิมครับ

โปรทิพย์: ถ้าอยาก Create Shared Style ไวขึ้นเหมือนดีดนิ้ว ลอง Plugin นี้ดู แค่ลากคลุม กด ⌃⌘S มันจะสร้าง Shared Style ให้เลยตามชื่อ Layer

lucaorio/sketch-styles-generator

Duplicate Library ออกมาทำ Dark Mode

บอกเอาไว้ตั้งแต่แรกแล้วว่าให้ทำใน Library นอกจากไฟล์อื่นยืมไปใช้ได้ง่ายแล้ว ยัง Duplicate ไปสร้างเป็น Dark Mode ได้ง่ายขึ้นอีกด้วย

หลังจากที่เรา Duplicate Style ของ Light Theme มาแล้ว เราค่อยเปลี่ยนสีให้เป็น Dark Theme โดยห้ามเปลี่ยนชื่อ Style ⛔

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

Primary — Primary

Overlay — Overlay

Background — Background

ส่วนพวก Typography จะมีสีและคุณสมบัติตามชื่อที่ตั้งไว้อยู่แล้ว เช่น

On Surface — ที่เป็นข้อความสีดำบนพื้น Surface สีขาว พอเป็น Dark Mode พื้น Surface เป็นสีดำ เราก็ปรับให้ On Surface ในไฟล์ Dark Mode เป็นข้อความสีขาวซะ มันจะไม่กระทบกับตัวอักษรที่อยู่บนพื้นอื่นๆ

เสร็จแล้ว ลอง New File มาสร้าง Screen สักหนึ่งหน้าโดยใช้สีจาก Library ของ Light Mode ที่สร้างเอาไว้ …ส่วน Dark Mode เก็บไว้ก่อนในหัวข้อหน้าได้ใช้แน่นอน

สลับ Library ด้วย Camilo

ต่อไปนี้จะบอกคาถาเวทมนต์ เปลี่ยนจาก Light Mode เป็น Dark Mode ด้วย

Camilo — Plugin สลับ Library ในชั่วพริบตา

ง่ายๆ แค่กด Plugin > Camilo แล้วเลือก Library ที่เป็น Dark Mode

เสร็จ✨

เห็นมั้ย Dark Mode ง่ายนิดเดียว หวังว่าบทความนี้จะเป็นประโยชน์สำหรับใครก็ตามที่กำลังเตรียมพร้อมรับมือกับ iOS13 และ Android 10 ที่จะมีฟีเจอร์ Dark Mode เข้ามาเป็นพื้นฐานของทุกๆ แอพ …อะไรก็ตามที่อ่านไปด้านบน สามารถนำไปปรับเปลี่ยนให้เข้ากับโปรเจ็กต์ของแต่ละที่ได้นะครับ ใครมีแนวทางอื่นๆ ก็มาแชร์กันได้

เจอกันบทความหน้า บาย

👋