Apple的網頁設計哲學(下)
October 19th, 2007 in Web Design.
終於來到最後一篇「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 差。下次下次，下次吧。
15 Responses
[...] Edison Watt LCD TV Blog US wrote an interesting post today onHere’s a quick excerpt [ 網站內頁設計-Apple網頁設計] 終於來到最後一篇「Apple的網頁設計哲學」，前三篇文章分別為 Apple 網站歷年設計 ﹑ Apple的網頁設計哲學(上) 及 Apple的網頁設計哲學( … 定會選 Apple.com。 Apple.com 的細節實在做得太好了，網站內每一個產品頁面都是獨立設計，各具特式。例如 iPod shuffle頁面的設計: iPod shuffle 網站內頁設計 iPod shuffle 看見了我放大了的 “Choose a color.” 部份嗎? 當你選擇其中的一種顏色，頁面內的其他 iPod shuffle 的顏色都會隨之而變。包括 [...]
橫向設計相信跟coverflow 的在OS10.5的廣泛有關。另如果是iTunes 用戶的話，早就已經習慣這種方式。
Pig:
你說得也對
不過 coverflow 用在 iTunes 有點華而不實的感覺，沒有比 list view 方便。
厲害的是這種網頁設計
在ie下看，還是很好看…
這是對美好設計包裝最大的挑戰
Apple is COOL! thx for the artical.
很詳盡的解說，謝謝了！
希望再見到更多關於網頁設計的好文！
採用橫向設計還有一個原因，因為apple自家的mighty mouse的滾球除了基本的上下之外，還可以靈活的左右並且可以設定成360度，所以在在都是凸顯自家的產品特性。
JASWIA:
原來還有這點，學到了。
除了看到讲解了下形式细节。
哲学呢？
真不錯。不過我這裏還有個更精彩的網站，希望能和大家一起分享其中的樂趣，一起去看看網頁設計
一起去看看網頁設計吧！或許能夠 幫助大家解決一些自己的問題哦。呵呵…
我是做網上產品銷售的，想找一個網站行銷服務，將我的網站進行SEO搜尋引擎最佳化，將網站設計，網頁設計做的更加具有市場競爭力，促使搜索引擎及更多的客戶能夠查看到我的網站。哪位朋友介紹個好點的網頁設計公司吧！謝謝啊！
我們是在做雞排加盟的加盟總部,如果你有需要可以找我唷.
未上市, 未上市股價行情, 公司基本資料
http://blog.udn.com/0986/3468834
有豐富的理論基礎，我在未上市股票市場大賺一筆，無往不利~~