整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

详细讲解移动端开发的屏幕、图像、字体与布局的兼容适配

详细讲解移动端开发的屏幕、图像、字体与布局的兼容适配「图文」


作者:ChokCoco

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

前端开发中,移动端不同设备的屏幕适配一直是个绕不开的技术话题。目前比较流行的方案是类似淘宝的flexible。其原理是使用js动态计算html的font-size,利用rem来实现不同宽度的适配。使用js方案虽然比较成熟,但也有它的一些缺点,比如性能损耗,由于js的阻塞加载和动态计算,页面不免会出现卡顿和闪屏的现象,影响用户体验。今天我们不使用js,完全使用css来实现适配,来看看是怎么实现的吧!

移动端屏幕适配

方案一:使用meta标签

在html的head中插入下面的meta标签:

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

没错,是两个viewport标签。width=device-width写在上面,width=375写在下面,375就是以哪个设备宽度为基准,现在大部分设计稿都是以iphone6的375宽度为基准做2倍图。加了上面两个mata标签,后面的css就可以完全使用px为单位直接使用,整个页面会自动按设备宽度进行等比例缩放。看下面的演示效果:

<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>


方案二:使用css的calc计算属性

在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单位转换,建议大家可以使用px2rem这个插件完成,webpack、vscode都能支持。设置时将rootFontSize 设为100即可。

设置px2rem参数

在vscode中,可以使用ctrl+shift+p,选择px2rem就可以将当前页面的px全部转换为rem。

px2rem在vscode中的使用方法


当然,rem和px可以相互共存,比如我标题栏就想要44px高,这样就不会缩放了。看下面的演示效果:

纯css实现移动端适配

总结:两种方案如何选择

方案一,直接使用html的mata实现整个页面的缩放,比较适合那些宣传单页或全屏游戏交互类,无法实现px与rem共存的情况。

方案二,利用了rem来缩放,可实现与px共存,在借助px2rem的情况下,能高效方便的实现适配。

综合考虑,小编建议使用方案二。你,学会了吗?

天的这篇是以一个app改版案例,深入浅出的告诉大家如何适配深色模式,同时给出了正确和错误的示范,相信对于目前流行的深色设计趋势来说,是非常的实用了!

Google在2019年度I/O开发者大会上宣布,安卓将会从系统底层支持深色模式。同时,我们也会看到更多支持深色UI的应用正在推出。

深色UI很快将成为一种常见的模式,其他应用也很快会遵循这一模式。

在这篇文章中,我将会以我们的应用Shutter Points为例,解释如何从浅色UI适配深色UI。

优化颜色

1. 调色板

Shutter Points UI的主要颜色是单色为主,目的是为了突出图片内容。主色调用于主导航栏,标签中使用5种辅色将图片注释与对应的类别联系起来。

Shutter Points 中的主色和辅色以及在界面中的应用截图

当应用深色模式时,亮色和低饱和度的颜色相比于饱和度高的颜色会更受欢迎。使用亮色的时候要确保元素易于阅读,并配合一个对比度适中的暗色背景。

使用谷歌提供的颜色编辑器可以为每个品牌颜色创建一个自定义色板,然后从中选择合适的颜色。

根据谷歌设计规范建议,在使用深色模式时,一个好的经验法则是将调色板的色值范围保持在200左右。

任何一个深色界面都需要有一个合适的对比度,按WCAG 的AA级标准来说,界面中的文字与背景的对比度至少要达到4.5:1。

品牌颜色中的一个浅色被选为深色模式配色

2. 界面颜色

有了新的配色方案在手,是时候改变界面的颜色了。深色主题中的所有界面都是以默认的深灰色#121212作为基准的。

在UI组件上添加不同透明度的白色,根据不同的层级搭配不同的透明度。

叠加的层次范围从0%到16%

(译者注:深色模式中的高度[ elevation ],准确的含义其实是Android开发中的一个样式代码,用来设置界面的权重的,比如android:elevation=”1dp”,层级就在android:elevation=”0dp”之上了。)

为了表示不同的层级高度,我们需要在组件的样式中调整2个值:

  • 投影属性;
  • 叠加的透明度。

无论使用哪种主题,应用正确的高度将确保元素保持在一个一致的视觉层次。想知道应用中透明度该用多少?这里有一个表:

(译者注:我把规范中的表格帮大家截图出来,贴在这里,想看更多规范详细内容请见:https://material.io/design/color/dark-theme.html#properties)

组件中通过使用不同透明度的白色覆盖来保持它们在深色主题中的高度一致。

3. 避免大面积颜色

在某些情况下,仅仅将颜色由亮变暗并不会得到一个好的结果。

例如在我们app中的引导页中,浅色模式下使用次要颜色能突出内容,但在深色模式下,整个背景都是高饱和度的颜色,却会让界面显得非常地刺眼。

对于这些情况,最好是选择一个深色背景,然后保留次级颜色用于标题等小面积元素。

大面积的高饱和度颜色不适合用于深色模式

文本优化

1. 文字颜色

谷歌设计规范主要强调了3种文本颜色。

这里主要是通过修改白色或黑色的不透明度作为颜色值:

  • 强调文本 -> #FFFFFF (87% opacity);
  • 中等文本 -> #FFFFFF (60% opacity);
  • 次级文本 -> #FFFFFF (38% opacity)。

不同重要级和不同大小的文本在整个UI中传递出了层次结构,这个原理也适用于深色主题。

2. 注意对比度

所有的文本内容应该易于阅读并符合标准规范。网页标准WCAG 2.0中规范AA级别的文本,普通文本与背景之间的对比度为4.5:1,大标题文本这个比例为3:1。

在我们的App中,直接把浅色背景下的标签颜色带到深色模式中,文本开始变得很难阅读。为了得到一个好的对比度,所有的标签文本需要修改到深色,识别度会更高。

彩色元素上的文本需要改变颜色以保证易读。

谷歌做了一款测试工具,帮助确定在哪个颜色值时需要将白色文本改为黑色文本,工具的地址在(https://material.io/design/color/the-color-system.html#tools-for-picking-colors)

(译者注:彩云亲测,还挺方便使用的,建议用电脑端打开这个页面试用一下,对于配色纠结症患者,有良好的治愈效果。)

小建议:推荐一款在sketch和Adobe XD中使用的小插件叫Stark,可以方便的测试出你设计的界面可用性。

插画和动效

如果应用包含插画和图形元素,这些也需要做好深色适配工作。如果插画有”背景“和”主题“,最好是将背景的饱和度降低,以保证对于主题的关注。

Lottie动画可以通过在AE中的源文件来重新导出json文件,来调整动画的明暗适配,很方便。

深色主题插画同样让用户关注到插画的主题内容。

总结

随着深色主题被引入操作系统级别,应用将需要在不破坏任何原有体验的情况下做出适配优化。

深色主题并不是仅仅做简单的反色。

设计师和开发者必须明确以下几点:

  • 所有的UI元素必须符合标准的可用性原则;
  • 组件的可视层次结构在不同的颜色主题内应该是保持一致的;
  • 品牌识别不应该受到主题颜色变化的影响。

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

作者:Pierluigi Rufo

译者: 彩云Sky,公众号:彩云译设计

本文由 @彩云Sky 翻译发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议