一塊設計 | apo design - 設計共筆部落格
  • 關於我們
    • 團隊花絮
  • UI/UX
    • UI / UX 設計
    • 工具分享
  • 美感養成
  • 設計職涯
  • 設計生活提案
    • 展覽 / 活動分享
    • 設計選書
訂閱我們
一塊設計 | apo design - 設計共筆部落格
  • 關於我們
    • 團隊花絮
  • UI/UX
    • UI / UX 設計
    • 工具分享
  • 美感養成
  • 設計職涯
  • 設計生活提案
    • 展覽 / 活動分享
    • 設計選書
訂閱我們
沒有結果
檢視所有結果
一塊設計 | apo design - 設計共筆部落格
沒有結果
檢視所有結果
Home UI / UX 設計

筆記|網格到底怎麼用?(一)

in UI / UX 設計
by sanmu
9 月 30,2020
2 min read

網格系統於二十世紀初葉開始萌芽,在二十世紀的五十年代得到完善,並於瑞士平面設計雜誌宣傳得到普遍認可,成為戰後影響力最廣的一種平面設計風格,因此又被稱為「國際主義平面設計風格」。它的特點是「理性、秩序、高功能、易閱讀」,除了能使設計更加規範整潔有效率,也能使資訊更便捷更有效率的被讀取。由於它的高影響力與高實用性,現行流行的多數平面設計軟體,都具備了「網格」功能,延續到現今的網路時代,網格也成了網頁中重要的佈局系統。

那麼,平面網格與網站網格究竟有什麼區別呢?這要先從平面設計的網格系統開始講起。

平面設計的網格系統,最初是為了解決文字與圖片混排時的美觀與效率問題。透過精準的計算與比例安排,將頁面劃分為數個規格統一的格子,藉此規範內容的編排模式,提升雜誌與書籍大量圖文混編時的工作效率。這樣說起來有些籠統,但簡單來說其實就是在一張紙上畫上格子,依照美觀的比例將圖和文字放入格子內並適度留白,營造出舒適整潔的畫面感,透過這樣的方式提高效率和排版的整體性。

但是,東西一定要整潔的放在格子內嗎?這個問題在初次接觸網格系統的我心中是一個巨大的謎團,後來我覺得,或許可以用拍照時的九宮格構圖概念來解釋它。現行手機的拍照功能幾乎都內建了九宮格線,拍照教學告訴我們,主角要放在正中間,或者對齊旁邊兩條線,這是為了畫面的平衡,為了將拍攝的重點放在舒適的視覺範圍,網格系統同樣也可以達到這個作用,下面用實例說明我的用法:

1: 決定主角的位置=決定視覺畫面的重心焦點

就像拍照時要將人物置中或對其左右線,你也可以在格線中選擇一個點或線放置你的視覺主角,他會是整個畫面的重心,其他元素將根據它選擇可以平衡畫面的位置。

2: 配角們是穩定畫面的重要功臣

只有一個物件的畫面是不完整的,想要傳達完整的資訊除了視覺主角必然還會有其他的資訊文字,安排符合邏輯的視覺動向與閱讀順序是一個好作品的基本,而網格的存在能幫助你快速檢視畫面的平衡,找到資訊放置位置的最優解。

3: 細節決定成敗,對齊是不變的課題

網格設計系統的其中一個特點便是「整潔」,要達到這點,提升整體畫面的視覺舒適度,對齊是必不可少的細節。這並不是指必須將所有物件像拼積木一樣嚴格排整,而是指物件之間產生無形的線能讓畫面產生一種和諧的穩定感。例圖小日子的內頁中並非所有物件都對邊靠齊,但物件之間還是都有著一定的對齊關係,間距也維持了相似的比例,畫面因而有著簡潔清新的規則感。

來源:《深夜裡的小酒館》— 小日子No.79

除了書本雜誌的平面設計,網格系統在提升插畫、海報等具有較高自由度的設計作品的製作效率上也有不錯的效果,特別是在畫物件較複雜的情境插畫時,網格能在初期構圖時就確立畫面的重心,檢視構圖是否平衡。本篇網格的應用心得啟發於 Hahow 的「動畫互動網頁程式入門課程」吳哲宇老師 10-1 節課中講解的版面規劃概念。推薦不會寫程式的各位設計師們看看這門課!就算不想寫程式,看完也能比較理解 RWD 和網頁程式構成的觀念,貼近你和工程師夥伴的電波頻道喔。

篇幅問題,網頁與網格系統的關係會留到下一篇筆記的內容,如果有說得不對的地方,也歡迎指正與討論!謝謝你看到這裡,如果對我們的文章有興趣,也歡迎訂閱與分享 :)!


閱讀下篇: 筆記|網格到底怎麼用?(二)
Tags: UI網頁設計
ShareShareShare
sanmu

sanmu

上一篇文章

To 設計師:入門網頁字型指南 -2

下一篇文章

商業模式如何影響 UI 設計

相關文章

接案設計師的常見盲點

接案設計師的常見盲點

by Shuan Wen
7 月 06,2022

踏入全職接案滿三年了,加上前面兩年待在接案公司的經驗,五年來也經手近百個專案了吧! 儘管接觸了各樣的專案,每次執行時還是避免不了一些錯誤,加上幾次和待在產品公司...

來做作品集吧!|網站作品集製作心得

來做作品集吧!|網站作品集製作心得

by sanmu
6 月 22,2022

前陣子為了換工作做了新的網站作品集,算了一下目前為止差不多做四五次了,剛好最近朋友也因為公司招人在幫忙審作品集,有討論到一些想法,覺得可以來寫篇分享文章!內容基...

【 F2E – PK 心得 】公車動態網站設計 – 訪談到 UI 設計

【 F2E – PK 心得 】公車動態網站設計 – 訪談到 UI 設計

by Debby
12 月 28,2021

這篇文章主要是分享之前公司收到六角學院的邀約,參與 F2E PK 賽 的參賽心得紀錄。PK 所製作的內容是『全台公車動態時刻查詢應用服務』活動的目標不是一個月內...

Back to List

一塊特別企劃

一塊特別企劃|設計師問與答
連結至一塊設計 facebook 專頁

標籤

Adobe Xd (3) B2B (1) COVID19 (1) designer (2) design tool (3) Figma (4) functional map (1) HTML (2) illustrator (1) UI (26) UX (18) web design (1) Wordpress (2) 字體 (7) 無障礙網站 (5) 產品設計 (2) 筆記 (4) 經驗分享 (26) 網頁設計 (20) 設計師問答 (1) 設計選書 (2) 課程心得 (1) 講座 (2) 購物流程 (1) 週年企劃 (5) 遠端工作 (2) 電子報 (1) 靈感 (4)
一塊設計 a piece of design

聯絡我們

任何合作或問題請洽:
info@apodesign.tw

  • 服務條款
  • 隱私權政策

Follow us

Copyright © 2020 apodesign.tw All Rights Reserved.

沒有結果
檢視所有結果
  • 關於我們
    • 團隊花絮
  • UI/UX
    • UI / UX 設計
    • 工具分享
  • 美感養成
  • 設計職涯
  • 設計生活提案
    • 展覽 / 活動分享
    • 設計選書