Bagaimana laman ini dibuat
ArteyuLabs jual buku kerja Excel yang betul-betul jalan, jadi laman ini dibuat macam satu buku kerja juga. Ini nota reka bentuknya.
Konsep
Laman ini ialah buku kerja: setiap halaman satu sheet, setiap angka satu sel hidup, dan setiap kenyataan boleh disemak sampai ke failnya.
Versi lama hanya merujuk Excel - sebuah bar formula di sini, tab sheet di sana - di atas susun atur pemasaran biasa. Versi ini cuba menjadi Excel itu sendiri. Perbezaannya paling jelas di dua tempat: sel putih dalam hero yang memang boleh ditaip, dan senarai inventori yang menggantikan dinding 48 kad.
Warna
Setiap pasangan warna di bawah kami ukur pada latar sebenar, selepas semua lapisan telus diambil kira - bukan dianggar. Jika nisbah jatuh bawah 4.5:1 untuk teks kecil, ia tak dihantar.
Satu perangkap dah kami catat dari awal: emas pekat di atas krim hanya 2.4:1. Ia tetap terlepas masuk ke satu meterai kecil - audit automatik yang menangkapnya, bukan mata kami.
Huruf
Dua muka taip sahaja. Plus Jakarta Sans untuk suara, JetBrains Mono untuk data. Peraturannya ringkas: jika ia ayat atau perasaan, Jakarta; jika ia fakta atau nombor, mono. Pandang sekilas pun anda patut dapat kenal bahagian mana yang data.
Saiz tajuk membawa maksud, jadi ia tak sama rata merentas halaman. Setiap halaman bermula pada 49.6px; halaman utama sahaja mendapat 66.4px.
Gerakan
Tujuh gerakan, setiap satu bernama. Jika sesuatu animasi tak dapat dinamakan sebagai salah satu daripadanya, ia tak dibenarkan. Nama Melayu ini bukan hiasan - ia memaksa setiap gerakan menerangkan sebab kewujudannya. Yang ketujuh, SELAK, ialah cara buku kerja di muka depan bertukar sheet: satu sheet di depan pada satu masa, setiap satu dokumen sebenar, dan tab di bawahnya berfungsi macam dalam Excel - klik, sheet bertukar; scroll, buku kerja diselak.
Peraturan paling ketat: teks tak pernah dipaparkan separuh telus. Itu terpakai pada keadaan rehat dan pada setiap bingkai setiap animasi.
Sebabnya mudah: animasi masuk yang menahan teks pada kelegapan separuh menjatuhkan kontras teks itu ke bawah paras boleh baca sepanjang ia menunggu. Teks yang belum boleh dibaca bukan teks.
Telefon
Telefon direka pada 320px dahulu, bukan diperah dari desktop. Tiga perkara diuji pada lebar itu: dashboard mesti kekal dalam skrin pertama, tiada label boleh jatuh bawah 11px, dan apa yang perlu ditekan mesti berada dalam capaian ibu jari.
Sekarang telefon ikut apa yang Excel dalam telefon buat. Tab sheet turun ke bawah, dalam capaian ibu jari. Setiap bab bawa name box yang melekat di atas, jadi anda sentiasa tahu bahagian mana yang anda baca. Baris tajuk lejar beku macam freeze panes - desktop pun tak ada itu. Dashboard naik ke atas: anda tengok mesin itu bekerja sebelum perlu scroll.
Prestasi
Dua dependency sahaja: react dan react-dom. Tiada Tailwind, tiada library animasi, tiada WebGL. Semua itu teknik yang elok. Cuma pembeli di sini guna telefon Android pertengahan atas 4G, dan sesiapa pun boleh nampak hebat kalau ada GPU dan 800KB JavaScript.
Perkara yang paling melambatkan laman begini bukan JavaScript - ia panjang halaman. Sebab itu katalog di halaman utama ialah senarai inventori, bukan dinding kad: satu senarai memuatkan barang yang sama dalam sepertiga tinggi, dan tinggi itulah yang telefon kena susun atur.
Semua angka ini kami ukur pada 11 Ogos 2026, guna Lighthouse mudah alih atas binaan sebenar.