頁面適配是產(chǎn)品經(jīng)理在工作中經(jīng)常面臨的一個問題。為什么要適配？怎樣低成本地做適配？本文將會為你解答。

一、為什么要適配

通常產(chǎn)品經(jīng)理在立項(xiàng)前都要思考需求的實(shí)現(xiàn)方式：是原生做？還是H5做？

問題的答案會因?qū)嶋H情況有所不同，如果追求極致體驗(yàn)，那原生效果更好，如果追求短頻快，那就選用H5，或是兩者結(jié)合。

CCtalk是個涉及7大端的跨平臺產(chǎn)品：IOS、Android、PC、Mac、Web、觸屏、小程序。我們在日常項(xiàng)目中（尤其是用戶增長類的項(xiàng)目）越來越多選擇用H5實(shí)現(xiàn)，然后以低成本適配方式應(yīng)用到不同客戶端。

這樣做的好處在于：

1. 降低了開發(fā)成本：原本要涉及iOS、Android、PC（PC和Mac用同一套Qt實(shí)現(xiàn)）、H5這4個端的開發(fā)人員，現(xiàn)在采用內(nèi)嵌頁的方式，可以做到完全不涉及移動端和桌面端，或者僅是入口放置這類比較簡單的工作。
2. 降低了維護(hù)成本：如果有優(yōu)化調(diào)整，可以只改H5頁面，不用各個端都動手。

好處顯而易見，當(dāng)然這也不是件一本萬利的事?？聪旅孢@張App和PC屏幕尺寸的對比圖就明白了，長寬比差異這么大，頁面在適配的時候，有時需要優(yōu)化調(diào)整布局。

如果要真正做到流暢順滑的體驗(yàn)，流式布局是最佳選擇，但是對設(shè)計(jì)和開發(fā)的要求都很高，維護(hù)成本也不小，這讓大多數(shù)團(tuán)隊(duì)望而卻步。

所以還是自動適配寬度、媒體查詢（斷點(diǎn)適配）等相對低成本的方式比較香。

二、框架和頁面如何以低成本的方式做適配

這個問題涉及2個方面：框架和頁面。

先來看看框架，大致有4種：觸屏、App、PC、Web。通常一個項(xiàng)目會涉及其中的幾種，也有少數(shù)情況都涉及。

1. App

CCtalk用的App框架容器是公司橫向團(tuán)隊(duì)提供的Web View，有2種：

1. 常規(guī)的導(dǎo)航樣式。元素包括：返回、頁面標(biāo)題、分享（根據(jù)需要選擇展示或不展示）。安卓和iOS略有區(qū)別，iOS為了導(dǎo)航欄的順滑過渡效果，用的是同一個Web View，所以無法滿足在一系列頁面中部分頁面有分享按鈕，部分頁面沒有分享按鈕。安卓用的不是同一個Web View，所以沒有這個問題。（此處不展開討論）
2. 透明頭部導(dǎo)航。常規(guī)導(dǎo)航無法滿足一些個性化的設(shè)計(jì)需求，所以透明頭部導(dǎo)航就應(yīng)運(yùn)而生了?？梢詫?dǎo)航欄進(jìn)行自定義設(shè)計(jì)，營造沉浸式的體驗(yàn)。

2. PC客戶端

PC客戶端的框架導(dǎo)航包括：返回上一頁，返回首頁。

頁面內(nèi)嵌時，要留意容器導(dǎo)航和頁面導(dǎo)航是否有重復(fù)或遺漏。

假如要保留頁面導(dǎo)航欄，那需隱藏返回按鈕；如果去掉頁面導(dǎo)航欄，則需將導(dǎo)航欄上原有的操作（例如分享）通過懸浮等方式保留。

三、3種常見的適配方法

一般的設(shè)計(jì)流程是：先設(shè)計(jì)觸屏頁面，再去看看PC、Web頁面是否需要調(diào)整。

適配的總原則：提高屏幕利用率。

具體評估標(biāo)準(zhǔn)有3點(diǎn)：

1. 確保頁面比例協(xié)調(diào)——不丑；
2. 減少閱讀障礙——易讀；
3. 減少操作負(fù)荷——易操作。

頁面元素從小到大可分為：控件→組件→模塊→頁面，按照不同維度的復(fù)用，并結(jié)合自身的項(xiàng)目經(jīng)驗(yàn)，整理出3種常見的方法（此處是重點(diǎn)，看我看我）。

1. 保持頁面不變，簡單拉伸適配

這種方法最簡單，幾乎不用動腦子。

具體實(shí)施方式又分兩種：

1. 把頁面拉伸到容器的指定寬度；
2. 將內(nèi)容主體居中顯示，兩邊留白。

案例1-拉到指定寬度：

像帖子這類結(jié)構(gòu)簡單的內(nèi)容頁一般都可以直接拉伸。注意檢查是否有遺漏操作，一般在PC端可以采用懸浮按鈕的方案將移動端的操作保留。

案例2-居中顯示，兩邊留白：

如果頁面直接拉伸給用戶增加了操作成本，可以采用將主體內(nèi)容居中，頁面兩邊留白的方式。

實(shí)名認(rèn)證項(xiàng)目是將同一套實(shí)名認(rèn)證流程復(fù)用到3個不同的使用場景中，所以頁面需要適配觸屏、web、PC彈窗3個框架尺寸。

如果將觸屏頁直接在Web上拉伸，那不僅樣式上不美觀，而且右側(cè)的“修改”、“獲取驗(yàn)證碼”等操作按鈕距離左側(cè)的標(biāo)題太遠(yuǎn)，根據(jù)格式塔的接近原理，右側(cè)的一列藍(lán)色操作反而會被誤以為是一個整體，脫離和主體的關(guān)系，不易于操作。

所以我們的做法是放棄拉伸，而是將主體內(nèi)容居中顯示，頁面兩邊留白。

這種方式雖然簡單，但也要注意可能會涉及一些細(xì)節(jié)調(diào)整：

• 留意容器導(dǎo)航和頁面導(dǎo)航是否有重復(fù)/沖突。這點(diǎn)前面也講過了，此處不再贅述。
• 觸屏端和Web交互習(xí)慣不一致的特殊組件。例如Web頁用下拉框，觸屏端一般是用系統(tǒng)自帶的輪播選擇器。
• 根據(jù)平臺特性增減內(nèi)容/操作。例如在任務(wù)墻的項(xiàng)目中，由于移動端可以追蹤到分享至第三方平臺，但是PC端追蹤不到，所以頁面適配時，在PC端去掉了分享這個任務(wù)。

如果所有頁面都能這么輕松適用于各個不同端，那對設(shè)計(jì)和開發(fā)來說真是省心省力，皆大歡喜。然而現(xiàn)實(shí)不會這么順風(fēng)順?biāo)?，有些頁面放到不同的框架?nèi)會“水土不服”，這時就需要設(shè)計(jì)師出馬做些調(diào)整。

2. 保持頁面框架，調(diào)整模塊內(nèi)的樣式

這種調(diào)整適用于有圖片和列表的頁面。從設(shè)計(jì)層面改動不算大，而且開發(fā)量適中，開發(fā)也比較能接受。

案例1-排行榜

在課程排行榜項(xiàng)目中，有一個榜單列表頁，展示榜單的具體排名和獎勵等信息。

如果直接把觸屏頁面搬到PC端，滿眼是大寫的“丑”！

從設(shè)計(jì)角度分析，用戶的閱讀負(fù)擔(dān)和操作負(fù)擔(dān)也過重，屏幕利用率低，鼠標(biāo)滾了半天也沒看完一半榜單。

所以這個頁面需要設(shè)計(jì)師改造一下才能適配到PC端，具體怎么做呢？

我們來分析一下它的頁面框架和模塊。

頁面從上到下分為：獎勵Banner、tab區(qū)、列表區(qū)和我的排名4部分，結(jié)構(gòu)相對來說比較簡單，在PC端可以保持大的框架結(jié)構(gòu)不變。

因?yàn)橐苿佣耸且钥v向?yàn)橹鞯钠聊?，而PC端是寬屏，需要進(jìn)行調(diào)整的模塊分別是：獎勵banner區(qū)（圖片類），其他名次列表（列表類）。

對于圖片適配，在這個項(xiàng)目中可以采用不同端使用不同比例圖片的方案。

對于列表適配，在PC端由1列調(diào)整為2列，以提升閱讀效率。

案例2-課程售賣頁

圖片的適配處理，除了采用不同比例的多套圖之外，還有另一種方式——保持圖片比例不變，調(diào)整頁面布局。將圖片和標(biāo)題從上下結(jié)構(gòu)改成左右結(jié)構(gòu)。

保持頁面框架，調(diào)整模塊內(nèi)樣式的方法適用于結(jié)構(gòu)相對簡單，有圖片和列表等特殊元素的頁面。

對于圖片適配，有2條思路：

1. 提供不同比例的圖片。優(yōu)點(diǎn)是可以較好的展示圖片，缺點(diǎn)是需要出2套圖。適用于圖片不多，而且非用戶自定義圖片的場景。
2. 保持圖片比例不變，調(diào)整圖片和標(biāo)題的布局。一般是將上下結(jié)構(gòu)改成左右結(jié)構(gòu)，適合用戶自主上傳圖片的場景。

3. 復(fù)用模塊，重組頁面布局

如果頁面模塊多、結(jié)構(gòu)復(fù)雜，靠小改改還是會造成閱讀障礙和操作負(fù)荷，那就要用方法三——模塊級復(fù)用，重組頁面布局。

案例-課時學(xué)習(xí)頁

課時學(xué)習(xí)頁是個多模塊的復(fù)雜頁面，分別有視頻播放區(qū)、課時基本信息、目錄、網(wǎng)師、評價和推薦。整體思路是將頁面結(jié)構(gòu)由1列調(diào)整為左右2列，以此來提高屏幕的利用率。

模塊的具體位置根據(jù)其重要性以及和內(nèi)容主體的相關(guān)度來排布。

例如目錄：從平臺角度希望用內(nèi)容吸引用戶，增加觀看時長；從用戶角度是需要經(jīng)常點(diǎn)擊切換的，對于這種重要性高又操作頻繁的模塊，當(dāng)然應(yīng)該放在第一屏內(nèi)。

例如推薦：和內(nèi)容主體的關(guān)聯(lián)度不高，所以優(yōu)先級低，放在右側(cè)較小的區(qū)域內(nèi)。

在復(fù)用模塊時，要注意是否有手勢操作的場景。如果觸屏端有左右滑動的模塊，在PC端適配有2種做法供參考：

1. 改成點(diǎn)擊操作。例如在模塊上加箭頭，允許用戶通過點(diǎn)擊切換。
2. 由橫向排列改成縱向排列。例如這個案例中的目錄模塊，在手機(jī)端是5個課時一列左右滑動切換，在PC端改成整個課時列表都是縱向排列。

另外，要注意浮層的特殊處理。手機(jī)端一般通過浮層展示更多信息，在PC端適配時，需將浮層調(diào)整為固定模塊。

例如移動端吸底的課程介紹浮層，在PC端改成固定在目錄下方。

以上是我結(jié)合項(xiàng)目經(jīng)驗(yàn)總結(jié)的3種低成本頁面適配方法。當(dāng)然，在具體的適配中還會遇到許多細(xì)節(jié)問題，需要case by case去處理。

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

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