DETAILED UI MANUAL 2026
📖 คู่มืออธิบายเมนู & ปุ่มการใช้งานละเอียด
อธิบายการทำงานของทุกปุ่ม ทุกเมนู และทุกป๊อปอัปในระบบ WISDOM VIBE PASS™ อย่างครอบคลุม
1. แถบควบคุมด้านบนสุด (Top Controls Bar) - มีทุกหน้า
แถบเมนูด้านบนสุดที่แสดงในทุกหน้าของระบบ มีปุ่มและการทำงานดังนี้:
| ชื่อปุ่ม / เมนู | หน้าที่และการใช้งาน |
|---|---|
| Theme (ช่องเลือกธีม) | กดเพื่อเลือกสลับโทนสีตามจิตวิทยาการใช้สี (Color Psychology) ได้ 10 สไตล์ ระบบจะจำสีที่คุณเลือกไว้ในทุกหน้า |
| ✨ สร้างนามบัตรฟรี | กดเพื่อเปิดหน้าสตูดิโอสร้างและปรับแต่งนามบัตรของคุณเอง (ไปหน้า builder.html) |
| 💎 ฟีเจอร์องค์กร | กดเพื่อดูคุณสมบัติระบบเต็มรูปแบบสำหรับองค์กรและส่งข้อความขอใบเสนอราคา (ไปหน้า features.html) |
| [ TH | EN ] (สลับภาษา) | กดเพื่อเปลี่ยนภาษาของทั้งหน้าจอระหว่าง ภาษาไทย 🇹🇭 และ ภาษาอังกฤษ 🇬🇧 |
| 📖 Help / 👀 นามบัตร | กดเพื่อเปิดสลับไปมาระหว่างหน้าคู่มือ help.html และหน้านามบัตรดิจิทัลหลัก index.html |
2. หน้านามบัตรดิจิทัลหลัก (index.html) - ปุ่มและเมนูทั้งหมด
🔹 ปุ่มดำเนินการหลัก (Primary Action Buttons)
| 💾 Save Contact (.vcf) | กดปุ่มนี้เพื่อ ดาวน์โหลดไฟล์นามบัตรลงมือถือ เมื่อเปิดไฟล์ มือถือจะบันทึกชื่อ เบอร์โทร อีเมล ลงสมุดโทรศัพท์ให้อัตโนมัติ |
| 🔳 Scan QR Code | กดปุ่มนี้เพื่อ แสดงคิวอาร์โค้ดขนาดใหญ่ ให้อีกฝ่ายใช้กล้องมือถือสแกนเปิดหน้านามบัตรของคุณได้ทันที |
🔹 ไอคอนบาร์ติดต่อด่วน (Quick Icon Bar)
| 📞 Call | กดเพื่อเปิดแอปโทรศัพท์และโทรออกหาเบอร์ของคุณทันที |
| ✉️ Email | กดเพื่อเปิดแอปอีเมลเขียนข้อความส่งถึงคุณทันที |
| 📍 Map | กดเพื่อเปิดแผนที่ Google Maps นำทางมายังออฟฟิศของคุณ |
| 💬 Message | กดเพื่อเปิดป๊อปอัปให้ลูกค้าฝากชื่อ เบอร์โทร และข้อความส่งถึงคุณได้ทันที |
| 🔗 Share | กดเพื่อเปิดเมนูแชร์ของมือถือ หรือคัดลอกลิงก์ส่งต่อใน LINE/Socials |
🔹 แถบ 5 แท็บเนื้อหา (5-Tab Navigation Bar)
| 🏠 About | แสดงบัตร 3D NFC (กดคลิกเพื่อพลิกบัตร 🔄), ประวัติย่อ และ 5 จุดขายของระบบ |
| 🛠️ Services | แสดงรายการบริการและผลงานโครงการสำคัญ (Featured Portfolio) |
| 📞 Contact | แสดงเบอร์โทร อีเมล เว็บไซต์ และพิกัด GEO สถานที่ตั้งอย่างละเอียด |
| 🌐 Socials | แสดงปุ่มกดเชื่อมต่อไปยังโซเชียลทั้งหมด (LinkedIn, GitHub, X, Facebook, Instagram) |
| ❓ FAQ | แสดงคำถามที่พบบ่อย (กดเพื่อยืด-หดดูคำตอบ) รองรับ Voice Search และ AI Search 2026 |
3. หน้าสตูดิโอสร้างนามบัตร (builder.html) - ปุ่มและเมนูทั้งหมด
| ชื่อปุ่ม / เมนู | หน้าที่และการใช้งาน |
|---|---|
| ⚡️ Quick Presets | ปุ่มเลือกแม่แบบอาชีพสำเร็จรูป (เช่น CEO, CMO, CTO, Designer, Doctor) กด 1 คลิกเพื่อดึงข้อมูลตัวอย่างมาลองปรับแต่ง |
| 🔄 ล้างร่างและเริ่มใหม่ | กดเพื่อล้างข้อมูลฉบับร่างที่เคยพิมพ์ค้างไว้ในเครื่องออก หากต้องการเริ่มกรอกใหม่ตั้งแต่ต้น |
| Step 1-4 Wizard Tabs | แถบสลับ 4 ขั้นตอน: Step 1 โปรไฟล์ -> Step 2 ข้อมูลติดต่อ -> Step 3 โซเชียล -> Step 4 เลือกธีมสี |
| 📷 เลือกรูปโปรไฟล์ | แตะที่กล่องเส้นประเพื่อเลือกรูปถ่ายของคุณจากคอมพิวเตอร์หรือสมาร์ตโฟนมาเป็นรูปโปรไฟล์ |