Apple的網頁設計哲學(下)

終於來到最後一篇「Apple的網頁設計哲學」，前三篇文章分別為 Apple 網站歷年設計 ﹑ Apple的網頁設計哲學(上) 及 Apple的網頁設計哲學(中) 三文。 Apple.com 網站的優秀設計寫十篇都寫不完，我在這幾篇只提及到一些比較特別的地方。有任何意見歡迎留言。

Apple.com 本次改版的其中一個特式是， 部份頁面上部出現了產品橫向滾動條 (如上圖)。 這是一個極具創意的設計， 不過在 可用性 / 易用性 方面就不敢恭維，因為:

• 因為這種設計是完全違反了用戶的使用習慣，人們只習慣上下滾動網頁;
• 要用戶向下 scroll 又要左右 scroll 是很糟糕的事情;
• 當滑鼠的滾輪對橫向滾動條毫無作用的時候，情況就更加壞了。
  在滑鼠滾輪面世以前， 只有不足 20% 的人會向下拉網頁; 滾輪面世以後， 幾乎所有人都會某程度上地向下滾動網頁。 可見工具很大程度地影響用戶的操作行為， 而 UI 對之的影響則相對較少。

雖然這種設計並不盡善盡美，但我認為 Apple 已經在其能力範圍內盡了最大的努力。大家應該去試試看，你會看到好多細節 Apple.com 都做得好好。特別是在加入超炫的特效﹑Ajax 之餘，Apple 並沒有因此而放棄對 Web Standard (網頁標準) 的堅持 (Amazon 新版頁面倒退到用 Table 排版…)。Apple 改版以前就很注重 Web Standard ，即將內容 (HTML)﹑ 樣式 (CSS)﹑ 行為 (JavaScript) 三層完全分離。 以上面的滾動條為例，在 No Style / 純文字 的情況下瀏覽 Apple 的頁面，你會發現這個滾動條不來只是一個 List (見右圖)。如果要我選一個最漂亮的 XHTML Site ，我一定會選 Apple.com。

Apple.com 的細節實在做得太好了，網站內每一個產品頁面都是獨立設計，各具特式。例如 iPod shuffle頁面的設計:

iPod shuffle

看見了我放大了的 “Choose a color.” 部份嗎? 當你選擇其中的一種顏色，頁面內的其他 iPod shuffle 的顏色都會隨之而變。包括右方夾在心口的那一個!

另一個值得一提的變更是， Apple.com 網站開始大量使用 Video ，從內頁到首頁都有。網站內隨處看見到 “Click to play” 或者 “Play now” 的字樣。我覺得這個可能是未來互聯網發展的一個趨勢 - 大量使用 Rich Media。不過我覺得蘋果有點走得太前， Video 用得太多了，我還是不太習慣。

大家應該有過這麼一個體驗: 某網站的主頁有個 Auto play 的 Flash ，那個 Flash 還是有聲有畫的，於是每次回到首頁那個煩人的 Flash 都會播一次。平易近人的蘋果當然沒這麼笨，它用了 Cookies 來判斷用戶是否首次光臨本頁，而 Video 只會播放給首次來臨的用戶看。Want to watch the ad again?

Watch the ad again.

Apple 的網頁設計哲學終於來到了尾聲。我最後想介紹的一個設計是:

Why You’ll Love an iMac

是網站底部，一個類似 Sitemap 的導航區。這種設計最近才漸漸流行起來，在底部採用這種導航區的網站還有 Skype。這種設計有點 Amazon 的 “Customers Who Bought This Item Also Bought…” 的意思。只不過 Apple.com 上的是由 Apple 員工人手提供，你可以叫它做 “People Who Read This Page Also Read…” 。

全文完，希望大家喜歡。因為這系列文章，我 Blog 的訂閱人數多了近 30% ，多謝大家支持喔。先讓我休息一下，下次寫寫其他優秀網站。細節做得如此之好的網站大概只此一家，但就排版來說，The New York Times 絕對不比 Apple.com 差。下次下次，下次吧。