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

一、為什么要適配

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

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

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

這樣做的好處在于：

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

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

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

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

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

這個(gè)問(wèn)題涉及2個(gè)方面：框架和頁(yè)面。

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

1. App

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

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

2. PC客戶端

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

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

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

三、3種常見(jiàn)的適配方法

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

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

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

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

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

1. 保持頁(yè)面不變，簡(jiǎn)單拉伸適配

這種方法最簡(jiǎn)單，幾乎不用動(dòng)腦子。

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

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

案例1-拉到指定寬度：

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

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

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

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

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

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

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

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

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

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

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

案例1-排行榜

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

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

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

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

我們來(lái)分析一下它的頁(yè)面框架和模塊。

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

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

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

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

案例2-課程售賣頁(yè)

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

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

對(duì)于圖片適配，有2條思路：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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