B端設計基礎 | 響應式佈局

語言: CN / TW / HK

上篇文章寫了柵格系統,這篇來聊聊響應式佈局。其實我之前對這塊內容也不瞭解。最近通過學習,有了一些認知和思考,分享給大家。

#01

為什麼會出現響應式佈局

隨著智慧手機的興起,人們面對的螢幕更加多樣,既有PC大螢幕,也有手機和PAD這樣的小螢幕。原有的PC端頁面在手機裝置上顯示內容太多,瀏覽體驗變差。於是產品就要考慮在不同終端的顯示效果。

下圖中左側是站酷web 頁面在移動端的展示效果,右側是專門針對移動裝置定製開發的網頁 m.zcool.com.cn ,頁面內容做了精簡、佈局也更加合理。這種就是自適應佈局 (Adaptive Design),

自適應佈局就是根據不同螢幕解析度設計多套佈局方案。每套佈局對應一個螢幕解析度範圍,從而保證介面在不同終端都能夠提供良好的使用者體驗。

後來又出現了響應式佈局(Responsive Design),希望通過一套頁面佈局滿足所有裝置的展示要求。

例如騰訊雲官網, 當改變瀏覽器視窗時,頁面內容會調整佈局和尺寸,從而實現不同解析度裝置下,都能提供良好的介面效果,滿足使用者在多終端的使用者體驗。

當然,響應式佈局主要是用在一些簡單的官網、展示類頁面,展示的內容大致相同。例如阿里雲、騰訊雲官網內容相對較為固定,資訊層級不復雜。另外響應式佈局只有一套介面風格和互動,因此要求資訊內容要相對簡單。

對於複雜的業務系統或者網站,在不同終端內容差異 較大 ,如果使用一套前端程式碼就行不通了,所以這類網站更多的採用自適應佈局。可以針對不同的裝置終端完成相應的設計風格,侷限性會相對較小。 例如西瓜視訊、站酷等多圖類的網站、手機端和PC端 的內容佈局 相差很大。

如何區分自適應佈局和響應式佈局呢?

一個比較簡單的方法就是看網址。自適應佈局因為是多套佈局和程式碼實現,所以不同終端的網站地址也不一樣,而響應式佈局則只有一個網址。

#02

響應式佈局的幾個關鍵點

1、斷點(Break Point)

由於硬體裝置是根本的顯示載體,為了做好響應式設計,必須基於螢幕解析度建立顯示策略,這就是斷點系統。 一般情況斷點系統都是分為手機、平板、PC三個維度。 通過 媒體查詢 技術實現不同「 」 條件下的不同 UI 表現,不同設計體系中斷點值有所差異。

1)TDesign 

在TDesign中,基於不同顯示裝置,共設定了 3 個斷點。斷點系統在兼顧平板端裝置的同時,對 PC 端的斷點進行細分,並考慮不同瀏覽器的特性差異,使柵格系統更好地適配主流的電腦顯示器和瀏覽器。實際使用中,可依據業務需求選取其中的部分斷點,也可以適當使用自定義斷點。

斷點 斷點值 響應區間 槽寬 柵格策略 顯示裝置參考
sm 768px 768-991px 16px 內容區塊根據不同的斷點進行堆疊或縮放 平板
md 992px 992-1199px 超小尺寸電腦
lg 1200px 大於 1200px 大於斷點值時,始終保持水平排列 小尺寸電腦

2)Elemnt

參照了 Bootstrap 的響應式設計,預設了五個響應尺寸:xs、sm、md、lg 和 xl。對應的範圍如下:

2、移動有限的原則

移動優先 就是先開發出一個適合移動客戶端的介面,然後在此基礎上再去根據PC端的情況適配相應的樣式。在響應式設計中優先為螢幕限制更大的移動裝置設計,再擴充套件到大螢幕的 PC 端是一種更有效的設計方法,例如 Alta、Lightning、Fiori 均在設計體系中明確採用 「移動優先」 的設計方法。

3、柵格系統

上一篇文章我們已經講過了柵格系統,在響應式佈局中,柵格系統並不是一成不變的。 Material、Carbon 提出了 「Fluid Grid - 流體柵格」 的概念,核心思想是在較小的螢幕上降低柵格數量,將多餘的柵格自動折行彈性佈局。並且柵格列寬的尺寸也是根據不同的斷點有些差異,從而更好的保證頁面內容的展示效果。

▲Carbon 的柵格定義

對於B端後臺管理產品,還是以PC為主,手機端的網頁功能無法承載大量的資訊展示和業務操作,一般只提供簡單的監控、統計等功能。另外 網頁訪問操作有一些侷限性,所以主流的後臺管理產品在移動端,更多是以App 或者小程式等形式出現。

例如騰訊雲控制檯雖然提供了移動端訪問的功能,但是並沒有做適配,沒有相應的斷點控制,主要是引導使用者使用小程式訪問控制檯。阿里雲則直接不提供手機瀏覽器訪問控制檯頁面,需要通過App 才能登入後臺管理頁面。

#03

如何進行響應式佈局

在佈局時,內容區模組結構如何變化呢?

簡單介紹幾種常見的變化形式: 尺寸調整、佈局重排、顯示隱藏、元件替換

1)尺寸調整

隨著螢幕寬度尺寸調整,內容的寬高也相應 發生變化,這是比較常見的方式。

2)佈局重排

PC端和移動端螢幕比例剛好相反,PC多以寬屏為主,而手機端則以豎屏為主。所以響應式佈局會通過佈局重構來相容兩者。PC端以橫向左右佈局為主,而手機端則會調整為上下佈局。

3)顯示隱藏

手機端螢幕比較小,受限比較多。在PC端可以顯示的內容,在手機端就只能隱藏了,可以把更多的空間留給核心內容。例如在移動端導航選單大都採用收起的懸浮窗,使用者需要手動啟用才能看到具體內容。

4)元件替換

移動端和PC端操作方式、螢幕尺寸不同,響應式佈局中元件的也會隨著螢幕尺寸的變化而變化。例如在PC端較為常見的橫向Tab標籤,在移動端會調整為可摺疊的卡片元件。

總結

響應式佈局主要是技術層面的解決方案,設計師要與開發人員做好溝通協作,基於技術要求給出相應的設計方案。首先要構建基礎的設計原則。例如斷點的範圍,柵格系統等等。然後制定不同斷點範圍內的佈局展示策略。

對於內容調整較大的頁面需要給出相應的參考示例,保證前端人員在開發過程中可以有章可循,避免因為理解的差異,造成後續返工。

—  END  —