那些丑丑的應用圖標,設計它們的人是怎么想的?
【導讀】一個應用的圖標,就是這個應用的臉。
略丑的“支”
赭(zhě)隱是一名設計師,他供職于一家掌管著 2 億中國人移動支付安全的公司——支付寶錢包。不巧的是,這份工作并不討人喜歡,支付寶錢包的應用圖標一直以來都飽受爭議。批評者中不乏名人大 V。
春節(jié)期間,這種批評之聲來得尤為猛烈。因為,支付寶錢包在“支”字圖標底部簡單粗暴地新增了一行“億萬紅包”紅色橫幅,讓其比之前更加難以接受。
雖然好看或丑陋都是個人的純主觀感受,但問來問去,支付寶錢包的圖標似乎確實丟失了一些“美感”。那么,如果中文漢字圖標不好看,為什么支付寶還會考慮以漢字“支”作為圖標呢?
當我將這個疑問拋向赭隱時,雖然并不直接設計“支”字圖標,但他也不忘吐苦水,“通常情況下,設計一款應用圖標需要考慮諸多因素,好看與否只是其一。辨識度有時可能是首要考慮因素?!濒麟[認為,對中國用戶來說,中文漢字圖標的辨識度相對比較高,才容易建立起產品與用戶之間的直接聯系,讓用戶第一眼看上去就知道這是哪家的產品。“支”字當然會讓用戶立刻聯想到支付寶,而非其他產品。
品牌延續(xù)性也是設計支付寶錢包圖標時的重要因素。2013年6月份,支付寶錢包移動應用 7.0 大版本更新時,設計團隊拋棄了之前的“支付寶”三個字,而選擇了“支”字作為新圖標以延續(xù)品牌?!啊丁汀畬殹疾贿m合作為品牌形象吧?!濒麟[說,“其實,‘支’字也并沒有那么難看?!?/p>
赭隱所說的“不難看”可能更多指的是作為一款國民級應用,它的功能優(yōu)于其他。如果你和我一樣,是 2 億支付寶錢包的重度用戶之一,沒有將其刪除出空間有限的手機屏幕,一定是因為“我們基本上難以離開它”——支付寶錢包已經可以完成手機充值、繳納水電燃氣費、信用卡還款、余額寶理財等等。
以支付寶為例,你可能也發(fā)現了,移動應用同樣是一個看臉的世界。在面對一款應用時,你僅能憑借寥寥的介紹文字,幾張應用截圖,和一個應用圖標來決定是否下載。比起文字或截圖,有時候圖標可能會成為最關鍵的決定因素。
簡單來說,應用圖標可以被劃分為兩大類:文字和圖形。前者直接簡單地讓用戶知曉他正在使用的是哪一款產品,例如 facebook 的“ f ”,淘寶的“淘”;后者容易讓用戶從一大堆密密麻麻的文字圖標中立刻將其識別出來,例如星巴克的“雙尾美人魚”圖形,微信的“聊天氣泡”圖形。
并不能籠統(tǒng)地就認為,圖形圖標就一定優(yōu)于文字圖標。但一款設計精美的圖形圖標不僅能夠鶴立雞群,也能夠讓用戶直接將其與產品映射連接起來。然而,文字圖標則容易淹沒在應用大潮中,幾近與“美觀”無緣,尤其是全世界最復雜文字之一的中文漢字。
不難看的“知”
赭隱和支付寶錢包的煩惱主要在于,在保證支付寶錢包品牌一致性和圖標與產品最直接的映射關系的基礎上,如何讓用戶接受并習慣“支”字圖標。與赭隱一樣,同為設計師的李奇似乎并沒有這樣的煩惱。
李奇在中國最知名的問答社區(qū)網站“知乎”工作。與支付寶一樣,知乎的應用圖標同樣采用了中文漢字“知”。然而,李奇和知乎團隊受到的批評小得多。在他看來,原因之一可能是知乎很少變。
2011 年 9 月上線至今,知乎的圖標沒有發(fā)生任何變化。相較之下,支付寶粗略計算已經換過了至少 4 種圖標。
三年前,將知乎從網頁搬到手機端時,李奇和其團隊并未在圖標設計上糾結太長時間——延續(xù)品牌成為了知乎的首要目的。當時,除了“知”,“知乎”兩個中文漢字的圖標也是一個備選方案。不過,考慮到 iOS 圖標是圓角矩形,而“知乎”兩個字在視覺上是長條矩形,最終才選擇了一個漢字的“知”。
設計師李奇承認,純文字很有可能會讓圖標失去特色和辨識度,整個應用會被淹沒在應用的汪洋大海里。因此在將其作為應用圖標時,設計師通常會考慮從字體、形態(tài)等角度去修飾它,讓它變得容易被接受。拿知乎舉例,為了避免“知”字對用戶造成審美疲勞,知乎設計師對“知”字右邊的“口”進行了斜角特殊處理,讓“知”字看起來不至于太過生硬。
此外,“內容社區(qū)”的屬性也幫助知乎用戶更多將注意力放在了圖標之外的地方。例如,應用內交互動畫是否適宜,問答是否方便,以及是否能夠分享答案等。知乎應用上架 App Store 后不久,知乎上就誕生了一個問題“為什么知乎的 iOS app 不能發(fā)表答案?”。顯然,知乎用戶的優(yōu)先關注點并不在應用圖標上。
有意思的是,知乎團隊的第二款移動端產品——知乎日報,并沒有延續(xù)知乎以中文漢字作為應用圖標的傳統(tǒng),而是選擇了圖形圖標,“一個藍色背景的 3/4 圓”。李奇介紹稱,作為知乎的第一個子品牌,而且是完全誕生于移動端的品牌,知乎日報并沒有迫切需要在應用圖標上延續(xù)之前的風格。知乎日報的圖標出處是 iOS 下拉刷新時出現的一個環(huán)形圖標,寓意是知乎希望用戶每天用日報刷新知識。”
誠然,這樣的寓意契合知乎日報的產品屬性,但知乎日報的圖標實際上并沒有做到獨特而美觀。早在誕生之初,就有人指出,知乎日報與 2011 年就推出的云端記事本應用 Catch Notes 應用圖標相似——后者的圖標是一個橙色背景的 3/4 圓。
李奇稱,Catch Notes 的“3/4 圓”圖標其實是來自首字母“C”,知乎日報的圖標與其不一樣,因此并不能將二者混為一談。但看起來,知乎日報容易引起歧義的圖形圖標并不能算作一個特別優(yōu)秀的作品,至少并不比知乎的“知”高明很多。
難說好看不好看的“豆”
從中文漢字圖標到圖形圖標,知乎用行動證明了圖形圖標并不一定比中文漢字圖標好。而豆瓣則走上了另一條路:從圖形圖標走回了中文字體圖標。
一直以來,以文藝著稱的豆瓣在移動端都被吐槽“方向錯誤”和“太過混亂”。在去年 8 月份推出“豆瓣 app”之前,豆瓣總共在移動端推出過 11 款應用。其中,最早的是誕生于 2010 年 2 月的“豆瓣FM”,最晚的是誕生于 2014 年 5 月的豆瓣一刻。“一個 app 只做一件事”的原則被豆瓣體現得淋漓盡致。
過去,擬物化(skeuomorphism)設計盛行,豆瓣如其他團隊一樣,在設計應用圖標時傾向于使用圖形來傳遞信息。除了豆瓣東西的應用圖標算作是文字圖標,豆瓣出品的其余 10 款應用的圖標都是圖形圖標??梢哉f,豆瓣是一家偏愛圖形圖標的公司。
不過,豆瓣系應用在圖形表達上有著比較明顯的差異。有的應用圖標很容易讓用戶理解,例如,豆瓣FM 的圖標是一個收音機,豆瓣電影的圖標是一部分膠卷放映機,豆瓣音樂人的圖標是一段音樂頻譜等。有的應用圖標則容易讓人摸不著頭腦,例如豆瓣小組的圖標是一個編制環(huán)(寓意交流溝通?),豆瓣閱讀的圖標是一只鳥,豆瓣一刻的圖標像是一塊碎了一角的餅干。
前豆瓣閱讀產品經理小魚告訴我說,豆瓣閱讀圖標上的鳥名為鹡鸰(jí líng),寓意自由。鳥背后有一段文字,取自 20 世紀世界文學史上最偉大小說家之一的馬賽爾·普魯斯特(Marcel Proust)代表作《追憶逝水年華》七部曲之二的《在少女們身旁》(à l’ombre des jeunes filles en fleurs)。
顯然,豆瓣閱讀的這一圖標符合豆瓣整體的文藝氣質。如果你看得懂這只鳥和普魯斯特的名作,也許能夠建立起它與豆瓣閱讀的聯系。盡管這種聯系似乎有些晦澀,但如果豆瓣閱讀直接以“閱讀”、“閱”、“讀”等中文漢字作為圖標,恐怕也無益于豆瓣閱讀的品牌樹立。
“在當時,豆瓣閱讀需要突顯其‘自出版平臺’的特質,因此以普魯斯特的名作作為圖標可能更容易引起用戶的共鳴?!?/strong>小魚表示,相比起文字,人腦對圖形的記憶更加容易。因此,豆瓣閱讀從來都未考慮過使用中文漢字作為圖標。在這一圖標之前,豆瓣閱讀還有過一版圖標是一個坐在椅子上安靜讀書的女人。
有趣的是,豆瓣在去年中旬開始“幡然醒悟”,推出了一款整合了書、影、音、活動的“豆瓣 app”。在這款應用上,豆瓣推翻了過去的種種原則,包括用中文漢字圖標“豆”取代了曾經偏愛的圖形圖標。
測試階段,豆瓣團隊曾有兩個應用圖標的替代方案:一個是“書、膠卷放映機、電視、五角星”四個小圖標集合的大圖標;一個是更簡潔的綠色五角星圖標。不過最終,一個更直接的“豆”字得到了豆瓣團隊的青睞。
小魚并沒有參與到豆瓣應用的開發(fā)設計當中,但她認為,豆瓣在思變過程中,并沒有設定一個嚴格的標準要求豆瓣應用必須使用中文圖標或者圖形圖標。只不過,在當時的情境下,中文漢字圖標更為適合。
“一款好的應用圖標最本質的特征是能夠占領人們腦子里的空隙。首先它必須是簡單的,其次是能夠與產品建立起聯系。在當下,豆瓣團隊可能認為‘豆’字更容易達成這個目的。至于五角星或其他圖標,一不簡單,二與產品建立的聯系不直接。”小魚說。
不好評價從圖形圖標到文字圖標的這一變化是否正確,但用在當下的豆瓣身上,可能是最合適的舉動。去年 12 月,蘋果中國區(qū)評選了 25 款年度優(yōu)秀應用,豆瓣位列其一,這或許可以看做是對豆瓣思變的一種側面肯定。
字體圖標 VS 圖形圖標
與豆瓣一樣被評選為蘋果中國區(qū)年度優(yōu)秀應用的榫卯團隊,他們左手一個圖形圖標,右手一個中文漢字圖標。
“榫卯”是中國古代建筑中用于連接多個木構件的一種常用方式。在當下,人們對傳統(tǒng)木藝概念越來越模糊。榫卯團隊打造了這一款應用,旨在向現代人展示這一特殊的傳統(tǒng)文化。應用內主要介紹了 27 種常見的榫卯結構和相關的木料、器具、歷史等知識。
考慮到當代人對“榫”“卯”二字及其背后所代表的事物不甚了解,榫卯團隊在設計應用圖標時,并未有過多猶豫便選擇了一個三維結構的榫卯圖形,而不是文字圖標。當然,作為一款注重內容、設計精美、交互酷炫的應用,榫卯如果搭配一個簡單樸素文字圖標作為外殼,或許會產生一種別扭的違和感。
在榫卯設計師耿凌飛看來,圖形遠比文字更容易傳遞信息,不過在決定一款應用該使用哪種圖標時,需要考量產品是什么類型。“以榫卯為例,偏重游戲或娛樂的應用,一般選擇圖形圖標更討巧,容易引起用戶興趣;而傾向于表達嚴肅性內容的應用則更愿意選擇中文圖標,中文漢字圖標更加專一,不會產生任何歧義。”
榫卯團隊的另一款作品——專為一席團隊開發(fā)的移動端應用“一席”——便與榫卯完全不一樣,它的應用圖標是中文漢字一席的“席”。
耿凌飛介紹稱,一席經過兩三年時間的發(fā)展,已經樹立了自己獨特的品牌。將其搬到移動端來,選用“席”字作為圖標可能更容易幫助延續(xù)品牌統(tǒng)一性。而且,一席是一個偏文化的應用,如果在設計圖形時做不好,很有可能失去一席本身的氣息?!跋鄬碚f,文字是一個保守的選擇。”
旗下擁有兩款截然不同的應用,榫卯團隊似乎有資格就應用圖標設計說點什么。耿凌飛認為,應用圖標最基本的功能是連接用戶與產品的一種媒介,它必須能夠準確表達產品意思,提供產品信息。其次,運用視覺設計、圖形提煉、色彩運用等等,設計師可以讓一款圖標變得好看起來,不論它是漢字圖標或是圖形圖標。如果涉及到扁平化或擬物化的選擇時,當然得明白一點:設計是用來解決問題,不是炫技的。“該擬物時擬物、該扁平時扁平”才是一款好的應用及其圖標應該遵循的原則。
看到這里,也許你心里已經有了一桿秤。中文漢字圖標丑嗎?對熟悉它并已經產生審美疲勞的中國人來說,恐怕是的。但它就一定不能用嗎?并非如此。四位設計師講訴了在設計自家產品時,他們?yōu)楹螘x擇中文漢字圖標。至于怎樣使用中文漢字圖標才不會讓用戶產生嫌棄感,可能他們也無法表達得通俗易懂。所以,一切都留給讀者你去思考。
本文作者:@驚濤 ?轉載自:品玩pingwest
- 目前還沒評論,等你發(fā)揮!