Spotify
Phòng điều khiển máy phát nhạc tự động ban đêm
Giao diện web của Spotify là một trung tâm điều khiển đa phương tiện dày đặc, tối màu: một nền gần như đen được tô điểm bằng hình ảnh bìa album sống động, một điểm nhấn màu xanh lá cây đặc trưng và các nút điều khiển hình viên thuốc. Kiểu chữ nhỏ gọn và thực dụng—một kiểu chữ sans-serif hình học được thiết kế riêng với kích thước nhỏ, cho phép hình ảnh bìa album và ảnh nghệ sĩ đảm nhiệm phần lớn công việc trực quan. Bố cục là một khung hai cột cố định (thanh bên + nguồn cấp dữ liệu chính) với một lưới hình ảnh bìa album hình vuông và ảnh đại diện hình tròn, tạo ra sự xen kẽ nhịp nhàng của các kiểu hình học. Giao diện tránh những thay đổi đột ngột về chiều cao, dựa vào sự khác biệt tinh tế trên bề mặt (thẻ #121212 trên nền #000000) và một biểu ngữ gradient lớn duy nhất để tạo năng lượng. Kết quả là cảm giác như một gian DJ: nhiều thông tin, âm thanh tối và sẵn sàng phát nhạc ngay lập tức.
Giao diện cố định hai cột bao gồm thanh bên trái ("Thư viện của bạn") và khu vực nội dung chính có khả năng thích ứng. Thanh trên cùng là thanh màu đen toàn chiều rộng với chức năng tìm kiếm ở bên trái và các thao tác tài khoản ở bên phải. Nội dung chính cuộn theo chiều dọc, với các băng chuyền thẻ ngang – các bài hát phổ biến trong lưới vuông 5 cột, các nghệ sĩ phổ biến trong lưới tròn 5 cột, và các album/đĩa đơn phổ biến tiếp tục theo mô hình này. Khoảng cách giữa các phần khá nhỏ gọn (32 cm). Banner quảng cáo ở dưới cùng được cố định ở cuối khung nhìn. Việc điều hướng chỉ được thực hiện thông qua thanh trên cùng và thanh bên – không có menu lớn hoặc đường dẫn điều hướng. Nhịp điệu xen kẽ: thẻ vuông → thẻ tròn → thẻ vuông, tạo ra sự tương phản hình học giữa các phần.
Ảnh bìa album và ảnh nghệ sĩ là nội dung hình ảnh chính. Ảnh bìa được trình bày dưới dạng các mảnh vuông nhỏ gọn (tỷ lệ khung hình 1:1) với bán kính 6px—đủ sắc nét để trông chuyên nghiệp nhưng đủ mềm mại để mang hơi hướng hiện đại. Ảnh nghệ sĩ là các mảnh tròn, nhấn mạnh khuôn mặt như một yếu tố nhận diện. Giao diện chính không có ảnh trang trí, hình ảnh đời sống hoặc đồ họa trừu tượng. Yếu tố hình ảnh phi nhiếp ảnh duy nhất là một dải màu chuyển từ tím sang xanh lam ở phía dưới, đóng vai trò là yếu tố duy nhất của màu sắc thương hiệu. Các biểu tượng tối giản, đơn sắc, màu trắng trên nền tối—nhỏ gọn và chức năng, không bao giờ mang tính trang trí.
Bảng màu
Thương hiệu
- Spotify Green
#1ed760— Màu xanh lá cây được sử dụng như một điểm nhấn phụ cho các chi tiết trang trí và để làm nổi bật các truy vấn tìm kiếm ít được sử dụng hơn. Không nên sử dụng nó làm màu chủ đạo cho các lời kêu gọi hành động.
Trung lập
- Pure White
#ffffff— Một bề mặt sáng màu dùng để tạo phông nền không gây chú ý và phân tách các phần. Không nên sử dụng nó làm màu chủ đạo cho lời kêu gọi hành động. - Signal Red
#b85850— Màu đỏ đóng vai trò là điểm nhấn hỗ trợ cho các chi tiết trang trí và làm nổi bật những màu sắc khác thường. Hãy sử dụng nó như một điểm nhấn hỗ trợ, chứ không phải là màu sắc thể hiện địa vị. - Void Black
#000000— Khung trang, nền thanh điều hướng trên cùng, lớp bề mặt sâu nhất - Carbon
#121212— Bề mặt bìa cứng, tấm bên, lớp bề mặt thứ cấp trên vải bạt - Graphite
#1f1f1f— Bề mặt nổi - trạng thái khi rê chuột, trường nhập liệu, các phần tử điều hướng được chọn. - Smoke
#292929— Hình nền điều hướng hoạt động, hiệu ứng ánh sáng nền nhẹ.
Kiểu chữ
Từ 11 đến 24px · 4 bước
- SpotifyMixUI — thay thế: Inter · phác thảo 400, 600, 700 · Văn bản chính, điều hướng, nút bấm, siêu dữ liệu, chú thích nhỏ—một thiết kế nhỏ gọn, giàu thông tin, được thiết kế tinh tế để làm nổi bật các yếu tố nghệ thuật.
- SpotifyMixUITitle — thay thế: Inter weight 700 · phác thảo 700 · Tiêu đề các mục ("Bài hát nổi tiếng," "Nghệ sĩ nổi tiếng") - phông chữ đậm, cỡ vừa phải giúp các tiêu đề nổi bật mà không làm cho bố cục thẻ trở nên quá tải.
Khoảng cách và hình thức
| Mục đích | Nghĩa |
|---|---|
| Tỉ trọng | dày đặc |
| Bước cơ bản | 8-12px |
| Bán kính nút | 9999px |
| Bán kính thẻ | 6px |
| Bóng tối | tối thiểu |
| Giữa các phần | 32-48px |
AI sẽ xây dựng trang web của bạn theo phong cách Spotify và điền đầy đủ thông tin vào đó.
- Đăng tải sản phẩm và bài viết qua các liên kết sau: Instagram, TikTok, Facebook.
- Chuyển nội dung từ trang web cũ của bạn—chỉ cần chỉ định địa chỉ.
- Thiết kế hiện đại trên nền tảng tốt nhất: React ( Next.js) với khả năng render phía máy chủ và tối ưu hóa SEO ngay từ đầu.
- Tối ưu hóa SEO hoàn toàn tự động cho kết quả tìm kiếm và đề xuất dựa trên mạng thần kinh.
Phong cách tương tự
- Resend — nhung đen với màu tím neon
- Neon — Phòng máy chủ lúc màn đêm buông xuống. Bóng tối hoàn toàn, nơi ánh sáng duy nhất đến từ dữ liệu và tương tác của người dùng.
- Discord — Thế giới game được ẩn sau cửa sổ trò chuyện bật lên - mỗi khu vực là một môi trường khép kín với ánh sáng và dàn nhân vật riêng.
- Idle Finance — Sàn giao dịch rực rỡ ánh đèn neon của các nhà ga biển sâu là một nhà ga hàng hải tối tăm, nơi một ánh đèn xanh duy nhất xuyên qua màn đêm u ám.
- Midjourney — Một thiết bị đầu cuối phát quang sinh học ở đáy đại dương sâu thẳm. Một thế giới dưới đáy biển nơi trí tuệ tự tạo ra bằng các luồng mã ASCII và các nút điều khiển xuất hiện dưới dạng các họa tiết phát sáng mờ ảo.
- Netflix — Giá sách kỹ thuật số vô tận. Một trải nghiệm điện ảnh nơi thư viện nội dung vô tận được trình bày trên nền đen tuyền, đậm chất sân khấu.
- Wope — Wope là một giao diện đường chân trời màu tím. Hãy tưởng tượng một chiếc bàn quan sát tối màu với ánh sáng tím chiếu ra từ bên dưới lớp kính.
- basement — Một máy in trống rỗng lúc 3 giờ sáng – những phông chữ khổng lồ, nén chặt trải dài trên nền đen kịt, một vệt sáng màu cam duy nhất trên thanh điều hướng, mọi thứ khác đều trắng hoặc xám lờ mờ.
- Ori — Phòng máy chủ lúc nửa đêm là một khoảng không đen kịt, ánh sáng trắng, chỉ có một công tắc đang bật.
- Amaterasu — Thánh đường Ngọc lam Thiên thể
- Stink Studios — Một xưởng phim lúc nửa đêm - máy chiếu kêu vo vo, căn phòng tối om, chỉ có cuộn phim được chiếu sáng.
- Obsidian — Một kho tàng tri thức trong suốt như pha lê. Một không gian kỹ thuật số đa diện, rõ ràng được thiết kế để mang lại sự minh bạch và tập trung, với những đường vân tím rực rỡ của sự tương tác.