4種網站首頁典型設計指南
分析設計網站首頁 4 種典型的效果與限制— Grid、Full-screen、One-row 和近年越來越多網站採用的 Images on Hover Effects。
Published in
5 min readJan 22, 2019
這篇文章是分析設計公司與個人作品集網站的多項專案如何呈現？資訊與圖片如何應用？以及其版型造成的效果與限制，整理出四種典型 — 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的適應性佳
限制
- 閱讀動線上較為單調
- 全部滿版的設計有時會過於飽和
