Chinese App Icons: Senior Designers Share Their Thinking

Man, you rarely see stuff like this on the Chinese net: interesting dive into design thinking as Chinese branding blog Pingwest interviews the designers of three major Chinese character-based app icons. The post splits app icon designs into two categories, those that use a Chinese character to represent the app (Taobao’s 淘, Facebook’s lowercase f), and those that use an image (Wechat’s text bubble, Instagram’s camera), and examines why designers of character-based apps chose to head in that direction. The post is interesting enough without my crappy yammering, so mostly what I’m posting here is translated highlights with some linguistic backstory.

Designer Zhe Yin on the Zhifubao App Icon

Chinese UI Design: Chinese App Icon Design for Alipay

The symbol above is the icon for the Alipay (Chinese name, Zhifubao) digital wallet, with text below that reads “100 million red envelopes” (in Chinese culture, gifts of cash are given in red envelopes, so the phrase refers to the number of financial transfers passed through the app). The icon bears a stylized version of the character 支 (zhi), first word in the full company name 支付宝 (zhi fu bao). The icon has come under fire for its ugliness and lack of artistic flair, but it’s hard to say if that’s just the standard trolling awarded to any symbol so widely distributed.

Designer Zhe Yin stresses that visual appeal is only one aspect that comes under consideration in the app icon creation process. Maybe more important than that, he says, is how easily recognizable the icon is, and how easily it can be instantly associated with the app it represents. According to Zhe Yin’s thinking, Chinese lettering is clearer to Chinese users than other imagery, and draws a faster mental link between the brain and the app, so choosing a character for the icon makes sense.

Yet another consideration is brand standardization. After version 7.0 of the Alipay app, the design team decided to drop the “付” (fu) and “宝” (bao) characters from the 支付宝 (zhi fu bao) icon (its previous incarnation had all three), keeping only the 支. They figured the last two hampered brand expansion.

“And you know something?” says Zhe Yin, “The 支 character really isn’t that ugly.”

Li Ji on the Zhihu Icon

Chinese UI Consulting: Chinese User Interface Tips

Designer Li Ji and the design team at hugely popular knowledgebase site Zhihu (kind of a Yahoo! Answers deal) also adopted the text-based icon, but haven’t come under nearly the same amount of fire for the choice. He thinks that maybe one of the primary reasons is that changes have been minimal. Zhihu is still rocking the same essential symbol it’s had since it’s launch in 2011, whereas by comparison, the Zhifubao icon has undergone four changes.

When the app launched three years ago, Li Ji says that their team considered brand consistency the more important factor in icon design, so the lettered icon wasn’t a long-considered choice. They were originally planning to go with a dual-character set, the full company name 知 (zhi) 乎 (hu), but felt that the rounded corners on iOS icons didn’t work visually with the tall rectangular structure of both the 知 and 乎 characters, so they cut it down to just 知.

Li Ji concedes that a lettered icon loses a bit of pop, and can easily be lost in the great sea of apps, which is why font and custom typography is so important. He points to the rounded corners on the right portion of the character as a protective measure against the lettering seeming too stark.

A side note for non-Chinese speakers: you’ll also notice that the right portion of the character has been turned into a speech bubble, representing the app’s function. Here’s a comparison with the original character 知:

zhi-icon-original

Douban App Icon

Douban is a unique case, in that they underwent a radical change, starting out as a company that seemed to largely prefer picture-based icons, and ending up tossing that out for a character-based design on more recent products.

Altogether (since the posting of the Pingwest article in early 2015, anyway), aggressively following the “one app, one function” principle, Douban has pushed out 11 apps, the earliest being 2010’s Douban FM, the most recent, 2014’s content aggregator Douban Yike. Those apps have, in the past, been roundly criticized for a lack of visual centralization.

In the past, when skeuomorphism (desiging objects in the digital space to resemble real-life things) was in vogue, Douban behaved like many others in that they preferred to use images to transmit information. And it still partially holds: most of the apps in the Douban family have image-based icons. Back in the day, Douban Yuedu, a publishing / digital library app, created its (rather cryptic) icon from the image of a wagtail bird (symbolizing ‘freedom’, says former Douban product manager Xiao Yu), with some lines from Proust in the background. The idea was to conjure up a young-artistic-woman-quietly-reading feel Douban Yuedu’s then-brand essence.

The previous icon:

Chinese Mobile UI Design: App Icon Design Douban Yuedu Old

And for academia’s sake, the recently-refreshed icon (that totally does not look anything like Twitter):

Chinese UI Design: Douban Yuedu New App Icon

But Douban’s recent move towards consolidating all its features in a single app – probably inspired by the success of the increasingly all-in-one app WeChat – including bringing, music, movies and reading under one umbrella, makes a picture-based icon difficult to settle on. How do you come up with one image that perfectly encompasses so many functions while upholding your brand?

The simple 豆 (dou) icon, again the first character in Douban’s (豆瓣) full name, was tested against others which included a five-pointed star and a much more complex icon that combined design elements from each of the Douban family apps. In the end, the simplest won out.

Chinese UI App Icon Design

Xiao Yu didn’t participate in that round of testing, but doesn’t believe that the change means Douban has altered its policy in that all future app icons must be characters rather than images. She simply supposes that in this particular situation, a lettered icon was best.

“The essence of a good app icon is that it must be able to occupy a space in the user consciousness. First, it must be simple, and second, it must be able to create a visual resonance with app itself. The Douban team probably feels that a basic 豆 character best meets these goals. As for a five-pointed star or some other picture-based icon, those are either not simple or they don’t connect easily to the brand.”