国产亚洲精_丰满老熟好大的大bbb_男男激情做爰视频免费观看_欧美一区二区三区精品国产

為了追求高性價(jià)比,我們通常這樣來(lái)做頁(yè)面適配

2020-6-6    資深UI設(shè)計(jì)者

為什么要適配

通常產(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è)谌粘m?xiàng)目中(尤其是用戶增長(zhǎng)類的項(xiàng)目)越來(lái)越多選擇用 H5 實(shí)現(xiàn),然后以低成本適配方式應(yīng)用到不同客戶端。

這樣做的好處在于:

降低了開(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)單的工作。

降低了維護(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)整布局。

△ App和PC屏幕尺寸對(duì)比

如果要真正做到流暢順滑的體驗(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è)面。

△ 框架和頁(yè)面

先來(lái)看看框架,大致有 4 種:觸屏、App、PC、Web。通常一個(gè)項(xiàng)目會(huì)涉及其中的幾種,也有少數(shù)情況都涉及。(此文暫不討論小程序,有機(jī)會(huì)再寫(xiě)一篇關(guān)于小程序設(shè)計(jì)的文章)

1. App

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

常規(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)討論)

透明頭部導(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種頭部

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ò)懸浮等方式保留。

△ PC端的全局導(dǎo)航

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

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

響應(yīng)的總原則:提高屏幕利用率。

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

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

頁(yè)面元素從小到大可分為:控件→組件→模塊→頁(yè)面,按照不同維度的復(fù)用,并結(jié)合自身的項(xiàng)目經(jīng)驗(yàn),整理出 3 種常見(jiàn)的方法(此處是重點(diǎn),看我看我)。歡迎小伙伴一起討論補(bǔ)充。

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

方法一:保持頁(yè)面不變,簡(jiǎn)單拉伸適配

這種方法最簡(jiǎn)單,幾乎不用動(dòng)腦子。具體實(shí)施方式又分兩種:

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

案例1-拉到指定寬度:

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

△ 帖子頁(yè)

案例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è)面兩邊留白。

△ 實(shí)名認(rèn)證頁(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)整。

方法二:保持頁(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è)面結(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 列,以提升閱讀效率。

△ 保持頁(yè)面框架,調(diào)整圖片和列表模塊樣式

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

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

△ 課程售賣頁(yè)

小結(jié):

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

對(duì)于圖片適配,有 2 條思路:

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

△ 課時(shí)學(xué)習(xí)頁(yè)

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

  • 改成點(diǎn)擊操作。例如在模塊上加箭頭,允許用戶通過(guò)點(diǎn)擊切換。
  • 由橫向排列改成縱向排列。例如這個(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 去處理。

文章來(lái)源:優(yōu)設(shè)    作者:魚(yú)游設(shè)計(jì)

日歷

鏈接

個(gè)人資料

存檔