国产欧美精品专区一区二区_91www永久在线精品果冻传媒_日韩成人亚洲综合专区无码av_欧美激情一区二区三区高清视频_免费福利在线视频亚洲_日韩精品无码人妻自慰喷水_把腿张开老子cao哭你动态图_51a性爱高清免费视频_国产无码资源在线观看資源免費看_再深点灬舒服灬太大了网站

為啥小公司也要搞 UI 規(guī)范？

你可能想：“我們?nèi)松?，項目小，搞啥?guī)范？有那時間不如多寫兩個接口?！?/span>

但問題是：

• ? 新人來了，三天都在問：“這個按鈕用哪個顏色？”
• ? 改個主題色，要手動改30個文件。
• ? 設(shè)計稿和實現(xiàn)總對不上。

UI 規(guī)范不是為了高大上，是為了少踩坑。

它不復(fù)雜，也不花時間。
關(guān)鍵是：簡單、能落地、大家愿意用。

案例

1. 先搞三原色和兩種字號

別一上來就整幾十個顏色變量。
我們先定了三個核心顏色：

:root {
  --color-primary: #1890ff;    /* 主色，按鈕、鏈接 */
  --color-success: #52c41a;    /* 成功，比如“已支付” */
  --color-danger: #f5222d;     /* 錯誤，比如“刪除” */
}

然后字號，就兩個：

• ? --font-size-large: 16px; （標題、按鈕文字）
• ? --font-size-normal: 14px; （正文）

夠用嗎？夠。
以前滿屏13、14、15、16混著來，現(xiàn)在一眼就能看明白。

效果：
新人來了，問顏色？“用 --color-primary?！?/span>
問字號？“大標題用 large，其他用 normal?！?/span>
5分鐘上手。

2. 間距，就認一個單位

以前各種 margin: 10px、padding: 15px……亂得像毛線團。

我們定了一個設(shè)計單位：8px。

所有間距，必須是 8 的倍數(shù)：

• ? 小間距：8px
• ? 中間距：16px
• ? 大間距：24px 或 32px

比如：

.card {
  padding: 16px;
  margin-bottom: 24px;
}

設(shè)計師也配合，改了 Sketch 的網(wǎng)格，對齊 8px。

效果：
頁面突然整齊了。
組件之間不再擠成一團，也不松松垮垮。

3. 按鈕，只準有三種

我們砍掉了所有花里胡哨的按鈕。

只留三種：

1. 1. 主按鈕：藍色，用在關(guān)鍵操作（如“提交訂單”）
2. 2. 次按鈕：白色帶邊框，用在“取消”“返回”
3. 3. 危險按鈕：紅色，只用于刪除、停用

樣式統(tǒng)一寫在 Button.css 里，誰也不準自己瞎寫。

案例：
之前有個頁面，三個按鈕全是藍色實心，用戶根本分不清哪個是確認。

現(xiàn)在，主操作是藍的，取消是白的，刪除是紅的。
清晰，不糾結(jié)。

4. 建了個UI 小抄文檔

別搞幾百頁的規(guī)范文檔。
我們建了個 Markdown 文件，叫 UI-cheatsheet.md，就放倉庫里。

內(nèi)容長這樣：

# UI 小抄（前端用）

## 顏色
- 主色：var(--color-primary)
- 成功：var(--color-success)
- 危險：var(--color-danger)

## 字號
- 大：16px
- 正常：14px

## 間距
- ?。?px
- 中：16px
- 大：24px

## 按鈕
- 主按鈕：藍色實心
- 次按鈕：白色邊框
- 危險按鈕：紅色邊框

新人來了，看這個，10分鐘搞定。

小公司搞規(guī)范，核心是：

• ? 簡單到能記住
• ? 落地到不扯皮
• ? 持續(xù)用，別扔掉

最后

UI 規(guī)范不是給老板看的PPT。

它是幫你少加班、少背鍋、少改bug的工具。

你花兩天定個小規(guī)范，后面省下的時間，夠你多喝三杯奶茶。

閱讀原文：原文鏈接