一文讀懂 I B端設計師要知道的響應式設計

語言: CN / TW / HK

大家好,我是子璐,今天為大家分享的是柵格下篇 「柵格在響應式中的運用」 ,脫離了開發其實柵格的意義並不大

前言

響應式這個名詞相信大部分設計師都不陌生,也能清楚知道它的基本呈現效果。但具體操作及與開發人員協作時,許多晦澀難懂的專業名詞讓人難以理解,你是否也產生過如下疑問:

1. 寬度單位用百分比還是px,或者rem,他們之間的區別是什麼?

2. 響應式和自適應傻傻分不清楚,兩者有何區別和聯絡?

3. 什麼是斷點?什麼是媒體查詢?

一、響應式概況

1.1 歷史長廊

  • 在早期,硬體裝置落後,開發人員開發網頁採用的主要是 固定佈局(也稱為靜態佈局) ,固定佈局是將其內容設定為固定的的畫素寬度(px)

  • 後隨技術發展,瀏覽器增多,開發人員忙著相容各種瀏覽器。出現了 流式佈局和彈性佈局 ,流式佈局內容使用百分比(%)確定寬度。

  • 2010年,CSS3正式上線,同時推出了響應式佈局,2012年推出了 媒體查詢(也叫斷點,這個概念後面再具體展開解釋 )。媒體查詢可以移動內容,改變文字大小,隱藏或顯示內容塊,調整邊距和空白,以及調整其他的CSS樣式。因為有了這兩個東西,上線以後,自適應佈局和響應式佈局就作為更先進的佈局用法而被迅速地使用。

1.2 響應式和自適應的區別

自適應和響應式佈局很多初學者經常會混淆,確實他們的原理是非常相似的,都是檢測裝置,根據不同的裝置採用不同的css。先來看下他們的區別:

自適應(Adaptive Layout)

基於使用者體驗,技術人員至少需要開發三套介面,將差別較大的螢幕尺寸(如PC端、手機端、平板端),去建立多個不同的設計稿,每一個設計稿去對應一個使用者實際的尺寸範圍,根據預先設定的判斷標準範圍進行適配。像大多數的平臺網站、商城網站都使用自適應技術進行開發。

響應式(Responsive)

技術人員只需開發一套介面,而不是為每個終端做一個特定的版本,在程式碼中嵌入一些佈局的判斷,通過檢測不同解析度,程式碼自動進行處理,實現佈局變化、尺寸縮放等,實現不同佈局和內容適配。 此時設計師看到這是不是會有疑問,怎麼判斷一個線上的網址是響應式還是自適應呢?有個很簡單的方法:同一個頁面在不同尺寸的螢幕上訪問時,看網址是否一樣,只有一個網址為響應式,有多個不同的網址為自適應

1.3 如何選擇用自適應還是響應式

  • 使用響應式:網站功能不多,使用者互動少,升級低頻或主要使用場景在桌面端,建議使用響應式。響應式成本較低,從運營的難易和維護的便利性考慮會更好,只要搞定網頁端,其他的也都搞定了。例如官網、B端後臺

  • 使用自適應:需要兼顧使用者在桌面端、Pad端、移動端等多個裝置間的操作習慣,或從頁面個性化多功能方面考慮,自適應設計更合適。因為這樣可以更好的為使用者提供功能全面,使用者體驗更好的介面。例如功能複雜、使用者互動頻繁的網站、電商類網站,使用者量較大的網站選擇自適應更合適。

二、為什麼用柵格系統來進行響應式設計

響應式可以響應的前提有兩點:

1、頁面佈局具有規律性

2、擺脫畫素,元素寬高用百分比代替固定數值,容器按比例實現 

而柵格系統頁面佈局具有規律性、元素寬高可用百分比表示,這兩點正是柵格系統本身就具有的典型特點,我們透過柵格化佈局的設計系統為響應式適配打下良好的基礎。

三、如何利用柵格進行響應式設計

3.1 響應式適配方式

定義響應式規則時,我們除了遵循一些基礎的佈局原則外,還需要因應業務的屬性去做結合。佈局響應式時,內容區模組結構如何變化呢,簡單介紹幾種常見的變化形式:

1)拉伸佈局

佈局不變,內容在螢幕顯示區域內進行相對拉伸,以達到佈局完整。 如下圖微信公眾號後臺的卡片適配採用的就是拉伸佈局的形式,這種實現方式成本低,在響應式中大量的被運用。

2)等比縮放

佈局不變,內容在螢幕的相對位置進行等比例縮放,這種方式不會產生任何佈局重構影響,適配簡單。

一般在帶有圖片顯示場景中使用,如站酷的佈局採用的就是這種形式,需要注意圖片素材放大後清晰度的問題。

3)擴展布局

佈局不變,內容可靈活按照螢幕比例進行增加或減少、擴充套件為多行或多列等。首先需要通過最小單位選擇一個基本尺寸,然後以基本尺寸的倍數構建每個盒子框,就會出現一個個網格

如下圖花瓣的佈局頁面所示,在網頁收縮過程中,經過一個斷點就會自動減少最邊緣元素,其他元素基本保持不變。柵格列數隨著瀏覽器寬度的減少而減少,邊緣圖塊自動換行,或者有時會溢位滾動條。採用此方案需要做資料來源的補足,保證內容展示合理。

4)固定佈局

以畫素px作為頁面的基本單位,內容不會隨著本身視窗寬度進行改變,視窗縮小後時內容會被遮擋

如人人都是產品經理網站所示,整個網站採用的是固定佈局,並沒有進行適配。可用性不強,螢幕解析度過小時內容會被遮擋

5)分欄佈局

佈局改變,充分利用不同裝置、不同螢幕尺寸的差異化,通過分欄佈局形式重新對內容展示做位置變化,進行整個螢幕更合理化的分配。此佈局頁面結構產生變化,需要重構UI框架,有一定的開發成本。 

6)混合佈局

很多時候,單一方式的佈局響應無法滿足理想效果,需要結合多種組合方式,但原則上儘可能是保持簡單輕巧,而且同一斷點內(發生佈局改變的臨界點稱之為斷點,後面內容會講到)保持統一邏輯。否則頁面實現太過複雜也會影響整體體驗和頁面效能。一般通欄、等分結構的佈局適合採用彈性佈局方式,非等分的多欄結構佈局則需要採用混合佈局的實現方式。如antdesign響應方式就採用了拉伸佈局+擴展布局+分欄佈局+固定佈局

3.2 響應式策略

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

這裡我們有個概念需要先了解一下:

斷點:每個視窗寬度的最小值是觸發響應的關鍵值,這個關鍵值即斷點。斷點是具有特定佈局要求的預定螢幕尺寸的範圍,在給定的斷點範圍內,佈局會根據螢幕大小和方向進行調整,超出範圍則相當於達到某個臨界點,介面佈局會發生變化。 以 Ant Design Pro 的頁面進行拆解,用瀏覽器開啟一個響應式網站,檢查元素,右上角會顯示視窗當前的解析度,慢慢縮小視窗的寬度,找到頁面佈局的變化點,就是我們上面說到的斷點或者次斷點。

你會發現它在 576、768、992 的尺寸中,頁面佈局發生變化,然後根據螢幕斷點之間的頁面佈局,採用向下相容的適配方式,響應策略如下圖 需要特殊說明的是,在該套響應策略中,頁面最小響應到576的頁面寬度,當視窗到達這個寬度時,瀏覽器會限制視窗進一步縮小,因為當頁面寬度比它還小時已經無法有效展示資料了,所以進一步的縮放是毫無意義的。

3.3 案例-工作臺適配

上文中我們已經完成了基準尺寸1440*900px的設計,那下面筆者仍然以這個案例教大家如何進行適配。

首先我們先來分析一下,內容區域根據寬度定義一般都兩種方式

1)內容區域定寬

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

2)內容區域寬度流式 

內容區域寬度流式 (fluid-width Container) 的後臺系統,它的內容區域 (Container) 距離頁面兩側的頁邊距Margin是定值,因此視窗有多大內容區域就展示多大 案例是左右佈局,內容區是中後臺的圖表,考慮到全域性還有表單、詳情頁、表格等負責頁面,內容區域柵格一直跟隨視窗變化,複雜佈局下不至於太緊湊,使用者能看到的內容也更多。

所以 案例中我們採用內容區域的寬度流式 。 確定了內容區域的響應方式後,我們再來考慮裡面模組的響應規則,這裡可以參考Ant Design Pro 的響應方式,內容模組採用拉伸+拓展+分欄結合的混合佈局適配方式,如下圖所示

結合各業務模組的展示效果,將螢幕斷點可以劃分為 320、576、768、992、1200,響應策略如下圖: 為了方便直觀的向開發工程師與團隊裡的其它小夥伴溝通,我們可以把這個響應策略製作成如下的表格,並在頁面中標註說明相關元素的變化規律,供自己與開發參考。

Q&A

Q1: 設計稿基準尺寸是如何定的?

A1: 我們一般分兩大類情況來討論這個問題

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

2)系統是平臺級面向全網使用者,或者雖然是公司內部使用,但是並不能統計到內部員工螢幕解析度情況,就可以以1440*900作為基準尺寸開始設計。國內PC端螢幕解析度排名前三的分是1920*1080、1366*768、1440*900;可以看出1920px 佔比最多,但以它作為基在面向小尺寸螢幕的時候多數都很不友好,而1440的尺寸實際上是處於中間位置,如果以它為基準設計,最終向上向下響應適配後,相對誤差最小,從而達成使用者體驗的最大公約數。

Q2: 中後臺系統必須做成響應式的嗎?

A2: 並不是必須的,是否要做響應式主要是根據後臺產品面向的使用者來定的。如果是公司內部使用的系統,且員工配備的桌面裝置都是有統一的解析度,就可以不做響應式;如果是面向全網使用者的後臺產品或公司內部的桌面裝置並沒有統一的解析度規格,那麼就需要做成響應式。當然,實際業務是否做響應式還有技術實現、時間、人員成本等各方面因素的考慮,技術側可以先不實現,為了後期的拓展性,設計側需要先行考慮

Q3: 如何選擇斷點,為什麼不是基於裝置斷點

A3:斷點的設定一定是基於頁面具體內容,並參考網站使用者的裝置解析度資料,設計過程中在一定區間內拉昇或壓縮,已經無法用相同的佈局內容時,必須改變內容展現方式時,而產生的關鍵尺寸的節點。

將斷點設定為與某些常見裝置寬度相同,頁面展現的效果不佳的可能性極高。

那麼完全不考慮裝置嗎?

不是的,裝置仍然很重要,只是不應首先考慮它們。在一開始最好是不要只考慮頁面設計在特定裝置上的顯示效果,而是應該從更通用的訪問裝置,比如手機尺寸、平板電腦尺寸及桌面顯示器尺寸去考慮它。

結束語

柵格篇正式完結撒花啦~

我是子璐,希望文章對你有所幫助    

參考:

https://www.fleede.com/395.html

https://www.zcool.com.cn/article/ZNzg0ODQ4.html

https://www.zcool.com.cn/article/ZODk0NjIw.html

Powered by Froala Editor