iOS 7 中的 Safari 圖標是不是非常丑?

設計師是怎麼想的?


大多數人覺得更小的圓環會更好看,我想嘗試回答為什麼中間的圓環會那麼大。

iOS 7 全新用戶界面風格,很重要的一個出發點,就是設計為內容服務(let the UI play a supporting role),設計服從內容(defer to content),充分利用展示面積,更少的裝飾,更多的內容,更清晰的內容。所以圖標設計的那個統一框架,全新 grid system 的設計也是居於此作考慮。下面看時鐘(Clock)的圖標,更大的圓環即是更大的錶盤,保證錶盤數字的清晰可見。如果錶盤更小,可讀性就很難保證。(同時可以注意看時針和秒針,也是跟 grid system 的兩個內小圓環對應)


可以這樣大概認為,這個 grid system 就是以時鐘圖標為藍本而設計,以此為最低限度。而我看到的大多數 redesign 都只考慮單一個 Safari 圖標的情況,更小的圓環或許會更好看,但這顯然跟想要遵循的 grid system 相悖。同時也反駁無力。除非,誰能拿出一個更好的 grid system,或者能夠說服,圖標的風格並不需要統一,不需要受限.. 下面是 iOS 6 既有的兩種尺寸圓環:


那 iOS 7 的 Safari,包括 iTunes 和 App Store 圖標圓環真的偏大嗎?美觀與否跟圓環大小真的有很強相關性?或者說其實根本原因只是人們看慣了舊圖標,對新的圖標元素比例關係感到陌生而已?我認為是後者。


我能理解 iOS 7 統一結構的做法,認為 Safari 和 Photos 和 Compass 和 Weather 和 Camera 是裡面非常好看的幾個,而且非常獨特。


根據移動調查工具Polar的調查,在超過46401受調查者中,iOS 6隻有少數幾個應用圖標更受青睞,包括提醒、Safari、遊戲中心、相機、日曆應用,而且大多數情況下,相比iOS 7,它勝出的優勢要微弱得多。
調查稱2/3人更喜歡iOS 7圖標設計


漂亮並不是圖標設計的終點,不表示丑的圖標就不能說丑了。而且用前半句話來論證一點都不醜的,邏輯都不對。
把牛肉咖喱做成大便的樣子,無論牛肉多貴,咖喱多好吃,香料幾十種,步序多麼複雜精緻,別人問「看起來怎樣」也只有「像大便」
順便一說我還是會升級的,但是我絕不會說「圖標真好看」


配色美醜先不去判斷,因為距離正式版還有段調整時間。只回答一下為什麼圖標中心圓圈為什麼這麼大。

在另一個回答(如何評價 iOS 7 beta?)里,我提到了關於新圖標的網格。

圖標的網格要複雜的多。我難以判斷這些圓形和連線從何而來,一般來說,除了感性的尺度感受,複雜網格的建立往往基於一些幾何公式,黃金分割是其中的一種。當然更重要的還是在某一邏輯起點上的內部展開。
比較重要的問題是,新圖標圓角的更大的弧度從何而來?


回到這個圖。
網格圖中兩個主要的正方形,最大的正方形來自於圓角弧形中點的連接點。
對該正方形做內切圓,就是safari等圖標最大圓的來由。

所以圖標的設計是來自這個網格,也就說這是數學和幾何的理性優先,而非感性的尺度判斷?

所以難看?

我看了上面的對比圖,反而覺得左圖特別一般,而右圖多了些別的新鮮感。圓滾滾的圖標和增加了弧度的圓角相得益彰。如果退回到左圖的設計,反而高度近似於老iOS的感覺,那何必要改弧度呢?!

基於此,我覺得這個改變,和新網格的設計絕對是深思熟慮的結果,而我們所謂的審美直覺,反而是相當長時間被舊圖標訓練的結果。

新的比例,新的幾何,新的胖嘟嘟的、有點Q的圖標,這些新鮮的喜悅感和整個界面是高度吻合的。

為什麼Notes程序的橫隔線破了出去而沒有收攏在內部,因為這樣才有撐滿的感覺啊!

你可以說我盲目崇拜大師——我樂意,我沒你那麼自信——但至少我能判斷,上面改圖標的那位設計師是多麼不靠譜和業餘啊,有能耐你跳出老圓角比例的審美窠臼再來批判。


Apple 和 Ive 的光環太強了。

不同意提問者的看法,我不認為是非常丑。在看了真機上的 Beta 版後,我覺得比網上圖片感覺要好一點點。

是比較丑。


這麼丑的圖標怎麼配的上如此好的手機,虎女怎能配犬子?????

左邊是設計師重新設計的,右邊是原版的:

左邊是設計師重新設計的,右邊是原版的:
Dribbble - Redesign_iOS7_Comparison_V2.jpg by Leo Drapeau

作為一個設計師,我不能因為這些圖標是蘋果公司設計出來的,我就說好看, 很多人不敢說,但是我相信大多數設計師的眼睛絕對是雪亮的,Jonathan Ive 在硬體設計上,工藝製造上可以說是非常NB,但是,如果他去Dribbble上看一圈圖標,在回頭看看自己的這套,壓根就是.....無力吐槽,所以大家不要搞的像皇帝的新裝一樣,丑就是,沒什麼的,丑可以慢慢改么。


我覺得丑的原因有以下幾點:

1、不協調的壁紙和圖標:可能是因為壁紙太淡,但是好的圖標肯定要考慮壁紙的深淺與圖標的兼容感,不知道這版圖標的設計師考慮過用戶切換主題背景後的容忍度嗎?
說簡單點,丫的就是看上去很輕浮!這難道就是扁平想傳達給我們的意思?扯了!

2、略顯粗糙的漸變色搭配:漸變色有時候從深到淺,有時候從淺到深,關鍵是方向不一致,給人的感覺就是你這個光到底從那個方向打過來?你自己搞清楚了沒?
細看「電話」的圖標,光是從上至下,再看「郵箱」,又是從下至上,你這是要鬧那樣?
別告訴我要打破規則什麼的,沒有標準沒有統一,這不就是瞎搞么?

3、顏色真的不耐看,感覺這個配色,扁平化的配色其實非常不簡單,稍微偏激一點就是不柔和,在高亮情況下非常刺眼,刺眼就是不耐看,但這個可能和背景也有關,但就看這些圖標的顏色,我非常不喜歡;

4、不必要的複雜:那個「設置"圖標是最明顯的,你畫一個齒輪用戶難道就不知道是設置?你畫那麼多圈圈和齒輪,我還以為是我小時候拆的鬧鐘呢,這圖標都扁平化了完全不用這麼複雜哇。

5、圖標所表達的意思不明顯:「記事本」和「提醒」圖標,如果我把文字去掉,估計很多人搞不清楚,尤其是「提醒"就像是word裡面的分段,這「遊戲中心」的四個圈圈我以為是主題設置,那個「報刊雜誌」圖標元素明顯過多與其他圖標的風格完全不統一...

作為一個蘋果的圖標設計師難道看不出來嘛?這難道就是 Jony Ive 的品味?這圖標居然過了~~
扁平化是一種設計風格,但我知道不是這麼玩的,各種不一致,邏輯缺陷,平庸無奇,沒有統一的風格,一套超爛的圖標,唉,太極八卦64掌,吐槽結束,打完收工。

讓我們靜下來心來對一下iOS 6與iOS 7的圖標:

我知道要創新,但是創新的本意是要讓體驗更好,設計讓生活更美好,當你拿出一個拉風的iPhone5 ,配上這些圖標,我覺得體驗好不了,你們不要噴我了,去噴 Jonathan Ive,蘋果公司的設計都歸他管!

我知道要創新,但是創新的本意是要讓體驗更好,設計讓生活更美好,當你拿出一個拉風的iPhone5 ,配上這些圖標,我覺得體驗好不了,你們不要噴我了,去噴 Jonathan Ive,蘋果公司的設計都歸他管!


實際上那個 Safari 和 Settings 圖標如果出現在 Flyme 系統上,幾乎可以預測是壓倒性的負面評價。

這個推測的證明是個真實的例子:我堅信配合好的字型大小和內容,非粗體也可以用於發布會。而 MX2 水立方發布會的非粗體遭到批評,而 WWDC2013 卻無人吐槽。

不過,光環效應本來就是審美的一部分。鄰家小孩的塗鴉就是和畢加索一樣,不獲肯定也算正常。

那設計者如何定位自己的設計?

當你嘗試了各種字體字型大小,襯線非襯線,最終在場地的那塊巨幕上看到效果的那一瞬間,你知道你的選擇是對的 - 認真比較,用心體會,相信自己。

那麼, Ive 會看不出 Safari 圖標的那種普遍意義上的丑?

我不相信。

很可能,他最終選擇遵從自己的內心,而非討好用戶或者專家而已。

PS
看到別人「修正」的 Safari 圖標,多說兩句。普遍意義上的美,又往往意味著平庸

而這個 Safari 圖標的「丑」所帶來的衝擊力,是那些「修正版」絕對沒有的。


修正版?的確"討喜",但是也更加平庸。(「討喜」這個詞本身,還不夠平庸和媚俗嗎?)


Ive 版的 Safari 讓我想到大阪萬博的太陽之塔。
很醜,但是是傳世之作。


要讓後人記住就要有突破,要突破就要有代價。
有時,這個代價也可以是大眾意義上的美啊。

Ive 有他的聲望和蘋果的名聲作為足夠的光環,讓他有資本作更大膽的嘗試。
這時,他膽敢在「平庸但是符合大眾審美」,「不俗但是挑戰既往」之間選擇後者?

我到有點敬佩。


個人感覺,蘋果圖標的風格有點像從古典和浪漫主義邁向了印象主義。這種風格擺脫了擬物化的過於修飾,不再重視物體的形狀和質感--因為一塊玻璃顯示出來的圖像確實沒有什麼實在的形體和手感可言,而開始提高對比度和明度,側重視覺印象和光色效果。
當然,最重要的就如@巴別魚說的一樣,要考慮圖標存在的價值。在一個人機信息互動的界面上,圖標作為尋找信息的路標,當然是越簡單明白越有價值。
我想,在現實生活中,物體的功能往往需要藉由具體的形狀和結構來發揮,因此在諸如電腦、手機這種圖形界面剛開始發展的過程中,擬物化可以使人們更好地識別圖像的功能,減少因為抽象圖像引起的功能的誤解或者困惑。因此在這個階段,擬物化應該在某種程度上大大減少了信息獲取成本。
但是隨著圖形界面的同質化和用戶對於圖形界面的熟悉,具象的圖形開始變得讓人審美疲勞,或者本質上是信息獲取疲勞(借用@巴別魚 門口油畫的例子)。當用戶對圖像背後代表的功能有普遍認知後,「印象主義」的藝術風格便可以被大眾接受了。此時,具體再次被抽象,那些現實生活中的物體為了實現其功能而不得不存在的,諸如陰影、形狀、結構以及紋理與質感的特性,都不用再被遷就。此時,亮度、色彩——這些能夠讓人不假思索即獲得深刻印象的元素,便成了扁平化趨勢中的核心。
因而,扁平化讓擬物性回到具化的現實世界,讓功能性重新回歸抽象的信息世界。
或者說,扁平化本質上是去擬物化而重新擁抱功能化,最終,減少了用戶信息獲取的時間成本。

【ps】我想大膽猜測一下,蘋果推動扁平化除了以上的原因,很可能是為新的具有革命性外觀的iphone做鋪墊,現在浮現在我腦海里的,是網路上曾經流行過一款透明概念iphone。你們不覺得ios7中的明亮色彩和半透明3D效果與這款概念機型是絕配么?


一個簡單的原則,大的比小的更好分辨,所以iOS7的圖標寬度多了6像素。在可能的情況下儘可能增大圖標尺寸。上面很多所謂好看的圖標都把Safari里的指南針縮小了。

好分辨還有一個方法,就是高亮,就像現在這個效果。我說的好分辨就是好找到,並不是好猜到圖標表示什麼功能,是記住圖標大概什麼樣子,然後一眼掃過好找到。

我覺得雖然第一感覺丑,但是相比細節豐富的舊圖標,是比較好找到了。

所以以我設計門外漢的角度,這次的設計是回歸圖標的本來目的了。

美醜是很主觀的事情,以這個為最大原則就會糾結,鑽牛角尖。所以應該有其它更大的原則來做設計。然後再考慮美醜。


我覺得一點也不醜。(6月13日補充:我再解釋一下,我說不醜是因為它的改變,重繪輪廓,建立規則,去除非必要高光層,去除非必要紋理。這個只是 beta 版,是個非完成版,可以說還處在「青春期」,因此我稱作「不醜」,而不是漂亮。輪廓的部分可讀 iOS 7 的圓角圖標是怎樣一個圖形?)

我一直認為「漂亮」並不是圖標的終點,它要傳遞的才是它存在的意義。也就是圖標設計的源頭不是「漂亮」,不是 「來,我們來設計個好看的圖標吧」 這樣的初衷。再者,在環境(系統)的包圍下,它的漂亮,也不是孤立的。就像微軟的新 logo 你不可能只用好看來評價。app 圖標在現在看來更類似路標,它要明晰的告訴你往哪裡走,」漂亮「在這裡是包含」合適的「這一層意思。

我對幾個 iOS 的 Flat 一直是非常的期待的,因為它在這兩年有些與時代不太適應。這些看法一方面是我在用 chrome 的時候產生的,另一個則是我看到手機使用狀況改變的引起的。

  1. 我在另一個問題中說過, Google 產品特別是 chrome 對我的影響很大,看到那些改版後 chrome 以及 chrome store 里的 Google Drive、Google calendar 的圖標,我覺得這個才是牛的。沒有複雜圖像(比如極擬物圖標)帶來的「負擔」感,「負擔感」就是那種多餘的信息引起的,打個比喻來理解一下:就是一道門上貼著一副油畫,你每次進門都要不得不看看這幅畫那種感受。再者,圖標在如今可以開始慢慢脫離其實物導向這一層,直接引向實際應用,就是說,圖標可以直接和應用建立連接而不需要中介。
  2. 這一條來自傳 Jony Ive 正在推動 iOS 採用扁平化設計(Flat Design),這會有怎樣的影響?我的回答。由信息密度來決定什麼才是合適的,一個屏幕面積不變,信息只能一層一層堆在一起,然後在一層一層地剝離出屏幕傳遞開來,當我們的手機里的應用越來越多與日常生活聯繫愈來愈緊密,不再如前方向從屏幕獲取,這個屏幕可看作生活信息傳遞交流的維度交界,信息雙向交流在這個界面佔有的比重更大了,而來自屏幕單方面的情感和視覺需求(這是擬物/擬物機理重要的兩方面需求)在這個交界被排擠。iphone 的 UI 改變是必須的,如若這一兩年不變後果「不堪設想」。一句話就是去掉負的信息,用盡量少的形式直接指向所指。

其實我還想在這裡說一點,我們評價某件事物總不自覺把它孤立出來做判斷,很少站遠一點看看它在其環境中是如何其作用的。


注意看 Safari 和 Mail 的圖標。


Safari 的圖標是一根磁針放在一個突起表面上,這樣才能轉。
Mail 是一封信放在一個凹進的盤子中,這樣方便拿。
那些隨便就壓扁或者改成同一方向的「改進」們,你們想明白了沒?


將近一年了,捫心自問,是不是真心覺得設計師的水準夠高,現在還有人覺得丑么?
Safari挺漂亮的


我認為這個圖標不醜

蘋果為什麼設計出這樣一套圖標?我有如下的簡單推測

首先我並不是什麼平面設計專業人士,也沒有收到過任何有關平面設計的專業訓練,以下內容僅僅是我作為一消費電子愛好者出於自己的喜好,偏愛所給出的一種解釋,僅供參考。

觸屏手機發展到今天,UI的變化翻天覆地,早已脫離了前幾年跟風模仿iPhone界面的洪荒時代。今天,Android手機高度的可定製性可以放任用戶自己將手機界面修改成幾乎任何他喜歡的樣子,手機廠商或者運營上自帶的默認UI的重要性大大降低。而反觀封閉陣營,WP和iOS陣營的UI則具有強烈的「個人」風格。這個「個人風格」指的是手機UI自成一派,具有強烈的可辨識性和一定的不可複製性。比如WP的磁貼,遠遠看見手機上一個又一個純色長方形靠在一塊,你馬上反應這是一台WP。又比如iPhone的圓角矩形擬物圖標,遠遠地可能不好說是一台真iPhone還是山寨iPhone,但至少你會有一種強烈的iPhone感覺。這樣的風格可以說是自成一派。不可複製性則意味著如果你只是抄襲一部分UI那麼結果會很突兀,感覺總是缺了其餘的部分,而如果你全盤照抄,那麼別人肯定會認為這是山寨機而不是什麼自主品牌。

我個人認為,對於一個封閉的手機系統來說,具有強烈個人風格的、自成一派的、具有一定的不可複製性的UI是最重要的。你可以說WP很醜,你也可以說WP很美,但美不美對於上述的要求來說是次要的。(何況美不美這種東西也太難捉摸)這種感覺就是兩軍交戰雙方的軍旗一定要亮出來,清晰表明自己的立場,我就是要跟你干到底,想讓我軍投誠那是絕對不可能的。嗯,就是這種感覺。微軟要讓用戶知道,自己買了一部WP而不是一部iPhone的跟風者、模仿者、低價替代品……蘋果要讓用戶知道自己買了一部iPhone而不是一部Android某某UI的跟風者、模仿者、高價替代品……

iOS7新UI的這套圖標,還是具有一定的個人風格和不可複製性。這個人風格和不可複製性就蘊藏在細節之中。仔細觀察就會發現,部分新圖標的細節具有突破性,比如很迷幻的設置圖標,以及這個無數人說丑的Safari。但總的來說,新圖標的水平比起以前的擬物設計,蘋果風格削弱了很多。尤其以Photo、Game Center這兩個為代表,幾個多彩的色塊或者氣泡就想打發用戶,你以為你是微軟嗎?強烈的個人風格和不可複製性在新一代圖標上僅僅存在與少數一部分圖標上,簡單地說,這套圖標不那麼蘋果了。如果原來的擬物設計圖標可以打90分的話。對這套圖標我只能打70分不能再多。如果其他圖標能有設置圖標和Safari圖標這種設計水平,哪怕是Passbook這種水平,也是一套好圖標。

而左邊那一套設計師重新設計的圖標,可能更符合一些平面設計原則,更符合一些大眾審美觀(比如那個大眾的不能在大眾的設置圖標),但是如果作為一套iOS圖標只能打40分不及格。原因很簡單,去掉iTunes Store,App Store,Safari 和Game Center,你基本看不出來這是一套蘋果圖標。

歡迎批評指正


圖標本身形狀不醜,目前看到外界kuso的ios7,極少能超過原作。
原作的失敗在於配色,居然一水的熒光色,配上熒光色的默認壁紙,明晃晃的的扎眼,很難受,缺少質感。而且圖標的高光區不統一,有的在上方,有的在下方,有的在左上角。
其實色彩做的舒服點,配上那個星雲的新壁紙,還是很不錯的。


因為是蘋果,知乎上挺多人不敢說好看,這個我理解。畢竟知乎谷歌老大微軟老二小米索尼老三老四,華為ov五六七,蘋果蹲牆角瑟瑟發抖,不敢大聲言語。


一直以為是指南針……


老實講,現在iOS的圖標也不好看。只是我們習慣了而已。


棺材板里的iOS 6表示不服。。。iOS 6 的Safari圖標設計立意也比較明確,指南針和世界。

雖然iOS 6的圖標要稍小一點吧,小的這部分基本上就是圖標陰影了,每顆圖標都像浮在壁紙上面的立體水晶糖豆一樣讓人有種想觸碰的感覺,而iOS 7的圖標設計就沒有這種感覺。iOS 7的圖標與壁紙直接就是明暗反差明顯的高對比度網上堆了,感覺這種設計很敷衍,一旦使用了淺色壁紙就和圖標顏色衝突。好在iOS 7的圖標主題設計很簡潔,基本上很容易讓用戶記住。可是然並卵啊,就是沒有iOS 6這麼精緻!


iOS 7的Safari圖標要說丑倒也是不至於,但是它基本沒啥立體感,就是詮釋很簡單的主題。

另,Mac系統上的圖標設計我認為是患有精神分裂的設計師設計出來的,既要和iOS的圖標保持類似又還有Mac上遺留的老圖標風格,iOS沒有的圖標就從老Mac老圖標繼承出來,導致Launchpad裡面的圖標有圓的、有方的又有不規則的。


右邊的原版更豐富多彩,包括發布視頻里選用的璧紙是高純度的圖片,圖片選用純底年輕人物,難道蘋果沒有考慮圖片對圖標呈現的影響嗎?肯定有。整個7給人年輕活潑,帶些清新文藝色彩。

再說圖標:左邊看來確實不錯,相信設計師用不到一天時間就可完成。一是原版在先,只做修改。二是,感覺像是一個模具造出來的。確實統一了,但也失去了圖標內容自身的特色。

左邊圖標就像韓國整完容回來的,一個樣了,大眾臉,就像其它朋友說的成mimu了。
右邊我第一次看非常喜歡,我的菜。當看到作者提供的修改版後也確實覺的有點小問題。
但還是喜歡右邊,整體統一而不失個性吧,這算不算7的年輕個性的綜旨呢!囯外的教育也是如此吧。。(扯遠了,收)


優勝美地版Safari圖標表示不服!


推薦閱讀:

TAG:用戶界面設計 | Safari for iOS | iOS 7 | iOS Design |