Brand Guidelines
คู่มือ Digital CI เป็นเหมือนเข็มทิศและมาตรฐานสำคัญที่จัดทำ โดยสายงาน นวัตกรรม สร้างสรรค์และการออกแบบดิจิทัล โดยมีวิสัยทัศน์ในการขับเคลื่อนแบรนด์ให้ทัน สมัย เข้าถึงง่าย และเป็นที่จดจำในโลกดิจิทัลที่เปลี่ยนแปลงอย่าง รวดเร็ว ทุกส่วนงานจะสามารถทำงานร่วมกัน ได้อย่างราบรื่น เพื่อส่งมอบประสบการณ์ที่มีคุณภาพสูงสุดให้กับ ผู้ใช้งาน
ในคู่มือนี้ คุณจะได้เรียนรู้เกี่ยวกับองค์ประกอบหลักของ การออกแบบดิจิทัล เช่น โลโก้, โทนสี, รูปแบบตัวอักษร, ภาพประกอบและภาพถ่าย, ไอคอน, การนำเสนอข้อมูลด้วยภาพ (Data Visualization), และโครงสร้างการจัดวาง (Layout & Grid) ซึ่งทั้งหมดนี้เป็นหัวใจสำคัญในการ สร้างอัตลักษณ์และประสบการณ์ที่ดีให้กับผู้ใช้งาน
คู่มือ Digital CI นี้เป็นเครื่องมือที่ช่วยให้การสร้างสรรค์ ประสบการณ์ดิจิทัลของไทยประกันชีวิต เป็นไปในทิศทางเดียวกันและมีประสิทธิภาพ ด้วยการกำหนดมาตรฐานที่ชัดเจนในทุกองค์ ประกอบ ของการออกแบบเพื่อให้แบรนด์สื่อถึงความ มั่นคงและการดูแลได้ อย่างแท้จริง ในโลกดิจิทัล
Clear Space
Logo
หัวใจและหน้าตาของแบรนด์
โลโก้คือหัวใจและหน้าตาของแบรนด์ เป็นสัญลักษณ์แห่งความมั่นคงและตัวตนของไทยประกันชีวิตที่ผู้ใช้งานจดจำได้ในทุกจุดสัมผัส ส่วนนี้พาไปทำความเข้าใจการใช้งานโลโก้ทั้งเวอร์ชันภาษาไทยและอังกฤษให้ถูกหลัก ตั้งแต่โครงสร้างกริด (Grid Structure) พื้นที่ปลอดภัย (Clear Space) การจัดวางตำแหน่ง ไปจนถึงการทำ Favicon และรูปแบบโลโก้สำหรับสถานการณ์ต่าง ๆ การใช้โลโก้ให้ถูกต้องและสม่ำเสมอในทุกแพลตฟอร์มดิจิทัลคือก้าวแรกของการสร้างการจดจำและความน่าเชื่อถือให้กับแบรนด์
Ocean Depths
Hex
#007AC2
RGB
0, 122, 194
FieryScarlet
Hex
#E42313
RGB
228, 35, 19
MidnightBlue
Hex
#2D3884
RGB
45, 56, 132
MidnightBlue
Hex
#FFFFFF
RGB
255, 255, 255
Clear Space
Color
กำหนดอัตลักษณ์ด้วยพลังแห่งสี
สีคือภาษาแรกที่ผู้ใช้งานรับรู้ก่อนจะอ่านข้อความใด ๆ และเป็นเครื่องมือสำคัญในการสื่อบุคลิกความมั่นคงและอบอุ่นของไทยประกันชีวิต ส่วนนี้กำหนดชุดสีหลัก (Primary Colors) อย่าง Ocean Depths, Skyline Blue, Fiery Scarlet และ Midnight Blue พร้อมชุดสีรอง (Secondary Colors) สำหรับเพิ่มมิติในการออกแบบ โดยจัดวางเป็นระบบสีที่รองรับการทำงานแบบ Design System เพื่อให้ทุกหน้าจอและทุกทีมหยิบไปใช้ได้อย่างเป็นมาตรฐานเดียวกัน การใช้สีอย่างมีระบบช่วยให้แบรนด์ดูสอดคล้อง อ่านง่าย และเข้าถึงได้ในทุกบริบท
โครงสร้างของ Branding สำหรับ TLI (ไทยประกันชีวิต) ใช้ Design System เป็นแกนหลัก ไปปรับใช้กับส่วนประกอบต่างๆ โครงสร้างนี้แบ่งออกเป็น 2 ธีมสี (Theme) ถูกจัดแบ่งตามวัตถุประสงค์การ ใช้งาน
Global: เป็นธีมที่ใช้กับผลิตภัณฑ์หลักของแบรนด์ ให้ความรู้สึกที่เป็นทางการ และน่าเชื่อถือ
Lifestyle: เป็นธีมสีที่ใช้เฉพาะกับผลิตภัณฑ์ที่มีความผ่อนคลายและเข้าถึงง่ายยิ่งขึ้น
ระบบการออกแบบ (Design System) ของ TLI ยังรองรับทั้งโหมดมืด (dark mode) และโหมดสว่าง (light mode) โดยมีการอ้างอิงจากสีหลักของแบรนด์ เพื่อรักษา ความสม่ำเสมอของภาพลักษณ์ในทุกแพลตฟอร์ม (ดูรายละเอียด เพิ่มเติม Design System ของ ไทยประกันชีวิต)
Primary Color
โครงสร้างของ Branding สำหรับ TLI (ไทยประกันชีวิต) ใช้ Design System เป็นแกนหลัก ไปปรับใช้กับส่วนประกอบต่างๆ โครงสร้างนี้แบ่งออกเป็น 2 ธีมสี (Theme) ถูกจัดแบ่งตามวัตถุประสงค์การ ใช้งาน
Global: เป็นธีมที่ใช้กับผลิตภัณฑ์หลักของแบรนด์ ให้ความรู้สึกที่เป็นทางการ และน่าเชื่อถือ
Lifestyle: เป็นธีมสีที่ใช้เฉพาะกับผลิตภัณฑ์ที่มีความผ่อนคลายและเข้าถึงง่ายยิ่งขึ้น
ระบบการออกแบบ (Design System) ของ TLI ยังรองรับทั้งโหมดมืด (dark mode) และโหมดสว่าง (light mode) โดยมีการอ้างอิงจากสีหลักของแบรนด์ เพื่อรักษา ความสม่ำเสมอของภาพลักษณ์ในทุกแพลตฟอร์ม (ดูรายละเอียด เพิ่มเติม Design System ของ ไทยประกันชีวิต)
ไทยประกันชีวิตได้คัดเลือกชุดสีหลัก 4 สี ที่สะท้อนถึงตัวตนของแบรนด์ ได้แก่:
Our Vision: why we exist
สื่อถึงความมั่นคงและน่าเชื่อถือ ค่าสี RGB: (0, 122, 194), HEX: #007AC2
Skyline Blue:
สื่อถึงความสดใสและเข้าถึงง่าย ค่าสี RGB: (0, 156, 222), HEX: #009CDE
Fiery Scarlet:
สื่อถึงพลังและความกระตือรือร้น ค่าสี RGB: (228, 35, 19), HEX: #E42313
Midnight Blue:
สื่อถึงความลึกซึ้งและความเป็นมืออาชีพ สี RGB: (45, 56, 132), HEX: #2D3884
Typography
เสียงและสไตล์การสื่อสาร
ตัวอักษรคือเสียงของแบรนด์ในรูปแบบข้อความ ที่ทำให้การสื่อสารอ่านง่าย ชัดเจน และมีลำดับความสำคัญที่ดี ส่วนนี้กำหนดฟอนต์หลักของไทยประกันชีวิตทั้งภาษาไทยและอังกฤษ (เช่น DB Heavent, Sarabun, DB Ozone X) พร้อมระบบขนาดตัวอักษร (Type System) ตั้งแต่หัวเรื่องใหญ่สุด HEADING-2XL ไปจนถึงข้อความประกอบขนาดเล็ก รวมถึงแนวทางการเว้นระยะและการนำไปใช้จริงบนเว็บไซต์และแอปพลิเคชัน การวางระบบตัวอักษรที่ชัดเจนช่วยให้ผู้ใช้งานกวาดสายตาหาข้อมูลได้เร็วและได้ประสบการณ์การอ่านที่ราบรื่นในทุก Device
TLI typeface
AaBb กขคง
Name: DB Ozone X
Weight: Bold / Medium / Regular
by DB Designs Co., Ltd.
DB Ozone X Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstvwxyz
กขฃคฅฆงจฉชซฌญฎฏฐฑฒณดตถทธนบปผฝพฟภมยรลวศษสหฬอฮ
0123456789!”#$%&/()@=?,-
DB Ozone X Medium
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstvwxyz
กขฃคฅฆงจฉชซฌญฎฏฐฑฒณดตถทธนบปผฝพฟภมยรลวศษสหฬอฮ
0123456789!”#$%&/()@=?,-
DB Ozone X Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstvwxyz
กขฃคฅฆงจฉชซฌญฎฏฐฑฒณดตถทธนบปผฝพฟภมยรลวศษสหฬอฮ
0123456789!”#$%&/()@=?,-
DB Ozone X Light
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstvwxyz
กขฃคฅฆงจฉชซฌญฎฏฐฑฒณดตถทธนบปผฝพฟภมยรลวศษสหฬอฮ
0123456789!”#$%&/()@=?,-
TLI typeface
AaBb กขคง
Name: Sarabun
Weight: Bold / Medium / Regular
by Google
Sarabun Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstvwxyz
กขฃคฅฆงจฉชซฌญฎฏฐฑฒณดตถทธนบปผฝพฟภมยรลวศษสหฬอฮ
0123456789!”#$%&/()@=?,-
Sarabun Medium
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstvwxyz
กขฃคฅฆงจฉชซฌญฎฏฐฑฒณดตถทธนบปผฝพฟภมยรลวศษสหฬอฮ
0123456789!”#$%&/()@=?,-
Sarabun Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstvwxyz
กขฃคฅฆงจฉชซฌญฎฏฐฑฒณดตถทธนบปผฝพฟภมยรลวศษสหฬอฮ
0123456789!”#$%&/()@=?,-
Sarabun Light
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstvwxyz
กขฃคฅฆงจฉชซฌญฎฏฐฑฒณดตถทธนบปผฝพฟภมยรลวศษสหฬอฮ
0123456789!”#$%&/()@=?,-
TLI typeface
AaBb กขคง
Name: DB Heavent
Weight: Bold / Medium / Regular
by DB Designs
DB Heavent Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstvwxyz
กขฃคฅฆงจฉชซฌญฎฏฐฑฒณดตถทธนบปผฝพฟภมยรลวศษสหฬอฮ
0123456789!”#$%&/()@=?,-
DB Heavent Medium
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstvwxyz
กขฃคฅฆงจฉชซฌญฎฏฐฑฒณดตถทธนบปผฝพฟภมยรลวศษสหฬอฮ
0123456789!”#$%&/()@=?,-
DB Heavent Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstvwxyz
กขฃคฅฆงจฉชซฌญฎฏฐฑฒณดตถทธนบปผฝพฟภมยรลวศษสหฬอฮ
0123456789!”#$%&/()@=?,-
DB Heavent Light
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstvwxyz
กขฃคฅฆงจฉชซฌญฎฏฐฑฒณดตถทธนบปผฝพฟภมยรลวศษสหฬอฮ
0123456789!”#$%&/()@=?,-
Illustration & Photography
ภาพสื่ออารมณ์ เสริมเรื่องเล่า
ภาพประกอบและภาพถ่ายคือเครื่องมือถ่ายทอดเรื่องราวและอารมณ์ของแบรนด์ให้เข้าใจง่ายตั้งแต่ก่อนที่ผู้ใช้งานจะอ่านข้อความ ส่วนนี้วางแนวทางการใช้ภาพประกอบสไตล์ Semi-Flat ที่อบอุ่นและเป็นมิตร ครอบคลุมตัวละครหลักอย่างลูกค้า ผู้สูงอายุ ตัวแทน และพนักงาน พร้อมชุดสีและสัดส่วนตัวละคร (Characters Guideline) รวมถึงหลักการเลือกภาพถ่ายแนว People / Lifestyle ที่ดูจริงและเรียบง่าย การใช้ภาพให้ไปในทิศทางเดียวกันช่วยสร้างความรู้สึกที่สอดคล้องกับตัวตนของไทยประกันชีวิตในทุกสื่อดิจิทัล
Human-Centered
Illustration ถ่ายทอดผู้คนและสถานการณ์จากชีวิตจริง โดยให้ความสำคัญกับ ความหลากหลายของผู้ใช้งาน ทั้งลูกค้า พนักงาน ตัวแทน ผู้สูงอายุ และครอบครัว ผ่านรูปทรงที่เรียบง่าย สีสันอบอุ่น และสัดส่วนที่เป็นมิตร เพื่อสร้างความรู้สึก ใกล้ชิดและสะท้อนแนวคิด "การดูแลทุกช่วงของชีวิต"
Friendly & Approachable
ภาพประกอบควรสื่อสารอย่างเป็นกันเอง เข้าถึงง่าย และมองเข้าใจได้ทันที ลดรายละเอียดที่ไม่จำเป็น ใช้องค์ประกอบที่สะอาดและสมดุล เพื่อช่วยให้ผู้ใช้งานโฟกัส กับข้อมูลสำคัญ พร้อมสร้างประสบการณ์ที่รู้สึกอบอุ่นและเป็นมิตรในทุก Touchpoint
Consistent
ตัวละคร สี สัดส่วน น้ำหนักเส้น และองค์ประกอบของภาพทั้งหมดถูกออกแบบ บนระบบเดียวกัน เพื่อให้ภาพประกอบมีเอกลักษณ์ที่สอดคล้องกัน ในทุกผลิตภัณฑ์และทุกแพลตฟอร์ม ไม่ว่าจะเป็น Mobile Application, Website, Dashboard หรือสื่อประชาสัมพันธ์ดิจิทัล
Purposeful
ทุกภาพประกอบมีหน้าที่สนับสนุนการสื่อสาร ไม่ใช่เพียงเพื่อการตกแต่ง ภาพควรช่วยอธิบายข้อมูล สร้างความเข้าใจ และลดความซับซ้อนของเนื้อหา โดยคงความชัดเจน ความน่าเชื่อถือ และช่วยให้ผู้ใช้งานได้รับประสบการณ์ที่ดีที่สุด
Characters Guideline
Customer : ลูกค้าทั่วไป
Character กลุ่มลูกค้าออกแบบเพื่อสะท้อนผู้ใช้งานทั่วไปที่มีความหลากหลาย โดยใช้รูปแบบ Semi-Flat Illustration ที่เน้นความเรียบง่าย เป็นมิตร และทันสมัย พร้อมใช้ระบบ Head Unit เพื่อรักษาสัดส่วนของตัวละครให้มีความสม่ำเสมอ และสามารถใช้งานร่วมกันได้ในทุก Illustration
Character Specification
- ใช้ Head Unit เป็นหน่วยอ้างอิงของสัดส่วนร่างกาย
- Adult Male : 7.5 Head Unit
- Adult Female : 7 Head Unit
- ใช้ระบบ Grid เดียวกันในทุก Character รักษาสัดส่วนของ Character ให้คงที่
Character Anatomy ใช้รูปทรงเรขาคณิตโค้งมนและลดรายละเอียดที่ไม่จำเป็น เพื่อสร้าง ภาพลักษณ์ที่เป็นมิตร เรียบง่าย และอ่านได้ชัดเจน พร้อมรักษา ความสม่ำเสมอ ของโครงสร้างและสัดส่วน เพื่อให้ Character ทุกตัวมีเอกลักษณ์เดียวกัน ในทุกภาพประกอบ
Character Colors
Character กลุ่มลูกค้าใช้ โทนสีน้ำเงินเป็นสีหลัก (Primary Blue) เพื่อสะท้อน ภาพลักษณ์ที่น่าเชื่อถือ เป็นมิตร และทันสมัย ซึ่งเป็นบุคลิกหลักของแบรนด์ โดยใช้สีดำ เป็นองค์ประกอบรองสำหรับกางเกง รองเท้า และเส้นผม เพื่อเพิ่มความสมดุลของภาพ ขณะที่สีผิวใช้โทนมาตรฐานของ Character System เพื่อให้ตัวละครทุกกลุ่ม มีความสอดคล้องกัน
Customer : ลูกค้าผู้สูงอายุ
Character กลุ่มลูกค้าออกแบบเพื่อสะท้อนผู้ใช้งานทั่วไปที่มีความหลากหลาย โดยใช้รูปแบบ Semi-Flat Illustration ที่เน้นความเรียบง่าย เป็นมิตร และทันสมัย พร้อมใช้ระบบ Head Unit เพื่อรักษาสัดส่วนของตัวละครให้มีความสม่ำเสมอ และสามารถใช้งานร่วมกันได้ในทุก Illustration
Character Specification
- ใช้ Head Unit เป็นหน่วยอ้างอิงของสัดส่วนร่างกาย
- Adult Male : 7.5 Head Unit
- Adult Female : 7 Head Unit
- ใช้ระบบ Grid เดียวกันในทุก Character รักษาสัดส่วนของ Character ให้คงที่
Character Anatomy ใช้รูปทรงเรขาคณิตโค้งมนและลดรายละเอียดที่ไม่จำเป็น เพื่อสร้าง ภาพลักษณ์ที่เป็นมิตร เรียบง่าย และอ่านได้ชัดเจน พร้อมรักษา ความสม่ำเสมอ ของโครงสร้างและสัดส่วน เพื่อให้ Character ทุกตัวมีเอกลักษณ์เดียวกัน ในทุกภาพประกอบ
Character Colors
Character กลุ่มลูกค้าใช้ โทนสีน้ำเงินเป็นสีหลัก (Primary Blue) เพื่อสะท้อน ภาพลักษณ์ที่น่าเชื่อถือ เป็นมิตร และทันสมัย ซึ่งเป็นบุคลิกหลักของแบรนด์ โดยใช้สีดำ เป็นองค์ประกอบรองสำหรับกางเกง รองเท้า และเส้นผม เพื่อเพิ่มความสมดุลของภาพ ขณะที่สีผิวใช้โทนมาตรฐานของ Character System เพื่อให้ตัวละครทุกกลุ่ม มีความสอดคล้องกัน
ภาพประกอบพร้อมพื้นหลังและวัตถุ (TBC Wording)
Iconography
ภาษาภาพสากลที่เข้าใจง่าย
ไอคอนคือภาษาภาพที่สื่อความหมายได้ในทันที และช่วยให้ผู้ใช้งานใช้งานอินเทอร์เฟซได้ง่ายขึ้นโดยไม่ต้องพึ่งข้อความมาก ส่วนนี้กำหนดโครงสร้างกริดของไอคอน (Icon Grid) หลักการเรื่องเส้น (Stroke) มุมโค้ง (Radius) และระยะห่าง (Space) เพื่อให้ไอคอนทุกตัวดูเป็นชุดเดียวกัน พร้อมระบบขนาด (24px, 32px, 48px) สไตล์เส้น และการนำไปใช้ในสถานะต่าง ๆ เช่น หน้าว่างข้อมูลหรือหน้าขออนุญาต การออกแบบไอคอนอย่างเป็นระบบช่วยให้ UI ดูสะอาด เข้าใจง่าย และคงเอกลักษณ์ของแบรนด์
Icon Grid Structure : โครงสร้างกริด
Construction : ใช้โครงสร้างการวาง Icon บน Grid ขนาด 32x32 px โดยมีความหนา ของเส้น 2 px และเส้นควรเริ่มต้นและสิ้นสุดด้วยมุมมน (rounded-end) เสมอ เมื่อใช้เส้น ทแยงมุม ควรใช้มุม 45 70 90 และ 140 องศา เพื่อให้ดูคมชัดยิ่งขึ้น
Grid Type : กริดสี่เหลี่ยมจัตุรัสขนาดเท่ากัน ทำหน้าที่เป็นโครงสร้าง พื้นฐานในการ
จัดวางองค์ประกอบต่างๆ ของ Icon
Keylines & Angles :
70°: เส้นเอียงทำมุม 70 องศาจากแนวระนาบ ใช้กำหนดทิศทางและความเอียง ของบางส่วนของ Icon เช่น ด้านบนของตัวจดหมาย
140°: เส้นเอียงทำมุม 140 องศาจากแนวระนาบ (หรือ 40 องศาจากแนวตั้ง) ใช้กำหนด ทิศทางและความเอียงของอีกด้านหนึ่งของตัวจดหมาย สัมพันธ์กับเส้น 70 องศา
90°: เส้นแนวตั้งตรง ทำมุม 90 องศา ใช้เป็นแกนอ้างอิงในการจัดวางองค์ประกอบต่างๆ และสร้างสมดุลให้กับ Icon
Radius: 1px แสดงถึงการใช้เส้นโค้งที่มีรัศมี 1 px ที่มุมหรือส่วนโค้งของ Icon เพื่อให้ Icon ดูมนและนุ่มนวลขึ้น
Stroke: 2px แสดงถึงความหนาของเส้นขอบของ Icon ที่มีความหนา 2 px ทำให้ Icon ดูโดดเด่นและชัดเจน
Space: 3px แสดงถึงระยะห่าง 3 px ซึ่งอาจเป็นช่องว่างระหว่างองค์ประกอบต่างๆ ภายใน Icon หรือระยะห่างระหว่าง Icon กับองค์ประกอบอื่นๆ ในการจัดวางจริง
ข้อควรจำ:
โครงสร้างกริดเป็นเพียงแนวทางเบื้องต้นในการออกแบบ Icon ซึ่งอาจมีการ ปรับเปลี่ยน หรือเพิ่มเติมรายละเอียดได้ตามความเหมาะสม
การใช้ Grid ในการออกแบบ Icon มีประโยชน์อย่างมากในการสร้างความสอดคล้อง ความสมดุล และความเป็นระเบียบให้กับ Icon ซึ่งจะส่งผลต่อความน่าสนใจ
Sizing : ขนาดของ ICON
xs
size : 12
sm
size : 16
ms
size : 20
md
size : 24
lg
size : 32
xl
size : 48
2xl
size : 60
การใช้ไอคอนในงานออกแบบ โดยมุ่งเน้นที่ขนาดและรูปแบบ เพื่อให้มั่นใจถึง ความสอดคล้องและเป็นมาตรฐานของไอคอนที่ใช้ในทุกแพลตฟอร์ม
- ไอคอนขนาดต่างๆถูกกำหนดขึ้นเพื่อใช้ในสถานการณ์ที่แตกต่างกัน เพื่อความเหมาะสมและชัดเจนต่อผู้ใช้งาน
- โดยปกติจะใช้ไอคอนตามความเหมาะสมของพื้นที่การใช้งานและจุดประสงค์
12px
ขนาดเล็กที่สุด 12px
ไอคอนขนาด 12px ถูกออกแบบมาเพื่อใช้งานในพื้นที่จำกัด เช่น รายการข้อมูลขนาดเล็ก ข้อความกำกับ หรือองค์ประกอบ UI ที่ต้องการความกระชับ มักใช้เพื่อแสดงข้อมูลเสริม หรือรายละเอียดเล็กๆ ที่ไม่ต้องการดึงดูดความสนใจมากนัก เนื่องจากมีขนาดเล็ก รายละเอียดของไอคอนจึงควรมีความเรียบง่ายและชัดเจน เพื่อให้มองเห็นได้ง่าย
60px
ขนาดใหญ่ที่สุด 56px
ถูกออกแบบมาเพื่อเน้นย้ำ ฟีเจอร์หลัก ที่ใช้บ่อย หรือต้องการ ความสำคัญโดยใช้ในพื้นที่ ที่ต้องการดึงดูดความสนใจ เช่น ส่วนหัวของหน้า (headers), ส่วนนำเสนอ (hero sections), หรือแสดงไอคอนขนาดใหญ่บนหน้าจอ ไอคอนประเภทนี้จึงสามารถแสดง รายละเอียดที่ซับซ้อนได้มากขึ้น และสร้าง ความโดดเด่นที่สะดุดตาช่วยให้ผู้ใช้สามารถ จดจำและเข้าถึงฟีเจอร์สำคัญได้รวดเร็ว
Style : รูปแบบ
การเลือกสไตล์ไอคอนที่เหมาะสมมีความสำคัญต่อการสร้างประสบการณ์ผู้ใช้ที่ดี สไตล์ต่างๆ เช่น Thin, Regular, Light, Bold, Fill และ Duotone ล้วนมีเอกลักษณ์ และเหมาะกับการใช้งานที่แตกต่างกัน การเลือกสไตล์ควรพิจารณาถึงความสอดคล้อง กับภาพรวมของ UI และความเหมาะสมกับบริบทการใช้งาน
- เลือกสไตล์ไอคอนให้เข้ากับการใช้งานจริง
- ไอคอนและฟังก์ชันต้องสอดคล้องกัน ผู้ใช้เข้าใจได้ทันที
- ไอคอนควรใช้สื่อความหมายอย่างเดียวกัน และสอดคล้องทั่วทั้ง UI
- ไอคอนต้องสื่อความหมายได้ดีในทุกขนาดและทุกบริบท
- Regular
- ลักษณะเส้นที่มีความหนาปานกลาง มีความสม่ำเสมอตลอดทั้งไอคอน
- มีความสมดุลระหว่างความชัดเจนในการมองเห็นและรายละเอียดของไอคอน
- เหมาะสำหรับการใช้งานในสถานการณ์ทั่วไป และเป็นรูปแบบมาตรฐานของระบบ
- สื่อความหมายได้อย่างตรงไปตรงมา มีประสิทธิภาพในการสื่อสาร
- Thin
- ลักษณะเส้นที่มีความหนาปานกลาง มีความสม่ำเสมอตลอดทั้งไอคอน
- มีความสมดุลระหว่างความชัดเจนในการมองเห็นและรายละเอียดของไอคอน
- เหมาะสำหรับการใช้งานในสถานการณ์ทั่วไป และเป็นรูปแบบมาตรฐานของระบบ
- สื่อความหมายได้อย่างตรงไปตรงมา มีประสิทธิภาพในการสื่อสาร
- Light
- มีความหนาของเส้นที่น้อยกว่า Regular แต่มากกว่า Thin
- สร้างความรู้สึกเบา สบายตา แต่ยังคงรักษาความชัดเจนไว้ได้
- เหมาะสำหรับส่วนติดต่อผู้ใช้ที่ต้องการความนุ่มนวลและไม่ดูหนักตาจนเกินไป
- แสดงออกถึงความทันสมัย ความเรียบง่าย และความสะอาดตา
- Bold
- ประกอบด้วยเส้นที่มีความหนาสูง ให้ความรู้สึกแข็งแกร่งและโดดเด่น
- สร้างความรู้สึกมั่นคง น่าเชื่อถือ และดึงดูดความสนใจได้ดี
- เหมาะสำหรับการเน้นย้ำความสำคัญหรือสร้างจุดสนใจบนหน้าจอ
- มีประสิทธิภาพในการมองเห็นแม้อยู่ในระยะไกลหรือในขนาดที่เล็ก
- มีความเหมาะสมอย่างยิ่งสำหรับธีม Lifestyle ที่ต้องการความมีชีวิตชีวา
- Fill
- มีลักษณะเต็มพื้นที่ภายในด้วยสี ทำให้มีความทึบแสงสมบูรณ์
- มีความชัดเจนในการมองเห็นสูงสุด แม้ในขนาดที่เล็กมาก
- เหมาะสำหรับการใช้งานกับไอคอนขนาดเล็กในทั้งสองธีม
- สร้างความรู้สึกหนักแน่นและใช้งานได้ในหลากหลายสถานการณ์
- Regular
- ลักษณะเส้นที่มีความหนาปานกลาง มีความสม่ำเสมอตลอดทั้งไอคอน
- มีความสมดุลระหว่างความชัดเจนในการมองเห็นและรายละเอียดของไอคอน
- เหมาะสำหรับการใช้งานในสถานการณ์ทั่วไป และเป็นรูปแบบมาตรฐานของระบบ
- สื่อความหมายได้อย่างตรงไปตรงมา มีประสิทธิภาพในการสื่อสาร
Data Visualization
การแสดงผลข้อมูลด้วยภาพ
Data Visualization คือการเปลี่ยนข้อมูลดิบที่ซับซ้อนให้กลายเป็นข้อมูลเชิงลึกที่เข้าใจง่ายและขับเคลื่อนการตัดสินใจได้เร็วขึ้น ส่วนนี้รวบรวมรูปแบบกราฟที่แนะนำให้ใช้ เช่น Bar & Column, Line & Progress Bar, Area, Donut, Gauge และ Spider / Radar Chart พร้อมโครงสร้างหลักของแต่ละกราฟ ตั้งแต่ Title แกนข้อมูล ไปจนถึง Legend การเลือกกราฟให้เหมาะกับชนิดข้อมูลและออกแบบให้อ่านง่าย ช่วยให้ผู้ใช้งานเห็นทั้งภาพรวมและรายละเอียดสำคัญได้ในมุมมองเดียว
Structure : โครงสร้าง
โครงสร้างเป็นกรอบกำหนดทิศทางและรูปแบบของการสื่อสาร เพื่อให้การนำเสนอ มีความเป็นระบบ สม่ำเสมอ และเข้าใจง่าย ทั้งในเชิงเนื้อหาและการออกแบบ โดยเน้น ความเรียบง่าย ชัดเจน และสอดคล้องกับอัตลักษณ์ขององค์กร
- Bar & Column Chart (กราฟแท่ง)
ใช้เปรียบเทียบค่าระหว่างหมวดหมู่ หรือเปรียบเทียบ “ผลลัพธ์ vs เป้าหมาย”
ความก้าวหน้าของคุณ
เหลือเวลาอีก 7 วัน
7,000
/
10,000
ก้าว
อัปเดตล่าสุด 01 ม.ค. 2568 00:00 น.
- Line Chart & Progress Bar (กราฟเส้น)
ใช้แสดงแนวโน้มและทิศทางของข้อมูลตามเวลา (Trend & Time Series)
- Area Chart (กราฟพื้นที่)
ใช้เส้นกราฟพร้อมการระบายพื้นที่ใต้เส้น เพื่อสื่อถึง ปริมาณรวมและแนวโน้ม
- Donut Chart (กราฟโดนัท)
ใช้แสดงสัดส่วนของข้อมูลแต่ละกลุ่มต่อภาพรวม โดย Donut Chart เพิ่มความชัดเจนด้วยช่องว่างตรงกลางสำหรับใส่ค่าหลัก
- Gauge Chart (กราฟเกจ / มาตรวัด)
ใช้รูปแบบมาตรวัดเพื่อแสดงสถานะปัจจุบันเมื่อเทียบกับเป้าหมาย เช่น KPI หรือความก้าวหน้า
- Spider / Radar Chart (เรดาร์ชาร์ต)
ใช้เปรียบเทียบข้อมูลหลายมิติพร้อมกันในกราฟเดียว เหมาะสำหรับการประเมิน สมรรถนะหรือคุณภาพ
การเลือกใช้กราฟที่เหมาะสมไม่เพียงช่วยให้ข้อมูลเข้าใจง่ายขึ้น แต่ยังสะท้อนถึงความ เป็นมืออาชีพในการสื่อสารและการออกแบบ การใช้ Data Visualization ตามมาตรฐาน ที่สอดคล้องกับ CI ขององค์กร จะทำให้การนำเสนอมีพลัง น่าเชื่อถือ และสร้าง ประสบการณ์ที่ดีต่อผู้ใช้งาน
Layout & Grid
โครงสร้างการจัดวางและตารางกริด
Layout & Grid คือโครงกระดูกที่ทำให้ทุกหน้าจอดูเป็นระเบียบ อ่านง่าย และปรับตัวได้ดีในทุกขนาดอุปกรณ์ ส่วนนี้กำหนดจุดตัดหน้าจอ (Breakpoint) สำหรับ Responsive Design แบ่งเป็น Mobile, Tablet (แนวตั้ง/แนวนอน) และ Desktop พร้อมประเภทกริดอย่าง Fixed-Width, Fluid / Full-Width และ Contained Layout ที่ประกอบด้วย Columns, Gutters และ Margins การวางระบบกริดที่ชัดเจนช่วยให้การจัดวาง UI สม่ำเสมอ ทำงานร่วมกันระหว่างทีมได้ราบรื่น และมอบประสบการณ์ที่ดีให้ผู้ใช้งาน
Layout & Grid ถูกออกแบบภายใต้แนวคิดที่เน้น ความยืดหยุ่นและความ สม่ำเสมอ ในเวลาเดียวกัน ระบบนี้ทำหน้าที่เป็น โครงสร้าง ี่รองรับการออกแบบ ทุกหน้าจอ และทุกประเภทของเนื้อหา
ช่วยให้ผู้ใช้เข้าใจโครงสร้างได้ทันที และใช้เป็นแนวทางร่วมกันระหว่างทีม
ปรับขนาด (Responsive) ได้อัตโนมัติตามอุปกรณ์ โดยยังคงลำดับและความชัดเจน ของข้อมูล
สนับสนุนการจัดวางเนื้อหา และ Component ให้เป็นระบบ
โครงสร้างที่ดีไม่เพียงช่วยให้อ่านง่ายหรือดูเป็นระเบียบ แต่ยัง สร้างความรู้สึกต่อแบรนด์ ว่ามีมาตรฐาน มั่นคง และใช้งานง่ายอย่างต่อเนื่อง
องค์ประกอบของ Layout & Grid
จุดกำหนดความกว้าง–สูงของหน้าจอที่ใช้ในการออกแบบ Responsive Design เพื่อให้ Layout และองค์ประกอบต่าง ๆ ปรับตัวตามขนาดอุปกรณ์อย่างเหมาะสม แบ่งเป็น 3 ระดับหลัก (Small, Medium, Large) และจำแนกตามประเภทอุปกรณ์ ได้แก่ Mobile, Tablet (Vertical & Horizontal), และ Desktop
Device Type
Orientation
Small (px)
Medium (px)
Large (px)
Mobile
-
320 × 568
375 × 812
430 × 932
Tablet
Vertical
600 × 960
768 × 1024
810 × 1080
Horizontal
960 × 600
1024 × 768
1080 × 810
Desktop
-
1280 × 832
1440 × 1024
1920 × 1080
Breakpoint คือจุดกำหนดขนาดหน้าจอที่ใช้ปรับ Layout ให้ตอบสนองกับอุปกรณ์ต่าง ๆ ได้อย่างเหมาะสม
Mobile → สำหรับหน้าจอเล็ก เน้นการแสดงผลที่กระชับและอ่านง่ายTablet → รองรับทั้งแนวตั้ง–แนวนอน เหมาะกับการอ่านและโต้ตอบที่หลากหลายขึ้นDesktop → สำหรับหน้าจอใหญ่ แสดงผลได้เต็มพื้นที่และรองรับข้อมูลจำนวนมากการกำหนด Breakpoint ที่ชัดเจนช่วยให้การออกแบบ Responsive Design มีความสม่ำเสมอ สวยงาม และใช้งานได้ดีบนทุกอุปกรณ์
องค์ประกอบของ Layout & Grid
ระบบ Layout & Grid ถูกออกแบบให้ควบคุมการจัดวางเนื้อหาอย่างเป็นระบบ ซึ่งประกอบด้วย 3 ส่วนสำคัญที่ทำงานร่วมกัน ได้แก่:
1. Columns (คอลัมน์)
เป็นโครงสร้างแนวตั้งที่ใช้จัดวางเนื้อหาหลักบนหน้าจอ โดยกำหนดจำนวน column ให้เหมาะกับแต่ละขนาดหน้าจอ เช่น 4 หรือ 8 column บน mobile และ 12 columnบน desktop เพื่อสร้างความสม่ำเสมอในการจัดเรียง องค์ประกอบ
2. Gutters (ร่องว่างระหว่างคอลัมน์)
เป็นระยะห่างระหว่างคอลัมน์ที่ช่วยให้แต่ละส่วนของเนื้อหามีพื้นที่หายใจ (breathing space) และไม่แน่นจนเกินไป Gutter ช่วยให้สายตาสามารถแยกองค์ประกอบแต่ละ ส่วนได้ง่ายขึ้น โดยระยะ gutter จะเปลี่ยนตาม breakpoint
3. Margins (ระยะขอบหน้าจอ)
คือระยะห่างจากขอบหน้าจอถึงจุดเริ่มต้นของ grid Margin ช่วยกำหนดขอบเขต ของเนื้อหาหลัก และควบคุมให้เนื้อหาไม่ชิดขอบเกินไป เพื่อความสบายตา และความสอดคล้องระหว่างอุปกรณ์
การเลือกใช้กราฟที่เหมาะสมไม่เพียงช่วยให้ข้อมูลเข้าใจง่ายขึ้น แต่ยังสะท้อนถึงความ เป็นมืออาชีพในการสื่อสารและการออกแบบ การใช้ Data Visualization ตามมาตรฐาน ที่สอดคล้องกับ CI ขององค์กร จะทำให้การนำเสนอมีพลัง น่าเชื่อถือ และสร้าง ประสบการณ์ที่ดีต่อผู้ใช้งาน
Structure : โครงสร้าง
จุดกำหนดความกว้าง–สูงของหน้าจอที่ใช้ในการออกแบบ Responsive Design เพื่อให้ Layout และองค์ประกอบต่าง ๆ ปรับตัวตามขนาดอุปกรณ์อย่างเหมาะสม แบ่งเป็น 3 ระดับหลัก (Small, Medium, Large) และจำแนกตามประเภทอุปกรณ์ ได้แก่ Mobile, Tablet (Vertical & Horizontal), และ Desktop
Mobile → สำหรับหน้าจอเล็ก เน้นการแสดงผลที่กระชับและอ่านง่าย
Tablet → รองรับทั้งแนวตั้ง–แนวนอน เหมาะกับการอ่านและโต้ตอบที่หลากหลายขึ้น
Desktop → สำหรับหน้าจอใหญ่ แสดงผลได้เต็มพื้นที่และรองรับข้อมูลจำนวนมาก
การกำหนด Breakpoint ที่ชัดเจนช่วยให้การออกแบบ Responsive Design มีความสม่ำเสมอ สวยงาม และใช้งานได้ดีบนทุกอุปกรณ์
Grid Structure : โครงสร้างกริด
โครงสร้างกริด (Grid Structure) คือระบบการจัดวาง Layout ที่แบ่งพื้นที่ออกเป็น คอลัมน์ (Columns), ร่องว่างระหว่างคอลัมน์ (Gutters) และระยะขอบ (Margins) เพื่อช่วยให้การออกแบบสื่อสารมีความเป็นระเบียบ สอดคล้อง และปรับตัวได้กับทุก ขนาดหน้าจอ (Responsive Design)
ประเภท Grid
Fixed Width Grid
- กริดแบบความกว้างตายตัว
- เหมาะสำหรับเนื้อหาที่ต้องการความสม่ำเสมอ เช่น Dashboard หรือระบบภายใน
Fluid / Full Width Grid
- กริดที่ขยายเต็มความกว้างหน้าจอ (Responsive เต็มพื้นที่)
- ใช้กับงานที่เน้นการแสดงผลให้ครอบคลุมพื้นที่ เช่น Landing Page หรือ Layout ที่โชว์ภาพ/คอนเทนต์ใหญ่
Contained / Centered Layout
- กริดที่จัดให้อยู่กึ่งกลางหน้าจอ พร้อมกำหนดระยะขอบ (Margin) และขนาดคงที่ตาม Breakpoint
- เหมาะกับการออกแบบที่ต้องการความสมดุล อ่านง่าย และปรับได้ตามขนาดหน้าจอ
จุดกำหนดความกว้าง–สูงของหน้าจอที่ใช้ในการออกแบบ Responsive Design เพื่อให้ Layout และองค์ประกอบต่าง ๆ ปรับตัวตามขนาดอุปกรณ์อย่างเหมาะสม แบ่งเป็น 3 ระดับหลัก (Small, Medium, Large) และจำแนกตามประเภทอุปกรณ์ ได้แก่ Mobile, Tablet (Vertical & Horizontal), และ Desktop
Grid Structure คือระบบกริดที่ช่วยจัดวาง Layout ให้มีความเป็นระเบียบ อ่านง่าย และตอบสนองต่อทุกขนาดหน้าจอ โดยประกอบด้วย Columns, Gutters, และ Margins ที่ปรับตาม Breakpoint
