導(dǎo)讀：B端設(shè)計可能是下一個風(fēng)口，目前內(nèi)卷也很嚴(yán)重，由于B端設(shè)計師中很多都不太了解前端的技術(shù)，這次給大家分享一下最近學(xué)習(xí)和整理的網(wǎng)頁布局相關(guān)的知識，本文會從B端設(shè)計師的視角帶大家了解各種布局的知識點，讓我們設(shè)計小伙伴在和開發(fā)的溝通中有一定話語權(quán)。

一文了解布局的相關(guān)知識，在與前端開發(fā)對接時掌握設(shè)計話語權(quán)；深度解析B端產(chǎn)品響應(yīng)式設(shè)計的知識點。

一、開發(fā)崗位種類和入門知識

開發(fā)崗位分成前端工程師和后端工程師。

后端開發(fā)工程師主要職責(zé)是平臺設(shè)計、接口設(shè)計和功能實現(xiàn)，在日常工作中與我們設(shè)計師的交流不太多。

作為UI設(shè)計師的我們，在工作中最常打交道的就是前端工程師。前端開發(fā)主要工作是將UI設(shè)計師的高保真設(shè)計稿通過代碼轉(zhuǎn)化成可用的前端頁面。前端開發(fā)又可細(xì)分為web前端開發(fā)、原生iOS開發(fā)和原生安卓開發(fā)。前端開發(fā)主要是用JS+CSS完成頁面的構(gòu)建。

這里簡單介紹一下JS、CSS和HTML。

1. HTML

HTML（HyperText Markup Language）是超文本標(biāo)記語言。超文本就是超越文本的意思，表示它不僅僅是簡單的文本，它比普通的 .txt 文件要高級。這些記號超越了普通文本的標(biāo)記，它們對普通文本的修飾，構(gòu)成了一套規(guī)則，這套規(guī)則就是 HTML。

以蓋房子類比，必須定義這個房子有多長、多寬，每一塊面積如何規(guī)劃，例如哪里是衛(wèi)生間、哪里是飯廳、哪里是臥室。將這些定義好，網(wǎng)頁也就有了最基本的樣子。

2. CSS

CSS（Cascading Style Sheets）是級聯(lián)樣式表。CSS 中的“樣式”就是指外觀。還以蓋房為例，定義好了各個空間，房子也蓋起來了，但還要裝修，例如給客廳貼壁紙、給臥室鋪地板。CSS 就是起裝修作用的，要和 HTML —起配合使用。

3. JavaScript

JavaScript是一種腳本語言，主要用于前端頁面的 DOM 處理。房子已經(jīng)裝修好，貼上了墻紙，鋪上了地板，桌子、板凳、沙發(fā)都已經(jīng)擺好，一切都很完美。可是，一個有生活情趣的住戶時常要買些新家具，或者把茶幾換個位置，這時，移動、添加、減少物件就只能靠 JavaScript 實現(xiàn)。

4. 前端開發(fā)CSS單位

前端開發(fā)人員所使用的CSS單位包含很多種，我們設(shè)計師只需要了解所有單位分成兩類，絕對單位和相對單位。網(wǎng)頁設(shè)計中最常使用的單位px像素，就是一種絕對單位。

絕對單位

絕對長度單位是固定的，用任何一個絕對長度表示的長度都將恰好顯示為這個尺寸。設(shè)置寬度為2px，不管屏幕變大還是變小都始終顯示2px。

相對單位

相對長度單位規(guī)定相對于另一個長度屬性的長度。相對長度單位在不同渲染介質(zhì)之間縮放表現(xiàn)得更好。

二、布局種類介紹

1. 固定&靜態(tài)布局

概念

頁面保持固定的寬度，不會根據(jù)瀏覽器或顯示器的寬度大小而變化。開發(fā)使用像素這種絕對單位作為單位，頁面按照精確像素展示。

固定布局屬于前20年的技術(shù)產(chǎn)物，由于當(dāng)時的科技水平有限，使用的純平顯示器尺寸類型都較固定，所以當(dāng)時很多網(wǎng)頁都使用的是固定布局。

優(yōu)點

設(shè)計簡單，不需要考慮屏幕尺寸的限制，使用一種固定的尺寸進(jìn)行設(shè)計即可。

開發(fā)簡單，不需要考慮屏幕尺寸的適應(yīng)問題。

缺點

小屏幕時需要左右滾動才能看到全部內(nèi)容，大屏幕時兩側(cè)留白較多，空間浪費。

代表案例

目前部分網(wǎng)頁依然會使用固定布局設(shè)計開發(fā)，常見于一些新聞門戶類網(wǎng)站，這一類網(wǎng)頁以大量的圖片和文字資訊為主，如：新浪網(wǎng)、中華網(wǎng)

設(shè)計建議

固定布局形式適合一些新聞門戶類等文字內(nèi)容很多的網(wǎng)站，設(shè)計師在設(shè)計過程中可以定義一種適合瀏覽的頁面內(nèi)容區(qū)寬度，通常設(shè)置為1200px，內(nèi)容區(qū)域居中兩側(cè)空間留白。

2. 流式布局

概念

流式布局（Liquid）的特點（也叫”Fluid”) 是頁面元素的寬度按照屏幕分辨率進(jìn)行適配調(diào)整，但整體布局不變。網(wǎng)頁中主要的劃分區(qū)域的尺寸使用百分?jǐn)?shù)。

頁面中主要的劃分區(qū)域的尺寸使用百分?jǐn)?shù)（搭配min-*、max-*屬性使用），例如，設(shè)置頁面主體的寬度為80%，min-width為960px。圖片也作類似處理（width:100%, max-width一般設(shè)定為圖片本身的尺寸，防止被拉伸而失真）。

優(yōu)點

布局保持不變，內(nèi)容跟隨頁面寬度變化去做變化，內(nèi)容會在大屏和小屏幕之間的寬度變化而變化，能夠適應(yīng)大屏和小屏之間的顯示。

缺點

內(nèi)部字體無法跟隨變化大小

如果屏幕尺度跨度太大，那么在相對其原始設(shè)計而言過小或過大的屏幕上不能正常顯示。

代表案例

阿里云網(wǎng)頁版在低于750px分辨率時采用流式布局方式。

設(shè)計建議

流式布局在設(shè)計中使用頻率較少，在設(shè)計中需要注意寬度變化后導(dǎo)致的內(nèi)容高度變化，設(shè)計時可以考慮做一種最大寬度的效果和最小寬度的效果。

3. 自適應(yīng)布局

概念

自適應(yīng)布局是分別為不同的屏幕分辨率定義布局，即創(chuàng)建多個靜態(tài)布局，每個靜態(tài)布局對應(yīng)一個屏幕分辨率范圍。改變屏幕分辨率可以切換不同的靜態(tài)局部（頁面元素位置發(fā)生改變），但在每個靜態(tài)布局中，頁面元素不隨窗口大小的調(diào)整發(fā)生變化?？梢园炎赃m應(yīng)布局看作是靜態(tài)布局的一個系列。

優(yōu)點

在多個不同尺寸設(shè)備終端下查看網(wǎng)頁內(nèi)容，并且在小屏幕下也能保證相對好的閱讀體驗，對于不同的分辨率能夠靈活的進(jìn)行操作應(yīng)用

通過單一的URL地址收集所有的社交分享鏈接。你可以為創(chuàng)建更好、更友好的網(wǎng)站而做出積極貢獻(xiàn)。

缺點

設(shè)計工作量大，需要根據(jù)不用的頁面設(shè)計不同寬度的設(shè)計稿

頁面存在多個版本，每個版本都必須單獨更新。通常，設(shè)計師需要針對6種最常見的屏幕寬度進(jìn)行設(shè)計。320、480、760、960、1200和1600dp。而且，這個數(shù)字還在不斷增長，這使得設(shè)計師在現(xiàn)場維護(hù)方面的工作變得更加艱辛和耗時。

代表案例

Amazon在自己的頁面中使用了部分寬度自適應(yīng)的方法，與使用自適應(yīng)網(wǎng)頁設(shè)計的其他網(wǎng)站類似，亞馬遜更加鼓勵用戶下載其官方APP。據(jù)報道，通過采用自適應(yīng)設(shè)計，亞馬遜移動端的訪問速度比以往的響應(yīng)式網(wǎng)頁設(shè)計提高了40%。

設(shè)計建議

對于UI設(shè)計師而言，一旦團(tuán)隊確定使用自適應(yīng)布局開發(fā)產(chǎn)品，就需要做多套設(shè)計稿尺寸。對于自適應(yīng)布局而言，就是根據(jù)不同的頁面寬度加載不同的頁面。

常用的設(shè)計尺寸使用600, 840, 960, 1280, 1440, 和1600dp作為斷點，這里的斷點個數(shù)和尺寸可以根據(jù)實際情況靈活去變化，主要是根據(jù)目前終端所在的寬度進(jìn)行選擇，例如產(chǎn)品目標(biāo)用戶使用筆記本的數(shù)量多，可以將1366作為斷點。

4. 響應(yīng)式布局

概念

隨著CSS3出現(xiàn)了媒體查詢技術(shù)，又出現(xiàn)了響應(yīng)式設(shè)計的概念。響應(yīng)式設(shè)計的目標(biāo)是確保一個頁面在所有終端上（各種尺寸的PC、手機(jī)、手表、冰箱的Web瀏覽器等等）都能顯示出令人滿意的效果。

對CSS編寫者而言，在實現(xiàn)上不拘泥于具體手法，但通常是糅合了流式布局+彈性布局，再搭配媒體查詢技術(shù)使用?！謩e為不同的屏幕分辨率定義布局，同時，在每個布局中，應(yīng)用流式布局的理念，即頁面元素寬度隨著窗口調(diào)整而自動適配。即：創(chuàng)建多個流體式布局，分別對應(yīng)一個屏幕分辨率范圍?？梢园秧憫?yīng)式布局看作是流式布局和自適應(yīng)布局設(shè)計理念的融合。

優(yōu)點

響應(yīng)式布局設(shè)計產(chǎn)品能夠給用戶帶來無縫的體驗感，無論使用哪種設(shè)備（臺式機(jī)，移動設(shè)備等），訪客都將獲得相同的無縫體驗。即使當(dāng)它們從一種設(shè)備過渡到另一種設(shè)備時，也會給人一種熟悉和信任的感覺。

對于B端產(chǎn)品來說，跨終端辦公是今后的趨勢。那么響應(yīng)式設(shè)計對于B端產(chǎn)品來說尤為重要，實現(xiàn)同一個頁面在pc和pad上都能夠流暢查看且操作。

缺點

響應(yīng)式網(wǎng)頁設(shè)計最大的擔(dān)憂之一是加載時間。響應(yīng)性網(wǎng)站會為所有設(shè)備加載信息，而不僅僅是訪問者正在查看您網(wǎng)站的設(shè)備信息。

要匹配足夠多的屏幕大小，工作量很大，設(shè)計也需要多個版本。

代表案例

蘋果官網(wǎng)

設(shè)計建議

與自適應(yīng)一樣，對于UI設(shè)計師而言，一旦團(tuán)隊確定使用響應(yīng)式布局開發(fā)產(chǎn)品，就需要做多套設(shè)計稿尺寸。每套設(shè)計稿在不同尺寸下設(shè)計元素以及導(dǎo)航要發(fā)生相應(yīng)變化，比如在寬度縮小到750，考慮設(shè)備為移動端，內(nèi)容在設(shè)計側(cè)考慮移動端規(guī)范，需要遵循移動端的導(dǎo)航與用戶習(xí)慣。

在實操過程中，我們需要更多分析競品以及采用響應(yīng)式布局的其他產(chǎn)品頁面，并且能夠熟悉掌握各個終端的設(shè)計規(guī)范。

三、網(wǎng)頁響應(yīng)式設(shè)計策略

不同斷點間屏幕上的界面相互切換適應(yīng)的策略有：展現(xiàn)、轉(zhuǎn)變、分割、重排、擴(kuò)展和移位。

1、展現(xiàn)，小屏幕上隱藏的UI信息在屏幕增大時可以展現(xiàn)出來，如下圖所示本來隱藏在手機(jī)側(cè)邊導(dǎo)航中的菜單項在平板的左側(cè)直接顯示出來了。這一點也和以600為分界的策略相呼應(yīng)，在更大的屏幕上直接顯示出兩級信息：

2、轉(zhuǎn)變，界面元素從一個組件變?yōu)榱硪粋€組件，這一點也說明組件的使用并不是一成不變的，可以根據(jù)屏幕的大小選擇合適的組件。如下圖所示，側(cè)邊導(dǎo)航的菜單項可能在大屏上顯示為標(biāo)簽；小屏幕上的文字列表項可以在大屏上顯示為圖片網(wǎng)格列表：

3、分割，分層的信息在一個大的空間里鋪開：

4、重排，界面元素可以重新排布以填滿新的空間：

5、拓展，界面元素在大屏幕上展開為更大的尺寸：

6、移位，界面元素調(diào)整到更合適的位置：

四、B端產(chǎn)品的響應(yīng)式介紹

1. 布局

目前有很多大廠商都出了自己的B端系統(tǒng)，如Arco、element。解讀響應(yīng)式設(shè)計，我在這里選擇了 AntDesign 的布局相關(guān)規(guī)范。

Ant design中，主要應(yīng)用了兩種典型的適配布局形式，左右布局和上下布局，響應(yīng)式規(guī)則主要作用在工作區(qū)中的內(nèi)容區(qū)域中。

在這個區(qū)域中，Ant 采用了 24 列柵格（Coloum）、23 列水槽（Gutter）的柵格系統(tǒng)。其中水槽數(shù)值是固定的，內(nèi)容區(qū)域減去 23 列間隔后，剩下的部分等分成 24 個格線。

2. 柵格系統(tǒng)

柵格系統(tǒng)可以讓你依靠秩序與邏輯去完成設(shè)計。

柵格系統(tǒng)優(yōu)勢：

減少決策成本提高設(shè)計理解力：

柵格系統(tǒng)在頁面排版布局、尺寸設(shè)定方面給了設(shè)計者直觀的參考，它讓頁面設(shè)計變得有規(guī)律，從而減少了設(shè)計決策成本；例如發(fā)送消息，預(yù)訂酒店房間或乘車。用戶能夠連貫的理解并找到找到下一條信息或下一步要采取的步驟。

響應(yīng)化：

使用產(chǎn)品時，人們通常會在多個設(shè)備之間切換，以完成該產(chǎn)品的單個任務(wù)。所以響應(yīng)式設(shè)計不應(yīng)該是一種奢侈品，而是一種必需品。這意味著設(shè)計師不能再為單個設(shè)備的屏幕構(gòu)建。多設(shè)備環(huán)境迫使設(shè)計人員根據(jù)動態(tài)網(wǎng)格系統(tǒng)進(jìn)行思考，而不是固定寬度。使用網(wǎng)格可以跨不同屏幕尺寸的多個設(shè)備創(chuàng)建連貫的體驗。

加速團(tuán)隊協(xié)作設(shè)計：

當(dāng)多位設(shè)計師共同設(shè)計產(chǎn)品時，一個統(tǒng)一標(biāo)準(zhǔn)就變得尤為重要。網(wǎng)格系統(tǒng)有助于將界面設(shè)計工作分開，因為多位設(shè)計師可以在統(tǒng)一的布局下進(jìn)行不同部分工作，并且無縫集成并保持連貫。

加速開發(fā)并保證視覺還原：

大多數(shù)設(shè)計項目的落地，涉及到設(shè)計者和開發(fā)者之間的溝通協(xié)作。柵格化提高了頁面布局的一致性；從而提升了整個設(shè)計開發(fā)流程的效率、并能幫助開發(fā)者實現(xiàn)較為理想的設(shè)計還原。2.柵格系統(tǒng)應(yīng)用

列和槽（Columns and Gutters）

柵格系統(tǒng)的基礎(chǔ)應(yīng)用，就是對內(nèi)容模塊分配指定數(shù)值的 “列”，比如一個組件的寬包含 3 列、4列、或者 12列。在同一行中，總共包含 24 列，橫向的元素按照設(shè)計師設(shè)計的大小比例平分這24列。

列的數(shù)量越多，頁面就會被分割的越“碎”，在頁面設(shè)計時就會越難把控，適用于業(yè)務(wù)信息量大、信息分組較多、單個盒子內(nèi)信息體積較小的頁面設(shè)計。

頁面邊距（Side Margins）

在響應(yīng)式設(shè)計中，你選擇了一個頁面邊距之后，縮小頁面寬度時頁面還是會有你設(shè)置的最小頁面邊距，直到到達(dá)下一個響應(yīng)點（breakpoint）。當(dāng)你增大頁面寬度時，頁面就有更多的頁面邊距，直到頁面寬度到達(dá)下一個響應(yīng)點（breakpoint）。

模塊

模塊就是頁面中的設(shè)計區(qū)域，可以是一段文字，一張圖片，或是其他更加豐富的元素。背景元素并不能算作是設(shè)計模塊，所以并不需要遵循柵格系統(tǒng)。模塊的定義是很靈活的，它可以是個小的單位或是元素，也可以是一個元素豐富的區(qū)塊。

創(chuàng)建好畫布以后，在需要響應(yīng)式的區(qū)域創(chuàng)建出對應(yīng)尺寸的24柵格系統(tǒng)，一個24柵格系統(tǒng)可以根據(jù)業(yè)務(wù)需要被2等分、3等分、4等分、6等分、12等分，然后在該柵格體系內(nèi)定義寬高、間距即可，Ant 的框架會自動幫助我們完成響應(yīng)的功能，具體采用哪種比例的組合需要我們根據(jù)自己業(yè)務(wù)需求來定。

3. 響應(yīng)式設(shè)計方法

第1步：確定列的數(shù)量

根據(jù)頁面內(nèi)容復(fù)雜程度確定列的數(shù)量。

根據(jù)前端框架確定列的數(shù)量，例如ant使用24列柵格。

第2步：定義水槽和邊距

確定頁面邊距，通過邊距算出水槽的寬度。

第3步：設(shè)計工具布局設(shè)置

figma或者sketch都有設(shè)置布局的功能，這里以sketch為例展開：

利用 sketch 的布局設(shè)置功能，即可快速搭建出網(wǎng)格系統(tǒng)的參考布局，在平時做設(shè)計的過程中，可以經(jīng)常使用 Ctrl+L 快捷鍵切換布局的顯示，提高設(shè)計效率。

Total Width：

就是內(nèi)容區(qū)域（Container）的值

Offset：

表示柵格的偏移量，我們只要設(shè)定完成以后按Center按鈕即可，會自動居中；

Number of Columns：

就是柵格數(shù)

Gutter on outside：

是非常重要的設(shè)置，勾選以后才能跟前端的柵格算法匹配。

Gutter Width：

就是柵格之間的間距

Columns Width：

就是柵格的寬度

第4步：設(shè)置斷點

斷點是自定義屏幕的寬度范圍，在不同范圍下確定不同的布局規(guī)則，這是為了適應(yīng)不同的設(shè)備和屏幕尺寸。

先從 Break Point斷點的個數(shù)來看，Sales Force 的斷點個數(shù)最少，只有3個。個人認(rèn)為的原因是 Sales Force 的用戶群體使用的都是PC端，因為大多為后臺操作，所以 Break Point 較少，而且從開發(fā)成本來看，斷點越多，規(guī)則越復(fù)雜，意味著研發(fā)成本越高。而其他三家都有自己的硬件設(shè)備，為了設(shè)計能更好的服務(wù)于全端的設(shè)備，所以斷點個數(shù)較多。

根據(jù)設(shè)計稿常見尺寸，我們可以得出下面結(jié)論：

• 0-599px 大致為手機(jī)適配
• 600-1023 大致為平板適配
• 1024-1439 大致為筆記本電腦
• 適配1440+ 大尺寸適配

經(jīng)過多年實踐，以這幾種尺寸作為斷點，是不會有錯的。

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

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