iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 20
1
自我挑戰組

UI 設計入門:SEO 尬網路行銷系列 第 20

【Day 20】原子設計:模板 ( RWD 響應式排版 )

Atomic Design 五大階段:原子 ( Atom ) -> 分子 ( Molecules ) -> 組織 ( Organisms ) -> 模板 ( Templates ) -> 頁面 ( Pages )

本篇重點

  • 響應式排版 ( RWD )
  • 中斷點 ( Breakpoint )
  • 響應式網頁的網格
  • 響應式網格系統的設定

響應式排版 ( RWD )

響應式網頁設計 ( Responsive Web Design ) 可以讓網站根據不同裝置的螢幕解析度,去做適合的介面呈現,減少使用者進行縮放、平移和捲動等操作,達到更好的使用者體驗。

中斷點 ( Breakpoint )

中斷點是改變排版的解析度寬度,可以透過 Statecounter 找出常用的尺寸當作中斷點,建議選擇手機、平板、桌機三種尺寸做設計。

中斷點的選擇

  • 常用裝置尺寸
  • 常用框架規範 ( Bootstrap )

Statecounter 常用裝置尺寸:

2019 年台灣前三常用的裝置尺寸

  • 1920 X 1080
  • 414 X 896
  • 1536 X 864

響應式網頁的網格

  • 固定網格 ( Fixed Grid )
  • 流動網格 ( Fluid Grid )

固定網格 ( Fixed Grid )

固定網格要到中斷點時才會變更排版,中斷點之間的尺寸會維持該級距的網格,圖片文字不會在尺寸縮放時跟著變化,只會縮短欄外間距。

流動網格 ( Fluid Grid )

流動網格在裝置尺寸縮放時,網頁文字、圖片等元素會跟著動態縮放,直到經過中斷點時才會更動網格系統,因此介面上的元件寬度通常都是比例,而不是固定數值。

響應式網格系統的設定

根據專案開發,選擇最適合的方式

  • 固定欄寬與欄間距,只調整欄數與欄外間距
  • 固定欄數與欄間距,只調整欄外間距 ( 最常見像 Bootstrap )
  • 根據尺寸調整欄數,以及相對應的欄間距 ( 像 Material Design 分很細 )

好! 下一篇我們繼續討論模板的相關事項 : )


上一篇
【Day 19】原子設計:模板 ( Landing Page 著陸頁 )
下一篇
【Day 21】原子設計:模板 ( UI State 頁面狀態 )
系列文
UI 設計入門:SEO 尬網路行銷30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言