Hôm nay, Thứ Ba ngày 9 tháng 6 năm 2026
Thứ Sáu, 06/01/2012 - 10:41:22
(3751 lượt xem)
10 sai lầm trong thiết kế biểu tượng.

Phê bình công việc của người khác là điều luôn dễ dàng hơn việc bạn tự tạo ra cho mình một cái gì đó thực sự thú vị. Nhưng nếu bạn áp dụng một phương pháp tiếp cận có hệ thống vào công việc phê bình, lập một danh sách có đánh số và hình minh họa được chuẩn bị công phu thì nó lại được coi như là một bản phân tích đầy đủ chính thức! Theo ý kiến của tôi, thiết kế biểu tượng đang trải qua giai đoạn chuyển tiếp. Một mặt độ phân giải màn hình ngày càng tăng, do đó chất lượng các biểu tượng ngày càng được tăng cường. Mặt khác chúng ta vẫn còn đó những điểm ảnh cũ kỹ nhưng rất tốt. Những biểu tượng có kích thước 16 × 16 và thậm chí nhỏ hơn vẫn còn được sử dụng rộng rãi. Và như vậy, sau đây là những sai lầm phổ biến nhất mà ta thường thấy trong thiết kế biểu tượng ...

1. Sự phân biệt giữa các biểu tượng không thật đầy đủ

Đôi khi trong một tập hợp các biểu tượng, chúng ta sẽ có các biểu tượng trông giống nhau và như thế thì rất khó để biết cái nào là cái nào. Nếu bạn bỏ lỡ những lời chú giải, bạn có thể dễ dàng lẫn lộn các biểu tượng với nhau.

 Sai lầm 1

 Các biểu tượng từ phần Tiện ích (Utilities) trong hệ điều hành Mac OS X., tôi luôn lẫn lộn chúng với nhau và từ đó kích
hoạt sai các ứng dụng. Vấn đề càng trở nên trầm trọng hơn khi ta có những biểu tượng được hiển thị trên màn hình với kích thước nhỏ.

2. Có quá nhiều yếu tố trong một biểu tượng

Biểu tượng càng đơn giản và vắn tắt thì càng tốt. Sẽ là thích hợp hơn nếu bạn giữ cho số lượng các đối tượng trong một biểu tượng đơn lẻ luôn ở mức tối thiểu. Tuy nhiên các nhà thiết kế của Microsoft, lấy cảm hứng từ các định dạng mới của các biểu tượng được mô tả trong Windows Vista, quyết định mạnh dạn bước tới và đã vẽ những biểu tượng cồng kềnh để biện minh cho ngân sách cồng kềnh của họ:

 Sai lầm 2
Mỗi biểu tượng trình bày cho chúng ta một câu chuyện nhỏ với một cốt truyện gắn bó chặt chẽ với nhau. Vấn đề là ở một kích thước nhỏ bé bạn không thể thể hiện được những gì cần được mô tả. Ngay cả ở kích thước lớn hơn thì cũng sẽ không phải là điều luôn luôn dễ dàng để ta có thể giải mã các biểu tượng.

3. Những yếu tố không cần thiết

Một biểu tượng dễ đọc thì mới tốt. Càng có ít yếu tố càng tốt. Sẽ là tốt hơn nếu như toàn bộ hình ảnh phải có liên quan với biểu tượng và không chỉ là một phần của nó. Vì vậy, bạn phải chú ý đến bối cảnh của việc sử dụng các biểu tượng. Chúng ta hãy lấy ví dụ một số biểu tượng cơ sở dữ liệu:

 Sai lầm 3
Nhưng nếu ứng dụng này (hoặc một thanh công cụ riêng biệt) chỉ giao dịch với các cơ sở dữ liệu, chúng ta có thể (và nên) loại bỏ phần không cần thiết:

 Sai lầm 4
Sau đây là một ví dụ thực tế ngoài đời về các yếu tố không cần thiết xuất hiện trong các biểu tượng BeOS 5:

 Sai lầm 5
4. Thiếu sự thống nhất về phong cách trong một tập hợp các biểu tượng


Đó là một sự thống nhất về phong cách giúp ta kết hợp nhiều biểu tượng thành một bộ biểu tượng. Đặc tính hợp nhất có thể là bất cứ điều nào sau đây: hòa sắc, phối cảnh, kích thước, kỹ thuật vẽ hoặc sự kết hợp của một số đặc tính như vậy. Nếu chỉ có một vài biểu tượng trong tập hợp các biểu tượng đó thì nhà thiết kế có thể giữ trong đầu của mình một số quy tắc. Nếu có khá nhiều biểu tượng trong tập hợp biểu tượng và có nhiều nhà thiết kế cùng làm việc trên đồ án (ví dụ các biểu tượng cho một hệ điều hành chẳng hạn), thì sau đó họ cần phải tạo ra những hướng dẫn đặc biệt. Hướng dẫn này mô tả chi tiết làm thế nào để vẽ một biểu tượng để nó phù hợp hoàn toàn với tập hợp biểu tượng.

 Sai lầm 6

 Một loạt phong cách trong tập tin shell32.dll thuộc hệ điều hành Windows XP.
Đây là tập hợp biểu tượng mặc định được gợi ý cho một người dùng muốn thay đổi một biểu tượng nào đó.

5. Phối cảnh và bóng đổ không cần thiết trong những biểu tượng có kích cỡ nhỏ


Sự tiến bộ không dậm chân tại chỗ: các loại giao diện đã đạt được khả năng hiển thị tốt các đối tượng bán trong suốt, đánh mất sự giới hạn về số lượng màu sắc và giờ đây có xu hướng hướng tới các biểu tượng 3D. Nhưng liệu tất cả những thứ đó thực sự hữu ích? Không phải lúc nào cũng thế! Đặc biệt là nếu chúng ta đang bàn về những biểu tượng với kích thước 16×16 hoặc nhỏ hơn nữa.

Ví dụ, chúng ta hãy thử xem trình quản lý ứng dụng của giao diện GNOME 2.2.0 (RedHat 9):

sai lầm 7 

 Phối cảnh trong các biểu tượng có kích thước nhỏ xíu như vậy là không cần thiết và thậm chí phản tác dụng.

Còn đây là trình quản lý ứng dụng của Windows XP:

 Sai lầm 8

 Theo đúng chuẩn, các biểu tượng trong Windows XP được sổ ra một bóng đổ cỡ 2-pixel, nhưng ở kích thước 16×16,
bóng đổ xuất hiện quá lớn và làm cho các biểu tượng trông như bị bẩn. Trong tập hợp này thì biểu tượng Address Book trông đặc biệt xấu.

6. Những biểu tượng ẩn dụ quá nguyên thủy

Việc lựa chọn xem những gì sẽ được hiển thị trong một biểu tượng luôn luôn là một sự thỏa hiệp giữa khả năng dễ nhận biết và tính nguyên thủy. Trước khi một phép ẩn dụ (hình ảnh) được triển khai cho một biểu tượng nào đó thì khôn ngoan nhất là bạn hãy cân nhắc xem khi ta thể hiện nó trong những sản phẩm khác thì trông nó sẽ như thế nào. Có lẽ giải pháp tốt nhất không nằm ở chỗ ta đưa ra một cái gì đó có tính nguyên thủy mà là ở chỗ ta chấp nhận giải pháp hiện có.

Một ví dụ về tính nguyên thủy quá mức là biểu tượng bin trong hệ điều hành OS / 2 Warp 4, nó thực sự không phải là một thùng rác chút nào mà nó là một cái máy hủy giấy.

Sai lầm 9 
Một vấn đề khác đối với việc lựa chọn một máy hủy giấy là chẳng có chiếc máy hủy giấy nào nổi tiếng ngoài thị trường cả. Biểu tượng này xuất hiện trông rất giống một chiếc máy in với một con bạch tuộc núp ở bên trong. Hơn thế nữa, theo phép ẩn dụ này thì mọi việc sẽ trở nên không rõ ràng chút nào nếu ta muốn hiển thị một thùng rác đầy.

7. Những đặc tính quốc gia hay xã hội đã không được cân nhắc

Sẽ luôn luôn là điều cần thiết để ta cân nhắc các điều kiện mà ở đó biểu tượng của bạn sẽ được sử dụng. Một khía cạnh quan trọng ở đây chính là các đặc tính quốc gia. Truyền thống văn hóa, môi trường xung quanh và cử chỉ có thể hoàn toàn khác nhau từ quốc gia này sang quốc gia khác.

Thử đề nghị thế này: chúng ta cần phải vẽ một biểu tượng để ta làm việc với e-mail. Sẽ là cảm giác hoàn hảo nếu ta sử dụng một phép ẩn dụ của lá thư bằng giấy thật. Một hộp thư chẳng hạn.

 sai lầm 10
Câu trả lời có thể được tìm thấy trong sách hướng dẫn tạo các biểu tượng cho Mac OS X: “Hãy sử dụng hình ảnh phổ quát mà mọi người sẽ dễ dàng nhận ra. Tránh tập trung vào một khía cạnh thứ hai của một phần tử. Ví dụ, đối với một biểu tượng thư, một hộp thư ở vùng thôn quê sẽ ít được nhận biết hơn một con tem bưu chính.”

Tuy nhiên, bạn cần cân nhắc không chỉ các đặc điểm mang tính quốc gia... Điều đó nhắc tôi nhớ đến một cái gì đó hơi buồn cười. Một lần, chúng tôi cần một biểu tượng cho một bộ lọc dữ liệu (data filter), là cái thường được mô tả bằng cách sử dụng phép ẩn dụ của một cái phễu lọc. Nó đã được vẽ như thế này đây:

 sai lầm 11
Câu trả lời của khách hàng như sau: “Tôi thực sự không hiểu lý do tại sao lại là như thế cho một bộ lọc, bạn đã vẽ một biểu tượng có hình dạng giống như một chiếc ly Martini!”

8. Hình ảnh của những phần tử giao diện thực nằm trong các biểu tượng

Sách hướng dẫn tạo các biểu tượng cho Mac OS X cảnh báo chúng ta: “Hãy tránh sử dụng các yếu tố giao diện Aqua trong biểu tượng của bạn, chúng có thể bị nhầm lẫn với giao diện thực tế.” Nhưng tất cả đều vô ích! Ví dụ, bạn hãy nhìn vào biểu tượng sau đây:

 sai lầm 13

 Bạn định bấm vào nút radio nhưng kết cuộc lại bấm
 vào toàn bộ biểu tượng!

Sau đây là một ví dụ khá thú vị từ giao diện của trình duyệt OmniWeb:

 sai lầm 14

 Bạn hãy chú ý đến các nút Previous và Next, một loại nút hiếm hoi với phần diễn giải bên dưới.
 Ối! Chúng không phải là nút, chúng là biểu tượng!

9. Văn bản nằm bên trong các biểu tượng


 sai lầm 15
Lỗi này thường gặp ở các biểu tượng ứng dụng. Rõ ràng điều đầu tiên đến với tâm trí khi ta làm việc trên một biểu tượng ứng dụng là việc thích ứng với biểu tượng của ứng dụng. Thế thì văn bản nằm bên trong biểu tượng thì có gì là xấu? Thứ nhất, nó trực tiếp liên quan đến ngôn ngữ và do đó nó cản trở sự cục bộ hoá. Thứ hai, nếu biểu tượng nhỏ, ta sẽ không thể đọc được nội dung. Thứ ba, trong trường hợp các biểu tượng ứng dụng, văn bản này sẽ được lặp đi lặp lại trong tên của ứng dụng.

10. Vượt ra ngoài khuôn khổ pixel

 sai lầm 16
Như là một luật lệ, vấn đề này sẽ xảy ra nếu bạn sử dụng một trình biên tập vector để vẽ biểu tượng. Ở kích thước lớn tất cả mọi thứ trông đều xinh đẹp và rõ ràng thế nhưng trong thực tế những biểu tượng nhỏ, và dưới chế độ chống răng cưa mành hóa (rasterization anti-aliasing) lại làm gợn những đường viền chung quanh các đối tượng.

Người dịch: Phạm Xuân Bách
Dịch từ bài viết 10 Mistakes in Icon Design của Denis Kortunov trên trang
http://turbomilk.com

Xem tốt nhất với IE 7.0+, FireFox, Safari, Google Chrome, Opera (độ phân giải 1024x768+)
Copyright © 2010 by POLYGON Center. Designed by EGS.