Changklong Brand Book

01 / BRAND

ให้งานในอู่ลื่นไหล เหมือนนากลอยน้ำ

Changklong คือระบบจัดการอู่ซ่อมรถที่ใช้ได้ทั้งบนคอมและมือถือ บทนี้บอกว่าแบรนด์มาจากไหน มีบุคลิกแบบไหน พูดกับลูกค้าอย่างไร และเขียนชื่อแบรนด์อย่างไรให้ถูก

Tagline

Works smoother together

งานในอู่ลื่นขึ้น เมื่อเจ้าของอู่ ช่าง และลูกค้าเห็นข้อมูลชุดเดียวกัน

Positioning

ระบบหลังร้านของอู่ซ่อมรถ ตั้งแต่รับรถ ใบเสนอราคา สถานะงานซ่อม รูปก่อนและหลังซ่อม สต๊อกอะไหล่ ไปจนถึงแจ้งเตือนลูกค้าทาง LINE และ SMS เจ้าของอู่ดูภาพรวมได้จากที่เดียว ช่างอัปเดตงานจากมือถือได้ในไม่กี่แตะ แม้มือจะเปื้อนน้ำมัน

ที่มาของชื่อ

ชื่อเล่นคำสองชั้น ทั้งสองความหมายต้องอยู่ด้วยกันเสมอ

ช่างCHANG

คนทำงานในอู่ ความชำนาญ งานซ่อม

คล่อง · คลองKLONG

คล่อง คือคล่องตัว ทำงานลื่นไหล ส่วน คลอง คือสายน้ำ จึงเป็นนากที่ลอยน้ำ และปลายตัว G ที่เป็นคลื่น

ช่างคล่อง

งานช่างที่คล่องตัว ไหลไปได้ไม่ติดขัด เหมือนนากที่ลอยตัวสบายบนผิวน้ำ

บุคลิกแบรนด์ 6 ข้อ

ใช้ตรวจงานทุกชิ้นก่อนเผยแพร่ ถ้างานไหนดูดุ ดูยาก หรือดูถูกเกินไป แปลว่ายังไม่ใช่ Changklong

น้ำเสียง (Voice & tone)

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

เราเป็น	หมายความว่า	แต่ไม่ใช่
เป็นกันเอง	ใช้ภาษาพูดที่สุภาพ ประโยคสั้น เรียกสิ่งต่างๆ ด้วยคำที่ใช้กันในอู่ เช่น รับรถ เช็คระยะ ใบเสนอราคา	ภาษาราชการ หรือคำแสลงที่คนบางกลุ่มไม่เข้าใจ
ชัดเจน	บอกสิ่งที่ต้องทำก่อน ใส่ตัวเลขจริง ทะเบียนรถ เวลา จำนวนเงิน ให้ครบในข้อความเดียว	ข้อความกว้างๆ ที่ต้องเปิดดูต่อถึงจะรู้เรื่อง
เป็นมืออาชีพ	สะกดถูก ตัวเลขตรง ศัพท์เทคนิคใช้เท่าที่จำเป็น และอธิบายทุกครั้ง	ศัพท์ระบบหรือข้อความ error ที่คนทั่วไปอ่านไม่ออก
ใส่ใจ	คิดแทนผู้ใช้ เตือนก่อนถึงเวลา และบอกทางแก้เมื่อมีปัญหา	โทษผู้ใช้ หรือเร่งเร้าด้วยคำว่า ด่วน! หลายครั้ง

✓ เขียนแบบนี้รถ กข 1234 ซ่อมเสร็จแล้ว มารับได้ตั้งแต่ 16:00 น.แจ้งลูกค้าทาง LINEถึงรอบเช็คระยะ 10,000 กม. แล้ว จองคิวได้ที่ปุ่มด้านล่างแจ้งเตือนเช็คระยะบันทึกไม่สำเร็จเพราะสัญญาณหลุด ลองกดบันทึกอีกครั้งข้อความในแอป

✕ ไม่เขียนแบบนี้ระบบ ERP อัจฉริยะครบวงจรระดับพรีเมียมที่ดีที่สุด!!!คำโฆษณาลอยๆError 500: transaction rollback failedภาษาระบบด่วน!! รีบมาเช็ครถด่วนที่สุด 🔥🔥🔥เร่งเร้าเกินจำเป็น

การเขียนชื่อแบรนด์

โลโก้มีชื่อภาษาอังกฤษเท่านั้น ส่วนชื่อไทย ช่างคล่อง ใช้เป็นข้อความในเนื้อหาและเอกสาร เลือกตามภาษาของเนื้อหา และห้ามนำชื่อไทยไปต่อกับโลโก้

อังกฤษChangklong

ใช้ในเนื้อหาภาษาอังกฤษ ชื่อแอป ชื่อโดเมน และบัญชีโซเชียล ตัวพิมพ์ใหญ่เฉพาะตัวแรก

✕ ChangKlong · Chang Klong · CHANGKLONG (ในประโยค)

ไทยช่างคล่อง

ใช้ในเนื้อหาภาษาไทย ป้ายหน้าอู่ สติ๊กเกอร์ และข้อความที่ส่งถึงลูกค้าของอู่ เขียนติดกัน ไม่เว้นวรรค

✕ ช่าง คล่อง · ช่างคลอง · ฉางคล่อง

ไทยคู่อังกฤษช่างคล่อง (Changklong)

ครั้งแรกในเอกสารภาษาไทยที่เป็นทางการ เช่น สัญญา ใบเสนอราคา หรือข่าวประชาสัมพันธ์ ครั้งต่อไปใช้ชื่อเดียว

✕ ใส่ทั้งสองภาษาทุกครั้งในข้อความเดียว

02 / LOGO

นากลอยน้ำ กับประแจในมือ

โลโก้มีสองส่วน คือนากที่นอนหงายลอยบนน้ำโดยถือประแจไว้ และตัวอักษร CHANGKLONG ที่ปลายตัว G เป็นคลื่น ใช้ไฟล์ต้นฉบับเสมอ ห้ามวาดใหม่หรือ trace จากภาพ

1
นาก (Otter)
เป็นมิตร ฉลาด คล่องแคล่ว สื่อถึงความช่วยเหลือและการดูแล วาดด้วยเส้นสี Blue หนาเท่ากันทั้งตัว
2
ประแจ (Wrench)
งานซ่อมและอู่ การแก้ปัญหา ความเชี่ยวชาญ เป็นสีส้มจุดเดียวในโลโก้ ร่วมกับจมูกนาก
3
ท่านอนผ่อนคลาย
ความง่าย ใช้งานสะดวก สบายใจเมื่อใช้ระบบ งานหนักแค่ไหนก็จัดการได้แบบไม่เครียด
4
Wordmark สองสี
CHANG สี Blue คือช่างและเทคโนโลยี KLONG สี Navy คือความมั่นคง ตัว A ไม่มีขีดกลาง ตัวอักษรเป็นรูปทรงที่วาดขึ้นเฉพาะ ไม่ใช่ฟอนต์
5
คลื่นท้ายตัว G
น้ำในคลอง และความลื่นไหลของงาน เป็นจุดเชื่อมระหว่างชื่อกับนากที่ลอยน้ำ

รูปแบบโลโก้

เลือกตามรูปทรงของพื้นที่ โลโก้หลักคือค่าเริ่มต้น ใช้แบบอื่นเมื่อพื้นที่ไม่พอ

Primary

โลโก้หลัก นากอยู่บน ชื่ออยู่ล่าง พร้อม tagline ใช้เป็นค่าเริ่มต้นกับปก โปสเตอร์ นามบัตร และหน้าแรกของเว็บ

Vertical

แนวตั้ง ชื่อแยกสองบรรทัด สำหรับพื้นที่แคบและสูง เช่น ธงญี่ปุ่น ป้ายตั้ง หน้าจอมือถือ

Horizontal

แนวนอน นากอยู่ซ้าย สำหรับพื้นที่เตี้ยและยาว เช่น header ของเว็บและระบบ หัวกระดาษ ป้ายยาว

No tagline

ไม่มี tagline ใช้เมื่อโลโก้กว้างน้อยกว่า 200 px หรือ 50 มม. ซึ่ง tagline จะเล็กเกินอ่าน

Symbol

Symbol นากเดี่ยว ใช้เมื่อชื่อแบรนด์อยู่ในตำแหน่งอื่นแล้ว เช่น มุมสไลด์ ลายน้ำ

App icon

ไอคอนพื้นสี สี่เหลี่ยมมุมมนสี Blue นากสีขาว ประแจสีส้ม สำหรับไอคอนแอป favicon และรูปโปรไฟล์

App icon · Light

ไอคอนพื้นอ่อน พื้น Light Blue นากสี Blue สำหรับวางบนพื้นเข้มหรือพื้นที่ต้องการให้เบาลง

โลโก้บนพื้นสี

บนพื้น Blue และ Navy โลโก้เป็นสีขาวทั้งตัว เหลือประแจและจมูกสีส้ม พื้นในตัวนากโปร่งใสให้เห็นสีพื้นหลัง

On Blue

พื้น Blue ใช้กับปก splash ของแอป และนามบัตรด้านหน้า

On Navy

พื้น Navy ใช้กับเสื้อช่าง footer และสื่อที่ต้องดูขรึม

On White

พื้นขาวหรือเทาอ่อนใช้โลโก้สีปกติ

03 / CLEAR SPACE & SIZE

เว้นที่ให้นากได้ลอย

พื้นที่ว่างรอบโลโก้เท่ากับ x ซึ่งคือความสูงของตัว C ใน wordmark ห้ามมีข้อความ รูป หรือขอบกระดาษเข้ามาในพื้นที่นี้

หน่วย x	ความสูงตัว C ใน wordmark
พื้นที่ว่างรอบโลโก้	1x ทุกด้าน
Symbol / ไอคอนแอป	¼ ของความสูงนาก ทุกด้าน
นาก : wordmark (ความกว้าง)	0.61 : 1
ระยะนาก ถึง wordmark	0.56x
Tagline	กว้าง 76% ของ wordmark · ตัวสูง 0.25x
ไอคอนแอป	นากกว้าง 74% ของกรอบ · มุมมน 22%

สัดส่วนทั้งหมดอยู่ในไฟล์ต้นฉบับแล้ว ตัวเลขด้านบนใช้ตรวจงานที่ผลิตออกมา ห้ามจัดตำแหน่งนากกับ wordmark ใหม่เอง

ขนาดเล็กสุด

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

โลโก้หลัก + tagline200 px · 50 มม.

ไม่มี tagline96 px · 25 มม.

แนวนอน130 px · 32 มม.

Symbol · ไอคอนSymbol 40 px · 10 มม. ต่ำกว่านั้นใช้ไอคอนพื้นสี (favicon 16 px)

04 / COLOR

ฟ้าสดใส กรมท่ามั่นคง ส้มลงมือทำ

สีหลัก 4 สี มาจากโลโก้โดยตรง Blue คือสีของแบรนด์ Navy เป็นตัวอักษรและพื้นเข้ม Orange เป็นจุดเน้นเล็กๆ เท่านั้น Light Blue เป็นพื้นอ่อนและลายคลื่น

สีกลาง

สีเทาทุกตัวเอียงไปทางฟ้าของ Navy เพื่อให้เข้ากับสีหลัก ห้ามใช้เทากลางหรือดำล้วน

สัดส่วนการใช้สี

สัดส่วนโดยประมาณในงานทั่วไป ส้มใช้น้อยที่สุดเพื่อให้ยังโดดเด่นเมื่อปรากฏ

WHITE 45%

LIGHT BLUE 20%

BLUE 18%

NAVY 14%

Orange 3% · Blue ใช้กับจุดที่ต้องการให้สนใจ เช่น ปุ่มหลัก แถบหัว ปก ไม่ใช้เป็นพื้นของเนื้อหายาว

คู่สีที่อ่านได้

วัดตามมาตรฐาน WCAG ตัวอักษรเนื้อหาต้องได้อย่างน้อย 4.5 : 1 ตัวใหญ่หรือตัวหนา (ตั้งแต่ 24 px หรือตัวหนา 18.5 px) ต้องได้อย่างน้อย 3 : 1

ทุกขนาดAaช่างคล่องWhite / Navy · 13.3 : 1

ทุกขนาดAaช่างคล่องNavy / Light Blue · 12.0 : 1

ทุกขนาดAaช่างคล่องOrange / Navy · 5.65 : 1

ทุกขนาดAaช่างคล่องDeep Blue / White · 5.6 : 1

ตัวใหญ่เท่านั้นAaช่างคล่องWhite / Blue · 3.7 : 1

ตัวใหญ่เท่านั้นAaช่างคล่องBlue / White · 3.7 : 1

กราฟิกเท่านั้นAaช่างคล่องBlue / Navy · 3.6 : 1

ห้ามใช้Aaช่างคล่องOrange / White · 2.35 : 1

ห้ามใช้สีส้มเป็นสีตัวอักษรบนพื้นขาว ข้อความเล็กบนพื้น Blue ให้เปลี่ยนเป็นพื้น Navy หรือใช้ตัวหนาขนาดใหญ่ ลิงก์และข้อความสีฟ้าบนพื้นขาวใช้ Deep Blue

05 / TYPOGRAPHY

Prompt หัวเรื่อง Anuphan เนื้อหา

ทั้งสองตัวออกแบบโดย Cadson Demak มีทั้งตัวไทยและตัวละตินในฟอนต์เดียว สัดส่วนสองภาษาจึงเข้ากันโดยไม่ต้องจับคู่ฟอนต์เพิ่ม ใช้เชิงพาณิชย์ได้ฟรี (SIL Open Font License) ดาวน์โหลดได้จาก Google Fonts

หัวเรื่อง · Displayไทย + EN

Aa กข

Prompt

กขคงจฉชซญดตถทนบปผพฟมยรลวสหอฮ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789 ฿ % &

ช่างคล่องBold 700

ช่างคล่องSemiBold 600

ช่างคล่องMedium 500

หัวข้อ tagline ป้ายกำกับ ปุ่มGoogle Fonts

เนื้อหา · UIไทย + EN

Aa กข

Anuphan

กขคงจฉชซญดตถทนบปผพฟมยรลวสหอฮ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789 ฿ % &

รับรถเข้าอู่SemiBold 600

รับรถเข้าอู่Medium 500

รับรถเข้าอู่Regular 400

เนื้อหา คำอธิบาย ตัวเลข ข้อความในแอปGoogle Fonts

ใช้แบบนี้

Prompt ใช้กับข้อความสั้นที่ต้องเด่น หัวข้อ ปุ่ม และป้ายกำกับตัวพิมพ์ใหญ่เว้นระยะกว้าง (แบบเดียวกับ tagline)

Anuphan ใช้กับทุกอย่างที่ต้องอ่านต่อเนื่อง และตัวเลขในแอป เช่น ราคา เลขไมล์ ทะเบียนรถ เพราะอ่านง่ายบนมือถือที่ขนาดเล็ก

ข้อควรระวัง

ห้ามพิมพ์คำว่า CHANGKLONG ด้วยฟอนต์ใดๆ แทนโลโก้ ตัวอักษรในโลโก้เป็นรูปทรงที่วาดขึ้นเฉพาะ

ห้ามใช้ Prompt กับเนื้อหายาวหรือขนาดต่ำกว่า 14 px และห้ามจัดเนื้อหาภาษาไทยแบบเว้นระยะตัวอักษร

ขนาดตัวอักษร

ค่าสำหรับหน้าจอ งานพิมพ์ให้คงสัดส่วนเดียวกัน

DisplayPrompt 600 · 56 / 1.15งานลื่น ลูกค้ารู้ทันที

H1Prompt 600 · 36 / 1.25ระบบจัดการอู่ซ่อมรถ ใช้ได้ทั้งคอมและมือถือ

H2Prompt 600 · 24 / 1.35สถานะงานซ่อมวันนี้

LabelPrompt 600 · 12 · เว้น 0.28emWorks smoother together

BodyAnuphan 400 · 16 / 1.7ถ่ายรูปรถก่อนซ่อมและหลังซ่อมเก็บไว้ในใบงาน ลูกค้าเปิดดูได้จากลิงก์ใน LINE โดยไม่ต้องติดตั้งแอป

NumberAnuphan 600 · ตัวเลขเท่ากัน฿12,450.00 · 85,320 กม. · กข 1234

CaptionAnuphan 400 · 13 / 1.5อัปเดตล่าสุด 14:32 น. โดยช่างเอก

06 / GRAPHIC ELEMENTS

ลายคลื่น สายน้ำของคลอง

ลายคลื่นมาจากปลายตัว G และน้ำที่นากลอยอยู่ ใช้เป็นองค์ประกอบกราฟิกบนปก แบนเนอร์ นามบัตร และหน้าจอแอป ทำให้งานจำได้แม้ไม่มีโลโก้

ระบบจัดการอู่ซ่อมรถ

รับรถ ซ่อม แจ้งลูกค้า
จบในระบบเดียว

กฎการใช้ลายคลื่น

ไหลแนวนอน ชิดขอบล่าง

คลื่นไหลจากซ้ายไปขวาเสมอ วางชิดขอบล่างของงาน สูงไม่เกิน 1/3 ของความสูงทั้งหมด ห้ามวางเอียงหรือแนวตั้ง

สีเดียวกับพื้น ไม่เกิน 3 ชั้น

บนพื้นขาวใช้โทน Light Blue บนพื้น Blue ใช้ขาวโปร่งใส บนพื้น Navy ใช้ Blue โปร่งใส ห้ามใช้สีส้มทำคลื่น

ไม่ทับโลโก้และข้อความ

โลโก้และข้อความอยู่เหนือคลื่นเสมอ ห้ามใส่เส้นขอบ เงา หรือทำคลื่นสูงจนท่วมเนื้อหา

ชุดสีของคลื่น

ดาวน์โหลดไฟล์คลื่นทั้ง 3 แบบได้ที่บท Files

บนพื้นขาวLight Blue · Blue 20% · Blue

บนพื้น Blueขาวโปร่งใส 14% · 24% · Light Blue

บนพื้น NavyBlue โปร่งใส 22% · 40% · Blue

07 / ICONS

วงกลมฟ้า เส้นขาว ส้มหนึ่งจุด

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

โครงสร้างไอคอน

วงกลม	48 × 48 หน่วย สี Blue
พื้นที่ภาพ	24 × 24 หน่วย อยู่กลางวงกลม
เส้น	หนา 2 หน่วย ปลายมน มุมมน สีขาว
ตัวเน้น	พื้นส้ม 1 ตัวต่อชุด
ขนาดเล็กสุด	วงกลม 32 px

Default

ค่าเริ่มต้น ใช้บนพื้นขาวและพื้นอ่อน

Soft

พื้นอ่อน วงกลม Light Blue เส้น Blue ใช้ใน UI ที่มีไอคอนเยอะ

On Navy

บนพื้น Navy วงกลม Blue ใช้ได้เหมือนเดิม

08 / MASCOT

นากช่างคล่อง

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

ใช้ไฟล์ Symbol ที่มีอยู่
วางบนน้ำหรือลายคลื่นได้
มีกล่องข้อความคำพูดข้างๆ ได้
ใช้ใหญ่กว่าในโลโก้ได้

วาดท่าใหม่ หรือกลับด้าน
ใส่เสื้อผ้า หมวก หรือของเพิ่ม
เปลี่ยนสีหรือใส่แสงเงา 3D
วางเป็นโลโก้ใหม่คู่กับข้อความ

เมื่อนากอยู่ในหน้าเดียวกับโลโก้ ให้วางห่างจากโลโก้อย่างน้อย 2x และใหญ่หรือเล็กกว่าโลโก้ชัดเจน คนดูจะได้ไม่คิดว่าเป็นโลโก้ซ้ำ

ภาพประกอบ ≥ 120 px

ในการ์ด ≥ 72 px

✕ เล็กเกินไป

ตัวอย่างการใช้มาสคอต

หน้าว่างในระบบ

วันนี้ยังไม่มีรถเข้าอู่

เมื่อรับรถคันแรก งานจะขึ้นที่หน้านี้

+ รับรถเข้าอู่

ทักทายใน LINE OA

สวัสดีครับ ช่างคล่อง ยินดีต้อนรับ ระบบจะแจ้งสถานะรถของคุณที่นี่ทุกขั้นตอน

บันทึกสำเร็จ

ส่งใบเสนอราคาแล้ว

ลูกค้าจะได้รับลิงก์ใน LINE ภายในไม่กี่วินาที

09 / USAGE

ข้อห้ามที่เจอบ่อย

โลโก้ต้องหน้าตาเหมือนกันทุกที่ ทั้งบนจอ งานพิมพ์ เสื้อ และป้าย ความผิดพลาดด้านล่างคือสิ่งที่เกิดบ่อยเมื่อร้านพิมพ์หรือคนทำโพสต์แก้ไฟล์เอง

10 / APPLICATIONS

ตัวอย่างการใช้งานจริง

ชื่อ เบอร์โทร เว็บไซต์ และบัญชี LINE ในบทนี้เป็นข้อมูลตัวอย่าง ใช้แสดงการจัดวางเท่านั้น ให้เปลี่ยนเป็นข้อมูลจริงก่อนผลิต

นามบัตร · 90 × 55 มม.ข้อมูลตัวอย่าง

สมชาย ใจดีเจ้าของอู่ · ช่างคล่องการาจ

โทร02-xxx-xxxxเว็บchangklong.comLINE@changklong

แอปบนมือถือ · PWA

งานวันนี้อู่ช่างคล่องการาจ

กข 1234รออะไหล่

Honda City · เปลี่ยนผ้าเบรก

3ขค 5678กำลังซ่อม

Toyota Vios · เช็คระยะ 40,000

ฌญ 9012เสร็จแล้ว

Isuzu D-Max · เปลี่ยนน้ำมันเครื่อง

หน้าเข้าสู่ระบบ · web appข้อมูลตัวอย่าง

app.changklong.com

รับรถ ซ่อม แจ้งลูกค้า จบในระบบเดียว

เข้าสู่ระบบ

สำหรับเจ้าของอู่และช่าง

เบอร์โทรศัพท์08x-xxx-xxxx

รหัสผ่าน••••••••

เข้าสู่ระบบลืมรหัสผ่าน

เสื้อช่าง · ปักที่อกซ้าย

เสื้อสี Navy ปักโลโก้แบบไม่มี tagline สีขาว ประแจและจมูกสีส้ม ความกว้างโลโก้ 7–8 ซม.

LINE Official Accountข้อมูลตัวอย่าง

รูปโปรไฟล์ 640 × 640

Rich menu 2500 × 1686 px ใช้ไอคอนวงกลมจากบท Icons ปุ่มที่สำคัญที่สุดใช้ไอคอนพื้นส้มได้ 1 ช่อง

สติ๊กเกอร์หน้าอู่ · ไดคัทข้อมูลตัวอย่าง

อู่นี้ใช้ระบบช่างคล่อง
ติดตามสถานะรถผ่าน LINE ได้

11 / FILES

ไฟล์โลโก้ ไอคอน และลายคลื่น

ภาพในการ์ดคือไฟล์ที่จะได้ SVG สำหรับ Illustrator, Figma และงานพิมพ์ PNG / JPG ด้านยาว 4096 px (ไอคอน 1024 px) สำหรับ Word, PowerPoint, Canva และ LINE ตัวอักษรทุกตัวในไฟล์เป็นเส้น (outline) แล้ว ไม่ต้องติดตั้งฟอนต์

SVG / PNGมีพื้นหลัง = พื้นสีพร้อมระยะว่างรอบโลโก้ · โปร่งใส = ตัดชิดขอบไว้วางบนงานเอง · JPG มีพื้นหลังเสมอ

โลโก้ทั้งหมดสร้างจากไฟล์ต้นฉบับ logo-01.svg ที่ปรับสีให้ตรงกับ CI แล้ว (Blue #2F80FF · Navy #0D2B6C · Orange #FF8A2D) ค่า CMYK และ Pantone ในบท Color เป็นค่าประมาณ ให้ทำ proof กับโรงพิมพ์ก่อนผลิตจริง

12 / MOTION

ลอยช้าๆ ไหลเบาๆ

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

ลอยอย่างนุ่ม

นากลอยขึ้นลงไม่เกิน 3% ของความสูง และโยกซ้ายขวาไม่เกิน 3 องศาเหมือนอยู่บนคลื่น ห้ามหมุนทั้งตัว กระโดด หรือเด้ง

คลื่นไหลทางเดียว

ลายคลื่นเลื่อนแนวนอนอย่างต่อเนื่อง ชั้นหลังช้ากว่าชั้นหน้า ไม่กลับทิศกลางทาง

ประแจตอบรับการกด

เมื่อชี้หรือกดปุ่มที่มีประแจ ประแจหมุนไม่เกิน 25 องศาแล้วกลับที่เดิม เป็นสัญญาณว่า “กำลังทำงาน” ในโลโก้ที่ลอยอยู่ ประแจขยับเองทุก 5 วินาที

สั้นและปิดได้

ปุ่มและการ์ดตอบสนองภายใน 0.3 วินาที โลโก้เปิดตัวไม่เกิน 2 วินาที เมื่อผู้ใช้ตั้งค่าลดการเคลื่อนไหว ทุกอย่างหยุดนิ่ง

ตัวอย่าง

ไฟล์ SVG แบบเคลื่อนไหวใช้ได้ทั้งในเว็บและแอป ดาวน์โหลดได้ที่บท Files (กลุ่ม Motion)

Logo intro · 2 วินาที แล้วลอยต่อ

โลโก้ Changklong แบบเคลื่อนไหว นากลอยขึ้น ประแจขยับ แล้วชื่อแบรนด์ไหลเข้ามา

ใช้เปิดคลิปวิดีโอ หน้าเปิดแอป และหน้าแรกเว็บ

Loader · วนทุก 2.4 วินาที

ใช้เมื่อรอนานกว่า 0.4 วินาที

Wave flow · พื้นหลัง

ปก แบนเนอร์ และ splash ของแอป ชั้นหลังไหลช้าที่สุด

UI · ชี้เมาส์หรือกดดู

นัดเช็คระยะ 3 คันการ์ดยกขึ้น 2 px เมื่อชี้

จังหวะเวลา

ใช้กับเวลาลักษณะ

ปุ่มและการ์ด0.15–0.2 วินาทียกขึ้น 2 px เร็วตอนต้น ช้าตอนจบ

ประแจบนปุ่ม0.3 วินาทีหมุนไม่เกิน 25° มีเด้งเล็กน้อยตอนจบ

หน้าต่างและเมนู0.3 วินาทีเลื่อนขึ้นจากด้านล่าง 12 px พร้อมจางเข้า

โลโก้เปิดตัว2 วินาทีนากลอยขึ้น ประแจขยับ ชื่อไหลจากซ้ายไปขวา แล้วนากลอยและโยกต่อ ประแจขยับทุก 5 วินาที

นากลอย · โยก · คลื่นไหล3–14 วินาที / รอบวนต่อเนื่อง จังหวะเท่ากันตลอด ใช้กับพื้นหลังเท่านั้น