4種網站首頁典型設計指南

分析設計網站首頁 4 種典型的效果與限制— Grid、Full-screen、One-row 和近年越來越多網站採用的 Images on Hover Effects。

Vera Chang
Jan 22 · 5 min read

這篇文章是分析設計公司與個人作品集網站的多項專案如何呈現?資訊與圖片如何應用?以及其版型造成的效果與限制,整理出四種典型 — Grid、Full-screen、One-row 和近年越來越多網站採用的 Typography (Images on Hover Effects)。


網格系統起源於德國與瑞士,由 Josef Müller-Brockmann 的《Grid systems in graphic design》使網格的應用快速傳播開來。現代網頁由於行動裝置的普及,響應式網站的開發模式,使網格成為預設的標準。

效果

  • 版面整潔,資訊清楚
  • 有多種組合方式可以分出設計層級
  • RWD 的適應性佳

限制

  • 大部分網站採用此排版,容易看起來大同小異
1,2,3 - 藉由 Masonry grid 的方式定義設計層級。
4 - 藉由統一的框架使畫面在 banner 圖片複雜且差異大的情況下保持整潔。

滿版 Hero images 現在仍是許多網站首頁設計的首選,震撼力與沈浸式的體驗是這 4 種典型中最佳。近年除了全滿背景圖 (影片) + 文字組合,又多了各種排版方式。

效果

  • 全畫面具震撼力,容易吸引觀者進行下一個流程
  • 整個畫面都講述一個故事,可以容納較多細節
  • 使用者一次只有一個選項,對於點選路徑控制可以更為精準

限制

  • 如果觀者對首圖沒有興趣可能會直接關閉
  • Mobile 上適應不佳或需要另外調整
  • 無法使用「篩選」功能,不易區分類別
1,2 - 著重 Typography 和破格式排版,創造出文重圖輕的配比。
3,4 - 作為幻燈片展示所有專案。
5,6 - 在主頁敘述專案故事與細節,創造更多的訊息溝通。

Brutalism 風格再度興起 (起源於 1950 — 60 的建築風格,其特色是從不修邊幅的毛糙、沉重、粗野感中尋求形式上的出路。應用到網站上是反裝飾、回歸網頁初期「不設計」的樣子。),與極簡主義、功能和字體設計的結合,越來越多網頁應用這種 Images on Hover Effects 的設計。畫面第一眼看上去非常簡潔且與 e-commerce 網站設計給反差頗大,給人新奇感,通常是設計、藝術、時尚類網站會採用此種設計方式。

效果

  • 純文字排版非常節省版面空間,可快速瀏覽 Project title 或是 Client name
  • 字體展示非常具有「設計師感」
  • 可以結合 Full screen 沈浸式體驗和 Grid 容納較多資訊的優點

限制

  • Desktop 上瀏覽良好,但 mobile 適應不佳
  • 傳統看圖的使用者可能不會操作而直接離站
  • 要滑鼠移動才能看到相對應的圖,使用者在直覺判斷點選上需要更多時間
  • 不易區分類別
  • 依賴文字閱讀,對非語言文化圈使用者不友善
1,2 - 在“一摺”網頁內容納更多的專案列表。
3,4 - 可以完整的敘述一句話,在需要時經由滑鼠的移動顯示對應圖片。

Grid 的延伸應用,特點是閱讀動線單純,比網格設計容納更多文字內容。通常圖文左右各半,或是以 Landscape banner,背景圖襯底壓字的方式呈現。

效果

  • Grid的延伸應用,試圖結合Full screen的震撼力與網格優點
  • RWD的適應性佳

限制

  • 閱讀動線上較為單調
  • 全部滿版的設計有時會過於飽和

謝謝你看到這裡,如果覺得文章不錯歡迎分享。

Hello,我是Vera,目前在 IT 產業工作的 Visual Designer。如果有任何建議或合作提案也可以透過以下這些方式聯繫。BehanceDribbbleWebsite

VHS  — Design vitamin for creative mind.

Hearing & Seeing. Design vitamin for creative mind. 這本設計線上誌希望提供更多元的創作靈感,包含視覺設計、品牌與文字閱讀的綜合設計維他命。

Vera Chang

Written by

Visual/ UI Designer & Editor of VHS — Design vitamin for creative mind. 一本視覺設計與閱讀的線上誌|verachang.net

VHS  — Design vitamin for creative mind.

Hearing & Seeing. Design vitamin for creative mind. 這本設計線上誌希望提供更多元的創作靈感,包含視覺設計、品牌與文字閱讀的綜合設計維他命。

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade