2020-12-15 濤濤
頁面布局是頁面設計的一部分，我們不僅要處理頁面上視覺元素的布局與排列，還要考慮這些元素在不同大小的屏幕上的適配問題。
頁面布局不僅僅是前端同學要考慮的問題，也是設計同學要重點關注的；怎樣的布局能更好的展示頁面內容同時兼容不同屏幕的大小呢？不同的布局形式下，設計師要著重考慮哪些點呢？今天就來探討下這個問題。
固定布局（Fixed Layout）：網頁上所有的元素寬度以像素（px）為單位。例如，直接設定網頁的主體部分寬度為960px/1200px，某個搜索框寬度為60px等等。這種布局具有很強的穩定性與可控性，缺點也顯而易見，即不能根據用戶的屏幕尺寸做出不同的表現。當前，大部分門戶網站、新聞資訊類網站、企業的PC宣傳站點都采用了這種布局方式。
PC：大多采用居中布局，所有樣式使用絕對寬度/高度(px)，設計一稿合適的尺寸就可以，在屏幕寬高縮小時，使用橫向和豎向的滾動條來查閱被遮掩部分；如果大于這個寬度則內容居中，填加背景寬度。頁面的模塊、彈窗、間距等都是固定尺寸，需要設計補充的頁面規約比較少。
優勢：這種布局方式對設計師來說是最簡單的，跟動態布局相比，能夠更好地控制頁面的美觀度，排版穩定，在窗口拉伸過程中規避了內容重疊或者不規則的情況，仍保持原始比例，靜態位置和內容樣式。
劣勢：顯而易見，即不能根據用戶的屏幕尺寸做出不同的表現，對于超大屏和超小屏用戶不友好。
知乎網頁端：
微博網頁端：
流式布局（Liquid）的特點是頁面元素的寬度按照屏幕分辨率進行適配調整，但整體布局不變。
流式布局也叫也叫百分比布局，是移動端開發中經常使用的布局方式之一。元素的寬度按照屏幕分辨率自動進行適配調整，保證當前屏幕分辨率發生改變的時候，頁面中的元素大小也可以跟著改變。
流布局與固定寬度布局基本不同點 就在于對網站尺寸的側量單位不同。固定寬度布局使用的是像素，但是流布局使用的是百分比，這位網頁提供了很強的可塑性和流動性。把元素的寬,高,邊距,間距不再用固定數值,改用百分比,這樣元素的高,間距會根據頁面的尺寸隨時調整，以達到適應當前頁面的目的。屏幕分辨率變化時，頁面里元素的大小會變化而但布局不變。
* 百分比是基于元素父級的大小計算得來的；* 元素的水平或者豎直間距都是相對于父級的寬度計算的.* 邊框不能用百分比設置
網頁中主要的劃分區域的尺寸使用百分數（搭配寬度最大值、最小值屬性使用），例如，設置網頁主體的寬度為80%，最小寬為960px，（最小寬也就是保證頁面內容不會錯亂的情況下的寬度，到達最小寬度后，不再適應，出滾動條）圖片也作類似處理（寬度:100%, 最大寬一般設定為圖片本身的尺寸，防止被拉伸而失真）。
注意：
寬度自適應，但是里面的圖標、字體等也是固定大小的，并不是所有的東西都是自適應的。一些大的圖片，設置寬度為百分比自適應即可，隨著屏幕大小進行變化,對于小圖標或者文本等, 一般都是固定寬高大小。
同時考慮到頁面具體模塊、彈窗、字段等在最小寬度下的顯示，比如給出字段最小寬度，在最小寬度顯示不下時如何處理。可以參考阿Zi之前的文章：https://www.zcool.com.cn/article/ZMTE5NDAzNg==.html
在網頁布局中，我們通過設置元素的寬高定義元素的顯示大小，但是，在不同窗口大小，不同分辨率下，寬高相同的元素顯示狀況是不同的。所以，我們往往需要元素的大小能夠根據窗口或子元素自動調整以達到自適應。沒錯，在頁面設計中，自適應的規則往往是需要設計補充的最多的。
因為阿Zi所在公司的管理系統是采用左側導航欄固定，右側內容區自適應的流式布局，所以舉幾個實際工作中的應用的規約例子：
a.彈窗自適應
b.模塊、卡片自適應
一種是當頁面橫向拉伸時，卡片里內容個數不變，布局不變。可以把寬度均分成幾塊，然后內容在模塊內居中，給出最小寬度；如下，設定單個最小寬100px，如到達最小寬度后顯示不全，出現橫向滾動條；更靈活的情況就是收縮時內容/區塊布局變動的。同樣要設置區塊最小寬；向右自適應—橫向排序，右側不夠則折行；最小寬度平均分成均等份，剩余寬度均分到其他列。
據統計，PC端用戶的主流分辨率主要為 1920、1440 和 1366，個別系統還存在 1280 的顯示設備。有些情況下不太好控制內容自適應，那么就需要出2，3套尺寸的設計稿來適配。可以根據具體情況判斷系統是否需要進行適配，以及哪些區塊需要考慮動態布局，哪些時候出多套尺寸。
優勢：流式布局一般用于解決類似的設備不同分辨率之間的兼容(一般分辨率差異較少)
劣勢：因為寬度使用%百分比定義，但是高度和文字大小等大都是用px來固定，所以在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，顯示不協調。
兩欄
常見的做法是將左邊的導航欄固定，對右邊的工作區域進行動態縮放。
兩欄的左側固定寬欄框大多在40到300范圍（適用于左側導航、篩選的情況）。
舉例：
Ant Design
三欄
在特殊場景下，左側會有雙重左欄的情況，適用與一級導航簡單，二級導航復雜的頁面。
舉例：Teambition
還有兩側固定，中間自適應的布局，有圣杯布局和雙飛翼布局。圣杯布局來源于文章In Search of the Holy Grail，而雙飛翼布局來源于淘寶UED。雖然兩者的實現方法略有差異，但是視覺上都差不多，就是三欄，然后左右兩邊寬度固定，中間寬度自適應。
還有瀑布流布局也是流式布局的一種。是當下比較流行的一種網站頁面布局，視覺表現為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數據塊并附加至當前尾部。最早采用此布局的網站是Pinterest，逐漸在國內流行開來。
優點
1.有效的降低了界面復雜度，節省了空間；
2.對觸屏設備來說，交互方式更符合直覺：在移動應用的交互環境當中，通過向上滑動進行滾屏的操作已經成為最基本的用戶習慣，而且所需要的操作精準程度遠遠低于點擊鏈接或按鈕。
3.更高的參與度：以上兩點所帶來的交互便捷性可以使用戶將注意力更多的集中在內容而不是操作上，從而讓他們更樂于沉浸在探索與瀏覽當中。
缺點
1.有限的應用場景：無限滾動的方式只適用于某些特定類型產品當中一部分特定類型的內容。
例如，在電商網站當中，用戶時常需要在商品列表與詳情頁面之間切換，這種情況下，傳統的、帶有頁碼導航的方式可以幫助用戶更穩妥和準確的回到某個特定的列表頁面當中。
2.關于頁面數量的印象：其實站在用戶的角度來看，這一點并非負面;不過，如果對于你的網站來說，通過更多的內容頁面展示更多的相關信息(包括廣告)是很重要的策略，那么單頁無限滾動的方式對你并不適用。
3.關于精準定位：無限滾動加載讓用戶很難精準定位到某一模塊。
舉例：pinterest
響應式布局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。響應式布局能使網站在手機和平板電腦上有更好的瀏覽體驗，也就就是說一個網站能后兼容多個終端，而不是為了每一個終端做一個特定的版本。
響應式布局意味著，無論用戶是在iPhone還是筆記本電腦上查看網站，都應該能夠訪問所需的內容，擁有一致的用戶體驗，這就要求UX/UI設計人員考慮的問題更多，同時考慮到網站和移動設備的場景，忽略這些肯定會阻礙網站或移動應用程序的用戶體驗。
接下來從響應式設計的特點著手，展開下設計師需要了解和注意的點。
CSS斷點是響應式網站的經典特征。他們的工作是根據屏幕大小將設計“分解”為較小的網站版本。斷點通常具有最小和最大寬度，這些寬度決定了用戶可以看到哪個版本的設計。
但是，一個網站需要多少個斷點才能真正響應？如果設備不適合最小或最大寬度，則網站設計仍然看起來很奇怪，這違背了創建響應式設計的全部目的。
尼克·巴比奇（Nick Babich）指出，大多數響應式網站都需要至少三個或四個斷點才能正常工作。根據縮放的大小，內容將相應地進行調整。斷點通常針對移動設備，平板電腦和臺式機視圖進行細分，盡管您可以擁有更多的斷點，以便涵蓋所有基礎，以提高設備的靈活性。許多設計師還包括“較小”的斷點，這些內容在內容中會自行調整以保持設計的視覺平衡，但不會發生大的變化。這包括更改字體大小之類的內容，但不包括一般結構。
圖像在任何網站中都非常重要，無論是高分辨率照片還是自定義插圖。那里的一些設計師相信裁剪圖像，以便用戶只能在較小的屏幕上看到圖像的一部分，因此視覺效果保持不變。對于我們而言，最好的方法是使用矢量圖像。
對于許多設計團隊而言，最好首先關注最小的屏幕來開始設計。這主要是因為通過將移動設計放在首位，團隊可以對內容的去向有一個很好的了解。
響應式設計圍繞內容，假設你采用建議的“移動設備優先”方法，則意味著您應該為移動設備分配重要內容的優先級，并隨著屏幕尺寸的增加添加更多內容。
當涉及到響應式設計時，與常規設計相對應的只是關注內容。因此，通過首先創建移動版本，我們可以縮小從一開始就需要顯示的關鍵內容（用戶絕對需要的部分）的范圍。從那里，我們可以在進入更大的屏幕時添加更多的細節和更多的內容，或者找到更好的方式來顯示關鍵內容。
1）注意視覺層次，從最小寬度的斷點開始
這建議從最小的屏幕分辨率開始的原因有關。這不僅是要了解內容的哪些部分絕對重要，還在于了解呈現這些內容的最佳方法。
當網站在不同的斷點切換時，網站的視覺層次結構可能必須適應，從某種意義上說，它需要適應屏幕尺寸的變化，為了保持產品的可用性，組件也必須適應。
如上所述，在響應式網頁設計中使用的每個斷點都將有一個最小寬度和一個最大寬度。當使用移動優先的方法設計，一個好的經驗法則就是可以從你的三個斷點的每個最小寬度開始設計。這樣，您將為較小的設備設計屏幕，并在屏幕變大時添加更多內容和UI元素。請記住：向上拓展而不是向下縮放，向上拓展總是容易的。
對于基于Web的產品，按鈕可能非常簡單。畢竟，光標是幾乎任何人都可以使用的準確工具，但我們的手指說的不一樣。所討論的手指的大小可能因用戶而異，并且設計人員需要考慮移動屏幕上的可用空間很小。
根據Apple的《人機界面指南》，平均手指輕觸為44×44像素。為了提高可用性，請確保針對此平均值對按鈕和可點擊區域進行適當調整。
如果您依賴導航欄作為查找信息的主要方式，則需要在移動設計中仔細確定導航欄的優先級。該產品的各個方面（例如導航設計）絕對至關重要，需要在響應迅速的網站中進行仔細計劃。隨著設備屏幕的變小，該導航欄的空間將越來越小。
那么像這些問題就需要我們重點考慮：什么時候隱藏導航選項？全部隱藏嗎？首先隱藏哪些？
常用的做法是，將導航、頭部搜索、用戶信息等內容隱藏在按鈕后面，例如我們在手機上經常能看到的漢堡菜單。的確，漢堡菜單并不是唯一的選擇，但不可否認的是，整個導航菜單都需要隱藏在智能手機中。
這就是要嘗試確定整個產品中最重要的頁面，并確保無論使用哪種設備，用戶都可以找到它們。在設計過程中盡早完成此優先級設置總是最好的，因此，如果我們從移動設計入手，我們將已經需要包含一些重要的內容。
優勢：
a.用戶體驗友好
隨著電腦尺寸多元化，智能設備（pad/智能手機）普及化，在當下追求用戶體驗至上的時代，網站普遍使用固定的寬度逐漸滿足不了現在不同設備與不同分辨率需求。在高分辨率電腦寬屏顯示器上，兩邊留白過多。在手機上顯示，內容顯示過小，用戶為了看清楚，首先需要放大界面，再左右拖拖界面。響應式網站可以根據不同終端、不同尺寸和不同應用環境，自動調整界面布局、展示內容、內容大小，提供非常好視覺展示效果，一致性友好體驗。
b.提高轉換率和銷量
響應式網站意味著您無需在網站設置跳轉，從而極大完善了用戶體驗，這也是響應式網站的最大優勢所在。另外，使用集成式設計和CSS表單一類的功能使網站無論在何種設備上都能營造出風格一致的感覺和外觀。若熟悉這種布局，用戶可以在任何設備上輕松瀏覽您的網站，進而提高轉換率。
c.節省開發投入
摒棄傳統網站，選擇響應式網頁，單從開發階段就節省大量時間和金錢。為不同的設備同時開發多個網站，意味著后期也需要更多的開發支持費用和維護成本。
d.三站合一，維護簡單
電腦、手機、微信三個網站使用的是同一個網址，同一個后臺管理，數據同步更新，所有圖片和內容只需要上傳更新一次即可，維護簡單輕松。
劣勢：
a.設計與風格有局限性
雖然響應式布局擁有如此顯著的優點，但它也并不是十全十美的，在很多方面，它也有它自身的局限性：
自由度太低，局限性較大，這種情況就是必須兼顧移動端以及PC端的表現，比如最常見的移動端并沒有懸停效果，PC端就要酌情考慮了。需要考慮在手機，pad，PC上三種屏幕下的頁面內元素的呈現，會導致有著非常大的局限。
b.對IE老板兼容性不友好
對于老版本IE（IE6、IE7、IE8）支持不好，這是一個致命的問題，如果你的網站用戶大多還采用老版本IE的話，建議不做響應式網頁設計。
c.靈活性有所欠缺
基于不同終端的設備屬性不同，對產品用戶體驗要求就會截然不同。內容比較多帶有功能性的網站不適合做響應式網站設計，如：電商類型網站，寬屏的pc端內容如果全部要在手機端進行展示，勢必導致手機端的界面非常長，需要根據手機端屬性進行重新信息框架設計，這樣對響應網站要求非常高，實現難度與成本非常高。但是大型網站為了提高用戶體驗，通常做法，把高分辨率寬屏網站最小的響應尺寸響應到1024px，不再適配手機端，手機端重新設計開發一套手機網站，簡單理解為2.5響應，如：電商網站亞馬遜、Calvin Klein、Nike、視頻網站Youtube，等。
d.速度可能會變慢
由于響應式頁面是同時下載多套CSS樣式代碼，可能在手機上就下載PC、Pad的冗余代碼，導致文件變大，影響加載速度。
根據響應式網站的優缺點，我們不難看出：企業官網、單頁宣傳網站非常適合做響應式網站設計，由于它們的界面內容比較少，結構比較簡單，所以在不同終端、不同尺寸設備上進行網站信息框架調整、內容加減、圖片、文字、柵格響應比較容易。內容比較多帶有功能性的網站不適合做響應式網站設計。
示例1----Dribbble
在1960-2048的屏幕下，顯示5列內容
在950-1330-1960屏幕下顯示3到4列
在500-620-950尺寸下顯示1-2列布局，并且把頭部主導航、搜索框、用戶設置等內容收起到到左上角菜單：
示例2----Event Apart
互動設計會議Event Apart創造了從其主要網站到其移動網站的無縫過渡。
他們選擇在大多數平臺上保持大多數相同的布局，平板電腦版本與臺式機相同，并且可以使用。這是因為他們為清晰起見選擇在白色背景上以粗體顯示內容，并且在調整大小時，可以輕松滾動信息。
唯一真正的變化是，對于移動版本，頂部的面包屑折疊成一個漢堡菜單，并用“菜單”一詞明確指示。
示例3----Popular Science
無論使用哪種設備，Popular Science都能為您帶來出色的用戶體驗。
正如您所期望的那樣，內容處于中心位置，并且具有響應式圖像和簡潔的版式，Popular Science成功地創建了易于閱讀和使用的響應式網站。本網站上的信息以一種可以在各種設備上輕松按比例縮小其所有內容的方式顯示。
最后
雖然目前響應式設計的模式的普及還是有很多難題需要突破：比如響應式的圖片、跨端交互、更高的性能、全新的合作流程等等。但是隨著科技不斷發展，響應技術逐漸完善，給響應式設計提供強有力的技術支持；響應式設計可以在不同終端提供完美展示效果與友好的用戶體驗，吻合用戶體驗至上的趨勢。所以說，響應式設計必定是未來發展趨勢。
藍藍設計( www.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務