編輯導語:響應式設計成為主流設計趨勢,為什麼所有的web端都需要響應式設計,其目的是什麼?作者從其實際角度出發,分享響應式設計思路及方法,供産品和設計同學參考。
響應式設計概念自2010年提出以來,經過十多年的發展與普及,在我國已經有超30%的占有率,且正在以每年5%的速度,逐漸取代傳統靜态布局網頁。經過斷斷續續近兩個月的時間,我把自己在多年産品設計中積累的經驗,整理分享如下。本文将從實際應用角度,介紹響應式設計思路及方法,供産品和設計師同學參考。
一、适用範圍是不是所有的web端産品都需要響應式設計呢?且看分析。
響應式設計之所以會成為主流趨勢,是因為從各利益相關者角度,皆具有極大的優勢。
從公司角度:一次開發成型,節省開發和運維成本,同時能提升品牌一緻性。
從産品角度:在不同的用戶設備上,保持一緻性的使用體驗,輸出穩定的産品價值。
從用戶角度:不限制設備,不限制使用時間和條件,使用更加便捷。
按照網頁對分辨率的适配程度,把布局設計區分為三類。
A. 固定布局設計
實現方法:内容寬度固定,布局不根據設備分辨率改變。
設計方案:出一套設計方案,以像素做單位。
B. 自适應設計
實現方法:前端寫幾套代碼對應不同類型設備(如pc端、平闆、手機),通過檢測視口分辨率,來判斷當前訪問的是哪種設備,從而顯示對應的代碼。
設計方案:先為每類設備分别出一套設計,然後在一類設備的分辨率範圍内指定元素的兼容方式;同一類設備的分辨率差異較小,因此兼容方式相對簡單。
C. 響應式設計
實現方法:前端隻寫一套代碼,通過媒體查詢,指定不同分辨率下頁面如何顯示。
設計方案:通常需要确定一套主設計方案,然後針對不同分辨率指定布局及元素的兼容方式。
注意:
①B和C中,自适應和響應式隻是歸納叫法,後文中提到的前端布局方法并不一一對應。做一個多分辨率适配産品時,前端布局通常需要多種方法結合,比如最常見的自适應 流式布局的結合。
②很多分享提到,響應式設計是指“一套設計方案,适配所有設備”,這種說法并不完全正确。響應式設計的核心是确保用戶體驗一緻,當産品功能和交互較為複雜時,設計師可能需要輸出多套設計方案。
通過以上分析,顯然不是所有的web端産品都需要響應式設計。應根據産品性質、用戶設備、産品使用場景、公司資源(人力配置、時間預算、資金預算)等因素,合理選擇産品設計方案。
二、屏幕斷點根據産品設計需要,人為地把屏幕分辨率劃分出多個臨界點,這一系列臨界點被稱為屏幕斷點。
下圖為百度統計的web端分辨率占比,可以看出占比較多的分辨率有:1920、1536、1366、1440、1600等。
下圖為百度統計的移動端分辨率占比,可以看出占比較多的分辨率有:320、414、375、320等。
微軟的屏幕斷點:
微軟設計文檔中,劃分的顆粒度較粗,僅将分辨率分為小、中、大三段。
Bootstrap的響應式斷點:
極小設備portrait phones(576px,默認)、小型設備landscape phones(≥576px)、中型設備tablets(≥768px)、大型設備desktops(≥992px)、超大設備large desktops(≥200px)。
Ant design 的屏幕斷點:
屏幕斷點劃分為320、576、768、992、1200。
以下這段代碼,通過媒體查詢的方式,指定了不同分辨率下字體大小的變化。這段代碼對應的布局方案中,屏幕斷點是1024,1100,1280,1366,1440,1680,1920。
通過以上可以看出,屏幕斷點并不是固定的。在産品設計中,可參考成熟設計規範中的斷點,也可根據實際需要定義自己的屏幕斷點。一般可通過用戶調研和市場調研,确定目标用戶所使用的主要設備,以此來定義屏幕斷點。
三、自适應設計的實現方法從實現技術角度,彈性布局、自适應布局、流式布局、響應式布局、網格布局,為多端适配提供了可能性。這部分前端開發的知識,感興趣的同行可自行了解。從技術實現的核心,可以總結出以下6種設計手法。
例如在移動端,把一部分功能隐藏起來,并通過點擊以浮層等方式顯示。
例如在移動端,把導航菜單替換為漢堡菜單,把列表替換為卡片等。
例如在電腦端為左右布局,在移動端改變為多級頁面。
其中,前三種多用于屏幕斷點内響應,後三種多用于屏幕斷點間響應。
四、設計方案落地在設計方案實施過程中,通常先确定基準分辨率,作為設計尺寸輸出設計方案,再擴展到其他分辨率。分辨率擴展時遵循的策略,一般有以下3種。
優雅降級:優先考慮PC端,其核心是追求産品完美表達,再降級适配到限制更大的移動端設備;
漸進增強:優先考慮移動端,其核心是保證主要功能的完善性,再做增強擴展,目前業界認可度較高;
用戶設備優先:這是我本人在工作中總結出的一種方法,針對自己的産品,如果可确定目标用戶使用的設備中,某分辨率占比較多,我們可以以此為基準分辨率進行設計,再向其他分辨率擴展。
上下布局:
頂部為導航,導航以下為内容區。在C端産品或内容型網站中較為常見。
T型布局:
一般頂部為最高層級菜單或跳轉鍊接,左側為二級導航,同時也是核心業務相關的導航。一般用于B端後台類産品、工具類産品、或架構較為複雜的其他産品。
左右布局:
一般應用于産品框架較為扁平,但導航層級較多的情況。可與以上兩種布局互相轉換。
T型布局基本包含了其他兩種布局的屬性,故以T型布局為例,詳細介紹響應式設計落地實操方法。
A. 框架層響應
與設計分辨率對比,其他斷點的擴展分别使用了以下方法:
B. 内容區響應
①栅格布局:布局經過嚴格計算,适合大部分B端後台類頁面。
可以看出在栅格響應式中,栅格的寬度、列數,以及每塊元素所占的列數,都會根據分辨率的變化而變化;通過媒體查詢的方式,定義每個斷點對應的列數和元素所占的列數;其核心依然是上面提到的6種方法。
②流式布局:内容區是卡片式流,如圖片、視頻等。
這類布局中,卡片寬度用百分比表示,并設定最大最小尺寸,臨界寬度後改變個數;外邊距寬度(圖中藍色部分)、内邊距寬度(圖中橙色部分)根據設計表達需要,可以改變也可以固定。瀑布流等不規則布局,涉及到定位問題,但基本設計理念一緻。
③針對斷點單獨設計:應用于對視覺表達要求極高,或布局不規律的頁面;本質同自适應布局原理。
在設計方案落地過程中,首先調研用戶使用的設備,據此制定出屏幕斷點;篩選出一個典型的分辨率,在該分辨率下輸出設計方案;然後确定如何向其他斷點擴展,最後形成一整套響應式設計方案。
本文由 @周沫 原創發布于人人都是産品經理。未經許可,禁止轉載。
題圖來自Unsplash,基于CC0協議。
,更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!