詳細(xì)講解移動(dòng)端開(kāi)發(fā)的屏幕、圖像、字體與布局的兼容適配

詳細(xì)講解移動(dòng)端開(kāi)發(fā)的屏幕、圖像、字體與布局的兼容適配「圖文」

作者：ChokCoco

https://www.cnblogs.com/coco1s/p/11463599.html

前端開(kāi)發(fā)中，移動(dòng)端不同設(shè)備的屏幕適配一直是個(gè)繞不開(kāi)的技術(shù)話(huà)題。目前比較流行的方案是類(lèi)似淘寶的flexible。其原理是使用js動(dòng)態(tài)計(jì)算html的font-size，利用rem來(lái)實(shí)現(xiàn)不同寬度的適配。使用js方案雖然比較成熟，但也有它的一些缺點(diǎn)，比如性能損耗，由于js的阻塞加載和動(dòng)態(tài)計(jì)算，頁(yè)面不免會(huì)出現(xiàn)卡頓和閃屏的現(xiàn)象，影響用戶(hù)體驗(yàn)。今天我們不使用js，完全使用css來(lái)實(shí)現(xiàn)適配，來(lái)看看是怎么實(shí)現(xiàn)的吧！

移動(dòng)端屏幕適配

方案一：使用meta標(biāo)簽

在html的head中插入下面的meta標(biāo)簽：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=375, user-scalable=no">

沒(méi)錯(cuò)，是兩個(gè)viewport標(biāo)簽。width=device-width寫(xiě)在上面，width=375寫(xiě)在下面，375就是以哪個(gè)設(shè)備寬度為基準(zhǔn)，現(xiàn)在大部分設(shè)計(jì)稿都是以iphone6的375寬度為基準(zhǔn)做2倍圖。加了上面兩個(gè)mata標(biāo)簽，后面的css就可以完全使用px為單位直接使用，整個(gè)頁(yè)面會(huì)自動(dòng)按設(shè)備寬度進(jìn)行等比例縮放。看下面的演示效果：

方案二：使用css的calc計(jì)算屬性

在css中定義html的font-size為：calc(100vw/3.75)，calc、vw能兼容ios8+和android4.4+，可放心使用，如下：

html {
  font-size: calc(100vw/3.75);
  -webkit-text-size-adjust: 100%;
}

然后在css中，就可以將所有的px單位除以100，得到rem單位了。比如：

.row>div {
  float: left;
  width: .82rem;
  height: .82rem;
  text-align: center;
  line-height: .82rem;
  margin-left: .05rem;
  background-color: #f0f0f0;
}

上面的rem單位轉(zhuǎn)換，建議大家可以使用px2rem這個(gè)插件完成，webpack、vscode都能支持。設(shè)置時(shí)將rootFontSize 設(shè)為100即可。

設(shè)置px2rem參數(shù)

在vscode中，可以使用ctrl+shift+p,選擇px2rem就可以將當(dāng)前頁(yè)面的px全部轉(zhuǎn)換為rem。

px2rem在vscode中的使用方法

當(dāng)然，rem和px可以相互共存，比如我標(biāo)題欄就想要44px高，這樣就不會(huì)縮放了。看下面的演示效果：

純css實(shí)現(xiàn)移動(dòng)端適配

總結(jié)：兩種方案如何選擇

方案一，直接使用html的mata實(shí)現(xiàn)整個(gè)頁(yè)面的縮放，比較適合那些宣傳單頁(yè)或全屏游戲交互類(lèi)，無(wú)法實(shí)現(xiàn)px與rem共存的情況。

方案二，利用了rem來(lái)縮放，可實(shí)現(xiàn)與px共存，在借助px2rem的情況下，能高效方便的實(shí)現(xiàn)適配。

綜合考慮，小編建議使用方案二。你，學(xué)會(huì)了嗎？

天的這篇是以一個(gè)app改版案例，深入淺出的告訴大家如何適配深色模式，同時(shí)給出了正確和錯(cuò)誤的示范，相信對(duì)于目前流行的深色設(shè)計(jì)趨勢(shì)來(lái)說(shuō)，是非常的實(shí)用了！

Google在2019年度I/O開(kāi)發(fā)者大會(huì)上宣布，安卓將會(huì)從系統(tǒng)底層支持深色模式。同時(shí)，我們也會(huì)看到更多支持深色UI的應(yīng)用正在推出。

深色UI很快將成為一種常見(jiàn)的模式，其他應(yīng)用也很快會(huì)遵循這一模式。

在這篇文章中，我將會(huì)以我們的應(yīng)用Shutter Points為例，解釋如何從淺色UI適配深色UI。

優(yōu)化顏色

1. 調(diào)色板

Shutter Points UI的主要顏色是單色為主，目的是為了突出圖片內(nèi)容。主色調(diào)用于主導(dǎo)航欄，標(biāo)簽中使用5種輔色將圖片注釋與對(duì)應(yīng)的類(lèi)別聯(lián)系起來(lái)。

Shutter Points 中的主色和輔色以及在界面中的應(yīng)用截圖

當(dāng)應(yīng)用深色模式時(shí)，亮色和低飽和度的顏色相比于飽和度高的顏色會(huì)更受歡迎。使用亮色的時(shí)候要確保元素易于閱讀，并配合一個(gè)對(duì)比度適中的暗色背景。

使用谷歌提供的顏色編輯器可以為每個(gè)品牌顏色創(chuàng)建一個(gè)自定義色板，然后從中選擇合適的顏色。

根據(jù)谷歌設(shè)計(jì)規(guī)范建議，在使用深色模式時(shí)，一個(gè)好的經(jīng)驗(yàn)法則是將調(diào)色板的色值范圍保持在200左右。

任何一個(gè)深色界面都需要有一個(gè)合適的對(duì)比度，按WCAG 的AA級(jí)標(biāo)準(zhǔn)來(lái)說(shuō)，界面中的文字與背景的對(duì)比度至少要達(dá)到4.5：1。

品牌顏色中的一個(gè)淺色被選為深色模式配色

2. 界面顏色

有了新的配色方案在手，是時(shí)候改變界面的顏色了。深色主題中的所有界面都是以默認(rèn)的深灰色#121212作為基準(zhǔn)的。

在UI組件上添加不同透明度的白色，根據(jù)不同的層級(jí)搭配不同的透明度。

疊加的層次范圍從0%到16%

（譯者注：深色模式中的高度[ elevation ]，準(zhǔn)確的含義其實(shí)是Android開(kāi)發(fā)中的一個(gè)樣式代碼，用來(lái)設(shè)置界面的權(quán)重的，比如android:elevation=”1dp”，層級(jí)就在android:elevation=”0dp”之上了。）

為了表示不同的層級(jí)高度，我們需要在組件的樣式中調(diào)整2個(gè)值：

投影屬性；
疊加的透明度。

無(wú)論使用哪種主題，應(yīng)用正確的高度將確保元素保持在一個(gè)一致的視覺(jué)層次。想知道應(yīng)用中透明度該用多少？這里有一個(gè)表：

（譯者注：我把規(guī)范中的表格幫大家截圖出來(lái)，貼在這里，想看更多規(guī)范詳細(xì)內(nèi)容請(qǐng)見(jiàn)：https://material.io/design/color/dark-theme.html#properties）

組件中通過(guò)使用不同透明度的白色覆蓋來(lái)保持它們?cè)谏钌黝}中的高度一致。

3. 避免大面積顏色

在某些情況下，僅僅將顏色由亮變暗并不會(huì)得到一個(gè)好的結(jié)果。

例如在我們app中的引導(dǎo)頁(yè)中，淺色模式下使用次要顏色能突出內(nèi)容，但在深色模式下，整個(gè)背景都是高飽和度的顏色，卻會(huì)讓界面顯得非常地刺眼。

對(duì)于這些情況，最好是選擇一個(gè)深色背景，然后保留次級(jí)顏色用于標(biāo)題等小面積元素。

大面積的高飽和度顏色不適合用于深色模式

文本優(yōu)化

1. 文字顏色

谷歌設(shè)計(jì)規(guī)范主要強(qiáng)調(diào)了3種文本顏色。

這里主要是通過(guò)修改白色或黑色的不透明度作為顏色值：

強(qiáng)調(diào)文本 -> #FFFFFF (87% opacity)；
中等文本 -> #FFFFFF (60% opacity)；
次級(jí)文本 -> #FFFFFF (38% opacity)。

不同重要級(jí)和不同大小的文本在整個(gè)UI中傳遞出了層次結(jié)構(gòu)，這個(gè)原理也適用于深色主題。

2. 注意對(duì)比度

所有的文本內(nèi)容應(yīng)該易于閱讀并符合標(biāo)準(zhǔn)規(guī)范。網(wǎng)頁(yè)標(biāo)準(zhǔn)WCAG 2.0中規(guī)范AA級(jí)別的文本，普通文本與背景之間的對(duì)比度為4.5：1，大標(biāo)題文本這個(gè)比例為3：1。

在我們的App中，直接把淺色背景下的標(biāo)簽顏色帶到深色模式中，文本開(kāi)始變得很難閱讀。為了得到一個(gè)好的對(duì)比度，所有的標(biāo)簽文本需要修改到深色，識(shí)別度會(huì)更高。

彩色元素上的文本需要改變顏色以保證易讀。

谷歌做了一款測(cè)試工具，幫助確定在哪個(gè)顏色值時(shí)需要將白色文本改為黑色文本，工具的地址在（https://material.io/design/color/the-color-system.html#tools-for-picking-colors）

（譯者注：彩云親測(cè)，還挺方便使用的，建議用電腦端打開(kāi)這個(gè)頁(yè)面試用一下，對(duì)于配色糾結(jié)癥患者，有良好的治愈效果。）

小建議：推薦一款在sketch和Adobe XD中使用的小插件叫Stark，可以方便的測(cè)試出你設(shè)計(jì)的界面可用性。

插畫(huà)和動(dòng)效

如果應(yīng)用包含插畫(huà)和圖形元素，這些也需要做好深色適配工作。如果插畫(huà)有”背景“和”主題“，最好是將背景的飽和度降低，以保證對(duì)于主題的關(guān)注。

Lottie動(dòng)畫(huà)可以通過(guò)在AE中的源文件來(lái)重新導(dǎo)出json文件，來(lái)調(diào)整動(dòng)畫(huà)的明暗適配，很方便。

深色主題插畫(huà)同樣讓用戶(hù)關(guān)注到插畫(huà)的主題內(nèi)容。

總結(jié)

隨著深色主題被引入操作系統(tǒng)級(jí)別，應(yīng)用將需要在不破壞任何原有體驗(yàn)的情況下做出適配優(yōu)化。

深色主題并不是僅僅做簡(jiǎn)單的反色。

設(shè)計(jì)師和開(kāi)發(fā)者必須明確以下幾點(diǎn)：

所有的UI元素必須符合標(biāo)準(zhǔn)的可用性原則；
組件的可視層次結(jié)構(gòu)在不同的顏色主題內(nèi)應(yīng)該是保持一致的；
品牌識(shí)別不應(yīng)該受到主題顏色變化的影響。

原文：https://medium.com/snapp-mobile/design-for-the-dark-theme-9a2185bbb1d5

作者：Pierluigi Rufo

譯者: 彩云Sky，公眾號(hào)：彩云譯設(shè)計(jì)

本文由 @彩云Sky 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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

在線(xiàn)咨詢(xún)

上一篇：3種Javascript圖片預(yù)加載的方法詳解
下一篇：在eBay美國(guó)、歐盟和澳大利亞站點(diǎn)常見(jiàn)物品刊登的安全

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商