本文主要與大家分享如何利用柵格系統(tǒng)完成后臺頁面響應式設計，介紹響應式設計的思路與方法。
一、什么是響應式？ 按照本人自己的理解，響應式就是通過合理的設計方案配合規(guī)范的技術實現(xiàn)策略，使同一個 Web頁面在各個終端（設備）不同分辨率屏幕上都能有好的用戶體驗。 這里說是用戶體驗而不是視覺效果是因為用戶體驗包含了性能、交互、效率等多方面內(nèi)容，也就是說，對于一個線上的響應式頁面，我們不僅要關注視覺上看到的，也要關注我們操作、使用時的感受，這些綜合因素最終影響著用戶使用后臺系統(tǒng)時的效率與體驗。而這里我提到的「合理的設計方案」就是本篇文章跟大家分享的重點：如何利用柵格系統(tǒng)完成后臺頁面的響應式設計。對于交互與性能方面內(nèi)容，本篇文章不做介紹，因為兩者涉及到我不太了解的技術相關知識。我提出這個觀點主要希望大家在執(zhí)行設計時，能有更全局的考慮，多跟交互與開發(fā)溝通，協(xié)力打造更好的用戶體驗。
二、響應式響應的是什么？ 響應就是系統(tǒng)對于外部變化的反饋跟適應，響應式就是系統(tǒng)做出這種反饋所依據(jù)的方案與策略。對于一個 Web頁面，外部的變化是指媒介（Media）與視窗（Viewport）的變化，媒介指 Web頁面運行在哪些設備的屏幕上（手機、平板、PC、Mac等），視窗指瀏覽器用來顯示網(wǎng)頁內(nèi)容的窗口，也就是瀏覽器去掉標簽欄、地址欄、工具欄之后顯示內(nèi)容的窗口大小。所以對于一個 Web頁面而言，響應式響應的就是媒介與視窗的變化，響應的結(jié)果在視覺上表現(xiàn)為頁面在不同媒介、不同視窗下會有不同的布局結(jié)構、版式設計以及不同數(shù)量信息的展示。
三、響應式的目的是什么？ 后臺系統(tǒng)做響應式設計的目的：提高屏幕利用率，大化操作效率。 提高屏幕利用率最簡單的理解就是在大屏幕上顯示更多內(nèi)容，在小屏幕上通過數(shù)據(jù)篩選展示關鍵信息。一直以來大家普遍認為移動端碎片化嚴重，但實際上桌面端設備的分辨率也是有著不太均勻的分布，而隨著新設備的更新，更多高分辨率屏幕不斷加入，這種碎片化的趨勢會更加明顯，因而要想利用好每一塊屏幕，讓不同分辨率的用戶都有好的體驗，顯然傳統(tǒng)固定的布局是做不到了。 后臺系統(tǒng)的應用特性，決定了響應式在后臺設計中具有很高的實用價值。后臺系統(tǒng)有兩大主要功能：查看與操作。查看主要是各種數(shù)據(jù)，是系統(tǒng)自動生成的內(nèi)容；操作是需人工干預、人工決策的任務，查看的數(shù)據(jù)為操作提供了依據(jù)，而操作支撐了公司或部門業(yè)務的正常運行。所以后臺系統(tǒng)設計最基礎的目標之一是如何通過良好的數(shù)據(jù)展示幫助用戶提高操作、決策效率，而充足的展示空間顯然是實現(xiàn)這一目標的基礎，響應式設計通過為每個分辨率設定合理的版式布局，使數(shù)據(jù)在每塊屏幕上都盡可能展示的好。優(yōu)化后的數(shù)據(jù)展示，幫助用戶更高效獲取信息，從而提高了用戶使用后臺系統(tǒng)的效率與體驗。
四、為何要利用柵格系統(tǒng)來進行響應式網(wǎng)站設計？響應式可以響應的前提有兩點：頁面布局具有規(guī)律性；元素寬高可用百分比代替固定數(shù)值，而這兩點正是柵格系統(tǒng)本身就具有的典型特點，所以利用柵格系統(tǒng)進行響應式的設計是順理成章的，也比較高效快捷，所以響應式與柵格化天生一對好搭檔。柵格系統(tǒng)頁面布局具有規(guī)律性、元素寬高可用百分比表示：
五、利用柵格系統(tǒng)完成后臺頁面響應式設計的步驟 1. 確立設計稿基準尺寸 設計稿基準尺寸是指我們從哪一個分辨率開始設計，也就是我們新建畫板時畫板的尺寸應該是多大。而這個尺寸確定的主要依據(jù)是我們后臺系統(tǒng)所面向的主要用戶的屏幕分辨率；我們分兩大類情況來討論這個問題。 如果我們的系統(tǒng)是給公司內(nèi)部員工使用，由于公司批量采購設備的原因，公司內(nèi)部員工的屏幕分辨率往往會比較統(tǒng)一，這種情況下我們需要拿到這個數(shù)據(jù)，然后以它作為基準尺寸開始設計。因為雖然響應式設計的目標是讓頁面在每個分辨率下都有好的體驗，但實際開發(fā)中畢竟存在損壞，設計還原很難99.99%，因而大多數(shù)情況下還是基于基準尺寸的設計與開發(fā)，在用戶端顯示效果好、體驗。 如果我們的系統(tǒng)是平臺級面向全網(wǎng)用戶，或者雖然是公司內(nèi)部使用，但是并不能統(tǒng)計到內(nèi)部員工屏幕分辨率情況，就可以以1440*900作為基準尺寸開始設計。從統(tǒng)計數(shù)據(jù)來看，目前國內(nèi) PC端用戶屏幕分辨率排名前三的分別是1920*1080、1366*768、1400*900；1440的尺寸實際上是處于中間位置，如果以它為基準設計，最終向上向下響應適配后，相對誤差最小，從而達成用戶體驗的大公約數(shù)。
2. 確定頁面布局結(jié)構 頁面的布局結(jié)構，是頁面基本框架，后續(xù)的設計都是在這個大的框架下完成的，所以確定頁面基準設計尺寸后，需要跟交互設計師或產(chǎn)品經(jīng)理配合，根據(jù)實際業(yè)務情況討論確定頁面布局結(jié)構。一般來講，后臺系統(tǒng)有兩種最典型的頁面布局結(jié)構：左右布局與上下布局。 △ 上下布局 上下布局的結(jié)構在傳統(tǒng)網(wǎng)頁中非常常見，而在后臺系統(tǒng)中并不常用。這種布局的優(yōu)點是符合用戶認知，遵循用戶從上而下瀏覽頁面獲取信息的習慣；貫穿全屏的導航欄設計也使頁面顯得正式穩(wěn)重，除卻導航欄之后相對較大的空間也為內(nèi)容展示提供了比較充足的空間。缺點是頂部一級導航受頁面寬度限制，數(shù)量會比較局限，同時導航層級較深時，交互效率也不夠理想。所以該布局適合那些導航層級較少，內(nèi)容展示充分的后臺系統(tǒng)設計。 △ 左右布局 擁有側(cè)邊導航的左右布局頁面結(jié)構，是在后臺系統(tǒng)中更常見的頁面布局形式。側(cè)邊導航欄可以固定也可以收起，相對比較靈活，同時文字橫向排列的形式可以在豎向上展示更多內(nèi)容，因此側(cè)邊導航比頂部導航能容納更多一級內(nèi)容，而層疊式的內(nèi)容展示也使得一、二、三級導航內(nèi)容關聯(lián)更為順暢，可擴展性也得到加強；由于側(cè)邊欄可以常駐在頁面左側(cè)，所以對于右側(cè)內(nèi)容的指示性也優(yōu)于頂部導航，切換起來也更加方便。但同時，因為側(cè)邊欄的常駐，導致右側(cè)內(nèi)容區(qū)域空間被擠掉部分，所以相對上下布局的結(jié)構，左右布局的結(jié)構，內(nèi)容區(qū)域空間會比較??；一般為了與頁面其它區(qū)域做區(qū)分，導航部分會用更深的顏色、安排更多的圖標和文字，這也導致了在視覺上左右布局的頁面不夠平衡，會有左邊重右邊輕的感覺。
3. 對內(nèi)容區(qū)域建立柵格系統(tǒng) 根據(jù)不同的布局類型，對頁面內(nèi)容區(qū)域建立柵格系統(tǒng)。對于一個利用柵格系統(tǒng)做響應式設計的頁面來講，主要有三大數(shù)值需要規(guī)范：Column、Gutter、Margin；對于 Column、Gutter 我們在《超全面！柵格系統(tǒng)及其在后臺設計中的應用總結(jié)》內(nèi)容中已經(jīng)有很詳細的介紹，不再贅述，而 Margin 是頁邊距，主要確定了內(nèi)容區(qū)域距離頁面邊緣的距離，它分布在內(nèi)容區(qū)域的兩側(cè)，主要作用是通過留白把內(nèi)容區(qū)域與周圍環(huán)境隔離出來，從而突出內(nèi)容區(qū)域的顯示，此外還可通過 Margin值來調(diào)整內(nèi)容區(qū)域顯示比例，使頁面在視覺上有更好的呈現(xiàn)效果。所以一個用于響應式的柵格系統(tǒng)事實上由 Columns、Gutters、Margins 三部分組成。 △ 上下布局結(jié)構與其對應的柵格系統(tǒng) △ 左右布局結(jié)構與其對應的柵格系統(tǒng)
4. 根據(jù)實際業(yè)務內(nèi)容確定盒子（Box）比例 △ 上下布局結(jié)構的盒子 △ 左右布局結(jié)構的盒子
5. 確定響應策略 響應策略就是當視窗（Viewport）發(fā)生變化時，內(nèi)容區(qū)域的元素如何去響應，具體到我們當前的柵格系統(tǒng)，就是 Columns、Gutters、Margins 以及由 Columns 跟 Gutter 組成的盒子（BOX）四者的值（主要是寬度）如何變化，以及在這種變化之下我們頁面的布局如何調(diào)整。 為了方便直觀的向開發(fā)工程師與團隊里的其它小伙伴溝通，我們可以把這個響應策略制作成如下的表格，并在頁面中標注說明相關元素的變化規(guī)律，供自己與開發(fā)參考。 由于帶左側(cè)導航的響應式規(guī)則相對復雜，所以我先以它為例跟大家交流下響應策略如何制定。 △ 左右布局響應策略表 如圖，響應式是以視窗的最小寬度作為基本依據(jù)來制定每種寬度下 Columns、Gutters 與 Margins 的響應策略，也就是說 Viewport Min-width 是做出響應的觸發(fā)條件，視窗每達到一個最小寬度，就會觸發(fā)該寬度下預設的頁面布局方式，而每種布局都是在該寬度下的好布局，也是因此，響應式才會在各種復雜分辨率條件下都能給用戶比較好的體驗。 每個視窗寬度的最小值是觸發(fā)響應的關鍵值，因此我們給這些用于觸發(fā)的關鍵值起了個名字叫「Breakpoint」，每個 Breakpoint 觸發(fā)一種響應策略，而每個策略持續(xù)（保持）的寬度范圍就是圖中綠色矩形的范圍。以圖中第二行矩形為例，該矩形代表的響應策略是：欄目數(shù)是8、水槽寬度16（SM）、頁邊距32、側(cè)邊欄收起且僅展示圖標，當點擊側(cè)邊欄展開圖標時側(cè)邊欄以 Push 的方式展開，該策略觸發(fā)的 Breakpoint 是768，保持范圍是577~768。也就是當視窗寬度縮放至768時，欄目數(shù)量由上一級的12變?yōu)?，水槽寬度由24變?yōu)?6，側(cè)邊導航由完全展開狀態(tài)自動收起文字部分，僅保留圖標，然后保持這些關鍵數(shù)值不變，直到視窗寬度達到另一個Breakpoint。需要特殊說明的是，一行矩形中0~576（Min&Fixed）這個范圍的視窗寬度是固定的，也就是在該套響應策略中，頁面最小響應到576的頁面寬度，當視窗到達這個寬度時，瀏覽器會限制視窗進一步縮小，因為當頁面寬度比它還小時已經(jīng)無法有效展示數(shù)據(jù)了，所以進一步的縮放是毫無意義的。 左右布局響應策略動態(tài)演示 考慮到 gif 被壓縮后顯示效果不理想，所以我做了一小段視頻來幫助大家更好的理解上述響應策略在實際頁面中如何發(fā)揮作用。視頻鏈接→https://v.qq.com/txp/iframe/player.html?vid=w0711l8yewc 左右布局響應策略標注 對于上下布局的后臺系統(tǒng)我們根據(jù)內(nèi)容區(qū)域（Container）寬度定義的不同方式，可以把它們分為兩類： 內(nèi)容區(qū)域定寬的后臺系統(tǒng)（Fixed-width Container） 內(nèi)容區(qū)域定寬是指內(nèi)容區(qū)域在每一組視窗寬度區(qū)間內(nèi)，都會設定一個大值（Max-with），當內(nèi)容區(qū)域?qū)挾刃∮诖笾禃r，區(qū)域內(nèi)元素會響應視窗的變化；達到大值后，內(nèi)容區(qū)域不再響應視窗的變化，而是寬度保持該大寬度值不變，此時我們通過增加頁面兩側(cè)的margin值來響應視窗的變化。Flex Margin 就是應對此情況的動態(tài)頁邊距。 上下布局響應策略表（內(nèi)容區(qū)域定寬（ Fixed-width Container ）） 內(nèi)容區(qū)域?qū)挾攘魇剑╢luid-width Container） 內(nèi)容區(qū)域?qū)挾攘魇剑╢luid-width Container）的后臺系統(tǒng)，它的內(nèi)容區(qū)域（Container）距離頁面兩側(cè)的頁邊距 Margin 是定值，因此視窗有多大內(nèi)容區(qū)域就展示多大。 六、問題 1. 后臺系統(tǒng)必須做成響應式么？ 并不是必須的，是否要做響應式主要是根據(jù)后臺產(chǎn)品面向的用戶來定的。如果是公司內(nèi)部使用的系統(tǒng)，且員工配備的桌面設備都是有統(tǒng)一的分辨率，就可以不做響應式；如果是面向全網(wǎng)用戶的后臺產(chǎn)品（比如淘寶商家的后臺管理系統(tǒng)，阿里云的控制臺）或公司（部門）內(nèi)部的桌面設備并沒有統(tǒng)一的分辨率規(guī)格，那么就需要做成響應式。當然了，更實際的環(huán)境中是否做響應式還有技術實現(xiàn)、時間、人員成本等各方面因素的考慮，有時為了盡快的讓業(yè)務運營起來，后臺系統(tǒng)會做的比較「簡陋」。
2. 為什么柵格系統(tǒng)沒有適配到移動端的分享？ 因為后臺管理系統(tǒng)的使用場景主要是工作時間在桌面設備上使用，由于龐雜的數(shù)據(jù)內(nèi)容在移動設備上展示困難、操作不便，因而很少有公司會把后臺系統(tǒng)響應到移動端使用，所以我們今天說的后臺響應式僅針對桌面設備屏幕。
3. 對于iMac4k、5K這類超高分辨率的屏幕如何做響應式設計？ 對于左右布局的后臺系統(tǒng)，實際上它是全屏展示的，也就是屏幕有多大就展示多大，因而 iMac 的響應策略也是按照左右布局響應策略表里的策略來響應。 對于上下布局，內(nèi)容區(qū)域定寬的后臺系統(tǒng)，iMac 的響應策略使用上下布局響應策略表里的策略來響應即可； 對于內(nèi)容區(qū)域?qū)挾攘魇降暮笈_系統(tǒng)，iMac 的響應策略可以參考左右布局的響應策略表來處理欄目、水槽的變化，頁邊距保持定值即可。
4. 在以8為原子單位的柵格中，Margin需要按8n的規(guī)律變化么？ 能以8n的規(guī)律變化是的，如果無法做到也可以使用其它數(shù)值。Margin 是頁邊距，主要作用是通過留白的方式將頁面內(nèi)容區(qū)域與周圍環(huán)境隔離區(qū)分出來，從而突出內(nèi)容；一般我們會優(yōu)先考慮內(nèi)容區(qū)域匹配8n的變化規(guī)律，安排完內(nèi)容區(qū)域后剩余的空間自然成為頁邊距（margin）。
5. 響應策略制定的時機是什么？如何去制定？文中示例的策略表我可以借鑒套用么？ 響應策略表一般是在主要頁面設計完成，要交付開發(fā)實現(xiàn)的時候來跟開發(fā)一起商定。這塊需要注意兩點： 如果開始設計時就已確定頁面是要具備響應式的能力，那么開始設計時就去跟開發(fā)溝通，看他們現(xiàn)有技術是如何來做響應式的，因為他們很有可能是在用 Bootstrap、Foundation 這類組件庫來做開發(fā)，而這些組件庫一般都有自己現(xiàn)成的響應規(guī)則，這種情況下我們需要了解開發(fā)他們的規(guī)則，讓自己的設計匹配已有的策略。當然了，如果他們的規(guī)則并不能很好滿足我們的業(yè)務需要，一般也是可以在這些組件的基礎上讓開發(fā)去修改調(diào)整的。 響應策略表只是對響應方式的結(jié)果的呈現(xiàn)，而這個策略的制定事實上是從設計開始執(zhí)行時就要去考慮的，從我個人經(jīng)驗來講，我一般會挑兩類頁面來做響應策略的研究與適配，一個是控制臺（Dashboard）頁面，另一個是表單（Form）頁面。優(yōu)先規(guī)劃這兩個頁面的設計，考慮他們在各個 Viewport 下如何布局如何展示如何縮放變化，并且跟開發(fā)溝通想法，聽取意見，制定初步的響應計劃，當這兩個頁面設計完成，就可以更大范圍的執(zhí)行設計。 文中示例的策略表是基于我自己項目經(jīng)驗總結(jié)而來，具有實際應用價值，可以借鑒。但我更想做的是通過那個表希望跟大家分享一種與開發(fā)交流、溝通的方法和技巧。實際工作中我們并非一定要做出那么一個經(jīng)過精心設計細致考慮的表，我們可能會找張紙畫一畫給開發(fā)看就可以了，這塊的重點是如何把我們設計師的想法更可視化更直觀準確的傳達給開發(fā)工程師。所以那張表是啟發(fā)而非標準。 △ 控制臺（Dashboard）頁面示例（素材圖片作者：Coderthemes） △ 表單（Form）頁面示例

新聞名稱：如何利用柵格系統(tǒng)做響應式設計
文章來源：http://m.rwnh.cn/news28/177478.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供域名注冊、網(wǎng)站策劃、云服務器、網(wǎng)站收錄、營銷型網(wǎng)站建設、響應式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)