響應(yīng)式設(shè)計(jì)落地教程
編輯導(dǎo)語:響應(yīng)式設(shè)計(jì)成為主流設(shè)計(jì)趨勢(shì),為什么所有的web端都需要響應(yīng)式設(shè)計(jì),其目的是什么?作者從其實(shí)際角度出發(fā),分享響應(yīng)式設(shè)計(jì)思路及方法,供產(chǎn)品和設(shè)計(jì)同學(xué)參考。
響應(yīng)式設(shè)計(jì)概念自2010年提出以來,經(jīng)過十多年的發(fā)展與普及,在我國已經(jīng)有超30%的占有率,且正在以每年5%的速度,逐漸取代傳統(tǒng)靜態(tài)布局網(wǎng)頁。經(jīng)過斷斷續(xù)續(xù)近兩個(gè)月的時(shí)間,我把自己在多年產(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ì)之所以會(huì)成為主流趨勢(shì),是因?yàn)閺母骼嫦嚓P(guān)者角度,皆具有極大的優(yōu)勢(shì)。
從公司角度:一次開發(fā)成型,節(jié)省開發(fā)和運(yùn)維成本,同時(shí)能提升品牌一致性。
從產(chǎn)品角度:在不同的用戶設(shè)備上,保持一致性的使用體驗(yàn),輸出穩(wěn)定的產(chǎn)品價(jià)值。
從用戶角度:不限制設(shè)備,不限制使用時(shí)間和條件,使用更加便捷。
1.2 網(wǎng)頁布局設(shè)計(jì)的分類
按照網(wǎng)頁對(duì)分辨率的適配程度,把布局設(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)方法:前端寫幾套代碼對(duì)應(yīng)不同類型設(shè)備(如pc端、平板、手機(jī)),通過檢測(cè)視口分辨率,來判斷當(dāng)前訪問的是哪種設(shè)備,從而顯示對(duì)應(yīng)的代碼。
設(shè)計(jì)方案:先為每類設(shè)備分別出一套設(shè)計(jì),然后在一類設(shè)備的分辨率范圍內(nèi)指定元素的兼容方式;同一類設(shè)備的分辨率差異較小,因此兼容方式相對(duì)簡單。
C. 響應(yīng)式設(shè)計(jì)
實(shí)現(xiàn)方法:前端只寫一套代碼,通過媒體查詢,指定不同分辨率下頁面如何顯示。
設(shè)計(jì)方案:通常需要確定一套主設(shè)計(jì)方案,然后針對(duì)不同分辨率指定布局及元素的兼容方式。
注意:
①B和C中,自適應(yīng)和響應(yīng)式只是歸納叫法,后文中提到的前端布局方法并不一一對(duì)應(yīng)。做一個(gè)多分辨率適配產(chǎn)品時(shí),前端布局通常需要多種方法結(jié)合,比如最常見的自適應(yīng)+流式布局的結(jié)合。
②很多分享提到,響應(yīng)式設(shè)計(jì)是指“一套設(shè)計(jì)方案,適配所有設(shè)備”,這種說法并不完全正確。響應(yīng)式設(shè)計(jì)的核心是確保用戶體驗(yàn)一致,當(dāng)產(chǎn)品功能和交互較為復(fù)雜時(shí),設(shè)計(jì)師可能需要輸出多套設(shè)計(jì)方案。
1.3 各種布局的特點(diǎn)及適用范圍
通過以上分析,顯然不是所有的web端產(chǎn)品都需要響應(yīng)式設(shè)計(jì)。應(yīng)根據(jù)產(chǎn)品性質(zhì)、用戶設(shè)備、產(chǎn)品使用場(chǎng)景、公司資源(人力配置、時(shí)間預(yù)算、資金預(yù)算)等因素,合理選擇產(chǎn)品設(shè)計(jì)方案。
二、屏幕斷點(diǎn)
根據(jù)產(chǎn)品設(shè)計(jì)需要,人為地把屏幕分辨率劃分出多個(gè)臨界點(diǎn),這一系列臨界點(diǎn)被稱為屏幕斷點(diǎn)。
2.1 分辨率占比統(tǒng)計(jì)
下圖為百度統(tǒng)計(jì)的web端分辨率占比,可以看出占比較多的分辨率有:1920、1536、1366、1440、1600等。
下圖為百度統(tǒng)計(jì)的移動(dòng)端分辨率占比,可以看出占比較多的分辨率有:320、414、375、320等。
2.2 各大平臺(tái)制定的屏幕斷點(diǎn)
微軟的屏幕斷點(diǎn):
微軟設(shè)計(jì)文檔中,劃分的顆粒度較粗,僅將分辨率分為小、中、大三段。
Bootstrap的響應(yīng)式斷點(diǎn):
極小設(shè)備portrait phones(576px,默認(rèn))、小型設(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)用示例
以下這段代碼,通過媒體查詢的方式,指定了不同分辨率下字體大小的變化。這段代碼對(duì)應(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)。一般可通過用戶調(diào)研和市場(chǎng)調(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ù)實(shí)現(xiàn)的核心,可以總結(jié)出以下6種設(shè)計(jì)手法。
3.1 調(diào)整大小
3.2 重新定位
3.3 重新排列
3.4 顯示/隱藏
例如在移動(dòng)端,把一部分功能隱藏起來,并通過點(diǎn)擊以浮層等方式顯示。
3.5 替換
例如在移動(dòng)端,把導(dǎo)航菜單替換為漢堡菜單,把列表替換為卡片等。
3.6 改變架構(gòu)
例如在電腦端為左右布局,在移動(dòng)端改變?yōu)槎嗉?jí)頁面。
其中,前三種多用于屏幕斷點(diǎn)內(nèi)響應(yīng),后三種多用于屏幕斷點(diǎn)間響應(yīng)。
四、設(shè)計(jì)方案落地
4.1 擴(kuò)展策略
在設(shè)計(jì)方案實(shí)施過程中,通常先確定基準(zhǔn)分辨率,作為設(shè)計(jì)尺寸輸出設(shè)計(jì)方案,再擴(kuò)展到其他分辨率。分辨率擴(kuò)展時(shí)遵循的策略,一般有以下3種。
優(yōu)雅降級(jí):優(yōu)先考慮PC端,其核心是追求產(chǎn)品完美表達(dá),再降級(jí)適配到限制更大的移動(dòng)端設(shè)備;
漸進(jìn)增強(qiáng):優(yōu)先考慮移動(dòng)端,其核心是保證主要功能的完善性,再做增強(qiáng)擴(kuò)展,目前業(yè)界認(rèn)可度較高;
用戶設(shè)備優(yōu)先:這是我本人在工作中總結(jié)出的一種方法,針對(duì)自己的產(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)站中較為常見。
T型布局:
一般頂部為最高層級(jí)菜單或跳轉(zhuǎn)鏈接,左側(cè)為二級(jí)導(dǎo)航,同時(shí)也是核心業(yè)務(wù)相關(guān)的導(dǎo)航。一般用于B端后臺(tái)類產(chǎn)品、工具類產(chǎn)品、或架構(gòu)較為復(fù)雜的其他產(chǎn)品。
左右布局:
一般應(yīng)用于產(chǎn)品框架較為扁平,但導(dǎo)航層級(jí)較多的情況??膳c以上兩種布局互相轉(zhuǎn)換。
4.3 T型框架的響應(yīng)式設(shè)計(jì)過程
T型布局基本包含了其他兩種布局的屬性,故以T型布局為例,詳細(xì)介紹響應(yīng)式設(shè)計(jì)落地實(shí)操方法。
A. 框架層響應(yīng)
與設(shè)計(jì)分辨率對(duì)比,其他斷點(diǎn)的擴(kuò)展分別使用了以下方法:
- 較大分辨率——使用的自適應(yīng)手法:調(diào)整大?。?/li>
- 較小分辨率——使用的自適應(yīng)手法:調(diào)整大小、顯示/隱藏、替換;
- 更小分辨率——使用的自適應(yīng)手法:改變架構(gòu)、替換。
B. 內(nèi)容區(qū)響應(yīng)
①柵格布局:布局經(jīng)過嚴(yán)格計(jì)算,適合大部分B端后臺(tái)類頁面。
可以看出在柵格響應(yīng)式中,柵格的寬度、列數(shù),以及每塊元素所占的列數(shù),都會(huì)根據(jù)分辨率的變化而變化;通過媒體查詢的方式,定義每個(gè)斷點(diǎn)對(duì)應(yīng)的列數(shù)和元素所占的列數(shù);其核心依然是上面提到的6種方法。
②流式布局:內(nèi)容區(qū)是卡片式流,如圖片、視頻等。
這類布局中,卡片寬度用百分比表示,并設(shè)定最大最小尺寸,臨界寬度后改變個(gè)數(shù);外邊距寬度(圖中藍(lán)色部分)、內(nèi)邊距寬度(圖中橙色部分)根據(jù)設(shè)計(jì)表達(dá)需要,可以改變也可以固定。瀑布流等不規(guī)則布局,涉及到定位問題,但基本設(shè)計(jì)理念一致。
③針對(duì)斷點(diǎn)單獨(dú)設(shè)計(jì):應(yīng)用于對(duì)視覺表達(dá)要求極高,或布局不規(guī)律的頁面;本質(zhì)同自適應(yīng)布局原理。
4.4 設(shè)備差異化交互響應(yīng)
總結(jié)
在設(shè)計(jì)方案落地過程中,首先調(diào)研用戶使用的設(shè)備,據(jù)此制定出屏幕斷點(diǎn);篩選出一個(gè)典型的分辨率,在該分辨率下輸出設(shè)計(jì)方案;然后確定如何向其他斷點(diǎn)擴(kuò)展,最后形成一整套響應(yīng)式設(shè)計(jì)方案。
本文由 @周沫 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自Unsplash,基于CC0協(xié)議。
感謝分享,獲益良多
感謝認(rèn)可!