ทำไมต้องใช้ HSB ในการช่วยออกแบบ UI

หลายๆคนที่ทำงานด้านออกแบบคงจะรู้จักหรือคุ้นเคยกับ Color Theory กับ Palettes ค่อนข้างดี เพราะไม่ว่าจะในบทความ หนังสือ หรือแม้กระทั่งตอนเรียนอาจารย์ก็จะพูดถึงทฤษฎีสีพวกนี้อยู่เสมอ และจะแนะนำหรือให้ทำตาม โดยการบอกว่า “ถ้าคิดสีไม่ออก ก็ให้ตามทฤษฎี เดี๋ยวก็จะถูกต้องและสวยงามเอง” อะไรทำนองนี้ ซึ่งโดยส่วนตัวเมื่อก่อนก็ทำแบบนี้เหมือนกัน เพราะคิดไม่ออกว่าจะใช้สีอะไรดี เลยต้องนำทฤษฏีที่ได้เรียนมาใช้ และคิดว่ามันก็คงดีเป็นวิธีที่ดีที่สุดสำหรับการเลือกสีแล้วแหละ !

ภาพจากบทความ Finding the right color palettes for data visualizations

แต่ไม่นานนี้บังเอิญไปเจอบทความนึง คนเขียนเขาบอกว่า

ในความเป็นจริง..จากประสบการณ์การใช้ Split Complementary Palette ของเขาเป็นเพียงการคาดการณ์หรือจะพูดสั้นๆง่ายๆ คือ ไร้ประโยชน์มากๆ สำหรับการออกแบบ !!!

พออ่านจบก็โอ้โหเลยจ้าา และมีคำถามเกิดขึ้นทันที

คำถามแรกคือ ..

Color Theory กับ Palettes ไร้ประโยชน์ขนาดนั้นเลยหรอ ?

พอมานั่งคิดๆแล้ว ก็ได้คำตอบว่าคนเขียนเขาอาจจะหมายถึง เฉพาะการออกแบบ UI (User Interface) เท่านั้นหรือเปล่านะ เพราะ Color Theory กับ Palettes นี้ มันมีข้อดีอยู่เหมือนกัน ไม่นั้นใครๆก็คงไม่พูดถึงมันและใช้กันมาขนาดนี้ แต่ข้อดีของมันอาจจะเป็นกับพวกงานออกแบบประเภทอื่น เช่น กราฟฟิค โปสเตอร์ ภาพวาด และอื่นๆ ที่นอกเหนือจากการออกแบบ UI ซะมากกว่า เพราะการออกแบบ UI ต้องคำนึงการใช้งานของผู้ใช้เป็นหลักมากกว่าแค่เรื่องของความสวยงามอย่างเดียว

Graphic Art นี้มาจากการใช้สีตาม Color Theory แบบ Split Complementary

Poster นี้มาจากการเลือกใช้สีตาม Color Theory แบบ Square

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

ตัวอย่างเว็บไซต์ที่ใช้ Split Complementary

แต่มันก็ไม่ได้มีสีไหนให้เราโฟกัสว่าอะไรคือ Corporate Identity (CI) ของเว็บไซต์และถ้าจะต้องมานั่งดูสีตาม Color Theory ตลอดนี่อาจจะมีกระอักเลือดตายได้นะ อีกอย่างมันต้องตาม Color schemes เลยทำให้ความหลากหลายของสีที่ว่ามันไปไม่สุด เพราะฉะนั้นเดาว่าการใช้ Split Complementary Palette ไม่ใช่ทางเลือกที่น่าสนใจเท่าไหร่สำหรับการออกแบบ UI

คำถามที่สองคือ ..

ถ้าหาก Color Theory และ Palettes ไม่ได้ให้พื้นฐานที่มั่นคงในการออกแบบตามที่เขาบอก แล้วอะไรหละ ที่จะช่วยเราได้ ?

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

เลือกสีหลักในใจไว้ 1 สี แล้วปรับให้ได้หลายๆเฉดสี

เพราะถ้ามากไป (เช่นเดียวกับโปสเตอร์ด้านบน หรือแบบตัวอย่างเว็บไซต์ที่ใช้ Split Complementary) อาจจะมีผลกระทบต่อด้าน UX เพราะผู้ใช้จะต้องเสียเวลามานั่งดูว่าจะโฟกัสอะไรก่อนดี ระหว่างสีสันที่หลากหลายและสวยงามนี้ หรือ Content ใน UI ของเรา (ถ้า Text ไม่เด่นพอก็จบกัน)

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

Theme color ของ Facebook

มาถึงตรงนี้มันอาจจะฟังดูแปลกๆไปหน่อย เพราะเราก็รู้สึกแบบนี้ ตอนรู้ครั้งแรก (ฮ่าๆๆ) แต่หลังจากเข้าใจแล้วว่า ..

ทำไมเขาถึงบอกว่า Split Complementary Palettes หรือ Color Theory ไร้ประโยชน์กับการออกแบบนัก ก็เลยอยากจะมาแชร์ให้ทุกคนได้รู้ไปพร้อมๆกัน เผื่อเอาไปใช้ในการตัดสินใจว่าจะเลือกใช้แบบเดิมที่ทำกันอยู่ หรือจะลองแบบใหม่นี้ดู

เพราะหลังจากที่ศึกษาแล้วก็พบว่ามันง่ายกว่ามานั่งใช้ Color Theory จริงๆนะ และอีกทั้งยังทำให้ UI ของเราดูดีขึ้นอีก

อันดับแรก เรามาเริ่มจากแยกให้ออกระหว่าง ..

ความสว่างและความเข้ม (Lighter variation and Darker variation)

สิ่งหนึ่งที่สังเกตเห็นได้ชัดใน UI ที่สวย ดึงดูดและดูมีมิติ คือจะมีการนำ Lighter variation และ Darker variation เข้ามาอยู่ในธีมสีหลักที่เราใช้ ให้เสมือนว่าเป็นการวางซ้อนทับกันของวัตถุทำให้เกิดแสงและเงาเหมือนจริง เช่น ตัวอย่างนี้ ..

ลองสังเกตดูนะว่ามันมีฟ้าหลายเฉด สีฟ้าเข้มตรง Status Bar หรือ Header อ่ะ มันไม่ใช่การเอาสีดำมาทำ Opacity แล้วทับสีฟ้า หรือเป็นการเลือกสุ่มๆหาสีฟ้าที่เข้มกว่านะ ทั้งหมดที่เห็นนี้มันมีหลักการและเหตุผลอยู่ มันเลยเป็นความหลากหลายของเฉดสีที่พยายามจะให้เข้าใจกัน

เหตุผลที่1: สีดำมันไม่สามารถ Opacity ได้ อันนี้น่าจะรู้กันอยู่แล้วเพราะถ้าปรับ Opacity มันก็กลายเป็นเทา เพราะฉะนั้น ดำ ขาว ไม่ใช่สีแต่มันคือแสง

เหตุผลที่ 2: เราไม่สามารถ Opacity สีดำ มาวางทับสีฟ้าได้นั้น เพราะว่าใน HSB การเพิ่มสีดำจะเทียบเท่ากับการลด Brightness ของสี ตัวอย่างเช่น เราอยากลดความสว่างในขณะเดียวกันเราก็อยากเพิ่มความเข้มข้นตัวของสีด้วย แต่ถ้าเราเอาสีดำมา Opacity เราจะไม่สามารถเพิ่มความเข้มข้นสีได้เลย

ถ้ายังงงๆ ลองพยายามทำความเข้าใจอีกสักตัวอย่างละกัน

• ก่อนกดจะเป็น Theme color
• ตอนเอาเม้าส์ไปชี้ที่ปุ่มจะเป็น Darker variation
• หลังจากกดลงไปแล้วจะเป็น Lighter variation

ทำไมเราต้องทำให้ปุ่มมี Lighter variation และ Darker variation?

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

ความหลากหลายของเฉดสีในที่นี้ บางคนก็อาจจะยังคงเข้าใจว่ามันคือ RGB เพราะปกติเวลาออกแบบเว็บไซต์หรือแอพพลิคชั่นผู้คนก็มักยึดเอาค่า RGB (คือการสร้างสีขึ้นมาจากการรวมของสี 3 สี คือ สีแดง (Red) สีเขียว (Green) และสีน้ำเงิน (Blue)) มา แต่เรามีวิธีที่ง่ายกว่านั้น คือแทนที่เราจะมัวมานั่งผสมสี หรือ กดลากสีจากใน Color picker ว่าอยากได้สีเข้มดึงลงหรือเลื่อนขวา สีอ่อนดึงซ้ายหรือเลื่อนขึ้น เราก็จะมาใช้ HSB color system แทน

• เนื้อสี — Hue
• ความเข้มข้น — Saturation
• ความสว่าง — Brightness

จากรูปตัวอย่างคือ Color Picker จาก Adobe XD

สั้นๆเลยนะ HSB มันคือระบบสีที่ใช้งานง่ายที่สุดและมีความหลากหลาย เพราะฉะนั้น ไม่รู้จักไม่ได้แล้ว ถือว่าพลาดมาก แบบ ก.ไก่ล้านตัวเลยอะ เพราะสิ่งนี้มันจะช่วยให้เราทำ variation ออกมาได้ดี เมื่อ variation ดี UI ดูดีก็จะตามมา

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

สีบนโลกของความเป็นจริง ไปพร้อมๆกับการใช้ HSB เลยแล้วกันนะ

ลองมองไปรอบๆสถานที่ที่คุณอยู่ แล้วลองตั้งคำถามว่าอะไรคือ variation ในความคิดของคุณ

ติ๊กต๊อกๆ ปิ๊งงง! คำตอบคือ เงาใช่มั้ยละ เงาคือ Darker variation แบบนี้ ..

หลังจากนั้นเรามาทดสอบง่ายๆ ด้วยการจุ๊บสีที่ได้แล้วไปดูค่า HSB ของสองสีนี้ เพื่อเอาไปเปรียบเทียบดูว่ามีอะไรลดหรือเพิ่มขึ้นบ้าง

และแล้วผลที่ได้ก็เป็นแบบนี้ เป็นไปตามคาดการณ์และค่อนข้างชัดเจนที่ Brightness จะลดลง

อีกสักตัวอย่างละกันเพื่อความชัวร์

จริงๆถ้าเข้าใจหลักสีบนโลกของความเป็นจริง เมื่อดูด้วยตาเปล่าก็จะสามารถเดาได้เลยว่า Brightness จะลดลงเพราะมันคือเงา และ Saturation จะเพิ่มขึ้น

เห็นมั้ย ง่ายนิดเดียวเอง

และนี่คือกฎที่ควรจำให้ขึ้นใจ

Higher Saturation + Lower Brightness = Darker variation

ทำไมในโลกของความเป็นจริงส่วนใหญ่สีเข้มมีความสัมพันธ์กับ Saturation ที่มากขึ้น?

เนื่องจากความเข้มของแสงจะถูกแทนที่ด้วยความเข้มข้นของสี เช่น ถ้า Brightness มาก Saturation จะน้อยลง และถ้า Brightness น้อยลง Saturation จะมากขึ้น

Lower Saturation + Higher Brightness = Lighter variation

มาถึงตรงนี้ทุกคนคงจะเดากันได้แล้วใช่มั้ยว่ามันจะเป็นในลักษณะไหน มันก็คือการสลับให้ Brightness มากขึ้น Saturation น้อยลงนั่นเอง

ตัวอย่างเช่น ถ้าเกิด Brightness เป็น 100% แล้ว Saturation เป็น 0% ก็จะเป็นสีขาว แบบนี้ ..

และถ้าอยากเพิ่มสีขาว ก็สามารถทำได้ดังนี้

• ลด Opacity ของ Element นั้น (ถ้า Background เป็นสีขาว)
• เพิ่ม Layer โปร่งแสงสีขาว ทับบน Element

Hue

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

โดยเราจะเอาสีที่มี Saturation และ Brightness เท่ากันมาเปรียบเทียบให้ดู เช่นสีเหลืองและสีน้ำเงิน

พวกเราเห็นสีอะไรสว่างกว่ากัน ?

พวกเราเห็นคือสีเหลืองสว่างกว่าสีน้ำเงินใช่มั้ยละ?

นั่นก็เพราะว่าสีเหลืองจะดูอ่อนกว่าในตาของคนเรา (Perceived Brightness) หรือที่เราเรียกกันว่า “Luminosity” แค่นั้นเอง

เราขอสรุปเลยแล้วกันเนอะ

We used HSB Color system for variation

HSB คือ วิธีลัดที่จะทำให้เราได้สีที่หลากหลายโดย ..

• ไม่หลุด theme สีของเราที่คิดไว้ตั้งแต่แรก
• คาดการณ์ได้ว่าใช้อะไรสีไหนถึงจะดูดี
• ทำให้มีตัวเลือกสีน้อยลง (อาจจะทำให้ตัดสินใจง่ายขึ้น หมดปัญหาการบอกว่า “ยังคิดสีไม่ออกเลย”)
• ไม่ต้องมานั่งผสม RGB หรือ เลื่อนหาจาก Color picker
• เป็นมิตรต่อ UX อีกต่างหาก

แต่ถึงยังไง Color Theory, Palettes หรือ HSB ก็ล้วนแล้วแต่มีความสำคัญกันทั้งนั้น ขึ้นอยู่ที่ว่าเราตัดสินใจยังไง จะนำไปใช้กับงานประเภทไหน และเลือกใช้ยังไงมากกว่า หวังว่าบทความนี้จะช่วยให้หลายๆคนที่ไม่มีพื้นฐานด้านการออกแบบ UI ไม่เข้าใจในเรื่องสี ได้ความรู้และเข้าใจกันมากขึ้น

สำหรับวันนี้ก็พอแค่นี้ก่อน ถ้ามีอะไรน่าสนใจคราวหน้าจะหามาแชร์ให้ได้อ่านกันอีกขอบคุณน้าที่อ่านของเค้าจนจบ :)

Reference :

How Color Theory Can Make Your Website More Fabulous

Finding the right color palettes for data visualizations | Inside Design Blog