การสร้างคู่มือแอปแบบโต้ตอบได้
ทีมสนับสนุนมักประสบปัญหาเมื่อต้องใช้งานแอปที่พวกเขาไม่เคยติดตั้งมาก่อน
การใช้ไฟล์ PDF พร้อมภาพสกรีนช็อตเป็นวิธีแก้ปัญหามาตรฐาน แต่คนส่วนใหญ่ไม่ค่อยอ่าน PDF ผมจึงอยากสร้างสิ่งที่ดียิ่งกว่า ผมต้องการคู่มือที่ให้ความรู้สึกเหมือนใช้งานแอปจริง คุณเห็นหน้าจอหลัก คลิกปุ่ม แล้วหน้าถัดไปก็ปรากฏขึ้นมา
ผมได้สร้างคู่มือแบบโต้ตอบได้โดยใช้ภาพสกรีนช็อตจริงและจุดคลิก (hotspots) ที่สามารถกดได้
วิธีการทำงาน
ผมใช้ Firebase Storage สำหรับจัดเก็บรูปภาพ และใช้ vanilla JavaScript สำหรับส่วนตรรกะ (logic) โดยไม่ใช้ไลบรารีภายนอกเลย
- แต่ละหน้าจอคือรูปภาพเต็มหนึ่งรูป
- ผมวางรูปสี่เหลี่ยมที่มองไม่เห็น เรียกว่า hotspots ไว้บนรูปภาพ
- hotspots เหล่านี้ใช้หน่วยเป็นเปอร์เซ็นต์แทนพิกเซล เพื่อให้ตำแหน่งยังคงตรงกันเมื่อขนาดหน้าต่างเปลี่ยนไป
- ใช้ state machine แบบง่ายในการจัดการการนำทาง (navigation) โดยแต่ละหน้าจอจะมี ID, รูปภาพ และรายการของ hotspots
ตัวแก้ไข (The Editor)
การวัดพิกัดด้วยมือเป็นเรื่องที่ล่าช้า ผมจึงสร้างตัวแก้ไข HTML แบบ standalone ขึ้นมาเพื่อช่วยให้กระบวนการนี้เร็วขึ้น
- อัปโหลดภาพสกรีนช็อต
- ลากเมาส์เพื่อวาด hotspot
- เชื่อมโยง hotspot เข้ากับหน้าจอเป้าหมาย
- ส่งออกโค้ดได้โดยตรง
การตัดสินใจด้านการออกแบบ
ไม่ใช่ทุกหน้าจอที่จะมีการนำทางแบบเต็มรูปแบบ เพื่อป้องกันความสับสน ผมจึงเพิ่มแสงสีฟ้าแบบกะพริบ (pulsing blue glow) ลงในพื้นที่ที่คลิกได้ เพื่อแสดงให้ผู้ใช้เห็นชัดเจนว่าพวกเขาสามารถแตะตรงไหนได้บ้าง
บทเรียนทางเทคนิคที่สำคัญ
- Firebase Storage: อย่าสร้าง URL ด้วยตัวเอง ให้ใช้เมธอด
getDownloadURLของ SDK ซึ่งจะรวม auth token ที่จำเป็นสำหรับการข้ามกฎความปลอดภัย (security rules) ไว้ด้วย - CSS Flexbox: หากคุณใช้
flex: 1ในเลย์เอาต์แบบคอลัมน์ (column layout) ตัว parent จะต้องมีการกำหนดความสูงที่ชัดเจน และควรตั้งค่าmin-height: 0ที่ตัว child เพื่อป้องกันการล้น (overflow) - ประสิทธิภาพ (Performance): การเรียกใช้ Firebase ทุกครั้งที่มีการคลิกจะทำให้เกิดอาการหน่วง ผมจึงใช้วิธีทำ in-memory cache และโหลดรูปภาพทั้งหมดล่วงหน้า (preload) เมื่อเปิด modal ขึ้นมา ซึ่งช่วยให้การนำทางทำได้อย่างรวดเร็วทันที
- การปรับขนาด (Scaling): ใช้คุณสมบัติ CSS
transform: scale()เพื่อให้แน่ใจว่ารูปภาพและ hotspots จะยังคงจัดวางตำแหน่งได้ตรงกันอย่างสมบูรณ์ไม่ว่าขนาดหน้าจอจะเป็นอย่างไร
ผลลัพธ์ที่ได้
- หน้าจอ 20 หน้าที่นำทางได้เหมือนโทรศัพท์จริง
- 52 hotspots พร้อมสัญญาณภาพ (visual cues)
- โหลดได้อย่างรวดเร็วผ่านการ preload และการทำ cache
- การออกแบบที่รองรับการแสดงผลทุกขนาด (Responsive design) ให้เข้ากับขนาดของ modal ใดๆ ก็ได้