相關推薦

超全面總結!如何利用柵格系統做響應式設計?

本文主要與大家分享如何利用柵格系統完成後台頁面響應式設計,介紹響應式設計的思路與方法。

一、什麼是響應式?

按照本人自己的理解,響應式就是通過合理的設計方案配合規範的技術實現策略,使同一個Web頁面在各個終端(設備)不同分辨率屏幕上都能有最佳的用戶體驗。

這裡說是用戶體驗而不是視覺效果是因為用戶體驗包含了性能、交互、效率等多方面內容,也就是說,對於一個線上的響應式頁面,我們不僅要關注視覺上看到的,也要關注我們操作、使用時的感受,這些綜合因素最終影響著用戶使用後台系統時的效率與體驗。而這裡我提到的「合理的設計方案」就是本篇文章跟大家分享的重點:如何利用柵格系統完成後台頁面的響應式設計。對於交互與性能方面內容,本篇文章不做介紹,因為兩者涉及到我不太了解的技術相關知識。我提出這個觀點主要希望大家在執行設計時,能有更全局的考慮,多跟交互與開發溝通,協力打造更好的用戶體驗。

二、響應式響應的是什麼?

響應就是系統對於外部變化的反饋跟適應,響應式就是系統做出這種反饋所依據的方案與策略。對於一個Web頁面,外部的變化是指媒介(Media)與視窗(Viewport)的變化,媒介指Web頁面運行在哪些設備的屏幕上(手機、平板、PC、Mac等),視窗指瀏覽器用來顯示網頁內容的窗口,也就是瀏覽器去掉標籤欄、地址欄、工具欄之後顯示內容的窗口大小。所以對於一個Web頁面而言,響應式響應的就是媒介與視窗的變化,響應的結果在視覺上表現為頁面在不同媒介、不同視窗下會有不同的佈局結構、版式設計以及不同數量信息的展示。

三、響應式的目的是什麼?

後台系統做響應式設計的目的:提高屏幕利用率,最大化操作效率。

提高屏幕利用率最簡單的理解就是在大屏幕上顯示更多內容,在小屏幕上通過數據篩選展示關鍵信息。一直以來大家普遍認為移動端碎片化嚴重,但實際上桌面端設備的分辨率也是有著不太均勻的分佈,而隨著新設備的更新,更多高分辨率屏幕不斷加入,這種碎片化的趨勢會更加明顯,因而要想利用好每一塊屏幕,讓不同分辨率的用戶都有好的體驗,顯然傳統固定的佈局是做不到了。

後台系統的應用特性,決定了響應式在後台設計中具有很高的實用價值。後台系統有兩大主要功能:查看與操作。查看主要是各種數據,是系統自動生成的內容;操作是需人工干預、人工決策的任務,查看的數據為操作提供了依據,而操作支撐了公司或部門業務的正常運行。所以後台系統設計最基礎的目標之一是如何通過良好的數據展示幫助用戶提高操作、決策效率,而充足的展示空間顯然是實現這一目標的基礎,響應式設計通過為每個分辨率設定合理的版式佈局,使數據在每塊屏幕上都盡可能展示的最佳。優化後的數據展示,幫助用戶更高效獲取信息,從而提高了用戶使用後台系統的效率與體驗。

四、為何要利用柵格系統來進行響應式設計

響應式可以響應的前提有兩點:頁面佈局具有規律性;元素寬高可用百分比代替固定數值,而這兩點正是柵格系統本身就具有的典型特點,所以利用柵格系統進行響應式的設計是順理成章的,也比較高效快捷,所以響應式與柵格化天生一對好搭檔。

柵格系統頁面佈局具有規律性、元素寬高可用百分比表示:

五、利用柵格系統完成後台頁面響應式設計的步驟

1. 確立設計稿基準尺寸

設計稿基準尺寸是指我們從哪一個分辨率開始設計,也就是我們新建畫板時畫板的尺寸應該是多大。而這個尺寸確定的主要依據是我們後台系統所面向的主要用戶的屏幕分辨率;我們分兩大類情況來討論這個問題。

如果我們的系統是給公司內部員工使用,由於公司批量採購設備的原因,公司內部員工的屏幕分辨率往往會比較統一,這種情況下我們需要拿到這個數據,然後以它作為基準尺寸開始設計。因為雖然響應式設計的目標是讓頁面在每個分辨率下都有最佳的體驗,但實際開發中畢竟存在損壞,設計還原很難100%,因而大多數情況下還是基於基準尺寸的設計與開發,在用戶端顯示效果最佳、體驗最好。

如果我們的系統是平台級面向全網用戶,或者雖然是公司內部使用,但是並不能統計到內部員工屏幕分辨率情況,就可以以1440*900作為基準尺寸開始設計。從統計數據來看,目前國內PC端用戶屏幕分辨率排名前三的分別是1920*1080、1366*768、1400*900;1440的尺寸實際上是處於中間位置,如果以它為基准設計,最終向上向下響應適配後,相對誤差最小,從而達成用戶體驗的最大公約數。

2. 確定頁面佈局結構

頁面的佈局結構,是頁面基本框架,後續的設計都是在這個大的框架下完成的,所以確定頁面基准設計尺寸後,需要跟交互設計師或產品經理配合,根據實際業務情況討論確定頁面佈局結構。一般來講,後台系統有兩種最典型的頁面佈局結構:左右佈局與上下佈局。

△ 上下佈局

上下佈局的結構在傳統網頁中非常常見,而在後台系統中並不常用。這種佈局的優點是符合用戶認知,遵循用戶從上而下瀏覽頁面獲取信息的習慣;貫穿全屏的導航欄設計也使頁面顯得正式穩重,除卻導航欄之後相對較大的空間也為內容展示提供了比較充足的空間。缺點是頂部一級導航受頁面寬度限制,數量會比較局限,同時導航層級較深時,交互效率也不夠理想。所以該佈局適合那些導航層級較少,內容展示充分的後台系統設計。

△ 左右佈局

擁有側邊導航的左右佈局頁面結構,是在後台系統中更常見的頁面佈局形式。側邊導航欄可以固定也可以收起,相對比較靈活,同時文字橫向排列的形式可以在豎向上展示更多內容,因此側邊導航比頂部導航能容納更多一級內容,而層疊式的內容展示也使得一、二、三級導航內容關聯更為順暢,可擴展性也得到加強;由於側邊欄可以常駐在頁面左側,所以對於右側內容的指示性也優於頂部導航,切換起來也更加方便。但同時,因為側邊欄的常駐,導致右側內容區域空間被擠掉部分,所以相對上下佈局的結構,左右佈局的結構,內容區域空間會比較小;一般為了與頁面其它區域做區分,導航部分會用更深的顏色、安排更多的圖標和文字,這也導致了在視覺上左右佈局的頁面不夠平衡,會有左邊重右邊輕的感覺。

3. 對內容區域建立柵格系統

根據不同的佈局類型,對頁面內容區域建立柵格系統。對於一個利用柵格系統做響應式設計的頁面來講,主要有三大數值需要規範:Column、Gutter、Margin;對於Column、Gutter我們在《超全面!柵格系統及其在後台設計中的應用總結》內容中已經有很詳細的介紹,不再贅述,而Margin是頁邊距,主要確定了內容區域距離頁面邊緣的距離,它分佈在內容區域的兩側,主要作用是通過留白把內容區域與周圍環境隔離出來,從而突出內容區域的顯示,此外還可通過Margin值來調整內容區域顯示比例,使頁面在視覺上有更好的呈現效果。所以一個用於響應式的柵格系統事實上由Columns、Gutters、Margins三部分組成。

△ 上下佈局結構與其對應的柵格系統

△ 左右佈局結構與其對應的柵格系統

4. 根據實際業務內容確定盒子(Box)比例

△ 上下佈局結構的盒子

△ 左右佈局結構的盒子

5. 確定響應策略

響應策略就是當視窗(Viewport)發生變化時,內容區域的元素如何去響應,具體到我們當前的柵格系統,就是Columns、Gutters、Margins 以及由Columns 跟Gutter 組成的盒子(BOX)四者的值(主要是寬度)如何變化,以及在這種變化之下我們頁面的佈局如何調整。

為了方便直觀的向開發工程師與團隊裡的其它小伙伴溝通,我們可以把這個響應策略製作成如下的表格,並在頁面中標註說明相關元素的變化規律,供自己與開發參考。

由於帶左側導航的響應式規則相對複雜,所以我先以它為例跟大家交流下響應策略如何制定。

△ 左右佈局響應策略表

如圖,響應式是以視窗的最小寬度作為基本依據來製定每種寬度下Columns、Gutters 與Margins 的響應策略,也就是說Viewport Min-width 是做出響應的觸發條件,視窗每達到一個最小寬度,就會觸發該寬度下預設的頁面佈局方式,而每種佈局都是在該寬度下的最佳佈局,也是因此,響應式才會在各種複雜分辨率條件下都能給用戶比較好的體驗。

每個視窗寬度的最小值是觸發響應的關鍵值,因此我們給這些用於觸發的關鍵值起了個名字叫「Breakpoint」,每個Breakpoint 觸發一種響應策略,而每個策略持續(保持)的寬度範圍就是圖中綠色矩形的範圍。以圖中第二行矩形為例,該矩形代表的響應策略是:欄目數是8、水槽寬度16(SM)、頁邊距32、側邊欄收起且僅展示圖標,當點擊側邊欄展開圖標時側邊欄以Push 的方式展開,該策略觸發的Breakpoint 是768,保持範圍是577~768。也就是當視窗寬度縮放至768時,欄目數量由上一級的12變為8,水槽寬度由24變為16,側邊導航由完全展開狀態自動收起文字部分,僅保留圖標,然後保持這些關鍵數值不變,直到視窗寬度達到另一個Breakpoint。需要特殊說明的是,第一行矩形中0~576(Min&Fixed)這個範圍的視窗寬度是固定的,也就是在該套響應策略中,頁面最小響應到576的頁面寬度,當視窗到達這個寬度時,瀏覽器會限制視窗進一步縮小,因為當頁面寬度比它還小時已經無法有效展示數據了,所以進一步的縮放是毫無意義的。

左右佈局響應策略動態演示

考慮到gif被壓縮後顯示效果不理想,所以我做了一小段視頻來幫助大家更好的理解上述響應策略在實際頁面中如何發揮作用。視頻鏈接→ https://v.qq.com/txp/iframe/player.html?vid=w0711l8yewc

左右佈局響應策略標註

對於上下佈局的後台系統我們根據內容區域(Container)寬度定義的不同方式,可以把它們分為兩類:

內容區域定寬的後台系統(Fixed-width Container)

內容區域定寬是指內容區域在每一組視窗寬度區間內,都會設定一個最大值(Max-with),當內容區域寬度小於最大值時,區域內元素會響應視窗的變化;達到最大值後,內容區域不再響應視窗的變化,而是寬度保持該最大寬度值不變,此時我們通過增加頁面兩側的margin值來響應視窗的變化。Flex Margin 就是應對此情況的動態頁邊距。

上下佈局響應策略表(內容區域定寬( Fixed-width Container ))

內容區域寬度流式(fluid-width Container)

內容區域寬度流式(fluid-width Container)的後台系統,它的內容區域(Container)距離頁面兩側的頁邊距Margin 是定值,因此視窗有多大內容區域就展示多大。

六、問題

1. 後台系統必須做成響應式麼?

並不是必須的,是否要做響應式主要是根據後台產品面向的用戶來定的。如果是公司內部使用的系統,且員工配備的桌面設備都是有統一的分辨率,就可以不做響應式;如果是面向全網用戶的後台產品(比如淘寶商家的後台管理系統,阿里雲的控制台)或公司(部門)內部的桌面設備並沒有統一的分辨率規格,那麼就需要做成響應式。當然了,更實際的環境中是否做響應式還有技術實現、時間、人員成本等各方面因素的考慮,有時為了盡快的讓業務運營起來,後台系統會做的比較「簡陋」。

2. 為什麼柵格系統沒有適配到移動端的分享?

因為後台管理系統的使用場景主要是工作時間在桌面設備上使用,由於龐雜的數據內容在移動設備上展示困難、操作不便,因而很少有公司會把後台系統響應到移動端使用,所以我們今天說的後台響應式僅針對桌面設備屏幕。

3. 對於iMac4k、5K這類超高分辨率的屏幕如何做響應式設計?

對於左右佈局的後台系統,實際上它是全屏展示的,也就是屏幕有多大就展示多大,因而iMac 的響應策略也是按照左右佈局響應策略表裡的策略來響應。

對於上下佈局,內容區域定寬的後台系統,iMac 的響應策略使用上下佈局響應策略表裡的策略來響應即可;

對於內容區域寬度流式的後台系統,iMac 的響應策略可以參考左右佈局的響應策略表來處理欄目、水槽的變化,頁邊距保持定值即可。

4. 在以8為原子單位的柵格中,Margin需要按8n的規律變化麼?

能以8n的規律變化是最好的,如果無法做到也可以使用其它數值。Margin 是頁邊距,主要作用是通過留白的方式將頁面內容區域與周圍環境隔離區分出來,從而突出內容;一般我們會優先考慮內容區域匹配8n的變化規律,安排完​​內容區域後剩餘的空間自然成為頁邊距(margin)。

5. 響應策略制定的時機是什麼?如何去製定?文中示例的策略表我可以藉鑑套用麼?

響應策略表一般是在主要頁面設計完成,要交付開發實現的時候來跟開發一起商定。這塊需要注意兩點:

如果開始設計時就已確定頁面是要具備響應式的能力,那麼最好開始設計時就去跟開發溝通,看他們現有技術是如何來做響應式的,因為他們很有可能是在用Bootstrap 、Foundation 這類組件庫來做開發,而這些組件庫一般都有自己現成的響應規則,這種情況下我們需要了解開發他們的規則,讓自己的設計匹配已有的策略。當然了,如果他們的規則並不能很好滿足我們的業務需要,一般也是可以在這些組件的基礎上讓開發去修改調整的。

響應策略表只是對響應方式的結果的呈現,而這個策略的製定事實上是從設計開始執行時就要去考慮的,從我個人經驗來講,我一般會挑兩類頁面來做響應策略的研究與適配,一個是控制台(Dashboard)頁面,另一個是表單(Form)頁面。優先規劃這兩個頁面的設計,考慮他們在各個Viewport 下如何佈局如何展示如何縮放變化,並且跟開發溝通想法,聽取意見,制定初步的響應計劃,當這兩個頁面設計完成,就可以更大範圍的執行設計。

文中示例的策略表是基於我自己項目經驗總結而來,具有實際應用價值,可以藉鑑。但我更想做的是通過那個表希望跟大家分享一種與開發交流、溝通的方法和技巧。實際工作中我們並非一定要做出那麼一個經過精心設計細緻考慮的表,我們可能會找張紙畫一畫給開發看就可以了,這塊的重點是如何把我們設計師的想法更可視化更直觀準確的傳達給開發工程師。所以那張表是啟發而非標準。

△ 控制台(Dashboard)頁面示例(素材圖片作者:Coderthemes)

△ 表單(Form)頁面示例

为您推荐

發佈留言

联系我们

联系我们

工作时间:周一至周五,9:00-17:30,节假日休息

返回顶部