7 Nguyên Tắc Siêu Đơn Giản Để Thiết Kế Bộ Icon Ấn Tượng

7 Nguyên Tắc Siêu Đơn Giản Để Thiết Kế Bộ Icon Ấn Tượng

Tạo ra một bộ icon chất lượng với style riêng biệt và phù hợp với mục đích sử dụng đòi hỏi rất nhiều kinh nghiệm thực tiễn từ người designer. Tuy nhiên, bài viết này sẽ cung cấp những nguyên tắc cơ bản mà chỉ cần giữ được những thuộc tính này trong thiết kế của mình, bạn cũng có thể tạo một bộ icon đẹp và có tính ứng dụng cao.

1. Rõ ràng

Mục tiêu chính của biểu tượng là truyền đạt một khái niệm nhanh chóng. Vì vậy, hãy làm cho biểu tượng của bạn rõ ràng để nó dễ dàng truyền thông điệp của bạn.

Icons on a Prius Prime instrument cluster (Source: 2020 Manual)

Trong một loạt các biểu tượng trên, cái nào là rõ nghĩa với bạn hơn cả? Những biểu tượng không trực quan sẽ khiến bạn thấy bối rối, hãy xem một ví dụ về mức độ trực quan dưới đây:

Khi một biểu tượng sử dụng một phép ẩn dụ quá xa lạ, nó sẽ khiến người xem thấy khó hiểu. Icon nhắc nhở đeo dây đai an toàn được làm sáng lên (hình thứ 3 từ bên trái) khá đúng nghĩa và chúng ta có thể nắm bắt nó một cách nhanh chóng. Đèn báo của hệ thống trợ lực lái điện (ngoài cùng bên phải) trông khó hiểu hơn nhiều, thậm chí dẫn đến hiểu sai về ý nghĩa của biểu tượng đó.
Thông thường, một biểu tượng không rõ ràng sẽ chỉ đơn giản là khiến người khác thấy mơ hồ. Nhưng đặc biệt đối với lái xe, hiểu nhầm các chỉ số cảnh báo có thể sẽ gây nguy hiểm cho người tham gia giao thông.
Dưới đây là một vài biểu tượng quen thuộc, dễ hiểu - biểu tượng tình yêu, cảnh báo, âm nhạc và điều hướng:

Familiar metaphors from Phosphor Carbon icon family

Mũi tên là một biểu tượng thể hiện rõ các hướng đi:

NYC subway sign (Source: Standards Manual)

Một biểu tượng thành công chính là biểu tượng mà không chỉ dễ hiểu đối với một nhóm người mà còn phổ biến trên các nền văn hóa, lứa tuổi và nguồn gốc. Hãy xem xét đối tượng của bạn và sử dụng hình ảnh ẩn dụ và màu sắc gợi liên tưởng rõ ràng cho họ.
Nên nhớ rằng một biểu tượng đứng riêng biệt có thể không diễn đạt được ý của bạn khi ý tưởng đó khá trừu tượng. Trong trường hợp này, bạn có thể ghép biểu tượng với một văn bản nhỏ hoặc tìm một giải pháp khác thay thế cho việc sử dụng icon.

2. Dễ nhìn

Khi bạn đã có một biểu tượng dễ hiểu, hãy chắc chắn rằng nó còn dễ nhìn nữa.

Icons in the Amtrak mobile app

Thật khó để nhìn rõ biểu tượng Station của Amtrak (hình đầu tiên) bởi vì biểu tượng đó được vẽ quá chi tiết.

Ứng dụng Transit dưới đây cũng gặp phải vấn đề tương tự. Biểu tượng kẹp giấy trông như một vết mực bởi vì khoảng cách giữa cái kẹp giấy và tờ giấy quá nhỏ để nhìn thấy:

Icons in the Transit mobile app

Nhưng với một điều chỉnh nhỏ cũng có thể tạo sự khác biệt rất lớn:

Khi làm việc với nhiều hình khác nhau, hãy để vừa đủ không gian giữa chúng. Nhiều nét mỏng sẽ làm cho biểu tượng trông rối hơn và khó đọc nữa.
Google Maps đã làm rất tốt điều này khi thực hiện bộ icon rất dễ đọc dù ở kích thước rất nhỏ:

Google Map icons

3. Căn chỉnh

Để đảm bảo sự cân bằng cho mỗi biểu tượng, hãy căn chỉnh các thành phần của nó một cách tối ưu.

Ở biểu tượng Play này, mặc dù hình tam giác đã được đặt ở chính giữa của vòng tròn, nhưng mắt cảm nhận rằng nó vẫn không cân bằng. Phần cạnh phía bên trái của hình tam giác tạo cảm giác nặng hơn và hình tam giác đang nghiêng về bên trái.
Tương tự, các chuyên gia typo cũng đã điều chỉnh một số chữ cái để tạo ra ảo ảnh cân bằng quang học trong một kiểu chữ. Xem ví dụ về dấu chấm của chữ i và j, và 2 đầu của chữ O dưỡi đây:

Những người làm icon cũng dựa vào các điều chỉnh tương tự để tạo hiệu ứng cân bằng cho một biểu tượng. Để sửa ví dụ về nút Play, hãy dịch chuyển hình tam giác sang phải 1 chút:

Trông ổn hơn nhiều rồi đúng không?

Bài học ở đây là: Đừng chỉ tin vào các con số, hãy sử dụng mắt thường để kiểm tra sản phẩm của bạn.

4. Tinh gọn

Sự tinh gọn là cần thiết cho việc thiết kế icon bởi vì khi thiết kế các icon, chúng ta sẽ làm việc với từng hình canvas nhỏ. Vì vậy hãy sử dụng đúng mực các chi tiết nhỏ cho icon của bạn. Thay vì sử dụng biểu tượng như thế này:

(Source: Material)

Hãy sử dụng biểu tượng đơn giản như thế này:

(Source: Material)

Trong giao diện người dùng, sự tinh gọn sẽ ghi điểm và mở đường cho nội dung. Các biểu tượng của Telegram rất ngắn gọn và dễ hiểu:

Telegram icons

Đôi khi, các biểu tượng UI sẽ mang phong cách minh họa chi tiết hơn. Những biểu tượng Yelp đa tông màu này là một cách thú vị để hiển thị các món ăn phổ biến. Nhìn xem, con tôm trong biểu tượng món ăn Thái thật tinh tế!

Yelp icons by Scott Tusk

Với các biểu tượng cho các ứng dụng điện thoại hay máy tính có thể cần nhiều chi tiết với độ sâu và màu sắc nhiều hơn. Bởi vì khi người xem hiểu về nội dung của ứng dụng đó ngay khi nhìn vào icon, các biểu tượng có thể thể hiện rõ hơn về thương hiệu và sản phẩm.

Apple app icons for Procreate, Firefox, and Netflix

5. Nhất quán

Để đạt được sự hài hòa cho một bộ icon, hãy duy trì các quy tắc về phong cách trong từng icon. Trước iOS 13, các biểu tượng Apple có đủ các thể loại: icon vẽ bằng các nét, icon đặc, v.v. với vô số kích thước khác nhau:

Bạn có cảm thấy phải nheo mắt khi nhìn bộ icon này? Vì trông một số biểu tượng thì nặng nề hơn một số biểu tượng còn lại.

Bất kỳ biểu tượng nhất định nào cũng có trọng lượng hình ảnh nhất định, được xác định bởi các tham số như độ đặc, độ dày nét, kích thước và hình dạng. Hãy giữ các tham số này giống nhau cho toàn bộ icon trong một bộ để xây dựng tính nhất quán.

Gần đây, bộ icon của đã được sửa sai với sự xuất hiện của SF Symbols. SF Symbols mang một phong cách biểu tượng hơn với trọng lượng (weight) 9 và tỷ lệ (scale) 3. Từ biểu tượng đến biểu tượng khác đều mang lại cảm giác này hài hòa hơn nhiều.

Icons from Apple’s SF Symbols

Duy trì tính nhất quán là một nhiệm vụ không dễ dàng gì với một bộ icon lớn, đặc biệt là có nhiều tác giả tham gia. Nó rất cần có các nguyên tắc và quy tắc rõ ràng để tuân theo (và có thể thay đổi khi cần thiết).
Gói biểu tượng Phosphor có hơn 700 icon và được nhất quán bằng cách tuân thủ các nguyên tắc chung giống nhau và kiểm tra từng biểu tượng một cách chặt chẽ. Mặc dù mỗi biểu tượng có một hình dạng khác nhau, chúng vẫn có cùng trọng lượng và kết hợp tốt với nhau:

6. Cá tính

Mỗi bộ biểu tượng nên có một phong cách riêng. Điều gì làm cho nó độc đáo? Nó nói gì về thương hiệu? Nó tạo ra tâm trạng gì?

Các biểu tượng của Twitter trông rất mềm mại, nhẹ nhàng và sắc nét:

Các biểu tượng của Sketch trông tinh tế và thoáng đãng:

Freemoji có những icon trông rất đáng yêu, dễ thương:

7. Dễ sử dụng

Một bộ biểu tượng được thực hiện sau khi bản phác thảo được hoàn thành. Việc này đòi hỏi phải thử nghiệm và chuẩn bị thêm để đảm bảo các cộng tác viên khác có thể dễ dàng đóng góp các biểu tượng mới, nhà thiết kế sử dụng chúng trong thiết kế của họ (cho màn hình, cho việc in ấn, v.v.) và các kỹ sư để mã hóa chúng vào sản xuất.
Một bộ biểu tượng chất lượng được tổ chức có hệ thống, tài liệu rõ ràng (guideline, checking, v.v) và được thử nghiệm trong ngữ cảnh khác nhau. 
7.1 Tổ chức có hệ thống
Luôn giữ file chính ngăn nắp, đặt tên dễ hiểu và sắp xếp chúng sao cho dễ tìm. Hãy xem xét cách tốt nhất để phân loại: Theo thứ tự chữ cái? Theo kích cỡ? Theo định dạng?
Nucleo Sketch file, organized by type across pages
7.2 Tài liệu rõ ràng
- Xác định các nguyên tắc quan trọng của bộ icon:
Ví dụ về những nguyên tắc của bộ icon Phosphor:
• Rõ ràng. Điều đầu tiên và quan trọng nhất chính là sự rõ ràng. Hãy làm cho biểu tượng của bạn dễ nhận biết và dễ nhìn.
• Tinh gọn. Sử dụng càng ít chi tiết càng tốt. Hãy súc tích và có chủ ý với từng nét vẽ để truyền đạt bản chất của những icon được thể hiện.
• Có cá tính. Hãy trở nên khác biệt. Hãy nhấn nhá thêm một chút điểm khác biệt để trông bộ icon được ấm áp và gần gũi hơn.

- Liệt kê các quy tắc kỹ thuật:

Ví dụ quy tắc kỹ thuật của bộ icon Phosphor::
Sử dụng khung 48x48px
Dùng centered stroke 1.5px
Dùng các đường bo tròn
Dùng các nét liền nhau
Dùng các đoạn thằng, cung tròn, và tăng góc 15° nếu có thể
• Điều chỉnh đường cong khi cần thiết
Dùng số chẵn tăng cho các phép đo, gập xuống 1px và .5px nếu cần
Dùng các key shape sau: hình tròn 28x28px, hình vuông 25x25px, hình chữ nhật ngang 28x22px, hình chữ nhật dọc 22x28px
• Đường viền 6px
Hãy cố gắng bám sát những nguyên tắc này, và cũng có thể public ra nếu bạn muốn. Một số tài liệu tham khảo:
7.3 Thử nghiệm
Hãy kiểm tra tính nhất quán, chắc chắn rằng các biểu tượng diễn đạt đúng ý tưởng khi đặt trong bối cảnh cụ thể, ở các kích thước có liên quan. Hãy chắc chắn rằng chúng hoạt động hài hòa với hệ thống hình ảnh lớn hơn.
Đặt các biểu tượng cạnh nhau rất hữu ích trong việc chứng minh các nguyên tắc đã nêu trên được rõ ràng, dễ đọc, căn chỉnh, ngắn gọn, nhất quán và có cá tính:

Kết

Vậy là đã xong 7 nguyên tắc cơ bản cho một bộ icon hoàn chỉnh rồi. Hy vọng với những nguyên tắc này bạn sẽ có thể dễ dàng tạo nên một bộ icon tuyệt vời, đặc biệt là cho những bộ icon lớn với nhiều người đóng góp.