2020-8-21 資深UI設計者
今天分享一個很多設計師頭疼已久的問題，關于網(wǎng)頁響應式布局原理和設計方法。文章主要包含三個部分：
所以廢話不多說，我們直接進入正題吧！
在過去，網(wǎng)站通常就是為了電腦大屏幕展示而設計，如果用手機訪問，只能在巴掌大的屏幕里看縮小版的頁面。雖然還有手機專供的 WAP 頁面，但因為太簡陋也無濟于事。
隨著智能手機、3G、4G、HTML5 的普及，使用手機訪問網(wǎng)站的人越來越多，為了讓用戶在手機上看到更合適的布局，且兼顧開發(fā)的效率，響應式的概念就被提出了。
通俗解釋，就是通過一套代碼，可以無縫匹配符合電腦、平板、手機預覽效果的前端技術。比如下方 Nike 官網(wǎng)，就是應用了響應式設計后在不同客戶端、分辨率下的效果。
雖然響應式的應用越來越廣泛，但是從零開始去寫一個響應式效果的網(wǎng)站對于程序員來講是非常復雜的，因為當中包含了大量的邏輯、判斷、適配內(nèi)容。
所以，今天市面上看見的響應式網(wǎng)站，多數(shù)使用了一些開源的代碼或者框架。而應用最廣泛的，就數(shù) Bootstrap 了。
之所以提這個，是因為既然開發(fā)使用了別人寫的框架，那么對于我們的設計稿也就上了緊箍咒，我們需要根據(jù)框架的要求來設計界面，這會稍后具體解釋。
還有個問題，就是為了實現(xiàn)平板、手機和電腦不同的預覽效果，并不是只有響應式布局一種技術，還有另一種技術 —— 自適應。
通俗點說，自適應就是為不同客戶端分別提供一套獨立的前端代碼，和響應式使用一套代碼適配多種客戶端不同。
響應式適合應用在一些簡單的官網(wǎng)、展示類頁面，展示的內(nèi)容大致相同。而自適應適合應用在需要在不同客戶端類型有較大差異的網(wǎng)站，這樣只使用一套前端代碼就完全行不通了。
比如愛奇藝的官網(wǎng)，為了符合用戶體驗，在移動端網(wǎng)頁布局中精簡替換了大量的內(nèi)容，和電腦版已經(jīng)沒有太直接的聯(lián)系了。
兩種做法并沒有好壞之分，只有適不適合項目之別。了解了它們的不同，我們就可以進一步學習響應式的規(guī)則了。
響應式布局的規(guī)則并不是特別復雜，只要注意兩個問題：
1. 分段響應規(guī)則
敲黑板，響應式的響應，面向的核心對象是瀏覽器窗口的寬度，而不是設備類型。所以打開使用響應式的網(wǎng)站，我們通過改變?yōu)g覽器的寬度，就可以看見不同的展示效果，比如下圖的星巴克官網(wǎng)。
我們可以發(fā)現(xiàn)，瀏覽器寬度每達到一個數(shù)值（Breakpoint）的時候，頁面的排版和樣式就會發(fā)生明顯的變化，而這就是響應式設計最重要的功能 —— 分段展示。
也就是說，響應式規(guī)則就是為頁面分配不同的寬度區(qū)間，每個區(qū)間有各自展示的樣式，用來應對不同的場景和設備類型，常見的適配區(qū)間大致如下：
包含圖片截圖 320-800 ：移動端收集屏幕 800-1200：平板或上網(wǎng)本屏幕 1200-無窮：一般的電腦顯示器
面對分段式的布局、樣式變更，我們就要關注到底發(fā)生了哪些變化。總結(jié)起來，可以簡單的歸納成三種組件的調(diào)整：內(nèi)容增減、布局調(diào)整、樣式調(diào)整。
第一種，內(nèi)容增減。即部分模塊在不同的分段內(nèi)會有顯示和隱藏的狀態(tài)，尤其是一些網(wǎng)頁端的內(nèi)容覺得在小屏幕上展示會太多了，就在小屏幕場景中隱藏掉。
第二種，布局調(diào)整。主要是模塊的排列和順序發(fā)生變化，常見的就是模塊一行的列數(shù)發(fā)生改變。
第三種，樣式變更。即針對不同的分段設計完全不一樣的樣式，最多應用在導航欄的設計中，會為最小的分段使用 iOS 的 Tabbar 或安卓的 Menu 樣式。
所以，歸納起來，就是頁面針對不同的分段展示不同的結(jié)果，即頁面中的組件觸發(fā)了對應的變化類型。每個組件都可以應用不同的變化類型，而無需進行統(tǒng)一。
2. 組件寬度適應
分段式響應，是響應式布局的第一層邏輯。而在觸發(fā)關鍵值（Breakpoint） 之間的區(qū)間，我們拖動窗口的寬度，會發(fā)現(xiàn)組件的寬度也隨之改動，這就是 —— 組件寬度適應。
組件寬度適應在手機 UI 的適配中非常重要，即完成不同屏幕寬的手機適配所應用的邏輯，所下面我們簡單講講它的規(guī)則。
組件的寬度適應模式主要有兩種類型，一種是容器寬度適應，一種是容器比例縮放，比如下面的圖例。
容器是一個比較抽象的概念，類似設計軟件中的編組，它集合了所有下級元素，但本身并沒有實際的內(nèi)容和樣式。在響應式規(guī)則中，下級元素并不會和這個容器等比變動，出現(xiàn)下面這種錯誤的效果。
正確做法是會定義下級元素針對父容器的響應方法，做到容器變更的同時其自身的顯示也是合理的。比如相對容器左右間距一致、對齊方向一致、尺寸固定等設置。
而這種規(guī)則的設置，就是 Sketch/Figma/XD 中的響應式設置功能。只要設置得當，就可以獲得一樣的寬度適應效果。
如果對軟件響應式功能了解不全面的同學，就可以自己多搜索一下對應的說明，我就不在這里過多的展開了。
再總結(jié)一下，響應式的規(guī)則就是頁面組件先遵循當前分段展示的布局效果，并在這個區(qū)間內(nèi)支持小范圍寬度的變更和適應。
響應式設計是一種源自技術的概念，而不是單純的設計風格、方法，所以設計響應式設計其實就是 「面向編程設計」。
設計界面要吻合編程的真實方法和需求，而不是根據(jù)我們想怎么做就怎么做，所以整個流程不能只站在設計師自身的角度考慮，而要和前端程序員緊密溝通，首先確定響應幾個寬度區(qū)間，以及它們對應的數(shù)值分別是多少。
然后我們就要完成對應數(shù)量頁面的設計，因為前面我們說過，分段響應規(guī)則中會有明顯的樣式變動，這就要求設計師是一定要給出設計示例的，而不能依靠口頭描述或程序員自由發(fā)揮。
完成這些設計稿以后，我們再進一步確定同一個區(qū)間內(nèi)，組件的寬度適應規(guī)則是什么樣的。多數(shù)情況下，這個階段使用口述就可以，如果規(guī)則比較多，那么就可以在標注階段把你要實現(xiàn)的效果記錄上去即可。
全部設計稿和規(guī)則都溝通完畢以后，才進入切圖導出的階段。要提醒一次，在一些特殊的情況下，響應式的背景切圖會和普通頁面的背景切法不一樣，盡可能讓前端程序員檢查一遍導出的文件。
只要根據(jù)上述的流程，在遇到不確定或者不清楚的情況，就和前端程序員做溝通，那么很快就可以將項目輸出出來。
響應式這個概念雖然高大上，但并不是任何項目都要無腦往上套的。因為框架規(guī)則上的限制，導致我們很難在響應式頁面中使用一些特別復雜、高級的視覺樣式，導致最終呈現(xiàn)的效果往往非常簡單或者過度依賴圖片的質(zhì)量。
所以，如果在功能較為復雜或需要復雜視覺支撐的網(wǎng)頁中，就可以選擇應用固定頁面內(nèi)容寬度的設計來完成。
藍藍設計( m.bouu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務