為什么要適配

通常產品經理在立項前都要思考需求的實現方式：是原生做？還是 H5 做？

問題的答案會因實際情況有所不同，如果追求體驗，那原生效果更好，如果追求短頻快，那就選用 H5，或是兩者結合。

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

這樣做的好處在于：

降低了開發成本。原本要涉及 iOS、Android、PC（PC 和 Mac 用同一套 Qt 實現）、H5 這 4 個端的開發人員，現在采用內嵌頁的方式，可以做到完全不涉及移動端和桌面端，或者僅是入口放置這類比較簡單的工作。

降低了維護成本。如果有優化調整，可以只改 H5 頁面，不用各個端都動手。

好處顯而易見，當然這也不是件一本萬利的事。看下面這張 App 和 PC 屏幕尺寸的對比圖就明白了，長寬比差異這么大，頁面在適配的時候，有時需要優化調整布局。

△ App和PC屏幕尺寸對比

如果要真正做到流暢順滑的體驗，流式布局是最佳選擇，但是對設計和開發的要求都很高，維護成本也不小，這讓大多數團隊望而卻步。所以還是自動適配寬度、媒體查詢（斷點適配）等相對低成本的方式比較香。

框架和頁面

如何以低成本的方式做適配？這個問題涉及 2 個方面：框架和頁面。

△ 框架和頁面

先來看看框架，大致有 4 種：觸屏、App、PC、Web。通常一個項目會涉及其中的幾種，也有少數情況都涉及。（此文暫不討論小程序，有機會再寫一篇關于小程序設計的文章）

1. App

CCtalk 用的 App 框架容器是公司橫向團隊提供的 Web View，有 2 種：

常規的導航樣式。元素包括：返回、頁面標題、分享（根據需要選擇展示或不展示）。安卓和 iOS 略有區別，iOS 為了導航欄的順滑過渡效果，用的是同一個 Web View，所以無法滿足在一系列頁面中部分頁面有分享按鈕，部分頁面沒有分享按鈕。安卓用的不是同一個 Web View，所以沒有這個問題。（此處不展開討論）

透明頭部導航。常規導航無法滿足一些個性化的設計需求，所以透明頭部導航就應運而生了。可以對導航欄進行自定義設計，營造沉浸式的體驗。

△ 2種頭部

2. PC客戶端

PC 客戶端的框架導航包括：返回上一頁，返回首頁。頁面內嵌時，要留意容器導航和頁面導航是否有重復或遺漏。假如要保留頁面導航欄，那需隱藏返回按鈕；如果去掉頁面導航欄，則需將導航欄上原有的操作（例如分享）通過懸浮等方式保留。

△ PC端的全局導航

3種常見的適配方法

一般的設計流程是：先設計觸屏頁面，再去看看 PC、Web 頁面是否需要調整。

響應的總原則：提高屏幕利用率。

具體評估標準有 3 點：

• 確保頁面比例協調——不丑；
• 減少閱讀障礙——易讀；
• 減少操作負荷——易操作。

頁面元素從小到大可分為：控件→組件→模塊→頁面，按照不同維度的復用，并結合自身的項目經驗，整理出 3 種常見的方法（此處是重點，看我看我）。歡迎小伙伴一起討論補充。

△ 3種常見的適配方法

方法一：保持頁面不變，簡單拉伸適配

這種方法最簡單，幾乎不用動腦子。具體實施方式又分兩種：

• 把頁面拉伸到容器的指定寬度。
• 將內容主體居中顯示，兩邊留白。

案例1-拉到指定寬度：

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

△ 帖子頁

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

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

實名認證項目是將同一套實名認證流程復用到 3 個不同的使用場景中，所以頁面需要適配觸屏、web、PC 彈窗 3 個框架尺寸。如果將觸屏頁直接在 Web 上拉伸，那不僅樣式上不美觀，而且右側的「修改」、「獲取驗證碼」等操作按鈕距離左側的標題太遠，根據格式塔的接近原理，右側的一列藍色操作反而會被誤以為是一個整體，脫離和主體的關系，不易于操作。所以我們的做法是放棄拉伸，而是將主體內容居中顯示，頁面兩邊留白。

△ 實名認證頁

這種方式雖然簡單，但也要注意可能會涉及一些細節調整：

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

如果所有頁面都能這么輕松適用于各個不同端，那對設計和開發來說真是省心省力，皆大歡喜。然而現實不會這么順風順水，有些頁面放到不同的框架內會「水土不服」，這時就需要設計師出馬做些調整。

方法二：保持頁面框架，調整模塊內的樣式

這種調整適用于有圖片和列表的頁面。從設計層面改動不算大，而且開發量適中，開發也比較能接受。

案例1-排行榜

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

如果直接把觸屏頁面搬到 PC 端，滿眼是大寫的「丑」，從設計角度分析，用戶的閱讀負擔和操作負擔也過重，屏幕利用率低，鼠標滾了半天也沒看完一半榜單。

△ 直接拉伸——丑&不好用

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

我們來分析一下它的頁面框架和模塊。頁面從上到下分為：獎勵 Banner、tab 區、列表區和我的排名 4 部分，結構相對來說比較簡單，在 PC 端可以保持大的框架結構不變。

△ 頁面結構

因為移動端是以縱向為主的屏幕，而 PC 端是寬屏，需要進行調整的模塊分別是：獎勵 banner區（圖片類），其他名次列表（列表類）。對于圖片適配，在這個項目中可以采用不同端使用不同比例圖片的方案。對于列表適配，在 PC 端由 1 列調整為 2 列，以提升閱讀效率。

△ 保持頁面框架，調整圖片和列表模塊樣式

案例2-課程售賣頁

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

△ 課程售賣頁

小結：

保持頁面框架，調整模塊內樣式的方法適用于結構相對簡單，有圖片和列表等特殊元素的頁面。

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

• 提供不同比例的圖片。優點是可以較好的展示圖片，缺點是需要出 2 套圖。適用于圖片不多，而且非用戶自定義圖片的場景。
• 保持圖片比例不變，調整圖片和標題的布局。一般是將上下結構改成左右結構，適合用戶自主上傳圖片的場景。

方法三：復用模塊，重組頁面布局

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

案例-課時學習頁

課時學習頁是個多模塊的復雜頁面，分別有視頻播放區、課時基本信息、目錄、網師、評價和推薦。整體思路是將頁面結構由 1 列調整為左右 2 列，以此來提高屏幕的利用率。

模塊的具體位置根據其重要性以及和內容主體的相關度來排布，例如目錄：從平臺角度希望用內容吸引用戶，增加觀看時長；從用戶角度是需要經常點擊切換的，對于這種重要性高又操作頻繁的模塊，當然應該放在第一屏內。例如推薦：和內容主體的關聯度不高，所以優先級低，放在右側較小的區域內。

△ 課時學習頁

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

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

另外，要注意浮層的特殊處理。手機端一般通過浮層展示更多信息，在 PC 端適配時，需將浮層調整為固定模塊。例如移動端吸底的課程介紹浮層，在 PC 端改成固定在目錄下方。

△ 浮層的適配

以上是我結合項目經驗總結的 3 種低成本頁面適配方法。當然，在具體的適配中還會遇到許多細節問題，需要 case by case 去處理。

文章來源：優設    作者：魚游設計