進入網頁設計黃金時代

Web 設計已演進為融合美學體驗、豐富媒體功能的綜合領域。強大工具、豐富資源、龐大社群與瀏覽器標準化支援，推動 2010 年設計趨勢百花齊放。本文為第一部分，聚焦三大核心趨勢。

1. 愉悅的設計：建立品牌與使用者的情感連結

設計師的任務是有效傳遞想法、引導任務完成並贏得信任。視覺之美、驚奇感、愉悅體驗、難忘印象，能在品牌與使用者間建立堅固情感紐帶。

代表性案例賞析

• Brizk design studio：炫目動畫、精美字體、乾淨版面，滑鼠懸停小鳥顯示 Twitter 訊息。
• Bounty Bev：單頁式軟飲網站，簡單清晰又充滿個性。
• Analog.coop：依 IP 顯示地理位置與最近員工，趣味性十足。
• Forrst：漂亮設計、吸睛視覺、創意導航。
• Billy Tamplin：個人部落格，簡約優雅記錄生活點滴。
• MIX：開發設計社群部落格，動畫特效與視覺一致性並重。
• Blue Sky Resumes：Flash 動畫呼應公司名稱，漸進式載入體貼使用者。
• Mailchimp：小猴子視覺符號貫穿始終，ASCII 動畫顯示動態。

2. 快捷鍵導航：桌面級交互體驗移植 Web

JavaScript 賦予傳統網站桌面應用特質，鍵盤快捷鍵導航從 Flash 專利擴展至 CSS 架構網站。Google Reader 為典型代表，更多網站實作優異：

• They Make Apps：曾有鍵盤導航模式（方向鍵穿梭、Enter 展開、Esc 返回），後移除。
• Mad-ar.ch：Flash 架構實現高階導航（C 鍵留言、+/- 縮放）。
• 9GAG：J/K 翻頁、L 鍵投票。
• FFFFound!：H 鍵回頂、V 鍵切換視圖、J/K 翻頁。
• Feta：方向鍵穿梭項目，下鍵選擇、上鍵返回。
• NY Times: Times Skimmer：方向鍵翻閱新聞、Shift 縮放、T 回頂、R 重新整理、A+方向鍵選擇。
• Pictory：J/K 瀏覽照片故事。
• CrushLovely：單頁式，方向鍵切換區塊。
• Thinking for a Living：左右方向鍵導航。
• Picnic Extraterrestre：模仿文字電視風格，數字鍵全控導航。

3. Web 平面設計風：雜誌海報級排版美學

現代網頁追求平面設計的精緻與創意：醒目標題、多欄排版、縮進、圖文環繞、側註腳註等印刷排版技法大量移植網頁。

• Design Informer：兩欄結構清晰分隔文字與圖片。
• A Lesson on How to Be a Villain：出色設計與獨特佈局，CSS+Table 混合佈局實現平面化設計。