編輯導(dǎo)語：B端設(shè)計(jì)總是有大大小小的組件，那這些組件的小細(xì)節(jié)，你有注意到哪些呢？本文作者進(jìn)行了工作的經(jīng)驗(yàn)分享，還回答了2個(gè)questions，感興趣的小伙伴一起來看下吧。

本文源于讀者和粉絲的相關(guān)提問，以及我前段時(shí)間在做 Ant Design 設(shè)計(jì)與運(yùn)營工作中的經(jīng)驗(yàn)沉淀和總結(jié)，希望對你有幫助。

一、Tab 和錨點(diǎn)Tab有什么區(qū)別？

有同學(xué)想知道 Tab 和錨點(diǎn) Tab 在使用的過程中有什么樣的區(qū)別，這里給大家詳細(xì)說說：

1. 功能上的區(qū)別

1）普通 Tab

當(dāng)頁面信息較多，Tab 可以使用戶的瀏覽和查找更高效；Tab 可以用于區(qū)分信息類型，將大塊內(nèi)容進(jìn)行收納，使頁面更加整潔。

2）錨點(diǎn)Tab

錨點(diǎn) Tab 用于承載較多信息的頁面中，用戶需要順暢、沉浸瀏覽所有信息且瀏覽過程中能感知閱讀內(nèi)容的結(jié)構(gòu)和順序；用戶可以使用它來快速定位和跳轉(zhuǎn)。

2. 呈現(xiàn)形式上的區(qū)別

1）普通 Tab

通常情況下會(huì)一直存在，不會(huì)因?yàn)轫撁娴膶挾瘸叽绨l(fā)生變化而消失；其呈現(xiàn)內(nèi)容的層級和顆粒度根據(jù) Tab 來確定。

比如：頁面級的 Tab 只能定位到頁面層級的內(nèi)容，表單 Tab 只能定位到表單層級的內(nèi)容，下方給出兩個(gè)案例：

可以有多種層級，作出嵌套關(guān)系，且設(shè)計(jì)樣式和結(jié)構(gòu)更加多樣化，如下圖所示：

2）錨點(diǎn) Tab

錨點(diǎn) Tab 在頁面寬度尺寸縮小到一定值時(shí)，可能會(huì)根據(jù)情況被隱藏，見下圖：

理論上，錨點(diǎn) Tab 可以錨定在頁面范圍的任何元素上，點(diǎn)擊后直接定位到該元素，見下圖：

通常錨點(diǎn)Tab 只有一個(gè)層級，且樣式和結(jié)構(gòu)比較單一。

以上就是二者的區(qū)別，大家可以根據(jù)需求自行使用。

二、柵格布局該如何使用？

柵格布局，是一種響應(yīng)式布局方式，應(yīng)用此方式設(shè)計(jì)開發(fā)的頁面可適應(yīng)不同的屏幕尺寸和方向，確保內(nèi)容呈現(xiàn)的可讀性。

AntD 采用的就是 24 柵格體系，對頁面的內(nèi)容區(qū)域進(jìn)行 24 柵格的劃分設(shè)置，如下圖所示：

響應(yīng)式柵格布局由列（column）、間距（gutter）和邊距（margin）這三個(gè)基本元素構(gòu)成：

1. 列（column）：列的寬度被稱為列寬，使用百分比來定義，不是固定值，以便可以靈活地適應(yīng)任何屏幕大小。網(wǎng)格中顯示的列的數(shù)量由屏幕的一些斷點(diǎn)確定，達(dá)到斷點(diǎn)時(shí)，列數(shù)就會(huì)發(fā)生變化。
2. 間距（gutter）：也被稱為槽，間距可以被設(shè)定為定值，在每個(gè)斷點(diǎn)范圍內(nèi)的個(gè)數(shù)是固定的，達(dá)到斷點(diǎn)時(shí)，間距數(shù)量就會(huì)發(fā)生變化。
3. 邊距（margin）：指內(nèi)容和屏幕左右邊緣之間的空間。邊距寬度在每個(gè)斷點(diǎn)范圍內(nèi)的值是固定的，達(dá)到斷點(diǎn)時(shí)，寬度就可以發(fā)生變化。邊距的寬度通常是間距的倍數(shù)。

AntD 為頁面中的間距（gutter）設(shè)定了定值，當(dāng) PC 端瀏覽器或屏幕尺寸在一定的范圍內(nèi)發(fā)生變化時(shí)，列（column）的寬度會(huì)隨之?dāng)U大或縮小，數(shù)量也會(huì)發(fā)生變化；間距（gutter）的寬度值固定不變，以此實(shí)現(xiàn)卡片的寬度變化。

在左右布局的設(shè)計(jì)方案中，常見的做法是將左邊的導(dǎo)航欄固定（設(shè)為定制），對右邊的工作區(qū)域進(jìn)行動(dòng)態(tài)縮放：

當(dāng)沒有左側(cè)導(dǎo)航欄時(shí)，通常的布局做法是對兩邊的邊距（margin）定義最小值，當(dāng)界面的寬度縮小，邊距（margin）達(dá)到最小值之后，再對中間的主內(nèi)容區(qū)域進(jìn)行動(dòng)態(tài)縮放：

在應(yīng)用柵格布局時(shí)要注意以下幾點(diǎn)：

1）盡量保持偶數(shù)思維：所有的數(shù)值盡量使用偶數(shù)。

2）內(nèi)容邊緣不能出現(xiàn)在間距（gutter）上：內(nèi)容的范圍要從列（column）開始到列（column）結(jié)束，即在列寬內(nèi)，內(nèi)容邊緣不能出現(xiàn)在間距上。但有時(shí)如果我們把內(nèi)容都按照列寬排布，視覺效果可能會(huì)不太好，最佳的處理方式是將整個(gè)元素放在一個(gè)不可見的，更大的容器內(nèi)，再將容器排布在列上。見下圖：

3）只要父級元素對齊柵格，子級元素不必完全對齊：有時(shí)設(shè)計(jì)內(nèi)容一半是圖片，一半是文字，圖片和文字沒有完全落在一列上，其實(shí)也是沒有問題的，因?yàn)橹灰讣壢萜鲗R列寬即可，見下圖：

本文由@ 元堯 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議。