Biểu tượng chất lượng cao cho ứng dụng của bạn.
Biểu tượng ứng dụng iOS cao cấp dành cho ứng dụng chạy bộ và thể dục, có
một hình người chạy trừu tượng được cách điệu đang chuyển động, bao gồm các dòng chảy
dải ruy băng chuyển màu trong san hô tràn đầy năng lượng chuyển sang rực rỡ
màu đỏ tươi. Hình vẽ gợi ý tốc độ và động lượng chuyển tiếp với
phần tử chuyển động kéo theo. Nền có màu xanh nước biển đậm với
ánh sáng gradient xuyên tâm tinh tế phía sau hình. năng động,
năng động, đầy khát vọng. Ánh sáng dịu nhẹ với ánh sáng tinh tế xung quanh
hình. Định dạng hình vuông tròn, 1024x1024px.
làm theo các thông số kỹ thuật bên dưới và các thiết kế biểu tượng mẫu đính kèm:
Các thông số kỹ thuật này xác định ngôn ngữ trực quan của các biểu tượng ứng dụng hiện đại, cao cấp như được thấy trong các ứng dụng iOS/macOS hàng đầu. Mục tiêu là tạo ra các biểu tượng bóng bẩy, đáng nhớ và xứng đáng là một sản phẩm chủ lực.
---
## 1. Canvas & Hình dáng
### Hình dạng cơ sở
- **Định dạng:** Hình vuông với các góc được bo tròn liên tục ("hình tròn" của iOS)
- **Bán kính góc:** Khoảng 22-24% chiều rộng biểu tượng (bắt chước siêu hình elip của Apple)
- **Tỷ lệ khung hình:** 1:1
- **Độ phân giải được đề xuất:** 1024×1024px (giảm tỷ lệ rõ ràng)
### Vùng an toàn
- Giữ các phần tử chính ở giữa 80% khung vẽ
- Cho phép các hiệu ứng tinh tế (ánh sáng, bóng tối) tiếp cận các cạnh nhưng không cắt bớt
---
## 2. Xử lý nền
### Nền vững chắc
- **Tối/Đen:** Màu đen thuần khiết (#000000) đến màu than đậm (#1C1C1E) — tạo kịch tính, làm cho các yếu tố trở nên nổi bật
- **Chất rắn sống động:** Màu đơn bão hòa (xanh điện #007AFF, cam ấm #FF9500)
- **Hình nền chuyển màu:** Chuyển màu chuyển sắc từ trên xuống dưới hoặc xuyên tâm tinh tế để tăng thêm chiều sâu
### Các loại chuyển màu (khi sử dụng)
| Loại | Mô tả | Ví dụ |
|------|-------------|----------|
| Tuyến tính | Chuyển tiếp mềm mại, thường nhẹ hơn ở đầu | Độ dốc bầu trời xanh |
| xuyên tâm | Hiệu ứng phát sáng ở trung tâm, các cạnh tối hơn | Hiệu ứng nổi bật |
| Góc cạnh | Quét chuyển màu | Bề mặt ánh kim |
### Họa tiết (Tinh tế)
- Các đường dọc/ngang mảnh tạo cảm giác kim loại hoặc vải
- Hạt nhiễu ở độ mờ 1-3% cho độ ấm tự nhiên
- Tránh họa tiết nặng cạnh tranh với biểu tượng chính
---
## 3. Bảng màu
### Đặc điểm của bảng màu chính
- **Độ bão hòa cao:** Màu sắc sống động nhưng không phải màu neon
- **Rich Darks:** Màu đen và xanh nước biển nổi bật
- **Độ sáng chọn lọc:** Màu nhấn được sử dụng ít để tạo ấn tượng
### Nhóm màu được đề xuất
#### Quang phổ mát mẻ
```
Navy/Deep Blue: #0A1628, #1A2744, #2D4A7C
Electric Blue: #007AFF, #5AC8FA, #64D2FF
Purple/Violet: #5E5CE6, #BF5AF2, #AF52DE
Teal/Cyan: #30D5C8, #5AC8FA, #32ADE6
```
#### Quang phổ ấm áp
```
Orange: #FF9500, #FF6B35, #FF3B30
Pink/Coral: #FF6B8A, #FF2D55, #FF375F
Peach/Salmon: #FFACA8, #FF8A80, #FFB199
```
####Trung tính
```
True Black: #000000
Soft Black: #1C1C1E, #2C2C2E
White: #FFFFFF
Off-White: #F5F5F7, #E5E5EA
```
### Quy tắc hài hòa màu sắc
- Giới hạn 2-3 màu chủ đạo cho mỗi biểu tượng
- Sử dụng các mối quan hệ bổ sung hoặc tương tự
- Một màu nên chiếm ưu thế (60%), màu phụ (30%), điểm nhấn (10%)
---
## 4. Ánh sáng & Độ sâu
### Nguồn sáng
- **Vị trí:** Trên cùng bên trái hoặc ngay phía trên (góc 45° nhất quán)
- **Chất lượng:** Mềm mại, khuếch tán — không có bóng gắt
- **Tạo:** Điểm sáng tinh tế trên bề mặt phía trên, bóng bên dưới
### Kỹ thuật chiều sâu
#### Điểm nổi bật
- Độ dốc màu trắng/sáng mềm mại ở các cạnh trên của hình thức 3D
- Phản xạ cụ thể dưới dạng các điểm sáng nhỏ (không quá mạnh)
- Viền chiếu sáng ở các cạnh hướng về phía ánh sáng
#### Bóng tối
- **Thả bóng:** Mềm, khuếch tán, độ mờ 10-20%, bù Y nhẹ
- **Bóng bên trong:** Rất tinh tế, thêm hiệu ứng lõm
- **Bóng tiếp xúc:** Bóng tối hơn, chặt hơn ngay bên dưới vật thể
#### Xếp lớp
- Các phần tử sẽ nổi phía trên nền
- Sử dụng phối cảnh khí quyển (các yếu tố ở xa mờ hơn một chút)
- Các hình dạng chồng chéo tạo nên thứ bậc tự nhiên
---
## 5. Biểu tượng & Hình tượng
### Phương pháp tiếp cận theo phong cách
#### A. Đối tượng có chiều/3D
- Hình dáng mềm mại, tròn trịa với khối lượng rõ ràng
- Độ dốc tinh tế gợi ý độ cong
- Ví dụ: Máy bay giấy, cuốn sách mở, quả cầu
#### B. Phẳng với tín hiệu độ sâu
- Hình dạng đơn giản hóa với bóng/điểm sáng chiến lược
- Hình học sạch sẽ với độ dốc nhẹ
- Ví dụ: Biểu tượng ngọn lửa, mặt số la bàn
#### C. Trừu tượng/Hình học
- Hình dạng mờ chồng chéo
- Các hình thức lồng vào nhau tạo sự thú vị về mặt thị giác
- Ví dụ: Các viên kim cương chồng lên nhau, bố cục hình tam giác
#### D. Thủy tinh/Mờ
- Hiệu ứng kính mờ mờ
- Hình dạng có vẻ trong suốt
- Khúc xạ tinh tế và chảy máu màu
### Đặc điểm ký hiệu
- **Đơn giản:** Có thể nhận biết ở kích thước 16×16px
- **Cân bằng:** Trọng lượng thị giác tập trung hoặc năng động có chủ ý
- **Tính độc đáo:** Tránh cảm giác nghệ thuật chung chung
- **Ẩn dụ:** Biểu tượng liên quan rõ ràng đến chức năng của ứng dụng
### Thang ký hiệu được đề xuất
- Biểu tượng chính: 50-70% canvas biểu tượng
- Để lại khoảng trống xung quanh các cạnh
- Định tâm quang học (có thể khác với tâm toán học)
---
## 6. Chất lượng vật liệu & bề mặt
### Bề mặt mờ
- Độ dốc mềm mại không có điểm nhấn sắc nét
- Kết cấu tinh tế có thể
- Màu sắc có vẻ chắc chắn và có nền tảng
### Bề mặt bóng/phản chiếu
- Phát âm nổi bật và phản xạ
- Tăng độ tương phản giữa vùng sáng và vùng tối
- Đề xuất thủy tinh, nhựa hoặc kim loại đánh bóng
### Bề mặt kim loại
- Độ dốc tuyến tính hoặc xuyên tâm bắt chước ánh kim loại
- Tông màu lạnh cho bạc/chrome, ấm cho vàng/đồng
- Đường kết cấu mịn tùy chọn
### Kính/Mờ
- Giảm độ mờ (60-85%)
- Hiệu ứng làm mờ các phần tử phía sau
- Tông màu có viền sáng
- Ánh sáng bên trong tinh tế
### Giấy/Vải
- Màu sắc nhẹ nhàng, trầm lắng
- Kết cấu rất tinh tế
- Bóng nhẹ nhàng gợi lên sự linh hoạt
---
## 7. Hiệu ứng & Đánh bóng
### Hiệu ứng phát sáng
- **Ánh sáng bên ngoài:** Quầng sáng mềm mại xung quanh các phần tử sáng, độ mờ 5-15%
- **Ánh sáng bên trong:** Ánh sáng cạnh tinh tế, tạo cảm giác ba chiều
- **Màu sáng:** Màu sáng phù hợp với màu của phần tử phát sáng (tạo bầu không khí)
### Phản ánh
- Phản chiếu sàn tinh tế bên dưới các vật thể nổi (rất mờ)
- Phản xạ môi trường trên bề mặt bóng
- Điểm nổi bật đặc biệt gợi ý nguồn sáng
### Chuyển màu trong hình dạng
- Chuyển màu nhiều điểm cho các chuyển đổi màu phức tạp
- Độ dốc xuyên tâm cho hình cầu
- Độ dốc dạng lưới cho màu hữu cơ, chất lỏng
### Độ mờ và độ sâu trường ảnh
- Làm mờ nền cho bố cục nhiều lớp
- Gaussian Blur ở 5-20px cho hiệu ứng khí quyển
- Chỉ làm mờ chuyển động nếu gợi ý chuyển động
---
## 8. Nguyên tắc sáng tác
### Cân bằng thị giác
- **Căn giữa:** Biểu tượng nằm ở trung tâm quang học (cổ điển, ổn định)
- **Động:** Độ lệch nhẹ tạo ra năng lượng và chuyển động
- **Không đối xứng:** Sự mất cân bằng có chủ ý với đối trọng thị giác
### Không gian âm
- Khoảng trắng/phòng thở rộng rãi
- Nền là một phần của thiết kế, không chỉ để trống
- Không gian âm có thể tạo thành các hình dạng thứ cấp
### Tiêu điểm
- Một vùng rõ ràng có độ tương phản/chi tiết cao nhất
- Mắt nên nhìn vào yếu tố quan trọng nhất trước tiên
- Các yếu tố hỗ trợ lùi dần về mặt thị giác
### Tỷ lệ tương phản
- Sự kết hợp giữa các yếu tố lớn và nhỏ tạo nên sự thú vị
- Biểu tượng chính chiếm ưu thế, chi tiết tinh tế
- Tránh lộn xộn với các phần tử có kích thước bằng nhau
---
## 9. Biến thể phong cách
### Tối thiểu tối thiểu
- Nền đen hoặc rất tối
- Phần tử sáng đơn hoặc ký hiệu đơn sắc
- Độ tương phản cao, cảm giác ấn tượng
- Ví dụ: Biểu tượng ngọn lửa, biểu đồ chứng khoán
### Chuyển màu rực rỡ
- Nền gradient nhiều màu
- Biểu tượng màu trắng hoặc ánh sáng trên đầu
- Mang lại cảm giác năng động, hiện đại
- Ví dụ: Telegram, ứng dụng Sách
### Mềm & Nhẹ
- Nền sáng, thoáng (trắng, phấn màu)
- Biểu tượng đầy màu sắc với bóng mềm
- Cảm giác thân thiện, dễ gần
- Ví dụ: Ứng dụng Độ cao, biểu tượng cử chỉ
### Thủy tinh
- Các chi tiết mờ, mờ
- Hình dạng lớp với độ mờ khác nhau
- Cảm giác hiện đại, tinh tế
- Ví dụ: Biểu tượng phím tắt, hình khối chồng chéo
### Kết xuất 3D
- Vật thể 3D thực tế
- Ánh sáng và vật liệu phức tạp
- Cảm giác cao cấp, hữu hình
- Ví dụ: Quả cầu, máy bay, cuốn sách