頁面適配讓頁面在不同的屏幕分辨率下可以正常顯示，使頁面布局不會亂，產品設計在做頁面適配時需要注意哪些內容呢？

剛開始做頁面適配時懵懵懂懂只知道我希望我的產品頁面在不同分辨率下都可以正常顯示以提高用戶體驗。

但傻傻弄不清當前技術前景下能適配到什么程度，產品Dog /Designer需要定義哪些具體細節，與UI設計師各自該定義什么，如何協作？

經過了一個項目再加上自己琢磨，總結一下：

頁面適配的目的

頁面適配是指頁面在不同的屏幕分辨率下可以正常顯示(頁面布局不會亂)，或用戶在放大或縮小瀏覽器顯示區域時頁面仍然可以正常顯示。

作為產品, 以上述目的為需求向研發提出是第一步。接下來，就得和研發討論更多細節。需要根研發討論就得先了解下研發的技術背景，不然不但有從Designer被虐成Dog的風險，而且沒法把需求落地。

目前主要有兩種頁面適配方式：自式應布局和響應式布局。以下是兩種方式的簡單描述：

自適應布局與響應式布局

自適應布局(Adaptive Design)： 頁面根據不同的屏幕分辨率自動調整尺寸，但頁面布局基本不會變化。

實例：http://www.ctrip.com/

響應式布局(Responsive Design)： 頁面也會根據屏幕分辨率自動調整尺寸，但不同的分辨率范圍會加載不同的CSS(說人話就是，不同的分辨率下用戶看到的頁面布局可能是不同的)。比如1024px~1920px時，導航菜單在頁面左側，600px~800px時導航菜單顯示為圖標且位于頁面右上方，點擊圖標后顯示導航。

實例：?https://www.microsoft.com/zh-cn/

在網絡上找到以下圖片對自適應布局與響應式布局描述得很形象：

產品在頁面適配中需要定義的內容

無論是自適應布局還是響應式布局都只是實現頁面適配的方法而已，也許再過三五年會出現另一種更先進的實現方式。產品了解技術背景后需要以用戶的視角去定義需求。頁面適配中產品需要定義的需求如下：

1. 屏幕分辨率適配范圍

例如我們項目為SaaS ERP系統，不太考慮移動端應用，而一般筆記本和臺式機分辨率(寬度)在1024~1920間，所以定義適配范圍為1024~1920。也就是用戶用寬度在這之間的屏幕去瀏覽網頁時要求頁面布局不會亂。

范圍定義后，UI設計師一般會按出最小分辨率如1024出高保真設計稿。前端實現按百分比定義頁面元素顯示寬度。當瀏覽器可視區大于1024時，頁面元素寬度如按紐寬度按百分比放大顯示就可以了。

2. 小于適配范圍最小寬度時處理方式

一般產品要求處理方式為不繼續縮小，即頁面布局及頁面元素大小保持不變。如果可視區小于該分辨率，瀏覽器顯示滾動條，用戶此時需要滑動滾動條查看頁面內容。www.taobao.com就是這種效果。

3. 不同分辨率下字體的處理方式

可視區放大或縮小時字體大小是否需要跟著按比率縮放。要求不同對應的前端處理方式不同。我們項目為簡化研發，定義為不需要。前端用px固定字體大小即可。如果需要，字體大小則需要用em或rem定義。

4. 不同分辨率下圖片大小的處理方式

方式一：圖片顯示尺寸按比率縮放。此時，只需要提供一張圖片資源。如 https://www.microsoft.com/zh-cn/。?但可能出現過份放大時圖片顯示模糊的情況。

方式二：不同分辨率范圍加載不分辨率的圖片。優點是可以保證圖片顯示清晰，缺點是需要提供各種分辨率的圖片。

方式三：圖片大小固定不變。優點是既可以保證圖片顯示清晰，又不用提供各種分辨率的圖片。缺點是在頁面縮放時其它元素都在縮放只圖片不變可能造成縮放后的頁面布局顯示效果不是太完美。我們項目選擇方式三。

5. 是否需要不同分辨率顯示不同布局

自適應布局可以滿足以上4點。但如果追求更完美的適配，需要不同分辨率范圍下顯示不同的頁面布局，例如，1024~1920時導航在左側，600~800時導航呈簡化版且顯示到頁面上方，前端一般會用響應式布局實現。

作為一個非技術出身的產品, Get到的響應式布局的大概邏輯就是針對不同的布局寫不同的CSS, 前端兼聽可視區分辨率加載不同的CSS. 例如1024~1920是加載CSS1,?600~800時加載CSS2。

如果需要顯示不同布局，那產品需要與UI設計師合作向研發輸出不同布局的UI設計圖。

以上就是關于在頁面適配中產品需要定義的內容和相關的工作了。也許有很多不正確的理解，歡迎指出。

本文由 @小燕子 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議