章節定位#

把「結構」放進一本以「靈感」為主軸的書，乍看有點突兀。但靈感的本質正是注入新想法、改變慣性思維。

我們很容易陷入既定模式而不自覺：捲動方向、分頁、下拉選單、頁面數量。透過檢視多樣的結構選項，能提醒自己：在表面的限制底下，選擇仍是無限的。

各結構的核心觀察#

水平捲動（Horizontal Scrolling）#

乍看像是為了標新立異而做的設計，但好的範例證明：水平捲動可以是非常自然的介面。

• 對攝影類內容特別合適（如 Graphic Therapy 的橫向相片牆）
• 完全打破傳統格式（如 Humor by Jason Love 從中間開始展開）
• 直立的相片橫排能形成一條堅實的視覺帶（如 Ricky Cox）

縮放（Zoom In）#

透過縮放在不同層級之間移動內容，而非依賴瀏覽器的捲軸。

• 體驗更接近「探索」與「尋寶」
• 從縮小視角中能直接看見資訊層級（如 Jlern Design）
• 對使用者來說反而更直覺，提升整體使用性

非典型導覽（Atypical Navigation）#

創意導覽是一場「創意 vs. 實用」的微妙平衡。

過度創意會變成不可用、令人沮喪；但融入體驗的巧思，反而會讓網站更直覺。

評估時應考量：

• 網站主題：當主題本身就是「體驗導向」時最適合
• 目標族群：年輕族群容易上手，年長族群可能受困於視力與協調挑戰
• 網站目的：企業資訊網站幾乎沒有偏離標準的空間

分頁（Tabs）#

分頁是基本工具，已被各種變化玩過：

• 垂直擺放：節省空間且仍能輕易找到（如 Prague Design）
• 傳統圓角：用顏色凸顯關鍵行動分頁（如 Newsberry）
• 直接呼應主題：以掛吊資料夾為主視覺（如 Esopus Magazine）
• 完全融入風格：分頁不再像「貼上去」的元件，而是設計的一部分（如 SaraJoy Pond）

三格佈局（Three Buckets）#

「三」這個數字有種神奇的吸引力：三步驟、三大賣點、三大產品、三個選項。

• 是首頁中最常見的視覺單位
• 完美的注意力承載量——資訊量比 10 個選項小得多
• 經常作為行動呼籲（call-to-action）的位置（如 MochiAds、Business-Paper）

模組（Modules）#

把內容塞進方塊容器，是建立秩序的常見方法。人類偏好秩序，模組讓內容易於消化：

• 處理大量內容時特別有用（如 EntertainmentAfrica 的入口頁）
• 用清楚的模組標籤幫助掃描（如 Havoc Studios）
• 可以單純無圖，也可以加入複雜視覺與展開效果

微型（Tiny)#

當網站不需要太多內容，就把它做成一個「微容器」。

• 充分利用「內容少」的特性，把問題轉化為解法（如 Pocket Web Site 用火柴盒造型）
• 即便內容少也能極具風格（如 SushiBeads）
• 這種風格逼迫創作者只放真正重要的內容

單頁（One Page）#

把所有內容塞進一頁。

• 對作品集而言特別合適——一條長長的影像流比點開十頁更有衝擊
• 讓潛在僱主難以忽略你的代表作
• 對小型網站而言能避免「為了像個網站」而硬塞分頁

客戶常以為網站「必須有很多頁才正經」。當內容不足以撐起多頁時，單頁反而是更誠實、更有效的選擇。

巨型頁尾（Massive Footers）#

頁尾常被淪為「丟版權聲明的地方」，但其實是被嚴重浪費的版面。

• 使用者讀完內容後的第一個動作就是尋找下一步
• 巨型頁尾可以是「下一步」的指引（如 Doug Dosberg 的滿滿資訊頁尾）
• 提醒設計師：網站是一系列頁面，不是各自獨立的單頁體驗

非典型佈局（Atypical Layout）#

打破常規的佈局能跳出視覺雜訊：

• 微小的位置調整就能讓網站煥然一新（如 moodboard 把搜尋框移到左上）
• 完全打破網格也能成立（如 VTKS Design 用第一張圖當鉤子）
• 重點是即便佈局非典型，導覽仍要直覺易用

混合（Hybrid）#

混合 Flash 與 HTML 是建構技術，但深刻影響設計呈現：

• 取得兩種媒介的優點：Flash 的動感與 HTML 的實用性
• 內容主體放在 HTML，避免搜尋引擎索引問題
• Flash 用於增添視覺與動態元素，活化頁面（如 Digitalmash 緊密整合，Ben Saunders 區塊式運用）

純 Flash 網站的時代已過。Flash 在當代主要被用於與 HTML 配合的混合站點，正是因為這樣才能避開單一技術的局限。

跨結構的共通課題#

• 結構選擇直接影響使用者體驗，並非單純技術選擇
• 跳出常規前先確認該結構真正服務於內容
• 即使選擇傳統結構，仍能在細節中注入新意