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

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

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

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

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

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

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

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

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

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

這就顯得你不夠專業(yè)，非常業(yè)余。

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

二、什么是屏幕斷點

屏幕斷點是網(wǎng)頁開發(fā)當中使用的一種技術。

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

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

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

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

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

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

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

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

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

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

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

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

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

三、屏幕斷點的存在方式

屏幕斷點本身非常簡單，但是我們在設計 B 端頁面時，會發(fā)現(xiàn)屏幕斷點與 B 端頁面存在密切聯(lián)系。

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

1. 屏幕斷點

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

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

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

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

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

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

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

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

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

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

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

2. 內(nèi)容斷點

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

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

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

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

在使用內(nèi)容斷點時，它會有幾個要求：

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

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

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

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

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

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

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

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

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

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

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

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

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

四、復雜案例拆解

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

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

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

模塊一：

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

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

模塊二：

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

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

同時因為內(nèi)容的特性，將其設定為平鋪展示。

模塊三：

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

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

模塊四：

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

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

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

總結

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

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

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

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

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

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

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

作者：CE青年Youthce