Apple的網頁設計哲學(中)

Posted on October 17, 2007 by kayue

網站內頁設計-購物頁Store

本文為「優秀設計賞」系列第三篇，撰寫本系列的目的在於師人之長技為己用，多看多想方有進步。前兩篇分別為 Apple 網站歷年設計和 Apple的網頁設計哲學(上) 兩文。本文將主力探討 Apple 購物頁面 (Store) 的設計及流程，並加以分析。

Apple Store 給人的感覺真的很像一個實體商店， Store 頁面的設計就像一個櫥窗: 陳列著各項產品﹑價格等 (如上圖)，並不時有促銷廣告。 Apple 網站簡潔的設計跟 hp.com﹑ Dell.com 等站的設計真的人天壤之別。 Apple 的網站架構跟其他電腦製造亦有很大不同。如果你要到 Dell 網站尋找某機種的資訊，你需要先選擇電腦的類別。要分清 Notebook﹑ Desktop 沒有問題，但 Workstation? 我的 Desktop 算 Workstation 嗎? 而 Sony 則把它的 Notebook 再分為大畫面﹑輕薄等。當然 Apple Store 也有它的缺點: 如果使用者想購買其他產品 (如 keyboard)，就得先花一下工夫了。

網站內頁設計-Apple網頁設計
Shop iMac!

另一點值得一提的設計細節是 Apple store 網站上方的 Breadcrumb Navigation (見上圖放大了的部份)。這個設計讓我想起 Yahoo! 美國最近大量採用的 Tabbed Breadcrumb Navigation (見下圖)。 Breadcrumb Navigation 作用在於告訴用戶目前身處的位置，正如一塊路牌。很多大型網站都有 Breadcrumb Navigation ，不過做得像 Apple 這麼精緻而自然的實在少見。關於 Yahoo! 的 Tabbed Breadcrumb Navigation 可能會另文再述，可能吧 (Yahoo! 的設計好多都是一流，就怕自己沒這個動力去寫)。

Yahoo!網頁導航設計
Tabbed Breadcrumb Navigation

除了 Breadcrumb Navigation 外， Shop iMac 頁面還有另一個不得不提的設計。 Apple 在這個頁面少見地把所有資訊都放到同一個頁面之中: 上方的「系列選擇」; 中間的規格和售價資料; 下方的詳細簡介。因為資料太多，所以整個購物頁面其實是頗長的。在一般情況下網頁設計師應該盡量避免頁面過長，為甚蘋果的設計師仍要知錯犯錯呢? 其實這樣設計的目的在於讓用戶可以快速方便地比較不同系列不同型號之間的分別。魚與熊掌不可兼得，如果沒有大量資料，用戶就難以在一頁之間比較。再看看中間的 iMac Screen ，設計師為了讓用戶可以直觀地比較 20″ 和 24″ 的不同，提供了隨意切換 Screen 的大小的功能，實在是個很貼心的設計。訂單頁面也有相似的設計，請看訂單頁面 (下圖):

網站內頁設計-Apple網頁設計

當用戶選擇了升級成 2GB Memory Ram 時，網頁會很貼心的告訴你: 如果你降級成 1GB Ram 的話，我們會減 $150; 如果升級成 4GB Ram 的話，則需多付 $700。 Hard Drive 部份是預設的情況，分別告訴你升級至 500 GB 和 750 GB 分別需要加 $100 和 $250。這些設計其實很多在舊版就已經存在，不過實在太棒，不得不提。

先寫到這裡，不然太長，寫的人累，看的人也累。下一篇文章可能要等幾天，大家請耐心等候囉。希望大家喜歡。