Web端響應(yīng)式設(shè)計規(guī)范
時間：2023-06-02 18:30:01 | 來源：網(wǎng)站運(yùn)營
時間：2023-06-02 18:30:01 來源：網(wǎng)站運(yùn)營
Web端響應(yīng)式設(shè)計規(guī)范：Web端網(wǎng)頁設(shè)計分辨率現(xiàn)狀
| 分辨率 | 市場占比 | 分辨率 | 市場占比 |
| 1920*1080 | 40.75% | 1536*864 | 5.88% |
| 1366*768 | 12.99% | 1024*768 | 4.51% |
| 1440*900 | 9.01% | 1280*720 | 4.03% |
| 1600*900 | 6.04% | 其他 | 16.79% |
Web端不同屏幕分辨率占比情況，數(shù)據(jù)來源百度統(tǒng)計（圖一）
移動端不同屏幕分辨率占比情況，數(shù)據(jù)來源百度統(tǒng)計（圖二）
常用網(wǎng)頁設(shè)計尺寸，Photoshop cc2020新建文檔-web（圖三）
結(jié)合百度統(tǒng)計分辨率占比情況（圖一、圖二），我們來看Photoshop新建文檔的web尺寸模版（圖三），可以說Photoshop相當(dāng)良心，詳細(xì)的展示了常規(guī)設(shè)備所涉及到的網(wǎng)頁尺寸，把設(shè)計師疑慮的尺寸問題統(tǒng)統(tǒng)解決了。對于設(shè)計師而言，只需專注內(nèi)容創(chuàng)作即可。那么問題來了，要滿足全站響應(yīng)，對于我們設(shè)計師而言，是不是（圖三）中涉及的所有尺寸都要各出一套視覺稿呢？算一下至少也得七八套，這工作量對于設(shè)計師而言豈不是超級大？估計設(shè)計師得瘋了吧。當(dāng)然，原則上要滿足各終端像素級別的還原，肯定是產(chǎn)出更多套設(shè)計稿，對前端小哥哥在開發(fā)時的參考價值越高，還原度自然也會越完美。
但穩(wěn)住，別慌！以我搬磚十余年的付出，可以負(fù)責(zé)任的告訴你：不需要產(chǎn)出這么多套設(shè)計稿！??！不管是從投入成本（不為老板節(jié)約成本的設(shè)計師，不是好的美工～），還是從技術(shù)實(shí)現(xiàn)層面都不需要。那具體是幾套呢？別著急，先讓我們從設(shè)計師的角度，簡單了解下網(wǎng)頁設(shè)計中網(wǎng)頁布局的主要方式吧。（ps：歡迎路過的技術(shù)大牛留下更專業(yè)的解答）
網(wǎng)頁設(shè)計中網(wǎng)頁布局的主要方式
靜態(tài)布局
即傳統(tǒng)網(wǎng)頁設(shè)計模式，只需做一套尺寸的設(shè)計稿（比如1280*800px），一旦設(shè)備分辨率寬度小于1280px，則出現(xiàn)橫向滾動條，一旦設(shè)備分辨率寬度大于1280px，則內(nèi)容居中顯示，兩邊留白。（常見于新聞類、電商類、政府類網(wǎng)頁），這種布局方式對設(shè)計師和前端而言是最簡單的。
自適應(yīng)布局
可以把自適應(yīng)布局看作是靜態(tài)布局的一個系列。自適應(yīng)布局的特點(diǎn)是為不同的屏幕分辨率定義固定布局，即創(chuàng)建多個靜態(tài)布局。一個靜態(tài)布局對應(yīng)一個屏幕分辨率，改變屏幕分辨率可以切換不同的靜態(tài)局部，但頁面元素不隨窗口大小的調(diào)整發(fā)生變化。簡而言之就是需要自適應(yīng)幾個終端，就需要出幾套尺寸的設(shè)計稿。（設(shè)計師得哭了～）
彈性布局
以百分比作為頁面的基本單位，可以適應(yīng)一定范圍內(nèi)所有尺寸的設(shè)備屏幕及瀏覽器寬度，并能完美利用有效空間展現(xiàn)最佳效果。
混合式布局
混合式布局就是為不同終端設(shè)備的屏幕分辨率定義布局（適配各種尺寸的PC、手機(jī)、穿戴設(shè)備等等），在每個布局中，頁面元素隨著窗口調(diào)整而自動適配，混合了百分比、像素為基本單位的組合方式?？梢园鸦旌鲜讲季挚醋魇菑椥圆季?、自適應(yīng)布局的融合。簡而言之就是只需要一套設(shè)計稿適應(yīng)多個終端。（設(shè)計師的福音啊～）
自適應(yīng)布局、彈性布局、混合布局都是響應(yīng)式布局方式的一種。其中自適應(yīng)布局的實(shí)現(xiàn)成本最低，但拓展性比較差；而彈性布局與混合布局效果都是比較理想的響應(yīng)式布局實(shí)現(xiàn)方式。很多時候，單一方式的布局響應(yīng)無法滿足理想效果，需要結(jié)合多種組合方式，但原則上盡可能是保持簡單輕巧，而且同一斷點(diǎn)內(nèi)（發(fā)生布局改變的臨界點(diǎn)稱之為斷點(diǎn)，后面內(nèi)容會講到）保持統(tǒng)一邏輯，否則頁面實(shí)現(xiàn)太過復(fù)雜也會影響整體體驗(yàn)和頁面性能。一般通欄、等分結(jié)構(gòu)的布局適合采用彈性布局方式，非等分的多欄結(jié)構(gòu)布局則需要采用混合布局的實(shí)現(xiàn)方式。
我所接觸的網(wǎng)站項目幾乎也都是響應(yīng)式開發(fā)，顯然響應(yīng)式已成為網(wǎng)頁設(shè)計的標(biāo)配，而不是什么奢侈品。所以，牢牢掌握響應(yīng)式布局設(shè)計規(guī)范也是極為必要的。
響應(yīng)式網(wǎng)頁設(shè)計的基準(zhǔn)尺寸
了解了網(wǎng)頁設(shè)計的布局方式，再回到前面的疑問“以哪個尺寸進(jìn)行設(shè)計？”的答案自然就有了，實(shí)際上設(shè)計師只需出一套尺寸的設(shè)計稿給到前端小哥哥響應(yīng)適配就夠了，但考慮到web端和移動端的交互方式有所區(qū)別，且不同段位的前端小哥哥執(zhí)行力也不同，為了確保不出現(xiàn)特別大的差異，我們團(tuán)隊的做法都是設(shè)計以下兩套基準(zhǔn)尺寸，再給到前端進(jìn)行全站響應(yīng)。
web端基準(zhǔn)尺寸：1920*1080px這里在設(shè)計時又分兩種形式，一種是以1920px全寬尺寸進(jìn)行設(shè)計（常見于個性化網(wǎng)頁設(shè)計），一種是內(nèi)容控制在以1200px為寬度尺寸的安全范圍內(nèi)進(jìn)行設(shè)計。具體用那種形式，可根據(jù)實(shí)際項目情況而定，兩種形式僅僅是視覺效果不同。移動端基準(zhǔn)尺寸：750*1334px（375*667px @1）
該尺寸滿足了移動端不同尺寸的響應(yīng)效果，設(shè)計規(guī)范遵循移動端設(shè)計規(guī)范，關(guān)于移動端設(shè)計規(guī)范可查看我的上一篇文章《也許是2020年全網(wǎng)最全的關(guān)于iOS、Android設(shè)計規(guī)范、適配總結(jié)文章》
知識點(diǎn)拓展：移動優(yōu)先原則- 優(yōu)先移動端設(shè)計，有利于產(chǎn)品核心功能價值的凸顯，web端界面能承載的內(nèi)容較多，許多次要功能也會被加進(jìn)來，如果優(yōu)先web端，產(chǎn)品策略思考上會不夠聚焦。因此，我們在進(jìn)行產(chǎn)品設(shè)計時，都習(xí)慣優(yōu)先移動端設(shè)計，再進(jìn)行大尺寸的設(shè)計，加法原則，也符合產(chǎn)品的迭代思路。
- 開發(fā)過程也是移動設(shè)備優(yōu)先原則。（圖四）
移動設(shè)備優(yōu)先，截圖于Bootstrap網(wǎng)站（圖四）
設(shè)計稿響應(yīng)式工作原理
當(dāng)終端設(shè)備分辨率達(dá)到每一個最小寬度（也稱為臨界值或斷點(diǎn)，圖五），就會觸發(fā)該寬度下預(yù)設(shè)的頁面布局進(jìn)行最佳顯示，這就是響應(yīng)式的工作原理。
響應(yīng)式斷點(diǎn)邏輯，截圖于Bootstrap網(wǎng)站（圖五）
怎么查看一個響應(yīng)式網(wǎng)站的斷點(diǎn)？
用chrome瀏覽器打開一個響應(yīng)式網(wǎng)站，右擊“檢查元素”，找到“布局”里的“盒模型”顯示的就是視窗當(dāng)前的分辨率，慢慢縮小視窗的寬度，頁面布局會隨著尺寸的變化而變化，這就是網(wǎng)站的斷點(diǎn)。（圖六、圖七）
Apple官網(wǎng)的斷點(diǎn)（圖六）
響應(yīng)式網(wǎng)站的實(shí)現(xiàn)效果，gif動圖來源于網(wǎng)絡(luò)（圖七）
響應(yīng)式能夠做到響應(yīng)的前提有兩點(diǎn)：
- 頁面布局具有規(guī)律性；
- 元素寬高可用百分比代替固定數(shù)值。
而這兩點(diǎn)正是柵格系統(tǒng)本身具有的典型特點(diǎn)，所以利用柵格系統(tǒng)進(jìn)行響應(yīng)式設(shè)計是順理成章的，響應(yīng)式與柵格化自然也成為了最佳搭檔。注意：執(zhí)行頁面時，必須優(yōu)先考慮版式設(shè)計與創(chuàng)意，而不是被規(guī)范所固化，當(dāng)完成頁面創(chuàng)意后，再進(jìn)行柵格系統(tǒng)的規(guī)范化調(diào)整。
柵格系統(tǒng)
頁面邊距
頁面邊距就是內(nèi)容區(qū)域以外的空間，響應(yīng)式頁面邊距可以隨著屏幕尺寸增大而增大。列和槽
列是內(nèi)容的容器，槽是調(diào)節(jié)相鄰兩個列的間距，把控頁面留白；列和槽加上頁面邊距就是屏幕的水平寬度。列和列間距的內(nèi)容區(qū)域由N個列和（N-1）個槽組成。通常情況下，web 端采用 12 列，平板采用 8 列，移動端采用 4 列。
利用 Sketch 的布局設(shè)置功能，可快速搭建網(wǎng)格系統(tǒng)的參考布局，提高設(shè)計效率。（設(shè)置方法：菜單欄——視圖——畫布——布局設(shè)置，圖八）
Sketch 的布局設(shè)置（圖八）
以12柵格系統(tǒng)為例，一個12柵格系統(tǒng)根據(jù)業(yè)務(wù)需要，可被2等分、3等分、4等分、6等分、12等分，還可以被1：2：1、1：3：2、1:2、1:3、1:5等不對稱分割。注：
- 列的數(shù)量越多，頁面就越“碎”，比較難把控，適用于業(yè)務(wù)信息量大、信息分組多、單個盒子內(nèi)信息體積較小的頁面設(shè)計。
- 槽的寬度越大，頁面越輕松簡單。
8點(diǎn)網(wǎng)格
列跟槽的寬度是以網(wǎng)格作為基本單位來做增減，所以應(yīng)該先定義好柵格的原子單位，目前最普適易用的就是8 點(diǎn)網(wǎng)格。設(shè)計頁面時，也應(yīng)該遵循8點(diǎn)規(guī)律。值得注意的是，列跟槽的值盡量取8的倍數(shù)，但不是非得是8的倍數(shù)。但產(chǎn)品中各類元素應(yīng)該遵循8倍原則（圖標(biāo)、組件大小等）。8點(diǎn)網(wǎng)格系統(tǒng)有兩種柵格形式，設(shè)計師可根據(jù)具體情況進(jìn)行選擇。將元素放到8的倍數(shù)柵格中，稱之為“硬柵格”。元素之間的距離是8的倍數(shù)，稱之為“軟柵格”。
為什么是8點(diǎn)網(wǎng)格呢？- 目前主流設(shè)備的屏幕分辨率基本能被8整除，可確保不同布局之間的視覺一致性，同時可以適配多種尺寸。（圖九）
當(dāng)前主流屏幕分辨率，基本上都能被8整除，圖片來源于網(wǎng)絡(luò)（圖九）
- 以8為單位符合“偶數(shù)原則”。偶數(shù)原則在頁面縮放中最大程度的避免了0.5、0.75、1.25等次像素的出現(xiàn)，使頁面顯示效果更佳。
- 前端開源組件庫比如Metronic、Antdesign等也是基于8的原子單位來設(shè)計，設(shè)計師使用以8為基本單位的柵格系統(tǒng)的話，相互對接會更加方便，也能更高品質(zhì)的還原設(shè)計。
關(guān)于8點(diǎn)網(wǎng)格更詳細(xì)的內(nèi)容，這里不過多描述，感興趣的可以自行搜索“8點(diǎn)網(wǎng)格”深入了解，也歡迎添加本人微信共同交流。讀到這里，相信很多朋友已經(jīng)知道網(wǎng)頁設(shè)計的正確打開方式了。接下來，讓我們繼續(xù)了解關(guān)于網(wǎng)頁設(shè)計更細(xì)的一些規(guī)范吧。
頁面布局結(jié)構(gòu)
頁面的布局結(jié)構(gòu)是頁面基本框架，后續(xù)的設(shè)計都是在這個大的框架下完成的。最典型的頁面布局結(jié)構(gòu)有上下布局與左右布局結(jié)構(gòu)。
上下布局結(jié)構(gòu)：
也就是導(dǎo)航欄在上，內(nèi)容區(qū)域在下，大眾化布局結(jié)構(gòu)，符合用戶認(rèn)知，遵循用戶從上而下瀏覽習(xí)慣，貫穿全屏的導(dǎo)航欄設(shè)計也使頁面顯得正式穩(wěn)重，頁面內(nèi)容也能夠做到全空間展示。
上下布局結(jié)構(gòu)，圖片來源于網(wǎng)絡(luò)
左右布局結(jié)構(gòu)
也就是導(dǎo)航欄在左，內(nèi)容區(qū)域在右，常見于后臺系統(tǒng)，側(cè)邊導(dǎo)航欄可固定也可收起，相對比較靈活，抽屜式概念，擴(kuò)展性比較強(qiáng)。但因?yàn)楣潭ㄔ趥?cè)邊欄，導(dǎo)致右側(cè)內(nèi)容區(qū)域空間被壓縮，相對上下布局的結(jié)構(gòu)，內(nèi)容展示方面也相對局限一些。一般為了與內(nèi)容區(qū)域做區(qū)分，導(dǎo)航部分會用選擇更深的顏色、安排更多的圖標(biāo)和文字。
左右布局結(jié)構(gòu)，圖片來源于網(wǎng)絡(luò)
常見的三種左邊導(dǎo)航欄的響應(yīng)形式- 靈活響應(yīng)：側(cè)導(dǎo)航可折疊、可擴(kuò)展。右邊內(nèi)容隨著側(cè)導(dǎo)航的變化而響應(yīng)。
靈活響應(yīng)，gif動圖來源于網(wǎng)絡(luò)
- 固定響應(yīng)：側(cè)導(dǎo)航始終保持靜態(tài)寬度，右邊內(nèi)容響應(yīng)。
固定響應(yīng)，gif動圖來源于網(wǎng)絡(luò)
- 懸浮響應(yīng)：側(cè)導(dǎo)航漂浮在內(nèi)容區(qū)域之上，即停即走的概念，不影響內(nèi)容響應(yīng)。
懸浮響應(yīng)，gif動圖來源于網(wǎng)絡(luò)
Web端最佳首屏設(shè)計尺寸
世界著名的網(wǎng)頁易用性專家尼爾森曾經(jīng)有報告顯示，首屏以上的關(guān)注度為80.3%，首屏以下的關(guān)注度僅有19.7%。這兩個數(shù)據(jù)足以表明，首屏內(nèi)容對轉(zhuǎn)化率的重要性。
查閱了一些其他人對于網(wǎng)頁首屏高度的理解，大致意思就是根據(jù)瀏覽器參數(shù)、市場占有率以及屏幕分辨率，可以推出首屏的最佳設(shè)計寬度和高度。首屏高度=屏幕分辨率總高度-系統(tǒng)任務(wù)欄高度-瀏覽器高度（工具欄、狀態(tài)欄、邊框等）-位置工具欄（如360、百度）任務(wù)欄高度：40px（Win7、8、8.1、10=40px Win XP=30px）瀏覽器高度：160px（包含工具欄、狀態(tài)欄、邊框等）位置工具欄：30px（如搜搜工具欄，百度工具欄，360工具欄等等用戶瀏覽器上安裝的各種插件都會影響到首屏的高度）
首屏內(nèi)容可見度，圖片來源于網(wǎng)絡(luò)（圖十）
根據(jù)用戶可見首屏內(nèi)容高度統(tǒng)計（圖十）及二八比例劃分原則，首屏高度控制在710px可以照顧到約80%的用戶群體，最終得出的結(jié)論是：
- 首屏安全寬度為1002px（最大安全寬度可以為：1258px）
- Windows XP首屏高度為580px
- Windows7、8、8.1、10首屏高度：710px
但需要注意的是我們采取的是響應(yīng)式開發(fā)，實(shí)際上首屏按照1920*1080px來設(shè)計即可，核心內(nèi)容可以聚焦在710px的高度內(nèi)。例如Apple官網(wǎng)首屏核心內(nèi)容就是聚焦在710px的高度。（圖十一）
Apple官網(wǎng)首頁首屏的核心內(nèi)容尺寸：1002*710px（圖十一）
文字規(guī)范
PC系統(tǒng)默認(rèn)中文字：微軟雅黑（僅僅作為屏幕輸出，不能用在banner，否則會侵權(quán)哦）這里推薦一篇關(guān)于微軟雅黑如何使用不侵權(quán)的文章：（ 微軟雅黑這樣使用不侵權(quán)
https://www.uisdc.com/microsoft-yahei-use-way）Mac系統(tǒng)默認(rèn)中文：蘋方系列英文可以使用：Arial、DIN
如果要用一些個性化的字體來體現(xiàn)網(wǎng)頁的獨(dú)特性，建議購買正版字體，作為設(shè)計師的我們，應(yīng)該尊重版權(quán)和原創(chuàng)，我收集了一份可能是2020年最全的、可永久免費(fèi)商用的中文字體包。（感謝優(yōu)秀的字體設(shè)計師們的無私奉獻(xiàn)）字體包鏈接:
https://pan.baidu.com/s/1ZyRAen0eWaedmL-8uYQOlg 字體包密碼: 85wq
正文字體≥12px即可，目前很多網(wǎng)站字體已經(jīng)14px起步。可根據(jù)實(shí)際效果進(jìn)行選擇，但盡量使用偶數(shù)。
色彩規(guī)范：
應(yīng)該遵循品牌VI規(guī)范體系，需要注意不同狀態(tài)的用色規(guī)范（默認(rèn)、懸停、按下 、成功反饋、警示反饋、錯誤反饋），顏色不宜過多，控制在3種以內(nèi)，文字色彩盡量避免純黑色。
按鈕規(guī)范：
可分為線型按鈕、面型按鈕、文字按鈕、圖標(biāo)按鈕、文字+圖標(biāo)按鈕。按鈕的狀態(tài)一般有默認(rèn)、按下、懸停、禁用。
按鈕大小可遵循8點(diǎn)柵格原則。
圖標(biāo)規(guī)范：
圖標(biāo)設(shè)計取整數(shù)制作，完成后輸出SVG格式，上傳到阿里巴巴矢量圖標(biāo)庫，方便前端調(diào)用。注意不同形狀圖標(biāo)視覺的大小統(tǒng)一（橢圓、方、圓、長方、三角），可遵循8點(diǎn)柵格原則。
表單規(guī)范：
系統(tǒng)表單設(shè)計中，注意輸入框樣式統(tǒng)一，一般有默認(rèn)、選中、輸入、禁用、校驗(yàn)錯誤等，另外還有單選、多選、下拉等組件。可遵循8點(diǎn)柵格原則。
彈窗規(guī)范：
分模態(tài)彈窗和非模態(tài)彈窗，他們最大的區(qū)別在于是否強(qiáng)制用戶交互，是否打斷用戶當(dāng)前操作流程。彈窗大小可根據(jù)顯示的內(nèi)容、邊距來設(shè)計，位置保持全居中。非模態(tài)彈窗，需要考慮自動消失的提示時間?？勺裱?點(diǎn)柵格原則。
控件規(guī)范：
在系統(tǒng)中很多控件需要設(shè)計師來優(yōu)化設(shè)計，保證控件的統(tǒng)一風(fēng)格，也方便后期迭代。在實(shí)際工作中為了節(jié)省開發(fā)時間，前端也會提供封裝好的控件讓我們來選擇，我們要協(xié)助前端規(guī)范好控件的樣式?？勺裱?點(diǎn)柵格原則。
到這里，關(guān)于網(wǎng)頁設(shè)計響應(yīng)式設(shè)計規(guī)范的梳理基本上夠全面了。總結(jié)回顧一下，以下幾個核心知識點(diǎn)務(wù)必牢記：
- 網(wǎng)頁設(shè)計的網(wǎng)頁布局方式
- 響應(yīng)式網(wǎng)頁設(shè)計基準(zhǔn)尺寸
- 設(shè)計稿響應(yīng)式工作原理和柵格系統(tǒng)
- 8點(diǎn)網(wǎng)格
- 頁面布局結(jié)構(gòu)
- Web端最佳首屏設(shè)計尺寸
- 頁面設(shè)計的相關(guān)規(guī)范，需要遵循8點(diǎn)柵格原則。（文字、色彩、按鈕、圖標(biāo)、表單、彈框、控件規(guī)范）
希望大家認(rèn)真閱讀并及時消化，真正轉(zhuǎn)化為自己的東西，并應(yīng)用到實(shí)際項目當(dāng)中去。切記，規(guī)范只是起到引導(dǎo)作用，它可以讓我們的設(shè)計更加嚴(yán)謹(jǐn)，但我們的創(chuàng)意不能被規(guī)范所束縛，永遠(yuǎn)記住最好的規(guī)范就是沒有規(guī)范。
關(guān)鍵詞：設(shè)計,規(guī)范,響應(yīng)
在線咨詢