ColorOS 13推出响应式框架2.0，为OPPO Find N带来全新交互体验

8月30日，2022OPPO开发者大会如期召开，OPPO最新的操作系统ColorOS13也正式发布。

从会上得知，ColorOS13带来了丰富的视觉设计升级——全新的水生设计。水生设计融入自然的视觉语言，通过富有活力的色彩、灵动轻盈的水生动效、多态质感的图形等系统视觉语言的全面升级，让设计焕发出活力与生机的美好。

全新的色彩体系，主题色由绿色更改为蓝色，是充分考虑到不同国家地区的文化习惯。

ColorOS的水生设计理念还体现在系统图标的设计上。新图标采用更简约的设计元素、更高的对比度色彩，让新图标的呈现更有活力感，也让它们在视觉上更容易辨别，避免蓝色、紫色、红色绿色同时出现，减轻色弱色盲用户的视觉负担，照顾到不同人群的视觉体验，也充分体现了ColorOS13的人文关怀。

我们知道，ColorOS13首批（8月）升级公测机型有FindN、FindX5Pro、FindX5、一加10Pro5G。相对普通直板机型，折叠屏手机FindN上的ColorOS13会有怎样的改变呢？

为了给跨设备、尤其是屏幕尺寸大小不一样的设备，带来一致、连贯的交互体验，ColorOS13推出了响应式框架2.0，通过弹性布局以自适应不同设备的屏幕尺寸，大大减少用户切换不同设备的学习成本。而响应式框架2.0作为系统级优化，并非针对某一单独的应用去设计的，而是全局生效，具体而言，经过我们深入体验后发现主要体现在以下三点：

1. 桌面图标布局。响应式框架2.0能根据不同屏幕尺寸匹配合适的界面比例，比如FindN从内屏切换为外屏时，外屏的尺寸变小，图标也对应变小，让图标之间的间隙变大，视觉上避免拥挤，用户的观感更好、使用起来也更自然。另外，负一屏出现方式变为抽屉式，而不再占用一整个桌面页。

2. 系统应用自适应布局。内外屏的切换显示，不再是简单的放大和缩小，比如在使用尺寸更大的内屏时，天气应用采用了方块布局，信息一览无余，也更适合大屏观看，而到了折叠后的小外屏时，则自动采用上下滑动布局，更符合一般用户的操作习惯；再比如常用的浏览器，加入了标签栏，充分利用了大屏优势；相册图片视频集则有了瀑布流自适应效果，显示图片内容时可充分利用屏幕空间，一行能显示更多的图片。基本上系统自带的应用都做了大屏适配，内容展现更丰富，更好地利用了大屏的优势，与普通直板手机形成了明显的使用体验差别。

3. 操作逻辑自适应。交互确认框的设计，不再只是简单放置在中央，像之前，如果用户在相册里想删除一张图片，选择删除按钮在右侧，而确认按钮默认在中间，我们需要用手指点到比较远的地方才能摁到确认按键，但现在ColorOS13的确认按钮采用了跟随的方式，即删除确认按钮同样在右侧，这样用户操作起来会更方便，也更合理。

编辑点评：我们知道，ColorOS13针对用户需求和操作体验带来多方面的升级，不仅在视觉动画上做了升级，在智慧息屏、智能会议助手、跨屏互联等多种使用场景中也进行了细节完善与优化，具体为新的UI设计、加入大文件夹功能、优化至量子动画引擎4.0、跨端互传直接拖拽更便捷等，可以说为用户体验做出了比较丰富的改进。那既然OPPOFindN也是ColorOS13的首批适配之一，ColorOS13也做出了相应的、针对性适配设计，如果你也是手持OPPOFindN的小伙伴，不妨更新体验吧！

响应式/自适应网站对百度友好的优化

响应式（或者说自适应）是指可以根据设备分辨率进行自动适配已达到友好显示的一种网页设计，目前已经被越来越多的网站所使用，因为相比于传统的搭建一个PC站点，使用响应式/自适应的方式有以下优点：

1. 搭建更简单快捷，缩减成本；

2. 提升用户体验，不需要中间跳转另记域名；

3. PC端和移动端SEO保持一致；

4. 避免重复内容和出错内容；

5. PC端和移动端链接统一。

那么，如何做到对百度友好呢？

搜索引擎优化与用户体验是相辅相承的

要做好SEO优化，首先肯定是需要有一个良好的用户体验。这里就采用响应式设计的网站总结一些需要注意的问题。

网站在移动端的打开速度

移动端网络情况复杂，从2G到4G到WIFI，各种情况下的访问速度如何，这些都是需要考虑的，尤其是响应式的网站，由于是适配PC端的，所以难免会有很多js、css以及图片等，而这些文件如果过多或者过大，对于访问速度肯定是会有影响的。针对这些问题，有如下建议：

1. css文件尽量都合并再一个文件里面，并且进行压缩；

2. js文件放在页脚，多个js文件在条件允许的情况下建议合并并且压缩；

3. 图片建议压缩后上传，不宜过多图片，背景图片可以采用雪碧图合并；

4. 开启Gzip压缩；

5. 有条件可以选用CDN进行静态资源的加速。

图片等资源在移动端的表现

对于图片等资源，建议设置最大宽度（max-width），避免屏幕过小图片过大导致图片溢出的情况。视频等资源，如果考虑移动端播放的话，请不要使用flash播放，因为iOS是播放不了的，如果是使用第三方视频资源的话，比如优酷土豆，获取视频分享代码的时候可以获取通用代码，通用代码是支持移动端播放的。

选择性的显示网页内容

有些内容不适合在手机端显示，比如播放不了的flash视频、悬浮广告，那这个时候我们可以不显示这些内容。对部分移动端不需要或者不友好的内容进行隐藏处理也是可以达到良好的用户体验。

响应式网站优化要点

上面都是响应式网站需要注意的优化细节，那么下面才是优化的重点：

applicable-device标注

优化好了响应式网站，我们还需要做的一件事情就是告诉百度，我是响应式网站！所以这是一个很重要的优化措施，需要在网页head标签内添加以下代码：

<meta name="applicable-device" content="pc,mobile">

参考内容：《百度移动搜索优化指南2.0》