Paparan dan Reka Bentuk Skrin
Elemen Reka Bentuk Skrin
Reka bentuk skrin yang baik memastikan maklumat mudah dibaca, menarik dan tidak mengelirukan. Elemen utama yang perlu dipertimbangkan: susun atur (layout), warna, fon/tipografi, imej dan ikon, serta ruang putih (white space).
| Elemen | Garis Panduan | Kesilapan Biasa |
|---|---|---|
| Susun atur | Elemen penting di kedudukan strategik; aliran bacaan kiri ke kanan, atas ke bawah | Skrin terlalu padat, tiada fokus |
| Warna | Maksimum 3-4 warna utama; kontras tinggi antara teks dan latar | Teks kuning atas latar putih (kontras rendah) |
| Fon | Maksimum 2-3 jenis fon; saiz mencukupi untuk dibaca; fon sans-serif untuk skrin | Terlalu banyak jenis fon, saiz terlalu kecil |
| Imej/Ikon | Relevan dengan kandungan; saiz konsisten | Imej tidak berkaitan, ikon mengelirukan |
| Ruang putih | Beri 'ruang nafas' antara elemen | Memenuhi setiap inci skrin |
Psikologi Warna dalam Reka Bentuk
| Warna | Maksud/Kesan | Kegunaan Biasa |
|---|---|---|
| Merah | Bahaya, amaran, penting | Butang padam, mesej ralat |
| Hijau | Berjaya, selamat, positif | Mesej kejayaan, butang sahkan |
| Biru | Tenang, profesional, dipercayai | Aplikasi korporat, bank, pendidikan |
| Kuning/Jingga | Perhatian, tenaga | Notis penting, promosi |
Proses Reka Bentuk Skrin
Reka bentuk skrin bermula dengan LAKARAN (sketch) di atas kertas, diikuti rangka rangka (wireframe) yang menunjukkan susun atur tanpa warna dan grafik penuh, kemudian prototaip yang boleh diklik untuk pengujian pengguna, dan akhirnya reka bentuk akhir. Mendapatkan maklum balas pengguna pada setiap peringkat mengelakkan pembaziran masa membina semula.
Contoh penilaian skrin aplikasi sekolah: tajuk jelas di atas, menu utama konsisten di bahagian bawah, warna biru profesional dengan butang tindakan hijau, fon sans-serif saiz 16 ke atas, dan ruang putih memisahkan setiap kad maklumat — skrin sebegini mudah dinavigasi oleh murid dan ibu bapa.
Contoh: Pilihan Warna Mengikut Tujuan
| Elemen | Warna sesuai | Sebab |
|---|---|---|
| Butang padam | Merah | amaran atau bahaya |
| Mesej berjaya | Hijau | positif |
| Latar aplikasi sekolah | Biru | tenang dan profesional |
| Notis penting | Kuning | menarik perhatian |