編輯導(dǎo)語：B端設(shè)計總是有大大小小的組件，那這些組件的小細節(jié)，你有注意到哪些呢？本文作者進行了工作的經(jīng)驗分享，還回答了2個questions，感興趣的小伙伴一起來看下吧。
本文源于讀者和粉絲的相關(guān)提問，以及我前段時間在做 Ant Design 設(shè)計與運營工作中的經(jīng)驗沉淀和總結(jié)，希望對你有幫助。
一、Tab 和錨點Tab有什么區(qū)別？
有同學(xué)想知道 Tab 和錨點 Tab 在使用的過程中有什么樣的區(qū)別，這里給大家詳細說說：
1. 功能上的區(qū)別
1）普通 Tab
當頁面信息較多，Tab 可以使用戶的瀏覽和查找更高效；Tab 可以用于區(qū)分信息類型，將大塊內(nèi)容進行收納，使頁面更加整潔。
2）錨點Tab
錨點 Tab 用于承載較多信息的頁面中，用戶需要順暢、沉浸瀏覽所有信息且瀏覽過程中能感知閱讀內(nèi)容的結(jié)構(gòu)和順序；用戶可以使用它來快速定位和跳轉(zhuǎn)。
2. 呈現(xiàn)形式上的區(qū)別
1）普通 Tab
通常情況下會一直存在，不會因為頁面的寬度尺寸發(fā)生變化而消失；其呈現(xiàn)內(nèi)容的層級和顆粒度根據(jù) Tab 來確定。
比如：頁面級的 Tab 只能定位到頁面層級的內(nèi)容，表單 Tab 只能定位到表單層級的內(nèi)容，下方給出兩個案例：
可以有多種層級，作出嵌套關(guān)系，且設(shè)計樣式和結(jié)構(gòu)更加多樣化，如下圖所示：
2）錨點 Tab
錨點 Tab 在頁面寬度尺寸縮小到一定值時，可能會根據(jù)情況被隱藏，見下圖：
理論上，錨點 Tab 可以錨定在頁面范圍的任何元素上，點擊后直接定位到該元素，見下圖：
通常錨點Tab 只有一個層級，且樣式和結(jié)構(gòu)比較單一。
以上就是二者的區(qū)別，大家可以根據(jù)需求自行使用。
二、柵格布局該如何使用？
柵格布局，是一種響應(yīng)式布局方式，應(yīng)用此方式設(shè)計開發(fā)的頁面可適應(yīng)不同的屏幕尺寸和方向，確保內(nèi)容呈現(xiàn)的可讀性。
AntD 采用的就是 24 柵格體系，對頁面的內(nèi)容區(qū)域進行 24 柵格的劃分設(shè)置，如下圖所示：
響應(yīng)式柵格布局由列（column）、間距（gutter）和邊距（margin）這三個基本元素構(gòu)成：
- 列（column）：列的寬度被稱為列寬，使用百分比來定義，不是固定值，以便可以靈活地適應(yīng)任何屏幕大小。網(wǎng)格中顯示的列的數(shù)量由屏幕的一些斷點確定，達到斷點時，列數(shù)就會發(fā)生變化。
- 間距（gutter）：也被稱為槽，間距可以被設(shè)定為定值，在每個斷點范圍內(nèi)的個數(shù)是固定的，達到斷點時，間距數(shù)量就會發(fā)生變化。
- 邊距（margin）：指內(nèi)容和屏幕左右邊緣之間的空間。邊距寬度在每個斷點范圍內(nèi)的值是固定的，達到斷點時，寬度就可以發(fā)生變化。邊距的寬度通常是間距的倍數(shù)。
AntD 為頁面中的間距（gutter）設(shè)定了定值，當 PC 端瀏覽器或屏幕尺寸在一定的范圍內(nèi)發(fā)生變化時，列（column）的寬度會隨之擴大或縮小，數(shù)量也會發(fā)生變化；間距（gutter）的寬度值固定不變，以此實現(xiàn)卡片的寬度變化。
在左右布局的設(shè)計方案中，常見的做法是將左邊的導(dǎo)航欄固定（設(shè)為定制），對右邊的工作區(qū)域進行動態(tài)縮放：
當沒有左側(cè)導(dǎo)航欄時，通常的布局做法是對兩邊的邊距（margin）定義最小值，當界面的寬度縮小，邊距（margin）達到最小值之后，再對中間的主內(nèi)容區(qū)域進行動態(tài)縮放：
在應(yīng)用柵格布局時要注意以下幾點：
1）盡量保持偶數(shù)思維：所有的數(shù)值盡量使用偶數(shù)。
2）內(nèi)容邊緣不能出現(xiàn)在間距（gutter）上：內(nèi)容的范圍要從列（column）開始到列（column）結(jié)束，即在列寬內(nèi)，內(nèi)容邊緣不能出現(xiàn)在間距上。但有時如果我們把內(nèi)容都按照列寬排布，視覺效果可能會不太好，最佳的處理方式是將整個元素放在一個不可見的，更大的容器內(nèi)，再將容器排布在列上。見下圖：
3）只要父級元素對齊柵格，子級元素不必完全對齊：有時設(shè)計內(nèi)容一半是圖片，一半是文字，圖片和文字沒有完全落在一列上，其實也是沒有問題的，因為只要父級容器對齊列寬即可，見下圖：
本文由@ 元堯 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自 Unsplash，基于CC0協(xié)議。
好了，這篇文章的內(nèi)容發(fā)貨聯(lián)盟就和大家分享到這里，如果大家網(wǎng)絡(luò)推廣引流創(chuàng)業(yè)感興趣，可以添加微信：80709525 備注：發(fā)貨聯(lián)盟引流學(xué)習(xí)； 我拉你進直播課程學(xué)習(xí)群，每周135晚上都是有實戰(zhàn)干貨的推廣引流技術(shù)課程免費分享！
