Artikel ini ditulis pada 6 November 2026.
Alat AI berubah pantas. Jumlah pergerakan animasi yang mampu ditanggung oleh sesebuah halaman web tidak pernah berubah. Kesan layang (hover), peralihan singkat (transition), serta tindak balas mikro kepada sentuhan jari sudah memadai untuk membuatkan antaramuka berfungsi baik. Kesan kaca (glassmorphism), paralaks (parallax), kemasukan bertingkat (staggered entrances), karusel (carousel), dan skrol melekat (scroll snap) boleh dikenal pasti dan ditolak secara tegas. Bacalah artikel ini sebagai had panduan, bukannya tutorial pergerakan animasi.
Model AI sering menambah pergerakan animasi kerana pergerakan kelihatan seperti satu usaha pembinaan yang gigih. Halaman yang statik kelihatan belum siap semasa demo di meja kerja, tetapi kelihatan sedia di bilik menunggu sebenar. Orang yang menjadi sasaran siri artikel ini berada lebih dekat dengan situasi bilik menunggu: memegang telefon bimbit di bawah cahaya matahari terik, membaca dalam bahasa yang mungkin bukan bahasa utama model AI, dan tiada masa untuk halaman yang terus bergerak semasa mereka cuba membaca harga. Pergerakan cuma wajar digunakan apabila ia menjelaskan sesuatu perubahan keadaan. Ia tidak wajar digunakan sekadar untuk menunjuk bahawa seseorang tahu nama sesuatu kesan visual.
Tiga kesan yang layak mendapat tempat
Kesan layang (hover) ialah perubahan visual apabila penunjuk tetikus berada di atas butang kawalan: sedikit perubahan warna atau garis bawah pada pautan. Ia memberitahu pengguna tetikus bahawa objek tersebut boleh diketik. Namun, kesan ini tidak wujud untuk jari pengguna skrin sentuh. Apa-apa yang cuma kelihatan apabila dilayang (on hover) akan menjadi tidak kelihatan pada telefon bimbit. Tegaskan dalam taklimat bahawa petunjuk visual yang sama mesti muncul apabila tumpuan papan kekunci (on focus) diaktifkan, atau tidak perlu digunakan langsung.
Sebuah peralihan (transition) ialah tempoh singkat yang diambil oleh perubahan bentuk, selalunya sekitar seperlima saat. Laci yang muncul secara mendadak dalam satu bingkai terasa rosak; manakala laci yang mengambil masa sesaat penuh untuk terbuka terasa lambat. Minta peralihan singkat semasa elemen dibuka dan ditutup. Jangan sekali-kali meminta peralihan animasi pada setiap huruf dalam ayat. Aktiviti membaca bukannya satu pertunjukan panggung.
Sebuah interaksi mikro (microinteraction) ialah tindak balas visual kecil kepada tindakan kecil pengguna. Butang simpan memberikan pengesahan sepintas lalu; cip pilihan yang dipilih bertukar paparan secara jelas. Ini ialah kejujuran antaramuka yang sama seperti toast, tetapi dilukis lebih kecil. Interaksi mikro bukannya maskot bergerak, letupan konfeti, atau kesan bunyi. Jika anda tidak dapat menerangkan bentuk tindak balas dalam satu klausa ringkas, maksudnya interaksi mikro itu sudah terlalu besar.
Nama kesan yang cuma perlu anda kenali untuk ditolak
Istilah berikut ialah nama kesan sebenar. Namun, ini bukannya istilah yang wajib dilalui oleh halaman pertama. Apabila model AI menawarkannya, anda boleh menolaknya secara terus dengan menyebut namanya.
- Glasmorfisme (Glassmorphism) — panel kaca beku. Kesan ini mengurangkan kontras teks di atasnya. Jika perkataan sukar dibaca, buang kesan kaca tersebut.
- Paralaks (Parallax) — latar belakang gambar yang bergerak pada kelajuan berbeza daripada teks. Kesan ini boleh menyebabkan sesetengah orang berasa mual, serta bertentangan dengan tetapan sistem operasi yang meminta pengurangan pergerakan.
- Bento — tataletak grid dengan kotak bersaiz tidak sama, dinamakan sempena kotak bekal makanan. Kesan ini berguna kemudian untuk papan pemuka (dashboard). Namun pada halaman pertama, bento menyembunyikan fakta mana yang paling penting kerana perbezaan saiz mencetuskan perebutan perhatian.
- Stagger (Kemasukan bertingkat) — item atau barisan teks yang muncul satu demi satu dengan kelewatan masa. Pengguna terpaksa menunggu senarai maklumat yang sepatutnya boleh terus dibaca sepintas lalu.
- Karusel (Carousel) — barisan gambar atau kad yang meluncur ke sisi. Kebanyakan pengguna tidak pernah menggeser melepasi slaid pertama. Letakkan fakta maklumat terus di halaman utama.
- Skrol melekat (Scroll snap) — penatalan skrin yang terkunci secara automatik pada bingkai penuh seterusnya. Pada telefon bimbit, kesan ini memerangkap pengguna di antara section semasa mereka cuma berniat membaca sepintas lalu.
Anda tidak perlu belajar cara membuat kesan-kesan ini. Anda cuma perlu menolaknya apabila ia hadir tanpa diundang. Arahan ringkas, dalam bahasa Inggeris: “No glass, no parallax, no carousel, no scroll snap. Short transitions only.” Ayat tersebut ialah taklimat yang lengkap.
Maklumat harga di luar bangunan
Seseorang sedang berdiri di luar kedai, memegang telefon bimbit di bawah cahaya matahari terik, cuba membaca harga sesuatu kelas sebelum masuk. Halaman web yang diberikan kepada mereka meluncurkan harga selepas kelewatan animasi, menindih teks harga di atas gambar jalan, dan menggerakkan latar belakang lebih perlahan daripada teksnya. Di atas meja kerja semasa demo, paparan itu kelihatan rekaan yang teliti. Namun di bawah cahaya matahari terik, paparan itu kelihatan seperti halaman yang tidak mahu kekal statik cukup lama untuk dipercayai. Pengguna akhirnya mengambil keputusan masuk dan bertanya terus secara manual. Halaman web tersebut telah gagal pada satu-satunya tugas yang dimilikinya.
Perkara ini berlaku lebih pantas di tempat di mana telefon bimbit ialah satu-satunya skrin komputer dan jalan raya ialah ruang kerjanya. Kesan pergerakan yang memerlukan bilik malap dan monitor besar bukannya tetapan lalai yang neutral, tetapi tetapan lalai yang disalin daripada studio reka bentuk. Menamakan kesan tersebut ialah cara anda menolak salinan visual yang tidak perlu. Anda tidak perlu mengkritik gayanya; anda cuma perlu menyatakan kata nama bahasa Inggeris mana yang anda tidak mahu, supaya model AI tidak menyelinap masuk semula di bawah alasan “supaya kelihatan lebih cantik”.
Taklimat yang menghalang masalah ini sangat ringkas dan menggunakan nama istilahnya supaya model AI tidak boleh menterjemahkan perkataan “jadikan lebih tenang” kepada hiasan bentuk lain: “Tiada karusel untuk senarai harga. Tiada glasmorfisme di belakang nombor. Tiada paralaks. Tiada stagger pada senarai kelas. Gunakan peralihan singkat apabila laci dibuka, dan tiada peralihan langsung jika pengguna mengaktifkan reduced motion pada telefonnya. Gunakan teks gelap di atas permukaan terang yang rata.” Maklumat harga ialah fakta pertama dalam section, bukannya slaid kedua dalam karusel. Anda boleh menulis perenggan aturan itu sekali dan menggunakannya semula pada setiap halaman yang anda bina tahun ini. Aturan tersebut akan kekal benar jauh lebih lama daripada kesan animasi yang menggoda model AI.
Tetapan sistem yang mengatasi semua kesan visual
Sistem operasi membenarkan pengguna mengaktifkan pilihan pergerakan yang dikurangkan (reduced motion). Halaman web yang mengabaikan permintaan tersebut bukannya halaman yang dinamik, tetapi halaman yang mengabaikan keperluan nyata penggunanya. Nyatakan arahan ini dalam taklimat: jika pengguna memilih reduced motion, terus tampilkan keadaan akhir antaramuka tanpa animasi gelongsoran mahupun stagger. Maklumat kekal disampaikan, tetapi perjalanan animasi dibatalkan.
`
`
Kontras teks yang tinggi akan bertahan melampaui semua fesyen reka bentuk. Teks di atas gambar, teks di atas kesan kaca beku, atau teks berwarna kelabu pucat yang kelihatan anggun pada kanvas model AI — semuanya akan gagal dibaca di bawah cahaya matahari terik, pada skrin telefon bimbit murah, atau untuk mata pengguna yang letih. Minta teks berwarna gelap di atas permukaan terang yang rata melainkan anda mempunyai sebab perniagaan yang benar-benar kukuh. Nama khusus untuk permukaan tidak wajib, tetapi perkataan yang mudah dibaca ialah sesuatu yang mutlak.
Laluan melalui lima siri artikel ini tidak pernah bertujuan mengajar puluhan definisi kaku. Laluan ini ialah mengenai empat keputusan penting: Namakan komponen antaramuka dalam bahasa Inggeris supaya model AI tidak menebak. Tuliskan bahasa pembaca pada label dan perincian maklumat. Tentukan sama ada saat ini menghentikan langkah, berkongsi skrin, atau sekadar memberi maklumat. Kemudian pastikan halaman web kekal cukup statik untuk dibaca. Seseorang yang menguasai empat perkara tersebut telah melepasi penghalang perbendaharaan kata yang sebenarnya membataskan kerja. Sisa istilah lain hanyalah katalog yang boleh mereka buka di kemudian hari — berdasarkan nama bahasa Inggerisnya — apabila sesebuah halaman web benar-benar memerlukannya.