自從藍(lán)湖、Zeplin 這些設(shè)計(jì)軟件誕生以來，仿佛我們就和設(shè)計(jì)標(biāo)注告別，大家對(duì)于項(xiàng)目的交付方式就變成了 「選擇畫板 - 上傳 - 分享鏈接 - 結(jié)束」；如果你不幸使用的是 figma，則更為簡(jiǎn)單 「分享鏈接、結(jié)束」

"這也就導(dǎo)致了新生代設(shè)計(jì)師對(duì)設(shè)計(jì)標(biāo)注非常的陌生"

回到 B 端設(shè)計(jì)當(dāng)中，我們會(huì)發(fā)現(xiàn)：尺寸變大，內(nèi)容變多。如果我們還是采取以往的方式，產(chǎn)出以"純頁(yè)面設(shè)計(jì)為主的方案"，就會(huì)導(dǎo)致 前端不解、產(chǎn)品困惑、評(píng)審艱難、工作無法開展，最后被合理優(yōu)化，卒~

面對(duì)這樣的問題，我們想重新與大家分享一下，在實(shí)際工作當(dāng)中，應(yīng)該如何進(jìn)行交付，由此誕生了「B 端交付指南」

專欄主題會(huì)以實(shí)際工作當(dāng)中交付的內(nèi)容為主，為大家講清楚交付工作的各項(xiàng)產(chǎn)出內(nèi)容。

一、為什么需要了解屏幕斷點(diǎn)

我們大多數(shù) B 端產(chǎn)品都是 BS 架構(gòu)，也就是所謂的在網(wǎng)頁(yè)端當(dāng)中打開的應(yīng)用程序。

網(wǎng)頁(yè)端的尺寸寬度可以隨意調(diào)節(jié)，這也就造成了瀏覽器的不同分辨率，我們需要設(shè)計(jì)相應(yīng)的尺寸來匹配屏幕分辨率。

在實(shí)際的工作當(dāng)中，面對(duì)屏幕分辨率的變化，經(jīng)常會(huì)顯得不知所措。

前端會(huì)來問："這兒尺寸多少？那個(gè)尺寸變大如何處理"

這就顯得你不夠?qū)I(yè)，非常業(yè)余。

同時(shí)在實(shí)際還原時(shí)，還會(huì)出現(xiàn) 稿件尺寸不匹配、設(shè)計(jì)還原度低、設(shè)計(jì)內(nèi)容難落地 等問題，這些問題并不代表著程序員出現(xiàn)問題，很多時(shí)候其實(shí)是設(shè)計(jì)師本身沒有將方案明確，而屏幕斷點(diǎn)就是最基礎(chǔ)的交付產(chǎn)出。

二、什么是屏幕斷點(diǎn)

屏幕斷點(diǎn)是網(wǎng)頁(yè)開發(fā)當(dāng)中使用的一種技術(shù)。

其目的是為了在不同的屏幕尺寸下，能夠讓網(wǎng)頁(yè)的布局和樣式得到相應(yīng)的優(yōu)化。斷點(diǎn)通常被設(shè)定在特定的尺寸范圍內(nèi)，在這些范圍內(nèi)，網(wǎng)頁(yè)的樣式排布會(huì)有所不同，讓網(wǎng)頁(yè)在不同的屏幕尺寸下，都能得到很好的展示。

在互聯(lián)網(wǎng)的早期，屏幕斷點(diǎn)是交給程序員自己設(shè)定。但隨著大家對(duì)于設(shè)計(jì)的重視，要求的還原度也在不斷提高，后續(xù)便要求設(shè)計(jì)師來去規(guī)定屏幕斷點(diǎn)。

關(guān)于屏幕斷點(diǎn)，我們可以通過網(wǎng)頁(yè)測(cè)試，來判斷這個(gè)網(wǎng)站是否使用了屏幕斷點(diǎn)。

1. 縮放窗口丨判斷是否有斷點(diǎn)

我們隨便進(jìn)入到一個(gè)網(wǎng)頁(yè)當(dāng)中，快速的縮放瀏覽器窗口，看看網(wǎng)頁(yè)內(nèi)部，在縮放的過程中，究竟有沒有發(fā)生變化。如果內(nèi)容發(fā)生明顯的位置變化，我們便可以知道，此網(wǎng)頁(yè)有設(shè)計(jì)屏幕斷點(diǎn)。

2. 檢查工具丨具體了解斷點(diǎn)數(shù)值

第二步則需要判斷斷點(diǎn)的具體數(shù)值。

在瀏覽器當(dāng)中（Chrome Edge 瀏覽器比較好用）我們能夠通過檢查工具右上角的分辨率，測(cè)試得出具體的屏幕斷點(diǎn)。

3. 檢查屬性丨驗(yàn)證屏幕斷點(diǎn)

點(diǎn)擊檢查左側(cè)的第二個(gè)圖標(biāo)，隨后輸入剛才的屏幕斷點(diǎn)，進(jìn)行尺寸上的調(diào)整來做相應(yīng)的驗(yàn)證。

舉一個(gè)例子，在飛書管理后臺(tái)當(dāng)中，我們拖動(dòng)瀏覽器會(huì)發(fā)現(xiàn)，除了內(nèi)容采取流式變化以外，在一個(gè)特定的分辨率當(dāng)中，飛書的左側(cè)導(dǎo)航欄進(jìn)行收起，讓我們知道這個(gè)頁(yè)面肯定會(huì)存在屏幕斷點(diǎn)的設(shè)定。

其次我們通過檢查發(fā)現(xiàn)在 1280px 的時(shí)候，網(wǎng)頁(yè)出現(xiàn)了變動(dòng)，因此可以大概推測(cè) 在飛書管理后臺(tái)的頁(yè)面當(dāng)中，1280px 為網(wǎng)頁(yè)當(dāng)中的一個(gè)斷點(diǎn)，并且判定它為展開導(dǎo)航或收起導(dǎo)航。

最后進(jìn)入設(shè)置驗(yàn)證，發(fā)現(xiàn)和我們推算的相同，因此可以備注相應(yīng)的交互說明："全局交互 - 當(dāng)網(wǎng)頁(yè)尺寸 ＜1280px（不包含），則將導(dǎo)航菜單進(jìn)入折疊狀態(tài)，如圖 1；當(dāng)網(wǎng)頁(yè)尺寸 ≥ 1280px（包含），則將導(dǎo)航菜單呈現(xiàn)展開狀態(tài)。"

三、屏幕斷點(diǎn)的存在方式

屏幕斷點(diǎn)本身非常簡(jiǎn)單，但是我們?cè)谠O(shè)計(jì) B 端頁(yè)面時(shí)，會(huì)發(fā)現(xiàn)屏幕斷點(diǎn)與 B 端頁(yè)面存在密切聯(lián)系。

因?yàn)閿帱c(diǎn)設(shè)定的目的不同，我們大致將屏幕斷點(diǎn)分為兩種：屏幕斷點(diǎn)、內(nèi)容斷點(diǎn)。

1. 屏幕斷點(diǎn)

屏幕斷點(diǎn)的設(shè)定，主要因?yàn)槭忻嫔嫌兄煌钠聊怀叽绱笮?，為了滿足這些屏幕的正常使用，因此需要去設(shè)定相應(yīng)的屏幕斷點(diǎn)。

它的設(shè)定方式是 因?yàn)榇蠹业钠聊怀叽绮煌?，所以我需要設(shè)計(jì)大多數(shù)設(shè)備的尺寸來滿足頁(yè)面設(shè)計(jì)的需求。這時(shí)候不同設(shè)備屏幕尺寸是最為重要的。

比如我們?cè)谠O(shè)計(jì)官網(wǎng)時(shí)，就會(huì)思考有哪些屏幕尺寸，好進(jìn)行合理的適配。

當(dāng)然為了做好它，我們需要了解市面上大多數(shù)設(shè)備的屏幕尺寸才行，這樣才能夠保證不同的設(shè)備都能夠看到較為完美的頁(yè)面。如何了解這些尺寸呢？我們通常會(huì)有三個(gè)途徑：

①網(wǎng)站的數(shù)據(jù)埋點(diǎn)（推薦）：通過數(shù)據(jù)埋點(diǎn)，來統(tǒng)計(jì)進(jìn)入你們網(wǎng)站的具體用戶，這樣得到的數(shù)據(jù)是你的用戶的具體設(shè)備情況，因此會(huì)比較準(zhǔn)確。

②百度指數(shù)統(tǒng)計(jì)：百度指數(shù)的較為權(quán)威的數(shù)據(jù)，里面記錄了桌面端大家使用的分辨率情況。

③Statcounter：這是國(guó)外最具權(quán)威的一個(gè)數(shù)據(jù)統(tǒng)計(jì)的網(wǎng)站，里面記錄了不同分辨率的的具體情況，其中還是以：1920x1080 和 1366x768 為大多數(shù)。

而在屏幕斷點(diǎn)當(dāng)中，我們?cè)谠O(shè)計(jì)時(shí)需要結(jié)合上方給到的三類數(shù)據(jù)，了解到目前分辨率的一個(gè)具體情況，并且屏幕斷點(diǎn)主要是在：企業(yè)官網(wǎng)、產(chǎn)品設(shè)計(jì) 時(shí)使用，因此便可以以這些數(shù)據(jù)為基礎(chǔ)，進(jìn)行快速設(shè)定。

比如：我們?nèi)ピO(shè)計(jì)一個(gè)企業(yè)官網(wǎng)。

為了將官網(wǎng)滿足大多數(shù)設(shè)備的正常訪問，因此我們將系統(tǒng)的屏幕斷點(diǎn)都進(jìn)行了設(shè)定，屏幕斷點(diǎn)通常不用過多，一般 2-3 個(gè)即可，因此結(jié)合下方數(shù)據(jù)，我們先有了初步尺寸規(guī)劃，優(yōu)先滿足 1920x1080、1440x900 的用戶。

同時(shí)設(shè)計(jì)出該尺寸的設(shè)計(jì)稿（在設(shè)計(jì)稿當(dāng)中會(huì)存在尺寸大小等內(nèi)容元素上的變化），交付給到前端，配合相應(yīng)的網(wǎng)站標(biāo)注，讓他們進(jìn)行還原。

2. 內(nèi)容斷點(diǎn)

內(nèi)容斷點(diǎn)會(huì)優(yōu)先思考設(shè)計(jì)頁(yè)面你的內(nèi)容尺寸上的變化，通過內(nèi)容的最小值，來去推導(dǎo)究竟應(yīng)該在哪些時(shí)候設(shè)定斷點(diǎn)。

它的設(shè)定方式是因?yàn)橐粋€(gè)頁(yè)面的內(nèi)容上，會(huì)存在著不同的差異，尺寸的變化會(huì)導(dǎo)致內(nèi)容適應(yīng)發(fā)生變化，因此使用內(nèi)容斷點(diǎn)來去兼顧內(nèi)容。

聽上去有些復(fù)雜，我舉一個(gè)例子：你現(xiàn)在需要設(shè)計(jì)這個(gè)頁(yè)面，當(dāng)前這個(gè)頁(yè)面為 4 個(gè)卡片，那請(qǐng)問在什么分辨率的尺寸下，為 5 個(gè)卡片？6 個(gè)卡片呢？

它的邏輯就是采取了柵格當(dāng)中的流式布局，來去還原頁(yè)面，通過卡片當(dāng)中最小尺寸來實(shí)現(xiàn)頁(yè)面的變化。而我們作為設(shè)計(jì)師，只需要去考慮不同的形式，流式布局應(yīng)該如何開展。

在使用內(nèi)容斷點(diǎn)時(shí)，它會(huì)有幾個(gè)要求：

1. 初稿設(shè)計(jì)已完成：首先設(shè)計(jì)出一個(gè)你滿意的完整頁(yè)面，并且這個(gè)頁(yè)面已經(jīng)完成評(píng)審，準(zhǔn)備交付給前端，不然就會(huì)浪費(fèi)過多精力。
2. 內(nèi)容滿足要求：在這個(gè)頁(yè)面的當(dāng)中，需要存在對(duì)不同分辨率變化的內(nèi)容。比如：卡片、文字、輸入框、圖片 等...
3. 已設(shè)定屏幕斷點(diǎn)：我們已經(jīng)完成了屏幕斷點(diǎn)的設(shè)定，現(xiàn)在開始思考內(nèi)容尺寸不一時(shí)，應(yīng)該如何處理。

比如以上圖的頁(yè)面為例，我們先不考慮屏幕斷點(diǎn)的問題，來對(duì)其頁(yè)面進(jìn)行標(biāo)注，思路應(yīng)該為：

①確定卡片最低尺寸：通常在卡片里的設(shè)計(jì)當(dāng)中，我們需要考慮橫向上的最小尺寸。

以上圖為例，假設(shè)發(fā)現(xiàn)卡片尺寸的最小值為 280px，如果尺寸低于 280px 則無法將其內(nèi)容完整的展現(xiàn)。

這時(shí)候便可設(shè)定為 最小尺寸為 280px

②拓展分辨率：確定完最低尺寸或，我們可以將分辨率拓展到其他頁(yè)面當(dāng)中，具體公式為：頁(yè)面尺寸 +- n * (最小值+卡片間距) = 擴(kuò)展分辨率尺寸

可以簡(jiǎn)單理解為 多一個(gè)卡片、少一個(gè)卡片 時(shí)的屏幕分辨率情況。

比如上圖，拓展分辨率為 「1440px +- n * (280+24)」 具體值為：1136px、1744px、2036px

也就是說 上面提到的尺寸均為拓展分辨率尺寸，只要低于此尺寸，其內(nèi)容卡片就會(huì)相應(yīng)減少。這部分和之前的柵格較為類似

③完善相應(yīng)規(guī)則：我們剛才只是確定了屏幕斷點(diǎn)的尺寸，但是真正想要將這個(gè)方案落地，還需要搭配各種適配的布局規(guī)則。

我們適配的布局規(guī)則會(huì)分為 居左、居中、居右、平鋪、縮放 五種規(guī)則，這部分邏輯與 figma 當(dāng)中的自動(dòng)布局基本一致。

1. 居左 是當(dāng)寬度過大時(shí)，所有的內(nèi)容進(jìn)行左對(duì)齊，右側(cè)進(jìn)行留白處理
2. 居中 是當(dāng)寬度過大時(shí)，所有的內(nèi)容進(jìn)行居中對(duì)齊，左側(cè)兩側(cè)進(jìn)行留白處理（不常用）
3. 居右 是當(dāng)寬度過大時(shí)，所有的內(nèi)容進(jìn)行右對(duì)齊，左側(cè)進(jìn)行留白處理（不常用）
4. 平鋪 是所有的內(nèi)容進(jìn)行平鋪展示，卡片自動(dòng)升縮，來實(shí)現(xiàn)平鋪的效果
5. 縮放 是所有內(nèi)容 根據(jù)大小進(jìn)行等比例縮放，來填充空白的區(qū)域

當(dāng)然在設(shè)定內(nèi)容斷點(diǎn)時(shí)，我們還需要去考慮網(wǎng)頁(yè)當(dāng)中的滾動(dòng)條，因?yàn)槌霈F(xiàn)滾動(dòng)條，我們就需要預(yù)留滾動(dòng)條的寬度，否則頁(yè)面的內(nèi)容分布，還會(huì)造成影響。

四、復(fù)雜案例拆解

剛才講到的只是一個(gè)最為基礎(chǔ)的情況，但是在真實(shí)的項(xiàng)目當(dāng)中，我們需要設(shè)計(jì)的內(nèi)容會(huì)更加的復(fù)雜。這里以一個(gè)大廠的真實(shí)項(xiàng)目為例，下方為 某某系統(tǒng)的一個(gè)核心頁(yè)面，你需要將其內(nèi)容進(jìn)行相應(yīng)標(biāo)注交互，你會(huì)如何做？

（由于數(shù)據(jù)保密，所有數(shù)據(jù)均已替換）

首先對(duì)于這個(gè)頁(yè)面，我們可以將它分為四部分來進(jìn)行思考，頁(yè)面尺寸為 1440px。w

模塊一：

假設(shè)：通過后臺(tái)數(shù)據(jù)發(fā)現(xiàn)，系統(tǒng)當(dāng)中存在很多極低的尺寸。

通過數(shù)據(jù)對(duì)比，最后將尺寸設(shè)定在 1366px，也就是低于 1366px 就會(huì)自動(dòng)收起 模塊一處導(dǎo)航，同理反之。

模塊二：

首先設(shè)定模塊二的最小尺寸為 280 px，并且頁(yè)面間距為 12 px，通過公式設(shè)定，我們可以將模塊二的內(nèi)容斷點(diǎn)為：「1440px +- n * (280+12)」

因此可以將內(nèi)容斷點(diǎn)設(shè)定為：1148px、1440px、1732px、2024px。

同時(shí)因?yàn)閮?nèi)容的特性，將其設(shè)定為平鋪展示。

模塊三：

頭像這里也是一個(gè)內(nèi)容斷點(diǎn)，只是它較為特殊。因?yàn)檫@種內(nèi)容的特殊性，因此在尺寸變化時(shí)，我們會(huì)考慮布局的方式采取左側(cè)對(duì)齊，通過左側(cè)對(duì)齊，這樣也能夠讓用戶在變化尺寸時(shí)，選項(xiàng)的選擇也會(huì)更為便捷。

具體數(shù)值我就不啰嗦了，邏輯同理~

模塊四：

與模塊二類似，這時(shí)候就不必重復(fù)再寫。

具體的斷點(diǎn)，應(yīng)該如何撰寫，我們會(huì)放在下篇文章來和大家細(xì)致講解。

這樣的整理我們就能將這個(gè)頁(yè)面當(dāng)中存在的變化內(nèi)容，清晰的講給程序員。

總結(jié)

屏幕斷點(diǎn)能夠幫助我們，了解頁(yè)面究竟應(yīng)該如何還原。在如今對(duì)頁(yè)面要求極高的年代，很多時(shí)候頁(yè)面還原不好并不一定是程序員的鍋，同樣也有可能是設(shè)計(jì)師沒有正確的進(jìn)行設(shè)計(jì)交付，因此在屏幕斷點(diǎn)里面我們就需要注意這一問題。

這里總結(jié)一下兩個(gè)斷點(diǎn)方式的差異：

屏幕斷點(diǎn)主要用在網(wǎng)頁(yè)設(shè)計(jì)、管理后臺(tái)等關(guān)于顯示器分辨率的調(diào)整當(dāng)中。因此這一類型多以企業(yè)官網(wǎng)為主。

內(nèi)容斷點(diǎn)則主要專注內(nèi)容的大小，因此更適合在復(fù)雜的頁(yè)面結(jié)構(gòu)當(dāng)中去呈現(xiàn)自己的思路。

設(shè)計(jì)思路是首先設(shè)定屏幕斷點(diǎn)，緊接著設(shè)置內(nèi)容斷點(diǎn)，如果對(duì)于前端了解的同學(xué)會(huì)發(fā)現(xiàn)，其實(shí)根本不會(huì)存在什么內(nèi)容斷點(diǎn)，這個(gè)方式無外乎就是 內(nèi)容的布局以及最小的尺寸，但是只有通過這種方式才能夠讓設(shè)計(jì)師將屏幕變化過后，頁(yè)面如何切換標(biāo)注清楚（有木有明白我的良苦用心~）。

最后，為咱們文章讀者留下一個(gè)小小的作業(yè)，大家可以標(biāo)注一下 B 站官網(wǎng)是如何標(biāo)注的，把你的標(biāo)注寫到評(píng)論區(qū)，我們下篇文章公布答案。

至于 表單、表格、詳情頁(yè)等其他頁(yè)面 如何進(jìn)行標(biāo)注、屏幕斷點(diǎn)文檔如何撰寫 我們就下篇文章繼續(xù)分享~

作者：CE青年Youthce