那些醜醜的應用圖標,設計它們的人是怎麼想的?

2021-01-18 站長之家

略醜的「支」

赭(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,但知乎日報的圖標顯然並不能算作一個特別優秀的作品,至少並不比知乎的「知」高明很多。

難說好看不好看的「豆」

從中文漢字圖標到圖形圖標,知乎用行動證明了圖形圖標並不一定比中文漢字圖標好。而豆瓣則走上了另一條路:從圖形圖標走回了中文字體圖標。

一直以來,以文藝著稱的豆瓣在移動端都被吐槽「方向錯誤」和「太過混亂」。在去年 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啟動圖標設計方法!
    文/吳雁 行動裝置的智能化為人們的生活、工作提供了一個新的媒介平臺,大量的、具有各種功能性的應用軟體出現在這一領域。啟動圖標是應用軟體的主要入口,能直接引導用戶下載並使用應用程式。這就需要在設計圖標前,先了解最新的設計潮流,並將其視覺風格融入到應用圖標設計中。②分析競爭對手。對於圖標設計來說,更重要的是在其他應用市場中保證它們能在眾多相關功能類的圖標中脫穎而出,戰勝目標市場上的其他競爭者。找到競爭者們的圖標,然後從視覺因素到表意的準確性上進行客觀的分析,借鑑優點為己用。
  • UI設計規範-圖標
    但是如果你知道人類視覺的特殊性,你就可以做出更好的設計。字體設計師不僅使用視覺技巧來創建可讀的、平衡良好的字體,而且對互動設計人員也很有幫助。在20世紀20年代,格式塔視覺知覺理論發展起來。它解釋了我們的眼睛如何處理不同的圖像以及我們的大腦如何解釋它們。您可能已經聽說過接近原則或共同命運規則之類的東西。
  • UI圖標設計太老氣,試試這9個妙招!
    插畫將用戶帶入敘事中,講述一個故事,而圖標則有更多的功能目的。它們代表內容而不是補充內容。一般來說,插畫使用隱喻和敘事來描繪大型主題概念。而圖標則簡單得多,更適合描繪非常具體的概念。把插畫看作是段落,把圖標看作是要點。
  • iOS14更換應用圖標教程
    蘋果手機更換圖標之前在iOS13系統中,我們就可以通過快捷指令這款APP的來玩,現在iOS14系統更新了之後,很多小夥伴想要修改手機桌面上的應用圖標就不知道該怎麼弄了。這裡小編為大家帶來了iOS14更換應用圖標教程,我們一起來看看吧!
  • iOS14怎麼隱藏app圖標 隱藏應用操作方法介紹
    iOS14怎麼隱藏app圖標 隱藏應用操作方法介紹 iOS14正式版裡加入了一個比較不起眼的功能「隱藏app
  • APP工具欄圖標設計方法!
    文/羅曉萌 工具欄圖標的設計在整個應用程式中扮演了人機互動的重要角色。工具欄圖標設計的成功與否,直接決定了用戶對應用程式的滿意度。如果說啟動圖標是應用門面的話,那工具欄圖標就是導航燈,它的設計應該是以提示、引導、警告為目的。APP只有一個啟動圖標,但是卻有很多的工具欄圖標。①將圖形幾何化。我們生活中所看到的任何圖形,幾乎總是有幾何形的存在,將圖形簡化為幾何形是對圖形進行一種高度概括。
  • APP圖標風格與設計策略!
    在使用手機應用軟體中,我們通過圖標看到的不僅僅是圖標本身,而是它所代表的內在含義,我們在設計圖標時,要著重考慮用戶視覺感知與用戶體驗。①擬物化。為了更好地體現內容,形成獨特的視覺美感,以及創造更具個性的感官體驗,運用繪畫手段表現界面視覺元素一直以來都是最有效的方法,繪畫風格的圖標往往會具有一種原始的美感,能夠使設計更有紀念意義。
  • 美設計師出售iPhone應用程式圖標,1周收入近百萬
    設計師Traf推出iPhone應用程式圖標,僅僅1周的時間就爽賺14萬美元(網絡圖片)賺翻了!美國舊金山設計師Traf,推出iPhone應用程式圖標後引起果粉們的搶購熱潮,讓他僅僅1周的時間就爽賺14萬美元(約人民幣95萬元)。
  • 圖標、組件、字體,超實用設計乾貨大合集
    和以往類似,11月的乾貨合集當中,涵蓋了一些實用性頗為不錯的設計工具和開發工具,但是最實用的始終是各種圖標、組件、還有字體,下面具體看看吧: The Good Line-Height https://www.thegoodlineheight.com/
  • 視頻類APP圖標設計規律!
    在千千萬萬的圖標中,如何找到圖標設計規律?本文從視頻類APP的圖標設計入手,運用符號學原理及方法進行淺析。圖標設計的關鍵則是設計符號的選擇和運用。這裡通過對圖標的符號分析,找出視頻類APP圖標設計中符號選擇運用的規律。主要從兩方面入手:圖標意義來源的選擇、符號設計修辭方法的運用。
  • 如何更好的設計圖標?這篇講透了!
    (譯者:這部分的話,大家可以去閱讀以下谷歌的圖標設計指南,裡面專門講過這部分)2.5 讓圖標和諧畫一個好看的圖標是很簡單的。分別畫幾個好看的圖標也不難,真正讓你崩潰的是怎麼讓他們看上去和諧。首先我們要明白一個問題就是為什麼要讓圖標看起來很和諧?
  • 為什麼現在的應用圖標都用白色作為背景?
    前不久在倫敦、洛杉磯、弗洛倫撒、阿姆斯特丹舉辦的關於「app圖標優化設計」的活動中,很多人談論起了如今流行的app圖標設計趨勢,其中討論最多的話題是為什麼越來越多圖標開始用白色做背景色了?為什麼會這樣呢?在這樣的設計中,app圖標的白色背景和白色的交互界面融為一體。
  • 加密應用——手機桌面圖標隱藏
    讓 OPPO 保護你的隱私,如果手機 APP 有隱身術,你最想隱藏哪個 APP?我想隱藏各種聊天 APP ,畢竟有聊天太多隱私,不能讓別人知道我有多厲害......如果你覺得每次進入加了密的應用都要輸入密碼有些麻煩,那麼也你可以這樣設置,將指紋和面部用於應用加密,這樣就可以避免多次輸入密碼的煩惱了。進入應用加密 — 點擊右上角設置 — 應用短暫退出免驗證。
  • 這個網站可讓YouTube等APP圖標「變回」舊版設計
    這個網站可讓YouTube等APP圖標「變回」舊版設計 這些年來,不僅iOS的設計發生了變化。許多APP的圖標也進行了多次修改。然而,對於部分人來說,仍舊更喜歡舊版APP圖標的設計,但是還回得去嗎?
  • 手把手教學:華為手機應用圖標替換,表達心意的又一大招
    今天教大家怎麼把手機應用的圖標替換成自己喜歡的照片!小編手機是華為的榮耀V20。話不多說,現在開始吧!第一步:我們找到「主題」應用,點擊打開第二步:進入主題應用界面後,點擊右下角「我的」第三步:在「我的」頁面選擇「混搭」,點擊進入第四步:進入「混搭」配置頁面後,選擇「圖標」選項
  • logo圖標設計的趨勢是什麼?
    關於平面規劃師來說,需求了解並且發現平面規劃中的盛行趨勢,開掘它的利益並且加以運用,然後將自己的規劃技能提升到一個新的水平,那麼現在logo圖標規劃有哪些盛行趨勢呢?今天就跟隨小編一起來了解下吧!一、計數器這些箭頭,線條,矩形塊等相似計數器中出現的幾何元素被規劃師運用在logo規劃中,它們可以經過一些簡略的組合來創立具有極佳作用的視覺符號。這些幾何圖形可以是單色,突變或多種顏色,組合的整體形狀不只直觀有效地展示了品牌所表達的觀念,並且其負形部分也具有相同重要的含義。二、迷宮線條迷宮在logo中的運用可以增強客戶期望與其品牌或產品相關聯的許多目標。
  • iOS 14桌面找不到應用圖標怎麼辦?iOS 14桌面找不到應用圖標的解決...
    如果在升級 iOS 14 之後,無法在手機桌面上查找到某個應用的圖標,並且前往 App Store 下載應用時提示「打開」(即已經下載),則可以通過如下方式找回應用圖標。 iOS 14桌面找不到應用圖標怎麼辦?iOS 14桌面找不到應用圖標的解決方法 1.在「資源庫」中進行查找: 在 iPhone 主界面中連續向左滑動屏幕,直到打開資源庫。其中包含了下載安裝的所有應用,可以在其中找到應用圖標後,長按拖回到主界面中。
  • Instagram 拿掉了應用首頁沒什麼人用的 IGTV 圖標
    現在,Instagram 開始從其主應用首頁移除惹人煩的橙色 IGTV 按鈕。Facebook 的一位發言人表示,「隨著我們繼續致力於讓用戶更容易創作和發現 IGTV 內容,我們了解到大多數人正在通過瀑布流、發現頁中的 IGTV 頻道、創作者個人資料頁面和獨立應用來查找 IGTV 內容。
  • 蘋果ios14桌面小組件怎麼改圖標 更換桌面圖標設置教程
    ios14小組件除了自定義桌面圖片之外,還可以更換圖標,使得每個軟體圖標都有不一樣的變化,讓你的桌面煥然一新,這裡需要使用快捷指令來完成,ios14小組件怎麼更換圖標?怎麼設置?下面帶來介紹。ios14小組件怎麼更換圖標?
  • 下載或更新應用時,iPhone安裝中的App出現白色網格圖標怎麼辦?
    在通過 App Store 下載或更新應用時,可能會有 App 出現在主屏幕上,但顯示為灰色或帶灰色線條的白色網格圖標的情況,如下圖。如果出現此情況,您可以進行如下操作:1.重新下載應用:請勿刪除應用。請先嘗試重新啟動設備,然後前往 App Store 並重新下載這個 App。如果您刪除 App,可能會丟失與這個應用相關聯的內容。