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

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

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

經(jīng)過了一個項目再加上自己琢磨，總結(jié)一下：

頁面適配的目的

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

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

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

自適應(yīng)布局與響應(yīng)式布局

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

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

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

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

在網(wǎng)絡(luò)上找到以下圖片對自適應(yīng)布局與響應(yīng)式布局描述得很形象：

產(chǎn)品在頁面適配中需要定義的內(nèi)容

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

1. 屏幕分辨率適配范圍

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

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

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

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

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

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

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

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

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

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

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

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

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

如果需要顯示不同布局，那產(chǎn)品需要與UI設(shè)計師合作向研發(fā)輸出不同布局的UI設(shè)計圖。

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

本文由 @小燕子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議