跳至主要内容

前端切版的原則

· 閱讀時間約 4 分鐘
Imagine Chiu
Imagine Chiu
Front End Engineer @ Bearests

前端設計開發，包含了設計與開發

過度依賴內容，靜態寫死佈局​

  • 高度寫死
  • Padding

因為設計稿是死的，在沒規範過的設計稿的情況下，我們應該以前端規範的的情況，或是第一版的設計規範繼續往下進行， 不應該在沒規範的情況下跟著做，「響應式設計」考慮的不只是在不同尺寸中的不同顯示，而是「適應空間」， 我們不管今天設計師是以平面設計角度出發，我們都應該要以「響應式設計」為思考出發點。

一個最大的問題，「過度依賴內容」

文字修改、異動、不同語系文字長度，算得剛剛好，各尺寸一種高度設定(xs, sm, md, lg, xl, xxl)​

高度內容應該要被撐開，還是 過溢字元

寫死寬高，各Padding, Margin 按照設計稿，並依照每個尺寸細緻的設定 (xs, sm, md, lg, xl, xxl 各一種設定)​

識別出通用設定，設計稿不會動，不該 微距調整例 如 變成只有 xs -> md -> xxl

不考慮滿版，還是由內容撐開寬度，直接寫死寬度，按照設計稿，並依照每個尺寸細緻的設定​

識別出來是滿版還是內容撐開高度+Padding

項目卡片列表，項目增加的情況，計算幾px​

100px切為4等分應該為 25%，而不是25px

Margin 與 Padding​

項目與項目間的間隔，是 Margin

統一使用 margin-bottom 原則頂開下面，要隔開多少

項目內的補間，為 Padding

由於在設計中偶爾會遇到 通用為 padding, 但特定元素為滿版，所以建議在每個區塊間設定 padding, 而不是一個大區塊設定 padding，而這個 Padding 為固定的CSS參數設定

可以的話，多一層也無所謂，不要只想著複寫​

有時候把前端設計切為 layout 層跟 樣式層，是對後續維護閱讀調整有相當大的幫助 可以讓你的視覺中直接隔開類別

至於命名問題，命名空間​

使用 Styled-component 沒有 BEM命名問題，因為他會幫你做 BEM 這個命名問題也包含明確定義 dom 結構的內容，

Container 就是 Container，Grid 就是 Grid， 元件切分可以讓我們更容易的對命名也獨立的空間

例如：

Title、Desc，在每個地方幾乎都會有，如果沒切分命名空間，就會是 ProductTitle, GoodsTitle

不管如何，一定要有網格系統、ZIndex 原則​

你需要有一個負責排版的系統 boostrap grid system 或是 tailwind grid system 也好，都行。 只要不是瞎所有自定義，「一句我想跟設計稿一樣」