設計 UI

在前端討論社團看到有工程師對「無法預測版面規則」有點頭痛，問大家怎麼跟設計師共同制定規則，底下有一些回覆：

「有幾種做法：
1. 12 columns 的垂直分割，但實務上很侷限，會遇到你說的問題
2. CSS 框架的 m-1、m-2，也是一種侷限，一樣會遇到你說的問題
3. 以 4px 為單位的排版，任何間距、尺寸都是 4px 的倍數，我目前是採用這派門路」

「用 8px 當單位設計

使用 8px 做隔線佈局. 講述設計系統文件的重要性，以使用 8px 作為隔線佈局為例 | by Syu...

」

原串

謝孟哲

material design & IBM 是走 8px

Material Design

2x Grid – Carbon Design System

我自己是走 4px，8px 有時還是太大了不太好做細微調整，極端狀況下還會用到 2px，但大原則就是 4px 當基礎單位

我是 12 column 和 8px 混用，主要版面 Layout 會是 Grid 系統分成 12 或是 4 column （都一樣是 4 的倍數），版面內部元件元素之間間距會是 8px 或 4~2px。
切 Grid 是為了方便 RWD 彈性伸縮，這邊我就在作圖時會標上去（Figma 功能好用），8px 系統一開始就有跟工程師講好這個 Rule，如果不是 248 的間距或倍數，那一定是我畫錯了！(

之前自己大量刻版的時候的經驗是，只要設計講的出來 Grid 規則程式就刻的出來，但就是需要有共識＆遇到出現大量新狀況時需要再一起討論怎樣設定規則，像我最近遇到的就是 Excel 等級的大量表格排版，這個 Grid 和 8px 都不太能直接套用，就需要額外討論

小月 : 哦哦哦很實用的分享！最近因為想更方便做 rwd 也想加上 grid 一起做⋯增加設計效率

不過舊設計都是走 10px 規則，可能只能趁做新專題時套看看，不然就是要重訂整站 guideline 大工程

重訂 Guideline 跟 Refactor 版面設計都………大工程，自己突然開始幹、或是舉手說要做的話都會被罵（實際經驗）
新專案先試 Run 成效好的話比較有籌碼跟上頭提案 Refactor，因為有統一設計 Guideline ＆ 節省設計與工程來回時間等等好處

小月 : 我們這裡蠻好的，我來沒多久就說想重做 Guideline 只是優先順序一直上不來 我手上能掌握的專案盡量統一規則了，剩下的設計債就慢慢還