Panel
Kontena visual yang digunakan pada halaman pengesahan atau hasil untuk menekankan kandungan penting, memastikan maklumat utama menonjol dengan jelas untuk pengguna. Biasanya diletakkan pada bahagian pertama halaman.
Komponen Panel menawarkan sifat yang fleksibel, tetapi untuk memudahkan pelaksanaan, ini adalah komponen asas untuk memulakan.
- Tajuk Panel: Tajuk yang ringkas dan jelas untuk merangkumkan kandungan panel, membantu pengguna memahami tujuan dan kepentingannya dengan cepat.
- Templat: Teks utama dalam format (Body/M/400).
- Butiran: Teks tambahan dalam format (Body/XL/600).
Warna
- Biru (Maklumat)
- Hijau (Berjaya)
- Kuning (Amaran)
- Merah (Bahaya)
Contoh Penggunaan
Maklumat Biru
Panel berwarna biru digunakan untuk memaparkan mesej maklumat apabila proses sedang berlangsung tetapi belum selesai. Ini membantu pengguna memahami status semasa aplikasi atau tindakan mereka, memberikan kemas kini tanpa menunjukkan kejayaan atau kegagalan.
- Sediakan maklumat berkaitan status ini, seperti "Tarikh dihantar".
Berjaya Hijau
Panel hijau menunjukkan bahawa proses telah selesai dan berjaya. Ia mengesahkan kepada pengguna bahawa aplikasi, pembayaran, atau tugasan mereka telah diselesaikan dengan hasil yang positif. Panel ini biasanya digunakan pada penghujung aliran kerja/borang untuk menunjukkan tiada tindakan lanjut diperlukan.
- Gunakan ikon "check-circle" di mana perlu, terutamanya untuk menunjukkan proses selesai.
- Sediakan nombor rujukan atau maklumat yang boleh disimpan oleh pengguna untuk kegunaan masa depan.
- Gunakan teks besar (Body/5XL/600) untuk menyerlahkan nombor penting.
- Sertakan kod QR, kod bar, atau gambar lain yang boleh digunakan sebagai bukti proses selesai.
Amaran Kuning
Panel kuning digunakan untuk menarik perhatian kepada situasi yang memerlukan tindakan pengguna atau sesuatu yang sedang diproses. Biasanya digunakan apabila aplikasi atau proses tidak lengkap, sedang disemak, atau menghampiri tarikh akhir. Panel ini membantu membimbing pengguna ke langkah seterusnya, memberitahu mereka tentang status permintaan atau borang, dengan menunjukkan bahawa penyelesaian masih boleh dicapai dengan tindakan lanjut.
- Apabila memaparkan status amaran, sertakan anggaran masa tindak balas, langkah seterusnya, jangkaan penyelesaian, dan jumlah pembayaran yang diperlukan, supaya pengguna tahu apa yang diharapkan.
Bahaya Merah
Panel merah menandakan bahawa proses telah gagal atau ditolak. Ia digunakan untuk memaklumkan pengguna tentang ralat, aplikasi yang ditolak, pembayaran tertunggak, atau tindakan yang gagal. Panel ini memberikan maklum balas jelas tentang apa yang tidak kena, bersama dengan panduan untuk langkah seterusnya jika berkenaan.
- Apabila memaparkan status negatif, sertakan sebab penolakan dan kod ralat supaya pengguna memahami punca ralat atau penolakan.