Biểu tượng chất lượng cao cho các ứng dụng của bạn.
Một biểu tượng ứng dụng iOS cao cấp dành cho ứng dụng chạy bộ và thể hình, nổi bật với hình tượng người chạy bộ trừu tượng cách điệu đang chuyển động, được tạo thành từ những dải ruy băng chuyển màu uyển chuyển mang sắc cam san hô tràn đầy năng lượng chuyển dần sang màu hồng sẫm (magenta) rực rỡ. Hình tượng gợi lên tốc độ và đà lao về phía trước với các vệt chuyển động kéo theo phía sau. Phông nền là màu xanh hải quân (navy blue) thẫm với hiệu ứng chuyển màu tỏa tròn (radial gradient) sáng hơn một cách tinh tế ở phía sau nhân vật. Năng động, tràn đầy sinh lực, truyền cảm hứng chinh phục. Ánh sáng dịu nhẹ kèm quầng sáng tỏa nhẹ (glow) tinh tế bao quanh nhân vật. Định dạng hình vuông bo góc, kích thước 1024x1024px. hãy tuân thủ các thông số kỹ thuật dưới đây và các mẫu thiết kế biểu tượng ví dụ được đính kèm: Các thông số kỹ thuật này định nghĩa ngôn ngữ thị giác của những biểu tượng ứng dụng hiện đại, cao cấp như thường thấy trên các ứng dụng iOS/macOS hàng đầu. Mục tiêu là tạo ra những biểu tượng mang cảm giác trau chuốt, dễ nhớ và xứng tầm với một sản phẩm chủ lực (flagship). --- ## 1. Khung vẽ & Hình dạng (Canvas & Shape) ### Hình dạng Cơ sở - **Định dạng:** Hình vuông với các góc bo tròn liên tục (hình "squircle" của iOS) - **Bán kính Góc bo:** Khoảng 22-24% chiều rộng biểu tượng (mô phỏng đường cong superellipse của Apple) - **Tỷ lệ Khung hình:** 1:1 - **Độ phân giải Khuyến nghị:** 1024×1024px (thu nhỏ xuống các kích thước bé rất sắc nét) ### Vùng An toàn (Safe Zone) - Giữ các yếu tố chính nằm gọn trong 80% vùng trung tâm của khung vẽ - Cho phép các hiệu ứng tinh tế (quầng sáng, bóng đổ) tiến sát ra viền nhưng không bị cắt cụt (clip) --- ## 2. Xử lý Phông nền (Background Treatments) ### Nền Đơn sắc (Solid Backgrounds) - **Tối/Đen:** Đen thuần khiết (#000000) đến xám than đậm (#1C1C1E) — tạo chiều sâu kịch tính, làm nổi bật các chi tiết bên trên - **Đơn sắc Rực rỡ:** Đổ màu đơn có độ bão hòa cao (xanh dương điện tử #007AFF, cam ấm #FF9500) - **Nền Chuyển màu (Gradient):** Chuyển màu tinh tế từ trên xuống dưới hoặc tỏa tròn từ tâm giúp tăng chiều sâu ### Các Loại Gradient (khi sử dụng) | Loại | Mô tả | Ví dụ | |------|-------------|---------| | Tuyến tính (Linear) | Chuyển màu mềm mại, thường sáng hơn ở phía trên | Gradient bầu trời xanh | | Tỏa tròn (Radial) | Hiệu ứng phát sáng ở tâm, tối dần ra các cạnh | Hiệu ứng đèn rọi (Spotlight) | | Theo góc (Angular) | Chuyển màu quét xoay vòng | Bề mặt ánh xà cừ (Iridescent) | ### Kết cấu Bề mặt (Tinh tế) - Các đường kẻ dọc/ngang mảnh mịn tạo cảm giác kim loại hoặc sợi vải - Hạt nhiễu (noise grain) ở độ mờ 1-3% tạo sự ấm áp tự nhiên - Tránh các kết cấu quá nặng nề làm cạnh tranh sự chú ý với biểu tượng chính --- ## 3. Bảng màu (Color Palette) ### Đặc điểm Bảng màu Chính - **Độ bão hòa Cao:** Màu sắc sống động nhưng không chói gắt kiểu đèn neon - **Tông Tối Giàu Chiều sâu:** Màu đen và xanh hải quân đóng vai trò nổi bật - **Điểm Sáng Chọn lọc:** Các màu nhấn (accent colors) được sử dụng tiết chế để tạo điểm nhấn thị giác mạnh ### Các Họ Màu Khuyến nghị #### Phổ Màu Lạnh (Cool Spectrum) ``` Navy/Deep Blue: #0A1628, #1A2744, #2D4A7C Electric Blue: #007AFF, #5AC8FA, #64D2FF Purple/Violet: #5E5CE6, #BF5AF2, #AF52DE Teal/Cyan: #30D5C8, #5AC8FA, #32ADE6 ``` #### Phổ Màu Ấm (Warm Spectrum) ``` Orange: #FF9500, #FF6B35, #FF3B30 Pink/Coral: #FF6B8A, #FF2D55, #FF375F Peach/Salmon: #FFACA8, #FF8A80, #FFB199 ``` #### Màu Trung tính (Neutrals) ``` True Black: #000000 Soft Black: #1C1C1E, #2C2C2E White: #FFFFFF Off-White: #F5F5F7, #E5E5EA ``` ### Quy tắc Hòa sắc (Color Harmony Rules) - Giới hạn từ 2-3 màu chủ đạo trên mỗi biểu tượng - Sử dụng mối quan hệ màu bổ túc (complementary) hoặc tương đồng (analogous) - Một màu nên chiếm ưu thế chủ đạo (60%), màu phụ (30%), màu nhấn (10%) --- ## 4. Ánh sáng & Chiều sâu (Lighting & Depth) ### Nguồn sáng - **Vị trí:** Phía trên bên trái hoặc chiếu thẳng từ đỉnh xuống (nhất quán ở góc 45°) - **Chất lượng:** Mềm mại, khuếch tán — không có bóng đổ sắc gắt - **Tạo ra:** Những mảng bắt sáng tinh tế ở bề mặt phía trên, bóng đổ dịu ở phía dưới ### Kỹ thuật Tạo Chiều sâu #### Vùng sáng (Highlights) - Dải chuyển màu trắng/sáng dịu trên các cạnh đỉnh của hình khối 3D - Phản xạ gương (Specular reflections) dưới dạng các đốm sáng nhỏ (không lấn át tổng thể) - Ánh sáng viền (Rim lighting) trên các cạnh hướng về phía nguồn sáng #### Bóng đổ (Shadows) - **Bóng đổ ngoài (Drop Shadows):** Mềm, khuếch tán, độ mờ 10-20%, lệch nhẹ theo trục Y - **Bóng đổ trong (Inner Shadows):** Rất tinh tế, tạo hiệu ứng lõm sâu xuống - **Bóng tiếp xúc (Contact Shadows):** Bóng tối hơn, thu hẹp sát ngay bên dưới vật thể #### Phân lớp (Layering) - Các phần tử nên có cảm giác như đang lơ lửng phía trên phông nền - Sử dụng phối cảnh khí quyển (các phần tử ở xa hơi mờ sương hơn một chút) - Các hình khối xếp chồng lên nhau tạo ra sự phân cấp tự nhiên --- ## 5. Ký hiệu & Hệ thống Hình tượng (Symbol & Iconography) ### Các Hướng Tiếp cận Phong cách #### A. Vật thể Không gian Ba chiều / 3D (Dimensional/3D Objects) - Hình khối bo tròn, mềm mại với thể tích rõ ràng - Dải chuyển màu tinh tế gợi lên độ cong bề mặt - Ví dụ: Máy bay giấy, cuốn sách đang mở, các khối cầu #### B. Thiết kế Phẳng có Gợi ý Chiều sâu (Flat with Depth Cues) - Các hình dạng đơn giản hóa kết hợp đổ bóng / bắt sáng có tính toán chiến lược - Hình học gọn gàng với dải chuyển màu nhẹ - Ví dụ: Biểu tượng ngọn lửa, mặt la bàn #### C. Trừu tượng / Hình học (Abstract/Geometric) - Các hình khối bán trong suốt xếp chồng lên nhau - Các hình thái đan cài vào nhau tạo sự thú vị về thị giác - Ví dụ: Các hình thoi chồng lớp, bố cục hình tam giác #### D. Hiệu ứng Kính mờ / Bán trong suốt (Glassmorphic/Translucent) - Hiệu ứng kính mờ (frosted glass) có làm nhòe hậu cảnh - Các hình khối mang cảm giác xuyên thấu - Khúc xạ tinh tế và hiệu ứng loang màu nhẹ ### Đặc tính của Ký hiệu - **Sự đơn giản:** Có thể nhận diện rõ ràng ngay cả ở kích thước nhỏ 16×16px - **Sự cân bằng:** Trọng lượng thị giác đặt ở tâm hoặc tạo thế năng động có chủ đích - **Tính độc đáo:** Tránh cảm giác giống những hình mẫu clip-art đại trà - **Tính ẩn dụ:** Ký hiệu liên hệ rõ ràng tới chức năng của ứng dụng ### Tỷ lệ Kích thước Ký hiệu Khuyến nghị - Ký hiệu chính: chiếm 50-70% khung vẽ biểu tượng - Chừa khoảng thở (breathing room) thoáng đãng xung quanh các cạnh - Căn giữa theo thị giác (optical centering — có thể hơi khác so với tâm toán học thuần túy) --- ## 6. Chất liệu & Đặc tính Bề mặt (Material & Surface Qualities) ### Bề mặt Lì (Matte Surfaces) - Chuyển màu dịu nhẹ không có các điểm lóe sáng sắc cạnh - Có thể điểm xuyết kết cấu hạt rất nhẹ - Màu sắc trông đặc, đằm và vững chãi ### Bề mặt Bóng / Phản chiếu (Glossy/Reflective Surfaces) - Các vùng bắt sáng và phản chiếu rõ nét - Tăng độ tương phản giữa vùng sáng và vùng tối - Gợi liên tưởng đến thủy tinh, nhựa bóng hoặc kim loại đánh bóng ### Bề mặt Kim loại (Metallic Surfaces) - Gradient tuyến tính hoặc tỏa tròn mô phỏng ánh kim - Tông màu lạnh cho bạc/crôm, tông ấm cho vàng/đồng - Các đường vân xước mảnh tùy chọn ### Thủy tinh / Bán trong suốt (Glass/Translucent) - Giảm độ đục (opacity ở mức 60-85%) - Hiệu ứng làm mờ (blur) trên các phần tử nằm phía sau - Ám màu nhẹ kèm theo các cạnh viền sáng - Quầng sáng nội bên trong (inner glow) tinh tế ### Giấy / Vải (Paper/Fabric) - Màu sắc dịu nhẹ, trầm ấm - Kết cấu bề mặt cực kỳ tinh tế - Bóng đổ nhẹ nhàng gợi lên độ mềm dẻo, uốn lượn --- ## 7. Hiệu ứng & Độ hoàn thiện (Effects & Polish) ### Hiệu ứng Phát sáng (Glow Effects) - **Phát sáng ngoài (Outer Glow):** Quầng sáng dịu bao quanh các phần tử sáng, độ mờ 5-15% - **Phát sáng trong (Inner Glow):** Ánh sáng viền tinh tế bên trong, tạo cảm giác có thể tích khối - **Phát sáng màu (Color Glow):** Quầng sáng nhuốm màu trùng với màu của phần tử (tạo bầu không khí) ### Phản chiếu (Reflections) - Bóng phản chiếu mặt sàn tinh tế ngay bên dưới các vật thể đang lơ lửng (rất mờ) - Phản chiếu môi trường trên các bề mặt bóng loáng - Các đốm sáng phản xạ gương gợi mở vị trí nguồn sáng ### Chuyển màu Bên trong Hình khối (Gradients Within Shapes) - Gradient đa điểm dừng (multi-stop) cho các dải chuyển màu phức tạp - Gradient tỏa tròn để tạo vẻ ngoài hình cầu - Gradient lưới (Mesh gradients) cho sự pha trộn màu sắc uyển chuyển, tự nhiên ### Làm mờ & Độ sâu Trường ảnh (Blur & Depth of Field) - Làm mờ hậu cảnh cho các bố cục phân lớp - Làm mờ Gaussian (Gaussian blur) ở mức 5-20px để tạo hiệu ứng chiều sâu không gian - Chỉ sử dụng làm mờ chuyển động (motion blur) nếu muốn gợi tả tốc độ di chuyển --- ## 8. Nguyên tắc Bố cục (Composition Principles) ### Cân bằng Thị giác - **Đặt giữa tâm (Centered):** Ký hiệu nằm ở tâm thị giác (cổ điển, vững vàng) - **Năng động (Dynamic):** Độ lệch nhẹ khỏi tâm tạo ra năng lượng và sự chuyển động - **Bất đối xứng (Asymmetric):** Sự mất cân bằng có chủ đích nhưng có đối trọng thị giác bù lại ### Không gian Âm (Negative Space) - Khoảng trống / khoảng thở rộng rãi - Phông nền là một phần của thiết kế, chứ không chỉ là chỗ trống vô nghĩa - Không gian âm có thể khéo léo tạo thành các hình khối phụ thứ cấp ### Tiêu điểm (Focal Point) - Một khu vực rõ ràng có độ tương phản / độ chi tiết cao nhất - Ánh mắt người xem phải chạm vào phần tử quan trọng nhất đầu tiên - Các phần tử bổ trợ lùi lại phía sau về mặt thị giác ### Tương phản Tỷ lệ (Scale Contrast) - Sự kết hợp giữa các phần tử lớn và nhỏ tạo nên sự thú vị - Ký hiệu chính chiếm ưu thế áp đảo, các chi tiết phụ giữ ở mức tinh tế - Tránh làm rối mắt bằng việc đặt nhiều phần tử có kích thước ngang bằng nhau --- ## 9. Các Biến thể Phong cách (Style Variations) ### Tối giản Nền tối (Minimal Dark) - Phông nền màu đen hoặc rất tối - Một phần tử sáng duy nhất hoặc ký hiệu đơn sắc - Độ tương phản cao, cảm giác ấn tượng giàu kịch tính - Ví dụ: Biểu tượng ngọn lửa, biểu đồ chứng khoán ### Gradient Rực rỡ (Vibrant Gradient) - Phông nền chuyển màu đa sắc - Ký hiệu màu trắng hoặc sáng màu đặt nổi lên trên - Cảm giác tràn đầy năng lượng, hiện đại - Ví dụ: Telegram, ứng dụng Sách (Books) ### Dịu nhẹ & Tươi sáng (Soft & Light) - Phông nền sáng sủa, thoáng đãng (màu trắng, màu phấn pastel) - Các ký hiệu nhiều màu sắc đi kèm bóng đổ mềm mại - Cảm giác thân thiện, dễ gần - Ví dụ: Ứng dụng đo độ cao Altitude, các biểu tượng cử chỉ ### Kính mờ (Glassmorphic) - Các phần tử bán trong suốt, phủ sương mờ - Các hình khối xếp lớp với độ đục trong khác nhau - Cảm giác đương đại, tinh xảo - Ví dụ: Biểu tượng Phím tắt (Shortcuts), các hình khối giao nhau ### Kết xuất 3D (3D Rendered) - Các vật thể 3D chân thực - Hệ thống ánh sáng và chất liệu phức tạp - Cảm giác cao cấp, sống động như có thể chạm vào được - Ví dụ: Khối cầu, máy bay, cuốn sách
