B端設計師必讀-各類型網(wǎng)頁布局詳解
時間：2023-10-15 00:18:02 | 來源：網(wǎng)站運營
時間：2023-10-15 00:18:02 來源：網(wǎng)站運營
B端設計師必讀-各類型網(wǎng)頁布局詳解：一文了解各種布局的相關知識，在與前端開發(fā)對接時掌握設計話語權。
B端設計可能是下一個風口，目前內(nèi)卷也很嚴重，由于B端設計師中很多都不太了解前端的技術，這次給大家分享一下最近學習和整理的網(wǎng)頁布局相關的知識，本文會從B端設計師的視角帶大家了解各種布局的知識點，讓我們設計小伙伴在和開發(fā)的溝通中有一定話語權。
開發(fā)崗位種類和入門知識
開發(fā)崗位分成前端工程師和后端工程師。
后端開發(fā)工程師主要職責是平臺設計、接口設計和功能實現(xiàn)，在日常工作中與我們設計師的交流不太多。
作為UI設計師的我們，在工作中最常打交道的就是前端工程師。前端開發(fā)主要工作是將UI設計師的高保真設計稿通過代碼轉化成可用的前端頁面。前端開發(fā)又可細分為web前端開發(fā)、原生iOS開發(fā)和原生安卓開發(fā)。前端開發(fā)主要是用JS+CSS完成頁面的構建。
這里簡單介紹一下JS、CSS和HTML。
HTML（HyperText Markup Language）是超文本標記語言。超文本就是超越文本的意思，表示它不僅僅是簡單的文本，它比普通的 .txt 文件要高級。這些記號超越了普通文本的標記，它們對普通文本的修飾，構成了一套規(guī)則，這套規(guī)則就是 HTML。
以蓋房子類比，必須定義這個房子有多長、多寬，每一塊面積如何規(guī)劃，例如哪里是衛(wèi)生間、哪里是飯廳、哪里是臥室。將這些定義好，網(wǎng)頁也就有了最基本的樣子。
CSS（Cascading Style Sheets）是級聯(lián)樣式表。CSS 中的“樣式”就是指外觀。還以蓋房為例，定義好了各個空間，房子也蓋起來了，但還要裝修，例如給客廳貼壁紙、給臥室鋪地板。CSS 就是起裝修作用的，要和 HTML —起配合使用。
JavaScript是一種腳本語言，主要用于前端頁面的 DOM 處理。房子已經(jīng)裝修好，貼上了墻紙，鋪上了地板，桌子、板凳、沙發(fā)都已經(jīng)擺好，一切都很完美?？墒?，一個有生活情趣的住戶時常要買些新家具，或者把茶幾換個位置，這時，移動、添加、減少物件就只能靠 JavaScript 實現(xiàn)。
前端開發(fā)CSS單位
前端開發(fā)人員所使用的CSS單位包含很多種，我們設計師只需要了解所有單位分成兩類，絕對單位和相對單位。網(wǎng)頁設計中最常使用的單位px像素，就是一種絕對單位。
絕對長度單位是固定的，用任何一個絕對長度表示的長度都將恰好顯示為這個尺寸。設置寬度為2px，不管屏幕變大還是變小都始終顯示2px。
相對長度單位規(guī)定相對于另一個長度屬性的長度。相對長度單位在不同渲染介質(zhì)之間縮放表現(xiàn)得更好。
布局種類介紹
固定&靜態(tài)布局
頁面保持固定的寬度，不會根據(jù)瀏覽器或顯示器的寬度大小而變化。開發(fā)使用像素這種絕對單位作為單位，頁面按照精確像素展示。
固定布局屬于前20年的技術產(chǎn)物，由于當時的科技水平有限，使用的純平顯示器尺寸類型都較固定，所以當時很多網(wǎng)頁都使用的是固定布局。
設計簡單，不需要考慮屏幕尺寸的限制，使用一種固定的尺寸進行設計即可。
開發(fā)簡單，不需要考慮屏幕尺寸的適應問題。
小屏幕時需要左右滾動才能看到全部內(nèi)容，大屏幕時兩側留白較多，空間浪費。
目前部分網(wǎng)頁依然會使用固定布局設計開發(fā)，常見于一些新聞門戶類網(wǎng)站，這一類網(wǎng)頁以大量的圖片和文字資訊為主，如：新浪網(wǎng)、中華網(wǎng)
固定布局形式適合一些新聞門戶類等文字內(nèi)容很多的網(wǎng)站，設計師在設計過程中可以定義一種適合瀏覽的頁面內(nèi)容區(qū)寬度，通常設置為1200px，內(nèi)容區(qū)域居中兩側空間留白。
流式布局
流式布局（Liquid）的特點（也叫"Fluid") 是頁面元素的寬度按照屏幕分辨率進行適配調(diào)整，但整體布局不變。網(wǎng)頁中主要的劃分區(qū)域的尺寸使用百分數(shù)。
頁面中主要的劃分區(qū)域的尺寸使用百分數(shù)（搭配min-*、max-*屬性使用），例如，設置頁面主體的寬度為80%，min-width為960px。圖片也作類似處理（width:100%, max-width一般設定為圖片本身的尺寸，防止被拉伸而失真）。
布局保持不變，內(nèi)容跟隨頁面寬度變化去做變化，內(nèi)容會在大屏和小屏幕之間的寬度變化而變化，能夠適應大屏和小屏之間的顯示。
內(nèi)部字體無法跟隨變化大小
如果屏幕尺度跨度太大，那么在相對其原始設計而言過小或過大的屏幕上不能正常顯示。
阿里云網(wǎng)頁版在低于750px分辨率時采用流式布局方式。
流式布局在設計中使用頻率較少，在設計中需要注意寬度變化后導致的內(nèi)容高度變化，設計時可以考慮做一種最大寬度的效果和最小寬度的效果。
自適應布局
自適應布局是分別為不同的屏幕分辨率定義布局，即創(chuàng)建多個靜態(tài)布局，每個靜態(tài)布局對應一個屏幕分辨率范圍。改變屏幕分辨率可以切換不同的靜態(tài)局部（頁面元素位置發(fā)生改變），但在每個靜態(tài)布局中，頁面元素不隨窗口大小的調(diào)整發(fā)生變化。可以把自適應布局看作是靜態(tài)布局的一個系列。
在多個不同尺寸設備終端下查看網(wǎng)頁內(nèi)容，并且在小屏幕下也能保證相對好的閱讀體驗，對于不同的分辨率能夠靈活的進行操作應用
通過單一的URL地址收集所有的社交分享鏈接。你可以為創(chuàng)建更好、更友好的網(wǎng)站而做出積極貢獻。
設計工作量大，需要根據(jù)不用的頁面設計不同寬度的設計稿
頁面存在多個版本，每個版本都必須單獨更新。通常，設計師需要針對6種最常見的屏幕寬度進行設計。320、480、760、960、1200和1600dp。而且，這個數(shù)字還在不斷增長，這使得設計師在現(xiàn)場維護方面的工作變得更加艱辛和耗時。
Amazon在自己的頁面中使用了部分寬度自適應的方法，與使用自適應網(wǎng)頁設計的其他網(wǎng)站類似，亞馬遜更加鼓勵用戶下載其官方APP。據(jù)報道，通過采用自適應設計，亞馬遜移動端的訪問速度比以往的響應式網(wǎng)頁設計提高了40%。
對于UI設計師而言，一旦團隊確定使用自適應布局開發(fā)產(chǎn)品，就需要做多套設計稿尺寸。對于自適應布局而言，就是根據(jù)不同的頁面寬度加載不同的頁面。
常用的設計尺寸使用600, 840, 960, 1280, 1440, 和1600dp作為斷點，這里的斷點個數(shù)和尺寸可以根據(jù)實際情況靈活去變化，主要是根據(jù)目前終端所在的寬度進行選擇，例如產(chǎn)品目標用戶使用筆記本的數(shù)量多，可以將1366作為斷點。
響應式布局
隨著CSS3出現(xiàn)了
媒體查詢技術，又出現(xiàn)了
響應式設計的概念。響應式設計的目標是確保一個頁面在所有終端上（各種尺寸的PC、手機、手表、冰箱的Web瀏覽器等等）都能顯示出令人滿意的效果。
對CSS編寫者而言，在實現(xiàn)上不拘泥于具體手法，但通常是糅合了流式布局+彈性布局，再搭配媒體查詢技術使用?！謩e為不同的屏幕分辨率定義布局，同時，在每個布局中，應用流式布局的理念，即頁面元素寬度隨著窗口調(diào)整而自動適配。即：創(chuàng)建多個流體式布局，分別對應一個屏幕分辨率范圍?？梢园秧憫讲季挚醋魇橇魇讲季趾妥赃m應布局設計理念的融合。
響應式布局設計產(chǎn)品能夠給用戶帶來無縫的體驗感，無論使用哪種設備（臺式機，移動設備等），訪客都將獲得相同的無縫體驗。即使當它們從一種設備過渡到另一種設備時，也會給人一種熟悉和信任的感覺。
對于B端產(chǎn)品來說，跨終端辦公是今后的趨勢。那么響應式設計對于B端產(chǎn)品來說尤為重要，實現(xiàn)同一個頁面在pc和pad上都能夠流暢查看且操作。
響應式網(wǎng)頁設計最大的擔憂之一是加載時間。響應性網(wǎng)站會為所有設備加載信息，而不僅僅是訪問者正在查看您網(wǎng)站的設備信息。
要匹配足夠多的屏幕大小，工作量很大，設計也需要多個版本。
蘋果官網(wǎng)
與自適應一樣，對于UI設計師而言，一旦團隊確定使用響應式布局開發(fā)產(chǎn)品，就需要做多套設計稿尺寸。每套設計稿在不同尺寸下設計元素以及導航要發(fā)生相應變化，比如在寬度縮小到750，考慮設備為移動端，內(nèi)容在設計側考慮移動端規(guī)范，需要遵循移動端的導航與用戶習慣。
在實操過程中，我們需要更多分析競品以及采用響應式布局的其他產(chǎn)品頁面，并且能夠熟悉掌握各個終端的設計規(guī)范。
B端Ant系統(tǒng)的響應式介紹
目前有很多大廠商都出了自己的B端系統(tǒng)，如Arco、element。解讀響應式設計，大家可以根據(jù)需要尋找適合的案例，畢竟我們是要了解背后的規(guī)則，我在這里選擇了 AntDesign 的布局相關規(guī)范。
Ant design中，主要應用了兩種典型的適配布局形式，左右布局和上下布局，響應式規(guī)則主要作用在工作區(qū)中的內(nèi)容區(qū)域中。
在這個區(qū)域中，Ant 采用了 24 列柵格（Coloum）、23 列水槽（Gutter）的柵格系統(tǒng)。其中水槽數(shù)值是固定的，內(nèi)容區(qū)域減去 23 列間隔后，剩下的部分等分成 24 個格線。
柵格系統(tǒng)的基礎應用，就是對內(nèi)容模塊分配指定數(shù)值的 “列”，比如一個組件的寬包含 3 列、4列、或者 12列。也就是說，在同一行中，總共包含 24 列，橫向的元素按照設計師設計的大小比例平分這24列。
所以通過 Ant 的框架來完成 B 端頁面的響應式設計，就是創(chuàng)建好畫布以后，在需要響應式的區(qū)域創(chuàng)建出對應尺寸的24柵格系統(tǒng)，然后在該柵格體系內(nèi)定義寬高、間距即可，Ant 的框架會自動幫助我們完成響應的功能。
比如，一開始設計的頁面中，創(chuàng)建了 1440px 的畫布，使用左右布局的形式，左側使用 200px 寬的導航欄，導航欄采用固定布局，不參與柵格的計算區(qū)域。右側區(qū)域寬度為 1192px，間距為 8px，列寬就是 42px。
在這之后，內(nèi)部層次更低的表格、輸入框、標簽欄等元素也會對應實現(xiàn)響應的效果……
網(wǎng)頁設計策略
不同斷點間屏幕上的界面相互切換適應的策略有：展現(xiàn)、轉變、分割、重排、擴展和移位。
1、展現(xiàn)，小屏幕上隱藏的UI信息在屏幕增大時可以展現(xiàn)出來，如下圖所示本來隱藏在手機側邊導航中的菜單項在平板的左側直接顯示出來了。這一點也和以600為分界的策略相呼應，在更大的屏幕上直接顯示出兩級信息：
2、轉變，界面元素從一個組件變?yōu)榱硪粋€組件，這一點也說明組件的使用并不是一成不變的，可以根據(jù)屏幕的大小選擇合適的組件。如下圖所示，側邊導航的菜單項可能在大屏上顯示為標簽；小屏幕上的文字列表項可以在大屏上顯示為圖片網(wǎng)格列表：
3、分割，分層的信息在一個大的空間里鋪開：
4、重排，界面元素可以重新排布以填滿新的空間：
5、拓展，界面元素在大屏幕上展開為更大的尺寸：
6、移位，界面元素調(diào)整到更合適的位置：
總結
- 如果只做pc端，那么靜態(tài)布局（定寬度）是最好的選擇；
- 如果做移動端，且設計對高度和元素間距要求不高，那么彈性布局（rem+js）是最好的選擇。
- 如果pc，移動要兼容，而且要求很高那么響應式布局還是最好的選擇，前提是設計根據(jù)不同的高寬做不同的設計，響應式根據(jù)媒體查詢做不同的布局。
- 各種布局并不是單獨存在的，很多網(wǎng)頁都是幾種布局混著用。例如響應式網(wǎng)頁中會包含固定布局、流式布局。
在線咨詢