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