สถานะกำลังโหลด ข้อผิดพลาด ว่างเปล่า และโครงร่าง

เป้าหมาย: รองรับสถานะข้อมูลทั้งหมดเพื่อประสบการณ์ผู้ใช้ที่ราบรื่น

• กำลังโหลด: แสดงโครงร่าง
• ข้อผิดพลาด: แสดงข้อความสั้น ๆ ที่ช่วยแก้ปัญหาได้
• ว่าง: อธิบายและแนะนำการดำเนินการถัดไป
• สำเร็จ: แสดงรายการหรือรายละเอียด

โครงร่างช่วยบอกเค้าโครงขณะที่กำลังโหลดข้อมูล ควรทำให้เรียบง่าย ไม่ฉูดฉาด และป้องกันการเปลี่ยนตำแหน่งของเค้าโครงเมื่อเนื้อหาปรากฏ

จำลองการดึงข้อมูล: แสดงโครงร่างขณะกำลังโหลด จากนั้นแสดงรายการ สลับสถานะเพื่อดูขั้นตอนการทำงานของข้อผิดพลาดและสถานะว่าง

สถานะว่างควรบอกให้ทราบว่าจะเกิดอะไรขึ้นและแนะนำขั้นตอนถัดไป (เช่น “ยังไม่มีรายการ เพิ่มรายการหนึ่งรายการ”) ใช้ข้อความสั้นและเป็นมิตร

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

โครงร่างควร:

• มีขนาดตรงกับเค้าโครงสุดท้าย
• ใช้เอฟเฟกต์ระยิบระยับอย่างละเอียด
• หายไปอย่างรวดเร็ว

ไม่ควร:

• ปิดกั้นการโต้ตอบโดยไม่จำเป็น
• ทำให้เค้าโครงกระโดด

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