Blockdit Logo
Blockdit Logo (Mobile)
สำรวจ
ลงทุน
คำถาม
เข้าสู่ระบบ
มีบัญชีอยู่แล้ว?
เข้าสู่ระบบ
หรือ
ลงทะเบียน
Simple Journey
•
ติดตาม
17 พ.ค. 2020 เวลา 15:04 • ธุรกิจ
3 mins Read - การเลือกใช้สียังไงให้เหมาะกับกราฟ สำคัญยังไง?
Important of choosing Colour with Graphs
ในบทความนี้เรามารู้จักการใช้โทนสีกับกราฟกันนน !
บทความก่อนๆโน้น เราเคยเขียนเรื่องของการเลือกใช้สีกับจิตวิทยาในเชิงการตลาดเนอะ คราวนี้เราจะมาในส่วนของการพรีเซ้นข้อมูลด้วยกราฟกันน
ทำไมถึงต้องรู้เรื่องการใช้สีกับกราฟน้ะ ?
- การเลือกสีที่เกี่ยวของกับข้อมูลที่จะนำเสนอ มักจะช่วยทำให้ผู้อ่าน หรือผู้เข้าร่วมประชุมเข้าใจได้ง่ายขึ้น
- การเลือกกลุ่มสีที่ผิดเนี่ย ก็ไม่ต่างอะไรกับที่เราเขียนหนังสือด้วยลายมือที่หวัดเลยละะะะ
โดยเราจะมาพูดถึง แถบสีหรือกลุ่มสี(Palette) ประมาณ 3 แถบที่หลักๆน้ะเพื่อนๆ
1. Qualitative palettes
2. Sequential palettes
3. Diverging palettes
และใน 1 แถบสีเอง ไม่ควรจะมีสีเกิน 10 สีที่เราจะเลือกใช้นะ
1. Qualitative palettes
การเลือกใช้แถบสีหรือกลุ่มโทนนี้
- ข้อมูลที่จะใช้ในแต่ละตัว ต้องเป็นข้อมูลที่ไม่เกี่ยวข้องกัน เพราะว่าโทนสีมันค่อนข้างตัดกันชัดเจนน
- ลักษณะจะเป็นสีอ่อนและสีเข้มสลับกัน เพื่อการอ่านข้อมูลที่ง่าย
- เทคนิคดีๆคือจะมีการใช้ลักษณะของความเข้มและความอ่อนของสี (lightness and saturation) สำหรับข้อมูลที่ไม่เกี่ยวข้องกันแต่อาจจะคล้ายคลึงกัน อาจจะเป็นสีทีโทนเดียวกันเช้นสีฟ้า สีน้ำเงิน เอ....จะงงไม๊น้าเพื่อนๆ
แล้วมันนำไปใช้ยังไงน้า ?
- ส่วนใหญ่ก็จะนำเอาไปใช้กับกราฟวงกลมที่มีข้อมูลหลากหลาย
- หรือเพื่อนๆจะนำมาใช้กราฟเส้นก็ได้เหมือนกันนะ (Line Graph)
- แต่สีควรจะตัดกันให้มากที่สุด ไม่งั้นละก็คนอ่าน งง น่าดูเลย
2. Sequential palette
การเลือกใช้แถบสีหรือกลุ่มโทนนี้
- เป็นการแสดงข้อมูลที่แถบสีเดียวกัน เรียงจากอ่อนหรือค่าน้อย ไปยังเข้มหรือค่ามาก
- ตรงนี้จะทำให้ผู้อ่านเนี่ย สามารถเข้าใจถึงปริมาณความหนาแน่นในบริเวณนั้นๆ
แล้วมันนำไปใช้ยังไงน้า ?
- ส่วนใหญ่ก็นำไปใช้กับการแสดงผลข้อมูลทั้งแกน X และ แกะน Y เพื่อที่จะแสดงข้อมูลความหนาแน่นของประชากร เช่นนน ภาพด้านล่าง แสดงถึงปริมาณนั้นฝนในแต่ละเดือน และแต่ละปี
- ยิ่งสีเข้มมากแสดงว่าในเดือนนั้น ของปีนั้นๆเนี่ย มีปริมาณน้ำฝนเยอะ เท่านั้นเองงง
3. Diverging palette
การเลือกใช้แถบสีหรือกลุ่มโทนนี้
- ถ้าความกว้างข้อมูลของเรา มันกว้างมากตั้งแต่ข้อมูลที่มีตัวเลขติดลบ (-) จนถึง 100% (+) เนี่ย การที่เราใช้ 2 โทนสีที่ตัดกันเนี่ย ก็จะช่วยทำให้ผู้อ่านตีความได้ง่ายขึ้นนน้ะะ
- ส่วนใหญ่ข้อมูลตรงกลางที่มีค่าเป็น "0" หรือ อาจจะเป็นค่าAverage สีก็เป็นสีที่อ่อนที่สุด
แล้วมันนำไปใช้ยังไงน้า ?
- เพื่อนๆสามารถนำไปใช้กับการไฮไลท์บนแผนที่ได้ด้วยนะ
- เราว่า Concept เค้าไม่ยากเท่าไรเนอะ
เพื่อนๆอาจจะสงสัยไม๊ว่า แล้วสีอะไรมันตรงข้ามกับสีไหน ที่ใช้แล้วไม่ดูน่ารำคาญ ??
ตัวอย่างโทนสีที่แตกต่างและตัดกัน
ชะแว้บบ ตาลายนิดนึง 5555 แต่เราว่าน่าจะเป็น References ให้เพื่อนๆนำไปใช้ในชีวิตจริงแน่นอน
4. Discrete palette
จริงๆอันนี้เราไม่นับเป็นกลุ่มโทนหลักน้ะ เพราะว่าเค้าไม่ได้มี Pattern ตายตัว เป็นแค่การเน้นข้อมูลเท่านั้นเอง
การเลือกใช้แถบสีหรือกลุ่มโทนนี้
- จริงๆอันนี้เค้าจะเอาไว้เน้นข้อมูลที่เป็น Outlier
- Outlier ก็คือเหมือนแบบ มีจำนวนที่ น้อยที่สุด และ มากที่สุด จะแตกต่างอยู่มากเลย เช่นแบบ มีคะแนนของเพื่อนๆ 10 คน, โดยที่ค่าเฉลี่ยหรือมีนของกลุ่มเนี่ย อยู่ที่ 5.... แต่ว่าๆ ! ดันมีคนนึงที่ได้ 10 เต็ม ! และมีอีกคนที่ได้แค่ 2 คะแนน..... 2 คนนี้เราก็จะเรียกว่า Outlier นั้นเองง
แล้วมันนำไปใช้ยังไงน้า ?
- ถ้าจะให้เห็นชัดควรเป็นภาพดาต้าที่ค่อนข้างใหญ่และซับซ้อน ในทีนี้เราก็จะยกตัวอย่างของแผนที่ของอเมริกาเหนือละกันน้า จะได้เห็นง่ายที่สุด
- เพื่อนๆจะเห็นว่าข้อมูลของเค้าเนี่ย อาจจะแบ่งได้เป็น รัฐ หรือแม้แต่ อำเภอใหญ่ในรัฐนั้นๆ เพื่อที่เราจะสามารถไฮไลท์ตัวเลขหรือจำนวนที่เป็น Outlier ออกมาได้ชัด
อันนี้ภาพตัวอย่างเฉยๆน้า ไม่ต้องสนใจข้อมูลเด้อออ
ข้อเสียของ Discrete Colour
- ความสามารถของคนเราในการแยกจำแนกสีเนี่ย ค่อนข้างยากกว่าจำแนกความสั้นความยาวเนอะ เพื่อนๆบางคน อาจจะไม่สามารถแยกบางสีได้ โดยเฉพาะ เขียวหรือแดง แล้วยิ่งมีการเน้นความเข้มความอ่อนที่ไม่ได้เรียงกันอีก ยิ่งดูยากหน่อยเนอะ
ข้อควรระวังสำหรับการใช้โทนสี สำหรับการทำดาต้า หรือ Graph
1. อย่าใช้สีที่ไม่จำเป็นเยอะ !
อย่างข้อที่ 3 เนอะ Diverging
พอเพื่อนๆเห็นตัวอย่างการไล่สีแล้วอาจจะรู้สึกชอบ และอาจจะใช้กัน
แต่เราจะบอกว่า ควรใช้ต่อเมื่อมันจำเป็น และสามารถเน้นข้อมูลจนให้ได้ชัดดน้า
ถ้าไม่อย่างนั้นก็ ใช้สีที่แตกต่างกันแค่ 2 สีไปเลยดีกว่าา
2. พยายามใช้สีให้เหมือนกัน สำหรับข้อมูลเดียวกัน !
อ้ะๆ อย่าเพิ่งงงนะเพื่อนๆ เราอาจเเขียนงง ขอพูดเพิ่มเติมแทน
ถ้าเพื่อนๆจะใช้กราฟแสดงผลข้อมูลหลายๆกราฟ แต่เป็นพื้นฐานตัวแปรข้อมูลเดียวกัน ควรจะใช้สีให้เหมือนกันน้ะ ! เพื่อกันความสับสนของผู้อ่านน
แบบข้างล่างนี้มีการโชว์ข้อมูลทั้ง Line and Bar Graph โดยพูดถึงดาต้าชุดเดียวกัน ก็ใช้สีให้เหมือนกันได้เลยยย
3. อย่าลืมบอกความหมายของสีแต่ละสี หรือข้อมูลชื่อของตัวแปรนะเพื่อนๆ
เช่นถ้าเป็นความหมายก็สมมุติว่า สีม่วงหมายถึง "พอใช้.
สีเขียวอ่อน คือ "ดีม๊ากกมาก"
4. เรื่องของ Color Blind
- 4% ของคนทั้งโลกมีอาการตาบอดสีมาแต่ตั้งแต่กำเนิดด และส่วนใหญ่เพศชายจะเยอะกว่าเสียด้วยนา
- ส่วนใหญ่จะมีอาการบอดของสี เขียวและแดง หรือ น้ำเงินและเหลือง ซึ่งพวกเค้าจะเห็นเป็นสีใดสีหนึ่งเป็นสีเดียวกันเลยยยย
นี่ๆ เค้าน่าจะมองเห็นเป็นแบบนี้นะ เพราะงั้นพูดได้เลยว่าเค้าจะกราฟเป็นสีเดียวกัน
สุดท้ายยย ถ้าเพื่อนๆกังวลเรื่องการเลือกสี ละก็
เรามีตัวช่วยตามลิ้งข้างล่างเลยยย หลังว่าคงจะช่วยเพื่อนๆได้น้ะ :)
https://learnui.design/tools/data-color-picker.html
https://lokeshdhakar.com/projects/color-thief/
หวังว่าบทความนี้จะช่วยเพิ่มสาระความรู้ เป็นอาหารสมองได้เหมือนเดิมน้าาา
ถ้าเพื่อนๆมีประสบการณ์ หรือ เทคนิคการใช้สีกับการพรีเซ้นและกราฟเนี่ย
อย่าลืมแชร์ในคอมเม้นได้น้า เรารออ่านจากเพื่อนๆอยู่เหมือนกัน :):)
References
https://medium.com/nightingale/how-to-choose-the-colors-for-your-data-visualizations-50b2557fa335
https://vanseodesign.com/web-design/hue-saturation-and-lightness/
https://chartio.com/learn/charts/pie-chart-complete-guide/
31 บันทึก
33
8
17
ดูเพิ่มเติมในซีรีส์
All About a Marketing World - มาเรียนรู้เกี่ยวกับการตลาดในทุกๆมุมมองกัน !
[5 mins Series] Psychology of Colour - มาเจาะลึกกับเรื่องของสีและจิตวิทยากัน
31
33
8
17
โฆษณา
ดาวน์โหลดแอปพลิเคชัน
© 2024 Blockdit
เกี่ยวกับ
ช่วยเหลือ
คำถามที่พบบ่อย
นโยบายการโฆษณาและบูสต์โพสต์
นโยบายความเป็นส่วนตัว
แนวทางการใช้แบรนด์ Blockdit
Blockdit เพื่อธุรกิจ
ไทย