รีดีไซน์ Dashboard — Light/Dark Mode และการปรับปรุงความหนาแน่นข้อมูล
HeatMapX Engineering Team4 min read
- dashboard
เมื่อวันที่ 2026-06-05 เรา ship การรีดีไซน์เต็มรูปแบบของ HeatMapX dashboard (heatmapx.com/dashboard) ทั้ง visibility และ usability ดีขึ้นอย่างมีนัยสำคัญ
สิ่งที่เปลี่ยนแปลง
☀ ธีมสามทาง: Light / Dark / System
เพิ่ม toggle สามทาง — "☀ Light", "💻 System", "🌙 Dark" — ที่มุมขวาบนของ header
- System (ค่าเริ่มต้น): ติดตามการตั้งค่าหน้าตา OS อัตโนมัติ บน macOS ที่ตั้งค่าเป็น "Auto" จะเปลี่ยนเป็น dark ตอนกลางคืนโดยไม่ต้องทำอะไร
- Manual override: คุณสามารถตรึง light หรือ dark ได้ตลอดเวลา ความชอบจะถูกบันทึกในเบราว์เซอร์
- ป้องกัน Flash of unstyled content (FOUC) เมื่อโหลดครั้งแรก ธีมที่ถูกต้องจะ render ทันทีเมื่อ reload
▤ รายการเว็บที่ลงทะเบียนออกแบบใหม่เป็น tabular list
card grid สองคอลัมน์เดิมถูกแทนที่ด้วย table layout แถวเดียว ช่วยให้ scannability ดีขึ้นอย่างมากเมื่อมีหลายเว็บที่ลงทะเบียน
- คอลัมน์ align แนวตั้งตลอดทุกแถว ทำให้ง่ายต่อการเปรียบเทียบ status และจำนวน event ในทันที
- ชื่อเว็บ, URL, API key และ tracker tag แสดงอย่างกระทัดรัดในแถวเดียว
- รายละเอียดการตั้งค่าพับอยู่ใต้ "▸ Setup info" (ขยายเพื่อ copy API key และ tracker tag)
- ชื่อและ URL ยาวถูก truncate อัตโนมัติด้วย "…" เพื่อไม่ให้ layout พัง
＋ ปุ่ม "Add site" ข้าง heading
ปุ่ม "＋ Add site" แบบกระทัดรัดปรากฏข้าง heading "Registered Sites" ให้คุณเพิ่มเว็บใหม่โดยไม่ต้อง scroll (ปุ่มเดิมที่ด้านล่างรายการยังคงอยู่เช่นกัน)
◐ ดีไซน์แบน unified สไตล์ GitHub
ปรับ color scheme ให้เรียบง่ายขึ้น ลด visual noise ลงอย่างมาก
- พื้นหลังหน้า: neutral gray (
#f5f5f5) ตรงกับโทนของ SaaS สมัยใหม่อย่าง Linear และ Supabase - Card: พื้นขาว + border บาง ไม่มีเงา border radius 6px
- Orange เป็น brand accent เดียว (เดิม: ผสม blue, green, purple และ amber)
- สีแสดงสถานะ semantic ยังคงอยู่: green (active) / amber (warning) / red (error)
ก่อน / หลัง
| ด้าน | ก่อน | หลัง |
|---|---|---|
| Color theme | Dashboard dark ตายตัว | สามทาง: Light / Dark / System |
| Layout | Card grid สองคอลัมน์ (ความหนาแน่นข้อมูลต่ำ) | Tabular list หนึ่งคอลัมน์ (คอลัมน์ align แนวตั้ง) |
| การแสดงเว็บ | ซ้อนแนวตั้ง กินพื้นที่มาก | หนึ่งเว็บ = หนึ่งแถว + รายละเอียดที่พับได้ |
| ปุ่มเพิ่ม | ด้านล่างหน้าเท่านั้น | ทั้งข้าง heading และด้านล่าง |
| Brand color | ผสม blue / green / purple / amber | Orange single-accent axis unified |
การปรับปรุงเพิ่มเติม
- จำกัดความยาวชื่อเว็บและ URL: 60 ตัวอักษรสำหรับชื่อ / 512 ตัวอักษรสำหรับ URL ป้องกัน layout พัง
- อัปเดต placeholder การเพิ่มเว็บ: เปลี่ยน
e.g. in-gol/https://in-gol.comเป็นe.g. My site/https://example.comใน 15 ภาษาที่รองรับทั้งหมด - Onboarding modal: fade in 1 วินาทีหลังถึง dashboard ลดความรู้สึก "pop ขึ้นมาแบบกะทันหัน"
- Code snippet: การแสดง tracker tag และ CLI command อัปเดตจากพื้นหลังดำเป็นสไตล์ light gray pill สอดคล้องกับ light theme
ขอบเขตผลกระทบ
release นี้เป็น UI/UX เท่านั้น — logic การวัดผล, โครงสร้างข้อมูล และ API ไม่มีการเปลี่ยนแปลง tracker tag ที่ embed ไว้แล้วยังทำงานได้เช่นเดิม