Chuẩn bị ô điều hướng nhỏ với biểu tượng rõ, khoảng cách đều và khả năng nhận diện tốt ở kích thước thật.
1
Chọn artwork đơn giản
Chọn biểu tượng, mascot hoặc chi tiết sản phẩm có cạnh rõ và hình trung tâm mạnh, vẫn dễ nhận biết sau khi thu nhỏ.
2
Đặt khoảng cách an toàn cho mặt nạ
Căn artwork vào giữa và chừa đủ lề cho mặt nạ bo góc, trạng thái hover hoặc hiệu ứng selected.
3
Xem trước ô ứng dụng
Kiểm tra bản xuất ở kích thước giao diện thật và chú ý cạnh mờ, tương phản yếu hoặc góc quá chật.
Cách dùng thực tế của ảnh 144x144
Một ô 144x144 hiệu quả khi biểu tượng trung tâm vẫn dễ nhận biết sau mặt nạ và trạng thái chọn. Hãy giữ khoảng góc an toàn và trọng lượng thị giác nhất quán.
01
Lập bố cục 144x144 cho ô ứng dụng và lối tắt
144x144 tạo ô điều hướng vuông nhỏ. Cân bằng biểu tượng trung tâm với đủ lề cho trạng thái hover hoặc selected.
Ô điều hướng nhỏ với đầu ra chính xác 144x144
Kiểm tra tỷ lệ chủ thể và khoảng cách mép ở kích thước thật
PNG phù hợp artwork phẳng; WebP có thể giảm dung lượng ô minh họa
Thiết lập 144x144
Chiều rộng
144px
Chiều cao
144px
144x144 px
02
Tạo avatar nhỏ rõ ràng
Cắt chân dung hoặc mascot cho menu tài khoản, danh sách cộng tác viên, thẻ cộng đồng và giao diện có không gian hạn chế.
Giữ khuôn mặt hoặc biểu tượng nổi bật
Loại bỏ chi tiết gây nhiễu gần mép
Kiểm tra khả năng nhận diện ở kích thước thật
Xem trước avatar 144x144
Không gian 144x144
KhungCắtXuất
144x144 px
Tạo avatar nhỏ rõ ràng
Chân dung hoặc mascot nhỏ gọn cho menu tài khoản và thẻ cộng đồng.
03
Chuẩn bị mẫu sản phẩm
Biến chi tiết sản phẩm, mẫu vật liệu hoặc tham chiếu màu thành các ô vuông nhất quán trong bộ chọn và danh mục nhỏ.
Giữ ánh sáng nhất quán giữa các mẫu liên quan
Giữ kết cấu hữu ích sau khi thu nhỏ
Căn chủ thể nhất quán giữa các ô
Xem trước mẫu sản phẩm 144x144
Ô ứng dụng và đồ họa điều hướng vuông nhỏ
Chi tiết sản phẩm và mẫu màu cho bộ chọn nhỏ gọn
Chuẩn bị mẫu sản phẩm
Bộ sưu tập 144x144
Xem ảnh
04
Tạo ô điều hướng vuông
Đổi kích thước artwork đơn giản cho lưới launcher, lối tắt dashboard, menu danh mục hoặc bảng điều hướng tùy chỉnh có ô bằng nhau.
Dùng hình chính mạnh và nhãn ngắn
Kiểm tra độ tương phản trên bề mặt đích
Giữ độ trong suốt bằng PNG hoặc WebP
Xem trước ô điều hướng 144x144
Ô ứng dụng và đồ họa điều hướng vuông nhỏ
Sẵn sàng kiểm tra
Tạo ô điều hướng vuông
Artwork đơn giản cho launcher, dashboard và menu danh mục.
Chuẩn bị tệp
Vùng bố cục
khung vuông nhỏ
Kích thước pixel
144x144
Câu hỏi về ảnh 144x144
Giải đáp về khoảng cách biểu tượng, lề an toàn cho mặt nạ bo góc, độ nét nguồn và định dạng cho ô ứng dụng 144x144.
Làm sao để ô 144x144 an toàn khi giao diện bo góc?
Giữ biểu tượng và huy hiệu cách các góc một khoảng an toàn rồi xem trước với cùng bán kính bo góc mà giao diện sử dụng. Nội dung chạm sát mép có thể bị che bởi mặt nạ, vòng chọn hoặc huy hiệu trạng thái.
Nguồn lớn hơn có giúp căn lại ô ứng dụng 144x144 không?
Hãy chọn nguồn vẫn đạt ít nhất 144x144 sau khi cắt. Nguồn biểu tượng lớn hơn giúp căn logo và chừa lề linh hoạt hơn, nhưng không thể khôi phục cạnh đã mờ trong bản gốc.
Chi tiết nào có thể không còn rõ sau khi thu nhỏ về 144x144?
Ở 144x144, làm nét quá mạnh có thể tạo quầng quanh cạnh và chi tiết nhỏ dễ mất khi hiển thị thật. Hãy so sánh với các ô lân cận trong giao diện thay vì chỉ nhìn bản xem trước phóng to.
WebP có phù hợp để phân phối ô ứng dụng 144x144 không?
PNG phù hợp với artwork phẳng và khoảng đệm trong suốt, còn WebP có thể giảm dung lượng cho ô minh họa. Hãy kiểm tra bản xuất 144 pixel trong giao diện thật để phát hiện cạnh halo, tương phản yếu hoặc lề trong suốt quá rộng.
Ô điều hướng có cần dùng cùng nền với các ô bên cạnh không?
Các ô không cần cùng một nền, nhưng nên có độ tương phản, tỷ lệ biểu tượng và trọng lượng thị giác tương đương. Khi nguồn khác nhau, một nền có kiểm soát hoặc lề trong suốt nhất quán giúp cả nhóm trông có chủ đích hơn.
Khi nào 144x144 phù hợp cho ô ứng dụng và lối tắt?
Chỉ dùng 144x144 khi ô giao diện đích thực sự phù hợp với kích thước này. Preset tạo một ô điều hướng vuông nhỏ, không đảm bảo tương thích với mọi mẫu hoặc dịch vụ.
Nên đặt biểu tượng trong khung 144x144 thế nào?
Giữ một biểu tượng hoặc chủ thể chính nổi bật, đồng thời chừa đủ khoảng thở cho trạng thái hover, focus hoặc selected. Kiểm tra ở kích thước thật để đường viền vẫn rõ và không trông quá lớn so với các ô lân cận.
Làm sao giữ nội dung sát mép khi tạo ô 144x144?
Nếu cạnh minh họa, huy hiệu hoặc biểu tượng phải được giữ nguyên, hãy thu nhỏ artwork một chút trong khung vuông thay vì ép cắt tràn mép. Khoảng lề này cũng bảo vệ chủ thể khỏi bo góc, vòng focus và lớp chọn.
Thay đổi kích thước ảnh theo số pixel chính xác
Chọn một kích thước pixel có sẵn để mở công cụ thay đổi kích thước với chiều rộng và chiều cao chính xác đã được thiết lập sẵn.
Tạo ô điều hướng 144x144 rõ ràng
Ở 144x144, làm nét quá mức có thể tạo viền halo quanh một ô giao diện đơn giản. Hãy kiểm tra kết quả ở kích thước thật trước khi dùng cho ô ứng dụng hoặc lối tắt điều hướng.