Apple的網頁設計哲學(下)

October 19th, 2007 in Web Design.

網站內頁設計-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 網站內頁設計
iPod shuffle

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

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

Video-網頁設計

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

Video-網站設計制作
Watch the ad again.

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

網站Sitemap設計
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 差。下次下次,下次吧。

8 Responses

Apple Ipod, Ipod Nano and Ipod Video News » Apple的網頁設計哲學(下)

[...] 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 的顏色都會隨之而變。包括 [...]

# Pingback at October 19, 2007
pig

橫向設計相信跟coverflow 的在OS10.5的廣泛有關。另如果是iTunes 用戶的話,早就已經習慣這種方式。

# Comment at October 19, 2007
家儒

Pig:
你說得也對
不過 coverflow 用在 iTunes 有點華而不實的感覺,沒有比 list view 方便。

# Comment at October 19, 2007
LeS

厲害的是這種網頁設計
在ie下看,還是很好看…

這是對美好設計包裝最大的挑戰

# Comment at October 20, 2007
Danny

Apple is COOL! thx for the artical.

# Comment at October 22, 2007
TK

很詳盡的解說,謝謝了!

希望再見到更多關於網頁設計的好文!

# Comment at October 23, 2007
JASWIA

採用橫向設計還有一個原因,因為apple自家的mighty mouse的滾球除了基本的上下之外,還可以靈活的左右並且可以設定成360度,所以在在都是凸顯自家的產品特性。

# Comment at December 23, 2007
家儒

JASWIA:

原來還有這點,學到了。

# Comment at December 27, 2007

Leave a Reply


.
is proudly powered by WordPress
Entries (RSS) and Comments (RSS).