Thiết kế · Cập nhật · 2026-09-02

Thiết kế icon ứng dụng: điều gì khiến nó nhận ra ngay lập tức

Nhận ra trong một cái nhìn" đến từ đâu: một biểu tượng, khoảng trống như một cấu trúc, chia sẻ công việc với hệ thống, sự tiết chế trong màu sắc — Apple và Google thực ra kể cùng một câu chuyện.

Những icon tốt chung một chất: không cần bạn tìm — chúng tự nhảy vào mắt. Apple và Google mỗi bên viết hẳn một cuốn cẩm nang về icon, nhưng mổ ra đặt cạnh nhau thì cả hai đang kể cùng một điều: trên màn hình chính nơi trăm icon giành nhau ánh nhìn, vì sao icon của bạn lại được nhận ra trong một cái chớp mắt? Bài viết này mổ xẻ câu hỏi ấy.

Sức mạnh của một biểu tượng duy nhất

Khả năng nhận diện bắt đầu từ "ít". Những icon trụ vững gần như luôn chỉ có một nhân vật chính: một dấu chân, một vòng tròn, một chữ cái. Ngay khi biểu tượng sinh sôi, các icon trên màn hình đẩy nhau và từng chi tiết thừa thêm vào lại làm loãng ký ức. Trước tiên hãy nén tinh thần sản phẩm vào một yếu tố duy nhất, rồi vẽ nó bằng ít hình khối nhất có thể.

Hình to, nét đậm. Icon thường được nhìn ở cỡ bốn mươi pixel; ở cỡ này nét mảnh biến mất, góc nhọn loang ra, khung viền nét vỡ thành nhiễu — trong khi khối màu đặc vẫn giữ nguyên bóng hình. Một trình tự kiểm chứng thực dụng: nhìn trước xem nó đứng vững ở 48px chưa, rồi mới phóng to thêm chi tiết. Vẽ bằng vector chừng nào có thể (SVG/PDF, chữ đã chuyển thành nét): phóng to thu nhỏ thoải mái, bóng hình sẽ không phản bội bạn.

Khoảng trống là một cấu trúc

Hình dạng cuối cùng của icon không do người thiết kế quyết định: hệ thống sẽ cắt nó thành hình tròn, hình vuông bo góc, đôi khi là hình dạng riêng của từng nhà sản xuất. Vì thế khoảng trống không phải sở thích thẩm mỹ, mà là đòi hỏi kết cấu. Con số của Google cho tham chiếu cụ thể nhất: khổ vẽ 108dp, vòng ngoài 18dp vốn đã dành cho mặt nạ và chuyển động parallax, chủ thể phải nằm gọn trong vùng an toàn 66dp ở giữa. Tính ra, chủ thể chỉ chiếm khoảng 60% phần trung tâm khổ vẽ. Apple diễn đạt khác nhưng yêu cầu cùng một điều: chủ thể ở giữa, ngoài tầm với của bất kỳ mặt nạ nào.

Điều này cũng giải thích vì sao logo hình học không nên cố dàn đầy khổ vẽ. Khi chính hình khối là tài sản thương hiệu, đặt nó giữa lưới keyline và giao xung quanh cho màu nền lại cho nó nhiều cá tính hơn, chứ không kém; tranh minh họa là thái cực ngược lại, tự nhiên sinh ra để tràn viền.

Hệ thống là nhà thiết kế thứ hai

Icon hiện đại là tác phẩm dở dang. Sau khi bàn giao, hệ thống tiếp tục vẽ: góc bo do hệ thống cắt, bóng đổ do hệ thống thêm, còn Liquid Glass của iOS phủ lên ánh gương và khúc xạ. Việc của người thiết kế là chuẩn bị một mặt nền tốt cho nhà thiết kế thứ hai này — nguyên liệu tràn viền, cạnh sạch, lớp trước với bóng hình sắc không làm mềm — để ánh sáng và bóng của hệ thống có chỗ đáp xuống.

Chiều sâu đi theo cùng một logic: đừng giả lập bằng hiệu ứng, hãy để dành nó bằng kết cấu. Trong lớp trước, tách trước sau bằng chênh lệch độ đục (icon Photos của Apple là ví dụ kinh điển trong sách giáo khoa), hoặc để các hình đặc chồng lên nhau — chiều sâu tự xuất hiện. Ánh sáng và bóng do bạn tự vẽ là tĩnh, và sẽ mãi va chạm với thứ ánh sáng động của hệ thống.

Tiết chế và buông trong màu sắc

Nền là không gian thở của icon; một màu phẳng hay dải màu đơn giản là đủ. Nhiệm vụ của nó là làm nổi chủ thể, không phải cướp cảnh. Đen nguyên chất là ngoại lệ duy nhất cần để mắt — nó tan vào hình nền tối; mở đen sáng lên một bậc.

Màu bị thử thật sự ở các biến thể diện mạo. iOS cung cấp những dạng màn hình tối, trong suốt và tô màu, và giữa các biến thể chỉ nên đổi sắc thái màu — không bao giờ đổi yếu tố. Nếu người dùng ngừng nhận ra bạn ngay khoảnh khắc đổi diện mạo, toàn bộ thiết kế trước đó đổ sông đổ bể. Icon theo chủ đề của Android đẩy thử thách này tới cực hạn: hệ thống thu hết màu của bạn, chỉ giữ lại một lớp đơn sắc để nhuộm theo hình nền — bóng hình vì thế phải tự đứng vững khi không còn một chút màu nào.

Sự rút lui của chữ

Chữ là yếu tố dễ bị suy nghĩ quá đà nhất trong một icon: nhỏ quá không đọc được, bị loại khỏi khả năng tiếp cận và bản địa hóa — hơn nữa tên ứng dụng vốn đã ngồi cạnh icon. Nếu thương hiệu thật sự cần một monogram một chữ cái, hãy vẽ nó như một hình khối, đừng sắp như chữ in. Cùng lý luận đó áp dụng cho ảnh chụp và ảnh màn hình giao diện — chi tiết mảnh của chúng sụp đổ ở kích thước thật — và cho bóng hình phần cứng, điều Apple cấm rõ ràng.

Trở về ánh nhìn duy nhất ấy

Từ biểu tượng đến màu sắc, mọi chi tiết phục vụ cùng một khoảnh khắc: ánh mắt người dùng quét qua màn hình chính. Khổ vẽ tràn viền, chủ thể ở giữa, cạnh sạch, màu tiết chế, bóng hình tự đứng — làm được thế, hệ thống sẽ vui vẻ vẽ nửa còn lại.

Tài liệu tham khảo

Kiểm chứng ngày 2026-09-02

Quay lại danh sách