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