2020-6-6 資深UI設(shè)計(jì)者
通常產(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)用到不同客戶端。
這樣做的好處在于：
降低了開發(fā)成本。原本要涉及 iOS、Android、PC（PC 和 Mac 用同一套 Qt 實(shí)現(xiàn)）、H5 這 4 個端的開發(fā)人員，現(xiàn)在采用內(nèi)嵌頁的方式，可以做到完全不涉及移動端和桌面端，或者僅是入口放置這類比較簡單的工作。
降低了維護(hù)成本。如果有優(yōu)化調(diào)整，可以只改 H5 頁面，不用各個端都動手。
好處顯而易見，當(dāng)然這也不是件一本萬利的事?？聪旅孢@張 App 和 PC 屏幕尺寸的對比圖就明白了，長寬比差異這么大，頁面在適配的時候，有時需要優(yōu)化調(diào)整布局。
△ App和PC屏幕尺寸對比
如果要真正做到流暢順滑的體驗(yàn)，流式布局是最佳選擇，但是對設(shè)計(jì)和開發(fā)的要求都很高，維護(hù)成本也不小，這讓大多數(shù)團(tuán)隊(duì)望而卻步。所以還是自動適配寬度、媒體查詢（斷點(diǎn)適配）等相對低成本的方式比較香。
如何以低成本的方式做適配？這個問題涉及 2 個方面：框架和頁面。
△ 框架和頁面
先來看看框架，大致有 4 種：觸屏、App、PC、Web。通常一個項(xiàng)目會涉及其中的幾種，也有少數(shù)情況都涉及。（此文暫不討論小程序，有機(jī)會再寫一篇關(guān)于小程序設(shè)計(jì)的文章）
1. App
CCtalk 用的 App 框架容器是公司橫向團(tuán)隊(duì)提供的 Web View，有 2 種：
常規(guī)的導(dǎo)航樣式。元素包括：返回、頁面標(biāo)題、分享（根據(jù)需要選擇展示或不展示）。安卓和 iOS 略有區(qū)別，iOS 為了導(dǎo)航欄的順滑過渡效果，用的是同一個 Web View，所以無法滿足在一系列頁面中部分頁面有分享按鈕，部分頁面沒有分享按鈕。安卓用的不是同一個 Web View，所以沒有這個問題。（此處不展開討論）
透明頭部導(dǎo)航。常規(guī)導(dǎo)航無法滿足一些個性化的設(shè)計(jì)需求，所以透明頭部導(dǎo)航就應(yīng)運(yùn)而生了?？梢詫?dǎo)航欄進(jìn)行自定義設(shè)計(jì)，營造沉浸式的體驗(yàn)。
△ 2種頭部
2. PC客戶端
PC 客戶端的框架導(dǎo)航包括：返回上一頁，返回首頁。頁面內(nèi)嵌時，要留意容器導(dǎo)航和頁面導(dǎo)航是否有重復(fù)或遺漏。假如要保留頁面導(dǎo)航欄，那需隱藏返回按鈕；如果去掉頁面導(dǎo)航欄，則需將導(dǎo)航欄上原有的操作（例如分享）通過懸浮等方式保留。
△ PC端的全局導(dǎo)航
一般的設(shè)計(jì)流程是：先設(shè)計(jì)觸屏頁面，再去看看 PC、Web 頁面是否需要調(diào)整。
響應(yīng)的總原則：提高屏幕利用率。
具體評估標(biāo)準(zhǔn)有 3 點(diǎn)：
頁面元素從小到大可分為：控件→組件→模塊→頁面，按照不同維度的復(fù)用，并結(jié)合自身的項(xiàng)目經(jīng)驗(yàn)，整理出 3 種常見的方法（此處是重點(diǎn)，看我看我）。歡迎小伙伴一起討論補(bǔ)充。
△ 3種常見的適配方法
這種方法最簡單，幾乎不用動腦子。具體實(shí)施方式又分兩種：
案例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)容居中顯示，頁面兩邊留白。
△ 實(shí)名認(rèn)證頁
這種方式雖然簡單，但也要注意可能會涉及一些細(xì)節(jié)調(diào)整：
如果所有頁面都能這么輕松適用于各個不同端，那對設(shè)計(jì)和開發(fā)來說真是省心省力，皆大歡喜。然而現(xiàn)實(shí)不會這么順風(fēng)順?biāo)?，有些頁面放到不同的框架?nèi)會「水土不服」，這時就需要設(shè)計(jì)師出馬做些調(diào)整。
這種調(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)不變。
△ 頁面結(jié)構(gòu)
因?yàn)橐苿佣耸且钥v向?yàn)橹鞯钠聊?，?PC 端是寬屏，需要進(jìn)行調(diào)整的模塊分別是：獎勵 banner區(qū)（圖片類），其他名次列表（列表類）。對于圖片適配，在這個項(xiàng)目中可以采用不同端使用不同比例圖片的方案。對于列表適配，在 PC 端由 1 列調(diào)整為 2 列，以提升閱讀效率。
△ 保持頁面框架，調(diào)整圖片和列表模塊樣式
案例2-課程售賣頁
圖片的適配處理，除了采用不同比例的多套圖之外，還有另一種方式——保持圖片比例不變，調(diào)整頁面布局。將圖片和標(biāo)題從上下結(jié)構(gòu)改成左右結(jié)構(gòu)。
△ 課程售賣頁
小結(jié)：
保持頁面框架，調(diào)整模塊內(nèi)樣式的方法適用于結(jié)構(gòu)相對簡單，有圖片和列表等特殊元素的頁面。
對于圖片適配，有 2 條思路：
如果頁面模塊多、結(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)。
△ 課時學(xué)習(xí)頁
在復(fù)用模塊時，要注意是否有手勢操作的場景。如果觸屏端有左右滑動的模塊，在 PC 端適配有 2 種做法供參考：
另外，要注意浮層的特殊處理。手機(jī)端一般通過浮層展示更多信息，在 PC 端適配時，需將浮層調(diào)整為固定模塊。例如移動端吸底的課程介紹浮層，在 PC 端改成固定在目錄下方。
△ 浮層的適配
以上是我結(jié)合項(xiàng)目經(jīng)驗(yàn)總結(jié)的 3 種低成本頁面適配方法。當(dāng)然，在具體的適配中還會遇到許多細(xì)節(jié)問題，需要 case by case 去處理。
文章來源：優(yōu)設(shè) 作者：魚游設(shè)計(jì)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com