一、什么是響應(yīng)式？

響應(yīng)式就是通過(guò)合理的設(shè)計(jì)方案配合規(guī)范的技術(shù)實(shí)現(xiàn)策略，使同一個(gè) Web頁(yè)面在各個(gè)終端（設(shè)備）不昆山網(wǎng)頁(yè)設(shè)計(jì)同分辨率屏幕上都能有最佳的用戶體驗(yàn)。

昆山網(wǎng)頁(yè)設(shè)計(jì)用時(shí)的感受，這些綜合因素最終影響著用戶使用后臺(tái)系統(tǒng)時(shí)的效率與體驗(yàn)。

二、響應(yīng)式響應(yīng)的是什么？

響應(yīng)就是系統(tǒng)對(duì)于外部變化的反饋跟適應(yīng)，響應(yīng)式就是系統(tǒng)做出這種反饋所依據(jù)的方案與策略。對(duì)于一個(gè) Web頁(yè)面，外部昆山網(wǎng)頁(yè)設(shè)計(jì)的變化是指媒介（Media）與視窗（Viewport）的變化，媒介指 Web頁(yè)面運(yùn)行在哪些設(shè)備的屏幕上（手機(jī)、平板、PC、Mac等），視窗指瀏覽器用來(lái)顯示網(wǎng)頁(yè)內(nèi)容的窗口，也就是瀏覽器去掉標(biāo)簽欄、地址欄昆山網(wǎng)頁(yè)設(shè)計(jì)、工具欄之后顯示內(nèi)容的窗口大小。所以對(duì)于一個(gè) Web頁(yè)面而言，響應(yīng)式響應(yīng)的就是媒介與視窗的變化，響應(yīng)的結(jié)果在視覺(jué)上表現(xiàn)為頁(yè)面在不同媒介、不同視窗下會(huì)有不同的布局結(jié)構(gòu)、版式

設(shè)計(jì)以及不同數(shù)量信息的展示。

三昆山網(wǎng)頁(yè)設(shè)計(jì)、響應(yīng)式的目的是什么？ 后臺(tái)系統(tǒng)做響應(yīng)式設(shè)計(jì)的目的：提高屏幕利用率，最大化操作效率。

提高屏幕利用率最簡(jiǎn)單的理解就是在大屏幕上顯示更多內(nèi)容，在小屏幕上通過(guò)數(shù)據(jù)篩選展示關(guān)鍵信息。一直以來(lái)大家普遍認(rèn)為移動(dòng)端碎昆山網(wǎng)頁(yè)設(shè)計(jì)片化嚴(yán)重，但實(shí)際上桌面端設(shè)備的分辨率也是有著不太均勻的分布，而隨著新設(shè)備的更新，更多高分辨率屏幕不斷加入，這種碎片化的趨勢(shì)會(huì)更加明顯，因而要想利用好每一塊屏幕，讓不同分辨率的用戶都有好的體驗(yàn)，顯然傳統(tǒng)昆山網(wǎng)頁(yè)設(shè)計(jì)固定的布局是做不到了。

昆山網(wǎng)頁(yè)設(shè)計(jì)看的數(shù)據(jù)為操作提供了依據(jù)，而操作支撐了公司或部門業(yè)務(wù)的正常運(yùn)行。所以后臺(tái)系統(tǒng)設(shè)計(jì)最基礎(chǔ)的目標(biāo)之一是如何通過(guò)良好的數(shù)據(jù)展示幫助用戶提高操作、決策效率，而充足的展示空間顯然是實(shí)現(xiàn)這一目標(biāo)的基礎(chǔ)，響應(yīng)式設(shè)計(jì)昆山網(wǎng)頁(yè)設(shè)計(jì)通過(guò)為每個(gè)分辨率設(shè)定合理的版式布局，使數(shù)據(jù)在每塊屏幕上都盡可能展示的最佳。優(yōu)化后的數(shù)據(jù)展示，幫助用戶更高效獲取信息，從而提高了用戶使用后臺(tái)系統(tǒng)的效率與體驗(yàn)。

四、為何要利用柵格系統(tǒng)來(lái)進(jìn)行響應(yīng)式設(shè)計(jì)

響應(yīng)式昆山網(wǎng)頁(yè)設(shè)計(jì)昆山網(wǎng)頁(yè)設(shè)計(jì)一對(duì)好搭檔。

五、利用柵格系統(tǒng)完成后臺(tái)頁(yè)面響應(yīng)式設(shè)計(jì)的步驟 1. 確立設(shè)計(jì)稿基準(zhǔn)尺寸

設(shè)計(jì)稿基準(zhǔn)尺寸是指我們從哪一個(gè)分辨率開始設(shè)計(jì)，也就是我們新建畫板時(shí)畫板的尺寸應(yīng)該是多大。而這個(gè)尺寸確定的主要依據(jù)是我們后昆山網(wǎng)頁(yè)設(shè)計(jì)臺(tái)系統(tǒng)所面向的主要用戶的屏幕分辨率；我們分兩大類情況來(lái)討論這個(gè)問(wèn)題。

如果我們的系統(tǒng)是給公司內(nèi)部員工使用，由于公司批量采購(gòu)設(shè)備的原因，公司內(nèi)部員工的屏幕分辨率往往會(huì)比較統(tǒng)一，這種情況下我們需要拿到這個(gè)數(shù)昆山網(wǎng)頁(yè)設(shè)計(jì)據(jù)，然后以它作為基準(zhǔn)尺寸開始設(shè)計(jì)。因?yàn)殡m然響應(yīng)式設(shè)計(jì)的目標(biāo)是讓頁(yè)面在每個(gè)分辨率下都有最佳的體驗(yàn)，但實(shí)際開發(fā)中畢竟存在損壞，設(shè)計(jì)還原很難100%，因而大多數(shù)情況下還是基于基準(zhǔn)尺寸的設(shè)計(jì)與開發(fā)，在用戶端顯昆山網(wǎng)頁(yè)設(shè)計(jì)示效果最佳、體驗(yàn)最好。

如果我們的系統(tǒng)是平臺(tái)級(jí)面向全網(wǎng)用戶，或者雖然是公司內(nèi)部使用，但是并不能統(tǒng)計(jì)到內(nèi)部員工屏幕分辨率情況，就可以以1440*900作為基準(zhǔn)尺寸開始設(shè)計(jì)。從統(tǒng)計(jì)數(shù)據(jù)來(lái)看，目前國(guó)內(nèi) PC端昆山網(wǎng)頁(yè)設(shè)計(jì)用戶屏幕分辨率排名前三的分別是1920*1080、1366*768、1400*900；1440的尺寸實(shí)際上是處于中間位置，如果以它為基準(zhǔn)設(shè)計(jì)，最終向上向下響應(yīng)適配后，相對(duì)誤差最小，從而達(dá)成用戶體驗(yàn)的最昆山網(wǎng)頁(yè)設(shè)計(jì)大公約數(shù)。

2. 確定頁(yè)面布局結(jié)構(gòu)

頁(yè)面的布局結(jié)構(gòu)，是頁(yè)面基本框架，后續(xù)的設(shè)計(jì)都是在這個(gè)大的框架下完成的，所以確定頁(yè)面基準(zhǔn)設(shè)計(jì)尺寸后，需要跟交互設(shè)計(jì)師或產(chǎn)品經(jīng)理配合，根據(jù)實(shí)際業(yè)務(wù)情況討論確定頁(yè)面布局結(jié)構(gòu)。昆山網(wǎng)頁(yè)設(shè)計(jì)一般來(lái)講，后臺(tái)系統(tǒng)有兩種最典型的頁(yè)面布局結(jié)構(gòu)：左右布局與上下布局。

上下布局的結(jié)構(gòu)在傳統(tǒng)網(wǎng)頁(yè)中非常常見(jiàn)，而在后臺(tái)系統(tǒng)中并不常用。這種布局的優(yōu)點(diǎn)是符合用戶認(rèn)知，遵循用戶從上而下瀏覽頁(yè)面獲取信息的習(xí)慣；貫穿昆山網(wǎng)頁(yè)設(shè)計(jì)全屏的導(dǎo)航欄設(shè)計(jì)也使頁(yè)面顯得正式穩(wěn)重，除卻導(dǎo)航欄之后相對(duì)較大的空間也為內(nèi)容展示提供了比較充足的空間。缺點(diǎn)是頂部一級(jí)導(dǎo)航受頁(yè)面寬度限制，數(shù)量會(huì)比較局限，同時(shí)導(dǎo)航層級(jí)較深時(shí)，交互效率也不夠理想。

左右布局，昆山網(wǎng)頁(yè)設(shè)計(jì)擁有側(cè)邊導(dǎo)航的左右布局頁(yè)面結(jié)構(gòu)，是在后臺(tái)系統(tǒng)中更常見(jiàn)的頁(yè)面布局形式。側(cè)邊導(dǎo)航欄可以固定也可以收起，相對(duì)比較靈活，同時(shí)文字橫向排列的形式可以在豎向上展示更多內(nèi)容，因此側(cè)邊導(dǎo)航比頂部導(dǎo)航能容納更多一級(jí)內(nèi)容昆山網(wǎng)頁(yè)設(shè)計(jì)昆山網(wǎng)頁(yè)設(shè)計(jì)右側(cè)內(nèi)容區(qū)域空間被擠掉部分，所以相對(duì)上下布局的結(jié)構(gòu)，左右布局的結(jié)構(gòu)，內(nèi)容區(qū)域空間會(huì)比較??；一般為了與頁(yè)面其它區(qū)域做區(qū)分，導(dǎo)航部分會(huì)用更深的顏色、安排更多的圖標(biāo)和文字，這也導(dǎo)致了在視覺(jué)上左右布局的頁(yè)面不昆山網(wǎng)頁(yè)設(shè)計(jì)夠平衡，會(huì)有左邊重右邊輕的感覺(jué)。

3. 對(duì)內(nèi)容區(qū)域建立柵格系統(tǒng)

根據(jù)不同的布局類型，對(duì)頁(yè)面內(nèi)容區(qū)域建立柵格系統(tǒng)。對(duì)于一個(gè)利用柵格系統(tǒng)做響應(yīng)式設(shè)計(jì)的頁(yè)面來(lái)講，主要有三大數(shù)值需要規(guī)范：Column、Gutte昆山網(wǎng)頁(yè)設(shè)計(jì)r、Margin；對(duì)于 Column、Gutter 我們?cè)?/span>內(nèi)容中已經(jīng)有很詳細(xì)的介紹，不再贅述，而 Margin 是頁(yè)邊距，主要確定了內(nèi)容區(qū)域距離頁(yè)面邊緣的距離，它分布在內(nèi)容區(qū)域的兩側(cè)，主要作用是通過(guò)留昆山網(wǎng)頁(yè)設(shè)計(jì)白把內(nèi)容區(qū)域與周圍環(huán)境隔離出來(lái)，從而突出內(nèi)容區(qū)域的顯示，此外還可通過(guò) Margin值來(lái)調(diào)整內(nèi)容區(qū)域顯示比例，使頁(yè)面在視覺(jué)上有更好的呈現(xiàn)效果。所以一個(gè)用于響應(yīng)式的柵格系統(tǒng)事實(shí)上由 Columns、Gut昆山網(wǎng)頁(yè)設(shè)計(jì)ters、Margins 三部分組成。