Apple 蘋果公司在月初的 WWDC 開發者大會上，更新了他們的網頁。傳統上，頂端導覽標籤沿用了與 Amazon 書店的相同設計已經好幾年了，如今劃時代（蘋果自稱他們「以 iPhone 手機重新發明了電話」）的 iPhone 即將在月底於美國推出，網頁上導覽標籤也跟著設計為 iPhone 系統界面使用的「按鈕式」設計，方便手指於小型觸控螢幕上的操作，你可以在 iPhone 上看到各類這樣的元素，正運用在 Apple 的網頁上。

我說 iPhone 是劃時代的產品，基於和微軟推出多年的 Windows Mobile 作業系統相較，你可以發現 Apple 的產品是相當注重在如何與人互動使用的這個層面上，各種考量讓人覺得貼心和用心，而微軟的產品則注重功能，像是工程師埋首鍵盤前做出來的，很多使用流程用起來會產生衝突，已經研發了好幾年的「智慧型」手機，其實只是稍微修改PC上的功能，我看不出有什麼先進的技術可言，不如蘋果來得一鳴驚人！

不過這篇內容不談論手機，而是針對蘋果最近的「網頁設計」來看，以及他們如何「呈現」對 iPhone 的介紹？

我一直將蘋果的網頁作為開發整個網站的指標，在幾年前，從 HTML <table> 的分割設計轉為 CSS 樣式與文件分離的路程來，一開始蘋果的網頁還是採用較保守的<table>來切版面，如今看來，他也完全走入 DIV+CSS 來配置整個網頁，而且從善如流的依循整個網頁設計社群的各種「較先進」的建議方式，對於我在先期規劃作業中很有參考價值，也因此我花了幾天的時間慢慢整理成這篇內容。

URL 的建構

看一個網站用不用心經營，我最先從「網址」這個地方觀察起。這可能是比較少人注意到的地方，若是對於 URL 很有概念的話，是不太可能陷入「網路釣魚」的詐騙陷阱裡。比較著重這部份的企業，都利用「靜態網址」來架構出整個網站內容，相較於「動態網址」，是一連串看不太懂有時沒什麼意義的亂碼，靜態網址命名比較講究，而且也跟文件主題相關，我們也有可能記得下來這個網址，因為它顯得有意義多了。例如蘋果自行發佈的新聞，就在 http://www.apple.com/hotnews/ ，而 http://www.apple.com/pr/library/2007/06/11leopard.html 則是發佈的某篇新聞稿。蘋果相當注重網頁的這個部份，很用心維護，各個網頁幾乎都有「組織結構」的靜態網址，由這個 http://www.apple.com/downloads/macosx/internet_utilities/cssedit.html 網址看起來，你大概知道裡頭會是什麼內容吧！？

URL 設計得好，除了對搜尋排名很有幫助外，使用者也能很容易進入到它上層的路徑查看其他相關訊息。例如我將上述網址刪除幾個字，可以找到更多關於這個項目下的網路工具： http://www.apple.com/downloads/macosx/internet_utilities/ 。你逐層往上刪除，可以發現每一層都是有內容和意義的。

這 URL 結構也有點類似「麵包屑 breadcrumb」，雖然有點不一樣，但都是屬於可讓使用者更清楚運用網站架構的方式。以往你可以在 http://www.apple.com/hardware/ 下看到所有的硬體產品，點選 iMac 這個項目則進入到 http://www.apple.com/imac/ 這層目錄中，但在最底下的麵包屑導覽則是「首頁 > 硬體 > iMac」這樣的架構，你可以想得到這兩種導懶的方式不太相同，網址可能是由使用者打字輸入的，所以能縮短使用時間或者符合其目錄分類的目的；而麵包屑則是提供更進一步的分類。

這回蘋果的網頁重設計，我注意在幾個地方，他的導覽方式怎麼規劃？他的版面有什麼改變？還有採用的網頁技術等等。

導覽標籤的重新規劃

原先，蘋果網頁上方的主標籤總共有蘋果首頁、商店、iPod + iTunes、dot Mac服務、QuickTime、技術支援，以及 Mac OS X 這七個標籤，其他在主標籤底下各有數個次標籤。主、從分明，這樣的分類階層也滿好使用的。這次變更，放棄了標籤，而採用按鈕形式，變成了蘋果首頁、商店、Mac、iPod + iTunes、iPhone、下載、技術支援和搜尋等共八個項目，主從關係也有所改變，以往軟體和硬體劃分在蘋果首頁的 Logo 底下，現在放到 Mac 這個類別下。而次標籤取消了，倒是像 Skype 和 Flickr 兩家的網頁類似，將主標籤下的次標籤項目全部列在底下，和麵包屑放在一起，而當中的內容，會隨著不同的網頁和產品，而有不同的「導覽」內容。蘋果麵包屑向來都是不同於其他網站放在網頁上方，而是和搜尋欄位一起放在網頁最下方的中央，這回的變動，也包括了調整搜尋欄位移到主導覽的右上方，開始跟 Safari 網頁瀏覽器的 Google 搜尋界面一樣，符合 Apple 儘量調整成一貫的風格讓你「熟悉一致」。

最主要的導覽標籤，使用了一張 png 帶有透明圖層格式的圖片，雖然有一些技巧可以讓 ie6 以前的版本套用出透明效果，但是用在 background-image 上會出現問題，而蘋果另外準備了沒有落陰影的 gif 圖檔來代替，他們使用這樣的 CSS 語法：
#globalheader #globalsearch {
background-image: url(http://images.apple.com/global/nav/images/globalnavbg.png);
_background-image: url(http://images.apple.com/global/nav/images/globalnavbg.gif);
background-repeat: no-repeat; }
讓 ie 去讀取後段錯誤的 css 內容來取代前段正確的部份。

從不曉得多久前，蘋果也提供了圓角化的搜尋輸入欄位，這在 safari 上有預設的html 語法，但是在 ie 和 firefox 上則僅顯示傳統的文字角框，有人提供了解決方案，缺點是需要加入一些無意義的 span, div 區塊近來，這在逐漸抬頭的 html 文件寫法上來說，是不希望看到為了「排版」而在文件內充斥不該出現的內容。蘋果在採用的方法是寫一個 javascript 外掛，讓他自動將這些無意義的區塊加上去，而不影響原本的文件，不僅是搜尋區塊，還包括像是新聞跑馬燈的版型也寫進 javascript 來呈現。

版面空間

要在有限的空間中，儘量塞滿讀者有興趣的東西，吸引他們，同時又不能搞得太複雜，太雜亂，是一門藝術。不管是部落格，或是新聞網站，讀者關注的主要內容周圍，夾雜著各式各樣的分類、連結、和廣告。我們一時間很難分辨他們的性質和內容。這樣的閱讀經驗是令人挫折的。

Web 2.0 有一個特色是別人鮮少提到的，儘量利用 Ajax 技術，達成在僅有的螢幕空間底下，發揮最大的操作運用。以前作一個動作就要重新 loading 整個網頁，現在只需要讀取部份的內容即可。蘋果用擅長的方式處理，文字不要太多，圖片多一點。版型不要太複雜，三欄是最多的切割。此外，這回的 Apple 大量運用 javascript 的畫面滑動效果，狹小的位置上，讓你可以捲動，Sidebar 將資訊摺合在一起，當滑鼠一過去時才展開，大大的增加畫面配置的美觀與彈性。

這樣的效果，有部份是繼承自 iTunes 的開發過程中，而且也將應用在下一版本的 OS X 桌面瀏覽上。

蘋果在 WWDC 的演講之後即刻將網頁轉換成新版面，過程只有短短的幾秒之間。當時我正在瀏覽蘋果的網頁，頁面沒有下載完全而無法完整的呈現版型，但是再 reload 之後看到的就是新的網頁。雖然大部分的內容並沒有重新改寫，只是將每一個網頁最上面的頁首導覽 bar 和最下面的頁尾作個修改，但也充分印證了只要將 CSS 和文件內容作分離，不要像傳統那樣 html 文件內混雜的大量的視覺元素，就可以讓展現更大的擴充彈性。

iPhone 的教學影片

一月份時的 MWSF 上蘋果便揭櫫 iPhone 的各項功能，網頁中也佔有一席重要位置。如今蘋果三大產品線：Mac 軟硬體、iPod 以及 iPhone，現在也是導覽標籤上的主要按鈕，讓 iPhone 肩負著開創新局的任務，蘋果也想辦法讓大家能夠更認識這項新科技玩物。

透過網頁的介紹，解說著「手機」、「音樂、照片及影片」、「網路應用」以及多重控制的螢幕如何操作。唯有動態影片最能夠一目了然，所以蘋果在發售之前，緊鑼密鼓的推出長短不一的影片讓大家瞭解它。

一開始的短片介紹，一個平放的 iPhone 螢幕上，有著一個小百點，取代手指的移動，不斷的揮舞點動界面，當小白點點一下畫面，如同水面漣漪的效果暗示著「觸碰」這個動作。這是半年前蘋果這樣處理畫面，很容易就能理解。類似的漣漪很像在 OS X Tiger 放入一個新的 Widget。

半年後，蘋果小幅修改這些介紹短片，iPhone 螢幕略微傾斜，手指還是以小白點來隱喻，三度空間的畫面，藉由白點的陰影和水波漣漪，更直接體會它的運作模式，蘋果總是在「如何讓你看得更明白」極為用心，也將「傳達」這件事情作的很好，真是讓我佩服。

今天是 iPhone 在美國上市的日子，這一兩周內，蘋果發佈了許多影片，其中包括介紹所有的功能操作的教學影片，以及如何啟用這支手機的程序，我想購買者只要花二十分鐘看了影片，就不用去翻操作手冊了。我也相信從近乎直覺的出發點來設計整個環節，是相當值得學習的態度。

花邊新聞：排在紐約 Apple Store 眾多嚐鮮者最前方的，是一個叫做的 Greg F. Packer 老兄，他在 Wikipedia 上早有條目。