Apple
Một căn phòng màu trắng với một công tắc màu xanh duy nhất.
Thiết kế của Apple là một hình mẫu của sự tiết chế: một nền gần như trắng tinh, khoảng trắng rộng rãi và một điểm nhấn màu xanh lam rực rỡ duy nhất, khiến mọi thao tác đều có chủ đích. Trọng tâm chính là kiểu chữ—SF Pro, với khoảng cách chữ âm giảm dần khi kích thước tăng lên, mang lại cho tiêu đề sự rõ ràng về mặt kiến trúc mà không quá nặng nề. Sản phẩm CHÍNH LÀ thiết kế: ảnh sản phẩm lớn và hình ảnh phong cách sống chiếm ưu thế, trong khi các yếu tố mạ crôm được thu nhỏ vào các khung mỏng, thanh điều hướng trong suốt và các đường nét tinh tế. Các phần xen kẽ trên nền xám nhạt với các khối màu đầy đủ cho tài liệu quảng cáo, tạo nhịp điệu thông qua sự thay đổi về tỷ lệ chứ không phải các yếu tố trang trí.
Bố cục trang là trang toàn chiều rộng không có chiều rộng tối đa cố định cho từng vùng chứa—các phần trải dài từ cạnh này sang cạnh kia, với các khối văn bản được căn giữa ở khoảng cách xấp xỉ 980px. Thanh điều hướng là một thanh toàn cầu cố định duy nhất với một thư mục con bổ sung cho mỗi sản phẩm xuất hiện khi cuộn trang. Bố cục chính luôn được căn giữa: tên sản phẩm lớn, khẩu hiệu một dòng, hai nút dạng viên thuốc, sau đó là hình ảnh sản phẩm lấp đầy phần khung nhìn còn lại. Các phần được xếp chồng lên nhau theo chiều dọc với khoảng cách dọc rộng rãi (64px trở lên giữa các phần), xen kẽ nền màu #f5f5f7 và nền màu khác. Phần dưới cùng của trang là một hàng ngang duy nhất gồm các thẻ dịch vụ toàn chiều rộng (Apple TV+, Fitness+, Music, Arcade), mỗi thẻ là một khối ảnh với văn bản phủ lên và một nút dạng viên thuốc. Không có thanh bên, không có bố cục nội dung nhiều cột, không có bố cục bất đối xứng—mọi thứ đều được căn giữa, xếp chồng và đối xứng.
Nhiếp ảnh là ngôn ngữ hình ảnh chủ đạo. Ảnh sản phẩm được chụp trên nền trắng tinh hoặc xám nhạt, không có bối cảnh nào khác – thiết bị là ngôi sao, được tách biệt và chiếu sáng. Ảnh phong cách sống được hiển thị trên các banner toàn chiều rộng, thường với các đối tượng được cắt xén sát. Các dải màu (xanh lam nhạt, hồng, xanh lá cây) đóng vai trò là phông nền cho các phần sản phẩm, chứ không phải để trang trí. Biểu tượng được tối giản và dựa trên đường nét, dày 1-2px, cùng tông màu xám với văn bản. Không có hình minh họa, không có đồ họa trừu tượng, không có hình ảnh 3D, ngoại trừ chính ảnh sản phẩm.
Bảng màu
Thương hiệu
- Apple Blue
#0071e3— Các nút hành động được tô đầy, các trạng thái được chọn - màu sắc tương tác duy nhất được sử dụng một cách tiết kiệm để làm cho mỗi lần xuất hiện đều có ý nghĩa. - Link Blue
#0066cc— Viền hành động được làm nổi bật, các liên kết được nhúng - màu sắc bão hòa hơn màu Xanh Apple được sử dụng ở những nơi mà việc tô kín toàn bộ máy tính bảng sẽ quá lòe loẹt. - Signal Blue
#2997ff— Khung trang trí, đường viền hình ảnh, viền biểu tượng - màu xanh nhạt nhất trong hệ thống, được sử dụng để tạo không gian hơn là để tương tác với người dùng.
Trung lập
- Carbon
#1d1d1f— Văn bản chính, viền tiêu đề, đường kẻ điều hướng, viền thẻ - màu mực chủ đạo gần như đen với một chút sắc ấm. - Frost
#f5f5f7— Màu nền trang, nền văn bản chính và bề mặt chân trang đều là màu xám nhạt đặc trưng của Apple, hơi lạnh hơn so với màu trắng tinh. - Ice
#f4f8fb— Các mảng màu nổi bật, sắc thái tinh tế, chữ nút trên nền tối—một sắc xanh nhạt nhẹ nhàng làm sống động phần này mà không làm nó trở nên quá nổi bật. - Smoke
#333333— Văn bản phụ, nền điều hướng, viền nút - Một màu trung tính đa năng cho viền và biểu tượng cần nổi bật hơn so với màu xám trung bình. - Graphite
#474747— Văn bản điều hướng, đường viền điều hướng, đường viền liên kết - chiếm vị trí trung gian giữa Carbon và Smoke trong hệ thống phân cấp các phần tử. - Ash
#707070— Văn bản chân trang, viền danh sách, viền thanh điều hướng, văn bản nội dung mờ - Màu xám trung bình dành cho nội dung cần hiển thị nhưng không quá nổi bật.
Kiểu chữ
Từ 12 đến 56px · 8 bước
- SF Pro Display — thay thế: Inter · phác thảo 400, 600, 700 · Tiêu đề và văn bản cỡ lớn—kích thước 40px trở lên sử dụng định dạng hiển thị với khẩu độ hẹp hơn và khoảng cách giữa các ký tự âm mạnh hơn; kích thước 700 dành cho bố cục quảng cáo, và 400 dành cho tên sản phẩm trong nội dung biên tập.
- SF Pro Text — thay thế: Inter · phác thảo 300, 400, 600 · Văn bản chính, điều hướng, nút bấm, tiêu đề phụ — phông chữ làm việc; 400 cho văn bản chính, 300 cho tiêu đề phụ và nhãn đủ điều kiện, 600 cho các phần tử điều hướng và văn bản nút bấm; khoảng cách chữ âm giảm tỷ lệ thuận với kích thước (từ -0.022em đến 12px thành -0.01em đến 44px).
Khoảng cách và hình thức
| Mục đích | Nghĩa |
|---|---|
| Tỉ trọng | trung bình |
| Bước cơ bản | 12px |
| Bán kính nút | 980px |
| Bán kính thẻ | 8px |
| Bóng tối | không - viền thay vì bóng |
| Giữa các phần | 64px |
| Chiều rộng trang | 1440px |
AI sẽ xây dựng trang web của bạn theo phong cách Apple 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ự
- Ui — Kế hoạch lâm sàng trên giấy mờ
- ElevenLabs — Một bộ ảnh minh họa với tông màu kem ấm áp và tiêu đề tinh tế. Một cuốn sổ tay theo phong cách Bauhaus – giấy màu trắng ngà, mực đen và điểm nhấn màu tím và cam duy nhất để trưng bày sản phẩm.
- monopo saigon — Một ánh sáng lung linh, óng ánh ẩn sau sự im lặng của biên tập viên—một bộ sưu tập ảnh biên tập đơn sắc trôi nổi trên ánh sáng tan chảy.
- Awesomic — Phông chữ in hoa bằng lưới kẽm với các dấu chấm câu màu cam gợi nhớ đến những mảnh giấy vụn.
- Monad — Tạp chí kỹ thuật biên tập về giấy da ấm
- Dub — Bảng điều khiển bằng giấy gạo mờ của Link
- Seline Analytics — Một chiếc bàn phân tích yên tĩnh trên nền giấy ấm áp.
- Ventriloc — Một đài quan sát biên tập dữ liệu trên giấy ấm - một đốm than cam duy nhất làm nổi bật độ chính xác đơn sắc.
- Duolingo — Hình ảnh linh vật lớp học ngộ nghĩnh trên giấy trắng.
- Stripe — Sổ sách kế toán được viết bằng mực chàm trên kính mờ.
- Notion — Một cuốn sổ tay bằng giấy ấm áp dưới ánh nắng mặt trời giữa trưa.
- Hyer Aviation — Hoàng hôn buông xuống trong buồng lái trên nền giấy da. Bầu trời bình minh nhạt nhòa hòa quyện với logo chữ nổi cỡ thân máy bay, và một điểm nhấn màu đất sét ấm áp phá vỡ sự đơn điệu của gam màu đơn sắc.