Biểu tượng hộp thoại xuất hiện trong các hộp thoại bật lên để nhắc người dùng tương tác. Các mẫu này sử dụng hiệu ứng chuyển màu sáng và bóng bên trong để nổi bật trên nền tối.
Như mô tả trong phần Cung cấp nhóm biểu tượng cụ thể theo mật độ, bạn nên tạo các nhóm biểu tượng riêng biệt cho các màn hình có mật độ thấp, trung bình và cao. Điều này đảm bảo rằng các biểu tượng sẽ hiển thị đúng cách trên nhiều loại thiết bị mà bạn có thể cài đặt ứng dụng. Hãy xem Bảng 1 để biết danh sách các kích thước biểu tượng hoàn thành được đề xuất cho từng mật độ. Ngoài ra, hãy xem Mẹo dành cho nhà thiết kế để biết các đề xuất về cách làm việc với nhiều nhóm biểu tượng.
Bảng 1. Tóm tắt kích thước biểu tượng hộp thoại đã hoàn thành cho từng mật độ trong số 3 mật độ màn hình chung.
ldpi (120 dpi)(Màn hình có mật độ điểm ảnh thấp) |
mdpi (160 dpi)(Màn hình có độ phân giải trung bình) |
hdpi (240 dpi)(Màn hình có độ phân giải cao) |
xhdpi (320 dpi)(Màn hình có độ phân giải siêu cao) |
|
|---|---|---|---|---|
| Kích thước biểu tượng hộp thoại | 24 x 24 pixel | 32 x 32 pixel | 48 x 48 pixel | 64 x 64 pixel |
Hình ảnh hoàn thiện phải được xuất dưới dạng tệp PNG có nền trong suốt. Không sử dụng màu nền.
Các mẫu để tạo biểu tượng trong Adobe Photoshop có trong Icons Package (Gói mẫu biểu tượng).
Tất cả phiên bản Android
Các nguyên tắc sau đây mô tả cách thiết kế biểu tượng hộp thoại cho mọi phiên bản nền tảng Android.
Cấu trúc
- Biểu tượng hộp thoại có khung an toàn 1 pixel. Hình dạng cơ sở phải nằm vừa trong khung an toàn, nhưng khử răng cưa của hình tròn có thể chồng lên khung an toàn.
- Tất cả các kích thước được chỉ định trên trang này đều dựa trên kích thước bảng vẽ có kích thước 32 x 32 pixel trong Adobe Photoshop. Giữ 1 pixel khoảng đệm xung quanh hộp giới hạn bên trong mẫu Photoshop.
|
Hình 1. Tạo khung an toàn và tô chuyển màu cho các biểu tượng hộp thoại. Kích thước biểu tượng là 32x32. |
Ánh sáng, hiệu ứng và bóng
Biểu tượng hộp thoại có dạng phẳng và như hình ảnh. Để nổi bật trên nền tối, chúng được tạo nên bằng cách sử dụng độ dốc sáng và bóng bên trong.
|
Hình 2. Ánh sáng, hiệu ứng và bóng cho các biểu tượng hộp thoại.
|
Từng bước
|