自從藍湖、Zeplin 這些設計軟件誕生以來，仿佛我們就和設計標注告別，大家對于項目的交付方式就變成了 「選擇畫板 - 上傳 - 分享鏈接 - 結束」；如果你不幸使用的是 figma，則更為簡單 「分享鏈接、結束」

“這也就導致了新生代設計師對設計標注非常的陌生”

回到 B 端設計當中，我們會發現：尺寸變大，內容變多。如果我們還是采取以往的方式，產出以“純頁面設計為主的方案”，就會導致 前端不解、產品困惑、評審艱難、工作無法開展，最后被合理優化，卒~

面對這樣的問題，我們想重新與大家分享一下，在實際工作當中，應該如何進行交付，由此誕生了「B 端交付指南」

專欄主題會以實際工作當中交付的內容為主，為大家講清楚交付工作的各項產出內容。

這是我們 B 端交付指南系列當中的第一個話題，后續我們也會將設計當中的交付細節通過這個專欄為大家講清楚，斷點標注會分為上下兩篇：

1. 上篇：屏幕斷點帶來的設計交付上的問題
2. 下篇：圍繞 B 端核心頁面，講解應該如何標注

相關干貨：

一、為什么需要了解屏幕斷點

我們大多數 B 端產品都是 BS 架構，也就是所謂的在網頁端當中打開的應用程序。

網頁端的尺寸寬度可以隨意調節，這也就造成了瀏覽器的不同分辨率，我們需要設計相應的尺寸來匹配屏幕分辨率。

在實際的工作當中，面對屏幕分辨率的變化，經常會顯得不知所措。

前端會來問：“這兒尺寸多少？那個尺寸變大如何處理”

這就顯得你不夠專業，非常業余。

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

二、什么是屏幕斷點

屏幕斷點是網頁開發當中使用的一種技術。

其目的是為了在不同的屏幕尺寸下，能夠讓網頁的布局和樣式得到相應的優化。斷點通常被設定在特定的尺寸范圍內，在這些范圍內，網頁的樣式排布會有所不同，讓網頁在不同的屏幕尺寸下，都能得到很好的展示。

在互聯網的早期，屏幕斷點是交給程序員自己設定。但隨著大家對于設計的重視，要求的還原度也在不斷提高，后續便要求設計師來去規定屏幕斷點。

關于屏幕斷點，我們可以通過網頁測試，來判斷這個網站是否使用了屏幕斷點。

1. 縮放窗口丨判斷是否有斷點

我們隨便進入到一個網頁當中，快速的縮放瀏覽器窗口，看看網頁內部，在縮放的過程中，究竟有沒有發生變化。如果內容發生明顯的位置變化，我們便可以知道，此網頁有設計屏幕斷點。

2. 檢查工具丨具體了解斷點數值

第二步則需要判斷斷點的具體數值。

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

3. 檢查屬性丨驗證屏幕斷點

點擊檢查左側的第二個圖標，隨后輸入剛才的屏幕斷點，進行尺寸上的調整來做相應的驗證。

舉一個例子，在飛書管理后臺當中，我們拖動瀏覽器會發現，除了內容采取流式變化以外，在一個特定的分辨率當中，飛書的左側導航欄進行收起，讓我們知道這個頁面肯定會存在屏幕斷點的設定。

其次我們通過檢查發現在 1280px 的時候，網頁出現了變動，因此可以大概推測 在飛書管理后臺的頁面當中，1280px 為網頁當中的一個斷點，并且判定它為展開導航或收起導航。

最后進入設置驗證，發現和我們推算的相同，因此可以備注相應的交互說明：“全局交互 - 當網頁尺寸 ＜1280px（不包含），則將導航菜單進入折疊狀態，如圖 1；當網頁尺寸 ≥ 1280px（包含），則將導航菜單呈現展開狀態。”

三、屏幕斷點的存在方式

屏幕斷點本身非常簡單，但是我們在設計 B 端頁面時，會發現屏幕斷點與 B 端頁面存在密切聯系。

因為斷點設定的目的不同，我們大致將屏幕斷點分為兩種：屏幕斷點、內容斷點。

1. 屏幕斷點

屏幕斷點的設定，主要因為市面上有著不同的屏幕尺寸大小，為了滿足這些屏幕的正常使用，因此需要去設定相應的屏幕斷點。

它的設定方式是 因為大家的屏幕尺寸不同，所以我需要設計大多數設備的尺寸來滿足頁面設計的需求。這時候不同設備屏幕尺寸是最為重要的。

比如我們在設計官網時，就會思考有哪些屏幕尺寸，好進行合理的適配。

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

①網站的數據埋點（推薦）：通過數據埋點，來統計進入你們網站的具體用戶，這樣得到的數據是你的用戶的具體設備情況，因此會比較準確。

②百度指數統計：百度指數的較為權威的數據，里面記錄了桌面端大家使用的分辨率情況。

③Statcounter：這是國外最具權威的一個數據統計的網站，里面記錄了不同分辨率的的具體情況，其中還是以：1920x1080 和 1366x768 為大多數。

而在屏幕斷點當中，我們在設計時需要結合上方給到的三類數據，了解到目前分辨率的一個具體情況，并且屏幕斷點主要是在：企業官網、產品設計 時使用，因此便可以以這些數據為基礎，進行快速設定。

比如：我們去設計一個企業官網。

為了將官網滿足大多數設備的正常訪問，因此我們將系統的屏幕斷點都進行了設定，屏幕斷點通常不用過多，一般 2-3 個即可，因此結合下方數據，我們先有了初步尺寸規劃，優先滿足 1920x1080、1440x900 的用戶。

同時設計出該尺寸的設計稿（在設計稿當中會存在尺寸大小等內容元素上的變化），交付給到前端，配合相應的網站標注，讓他們進行還原。

2. 內容斷點

內容斷點會優先思考設計頁面你的內容尺寸上的變化，通過內容的最小值，來去推導究竟應該在哪些時候設定斷點。

它的設定方式是因為一個頁面的內容上，會存在著不同的差異，尺寸的變化會導致內容適應發生變化，因此使用內容斷點來去兼顧內容。

聽上去有些復雜，我舉一個例子：你現在需要設計這個頁面，當前這個頁面為 4 個卡片，那請問在什么分辨率的尺寸下，為 5 個卡片？6 個卡片呢？

它的邏輯就是采取了柵格當中的流式布局，來去還原頁面，通過卡片當中最小尺寸來實現頁面的變化。而我們作為設計師，只需要去考慮不同的形式，流式布局應該如何開展。

在使用內容斷點時，它會有幾個要求：

1. 初稿設計已完成：首先設計出一個你滿意的完整頁面，并且這個頁面已經完成評審，準備交付給前端，不然就會浪費過多精力。
2. 內容滿足要求：在這個頁面的當中，需要存在對不同分辨率變化的內容。比如：卡片、文字、輸入框、圖片 等...
3. 已設定屏幕斷點：我們已經完成了屏幕斷點的設定，現在開始思考內容尺寸不一時，應該如何處理。

比如以上圖的頁面為例，我們先不考慮屏幕斷點的問題，來對其頁面進行標注，思路應該為：

①確定卡片最低尺寸：通常在卡片里的設計當中，我們需要考慮橫向上的最小尺寸。

以上圖為例，假設發現卡片尺寸的最小值為 280px，如果尺寸低于 280px 則無法將其內容完整的展現。

這時候便可設定為 最小尺寸為 280px

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

可以簡單理解為 多一個卡片、少一個卡片 時的屏幕分辨率情況。

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

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

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

我們適配的布局規則會分為 居左、居中、居右、平鋪、縮放 五種規則，這部分邏輯與 figma 當中的自動布局基本一致。

1. 居左 是當寬度過大時，所有的內容進行左對齊，右側進行留白處理
2. 居中 是當寬度過大時，所有的內容進行居中對齊，左側兩側進行留白處理（不常用）
3. 居右 是當寬度過大時，所有的內容進行右對齊，左側進行留白處理（不常用）
4. 平鋪 是所有的內容進行平鋪展示，卡片自動升縮，來實現平鋪的效果
5. 縮放 是所有內容 根據大小進行等比例縮放，來填充空白的區域

當然在設定內容斷點時，我們還需要去考慮網頁當中的滾動條，因為出現滾動條，我們就需要預留滾動條的寬度，否則頁面的內容分布，還會造成影響。

四、復雜案例拆解

剛才講到的只是一個最為基礎的情況，但是在真實的項目當中，我們需要設計的內容會更加的復雜。這里以一個大廠的真實項目為例，下方為 某某系統的一個核心頁面，你需要將其內容進行相應標注交互，你會如何做？

（由于數據保密，所有數據均已替換）

首先對于這個頁面，我們可以將它分為四部分來進行思考，頁面尺寸為 1440px。w

模塊一：

假設：通過后臺數據發現，系統當中存在很多極低的尺寸。

通過數據對比，最后將尺寸設定在 1366px，也就是低于 1366px 就會自動收起 模塊一處導航，同理反之。

模塊二：

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

因此可以將內容斷點設定為：1148px、1440px、1732px、2024px。

同時因為內容的特性，將其設定為平鋪展示。

模塊三：

頭像這里也是一個內容斷點，只是它較為特殊。因為這種內容的特殊性，因此在尺寸變化時，我們會考慮布局的方式采取左側對齊，通過左側對齊，這樣也能夠讓用戶在變化尺寸時，選項的選擇也會更為便捷。

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

模塊四：

與模塊二類似，這時候就不必重復再寫。

具體的斷點，應該如何撰寫，我們會放在下篇文章來和大家細致講解。

這樣的整理我們就能將這個頁面當中存在的變化內容，清晰的講給程序員。

總結

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

這里總結一下兩個斷點方式的差異：

屏幕斷點主要用在網頁設計、管理后臺等關于顯示器分辨率的調整當中。因此這一類型多以企業官網為主。

內容斷點則主要專注內容的大小，因此更適合在復雜的頁面結構當中去呈現自己的思路。

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

最后，為咱們文章讀者留下一個小小的作業，大家可以標注一下 B 站官網是如何標注的，把你的標注寫到評論區，我們下篇文章公布答案。

至于 表單、表格、詳情頁等其他頁面 如何進行標注、屏幕斷點文檔如何撰寫 我們就下篇文章繼續分享~

歡迎關注作者的微信公眾號： CE青年Youthce