CityChat · conversation & community

ให้เมืองเริ่มคุย

ดาวน์โหลดชุด CityChat

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

  1. เลือกความหมายที่ตรงกับงาน
  2. ลองพื้นสว่างหรือมืด แล้วเปิดดูจังหวะ
  3. ส่งออกภาพนิ่ง หรือคัดลอกโค้ดพร้อม motion
3a · เสียงบ้านเรา
light · #F6F7F3

3a · เสียงบ้านเรา

citychat.voice-home

ชวนคนใหม่มาร่วมวง แล้วให้เรื่องเล่าจากบ้านเริ่มต้น

พื้นภาพ
เหมาะกับ
Welcome · โพสต์ชวนคุย · บอร์ดชุมชน
จังหวะใน preview
2.8 s / รอบ
เริ่มเห็นรอยยิ้ม
≥ 88 px
ขนาด motion
≥ 120 px
SVG
จังหวะและวิธีใช้

กระโดด ยืดตัว พยักหน้า — ใบเหลืองแอบโผล่มาทัก

หนึ่งฉาก หนึ่ง motif เว้นรอบภาพอย่างน้อย 10% และวางข้อความสำคัญไว้นอกภาพ

ลิงก์ตรงถึงชิ้นนี้

SVG เป็นภาพนิ่ง · PNG พื้นตามที่เลือก · โค้ดเล่นหนึ่งครั้งเมื่อเข้าจอ

3b · น่าอยู่ น่าเที่ยว น่าค้าขาย
light · #F6F7F3

3b · น่าอยู่ น่าเที่ยว น่าค้าขาย

citychat.live-visit-trade

บ้าน กล้อง ร้าน — สามมุมชวนมองละแวกเดียวกัน

พื้นภาพ
เหมาะกับ
CityScan hero · roll-up · สไลด์สามคำถาม
จังหวะใน preview
3.4 s / รอบ
เริ่มเห็นรอยยิ้ม
≥ 88 px
ขนาด motion
≥ 120 px
SVG
จังหวะและวิธีใช้

หมุน 2 / 3 / 1 รอบ แล้วค่อย ๆ หยุดให้เห็นภาพข้างใน

หนึ่งฉาก หนึ่ง motif เว้นรอบภาพอย่างน้อย 10% และวางข้อความสำคัญไว้นอกภาพ

ลิงก์ตรงถึงชิ้นนี้

SVG เป็นภาพนิ่ง · PNG พื้นตามที่เลือก · โค้ดเล่นหนึ่งครั้งเมื่อเข้าจอ

3c · เสียงเราอยู่ตรงนี้
light · #F6F7F3

3c · เสียงเราอยู่ตรงนี้

citychat.our-voice-here

ชวนปักเรื่องเล่า ณ จุดที่มีความหมาย ท่ามกลางเสียงเพื่อนบ้าน

พื้นภาพ
เหมาะกับ
หน้าปักเรื่อง · empty state · สไลด์เรื่องสถานที่
จังหวะใน preview
3.0 s / รอบ
เริ่มเห็นรอยยิ้ม
≥ 88 px
ขนาด motion
≥ 120 px
SVG
จังหวะและวิธีใช้

เพื่อนบ้านค่อย ๆ โผล่ ใบหลักงอกจากแผนที่ และวงแหวนกระเพื่อม

หนึ่งฉาก หนึ่ง motif เว้นรอบภาพอย่างน้อย 10% และวางข้อความสำคัญไว้นอกภาพ

ลิงก์ตรงถึงชิ้นนี้

SVG เป็นภาพนิ่ง · PNG พื้นตามที่เลือก · โค้ดเล่นหนึ่งครั้งเมื่อเข้าจอ

ConversationMotif · ต้นฉบับ
ต้นฉบับ · พื้นสว่าง

ConversationMotif · ต้นฉบับ

citychat.conversation

สองเสียงเอนเข้าหากัน แค่นี้เมืองก็เริ่มคุย

ต้นฉบับ · พื้นสว่าง
เหมาะกับ
Welcome · คำชวน · empty · success
จังหวะใน preview
2.6 s / รอบ
เริ่มเห็นรอยยิ้ม
≥ 88 px
ขนาด motion
≥ 120 px
SVG
จังหวะและวิธีใช้

สองใบโผล่ แล้วเอนเข้าหากันสลับจังหวะ

หนึ่งฉาก หนึ่ง motif เว้นรอบภาพอย่างน้อย 10% และวางข้อความสำคัญไว้นอกภาพ

ภาพนิ่งเป็นไฟล์ต้นฉบับจากเจ้าของ ส่วน preview ใช้ motion ที่ส่งมาคู่กัน ต้นฉบับมี rendition เดียว จึงแสดงบนพื้นสว่าง

ลิงก์ตรงถึงชิ้นนี้

SVG เป็นภาพนิ่ง · PNG พื้นตามที่เลือก · โค้ดเล่นหนึ่งครั้งเมื่อเข้าจอ

เลือกพื้นให้ถูก แล้วปล่อยให้รอยยิ้มทำงาน

ดูพื้นที่วางจริง

พื้นสว่างใช้ light พื้นเข้มใช้ dark ชื่อธีมของหน้าไม่ใช่ตัวตัดสิน และไม่ย้อมสีภาพให้เข้ากับพื้น

ให้ภาพมีที่หายใจ

ภาพนิ่ง ≥24 px เห็นรอยยิ้ม ≥88 px motion ≥120 px ไม่ครอป ยืด กลับด้าน หรือใส่ข้อความลงในภาพ

บอกเรื่องจริงด้วยข้อความ

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

3d · แนวทาง lockup ในเอกสารแนบ — ไฟล์แนบมีข้อเสนอปรับบอลลูนบนโลโก้ให้เข้าชุด ที่นี่แสดงชุด motif โดยยังใช้โลโก้เดิม การออกไฟล์โลโก้ใหม่และปรับ Design System เป็นงานแยก

CityChat

พื้นภาพ

การวนเป็นโหมดทดลองของคลังนี้ โค้ดที่คัดลอกจะเล่นหนึ่งครั้ง และกลับเป็นภาพนิ่งเมื่อพักหรือเปิด reduced motion