那些丑丑的应用图标,设计它们的人是怎么想的?

mariayu
2015-04-01
70714
5 min read
设计1+2,
摹客就够了!
立即开启

略丑的“支”

赭(zhě)隐是一名设计师,他供职于一家掌管着 2 亿中国人移动支付安全的公司——支付宝钱包。不巧的是,这份工作并不讨人喜欢,支付宝钱包的应用图标一直以来都饱受争议。批评者中不乏名人大 V。

春节期间,这种批评之声来得尤为猛烈。因为,支付宝钱包在“支”字图标底部简单粗暴地新增了一行“亿万红包”红色横幅,让其比之前更加难以接受。

虽然好看或丑陋都是个人的纯主观感受,但问来问去,支付宝钱包的图标似乎确实丢失了一些“美感”。那么,如果中文汉字图标不好看,为什么支付宝还会考虑以汉字“支”作为图标呢?

当我将这个疑问抛向赭隐时,虽然并不直接设计“支”字图标,但他也不忘吐苦水,“通常情况下,设计一款应用图标需要考虑诸多因素,好看与否只是其一。辨识度有时可能是首要考虑因素。”赭隐认为,对中国用户来说,中文汉字图标的辨识度相对比较高,才容易建立起产品与用户之间的直接联系,让用户第一眼看上去就知道这是哪家的产品。“支”字当然会让用户立刻联想到支付宝,而非其他产品。

品牌延续性也是设计支付宝钱包图标时的重要因素。2013年6月份,支付宝钱包移动应用 7.0 大版本更新时,设计团队抛弃了之前的“支付宝”三个字,而选择了“支”字作为新图标以延续品牌。“‘付’和‘宝’都不适合作为品牌形象吧。”赭隐说,“其实,‘支’字也并没有那么难看。”

赭隐所说的“不难看”可能更多指的是作为一款国民级应用,它的功能优于其他。如果你和我一样,是 2 亿支付宝钱包的重度用户之一,没有将其删除出空间有限的手机屏幕,一定是因为“我们基本上难以离开它”——支付宝钱包已经可以完成手机充值、缴纳水电燃气费、信用卡还款、余额宝理财等等。

以支付宝为例,你可能也发现了,移动应用同样是一个看脸的世界。在面对一款应用时,你仅能凭借寥寥的介绍文字,几张应用截图,和一个应用图标来决定是否下载。比起文字或截图,有时候图标可能会成为最关键的决定因素。

简单来说,应用图标可以被划分为两大类:文字和图形。前者直接简单地让用户知晓他正在使用的是哪一款产品,例如 facebook 的“ f ”,淘宝的“淘”;后者容易让用户从一大堆密密麻麻的文字图标中立刻将其识别出来,例如星巴克的“双尾美人鱼”图形,微信的“聊天气泡”图形。

并不能笼统地就认为,图形图标就一定优于文字图标。但一款设计精美的图形图标不仅能够鹤立鸡群,也能够让用户直接将其与产品映射连接起来。然而,文字图标则容易淹没在应用大潮中,几近与“美观”无缘,尤其是全世界最复杂文字之一的中文汉字。

不难看的“知”

赭隐和支付宝钱包的烦恼主要在于,在保证支付宝钱包品牌一致性和图标与产品最直接的映射关系的基础上,如何让用户接受并习惯“支”字图标。与赭隐一样,同为设计师的李奇似乎并没有这样的烦恼。

李奇在中国最知名的问答社区网站“知乎”工作。与支付宝一样,知乎的应用图标同样采用了中文汉字“知”。然而,李奇和知乎团队受到的批评小得多。在他看来,原因之一可能是知乎很少变。

2011 年 9 月上线至今,知乎的图标没有发生任何变化。相较之下,支付宝粗略计算已经换过了至少 4 种图标。

三年前,将知乎从网页搬到手机端时,李奇和其团队并未在图标设计上纠结太长时间——延续品牌成为了知乎的首要目的。当时,除了“知”,“知乎”两个中文汉字的图标也是一个备选方案。不过,考虑到 iOS 图标是圆角矩形,而“知乎”两个字在视觉上是长条矩形,最终才选择了一个汉字的“知”。

设计师李奇承认,纯文字很有可能会让图标失去特色和辨识度,整个应用会被淹没在应用的汪洋大海里。因此在将其作为应用图标时,设计师通常会考虑从字体、形态等角度去修饰它,让它变得容易被接受。拿知乎举例,为了避免“知”字对用户造成审美疲劳,知乎设计师对“知”字右边的“口”进行了斜角特殊处理,让“知”字看起来不至于太过生硬。

此外,“内容社区”的属性也帮助知乎用户更多将注意力放在了图标之外的地方。例如,应用内交互动画是否适宜,问答是否方便,以及是否能够分享答案等。知乎应用上架 App Store 后不久,知乎上就诞生了一个问题“为什么知乎的 iOS app 不能发表答案?”。显然,知乎用户的优先关注点并不在应用图标上。

有意思的是,知乎团队的第二款移动端产品——知乎日报,并没有延续知乎以中文汉字作为应用图标的传统,而是选择了图形图标,“一个蓝色背景的 3/4 圆”。李奇介绍称,作为知乎的第一个子品牌,而且是完全诞生于移动端的品牌,知乎日报并没有迫切需要在应用图标上延续之前的风格。知乎日报的图标出处是 iOS 下拉刷新时出现的一个环形图标,寓意是知乎希望用户每天用日报刷新知识。”

诚然,这样的寓意契合知乎日报的产品属性,但知乎日报的图标实际上并没有做到独特而美观。早在诞生之初,就有人指出,知乎日报与 2011 年就推出的云端记事本应用 Catch Notes 应用图标相似——后者的图标是一个橙色背景的 3/4 圆。

李奇称,Catch Notes 的“3/4 圆”图标其实是来自首字母“C”,知乎日报的图标与其不一样,因此并不能将二者混为一谈。但看起来,知乎日报容易引起歧义的图形图标并不能算作一个特别优秀的作品,至少并不比知乎的“知”高明很多。

难说好看不好看的“豆”

从中文汉字图标到图形图标,知乎用行动证明了图形图标并不一定比中文汉字图标好。而豆瓣则走上了另一条路:从图形图标走回了中文字体图标。

一直以来,以文艺著称的豆瓣在移动端都被吐槽“方向错误”和“太过混乱”。在去年 8 月份推出“豆瓣 app”之前,豆瓣总共在移动端推出过 11 款应用。其中,最早的是诞生于 2010 年 2 月的“豆瓣FM”,最晚的是诞生于 2014 年 5 月的豆瓣一刻。“一个 app 只做一件事”的原则被豆瓣体现得淋漓尽致。

过去,拟物化(skeuomorphism)设计盛行,豆瓣如其他团队一样,在设计应用图标时倾向于使用图形来传递信息。除了豆瓣东西的应用图标算作是文字图标,豆瓣出品的其余 10 款应用的图标都是图形图标。可以说,豆瓣是一家偏爱图形图标的公司。

不过,豆瓣系应用在图形表达上有着比较明显的差异。有的应用图标很容易让用户理解,例如,豆瓣FM 的图标是一个收音机,豆瓣电影的图标是一部分胶卷放映机,豆瓣音乐人的图标是一段音乐频谱等。有的应用图标则容易让人摸不着头脑,例如豆瓣小组的图标是一个编制环(寓意交流沟通?),豆瓣阅读的图标是一只鸟,豆瓣一刻的图标像是一块碎了一角的饼干。

前豆瓣阅读产品经理小鱼告诉我说,豆瓣阅读图标上的鸟名为鹡鸰(jí líng),寓意自由。鸟背后有一段文字,取自 20 世纪世界文学史上最伟大小说家之一的马赛尔·普鲁斯特(Marcel Proust)代表作《追忆逝水年华》七部曲之二的《在少女们身旁》(à l’ombre des jeunes filles en fleurs)。

显然,豆瓣阅读的这一图标符合豆瓣整体的文艺气质。如果你看得懂这只鸟和普鲁斯特的名作,也许能够建立起它与豆瓣阅读的联系。尽管这种联系似乎有些晦涩,但如果豆瓣阅读直接以“阅读”、“阅”、“读”等中文汉字作为图标,恐怕也无益于豆瓣阅读的品牌树立。

“在当时,豆瓣阅读需要突显其‘自出版平台’的特质,因此以普鲁斯特的名作作为图标可能更容易引起用户的共鸣。”小鱼表示,相比起文字,人脑对图形的记忆更加容易。因此,豆瓣阅读从来都未考虑过使用中文汉字作为图标。在这一图标之前,豆瓣阅读还有过一版图标是一个坐在椅子上安静读书的女人。

有趣的是,豆瓣在去年中旬开始“幡然醒悟”,推出了一款整合了书、影、音、活动的“豆瓣 app”。在这款应用上,豆瓣推翻了过去的种种原则,包括用中文汉字图标“豆”取代了曾经偏爱的图形图标。

测试阶段,豆瓣团队曾有两个应用图标的替代方案:一个是“书、胶卷放映机、电视、五角星”四个小图标集合的大图标;一个是更简洁的绿色五角星图标。不过最终,一个更直接的“豆”字得到了豆瓣团队的青睐。

小鱼并没有参与到豆瓣应用的开发设计当中,但她认为,豆瓣在思变过程中,并没有设定一个严格的标准要求豆瓣应用必须使用中文图标或者图形图标。只不过,在当时的情境下,中文汉字图标更为适合。

“一款好的应用图标最本质的特征是能够占领人们脑子里的空隙。首先它必须是简单的,其次是能够与产品建立起联系。在当下,豆瓣团队可能认为‘豆’字更容易达成这个目的。至于五角星或其他图标,一不简单,二与产品建立的联系不直接。”小鱼说。

不好评价从图形图标到文字图标的这一变化是否正确,但用在当下的豆瓣身上,可能是最合适的举动。去年 12 月,苹果中国区评选了 25 款年度优秀应用,豆瓣位列其一,这或许可以看做是对豆瓣思变的一种侧面肯定。

字体图标 VS 图形图标

与豆瓣一样被评选为苹果中国区年度优秀应用的榫卯团队,他们左手一个图形图标,右手一个中文汉字图标。

“榫卯”是中国古代建筑中用于连接多个木构件的一种常用方式。在当下,人们对传统木艺概念越来越模糊。榫卯团队打造了这一款应用,旨在向现代人展示这一特殊的传统文化。应用内主要介绍了 27 种常见的榫卯结构和相关的木料、器具、历史等知识。

考虑到当代人对“榫”“卯”二字及其背后所代表的事物不甚了解,榫卯团队在设计应用图标时,并未有过多犹豫便选择了一个三维结构的榫卯图形,而不是文字图标。当然,作为一款注重内容、设计精美、交互酷炫的应用,榫卯如果搭配一个简单朴素文字图标作为外壳,或许会产生一种别扭的违和感。

在榫卯设计师耿凌飞看来,图形远比文字更容易传递信息,不过在决定一款应用该使用哪种图标时,需要考量产品是什么类型。“以榫卯为例,偏重游戏或娱乐的应用,一般选择图形图标更讨巧,容易引起用户兴趣;而倾向于表达严肃性内容的应用则更愿意选择中文图标,中文汉字图标更加专一,不会产生任何歧义。”

榫卯团队的另一款作品——专为一席团队开发的移动端应用“一席”——便与榫卯完全不一样,它的应用图标是中文汉字一席的“席”。

耿凌飞介绍称,一席经过两三年时间的发展,已经树立了自己独特的品牌。将其搬到移动端来,选用“席”字作为图标可能更容易帮助延续品牌统一性。而且,一席是一个偏文化的应用,如果在设计图形时做不好,很有可能失去一席本身的气息。“相对来说,文字是一个保守的选择。”

旗下拥有两款截然不同的应用,榫卯团队似乎有资格就应用图标设计说点什么。耿凌飞认为,应用图标最基本的功能是连接用户与产品的一种媒介,它必须能够准确表达产品意思,提供产品信息。其次,运用视觉设计、图形提炼、色彩运用等等,设计师可以让一款图标变得好看起来,不论它是汉字图标或是图形图标。如果涉及到扁平化或拟物化的选择时,当然得明白一点:设计是用来解决问题,不是炫技的。“该拟物时拟物、该扁平时扁平”才是一款好的应用及其图标应该遵循的原则。

看到这里,也许你心里已经有了一杆秤。中文汉字图标丑吗?对熟悉它并已经产生审美疲劳的中国人来说,恐怕是的。但它就一定不能用吗?并非如此。四位设计师讲诉了在设计自家产品时,他们为何会选择中文汉字图标。至于怎样使用中文汉字图标才不会让用户产生嫌弃感,可能他们也无法表达得通俗易懂。所以,一切都留给读者你去思考。


预约演示
电话咨询
咨询热线

工作时间:9:00-22:00

191 3067 1449
在线客服
需要帮助?

我是小摹,你的7*12小时产品顾问

立即扫码加入官方微信群