網站設計的趨勢,網格式設計

網格式設計Cover

網格式設計是什麼?

其實對於常常在網路上瀏覽各類型網站的使用者來說,不難發現近幾年有越來越多精美的網站出現,而且這些網站雖然看起來華麗,但是在使用上又不會覺得毫無邏輯,感覺每一個區塊都是有精心編排過的。
說不定看完上面的敘述,你現在腦袋中浮現的網站畫面,就是採用 網格式設計
到底 網格式設計 是什麼呢?為了讓不懂 網頁設計 的人也能了解,我們就舉一個簡單的小例子:
假如今天要做一頁PPT,打開軟體後,看著空白一片的簡報根本不知道從何下手,或是你有確定的主題,但是不確定該如何編排。
這時可以在PPT上方中點選「檢視」、勾選「格線」,畫面就會出現許多小區塊,不僅可以幫助排版、對齊之外,也能更清楚設計元素該放在哪個區域更適合。
ppt插入網格的比較圖
雖然 格線 的概念跟 網格式設計 仍有一些落差,但是卻恰好反應 網格式設計 的重點,也就是「區塊」的概念。

網格式設計的優點

傳統的網頁設計大多依照 網頁設計師 的「感覺」,但是「感覺」這件事情又非常的主觀,導致使用者在閱讀某些網站時會覺得異常辛苦。
但是 網格式設計 因為將網頁切成多個區塊,所以在 排版設計 上會更注重邏輯、使用者體驗,「到底這個區塊放圖片或是文字合不合理?」「訂購按鈕做在這個位置適不適合?」都較容易成為 網頁設計師 在進行 網頁設計 時優先思考的點。(延伸閱讀:如何評估網頁設計費
簡單來說, 網格式設計 的網頁相較傳統方式設計網頁,更加具備以下優點:

  • 增加設計師在網頁設計、編排上的 系統性
  • 讓排版設計上更具有 邏輯性
  • 增加使用者閱讀、操作時的 便利性

網格式設計的應用

Instagram logo
最經典的 網格式設計 就是大家常看的 Instagram ,相信已經有不少人注意到某些人的 Instagram 首頁其實會特別排版過,例如用圖片、照片穿插的方式讓首頁變得更美觀、易讀,可以參考 阿滴英文 前期的版面風格,就是屬於這種形式。
像Instagram首頁在這種有限的區塊底下,進而根據個人的喜好與設計風格而做編排,就是 網格式設計 的應用方式之一 。
除此之外,還有另外一種近幾年很流行主打「自製網站」的平台,也算是 網格式設計 的範疇。
在平台給與的 網格 框架中,使用者可以自行調整圖片、文字、顏色、大小、距離、按鈕…等元素,編排出自己喜歡的網站模型,像是 The Grid 就是一款應用 網格式設計 的 WordPress 外掛 ,讓沒有 網頁設計 基礎的使用者也能自由排版部落格、商城、頁面的版型。
the grid 範例圖
在上方 The Grid 官網提供的範例圖中,這種型態的 網格式設計 就能夠套用在 作品集 或是 購物商城首頁 ,使用者可以自己編排圖片內容,並且加入文字、超連結…等元素,甚至加入動態的圖片效果也完全沒問題,即便是在同樣的網格版型底下,每個人都能針對自身網站的需求,做出獨一無二的網站。

重點總結

從上述提到的案例以及應用 ,不難發現其實生活中越來越多跟版面有相關的內容,幾乎都離不開 網格式設計
也確實使用這種設計方式,不僅有助於 網頁設計師 更具系統性地設計出精美的網頁作品,也有助於使用者觀看、瀏覽,對於 使用者體驗 上有明顯的幫助。這也是為什麼近幾年 網格式設計 會成為設計網站上的新趨勢。
如果想要了解更多 網格式設計 的相關內容,或是希望自身品牌形象官網也能採用這種設計方式的話,歡迎聯繫我們,我們會提供您最專業且全面的 網站設計 服務!

相關文章