iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 21
0
Modern Web

不只是寫寫CSS,切版概念30天系列 第 21

DAY21 - 切版結構分析 - 建立一個可Reuse的表單 Form - (1)

  • 分享至 

  • xImage
  •  

表單是一個很常遇到的版型,
表單的設計可以很簡單,也可以很複雜~
那對切版而言,表單可以怎麼切才可以更有彈性呢?

今天我們先來分析一下表單的結構

表單結構的分析,可以從以下三個方向來看:

https://ithelp.ithome.com.tw/upload/images/20201006/20130079xrcty29dte.png

1. 表單整體定義

1-1. 表單總寬度
一個專案通常不會有太多種
https://ithelp.ithome.com.tw/upload/images/20201006/20130079VlXLDgXtoU.png

1-2. 左右寬度

  • 標題寬度
  • 內容寬度
    https://ithelp.ithome.com.tw/upload/images/20201006/2013007946BfbkHFYd.png

1-3. 表單列的上下間距

  • 單行資料上下間距 (row)
  • 多行資料中的上下間距(item)

https://ithelp.ithome.com.tw/upload/images/20201006/201300793pmkINzPIb.png


2. 表單物件間距

資料元素的間距統一

  • 輸入框與文字(可能會有2-3種)
  • 下拉選單與文字
  • Radio button與文字
  • Checkbox與文字

https://ithelp.ithome.com.tw/upload/images/20201006/20130079tQbes1WtWI.png


3. 表單內容排法

表單內容指的就是有很多框框內容的地方
https://ithelp.ithome.com.tw/upload/images/20201006/20130079tHyXS4X1BK.png

內容排法有2種
3-1. Gird排法

  • 右側內容總寬為Grid總寬
  • Grid寬度
  • Gutter寬度
    https://ithelp.ithome.com.tw/upload/images/20201006/20130079jh2ruEZNEO.png

3.2 固定間距統一排法

  • 固定間距時需注意隱形間距
  • 兩種排法可在同一表單出現
    https://ithelp.ithome.com.tw/upload/images/20201006/20130079DHfYFfoeue.png

用這樣的方式分析表單有什麼好處呢?真的更有彈性嗎?
明天我們可以用這樣的方式來切切看表單吧!


上一篇
DAY20 - 管理你的切版元件 - 製作UI統整頁(2)
下一篇
DAY22 - 切版結構分析 - 建立一個可Reuse的表單 Form - (2)
系列文
不只是寫寫CSS,切版概念30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言