響應(yīng)式設(shè)計(jì)落地教程

1、響應(yīng)式設(shè)計(jì)落地教程響應(yīng)式設(shè)計(jì)概念自2010年提出以來，經(jīng)過十多年的發(fā)展與普及，在我國已經(jīng)有超30%的占有率，且正在以每年5%的速度，逐漸取代傳統(tǒng)靜態(tài)布局網(wǎng)頁。經(jīng)過斷斷續(xù)續(xù)近兩個月的時間，我把自己在多年產(chǎn)品設(shè)計(jì)中積累的經(jīng)驗(yàn)，整理分享如下。本文將從實(shí)際應(yīng)用角度，介紹響應(yīng)式設(shè)計(jì)思路及方法，供產(chǎn)品和設(shè)計(jì)師同學(xué)參考。一、適用范圍是不是所有的web端產(chǎn)品都需要響應(yīng)式設(shè)計(jì)呢？且看分析。1.1 響應(yīng)式設(shè)計(jì)的意義響應(yīng)式設(shè)計(jì)之所以會成為主流趨勢，是因?yàn)閺母骼嫦嚓P(guān)者角度，皆具有極大的優(yōu)勢。從公司角度：一次開發(fā)成型，節(jié)省開發(fā)和運(yùn)維成本，同時能提升品牌一致性。從產(chǎn)品角度：在不同的用戶設(shè)備上，保持一致性的使用體驗(yàn)，輸出

2、穩(wěn)定的產(chǎn)品價值。從用戶角度：不限制設(shè)備，不限制使用時間和條件，使用更加便捷。1.2 網(wǎng)頁布局設(shè)計(jì)的分類按照網(wǎng)頁對分辨率的適配程度，把布局設(shè)計(jì)區(qū)分為三類。A. 固定布局設(shè)計(jì)實(shí)現(xiàn)方法：內(nèi)容寬度固定，布局不根據(jù)設(shè)備分辨率改變。設(shè)計(jì)方案：出一套設(shè)計(jì)方案，以像素做單位。B. 自適應(yīng)設(shè)計(jì)實(shí)現(xiàn)方法：前端寫幾套代碼對應(yīng)不同類型設(shè)備（如pc端、平板、手機(jī)），通過檢測視口分辨率，來判斷當(dāng)前訪問的是哪種設(shè)備，從而顯示對應(yīng)的代碼。設(shè)計(jì)方案：先為每類設(shè)備分別出一套設(shè)計(jì)，然后在一類設(shè)備的分辨率范圍內(nèi)指定元素的兼容方式；同一類設(shè)備的分辨率差異較小，因此兼容方式相對簡單。C. 響應(yīng)式設(shè)計(jì)實(shí)現(xiàn)方法：前端只寫一套代碼，通過媒體查

3、詢，指定不同分辨率下頁面如何顯示。設(shè)計(jì)方案：通常需要確定一套主設(shè)計(jì)方案，然后針對不同分辨率指定布局及元素的兼容方式。注意：B和C中，自適應(yīng)和響應(yīng)式只是歸納叫法，后文中提到的前端布局方法并不一一對應(yīng)。做一個多分辨率適配產(chǎn)品時，前端布局通常需要多種方法結(jié)合，比如最常見的自適應(yīng)+流式布局的結(jié)合。很多分享提到，響應(yīng)式設(shè)計(jì)是指“一套設(shè)計(jì)方案，適配所有設(shè)備”，這種說法并不完全正確。響應(yīng)式設(shè)計(jì)的核心是確保用戶體驗(yàn)一致，當(dāng)產(chǎn)品功能和交互較為復(fù)雜時，設(shè)計(jì)師可能需要輸出多套設(shè)計(jì)方案。1.3 各種布局的特點(diǎn)及適用范圍通過以上分析，顯然不是所有的web端產(chǎn)品都需要響應(yīng)式設(shè)計(jì)。應(yīng)根據(jù)產(chǎn)品性質(zhì)、用戶設(shè)備、產(chǎn)品使用場景、公

4、司資源（人力配置、時間預(yù)算、資金預(yù)算）等因素，合理選擇產(chǎn)品設(shè)計(jì)方案。二、屏幕斷點(diǎn)根據(jù)產(chǎn)品設(shè)計(jì)需要，人為地把屏幕分辨率劃分出多個臨界點(diǎn)，這一系列臨界點(diǎn)被稱為屏幕斷點(diǎn)。2.1 分辨率占比統(tǒng)計(jì)下圖為百度統(tǒng)計(jì)的web端分辨率占比，可以看出占比較多的分辨率有：1920、1536、1366、1440、1600等。下圖為百度統(tǒng)計(jì)的移動端分辨率占比，可以看出占比較多的分辨率有：320、414、375、320等。2.2 各大平臺制定的屏幕斷點(diǎn)微軟的屏幕斷點(diǎn)：微軟設(shè)計(jì)文檔中，劃分的顆粒度較粗，僅將分辨率分為小、中、大三段。Bootstrap的響應(yīng)式斷點(diǎn)：極小設(shè)備portrait phones（576px，默認(rèn)）、

5、小型設(shè)備landscape phones（576px）、中型設(shè)備tablets（768px）、大型設(shè)備desktops（992px）、超大設(shè)備large desktops（200px）。Ant design 的屏幕斷點(diǎn)：屏幕斷點(diǎn)劃分為320、576、768、992、1200。2.3 斷點(diǎn)的應(yīng)用示例以下這段代碼，通過媒體查詢的方式，指定了不同分辨率下字體大小的變化。這段代碼對應(yīng)的布局方案中，屏幕斷點(diǎn)是1024，1100，1280，1366，1440，1680，1920。通過以上可以看出，屏幕斷點(diǎn)并不是固定的。在產(chǎn)品設(shè)計(jì)中，可參考成熟設(shè)計(jì)規(guī)范中的斷點(diǎn)，也可根據(jù)實(shí)際需要定義自己的屏幕斷點(diǎn)。一般可通過

6、用戶調(diào)研和市場調(diào)研，確定目標(biāo)用戶所使用的主要設(shè)備，以此來定義屏幕斷點(diǎn)。三、自適應(yīng)設(shè)計(jì)的實(shí)現(xiàn)方法從實(shí)現(xiàn)技術(shù)角度，彈性布局、自適應(yīng)布局、流式布局、響應(yīng)式布局、網(wǎng)格布局，為多端適配提供了可能性。這部分前端開發(fā)的知識，感興趣的同行可自行了解。從技術(shù)實(shí)現(xiàn)的核心，可以總結(jié)出以下6種設(shè)計(jì)手法。3.1 調(diào)整大小3.2 重新定位3.3 重新排列3.4 顯示/隱藏例如在移動端，把一部分功能隱藏起來，并通過點(diǎn)擊以浮層等方式顯示。3.5 替換例如在移動端，把導(dǎo)航菜單替換為漢堡菜單，把列表替換為卡片等。3.6 改變架構(gòu)例如在電腦端為左右布局，在移動端改變?yōu)槎嗉夗撁?。其中，前三種多用于屏幕斷點(diǎn)內(nèi)響應(yīng)，后三種多用于屏幕斷點(diǎn)

7、間響應(yīng)。四、設(shè)計(jì)方案落地4.1 擴(kuò)展策略在設(shè)計(jì)方案實(shí)施過程中，通常先確定基準(zhǔn)分辨率，作為設(shè)計(jì)尺寸輸出設(shè)計(jì)方案，再擴(kuò)展到其他分辨率。分辨率擴(kuò)展時遵循的策略，一般有以下3種。優(yōu)雅降級：優(yōu)先考慮PC端，其核心是追求產(chǎn)品完美表達(dá)，再降級適配到限制更大的移動端設(shè)備；漸進(jìn)增強(qiáng)：優(yōu)先考慮移動端，其核心是保證主要功能的完善性，再做增強(qiáng)擴(kuò)展，目前業(yè)界認(rèn)可度較高；用戶設(shè)備優(yōu)先：這是我本人在工作中總結(jié)出的一種方法，針對自己的產(chǎn)品，如果可確定目標(biāo)用戶使用的設(shè)備中，某分辨率占比較多，我們可以以此為基準(zhǔn)分辨率進(jìn)行設(shè)計(jì)，再向其他分辨率擴(kuò)展。4.2 三種典型頁面框架上下布局：頂部為導(dǎo)航，導(dǎo)航以下為內(nèi)容區(qū)。在C端產(chǎn)品或內(nèi)容型網(wǎng)

8、站中較為常見。T型布局：一般頂部為最高層級菜單或跳轉(zhuǎn)鏈接，左側(cè)為二級導(dǎo)航，同時也是核心業(yè)務(wù)相關(guān)的導(dǎo)航。一般用于B端后臺類產(chǎn)品、工具類產(chǎn)品、或架構(gòu)較為復(fù)雜的其他產(chǎn)品。左右布局：一般應(yīng)用于產(chǎn)品框架較為扁平，但導(dǎo)航層級較多的情況?？膳c以上兩種布局互相轉(zhuǎn)換。4.3 T型框架的響應(yīng)式設(shè)計(jì)過程T型布局基本包含了其他兩種布局的屬性，故以T型布局為例，詳細(xì)介紹響應(yīng)式設(shè)計(jì)落地實(shí)操方法。A. 框架層響應(yīng)與設(shè)計(jì)分辨率對比，其他斷點(diǎn)的擴(kuò)展分別使用了以下方法：較大分辨率使用的自適應(yīng)手法：調(diào)整大小；較小分辨率使用的自適應(yīng)手法：調(diào)整大小、顯示/隱藏、替換；更小分辨率使用的自適應(yīng)手法：改變架構(gòu)、替換。B. 內(nèi)容區(qū)響應(yīng)柵格布局：布局經(jīng)過嚴(yán)格計(jì)算，適合大部分B端后臺類頁面?？梢钥闯鲈跂鸥耥憫?yīng)式中，柵格的寬度、列數(shù)，以及每塊元素所占的列數(shù)，都會根據(jù)分辨率的變化而變化；通過媒體查詢的方式，定義每個斷點(diǎn)對應(yīng)的列數(shù)和元素所占的列數(shù)；其核心依然是上面提到的6種方法。流式布局：內(nèi)容區(qū)是卡片式流，如圖片、視頻等。這類布局中，卡片寬度用百分比表示，并設(shè)定最大最小尺寸，臨界寬度后改變個數(shù)；外邊距寬度（圖中藍(lán)色部分）、內(nèi)邊距寬度（圖中橙色部分）根據(jù)設(shè)計(jì)表達(dá)需要，可以改變也可以固定。瀑布流等不規(guī)則布局，涉及到定位問題，但基本設(shè)計(jì)理念一致。針對斷點(diǎn)單獨(dú)