Apple
Sebuah bilik putih dengan satu suis biru
Reka bentuk Apple merupakan model kekangan: kanvas hampir putih, ruang putih yang luas dan satu aksen biru terang yang menjadikan setiap tindakan terasa disengajakan. Fokus utamanya ialah tipografi—SF Pro, dengan jarak huruf negatif yang berkurangan dengan peningkatan saiz, memberikan tajuk utama kejelasan seni bina tanpa terlalu berat. Produk ADALAH reka bentuknya: foto produk yang besar dan imej gaya hidup mendominasi, manakala elemen krom menyusut menjadi bingkai nipis, navigasi lut sinar dan garisan halus. Bahagian berselang-seli dengan latar belakang kelabu muda dengan blok warna penuh untuk bahan promosi, mencipta irama melalui perubahan skala dan bukannya elemen hiasan.
Susun atur halaman ialah halaman lebar penuh tanpa lebar kontena maksimum yang tetap—bahagian-bahagian merentang dari tepi ke tepi, dengan blok teks berpusat di dalamnya pada kira-kira 980px. Navigasi ialah bar global tetap tunggal dengan subfolder tambahan untuk setiap produk yang muncul pada skrol. Susun atur utama sentiasa berpusat: nama produk yang besar, slogan satu baris, dua butang pil, kemudian imej produk yang memenuhi baki viewport. Bahagian disusun secara menegak dengan ritma menegak yang banyak (64px+ antara bahagian), berselang-seli #f5f5f7 dan latar belakang berwarna. Halaman bawah ialah baris mendatar tunggal kad perkhidmatan lebar penuh (Apple TV+, Fitness+, Music, Arcade), setiap satu blok foto dengan teks tindanan dan butang pil. Tiada bar sisi, tiada susun atur kandungan berbilang lajur, tiada komposisi asimetri—semuanya berpusat, disusun dan simetri.
Fotografi merupakan bahasa visual yang dominan. Foto produk diambil dengan latar belakang putih tulen atau kelabu lembut, tanpa sebarang konteks—peranti ADALAH bintang, terpencil dan diterangi. Foto gaya hidup dipaparkan dalam sepanduk lebar penuh, selalunya dengan objek yang dipotong rapat. Kecerunan warna (biru pastel, merah jambu, hijau) berfungsi sebagai latar belakang untuk bahagian produk, bukan sebagai hiasan. Ikonografi adalah minimalis dan berasaskan garisan, setebal 1-2 piksel, dalam skala kelabu yang sama seperti teks. Tiada ilustrasi, tiada grafik abstrak, tiada pemaparan 3D, kecuali foto produk itu sendiri.
Palet
Jenama
- Apple Blue
#0071e3— Butang tindakan yang diisi, keadaan terpilih - satu-satunya warna kromatik interaktif yang digunakan secara berhati-hati untuk menjadikan setiap penampilan bermakna. - Link Blue
#0066cc— Sempadan tindakan yang diserlahkan, pautan terbenam - warna yang lebih tepu daripada Apple Blue digunakan jika tablet yang diisi akan kelihatan terlalu mencolok. - Signal Blue
#2997ff— Bingkai hiasan, garisan imej, sempadan ikon - warna biru paling terang dalam sistem, digunakan untuk suasana dan bukannya untuk interaksi pengguna.
Neutral
- Carbon
#1d1d1f— Teks utama, sempadan tajuk, garisan navigasi, sempadan kad - warna dakwat yang dominan hampir hitam dengan sedikit rasa hangat. - Frost
#f5f5f7— Kanvas halaman, latar belakang teks utama dan permukaan pengaki berwarna kelabu muda khas Apple, sedikit lebih sejuk daripada putih tulen. - Ice
#f4f8fb— Isian permukaan yang ekspresif, rona halus, teks butang pada latar belakang gelap—rona biru halus yang menceriakan bahagian tersebut tanpa menonjolkannya. - Smoke
#333333— Teks sekunder, isian navigasi, sempadan butang - Warna neutral versatil untuk sempadan dan ikon yang memerlukan lebih banyak sentuhan daripada kelabu sederhana. - Graphite
#474747— Teks navigasi, sempadan navigasi, sempadan pautan - menduduki kedudukan pertengahan antara Karbon dan Asap dalam hierarki unsur. - Ash
#707070— Teks pengaki, sempadan senarai, sempadan navigasi, teks isi disenyapkan - Kelabu sederhana untuk kandungan yang perlu hadir tetapi tidak menonjol.
Tipografi
dari 12 hingga 56px · 8 langkah
- SF Pro Display — penggantian: Inter · garis besar 400, 600, 700 · Tajuk utama dan teks besar—saiz 40px+ menggunakan format paparan untuk apertur yang lebih sempit dan penjejakan negatif yang lebih kuat; 700 dikhaskan untuk susun atur pengiklanan dan 400 adalah untuk nama produk dalam kandungan editorial.
- SF Pro Text — penggantian: Inter · garis besar 300, 400, 600 · Teks isi, navigasi, butang, subtajuk — fon berfungsi; 400 untuk teks isi, 300 untuk subtajuk dan label yang layak, 600 untuk elemen navigasi dan teks butang; jarak huruf negatif berkurangan secara berkadaran dengan saiz (dari -0.022 kepada 12px kepada -0.01 kepada 44px).
Selang dan bentuk
| Tujuan | Maksudnya |
|---|---|
| Ketumpatan | purata |
| Langkah asas | 12px |
| Jejari butang | 980px |
| Jejari kad | 8px |
| Bayang-bayang | tiada - sempadan dan bukannya bayang-bayang |
| Antara bahagian | 64px |
| Lebar halaman | 1440px |
AI akan membina laman web anda dalam gaya Apple dan mengisinya
- Isi dengan produk dan siaran melalui pautan - Instagram, TikTok, Facebook.
- Pindahkan kandungan dari tapak lama anda—cuma nyatakan alamatnya.
- Reka bentuk moden pada enjin terbaik: React ( Next.js) dengan pemaparan pelayan dan pengoptimuman SEO sedia ada.
- Pengoptimuman SEO automatik sepenuhnya untuk hasil carian dan cadangan rangkaian saraf.
Gaya yang serupa
- Studio — Dinding galeri bergerak. Setiap skrin mewakili permukaan pameran kelabu yang tenang di mana bahan tipografi dan karya kreatif yang bertindih bersaing untuk mendapatkan perhatian.
- Mollie — Kaunter kasmir, lejar gelap. Tinggalkan ruang putih yang luas untuk reka bentuk editorial di sekeliling teks hitam, kemudian perkukuhkan poin berkaitan produk dengan krim suam, coklat espresso dan gambar taktil kaedah pembayaran sebenar.
- Basis Theory — Terminal pembayaran di studio reka bentuk. Kertas teknikal putih, lapisan transaksi lut sinar yang bertindih dan elemen kawalan firus tunggal menentukan arah visual.
- CleanShot X — Sebuah studio dengan desktop bercahaya biru. Cipta ruang putih yang tenang di sekeliling teks hitam padat, kemudian biarkan kawalan biru yang kaya dan imej produk Mac berlapis menjadi tumpuan utama.
- Modern Treasury — Lejar perbendaharaan pada kertas graf. Cipta halaman yang menyerupai helaian operasi putih yang senyap, di mana aliran tunai dipaparkan dengan garis halus, nod berlabel dan kawalan tersembunyi yang tepat.
- Basha-Franklin — Grid galeri di bawah ambang pintu putih. Gunakan rona #f4ede6 yang hangat, struktur hitam halus dan lajur asimetri berdasarkan gambar yang kelihatan seperti portfolio seni bina bercetak.
- Bajgart Office — Dinding galeri editorial. Gunakan ruang putih yang besar di mana fon serif halus dan serpihan portfolio membawa lebih banyak berat visual berbanding elemen antara muka bersalut krom.
- Heptabase — Meja yang disinari cahaya matahari. Permukaan yang hangat seperti kertas, kawalan berwarna arang dan tingkap terapung untuk penyelidikan mewujudkan suasana ruang kerja yang teratur dan bukannya panel kawalan perisian.
- Bejamas — Piyama—kapur asid melalui kaca hitam. Cipta halaman editorial yang tenang dan kelabu muda yang diselangi oleh panel hitam yang menawan di mana jalur cahaya hijau kabur bersilang di permukaan.
- Baba — Nota penjagaan di bawah cahaya matahari merah. Cipta jalur naratif merah yang lebar di sekeliling permukaan maklumat putih, merah jambu dan krim yang intim, menggunakan gambar orang sebagai pusat emosi.
- Grafana Labs — Bilik kawalan Stesen Isyarat Matahari Terbit. Ruang kerja kelabu dan putih yang tenang digabungkan dengan kecerunan ufuk empat warna yang luas dan isyarat antara muka biru yang tepat.
- Kagi — Bilik bacaan yang berasingan. Cipta ruang putih terbuka di sekeliling teks grafit yang tebal, menggunakan aksen ungu halus dan permukaan pastel yang hangat untuk memecahkan ketenangan.