中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導語：B端設計總是有大大小小的組件，那這些組件的小細節，你有注意到哪些呢？本文作者進行了工作的經驗分享，還回答了2個questions，感興趣的小伙伴一起來看下吧。

本文源于讀者和粉絲的相關提問，以及我前段時間在做 Ant Design 設計與運營工作中的經驗沉淀和總結，希望對你有幫助。

一、Tab 和錨點Tab有什么區別？

有同學想知道 Tab 和錨點 Tab 在使用的過程中有什么樣的區別，這里給大家詳細說說：

1. 功能上的區別

1）普通 Tab

當頁面信息較多，Tab 可以使用戶的瀏覽和查找更高效；Tab 可以用于區分信息類型，將大塊內容進行收納，使頁面更加整潔。

2）錨點Tab

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

2. 呈現形式上的區別

1）普通 Tab

通常情況下會一直存在，不會因為頁面的寬度尺寸發生變化而消失；其呈現內容的層級和顆粒度根據 Tab 來確定。

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

可以有多種層級，作出嵌套關系，且設計樣式和結構更加多樣化，如下圖所示：

2）錨點 Tab

錨點 Tab 在頁面寬度尺寸縮小到一定值時，可能會根據情況被隱藏，見下圖：

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

通常錨點Tab 只有一個層級，且樣式和結構比較單一。

以上就是二者的區別，大家可以根據需求自行使用。

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

柵格布局，是一種響應式布局方式，應用此方式設計開發的頁面可適應不同的屏幕尺寸和方向，確保內容呈現的可讀性。

AntD 采用的就是 24 柵格體系，對頁面的內容區域進行 24 柵格的劃分設置，如下圖所示：

響應式柵格布局由列（column）、間距（gutter）和邊距（margin）這三個基本元素構成：

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

AntD 為頁面中的間距（gutter）設定了定值，當 PC 端瀏覽器或屏幕尺寸在一定的范圍內發生變化時，列（column）的寬度會隨之擴大或縮小，數量也會發生變化；間距（gutter）的寬度值固定不變，以此實現卡片的寬度變化。

在左右布局的設計方案中，常見的做法是將左邊的導航欄固定（設為定制），對右邊的工作區域進行動態縮放：

當沒有左側導航欄時，通常的布局做法是對兩邊的邊距（margin）定義最小值，當界面的寬度縮小，邊距（margin）達到最小值之后，再對中間的主內容區域進行動態縮放：

在應用柵格布局時要注意以下幾點：

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

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

3）只要父級元素對齊柵格，子級元素不必完全對齊：有時設計內容一半是圖片，一半是文字，圖片和文字沒有完全落在一列上，其實也是沒有問題的，因為只要父級容器對齊列寬即可，見下圖：

本文由@ 元堯 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議。