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

編輯導(dǎo)語：在響應(yīng)式柵格系統(tǒng)中，斷點(diǎn)是控制頁面進(jìn)行布局變化的一系列數(shù)值，對(duì)頁面有著一定的影響。很多同學(xué)對(duì)斷點(diǎn)不理解，作者總結(jié)了關(guān)于斷點(diǎn)的應(yīng)用，分享給你。

我曾經(jīng)在之前的文章中為大家介紹過有關(guān)「響應(yīng)式柵格設(shè)計(jì)」的相關(guān)設(shè)計(jì)經(jīng)驗(yàn)。最近我也把一些同學(xué)對(duì)于「斷點(diǎn)」概念的提問整理和分享給你，希望對(duì)你有幫助——

一、斷點(diǎn)的數(shù)量是否越多越好？

不一定。斷點(diǎn)數(shù)量越多，產(chǎn)品在不同尺寸的頁面中切換過程會(huì)越順暢，但是設(shè)計(jì)和開發(fā)的成本也會(huì)相應(yīng)的增加。

斷點(diǎn)（Breakpoints）其實(shí)是控制頁面進(jìn)行布局變化的一系列數(shù)值。再簡單點(diǎn)說，就是當(dāng)頁面到達(dá)某一個(gè)斷點(diǎn)值時(shí)，頁面的排版就會(huì)發(fā)生變化。

關(guān)于斷點(diǎn)，你需要建立以下認(rèn)知概念：

1. 通常情況下，一款產(chǎn)品的斷點(diǎn)數(shù)量

在4-6 個(gè)為宜，因?yàn)槿绻诿恳粋€(gè)斷點(diǎn)都給出一套頁面排版方案，那么斷點(diǎn)的數(shù)量越多，產(chǎn)品頁面被拉伸時(shí)的變化就會(huì)越順暢，同時(shí)產(chǎn)品的設(shè)計(jì)和開發(fā)成本也會(huì)越高。

2. 斷點(diǎn)值，沒有絕對(duì)的數(shù)值規(guī)范

你可以根據(jù)你產(chǎn)品的頁面布局和尺寸來確定，也可以按照你的用戶常用的設(shè)備來設(shè)定。你也可以認(rèn)為：當(dāng)你的頁面的寬度被擠壓變窄，使得排版布局不得不發(fā)生變化時(shí)，就可以給出一個(gè)頁面的斷點(diǎn)值。

舉個(gè)例子，下圖是某產(chǎn)品斷點(diǎn)值和頁面效果案例，其中的 756px、974px 并不是常見數(shù)值，但只要它們符合產(chǎn)品的設(shè)計(jì)和功能需要，就可以將其定為斷點(diǎn)值。只不過數(shù)值不是整數(shù)，不太好記：

3. 每個(gè)斷點(diǎn)下對(duì)應(yīng)的柵格方案，沒有絕對(duì)的標(biāo)準(zhǔn)解法

你可以根據(jù)自己的產(chǎn)品設(shè)計(jì)需要，靈活地規(guī)定不同斷點(diǎn)值下的柵格列數(shù)（Column）、邊距（Margin）和間距（Gutter）的值，以及這些值之間的變化規(guī)律。

其實(shí)柵格和斷點(diǎn)本身是設(shè)計(jì)方法，是用來幫助產(chǎn)品做好適配的。所以柵格方案要去匹配你的產(chǎn)品頁面設(shè)計(jì)，才能更好地服務(wù)于產(chǎn)品，更好地展現(xiàn)產(chǎn)品在不同環(huán)境下的布局樣式。

因此不建議用你的產(chǎn)品去套用其他已有的柵格方案。每個(gè)產(chǎn)品都有個(gè)性，產(chǎn)品對(duì)應(yīng)的柵格解決方案也都是獨(dú)一無二的。

二、斷點(diǎn)的實(shí)際應(yīng)用案例

我以一款 B 端產(chǎn)品的斷點(diǎn)為案例，給你具體講講斷點(diǎn)的功能和應(yīng)用方法。

這款產(chǎn)品使用的是相對(duì)簡單的一種布局方式，見下圖。我還是要再強(qiáng)調(diào)一次，下圖中的柵格方案并不是唯一的標(biāo)準(zhǔn)解法，僅為一種最適合這款產(chǎn)品的解決方案，供你參考（圖有點(diǎn)小，可放大查看，下文也會(huì)有更清晰的大圖）：

由于考慮到產(chǎn)品的特性和開發(fā)的難易程度，這套柵格方案中設(shè)定了兩個(gè)定值：列（Column）的數(shù)量始終為 12 欄；間距（Gutter）的寬度始終是 24px：

先來講講這幾個(gè)斷點(diǎn)數(shù)值的含義。

1600px： 嚴(yán)格意義上來說，1600px 不算是一個(gè)斷點(diǎn)值。這是我們畫設(shè)計(jì)稿使用的畫布寬度。頁面中柵格的最大總寬度（也是有效的內(nèi)容區(qū)）為 1280px：

也就是說當(dāng)頁面再被拉長時(shí)，柵格的總寬度始終為 1280px，只有邊距（Margin）會(huì)不斷增加。頁面的內(nèi)容布局不會(huì)發(fā)生變化：

當(dāng)然，我們?nèi)绻褂闷渌麛?shù)值比如 1440px 或 1400px 作為畫布尺寸也是可以的，其它數(shù)值也會(huì)相應(yīng)變化。

1344px： 這個(gè)斷點(diǎn)值用于確定頁面邊距的第一個(gè)固定寬度是32px。當(dāng)頁面的寬度從 1600px 向 1344px 的靠近時(shí)，頁面的邊距會(huì)不斷縮小，直到達(dá)到 32px 這個(gè)最小值：

也就是說，當(dāng)頁面寬度在 1344px-640px 之間變化時(shí)，邊距始終是32px，改變的只是柵格每一列的寬度，頁面的內(nèi)容布局也不會(huì)發(fā)生變化：

640px：這個(gè)斷點(diǎn)值用于確定頁面邊距的第二個(gè)固定寬度 16px。也就是說當(dāng)頁面寬度小于等于 640px 時(shí)，邊距始終是16px，只改變柵格每一列的寬度：

這時(shí)頁面就適用于Pad 設(shè)備，頁面的布局會(huì)在達(dá)到 640px 時(shí)進(jìn)行直接改變：

375px： 這個(gè)斷點(diǎn)值用于確定內(nèi)容區(qū)最小寬度為 343px，不過這是建立在手機(jī)尺寸唯一的理想基礎(chǔ)上。由于手機(jī)型號(hào)不同，所以實(shí)際上小于 343px 的內(nèi)容區(qū)域也是存在的，可以通過改變欄寬實(shí)現(xiàn)寬度的變化：

這時(shí)頁面就適用于手機(jī)設(shè)備，頁面的布局會(huì)在達(dá)到 375px 時(shí)進(jìn)行直接改變。也可以根據(jù)產(chǎn)品的特點(diǎn)來決定是否沿用 640px 的布局樣式：

所以我們可以看到，整個(gè)產(chǎn)品有三個(gè)主要的斷點(diǎn)，布局有三種主要的樣式：

1. 當(dāng)頁面寬度大于 640px 時(shí)是一種布局，即斷點(diǎn) 1344px 的頁面布局樣式（適用于 PC ）；
2. 當(dāng)頁面寬度在 640px-375px 之間時(shí)是一種布局，即斷點(diǎn) 640px 的頁面布局樣式（適用于 Pad）；
3. ?當(dāng)頁面寬度小于等于 375px 時(shí)，是一種頁面布局樣式（適用于手機(jī)）。

我們現(xiàn)在所有的頁面都使用 12 列柵格，你也可以根據(jù)你的產(chǎn)品設(shè)計(jì)樣式，將 375px 頁面中的 12 列柵格變成 4 列柵格。還是要再強(qiáng)調(diào)一次，這套柵格方案及其中的數(shù)據(jù)并不是唯一的解法或行業(yè)標(biāo)準(zhǔn)，只是最適合這款產(chǎn)品的方案，僅供你學(xué)習(xí)參考：

我們?cè)诤烷_發(fā)做對(duì)接時(shí)，也是用這張圖做講解，讓雙方對(duì)布局規(guī)則達(dá)成一致，初步確定基礎(chǔ)數(shù)值和使用規(guī)范。

#專欄作家#

元堯，微信公眾號(hào)：長弓小子，人人都是產(chǎn)品經(jīng)理專欄作家。一線互聯(lián)網(wǎng)大廠B端體驗(yàn)設(shè)計(jì)師，清華大學(xué)美術(shù)學(xué)院本碩連讀。曾負(fù)責(zé)國內(nèi)最大開源組件庫Ant Design組件的設(shè)計(jì)和運(yùn)營工作，目前負(fù)責(zé)國際業(yè)務(wù)線B端產(chǎn)品體驗(yàn)設(shè)計(jì)和組件庫的搭建工作。

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

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