Apple chia sẻ những điều cơ bản để có một icon ứng dụng đẹp

Blaze1st
13/8/2014 20:2Phản hồi: 201
Apple chia sẻ những điều cơ bản để có một icon ứng dụng đẹp
Screen Shot 2014-08-15 at 7.09.20 PM.png

Một ứng dụng gây được sự chú ý ban đầu từ phía người dùng không chỉ đến từ những chức năng mà nó được quảng bá, mà còn đến từ chính thiết kế bên ngoài của Icon - biểu tượng đại diện cho app đó. Đây chính là đại ý chính của phần đầu tiên trong buổi thuyết trình "Best Practice Guide for Great iOS Design" do người phụ trách mảng UX Design của Apple, ông Mike Stern, trình bày.

Mike Stern chia sẻ rằng người dùng sẽ chẳng bao giờ quan tâm đến việc bạn sử dụng đoạn mã nào cho ứng dụng đó, bạn dùng công nghệ gì, bạn dùng bao nhiêu hàm APIs cho app của bạn, tất cả đều quá cao siêu và chả ai có đủ thời gian để tìm hiểu chúng cả. Tất cả những gì người sử dụng cần chính là ứng dụng đó cho phép họ làm gì, và giao diện chính/thiết kế tổng thể có mang lại cảm hứng dùng app hay không.

Và để thuyết phục một ai đó tải về ứng dụng của bạn, việc đầu tiên, theo Mike Stern, đó là hãy nghĩ về một Icon đại diện thật sáng tạo và độc đáo, bởi Icon cũng chính là bộ mặt của toàn bộ một ứng dụng, dù cho UI bên trong có đẹp hay ảo dịu nhưng Icon xấu thì cũng sẽ làm mất đi phần nào độ thu hút của một app. Chính vì thế, Apple muốn chia sẻ các bước cơ bản để có một Icon đẹp cho những lập trình viên hay những ai có ý định phát triển app cho iOS cũng như OS X sau này.

Thứ nhất: Tập trung vào kiểu dáng tạo nên sự khác biệt


4-icons.jpg

Hãy nhìn vào 4 Icon ứng dụng ở phía trên, chúng có một cái gì đó rất khác biệt và dễ nhận thấy đúng không nào. Vậy làm sao để tạo nên những icon như vậy? Chính là sự đơn giản, cả 4 icon app đều dùng một hình dáng rất đơn giản nhưng khiến cho người dùng dễ dàng nhận biết: ví dụ như Vimeo thì chữ V nền màu xanh rất đặc trưng, Flipboard thì chữ F cách điệu khá phổ biến, Clear thì dấu tick tượng trưng cho công việc cần hoàn thành và nền có tông màu đỏ vàng rất nổi bật.

Lợi ích của việc tạo nên sự khác biệt và nổi bật cho icon app là gì? Đó là giúp người dùng có thể nhận ra ứng dụng đó ở mọi hoàn cảnh. Nên nhớ rằng không phải icon của một app lúc nào cũng "to bự" như hình trên, chúng sẽ to ở kho ứng dụng nền web, rồi nhỏ hơn khi xuất hiện trên màn hình, và lại càng nhỏ hơn nữa khi ở trạng thái thông báo. Vì vậy, đừng bắt người sử dụng phải dí con mắt vào sát màn hình để biết được icon ứng dụng đó là gì nhé.

Thứ hai: Cẩn trọng trong việc chọn màu sắc


Đừng màu mè hoá icon ứng dụng, hãy cố gắng chọn từ một đến hai màu là vừa đủ. Đừng đem nguyên bảy sắc cầu vòng vài icon app của bạn, chúng sẽ thực sự rối và khiến người dùng nhức mắt.

Thứ ba: Tránh việc dùng hình chụp để làm icon ứng dụng


sipp-app.jpg.pagespeed.ce_.mGz2oyR1A6.jpg

Hầu hết các lập trình viên đều tránh việc này, vì sao thì các bạn hãy nhìn thử 3 icon app phía trên. Trông chúng có một cái gì đó rất "không đẹp" và cũ cũ. Khi nhìn vào những app như vậy, cá nhân mình thường sẽ nghĩ rằng ứng dụng này chắc đã bị bỏ hoang lâu rồi, và có thể người làm ra nó cũng đã chuyển qua dự án khác. Đặc biệt là khi giao diện phẳng đang là xu thế mới.

Thứ tư: Tránh việc dùng quá nhiều từ trên icon ứng dụng

Quảng cáo


apps.jpg.pagespeed.ce_.A31BaqxlO8.jpg
Không nghĩ ra biểu tượng gì thì cứ lấy chữ cái đầu tiên rồi phác hoạ một cách đơn giản nhất​

Dù ứng dụng của bạn có một cái tên rất ngầu, rất hay nhưng làm ơn đừng mang nguyên nó lên icon. Như đã đề cập ở trên, icon của app sẽ trở nên "nhỏ xíu" khi xuất hiện ở thanh thông báo, vì vậy chả ai rảnh mà dí mắt vào để đọc đó là ứng dụng gì đâu. Apple khuyên các lập trình viên hãy cố gắng dùng chữ cái đầu tiên - ví dụ như V Vine, P Pinterest, F Facebook, S Skype,... - còn không thì nghĩ ra một biểu tượng nào đó thể hiện cho chức năng của app - như Clear là dấu tick, Messenger là bong bóng hội thoại, Twitter là hình chú chim non đặc trưng, hay Mailbox là hình hộp thư.

Thứ năm: Hãy sáng tạo!


sss.jpg

Sáng tạo là một trong những điều tạo nên thành công trong thiết kế. Hãy cố gắng nghĩ ra một biểu tượng nào đó vui nhộn, khác biệt, để khi người ta chỉ cần liếc qua là có thể biết được đó là ứng dụng gì. Một số ví dụ tiêu biểu như app ghi chú Evernote với hình con voi màu xanh rất vui, Evernote Food với miếng Sushi ngon lành hay icnon game Clash Of Clans với anh chàng Barbarian hét đến chảy cả nước bọt.

Thêm một gợi ý nhỏ nữa: Hãy thử icon app của bạn với nhiều hình nền khác nhau


backgrounds.png.pagespeed.ce_.nivKFal8yx.png

Quảng cáo


Người dùng hay có thói quen đổi hình nền để tìm một thứ gì đó mới mẻ hơn, và nếu như icon app của bạn chìm hoàn toàn dưới màu hình nền thì đó sẽ là thảm hoạ. Vì vậy, cách tốt nhất là hãy cố thử icon ứng dụng lên nhiều hình nền với những hoạ tiết khác nhau trước khi đưa ra thiết kế cuối cùng.

201 bình luận
Chia sẻ

Xu hướng

haituando
ĐẠI BÀNG
10 năm
Icon của iOS 7 có đẹp đẽ gì đâu mà còn bày đặt đi dạy chứ 😔
h.h264
ĐẠI BÀNG
10 năm
@haituando nói nhiều quá làm thử một cái icon coi chơi
heliosy
TÍCH CỰC
10 năm
@sayaneee chuẩn như Lê Duẩn, chỉnh là mất chuẩn 😆
chả biết thằng nào phát minh ra cái câu đó 😃)
"ko làm dc thì đừng chê" nghe mà nực cười 😃)
@haituando thực tế đáng buồn thật đó bạn.. :(
@haituando Nhất trí :rolleyes:=)))
Như trên 😁
icon BB đẹp nhất 😆.
@Thực Tế Icon BB đẹp nhưng không đồng bộ, cái vuông cái tròn loạn hết cả lên. Nghĩa là, xét từng cái thì ok, nhưng bỏ chung vô cái dt là thôi rồi. Cái này chắc do BB không khắc khe với các bên thứ 3.
kamasitary
ĐẠI BÀNG
10 năm
Như trên luôn 😃
thấy cũng bình thường android hay IOS bên nào cũng có cái xấu cái đẹp ko nói đến các icon cũa ứng dụng ngoài :p
xấu nhất là thấy bên WP ...
traiyeu9999
ĐẠI BÀNG
10 năm
@tinhcmnte Wp đẹp nhất,ios androi nhìn chán quá rồi
@tinhcmnte wp có icon đâu thiếm....cái đó là ô tile mà
vipthangggg
ĐẠI BÀNG
10 năm
có 1 sự thật là icon apple rất là đẹp 😁
@Lumia Icon Android thấy icon của htc là đẹp mê ly ,sony cũng hiện đại mà đơn giản ,icon apple thì cũng đẹp theo kiểu của nó ,nói chung có ng thích hình tròn ,có ng thích hình tam giác nên đâu chiều mọi ng hết đc
Feenix909
TÍCH CỰC
10 năm
@vipthangggg mỉa mai sâu cay quá bạn =))
thứ nữa là màu nhìn đồng bóng 1 chút bạn sẽ thành công 🆒
cuthune
TÍCH CỰC
10 năm
Điều cuối cùng: hãy làm gì bạn thích đừng nghe theo apple
@Nguyễn Lê Anh Thư (y) câu này của Bác ghê. 😁
Tomism
ĐẠI BÀNG
10 năm
Đẹp, xấu tùy cảm nhận nhưng icons trên iOS 7 mang tính kiểu mẫu, thể hiện rõ ở tất cả các icons trên appstore sau này.
Màn hình phẳnng, mọi thứ phẳng thì mới đồng nhất, đẹp!
Đơn giản, ít màu sắc, không 3d thì rất là trực quan!
P/s: FAN APPLE
treble
TÍCH CỰC
10 năm
Bộ icon của thằng Gồ trên iOs là xấu nhất
@treble Chuẩn đấy . Nó cố tình đi ngược với triết lý của Apple mà
frims
ĐẠI BÀNG
10 năm
@treble chuẩn.nhất là cái google map mãi vẫn thế tự nhiên lạc tông so với phong cách phẳng.
@treble Vô cùng chính xác ^^ phẳng ko phẳng mà nổi cũng ko nổi.
Thấy Icon của BB (Không phải BB 10 có khung chữ nhật) và của Sony (không phải kiểu tròn bây giờ) là đẹp nhất. Nói chung hình đẹp, để nguyên ko vuông ko tròn là đẹp.
có 1 sự thật là đưa 1 cái ip và 1 cái smart phone khác cho người chưa bao giờ sử dụng thì cái ip dễ sử dụng hơn. không phải fan fiệc gì đâu, dùng 1520 nhé
@O.R.A.N.G.E Mọi thứ đều có mặt tốt và mặt yếu.
@mianlien203 Gớm icon style Symbian Belle đây mà. Đẹp cơ mà rối mắt vì same same nhau 😁
mianlien203
ĐẠI BÀNG
10 năm
@anhdao1520 cái này mình thấy hơi hướng miui nhiều hơn :D
@mianlien203 Miui gì thím. Cái dạng bo tròn kiểu đó là của Belle nhá 😆. Ông tung của kia ra sau mà
Icon của zalo đẹp mà. Đơn giản rõ ràng
@like88xx Theo đánh giá cá nhân mình nhì icon này cái tông màu xanh hơi bị lúa lúa, còn nhìn cái viền border nó thô kệch.
@like88xx Icon ứng dụng của tớ chấp nữa đường =))
https://play.google.com/store/apps/details?id=thanhlong90.it.cauzaidaiphap
@thanhlong90.it Nhìn cái icon và app của bạn thấy tởm ko chịu được, cảm giác nó hơi ái ái đỏ như ngày của chị em hehe
@like88xx IQ bèo thế, cái tên ứng dụng đã biết hàng cho con gái xài rồi, công design chắc phải gấp mấy lần cái icon zalo ý chứ =))
1 sự thật là ios 7 càng dùng càng thấy đẹp. Ban đầu 1 số người chê sau cũng phải khen.

Con ipad mình icon ios 7 đẹp lung linh. Con iphone lười lên chạy ios 6 nhìn ngu ngu.
Tôi muốn đọc link gốc bài này từ Apple nhưng click vào link của tác giả cuối bài không thấy. Ai biết làm ơn chỉ giúp. Cám ơn
Cái icon quyết định đến 90% việc mình có tải/ mở app đó hay không.
;)có lẽ do mình thích cái đẹp
mình thấy đúng mà, kinh nghiệm của họ chia sẻ thật đáng quý
Chắc share để a sam có KN copy cat icon =))

Xu hướng

Bài mới









  • Chịu trách nhiệm nội dung: Trần Mạnh Hiệp
  • © 2024 Công ty Cổ phần MXH Tinh Tế
  • Địa chỉ: Số 70 Bà Huyện Thanh Quan, P. Võ Thị Sáu, Quận 3, TPHCM
  • Số điện thoại: 02822460095
  • MST: 0313255119
  • Giấy phép thiết lập MXH số 11/GP-BTTTT, Ký ngày: 08/01/2019