Apple (España)
Một thánh đường của không gian trắng xóa với những dòng chữ gần như không thể nghe thấy. Một hội trường rộng lớn, sáng sủa, nơi những phông chữ khổng lồ với mật độ 700 ký tự/chữ hoa lơ lửng trong không trung, chỉ được giữ lại với nhau bằng những màu sắc pastel và một sợi chỉ xanh duy nhất.
Ngôn ngữ trang sản phẩm của Apple là một ví dụ điển hình về sự hào phóng trong cách sử dụng kiểu chữ: tiêu đề SF Pro Display khổng lồ nổi bật trên nền trắng nhạt, được bao quanh bởi khoảng trắng rộng lớn, khiến mỗi từ đều có vẻ được lựa chọn kỹ lưỡng. Bảng màu gần như đơn sắc—văn bản màu #1d1d1f, nền xen kẽ giữa #ffffff và #f5f5f7—với một điểm nhấn màu xanh lam duy nhất (#0071e3) dành riêng cho những khoảnh khắc tương tác. Màu sắc xuất hiện trong chính hình ảnh sản phẩm (tông màu pastel), chứ không phải là các yếu tố giao diện người dùng trang trí. Các thành phần không có khung: thẻ bo tròn với bán kính 28px, các nút hình viên thuốc gần như chạm vào các cạnh của trang, không có khung chứa hoặc bóng đổ nào hiển thị. Nhịp điệu được tạo ra bằng cách xen kẽ các sọc trắng và xám, chứ không phải bằng các đường phân cách hoặc đường viền.
Các phần chiếm toàn bộ chiều rộng của trang, trải dài từ cạnh này sang cạnh kia với khoảng đệm rộng rãi (khoảng 40-100 cạnh). Chiều rộng nội dung tối đa được căn giữa hiệu quả trong mỗi dải. Yếu tố chính là một chồng nội dung được căn giữa: một nhãn hình lông mày, một tiêu đề được phóng to, một nút kêu gọi hành động duy nhất, một hàng giá và sau đó là hình ảnh sản phẩm lấp đầy phần dưới cùng của khung nhìn. Các phần tuân theo một mẫu lặp lại: một tiêu đề được căn trái trong dải, tiếp theo là bố cục hai cột với mô tả sản phẩm (văn bản bên trái/hình ảnh bên phải hoặc xen kẽ), một lưới ba cột gồm các thẻ hoặc một phần trưng bày trực quan được căn giữa. Nhịp điệu nội dung được kiểm soát hoàn toàn bằng cách xen kẽ nền trắng và ba màu với khoảng cách dọc 100-100 cm—không có đường phân cách, không có thẻ chứa các yếu tố. Thanh điều hướng toàn cầu là một thanh cố định duy nhất. Các phần thông số kỹ thuật sản phẩm sử dụng các dải toàn chiều rộng với khoảng đệm rộng rãi, trong đó văn bản được căn giữa trong các cột hẹp (~560px) trên một khu vực hiển thị rộng hơn.
Ngôn ngữ hình ảnh của Apple chủ yếu là nhiếp ảnh sản phẩm: cận cảnh phần cứng trên nền trắng tinh hoặc nền màu, không có bối cảnh đời sống hay cảnh dàn dựng. Hình ảnh chính cho thấy bàn tay đang cầm chiếc MacBook Neo màu xanh pastel – yếu tố con người chỉ là thứ yếu, thể hiện tỷ lệ và kết cấu hơn là cảm xúc. Trong phần giới thiệu các biến thể sản phẩm, hai thiết bị được trưng bày cạnh nhau trên nền có màu viền phù hợp (hồng, xanh lá cây, bạc, xanh da trời), mỗi thẻ là một mảng màu phẳng với sản phẩm ở trung tâm. Ảnh chi tiết sử dụng cận cảnh cực độ (bản lề máy tính xách tay, mô-đun camera) trên nền trung tính. Không có hình minh họa, không có đồ họa trừu tượng, không có hình ảnh trang trí – chính sản phẩm là yếu tố hình ảnh. Biểu tượng xuất hiện ở khắp mọi nơi – các biểu tượng đường nét đơn sắc theo phong cách SF Symbols, dày 1,5–2px, được lấy từ bộ biểu tượng hệ thống của Apple. Việc chụp ảnh luôn được thực hiện theo kiểu ánh sáng mạnh: ánh sáng đồng đều, không có bóng, làm giảm sản phẩm xuống dạng đồ họa hơn là vật thể ba chiều.
Bảng màu
Thương hiệu
- Electric Blue
#0071e3— Các nút hành động được tô màu là điểm nhấn màu sắc duy nhất trong giao diện người dùng, được sử dụng một cách tiết kiệm cho các lời kêu gọi hành động. - Link Blue
#0066cc— Liên kết văn bản nội tuyến, liên kết có mũi tên và dấu ngoặc kép. - Citrus Gradient
#3b3b23— Một kiểu hoàn thiện khác đã trở thành đặc điểm nổi bật của sản phẩm là lớp nền tối màu chuyển dần sang các điểm nhấn màu vàng xanh.
Trung lập
- Primary Ink
#1d1d1f— Tiêu đề, nội dung văn bản và nhãn nút đều có tông màu chủ đạo trên tất cả các bề mặt; nền của hình ảnh sản phẩm chính chuyển tiếp mượt mà từ màu #1d1d1f đồng nhất ở phía trên xuống màu xanh lam. - Mid Gray
#707070— Văn bản phụ, trạng thái điều hướng không hoạt động, nhãn giao diện người dùng bị tắt tiếng. - Deep Gray
#474747— Văn bản điều hướng và biểu tượng được sử dụng cỡ chữ trung bình. - Hairline
#d6d6d6— Ranh giới giữa các phần và các yếu tố giao diện người dùng rất mỏng. - Canvas
#f5f5f7— Nền các phần xen kẽ - một dải màu xám ngăn cách các vùng màu trắng. - Paper
#ffffff— Bề mặt thẻ, hình nền trang chính, văn bản nút trên nền tối.
Kiểu chữ
Từ 12 đến 96px · 10 bước
- SF Pro Display — thay thế: Inter · phác thảo 600, 700 · Tiêu đề chính và tiêu đề phụ để hiển thị — độ dày phông chữ 700, kích thước 80–96px với khoảng cách chữ âm -1.44px tạo nên hiệu ứng "tiêu đề khổng lồ nổi bật trên nền trắng" đặc trưng của Apple. Các tùy chọn thay thế: Inter, system-ui
- SF Pro Display — thay thế: Inter · phác thảo 600 · Tiêu đề phần, tiêu đề thẻ, tiêu đề phụ - phông chữ 600 với khoảng cách chữ hơi rộng tạo cảm giác ấm áp và thân thiện ở kích thước trung bình, khác với các tiêu đề ngắn ở trên.
- SF Pro Text — thay thế: Inter · phác thảo 400, 500, 600 · Đối với văn bản chính, điều hướng, đoạn văn hỗ trợ và chú thích ngắn, phông chữ có chỉ số 400 ở kích thước 17px là phông chữ chính. Khoảng cách chữ âm cho phép văn bản chính ngắn gọn hơn trên các trang chứa nhiều thông tin.
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-10px |
| Bán kính nút | 980px |
| Bán kính thẻ | 28px |
| Bóng tối | không - viền thay vì bóng |
| Giữa các phần | 100-120px |
| Chiều rộng trang | 1200px |
AI sẽ xây dựng trang web của bạn theo phong cách Apple (España) 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ự
- Airbnb — Một bức tường trưng bày màu trắng tĩnh lặng với một chiếc bookmark màu đỏ san hô duy nhất.
- Peak Design — Bức tường trưng bày, được chiếu sáng một phần.
- Ramp — Bộ phận tài chính biên tập, những trang giấy đen trắng với một điểm nhấn màu neon duy nhất. Bề mặt gần như đơn sắc của ấn phẩm, nơi một nét vẽ màu xanh lá cây tươi sáng biến mọi tương tác thành tín hiệu tiền tệ.
- 099 SUPPLY — Một bức tường trưng bày đầy những vật thể đen trắng.
- Orderful — Bảng điều khiển quản lý hậu cần công nghiệp - Một danh sách kiểm tra điều phối hậu cần được in bằng mực đen và đỏ, mỗi trang đủ riêng biệt để một người điều hành có thể đọc to những thông tin quan trọng.
- Apple (España) — tủ trưng bày màu trắng
- teenage engineering — Danh mục sản phẩm công nghiệp về đèn chiếu sáng studio - sản phẩm là đối tượng duy nhất nổi bật trên trang, và mọi thứ khác đều được thảo luận xung quanh nó.
- Apple (España) — Khung cửa sổ phòng trưng bày trong màn sương sớm
- Lightship — Một bức tranh sống động về con đường rộng mở. Những bức tường màu kem ấm áp được trang trí bằng những bức ảnh phong cảnh khổ lớn được gắn sát nhau, chữ đen mảnh mai gần như không nhìn thấy trên khung ảnh, và một điểm nhấn màu cam tươi sáng phá vỡ gam màu đơn sắc như một đống lửa giữa đồng cỏ.
- Custo — Một phòng trưng bày màu xám kim loại với phông chữ nguyên khối. Một không gian trưng bày tông màu xám xanh trầm, nơi một vật thể tối màu duy nhất và phông chữ 57px tự nói lên tất cả.
- Silencio — Một căn phòng trắng với những hiện vật lơ lửng. Một không gian trưng bày được làm từ giấy màu ấm, nơi mỗi yếu tố chiếm vị trí riêng của nó trên nền âm bản, và sự tĩnh lặng là một quyết định thiết kế có chủ ý.
- ORYZO AI — Một bài luận ảnh về phòng tối. Một vật thể đơn độc lơ lửng trong bóng tối ấm áp, phông chữ màu kem là điểm nhấn duy nhất.