蘋果公司官網導航條的設計是否足夠優秀？文字部分是浮雕還是蝕刻？

11-16

首先，這個投影是否必要，正常比例下看反而會不清楚；
其次，文字的投影與放大鏡的投影相反，實景光線不一致，是 bug？
通過技術的「術」字的那個點，判斷不是「陰刻、而是浮雕」，正確嗎？

我曾經做過蘋果主頁的高仿惡搞，也非常細緻地觀察過蘋果的一些細節，覺得可以發幾句言。

首先談談「是否優秀」這個問題。

蘋果主頁的導航條風格接近iOS5之前版本的導航條風格（還有解鎖滑塊，等等），具有高光光澤。我們可以認為這是蘋果擬物設計的一個體現。在蘋果的擬物風格「走向歧途」之前，他們的設計師一直傾向於用簡單的色塊表現質感（比如這個導航條，以及iOS的原生應用圖標，甚至包括產品效果圖），一個白色到透明的漸變就可以產生高光的效果。網頁導航條設計成這樣，簡單精緻（功能上合格），還符合蘋果的一貫風格（VI上合格），它可以稱得上是一個優秀的設計。

這個投影是否必要？

設想你要在一塊玻璃上加上文字，直接印上去是最傻的方法。我們都見過類似的例子，玻璃上印刷的油墨很容易掉。這一點看似偏離主題，但是對於蘋果而言，他們對細節的重視程度確實可以達到這點，他們會爭取讓用戶在iPhone上所見的一切都合乎現實中的情理（從慣性滾動、紙張翻頁到垃圾桶震動效果；iOS6的音量滑塊的高光甚至會通過方向感測器產生變化）。所以，他們想表現出把文字蝕刻在玻璃上的效果也就不難理解了。
前面很多朋友在討論光源等等問題，但是我認為這裡無可置疑就是下凹的蝕刻效果。理由之一，上面說過了，現實中玻璃上的字最合理的就是蝕刻。理由之二，就是全局光。玻璃條的高光告訴我們光源在上面，所以這裡的字就是下凹。
那麼下面的比較淡的一圈東西是什麼？這個是投影。因為導航條是玻璃的，這個投影的存在很自然。
如果你仔細看過iOS界面上的導航條，你會發現那上面文字的效果跟這裡一樣。iOS上的這些字跟這裡不同之處在於前者是代碼實現的。所以蘋果的設計師在設計這種凹陷效果時採用的手法很簡單：在白色文字下方加一層黑色文字，然後向上偏移1-2像素。這種像素級的設計完全可以滿足正常比例下看到的效果，這也體現了上面說到的「用簡單的手法表現質感」。在這個導航條里，文字、陰影及投影，三層文字就可以實現了。

正常比例下看不清楚？

至於這樣細緻的設計到底有沒有實際意義，我想還是有的。白色的文字加上陰影或投影（加在外邊，不對筆畫產生影響）後，可以產生增大反差、幫助閱讀的作用。這也是為什麼我們看到的電影字幕都有投影（或描邊）的原因。
蘋果沒想讓你放大了去仔細研究它。你能忽略它的存在，只是莫名覺得效果很舒服，這才是他們的目標。

放大鏡那裡是否是bug？

不是。贊同前邊朋友的回答，搜索框本來就是下凹的，裡面的圖標還下凹就不合理了。所以放大鏡要凸出來。仍然是下方加一層黑色的同樣圖形，向下偏移1-2像素。

幾句廢話

不是說蘋果要開始走扁平化設計路線嗎？這樣的細節是否會繼續？
我的感覺是這類小凹陷小投影的效果不會被蘋果放棄……沒了這些就是微軟了好嗎！再者，個人感覺這種效果看起來很舒服。

我是設計師我的看法是，光源在90度，Bar是玻璃質感，文字做的是陰刻，下投影做的是模擬玻璃透過的效果，顯得刻得有一定深度，搜索框也是陰刻，凹陷效果如文字，放大鏡是是浮雕。

這張圖片沒有使用嚴格意義中的「浮雕」、「陰刻」效果，只是用疊加的方式模擬的近似效果。有些地方是大家過度解讀的牽強附會。

這上面的文字圖片使用的是svg格式（ svg是xml格式描述的矢量圖形），可以和ai格式圖形一樣任意放大多倍而不模糊。並且對搜索引擎爬蟲支持良好。這個導航的效果在保證可以無損放大的優點下，用多層疊加的方式追求的近似效果！

用瀏覽器帶的放大功能把那張圖片放大到500%就能看到，截圖裡的字具體實現方式是三個不同顏色的字體在輕微偏移的情況下重疊。因為是矢量圖形，不能完全實現陰刻浮雕之類的效果，所以會看到有些地方光感和投影方向出現輕微的bug。但是這種小bug並不嚴重，人家要的是用戶體驗和可被忽略的視覺效果之間的平衡！所以題主所提到的正常狀態看不太清楚的細節很可能只是意外的效果而已。

還有蘋果的svg圖很有可能是後台程序輸出的，你們去和程序員門討論溝通光源陰影和光反射角度試試！

=====================以下是2013.6.9對一些題外話的追加=======================
鑒於有人表示這張圖片放大後很模糊，不是矢量圖形，我追加一些答案，就不在評論里單獨說了。
先來一張放大後的導航文字效果展示，以證明我說的無損放大是確有其事
圖片網址在截圖裡，有興趣的可以自己去研究下

再來看下控制台下對導航欄"iphone"菜單的樣式追蹤

可以看到這個導航欄是針對了多種瀏覽器做了hack的，接下來我們看看具體在http://images.apple.com/global/nav/styles/navigation.css和http://www.apple.com.cn/global/styles/base.css兩個樣式文件中對於#globalnav li#gn-iphone相關css的定義
可以看到Apple官網首頁html中css的載入順序是先載入navigation.css，後載入base.css
那我們先看navigation.css
navigation.css中第76行和77行比較關鍵

#globalheader #globalnav li a span { display:block; width:100%; height:30px; margin:3px auto; background:url(/global/nav/images/globalnav_text.png) no-repeat 50% 0; _background-image:url(/global/nav/images/globalnav_text.gif); } #globalheader.svg #globalnav li a span { background-image:url(/global/nav/images/globalnav_text.svg); }

可以看到這句的實現效果應該是給ID=globalheader的元素中ID= globalnav下面的LI標籤下的A標籤下的SPAN設置一個背景圖片（太拗口了）ps：其他如設置寬高定位之類的不在討論範圍忽略
背景圖片的設置規則是
1、給所有瀏覽器設置背景圖片為/global/nav/images/globalnav_text.png，並設置背景圖片不重複，圖片定位垂直居中左對齊。

background:url(/global/nav/images/globalnav_text.png) no-repeat 50% 0;

2、給IE6設置背景圖片為/global/nav/images/globalnav_text.gif（css語句前加_是IE6的專屬hack）

_background-image:url(/global/nav/images/globalnav_text.gif);

3、當ID=globalheader的元素同時css=svg時，設置背景圖片為/global/nav/images/globalnav_text.svg（此為css選擇器，一些老版本瀏覽器並不支持，作為一種hack方式使用）

#globalheader.svg #globalnav li a span { background-image:url(/global/nav/images/globalnav_text.svg);

navigation.css第84行只是寫了背景圖片文件的位置定位，這句了解工作原理後跳過

#globalheader #globalnav li#gn-iphone a span { background-position:50% -120px; }

下面看後載入並且樣式名稱設置成一樣的base.css，因為後載入的緣故base.css中的同名css樣式文件和比navigation.css中的優先順序高，簡單說就是會覆蓋前面提到的樣式值
base.css中比較關鍵的是479行

#globalheader #globalnav li a span { background-image:url(/global/nav/images/globalnav_text.png); _background-image:url(/global/nav/images/globalnav_text.gif); }

@media only screen and (max-device-width:768px) { #globalheader #globalnav li a span { background-image:url(/global/nav/images/globalnav_text.svg)); } #globalheader.ios3 #globalnav li a span { background-image:url(/global/nav/images/globalnav_text.png); } }

繼續是給#globalheader #globalnav li a span設置背景值
背景圖片設置規則
4、給所有瀏覽器設置背景圖片為/global/nav/images/globalnav_text.png

background-image:url(/global/nav/images/globalnav_text.png);

5、給IE6設置背景圖片為/global/nav/images/globalnav_text.gif（css語句前加_是IE6的專屬hack）

_background-image:url(/global/nav/images/globalnav_text.gif)

6、如果屏幕寬度小於768px，設置瀏覽器背景圖片為/global/nav/images/globalnav_text.svg（/* 該語句僅支持支持IE9、Chrome、Safari、Firefox、 Opera */）

@media only screen and (max-device-width:768px) { #globalheader #globalnav li a span { background-image:url(/global/nav/images/globalnav_text.svg)); } }

7、下面這一句看上去是專門針對使用ios3的設備的hack，當ID=globalheader的元素同時css= ios3時，設置背景圖片為/global/nav/images/globalnav_text.png（globalheader沒有設置css=ios3，想來可能是有其他如js之類的判斷支持方式）

#globalheader.ios3 #globalnav li a span { background-image:url(/global/nav/images/globalnav_text.png); }

注釋顯示2010.01.14 添加的508行css再次對背景圖片進行了多次重設

#globalheader #globalnav li a span { background-image:url(/global/nav/images/globalnav_text.png); _background-image:url(/global/nav/images/globalnav_text.gif); } #globalheader.svg #globalnav li a span { background-image:url(/global/nav/images/globalnav_text.svg); } #globalheader.decelerate #globalnav li a span, #globalheader.ios3 #globalnav li a span { background-image:url(/global/nav/images/globalnav_text.png); }

再次重設了上面的4、5和3還有7這四步，就不再展開了，還有就是1中background的css設置一直有效，只是優先順序沒有background-image高，所以顯示效果以background-image中設置的為準了。

總結：當你使用IE6時，背景圖片載入/global/nav/images/globalnav_text.gif，當你使用支持選擇器的瀏覽器的時候，背景圖片載入/global/nav/images/globalnav_text.svg，當你使用ios3設備和其他非IE6且不支持選擇器的瀏覽器的時候，背景圖片載入/global/nav/images/globalnav_text.png。

所以，那些提到放大了背景圖片依然模糊的同學么，你們的瀏覽器該換換了。

再說說顯示效果：
globalnav_text.gif的圖片的效果如下圖

單獨展示的顯示效果確實是不太好，當然實際展現的效果雖然沒有svg的清晰整潔但效果也還是可以的。

globalnav_text.png的圖片的效果如下圖

效果顯示好了不少

globalnav_text.svg的圖片的效果如下，自己點進去看吧，知乎編輯器不支持這種圖片格式
http://www.apple.com.cn/global/nav/images/globalnav_text.svg

三種實際展示效果對比圖（從上到下依次為globalnav_text.gif，globalnav_text.png，globalnav_text.svg）

看上去gif的實現效果稍微有點差別，png和svg效果差不多，顯得使用svg很沒有必要對吧？

但是你架不住人家apple是完美主義的，你們有沒有發現在顯示器解析度夠大的時候有些瀏覽器是會把網站自動放大展示的，自動放大個125%什麼的。我們來看看150%的顯示效果（從上到下依次為globalnav_text.gif，globalnav_text.png，globalnav_text.svg）

是不是svg的顯示效果好很多？考慮到蘋果設備Retina屏幕的解析度如此之高，為了能夠在高解析度下讓safari展示清晰的效果，svg就顯得非常重要了，這是重視用戶體驗的一種表現。
svg不只有無損放大這一個優點，還有因文本可讀帶來的對與爬蟲的友好性和讀屏設備的支持以及seo的
優勢。
這段啰嗦的解釋就是為了說明蘋果為了完美實現在不同設備瀏覽器的限制下，做到的展示效果最優化花費了多少心思。

上面已經說到了實現方式和用戶體驗對於最終選擇實現方式的影響，而實現方式的限制又反過來限制了設計中像素類效果的使用。

先來回答問題中的問題，蘋果官網的導航條設計是否足夠優秀。
我的答案是肯定的，是優秀的，至於為什麼優秀，之後會詳細說明。

再來回答問題說明中的一些觀點。
在我看來，這個問題的補充說明，只是題主你自己在通過自己的觀點和論據來證明你認為這個導航條存在的一些狀況，來說明你認為的它的設計不夠不優秀。

接下來是答題時間。

請本行業（設計行業）的從業者牢牢記住，也請非本行業的人群學習，評價任何一個東西的好與壞的標準，放在第一位的，永遠永遠不是好看與否，更不是你們在這糾結的邏輯技術。

一定有人說我這句話是放屁的，你們也絕對會舉出你們買衣服，好看與不好看就是你們購買與否的標準。但是，請搞清楚的是，在你們決定買或不買一件衣服，評價一句好看不好看的時候，其實你們心裡的潛台詞是，這件衣服的面料夠不夠高檔？是否能夠體現我的氣質。這件衣服的款式是否時尚，能否體現我的氣質。這件衣服的細節是否耐看？能否體現我的品味。這件衣服的色彩搭配是否過於誇張，顯得我太玩世不恭......

所以，在消費者用一句簡單的好看與不好看帶過時，我們需要搞清楚的是，隱藏在背後客戶真正的潛台詞是什麼。

接下來，我再來表達一個我個人的觀點，這個問題的提出，就像題主你露一個鼻子出來，然後問我，你是不是個帥哥或美女一樣的道理。

在設計中，有這樣一句話：整體功能大於局部功能之和

請記住，任何設計的本質是為了傳達，將A需要讓B知道的觀點，用設計的表現形式傳達給B。而不是為了做得好看。

因此，評斷這個導航欄優秀與否的第一條，一定是，是否正確的傳達出了蘋果公司希望傳達的意圖。

那麼，讓我們整體來看看這個導航條的設計。

作為導航欄的作用是什麼？

首先，一定是讓訪問者能夠輕鬆的找到自己希望找到的頁面，因此，這個導航條的標題之間的文字間距比較分明，不會出現閱讀混亂的狀況。

其次，為了突出導航條中文字信息的內容，因此做了一個反白的設計處理，深色的底配白色的字，會比深色的字白色的底更加醒目，因為色塊會加大可視面積。

再然後，為了統一整體效果，英文與中文均採用的是無襯線的字體。

最後，左邊的蘋果LOGO與右側的放大鏡同為圖形化處理，從視覺上給予整體平衡。至於右側的放大鏡問什麼要做這麼多的漸變投影等效果，是因為放大鏡的大小與左側蘋果logo的面積比列相差較大，因此可以通過較為複雜的視覺效果來產生整體上的視覺平衡，從而感覺右邊的放大鏡不至於過於單薄。

因此，綜合判斷，這是個優秀的導航欄。

最後說故事吐槽時間。

曾經教過幾年學生，我告訴他們，真正動手設計前，不要去想，如何將設計做的漂亮，一定一定首先需要考慮的是，你的客戶需要你來替他傳達什麼，千萬不要做本末倒置的事情。

最最後，再吐一個槽！我祈禱本題到目前為止的所有答題者這輩子都不要成為甲方，因為正是有了像你們這樣觀點的甲方，不辯黑白，不懂標準，才有了那麼多一味拉低自己智商與水準的乙方。

為便於查看，所有答案都在個人收藏夾內（ ENO［觀點與成長］ENO［美學與穿搭］），希望幫到需要的人。

我自己做這種導航條上的文字的經驗是疊加幾個文字的圖層，處理不同的透明度和顏色。例如：在文字後面疊加一層黑色的文字，會比投影顯得更精緻和方便。

這裡應該是模仿類似玻璃的半透明材質。

b 處和 d 處的陰影是因為入射角較小、部分光線被反射掉。

b 處和 d 處的陰影是因為入射角較小、部分光線被反射掉。
b 處是從空氣射入玻璃，所以反射得較少；d 處是從玻璃射入空氣，反射得較多，所以 b 處會比 d 處亮一些。
不過實際上 d 處陰影的位置也不對嘛。

白字邊沿的黃色是 gimp 的毛病……

而且這個陰影也不是簡單的 CSS text-shadow，而是拿 SVG 生成的。原文件：http://www.apple.com.cn/global/nav/images/globalnav_text.svg

左邊應該是搞錯了，不應該上下都投影。

單就上下投影而言單獨加任何一個都沒錯，這個問題里個人認為左邊向上投影做到雕刻效果，右邊因為搜索框已經凹陷了，搜索圖標作突起比較合理，投影向下。

截圖中左邊上下都有陰影有點不知所謂，雖然我可以理解大概有兩種可能，一是本來想向下再給做一個白色投影做高光線的，發現和白色文字相衝，文字虛掉了，前端一看這不科學啊，索性用了相反的色值（設計和實現可能不是一人，沒溝通好）這種可能性較大，因為陰影透明度和右邊的搜索框相近；另外一種可能就是純因為白色和灰bar的對比度不夠，加點外陰影提下對比度。
個人兩種情況都遇到過，最終的實現有時不能只從設計的角度出發，各種因素都有可能影響到呈現的效果

技術支持部分和搜索框所在的並不是一個平面上的

技術支持那部分背景是突出來的效果
技術支持的文字在突出背景之中的凹陷感謝知友@田亮和@lanphier 的提醒
搜索框是類似盆地的下陷效果
所以自然光影效果會有區別
如果你仔細看還會發現其實技術支持後面的陰影是由兩部分組成的
類似一個主燈＋一個副燈雙向照明的投影效果

說這多麼專業性和細節的東西，從設計的角度來看，不都是一個ps的漸變效果。水果的無外乎就是新建個層，填充白色，調下透明度。知乎的就是一個漸變，兩端加個較深的顏色。無外乎再加個陰影之類的。本來就是設計師按照感覺來做的，被上司認可了而已，非要被所謂的牛人的說的這麼牛逼。所謂的牛逼人物，你們這樣的行為和中學語文老師一段一詞點評課文有什麼區別？

針對@馮明鵬答案做一個糾正回答，搜索框是一個凹槽設計，元素自iPhone上的凹槽設計。同為圓角矩形。凹槽在頂光下上方黑色陰影，下方為高光。紙片放大鏡為凸起部分，下方陰影。

左邊明顯是底光，右邊是頂光，應該有問題

的確是個很爛的細節，大概是設計師花幾秒鐘隨便搞出來的────其實蘋果的中文官網一向都有「隨便搞一搞」的傳統，再說反正喬布斯已經不在了，也沒人在乎蘋果的每一個細節是否完美這種事了。

考究不代表好。
此處屬於中文官網對英文官網生搬硬套的問題，在較小字型大小的中文下（中文筆畫比英文要複雜）這種上下都使用投影效果會使文字辨識度下降。
看一下知乎上的「發布回答」按鈕，同樣都是做凹陷效果，但只用了一種投影，恰到好處。

視覺和技術需平衡整合出來合理的體驗。浮或者不浮並不一定要統一的。。。文字明顯是模擬了下。呵呵噠。。最統一的是feel。

我怎麼覺得就是兩個圖形上下堆，然後偏移幾個像素呢，如果是浮雕的效果為什麼只有陰影沒看見高光呢，除了那個搜索框。

會不會是：下面的文字投影在下面，上面的文字投影在上面。

發現樓上有很不負責任的回答，在乎細節是否完美不應該在這種地方有所體現，不要買櫝還珠好么親。
關於導航的光影，按照正常比例看文字確實是蝕刻的效果而不是浮雕，樓上眾神們放大到如此的倍數來論證，其實很簡單的是浮雕效果應該有陰影和次像素，來展現字體的縱斜面。並且，討論浮雕這種點陣圖效果有意思嗎，人家都是矢量圖。
另外，腳印的那張圖在這裡也不是左右逢源的，大家都好標榜「用蘋果，摳細節」，蘋果會那麼不講究地默認光源來自下方嗎？這可是頂部導航欄，難受不？看看導航欄主體的玻璃質感是不是上亮下暗的？

不懂裝懂的人太多了，某些人的票數還這麼高，我必須要怒答一下。
導航條必然是有BUG的，但也許是故意為之呢，我不得而知。
但我要說，很多答案的設計解析一塌糊塗！