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).

Psikologi Warna dalam Reka Bentuk

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

Gambaran Keseluruhan

Reka bentuk skrin menentukan bagaimana maklumat disusun dan dipaparkan kepada pengguna. Paparan yang berkesan memudahkan pengguna mencari maklumat dengan cepat, mengurangkan kesilapan, dan mengekalkan tumpuan pada tugas utama. Prosesnya bermula dengan analisis keperluan, diikuti penghasilan reka bentuk alternatif, penilaian dan penambahbaikan.

Analisis keperluan pengguna

Analisis keperluan menentukan siapa pengguna sasaran, tugas apa yang mereka lakukan, maklumat apa yang mereka perlukan, dan dalam persekitaran apa produk digunakan. Borang tinjauan digunakan untuk mengumpul maklum balas tentang paparan yang dikehendaki sebelum reka bentuk dihasilkan.

Susun atur dan hierarki visual

Maklumat disusun mengikut kepentingan: maklumat utama diletakkan di bahagian yang paling menonjol, diikuti maklumat sokongan. Hierarki visual dibina menggunakan saiz, ketebalan dan kedudukan. Elemen berkaitan dikumpulkan bersama supaya pengguna dapat mengimbas paparan dengan pantas.

Tipografi

Pemilihan jenis dan saiz tulisan mempengaruhi kebolehbacaan. Bilangan jenis tulisan patut dihadkan kepada satu atau dua sahaja dalam satu paparan. Tulisan bergaya seperti tulisan tangan sukar dibaca terutamanya pada saiz kecil atau apabila dipaparkan di atas latar belakang yang sibuk.

Warna dan kontras

Kombinasi warna perlu harmoni dan mempunyai kontras yang mencukupi antara teks dengan latar belakang. Teks berwarna terang di atas latar belakang terang sukar dibaca. Warna juga tidak boleh menjadi satu-satunya cara menyampaikan maklumat, kerana pengguna buta warna tidak dapat membezakannya.

Grafik dan imej

Grafik perlu menyokong maklumat dan bukan sekadar hiasan. Imej yang bertindih dengan teks mengganggu pembacaan. Resolusi imej perlu mencukupi supaya tidak kelihatan kabur, tetapi saiz failnya perlu dioptimumkan supaya paparan tidak lambat dimuatkan.

Navigasi dan keseimbangan

Bar navigasi yang tersusun membolehkan pengguna mengemudi dengan cepat. Susun atur yang seimbang antara teks, menu dan grafik menjadikan paparan lebih mesra pengguna. Ruang putih yang mencukupi mengurangkan rasa berselerak dan membantu tumpuan.

Menilai reka bentuk alternatif

Beberapa reka bentuk alternatif dihasilkan dan dinilai berdasarkan prinsip yang sama supaya perbandingan adil. Penilaian kuantitatif menggunakan skala bagi setiap aspek, manakala komen pengguna memberikan sebab di sebalik skor tersebut. Reka bentuk yang dipilih ialah yang paling menepati keperluan pengguna, bukan yang paling disukai pereka.

Glosari Istilah

Kajian Kes Berpandu

Sebuah kolej swasta membandingkan dua reka bentuk laman utama. Laman Web A menggunakan pelbagai jenis dan saiz tulisan yang kurang sesuai serta sukar dibaca, dengan tulisan berwarna biru yang kurang jelas apabila dipaparkan pada latar belakang langit. Menunya kelihatan kecil dan kurang jelas, manakala teks bertindih dengan imej sehingga mengganggu paparan. Laman Web B pula menggunakan tulisan yang lebih kemas dan jelas, dengan tajuk utama "SELAMAT DATANG KE KOLEJ SERI BAYU" dipaparkan dalam saiz besar dan tebal. Gabungan warnanya harmoni dengan kontras yang baik, bar navigasinya tersusun, dan susun aturnya seimbang antara teks, menu dan grafik. Kesimpulannya Laman Web B lebih sesuai dipilih kerana reka bentuknya lebih menarik, kemas, mudah dibaca dan mudah dinavigasi.

Perwakilan atau contoh teknikal

Jadual perbandingan dua reka bentuk paparan:

  Aspek           | Laman Web A            | Laman Web B
  ----------------+------------------------+---------------------------
  Tipografi       | Pelbagai jenis, sukar  | Kemas, jelas, tajuk besar
                  | dibaca                 |
  Warna & grafik  | Kurang sesuai,         | Harmoni, kontras baik
                  | berselerak             |
  Navigasi        | Menu kecil, kurang     | Bar navigasi tersusun
                  | jelas                  |
  Susun atur      | Teks bertindih imej    | Seimbang, kemas
  Penekanan       | Maklumat utama kabur   | Tajuk utama menyerlah

  Keputusan: Laman Web B dipilih.

Contoh tambahan

<!-- CSS dalaman untuk menekankan maklumat utama -->
<body>
  <style>
    .daftar {
      color: red;
      font-size: 70px;
    }
  </style>

  <p class="daftar">Pendaftaran Dibuka Sekarang</p>
</body>

Rujukan Pantas

Bahagian ini merangkumkan fakta Paparan dan Reka Bentuk Skrin yang paling kerap diuji. Gunakannya untuk ulang kaji pantas sebelum peperiksaan, bukan sebagai ganti kepada nota penuh.

Aspek penilaian reka bentuk skrin

Istilah dan maksud dalam penyelesaian

Teknik Menjawab Bergaya Peperiksaan

Soalan Sains Komputer menilai ketepatan istilah dan kelengkapan isi. Bagi topik Paparan dan Reka Bentuk Skrin, markah lazimnya diberikan mengikut bilangan isi yang betul, jadi bilangan isi dalam jawapan perlu sepadan dengan bilangan markah yang diperuntukkan.

Contoh Soalan dan Jawapan Model

Soalan 1 [9 markah]

Dua laman web dicadangkan untuk mempromosi sebuah kolej. Laman Web A menggunakan pelbagai jenis tulisan bergaya di atas latar belakang langit dengan teks bertindih imej, manakala Laman Web B menggunakan tulisan kemas dengan tajuk besar dan bar navigasi tersusun. Tentukan laman web yang terbaik dengan membandingkan kedua-duanya berdasarkan prinsip reka bentuk laman web.

Soalan 2 [6 markah]

Tulis kod atur cara Internal Cascading Style Sheets (CSS dalaman) untuk menambah teks "Pendaftaran Dibuka Sekarang" berwarna merah dan bersaiz 70.

Soalan 3 [3 markah]

Nyatakan tiga aspek yang perlu dinilai dalam reka bentuk paparan skrin.

Soalan 4 [2 markah]

Terangkan mengapa maklumat utama perlu diberi penekanan dalam reka bentuk paparan skrin.

Salah Faham yang Perlu Dielakkan

Strategi Menjawab Soalan

Semak Kendiri

Peta Modul — Apa yang Akan Dikuasai

Reka bentuk skrin yang baik membimbing mata pengguna kepada perkara penting terlebih dahulu — dicapai melalui susun atur, warna, saiz dan ruang, bukan dengan menambah lebih banyak elemen. Kebolehgunaan pula diukur, bukan diagak: ia dinilai melalui lima ciri yang boleh diperhatikan apabila pengguna sebenar mencuba sistem (kebolehpelajaran, kecekapan, kebolehingatan, kadar ralat, kepuasan).

Idea Utama

Enam elemen reka bentuk skrin: susun atur (kumpulkan elemen berkaitan, kekalkan kedudukan), warna (had 3–4 warna utama, kontras teks–latar mencukupi), fon (1–2 jenis, saiz cukup besar), ruang putih (elak skrin sesak), navigasi (menu di tempat mudah dijangka, tunjuk halaman semasa), dan ikon (guna ikon lazim + label teks). Reka bentuk mesti disesuaikan dengan kumpulan pengguna: fon besar & kontras tinggi untuk warga emas; ikon berwarna & bahasa mudah untuk kanak-kanak; sokongan pembaca skrin & teks alternatif untuk pengguna kurang upaya penglihatan.

Aliran — Menjawab Soal Menilai Dua Aplikasi [7 markah]

Contoh Berpandu Beranotasi

Contoh Berpandu — menilai dua aplikasi [gaya Bahagian B, 7 markah]

Aplikasi P: 8 langkah untuk menempah tiket, tiada mesej selepas pembayaran. Aplikasi Q: 3 langkah, papar resit serta-merta, halang penghantaran jika medan wajib kosong. Aplikasi mana lebih baik? Justifikasikan.

Silap Lazim — yang Dipotong Markah oleh Pemeriksa

Cara Skema Jawapan Diberi