Facebook : https://www.facebook.com/TouchPoint.in.th Website : https://touchpoint.in.th

1. Color with User Interface Design
ดร.กฤษณพงศ์ เลิศบำรุงชัย
สีกับกำรออกแบบ
Facebook.com/TouchPoint.in.th TouchPoint.in.th YouTube.com/c/TouchPointTH
ส่วนประสำนงำนกับผู้ใช้

2. ควำมหมำยของสี
สี (Color) คือ การรับรู้ความถี่ของแสงในช่วงความยาวคลื่นของแสง
ที่มนุษย์รับรู้ผ่านการมองเห็น
Definition of Color

3. ทำไมเรำถึงเห็นสี
Why do we see colors?
ด้ำนมนุษย์ ด้ำนวัตถุ

4. ด้ำนมนุษย์
มนุษย์เห็นสีได้ด้วยดวงตา ซึ่งมีจอประสาทตาหรือเรตินาเป็นส่วนรับภาพ
และยังมีเซลล์ที่เรียกว่าโคน (Cones) เป็นส่วนที่ใช้รับสีต่างๆ แล้วนาไปประมวลผล
ออกไปที่สมอง ทาให้เราทราบว่าสีที่เราเห็นเป็นสีอะไร สีที่เกิดขึ้นมาเป็นคลื่นแม่เหล็กไฟฟ้า
มีความยาวคลื่นประมาณ 380–740 นาโนเมตร ซึ่งดวงตามนุษย์รับสีได้ 8-10 ล้านสี

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

6. คำศัพท์ที่ควรรู้เกี่ยวกับสี
Hue Saturation Brightness / Luminance Shades and Tint
Tones Subtractive
Additive

7. Hue
Hue คือ สีในธรรมชาติที่มนุษย์มองเห็น
เป็นสีพื้นฐานที่ไม่มีการปรับค่าใด ๆ ในวงล้อสี

8. Saturation
Saturation คือ ความสดความอิ่มตัวของเนื้อสี การปรับความสดของสี
จะส่งผลต่อโทนสีและเฉดสี
0% 50% 100%

9. CREDITS: This presentation template was created by Slidesgo, and includes icons by Flaticon, and
infographics & images by Freepik
Brightness / Luminance
Brightness / Luminance คือ ค่าความสว่าง ค่าน้อยจะทาให้สีมืด
ค่ามากจะทาให้สีสว่าง
0% 50% 100%

10. Shades and Tint
Shades คือ ค่าสีปกติที่ค่อยๆ เติมสีดาลงไป
Tints คือ ค่าสีปกติที่ค่อยๆ เติมสีขาวลงไป
Shades Base Tints

11. Tones
Tones คือ ค่าสีปกติที่ค่อยๆ เติมสีเทาลงไป
Base

12. Additive
Additive คือ การผสมกันของสีและแสง เมื่อมีค่ามากขึ้นจนสุดจะกลายเป็นสีขาว
พบในงานดิจิทัลที่ปรากฏบนหน้าจอ ใช้ระบบสี RGB (Red, Green, Blue)

13. Subtractive
Subtractive คือ การหักลบดูดซับกันของสี พบได้ในงานที่ไม่ได้ปรากฏบนหน้าจอก็คือ
สิ่งพิมพ์ ใช้ระบบสี CMYK (Cyan, Magenta, Yellow, Black)

14. ระบบสี
Color System
HSB System
RGB System CMYK System Greyscale System

15. RGB System
RGB เป็นระบบสีที่ใช้เป็นมาตรฐานสาหรับงานที่แสดงผลบนหน้าจอหรือแพล็ตฟอร์ม
ดิจิทัล มีการตั้งค่าตามการคานวณทางคณิตศาสตร์ แต่ละค่าเมื่อแยกออกมาคือ
R (Red), G (Green) และ B (Blue) โดยมีค่าตั้งแต่ 0–255 ในแต่ละตัว
โดยสามารถกาหนดค่าได้ 2 แบบได้แก่
RGB Function
(R, G, B)
RGB HEX
#RRGGBB
0-255

16. RGB
MODE
RGB FUNCTION
( R , G , B )
RGB HEX
# RR GG BB
(255,0,0) (0,255,0) (0,0,255)

17. RGB Function (R,G,B)
RGB Function เป็นการกาหนดค่าสี RGB
ให้อยู่ในรูปแบบตัวเลข 0-255 เช่น
(255,0,0) ได้สีแดงเพราะสีแดงมีค่าสูงสุดแต่สีอื่นไม่มี
(0,255,0) ได้สีเขียว
(0,0,0) จะได้สีดาเพราะไม่มีค่าสีทั้งสามเลย
(0,0,255) ได้สีน้าเงิน
(255,255,255) จะได้สีขาวเพราะทุกค่าสีมีค่าสูงสุด

18. RGB HEX
RGB HEX เป็นการกาหนดสีโดยใช้โค้ดสี #RRGGBB ประกอบไปด้วยตัวแปรสองตัว
คือ ตัวอักษร (A-F) F มีค่าสูงสุด และตัวเลข (0–9) 9 มีค่าสูงสุด เช่น
#FF0000 ได้สีแดง
#00FF00 ได้สีเขียว
#000000 ได้สีดา
#0000FF ได้สีน้าเงิน
#FFFFFF ได้สีขาว

19. คือ มันถูกสร้างด้วยการคานวณทางคณิตศาสตร์ ผู้ใช้ทั่วไป
ไม่มีความรู้เรื่อง RGB จะบอกได้เพียง “ขอสีสดขึ้น”
หรือ “สว่างขึ้น” ทาให้เกิดปัญหาระหว่างผู้ใช้กับ UI Designer
แล้วเรำจะแก้ไขปัญหำนี้อย่ำงไร
ปัญหำของ RGB

20. HSB System
HSB เป็นระบบสีที่เกิดจากการรับรู้โดยธรรมชาติของมนุษย์ โดยมี 3 ตัวแปร ได้แก่ ค่าสีปกติ (Hue)
ความสดของสี (Saturation) และความสว่างของสี (Brightness) ผู้ใช้ทั่วไปจะเข้าใจได้มากกว่าการบอกเป็นโค้ดสี
เหมาะกับการใช้สื่อสารกับผู้ใช้ที่ไม่เข้าใจระบบสี RGB
HSB
MODE
Hue
Saturation
Brightness
0o
270o
180o
90o
0% 50% 100%
Brightness
0% 50% 100%
Saturation

21. CMYK System
CMYK เป็นระบบสีที่ใช้สาหรับสิ่งพิมพ์ ประกอบด้วยสีหลัก 4 สี ได้แก่
สีฟ้าอมเขียว (Cyan) ชมพูอมม่วง (Magenta) สีเหลือง (Yellow) และ สีดา (Black)
CMYK
MODE
CYAN
MAGENTA
YELLOW
BLACK

22. Greyscale System
Greyscale เป็นระบบสีที่สาคัญสาหรับการทางานด้าน UI Design
เพราะเป็นการใช้เพื่อเป็นสีตัวกลางในการสื่อความหมายต่างๆ
โดยไล่ตั้งแต่ดาไปจนถึงขาว
GREY
SCALE
0% 50% 100%

23. ทฤษฎีสี
Color Theory
ทฤษฎีสี (Color Theory) หมายถึง ทฤษฎีของแม่สีที่เป็นต้นกาเนิดของการผสมสีเพื่อให้เกิดเป็นสี
เพื่อนาไปใช้สร้างงานศิลปะหรืองานออกแบบ ลาดับชั้นของสีในวงล้อสีมี 12 สีหลักและสามารถ
กระจายออกมาได้เป็น 3 ขั้น ดังนี้
แม่สี
Primary Color
สีขั้นที่สอง
Secondary Color
สีขั้นที่สำม
Tertiary Color

24. แม่สี
แม่สี (Primary Color) คือ สีที่เป็นพื้นฐานขั้นต้นมี 3 สี เมื่อนามาผสมจะได้สีต่างๆ ตามมา
Primary Color

25. CREDITS: This presentation template was created by Slidesgo, and includes icons by Flaticon, and
infographics & images by Freepik
สีขั้นที่สอง
สีขั้นที่สอง (Secondary Color) คือ สีที่เกิดจากสีพื้นฐานผสมกัน
ในอัตราส่วนที่เท่ากันจะได้สีใหม่อีก 3 สี
Secondary Color

26. สีขั้นที่สำม
สีขั้นที่สาม (Tertiary Color) คือ สีที่เกิดจากสีพื้นฐานผสมกับสีขั้นที่ 2
ในอัตราส่วนที่เท่ากันก็จะได้สีใหม่เพิ่มขึ้น
Tertiary Color

27. อุณภูมิสี
Color Temperature
อุณภูมิสี (Color Temperature) คือ ค่าความยาวคลื่นของแสงในแต่ละความถี่ที่สมองแปลมาจากการมองเห็น
และให้ความหมายออกมาเป็นอุณหภูมิ แบ่งออกได้เป็น 3 กลุ่ม ได้แก่
สีโทนอุ่น
Warm Color
สีโทนกลำง
Neutral Color
สีโทนเย็น
Cold Tone

28. สีโทนอุ่น
สีโทนอุ่น (Warm Color) ได้แก่ แดง แสด ส้ม เหลือง ชมพู บานเย็น ม่วง
Warm Color

29. สีโทนกลำง
สีโทนกลาง (Neutral Color) ได้แก่ ดา ขาว เทา นวลๆ
Neutral Color

30. สีโทนเย็น
สีโทนเย็น (Cold Tone) ได้แก่ น้าเงิน ฟ้า เขียว คราม ม่วง
Cold Tone

31. เทคนิคกำรนำสีไปใช้งำน
Applying Color Techniques
การนาสีไปใช้งานให้เกิดความสวยงาม UI Designer จะต้องใช้เทคนิคการเลือกสี ได้แก่
สีโทนเดียว
Monochromatic
สีคู่ตรงข้ำม
Complementary
สำมสีข้ำงเคียง
Analogous
สำมเหลี่ยมด้ำนเท่ำ
Triadic

32. เทคนิคกำรนำสีไปใช้งำน
Applying Color Techniques
สีตรงกันข้ำมเยื้อง
Split-Complementary
สี่เหลี่ยมจัตุรัส
Square
สี่เหลี่ยมผืนผ้ำ
Rectangle
การนาสีไปใช้งานให้เกิดความสวยงาม UI Designer จะต้องใช้เทคนิคการเลือกสี ได้แก่

33. สีโทนเดียว
เป็นการใช้สีโทนเดียวกันทั้งหมด แล้วปรับค่า Shades, Tones และ Tints ของสีปกติ
ทาให้เกิดสีที่มีค่าน้าหนักต่างกันแต่ยังมีความกลมกลืนกัน
Monochromatic

34. สีโทนเดียว
Monochromatic

35. สีคู่ตรงข้ำม
เป็นสีที่อยู่ตรงข้ามกันในวงล้อสี สองสีนี้มีความต่างกันสูงมาก เช่น สีแดง-สีฟ้า สีเหลือง-สีน้าเงิน ซึ่งทั้งสองสีจะปรากฏตัดกัน
เด่นชัดมาก ๆ ไม่ควรใช้ปริมาณเท่ากัน ควรใช้ 80:20 หรือ 70:30 ทาให้ส่วนน้อยกลายเป็นจุดเด่นของงาน
Complementary

36. สีคู่ตรงข้ำม
Complementary

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

38. สำมสีข้ำงเคียง
Analogous

39. CREDITS: This presentation template was created by Slidesgo, and includes icons by Flaticon, and
infographics & images by Freepik
สำมเหลี่ยมด้ำนเท่ำ
เป็นการเลือกสีสามสีที่มีระยะห่างเท่ากันเป็นสามเหลี่ยมด้านเท่ามาใช้งาน
ชุดสีแบบนี้จะสร้างให้งานของเรามีความสดชื่น มีชีวิตชีวา สนุก
Triadic

40. CREDITS: This presentation template was created by Slidesgo, and includes icons by Flaticon, and
infographics & images by Freepik
สำมเหลี่ยมด้ำนเท่ำ
Triadic

41. สีตรงกันข้ำมเยื้อง
สามสีที่มีพื้นที่ห่างแบบสามเหลี่ยมด้านไม่เท่ากัน โดยจะมีสองสีที่เข้ากันและสีที่มีความ
ต่างสูง 1 สี ทาให้สร้างความโดดเด่นของสีใดสีหนึ่งได้อย่างชัดเจน
Split-Complementary

42. สีตรงกันข้ำมเยื้อง
Split-Complementary

43. สี่เหลี่ยมจัตุรัส
สี่สีในระยะห่างเท่ากันแบบสี่เหลี่ยมจัตุรัส ชุดสีลักษณะนี้ทาให้งานมีความสนุก โดดเด่น
การใช้งานจะต้องใช้ในปริมาณที่เหมาะสมพอดี เพื่อไม่ให้แข่งกันเด่น
Square

44. สี่เหลี่ยมจัตุรัส
Square

45. สี่เหลี่ยมผืนผ้ำ
สี่สีในระยะห่างกันแบบสี่เหลี่ยมผืนผ้า เกิดจากการใช้สีข้างเคียงกันสองสีในแต่ละด้าน และสีที่ตรงข้ามกันอีกสองสีในแต่ละด้าน
การใช้สีลักษณะนี้ทาให้งานดูกลมกลืนกันมากกว่าแบบ Square ทั้งนี้ขึ้นอยู่กับการใช้งาน
Rectangle

46. สี่เหลี่ยมผืนผ้ำ
Rectangle

47. จิตวิทยำของสี
The Color Psychology
สีแดง
RED
สีส้ม
Orange
สีเหลือง
Yellow
สีน้ำตำล
Brown
สีชมพู
Pink
สีม่วง
Violet

48. จิตวิทยำของสี
The Color Psychology
สีน้ำเงิน
Blue
สีฟ้ำ
Sky
สีเขียว
Green
สีดำ
Black
สีเทำ
Grey
สีขำว
White

49. สีแดง
RED
ความรัก ความกระหาย การผจญภัย พละกาลัง เซ็กซี่ยั่วยวน
ตื่นตัว หรูหรา ความโชคดี มีโชคลาภ ความสิริมงคล
👍
ความอันตราย เกรี้ยวกราดด เผ็ดร้อน ความรุนแรง สงคราม
👎

50. สีส้ม
Orange
ความตื่นตัว ความตื่นเต้น ความแข็งแรง ความคิดสร้างสรรค์
การเคลื่อนไหว พละกาลัง (เชิงบวกมากกว่าสีแดง) ความเป็นมิตร
การเชื้อเชิญ การให้กาลังใจ ความอบอุ่น
👍
อันตราย (ไม่เท่าสีแดง) คาเตือน
👎

51. สีเหลือง
Yellow
ความสว่าง สดชื่น พลังงาน ความสุข ความหวัง การแรกเกิด
ความสงบ ความปรารถนา
👍
คาเตือน ความหลอกลวง
👎

52. CREDITS: This presentation template was created by Slidesgo, and includes icons by Flaticon, and
infographics & images by Freepik
สีน้ำตำล
Brown
ความเรียบง่าย ความแข็งแรง มีประสบการณ์ มีอายุ ความน่าเชื่อถือ
ความบริสุทธิ์ ความเป็นธรรมชาติ
👍
ความแห้งแล้ง โรคระบาด
👎

53. สีชมพู
Pink
ความรัก ความอ่อนหวาน ความอ่อนโยน ความสวยงาม
พลังด้านบวก ความน่ารักสดใส ความร่าเริง ความโรแมนติก
👍
ความริษยาแบบเบาๆ
👎

54. สีม่วง
Violet
จินตนาการ ความคิดสร้างสรรค์ ความหรูหรา สูงส่ง ความอ่อนเยาว์
ความลึกลับ ความเซ็กซี่ยั่วยวน กลางคืน ความสนุกสนาน
👍
ความริษยาแบบแรงๆ ร้ายๆ ความเป็นพิษ ความงุนงง ความลุ่มหลง
👎

55. สีน้ำเงิน
Blue
ความน่าเชื่อถือ ความแข็งแรง บริสุทธิ์ ปลอดภัย สมบูรณ์แบบ สงบสุข
ความรับผิดชอบ อานาจ มีเกียรติ ฉลาด สะอาด สติปัญญา
👍
ความเศร้า เหงา ความเหน็บหนาว ความหมองหม่น ความอ้างว้าง
ความโหยหา
👎

56. สีฟ้ำ
Sky
ความสดใส ความปลอดภัย ความร่าเริง ความดีต่อใจ การไม่สิ้นสุด
ความสะอาด ความเข้าใจ ความเชื่อใจ ความอิสระ การผ่อนคลาย
👍
การไม่มีตัวตน
👎

57. สีเขียว
Green
การเจริญเติบโต ความสุขภาพดี ธรรมชาติ ความสดชื่น ความสาเร็จ
ความถูกต้อง ความปลอดภัย ความอุดมสมบูรณ์ ความสบาย
ผ่อนคลาย ความมีประโยชน์
👍
ความขยะแขยง
👎

58. สีดำ
Black
ความสุขุมนุ่มลึก ความสุภาพ ความรวย ความมั่งคั่ง ความหรูหรา
ความแข็งแรง ความมีอานาจ
👍
ความกลัว ความตาย ความเหงา ความมืด ความลึกลับ ความเศร้า
👎

59. สีเทำ
Grey
ความอ่อนน้อมถ่อมตน ศักดิ์ศรี ความเสถียร ความมั่นคง ความเป็น
ทางการ ความมีระเบียบ สติปัญญา ความเชื่อถือ ความจงรักภักดี
ความเป็นผู้ใหญ่
👍
ความมีอายุ ความเศร้า ความน่าเบื่อ ความเป็นอนุรักษ์นิยม
👎

60. CREDITS: This presentation template was created by Slidesgo, and includes icons by Flaticon, and
infographics & images by Freepik
สีขำว
Brown
ความสะอาด ความสงบ ความอ่อนน้อม ความอ่อนโยน ความหรูหรา
ยิ่งใหญ่ ความสุภาพ ความบริสุทธิ์ ความสว่าง คุณธรรม
ความเก่งกาจ
👍
ความว่างเปล่า
👎

61. กำรสร้ำงชุดสีให้เหมำะสมกับผลิตภัณฑ์
Create Color Matching with Products
สิ่งที่ UI Designer ต้องเข้าใจเสมอก่อนการสร้างงานออกแบบมี 3 สิ่ง ได้แก่
เข้ำใจผู้ใช้งำน
Understand your User
เข้ำใจภำพลักษณ์ขององค์กร
Understand your Brand
เข้ำใจผลิตภัณฑ์ที่จะนำเสนอ
Understand your Products

62. เข้ำใจผู้ใช้งำน
เพื่อให้ผลิตภัณฑ์ขายได้ UI Designer จะต้องสร้างคุณค่า (Value) ให้กับผู้ใช้งานเสมอ
การเลือกใช้สี จาเป็นที่จะต้องเข้าใจว่าผู้ใช้งานของเราเป็นใคร มีพฤติกรรมอะไร
เพื่อให้ผู้ใช้งานสามารถเข้าถึงผลิตภัณฑ์ของเราได้
Understand your User

63. เข้ำใจภำพลักษณ์ขององค์กร
องค์กรมักมีเอกลักษณ์ขององค์กร (Corporate Identity หรือ C.I.) อยู่แล้วตั้งแต่เริ่มตั้งองค์กร
การเลือกใช้สีจะอิงจากหลักจิตวิทยาของสี หรือผู้ก่อตั้งชอบ ซึ่ง Brand จะครอบคลุม
เหนือ Product การเข้าใจว่า Brand มีลักษณะอย่างไร จะทาให้ UI Designer
พัฒนาผลิตภัณฑ์ที่สอดคล้องและเป็นไปในทางเดียวกันกับ Brand ได้
Understand your Brand

64. เข้ำใจผลิตภัณฑ์ที่จะนำเสนอ
UI Designer ต้องเข้าใจสิ่งที่ผลิตภัณฑ์ (Product) นั้นต้องการนาเสนอให้กับผู้ใช้งาน
เช่น สีเหลืองปกติจะสื่อถึงความสดใส ความสว่าง หากไปใช้กับป้ายจราจร
จะสื่อถึงการเตือน เป็นต้น
Understand your Products

65. กำรประยุกต์ใช้ชุดสีกับผลิตภัณฑ์
Apply Color for GUI
การประยุกต์ใช้สีใน UI Element และ UI Components ต้องมีความคงเส้นคงวา
และสื่อความหมายได้อย่างชัดเจน ซึ่งจะมีปัจจัย 3 อย่าง ได้แก่
ควำมคงเส้นคงวำ
Consistency
ควำมแตกต่ำง
Distinct
ควำมจงใจ
Intentional

66. ควำมคงเส้นคงวำ
เป็นการนาเสนอชุดสีที่มีความสม่าเสมอ เพื่อนาเสนอความเป็น Brand ของตัวเองได้
เพื่อการสร้างภาพจาให้กับผู้ใช้ที่มีต่อ Brand ของเรา
Consistency

67. ควำมแตกต่ำง
เป็นการนาเสนอชุดสีเพื่อสร้างความแตกต่างอย่างชัดเจนของกลุ่มข้อมูล
ที่มีความสาคัญ ระหว่างแต่ละ Element และ Components
ควรทาให้ผู้ใช้แยกออกและเข้าใจได้ว่าสีนั้นๆ บอกอะไร และจะให้ทาอะไร
Distinct

68. ควำมจงใจ
เป็นการนาเสนอชุดสี โดยมีจุดประสงค์ในการสื่อความหมาย เพื่อเชื่อมโยง
ความสัมพันธ์ระหว่าง Element แต่ละอันตามลาดับชั้นการใช้งาน
เพื่อจะชี้นาไปยังสิ่งที่เราต้องการให้เกิด การปฏิสัมพันธ์
Intentional

69. 4 ขั้นตอนกำรประยุกต์ใช้สีกับงำน
4 UI Steps for Applying Colors
กำรสร้ำงชุดสี
Theme Creation
STEP 1
กำรทำควำมเข้ำใจส่วนประกอบ UI ที่หลำกหลำย
Understand Variety of UI Components
STEP 2
สถำนะของสีในส่วนติดต่อผู้ใช้แบบกรำฟิก
State of Color in GUI
STEP 3
ควำมสำมำรถในกำรเข้ำถึงสี
Color Accessibility
STEP 4

70. STEP 1 กำรสร้ำงชุดสี
UI Designer ต้องกาหนดชุดสีหลัก เพื่อใช้กับ UI Components ต่างๆ และภาพรวมของ Product ทั้งหมด
โดยใช้หลักการจับคู่สีแบบต่างๆ การสื่อสารระหว่าง UI Designer กับ Developer คือการใช้ภาษาสากลด้วย
การเรียกชื่อตามระบบสี ได้แก่ RGB, HEX และ HSB โดยสิ่งที่ต้องคานึงถึงมี 3 สิ่ง ได้แก่
Theme Creation
สีหลัก
Primary Color
สีรอง
Secondary Color
สีสว่ำงและมืด
Light and Dark Color

71. สีหลัก
UI Designer ต้องกาหนดสีที่สื่อถึง Brand หรือ Product มากที่สุด การสร้างชุดสี
Primary จะใช้สี Hue ที่ถูกปรับค่า Brightness / Luminance ในค่าต่างๆ
เพื่อให้ใช้สีด้วยกันได้อย่างกลมกลืน
Primary Color
Desire Blue
Hex : #4D4DFF
H: 240
S: 70
B: 100

72. CREDITS: This presentation template was created by Slidesgo, and includes icons by Flaticon, and
infographics & images by Freepik
สีรอง
สีรอง (Secondary Color) เป็นสีที่นามาช่วยให้เกิดความแตกต่างของ Product
จะมีหรือไม่มีก็ได้ ควรนาไปประยุกต์ใช้สร้างความแตกต่างให้กับบางส่วนประกอบ
และเลือกใช้เท่าที่จาเป็นเท่านั้น การสร้างชุดสีรองให้ทาแบบเดียวกับชุดสี Primary
Secondary Color
H: 168
S: 100
B: 100
Desire Green
Hex : #00FFCC

73. สีสว่ำงและมืด
สีสว่างและมืด (Light and Dark Color) สีขาวและสีดาทาให้เกิดความแตกต่างระหว่างสีหลักกับสีรอง
การใช้ชุดสีขาวและสีดาจะใช้ในส่วนประกอบที่เป็นส่วนใหญ่ของ UI เช่น ชุดอักษร พื้นหลัง พื้นผิว
ระยะห่าง และอื่นๆ หาก UI Designer ใช้อย่างถูกต้อง จะทาให้การออกแบบลงตัว การสร้างชุดสีขาวและ
สีดาจะปรับตามค่า Brightness ตามที่ต้องการ
Light and Dark Color

74. STEP 2 กำรทำควำมเข้ำใจส่วนประกอบ UI ที่หลำกหลำย
UI Designer ต้องเข้าใจส่วนประกอบของ UI ว่าส่วนประกอบนั้นใช้ทาอะไร
เพื่อให้เกิดอะไร ไม่ใช่การนาสีต่างๆ มายัดเพื่อให้เกิดความหลากหลาย
โดยหลักการใช้สีกับ UI Component จะมีตัวแปรหลักๆ อยู่ 3 สิ่ง ได้แก่
Understand Variety of UI Components
ลำดับชั้น
Hierarchical
ควำมชัดเจน
Legible
แสดงออกมำ
Expressive

75. ลำดับชั้น
สีจะต้องบ่งบอกถึงสิ่งที่ผู้ใช้จะปฏิสัมพันธ์ด้วย โดยจะต้องโดดเด่นขึ้นมาจากองค์ประกอบอื่นๆ เช่น ปุ่มต้องรู้ว่ากดได้
Hierarchical

76. ควำมชัดเจน
สีที่ใช้จะต้องชัดเจนในมาตรฐานเดียวกันในผลิตภัณฑ์เดียวกัน แม้ว่าจะอยู่ในแพล็ตฟอร์ม
ที่แตกต่างกัน ไม่ว่าจะเป็น แอปพลิเคชั่น เว็บไซต์ ป้าย แบนเนอร์ และบรรจุภัณฑ์ เป็นต้น
Legible

77. แสดงออกมำ
สีต้องสร้างความแข็งแรงให้ Brand โดยเฉพาะในส่วนที่นาเสนอเพื่อการตัดสินใจของผู้ใช้
โดยเฉพาะปุ่ม Call to Action
Expressive

78. STEP 3 สถำนะของสีในส่วนติดต่อผู้ใช้แบบกรำฟิก
State of Color in GUI
สีเป็นปัจจัยเพื่อบอกถึงการปฏิสัมพันธ์กับผู้ใช้ UI Designer ต้องออกแบบสถานะของส่วนประกอบ เพื่อสื่อสารถึงสถานะการทางาน
ของส่วนประกอบนั้นๆ โดยมี 4 ประเภทใหญ่ๆ ได้แก่
สถำนะปกติ สถำนะที่กำลังเปลี่ยนไป สถำนะที่เปลี่ยนไปแล้ว สถำนะอื่นๆ

79. สถำนะปกติ
สถานะปกติ (Normal State) เป็นสถานะที่ผู้ใช้เห็นในตอนแรก โดยที่ผู้ใช้ยังไม่ได้
ปฏิสัมพันธ์กับส่วนประกอบนั้นๆ
Normal State

80. สถำนะที่กำลังเปลี่ยนไป
เป็นสถานะที่จะแสดงผลเมื่อผู้ใช้กาลังทาการปฏิสัมพันธ์กับส่วนประกอบในช่วงเวลานั้น
ซึ่งจะเกิดและจบไป และจะไปอยู่ที่สถานะปกติ
Changing State

81. สถำนะที่เปลี่ยนไปแล้ว
เป็นสถานะที่ถูกเปลี่ยนไปจากเดิมของ สถานะเดิม เช่น เมื่อกดแล้วเปลี่ยนสี
เพื่อบอกผู้ใช้เวลากาลังอยู่ที่หัวข้อนี้
Changed State

82. สถำนะอื่นๆ
นอกจากนี้ยังมีสถานะอื่นๆ ที่มีการใช้สีเพื่อบ่งบอกถึงสถานะต่างๆ ดังนี้
Others State
Enable
สถานะปกติที่บอกว่าส่วนประกอบนี้สามารถใช้งานได้

83. สถำนะอื่นๆ
นอกจากนี้ยังมีสถานะอื่นๆ ที่มีการใช้สีเพื่อบ่งบอกถึงสถานะต่างๆ ดังนี้
Others State
Disabled
สถานะที่บอกว่าส่วนประกอบนี้ไม่สามารถใช้งานได้

84. สถำนะอื่นๆ
นอกจากนี้ยังมีสถานะอื่นๆ ที่มีการใช้สีเพื่อบ่งบอกถึงสถานะต่างๆ ดังนี้
Others State
Hover
สถานะที่เกิดขึ้นเมื่อผู้ใช้นาเมาส์ไปวางไว้บนส่วนประกอบนั้นๆ
สถานะนี้จะเกิดขึ้นในกรณีที่มีเคอร์เซอร์

85. สถำนะอื่นๆ
นอกจากนี้ยังมีสถานะอื่นๆ ที่มีการใช้สีเพื่อบ่งบอกถึงสถานะต่างๆ ดังนี้
Others State
Focused
สถานะที่เกิดจากผู้ใช้กาลังใช้งานกับส่วนประกอบนั้นๆ

86. สถำนะอื่นๆ
นอกจากนี้ยังมีสถานะอื่นๆ ที่มีการใช้สีเพื่อบ่งบอกถึงสถานะต่างๆ ดังนี้
Others State
Selected
สถานะที่เกิดจากการที่ผู้ใช้ ใช้งานส่วนประกอบพวกตัวเลือกต่าง ๆ

87. สถำนะอื่นๆ
นอกจากนี้ยังมีสถานะอื่นๆ ที่มีการใช้สีเพื่อบ่งบอกถึงสถานะต่างๆ ดังนี้
Others State
Activated
สถานะที่บ่งบอกถึงการใช้งานอยู่ ไม่ว่าจะเป็นค่าเริ่มต้นหรือผู้ใช้เข้าใช้งานด้วยตัวเอง

88. สถำนะอื่นๆ
นอกจากนี้ยังมีสถานะอื่นๆ ที่มีการใช้สีเพื่อบ่งบอกถึงสถานะต่างๆ ดังนี้
Others State
Pressed
สถานะที่บ่งบอกถึงการกดของผู้ใช้

89. สถำนะอื่นๆ
นอกจากนี้ยังมีสถานะอื่นๆ ที่มีการใช้สีเพื่อบ่งบอกถึงสถานะต่างๆ ดังนี้
Others State
Dragged
สถานะที่บ่งบอกการกดลากส่วนประกอบนั้น ๆ

90. สถำนะอื่นๆ
นอกจากนี้ยังมีสถานะอื่นๆ ที่มีการใช้สีเพื่อบ่งบอกถึงสถานะต่างๆ ดังนี้
Others State
On/Off
สถานะแสดงการเปิดและปิดการใช้งานของส่วนประกอบที่มีทางเลือก

91. สถำนะอื่นๆ
นอกจากนี้ยังมีสถานะอื่นๆ ที่มีการใช้สีเพื่อบ่งบอกถึงสถานะต่างๆ ดังนี้
Others State
Error
สถานะที่บ่งบอกการทางานที่ไม่ถูกต้อง ผิดพลาด ของระบบหรือหรือผู้ใช้

92. สถำนะอื่นๆ
นอกจากนี้ยังมีสถานะอื่นๆ ที่มีการใช้สีเพื่อบ่งบอกถึงสถานะต่างๆ ดังนี้
Others State
Alerts
สถานะที่ใช้เพื่อแจ้งข้อมูลที่เกิดขึ้นกับผู้ใช้ หลังจากที่ผู้ใช้ทาอะไรบางอย่างกับ
ส่วนประกอบนั้นๆ โดยสีจะเป็นตัวบ่งบอกถึงชนิดข้อมูลที่ปรากฎขึ้น
Danger
Caution
Suggest
Alert
Success
Info

93. STEP 4 ควำมสำมำรถในกำรเข้ำถึงสี
การใช้สีกับงานออกแบบ User Interface นอกจากการใช้หลักการที่กล่าวไปแล้ว สิ่งสาคัญที่ UI Designer ต้องคานึงถึงก็คือ
ความสามารถในการเข้าถึง (Accessibility) ต่อ UI Element นั้นๆ ประกอบด้วย 2 สิ่ง ได้แก่
Color Accessibility
ผู้ใช้
User
บริบทกำรใช้งำน
Context

94. ผู้ใช้
ผู้ใช้ (User) เป็นใคร กลุ่มคนแบบไหน ผู้ใช้อาจจะมีคนที่ตาบอดสีหรือความสามารถใน
การแยกสีแตกต่างกัน การออกแบบส่วนประกอบของ User Interface ควรจะสามารถ
สร้างความเข้าใจให้ User ได้โดยไม่ผิดเพี้ยน
User

95. บริบทกำรใช้งำน
สถานการณ์ที่ผู้ใช้ใช้งานผลิตภัณฑ์ก็มีผลต่อการใช้งาน Interface เช่น เวลาที่ใช้งาน
กลางวัน กลางคืน หรือใช้งานในที่แสงมากแสงน้อยก็มีผลต่อการรับรู้
Context

96. กำรใช้สีกับควำมสำมำรถในกำรเข้ำถึงข้อมูล
Using Color and Accessibility
ความสามารถในการเข้าถึงสี (Color Accessibility) จะเกิดขึ้นกับองค์ประกอบสองชนิด
ได้แก่ พื้นหลังและข้อความที่นามาถูกใช้งานร่วมกัน
TEXT
Accessible
TEXT
Caution
TEXT
Inaccessible

97. กำรใช้สีกับควำมสำมำรถในกำรเข้ำถึงข้อมูล
Using Color and Accessibility
บางครั้งการไม่ใช้ความสามารถในการเข้าถึงสี (Color Accessibility) ในการใช้สีพื้น
หลังกับตัวอักษร อาจเกิดปัญหากับกับผู้ใช้งานได้ หรือที่เรียกว่า “ข้อความ” จม
Yes Aa Aa Aa Aa
No Aa Aa Aa Aa

98. กำรประยุกต์กฎกำรใช้สีแบบ 60 30 10
ในงำนออกแบบกรำฟิกส่วนประสำนงำนกับผู้ใช้
กฎ 60 30 10 เป็นสิ่งที่ทาให้ UI Designer ใช้อัตราส่วนสีกับส่วนประกอบต่างๆ อย่างลงตัว
ซึ่งเลือกสีตามจิตวิทยาการรับรู้ของมนุษย์ เพราะมนุษย์จะมองเป็นภาพใหญ่ก่อน แล้วค่อยๆ
พิจารณารายละเอียด ทาให้มนุษย์ค่อยๆ ซึมซับการเข้าถึงการออกแบบได้

99. การออกแบบหน้าจออาจไม่จาเป็นต้องใช้กฎนี้เสมอไป ทั้งนี้ขึ้นอยู่กับสิ่งที่ UI Designer
ต้องการสื่อสาร วัตถุประสงค์ของงาน และเนื้อหาของหน้าแต่ละหน้า
กำรประยุกต์กฎกำรใช้สีแบบ 60 30 10
ในงำนออกแบบกรำฟิกส่วนประสำนงำนกับผู้ใช้

100. ตัวอย่ำงกำรใช้กฎ 60 30 10
60 30 10
Background Primary Secondary

101. ตัวอย่ำงกำรใช้กฎ 60 30 10
60
(Background)
คือสีที่ใช้ในอัตราส่วนมากที่สุด ส่วนใหญ่จะใช้เป็นสีใน Greyscale เป็นสีกลาง
ที่สามารถใช้ได้กับสีอื่นๆ เพื่อส่งเสริมให้สีที่อัตราส่วนน้อยมีความสาคัญและเกิด
ความแตกต่างมากขึ้น
30
60
10

102. ตัวอย่ำงกำรใช้กฎ 60 30 10
30
(Primary Color)
คือสีที่ใช้อันดับรองลงมา และจะใช้กับ Element ที่ใช้ในการสื่อความ เช่น Icon, Bar,
Navigation ส่วนใหญ่จะเป็นสี Theme หลักๆใน Graphic User Interface
30
60
10

103. ตัวอย่ำงกำรใช้กฎ 60 30 10
10
(Secondary Color)
จะใช้กับ Element ที่ต้องการให้เกิดการปฏิสัมพันธ์หรือ Call To Action โดยจะใช้สีนี้
เพื่อสร้างความแตกต่างอย่างเด่นชัด
30
60
10

104. เครื่องมือช่วยพัฒนำกำรใช้สี
Color Development Tools for UI Designer
Color Tool -
Material Design
Color Safe Colorable Toolness Github
COLOR SAFE Aa

105. Color Tool - Material Design
เข้าไปที่ m2.material.io/resources/color
นอกจากเรื่องสีแล้ว ยังมี Material Design อื่นๆ ให้ UI Designer เลือกใช้มากมาย

106. Color Safe
เข้าไปที่ colorsafe.co

107. Colorable
เข้าไปที่ colorable.jxnblk.com

108. CREDITS: This presentation template was created by Slidesgo, and includes icons by Flaticon, and
infographics & images by Freepik
Toolness Github
เข้าไปที่ toolness.github.io/accessible-color-matrix

109. เครื่องมือช่วยสร้ำงชุดสี
Color Guide Tools
Adobe Color My Color Space Paletton Sessions College

110. Adobe Color
เข้าไปที่ color.adobe.com/create

111. My Color Space
เข้าไปที่ https://mycolor.space/

112. Paletton
เข้าไปที่ paletton.com

113. Sessions College
เข้าไปที่ sessions.edu/color-calculator