Spotify
Bilik kawalan jukebox malam
Antara muka web Spotify ialah pusat kawalan media yang padat dan gelap: kanvas hampir hitam yang dihiasi dengan seni album yang bertenaga, aksen hijau tunggal yang istimewa, dan kawalan berbentuk pil. Tipografinya padat dan utilitarian—muka taip sans-serif geometri yang direka khas pada saiz yang kecil, membolehkan seni album dan foto artis melakukan sebahagian besar kerja visual. Susun aturnya ialah cangkerang dua lajur tetap (bar sisi + suapan utama) dengan grid seni album segi empat sama dan avatar bulat, mewujudkan peralihan berirama jenis geometri. Antara muka mengelakkan perubahan ketinggian yang mendadak, bergantung pada perbezaan permukaan yang halus (kad #121212 pada kanvas #000000) dan sepanduk kecerunan besar tunggal untuk tenaga. Hasilnya ialah nuansa gerai DJ: padat maklumat, gelap secara akustik, dan sedia untuk dimainkan sepintas lalu.
Susun atur dua lajur tetap menampilkan bar sisi kiri ("Pustaka Anda") dan kawasan kandungan utama responsif. Bar atas ialah bar hitam lebar penuh dengan carian di sebelah kiri dan tindakan akaun di sebelah kanan. Kandungan utama menatal secara menegak, dengan karusel kad mendatar—lagu popular dalam grid segi empat sama 5 lajur, artis popular dalam grid bulat 5 lajur dan album/single popular meneruskan corak ini. Jarak antara bahagian adalah padat (32 cm). Sepanduk iklan bawah berlabuh di bahagian bawah port paparan. Navigasi dikendalikan secara eksklusif melalui bar atas dan bar sisi—tiada mega-menu atau serbuk roti. Ritma berselang-seli: kad segi empat sama → kad bulat → kad segi empat sama, mewujudkan kontras geometri antara bahagian.
Kulit album dan foto artis merupakan kandungan visual utama. Kulit album dibentangkan sebagai serpihan segi empat sama yang padat (nisbah aspek 1:1) dengan jejari 6px—cukup tajam untuk kelihatan editorial namun cukup lembut untuk menjadi kontemporari. Foto artis ialah serpihan bulat, yang menekankan wajah sebagai pengecam. Antara muka utama bebas daripada foto hiasan, imej gaya hidup atau grafik abstrak. Satu-satunya elemen visual bukan fotografi ialah sepanduk kecerunan ungu ke biru di bahagian bawah, yang berfungsi sebagai satu-satunya elemen warna jenama. Ikon adalah minimalis, monolinear, putih pada latar belakang gelap—kecil dan berfungsi, tidak pernah hiasan.
Palet
Jenama
- Spotify Green
#1ed760— Hijau digunakan sebagai aksen sekunder untuk perincian hiasan dan untuk menonjolkan pertanyaan carian yang kurang kerap digunakan. Ia tidak boleh digunakan sebagai warna utama untuk seruan bertindak.
Neutral
- Pure White
#ffffff— Permukaan sokongan yang ringan untuk mencipta latar belakang yang tidak mengganggu dan memisahkan bahagian. Ia tidak boleh digunakan sebagai warna utama untuk seruan bertindak. - Signal Red
#b85850— Merah berfungsi sebagai aksen sokongan untuk perincian hiasan dan untuk menonjolkan warna-warna yang luar biasa. Gunakannya sebagai aksen sokongan, bukan sebagai warna status. - Void Black
#000000— Kanvas halaman, latar belakang navigasi atas, lapisan permukaan terdalam - Carbon
#121212— Permukaan kadbod, panel sisi, lapisan permukaan sekunder di atas kanvas - Graphite
#1f1f1f— Permukaan dinaikkan - keadaan melayang, medan input, elemen navigasi yang dipilih. - Smoke
#292929— Latar belakang navigasi aktif, kesan lampu latar yang sedikit.
Tipografi
dari 11 hingga 24px · 4 langkah
- SpotifyMixUI — penggantian: Inter · garis besar 400, 600, 700 · Salinan badan, navigasi, butang, metadata, kapsyen kecil—reka bentuk padat dan kaya dengan maklumat yang direka bentuk agar halus, membolehkan elemen artistik mendominasi.
- SpotifyMixUITitle — penggantian: Inter weight 700 · garis besar 700 · Tajuk bahagian ("Lagu Popular," "Artis Popular") - fon yang tebal dan bersaiz sederhana menjadikan tajuk menonjol tanpa membebankan grid kad.
Selang dan bentuk
| Tujuan | Maksudnya |
|---|---|
| Ketumpatan | padat |
| Langkah asas | 8-12px |
| Jejari butang | 9999px |
| Jejari kad | 6px |
| Bayang-bayang | minimum |
| Antara bahagian | 32-48px |
AI akan membina laman web anda dalam gaya Spotify 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
- Resend — baldu hitam dengan warna neon ungu
- Neon — Sebuah bilik pelayan selepas gelap. Kegelapan tulen, di mana satu-satunya cahaya datang daripada data dan interaksi pengguna.
- Discord — Dunia permainan tersembunyi di sebalik tetingkap sembang timbul - setiap bahagian merupakan persekitaran yang tersendiri dengan pencahayaan dan set wataknya sendiri
- Idle Finance — Lantai perdagangan neon di terminal laut dalam merupakan terminal tentera laut yang gelap di mana satu cahaya biru menembusi kegelapan.
- Midjourney — Terminal bioluminesen di lautan dalam. Dunia laut dalam di mana kecerdasan menjana dirinya secara visual dalam aliran ASCII dan kawalan kelihatan sebagai corak yang samar-samar bercahaya.
- Netflix — Rak Digital Tanpa Had. Pengalaman sinematik di mana pustaka kandungan yang tidak berkesudahan dipersembahkan dengan latar belakang teater yang gelap gelita.
- Wope — Wope ialah antara muka ufuk ungu. Bayangkan sebuah meja balai cerap gelap dengan cahaya ungu memancar dari bawah kaca.
- basement — Mesin cetak kosong pada pukul 3 pagi – fon besar yang dimampatkan terbentang di tempat yang gelap gelita, satu kilauan cahaya oren pada bar navigasi, semua yang lain berwarna putih atau kelabu pucat.
- Ori — Bilik pelayan pada tengah malam berwarna hitam kosong, lampu putih, dan satu suis menyala.
- Amaterasu — Tempat Perlindungan Biru Langit
- Stink Studios — Sebuah studio filem pada tengah malam - projektor berdengung, bilik gelap, hanya filem yang menyala
- Obsidian — Sebuah gudang ilmu yang jernih. Ruang digital yang jelas dan pelbagai rupa direka untuk kejelasan dan fokus, dengan urat interaksi berwarna ungu bercahaya.