Android

Một số chia sẻ về thiết kế biểu tượng cho ứng dụng

Sau khi cài đặt một ứng dụng, người dùng có thể truy cập ứng dụng đó thông qua biểu tượng (icon). Biểu tượng của ứng dụng có vai trò như “mặt tiền” vậy. Do đó, một ứng dụng không chỉ cần cung cấp các chức năng hữu ích, hiệu năng cao, mà còn cần một biểu tượng hợp lí và đẹp. Khâu thiết kế biểu tượng đã trở nên ngày càng quan trọng hơn, nhất là trong thời buổi triết lí thiết kế ngày càng được đơn giản hóa nhưng yêu cầu về mức độ sang trọng không những giảm đi mà, trái lại, còn được nâng cao hơn nữa. Bài viết này chỉa sẻ một số cách tiếp cận cũng như tư duy trong việc thiết kế biểu tượng, không những cho các ứng dụng di động, mà còn là ứng dụng native cho máy tính cũng như ứng dụng web. Chú ý: bài viết không hướng đến game vì game chỉ có hướng phản ánh nội dung, cũng như phụ thuộc nhiều yếu tố bên trong bản thân game đó.

1. Đầu tiên, bạn phải định hình sơ khởi biểu tượng ứng dụng của bạn sẽ gồm những nội dung nào. Cá nhân tôi chia thành hai khuynh hướng: Một là biểu tượng sẽ phản ánh nội dung của ứng dụng; hai là biểu tượng mang tính chất thể hiện thương hiệu.

Hướng tiếp cận thứ nhất có vẻ như đang chiếm ưu thế hơn về số lượng ứng dụng, vì đương nhiên, đơn giản là các lập trình viên muốn truyền tải thông điệp nhanh đến người dùng, rằng “Ứng dụng của tôi có chức năng làm việc này” thông qua biểu tượng ứng dụng. Qua đó, trước mắt là người dùng sẽ hiểu một cách khái quát sơ lược nhất về ứng dụng của bạn để quyết định là có tải về dùng hay không. Còn về sau, khi họ đã tín nhiệm và quen với ứng dụng của bạn rồi, họ sẽ nhanh chóng tìm thấy nó trong một dãy các ứng dụng của họ, đặc biệt là trên các thiết bị di động, tất cả các icons sẽ được đưa ra màn hình App Drawer (Android) hoặc SpringBoard (iPhone và iPad).

Ví dụ, đây là icon của ứng dụng ImTOO Video Converter trên máy tính, hẵn là một số bạn đã có sử dụng ứng dụng này rồi.

ImTOO Video Converter Icon

Bạn thấy đó, đây là ứng dụng chuyển đổi định dạng phim và âm thanh. Và các LTV đã chọn thiết kế icon theo hướng thể hiện nội dung của ứng dụng, bằng chứng là icon đó là một cuộn phim trong rạp. Hoặc, đây là icon của ứng dụng của tôi có tính năng giúp các bạn sao lưu và khôi phục dữ liệu trên Android (các bạn có thể tải về tại đây):

Backup

Và như các bạn thấy, biểu tượng cho ứng dụng của tôi cũng phần nào thể hiện được nội dung của ứng dụng. Và khi người dùng đã quen thuộc, họ sẽ rất dễ nhận ra ứng dụng của tôi trong một dãy ứng dụng có tên bắt đầu bằng chữ “B” đối với tiếng Anh hoặc “S” đối với tiếng Việt. Khi tìm kiếm, họ sẽ chỉ nhớ sơ sơ rằng ứng dụng này bắt đầu bằng chữ “B” hoặc “S” và có tính năng sao lưu – khôi phục dữ liệu, thay vì toàn bộ tên gọi của ứng dụng. Và rất nhanh chóng, họ sẽ tìm được vị trí của ứng dụng để khởi động nó lên.

Hướng tiếp cận thứ hai đã và đang được sử dụng rộng rãi hơn trước. Bạn hãy nhìn biểu tượng của ứng dụng Pandora (radio) dưới đây:

Pandora icon

Bạn có thấy là biểu tượng này hầu như, nếu không muốn nói là hoàn toàn, không hề thể hiện bất cứ ý tưởng nào về Radio cả. Nó chỉ là chữ cái đầu tiên trong thương hiệu Pandora mà thôi. Và khi người dùng nhìn vào biểu tượng này, họ sẽ liên tưởng tới thương hiệu của công ty (nhà cung cấp) hơn là tính năng của ứng dụng. Phần tính năng đã được gắn chặt với thương hiệu, bởi khi người ta muốn nghe radio thì họ sẽ tìm ứng dụng Pandora chứ không phải là tìm một ứng dụng cung cấp việc stream radio trong loạt ứng dụng trên thiết bị của họ nữa.

Pandora không phải là người đầu tiên đi theo khuynh hướng này. Adobe đã áp dụng triết lí thiết kế theo hướng thương hiệu từ trước. Dưới đây là loạt icons tương ứng với các ứng dụng của họ tại thời điểm hiện tại:

Adobe Creative Suite Icons

Tất nhiên, các dịch vụ của họ trước đây không hẵn đã sang trọng như vậy, tuy nhiên, chúng vẫn được thiết kế dưới góc độ thể hiện thương hiệu hơn là nội dung của các tính năng của chúng. Thương hiệu ở đây không chỉ hạn hẹp ở phạm vi thương hiệu của tổ chức hay cá nhân của bạn, mà bao gồm thương hiệu của từng ứng dụng / dịch vụ và qua đó toát lên cái phong cách chung của toàn bộ các ứng dụng / dịch vụ cho tổ chức hay cá nhân bạn phát hành, chẳng hạn như các icons của Adobe bên trên. Chúng vừa mang thương hiệu của bản thân chúng, vừa thể hiện phong cách chung của triết lí thiết kế biểu tượng của Adobe. Và lỡ như bạn gặp một ứng dụng lạ hoắc chứa chữ Eg màu cam nằm trong khung vuông viền cũng màu cam và nền cam đen thì có khả năng cao, bạn sẽ lập tức cho đó là một sản phẩm của Adobe (mặc dù thực tế thì… ai biết được!).

Tóm lại, công việc đầu tiên, bạn cần định hướng cho biểu tượng ứng dụng của mình nên đi theo hướng nào. Hoặc là phản ánh nội dung, hoặc là thể hiện thương hiệu. Tất nhiên, bạn có thể gộp cả hai lại trong những trường hợp “hay không bằng hên”, vô tình một chữ cái nào đó (thường là chữ chủ đạo trong thương hiệu hoặc tên ứng dụng) có thể được cách điệu hoặc chỉnh sửa hoặc lồng ghép theo một cách nào đó để thể hiện tính năng của ứng dụng, chẳng hạn như Gmail của Google:

Gmail icon

Hay ứng dụng QuickEdit Text Editor dưới đây:

QuickEdit Text Editor icon

Lựa chọn phong cách nào là tùy vào bạn. Tuy nhiên, dù đi theo hướng nào thì bạn cũng cần cẩn thận, tránh việc icon của mình giống một icon của một ứng dụng đã có sẵn, và sẽ khó khăn hơn nếu ứng dụng đó đã có tiếng tăm. Nặng thì họ sẽ lôi bạn vào mớ rắc rối pháp lí, còn nhẹ thì cũng bị Apple hoặc Google xóa app khỏi cửa hàng. Do đó, icon cần đảm bảo tính độc nhất (unique).

II. Sau khi đã chọn hướng thiết kế, thì bước tiếp theo, bạn cần xác định được những thành phần (vật thể, đối tượng) nào sẽ được đưa vào biểu tượng của bạn. Chẳng hạn nếu bạn chọn hướng thể hiện nội dung, bạn sẽ đưa các hình, vật gì vào. Còn nếu bạn đi theo hướng thương hiệu, bạn sẽ thiết kế thương hiệu ra sao?

Đối với ứng dụng SAO LƯU của tôi, rõ ràng đây là một ứng dụng giúp sao lưu và khôi phục dữ liệu. Cách tiếp cận của tôi là hướng thể hiện nội dung. Do đó, tôi sử dụng mô típ chung là mũi tên tròn với đầu tên hướng về phía ngược, mang ý nghĩa quá khứ, và ba chấm tròn với ý nghĩa là nó thao tác với nhiều loại dữ liệu khác nhau. Và do đó, biểu tượng của tôi là như sau:

Backup

Trong trường hợp bạn bí bách quá thì, cá nhân tôi khuyên bạn nên làm theo hướng thể hiện thương hiệu, vì chí ít bạn đã (và sẽ) biết mình cần đưa gì vào biểu tượng. Thông thường, đó sẽ là logo của tổ chức của bạn, hoặc nếu bạn là LTV cá nhân, thì đó thậm chí có thể là tên bạn hoặc tên ứng dụng. Và nếu bạn không thể suy nghĩ được ý tưởng nào, bạn quá bí xanh bí đỏ, thì hãy chọn chữ cái chủ đạo trong tên ứng dụng, mà thông thường là chữ cái đầu như cách Pandora họ làm, đem ra cách điệu lại.

Sau khi đã có những bước phát họa đầu tiên, thì bố cục là điều bạn cần xác định ngay. Đầu tiên là bạn có cần một khung chứa các nội dung (container) hay không, hay bạn để các thành phần (components) nằm trần, tự do? Chẳng hạn như icon của tôi có container là khung tròn, còn tổ chức VideoLab thì không cần. Họ quyết định không dùng container cho icon của app VLC. Cụ thể:

VLC icon

Và các thành phần trong icon được bố trí ở đâu? Hướng xoay ra sao? Cái nào nằm chồng lên cái nào?… Tất cả phải làm nên một bố cục cân đối, gọn gàng. Bạn cần tuyệt đối tránh việc nhồi nhét quá nhiều thứ trong cái icon của bạn. Bởi vì bất kể các nền tảng đích (target platforms) là máy tính, hay di động, hay web, thì các icons luôn có kích thước nhỏ. Và việc bố trí quá nhiều thứ vào một icon nhỏ sẽ dẫn tới hai điều: Một là không đủ chỗ, hai là người dùng sẽ nhìn thấy một “đám rừng” chứ không phải là icon của ứng dụng. Một icon mang tính phản cảm hoặc rối rắm sẽ làm giảm sự chú ý của người dùng. Và khả năng họ bỏ qua ứng dụng của bạn để dùng một ứng dụng có chức năng kém hơn nhưng biểu tượng trau chuốt hơn là hoàn toàn có thể. Hai là, icon của bạn sẽ gây ảnh hưởng đến icons của các ứng dụng khác dẫn tới việc người dùng sẽ thẳng tay gỡ bỏ ứng dụng của bạn vì sự khó chịu.

Tất nhiên, icon cũng không thể quá sơ sài được. Bởi người dùng sẽ nghĩ “Ối cái icon dư lầy thì người lập trình là người bất cẩn và không chừng đây là ứng dụng lừa đảo” và đương nhiên họ cũng sẽ bỏ qua. Như tôi đã nói bên trên, biểu tượng chính là “mặt tiền” của ứng dụng. Người dùng không có thiện cảm thì họ sẽ “skip” sang các ứng dụng tương tự khác. Bạn hãy lưu ý: Đơn giản nhưng không có nghĩa là sơ sài.

Và phân đoạn cuối cùng của khâu này là việc lựa chọn màu sắc. Tôi không đưa ra bất kì hướng dẫn chọn màu nào vì đó là sở thích cũng như ý tưởng của bạn – “Mình thích thì mình làm thôi”. Tuy nhiên, dù là màu gì, thì nó ít nhiều phải có mặt trong ứng dụng của bạn. Chẳng hạn, đây là icon của ứng dụng Quản Trọ cũng do tôi viết:

QT

Tôi chọn màu xanh lá đậm (teal) thì màu này phải xuất hiện trong toàn bộ ứng dụng của tôi, và đó là màu chủ đạo của ứng dụng: Từ thanh Toolbar đến nút nổi FAB, và màu của các thanh Status và Navigation Bars đối với Android 5.0 về sau. Sẽ rất lố bịch nếu tôi dùng màu xanh đó cho icon như tông màu chủ đạo cho ứng dụng là đỏ, hoặc tông màu là xanh lá nhưng icon lại dùng nền tím. Và người dùng sẽ cảm thấy không vui vẻ gì khi sử dụng ứng dụng của bạn.

Và nếu bạn để ý, bạn sẽ thấy hầu như icon nào cũng có chứa màu trắng ít nhiều. Đây không là điều kiện cần, nhưng việc được sử dụng nhiều khiến nó trở thành một chuẩn mực chung, hay chí ít cũng là một yếu tố mang tính tham khảo, nhất là đối với các ứng dụng cho di động. Màu trắng là màu trung tính, và rất, rất thường xuyên xuất hiện trong ứng dụng của chúng ta mà có thể bạn không thực sự chú ý, chẳng hạn như nền ứng dụng! Nên tôi tư vấn cho các bạn, nếu ứng dụng chỉ có một màu xuyên suốt (tất nhiên trừ màu trắng ra), thì bạn có thể cân nhắc việc sử dụng màu trắng làm màu của các đối tượng trong icon.

Tất nhiên, trừ một số những trường hợp mang tính quan trọng và cần kíp, bạn có thể dùng nhiều màu khác nhau cho icon của bạn. Tuy vậy, chỉ nên sử dụng không quá ba màu cho icon của ứng dụng của bạn, bao gồm màu trắng. Các màu cần làm nền cho nhau để chúng cùng nhau nổi bật. Và hơn hết là ngôn ngữ thiết kế phải hiện đại, phù hợp với xu thế chung hiện tại. Tại thời điểm này, các icon nên theo mô típ phẳng, đơn giản. Nếu bạn thiết kế icon theo hướng 3D và có góc phản xạ ánh sáng như iPhone “đời đầu” thì… tôi cạn lời.

iPhone screenshot

III. Cuối cùng, bạn cần đảm bảo yêu cầu thứ ba, là bạn cần “nhập gia tùy tục”. Nghĩa là icon ứng dụng cần phù hợp với nền tảng đích (target platform) mà bạn hướng tới, đặc biệt nếu như bạn viết ứng dụng nội tại (native app) – cả máy tính lẫn di động – chứ không phải viết web.

Tất nhiên, đa số trường hợp thì icon của bạn phù hợp với nhiều nền tảng khác nhau. Từ Windows, Mac, Linux cho tới iOS và Android. Bạn có thể “bê nguyên si” hoặc nhiều lắm cũng chỉ sửa một số chi tiết nhỏ. Chẳng hạn, với một ứng dụng cực kì phổ biến là Chrome, icon của nó là như nhau trên tất cả các nền tảng trên. Duy trên iOS thì họ cần bỏ trong nền màu trắng để hệ thống sẽ tự động đặt nguyên cả bộ icon vào trong khung bo góc. Và đó chính là ví dụ về hành động “nhập gia tùy tục”. Ứng dụng trên nền tảng nào thì cần ít nhiều tuân thủ triết lí thiết kế của nền tảng đó.

Nếu các bạn để ý thì các icons của các ứng dụng do Apple viết cho Mac/macOS và iOS có nét tương đồng cao, nhưng không phải là giống y chang tới mức độ “bê nguyên si” như tôi đã nói ở trên. Có thể các bạn sẽ thắc mắc là tại sao. Trước tiên thì tôi sẽ trích dẫn luôn hướng dẫn của Apple (nguồn tại đây):

Don’t reuse your iOS app icon, if you have one. If you’re developing a macOS version of an iOS app, you should not reuse your iOS app icon. Although you want users to recognize your app, you don’t want to imply that your app isn’t tailored for the macOS environment. Start by reexamining the way you use images and metaphors in your iOS app icon. For example, if the iOS app icon shows a tree inside the rectangle, consider using the tree itself for your macOS app icon…

Cá nhân tôi đồng ý một phần lớn với hướng dẫn đó, và sẽ giải thích dưới góc hiểu của cá nhân mình. Trên iPhone và iPad, các icons được đặt trong khung vuông bo góc, và các icons nằm nổi bật trên nền, và không gian tương đối thoải mái hơn so với Mac, các icons được pin ra thanh Dock thường phải chen chúc nhau. Do đó, các icons trên Mac không nên đặt trong khung như trên iPhone và iPad để hạn chế không gian chiếm, và nếu như bạn bóc trần các thành phần khác trong icons cho iOS ra mà đem lên Mac thì có thể sẽ rối rắm, và gây khó nhìn, đặc biệt là có thể chịu thêm ảnh hưởng của hình nền. Do đó, nếu ứng dụng của bạn có biểu tượng là một cái cây được biến đổi (nguyên văn metaphors bên trên)  trên iOS, bạn nên cân nhắc dùng luôn cái cây (gốc) cho phiên bản trên macOS.

Còn nếu bạn muốn đưa ứng dụng của mình lên nền tảng Universal Windows thì bạn lại cần “nhập” tiếp một “gia” khác, và “tùy” (biến) lại icon cho phù hợp với “tục” của Universal Windows Platform. Nếu bạn dành 10 giây để ý thì phong cách chung của nền tảng này (mở rộng sang các app Modern trên Windows 8.X và Windows Phone) là phần chính của icon luôn là màu trắng đặt trên nền một live tile đơn màu (và màu này là tùy bạn chọn). Ví dụ:

Windows 10 Start screen sample

Chẳng hạn, Instagram đã đổi icon của mình cho phù hợp với phong cách chung của nền tảng đích, Windows Universal, theo phong cách trên, chứ họ không “bê nguyên si” icon nền tím vàng trên iOS và Android lên đó được.

Tóm lại, để đưa ứng dụng tiếp cận đến mức hoàn hảo thì việc thiết kế biểu tương ứng dụng là một công đoạn không thể xem nhẹ. Nó quan trọng không kém việc xây dựng các tính năng bên trong ứng dụng cũng như tối ưu hóa hiệu năng. Thiết kế biểu tượng ứng dụng không chỉ mang tính làm đẹp, thu hút sự chú ý của người dùng, những người đi shopping trong các cửa hàng ứng dụng, mà còn giúp chính bản thân lập trình viên định hình được bố cục chung của ứng dụng, qua đó dễ dàng xây dựng các dòng code hợp lí. Biểu tượng ứng dụng, theo xu thế hiện tại, cần đơn giản nhưng trau chuốt, sang trọng, thanh lịch, và phải phù hợp với nền tảng đích mà lập trình viên hướng tới.

Đầu năm mới, xin chúc các độc giả của EITGUIDE nhiều sức khỏe, thành công hơn trong cuộc sống. Và hơn hết, mặc dù là năm con gà nhưng mọi người sẽ không bị “gà” trong quá trình viết code.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.