【学UI设计】看百度天气的UI改版，氛围感拉满了！

本篇主要给大家介绍了一些关于【学UI设计】看百度天气的UI改版，氛围感拉满了！和ae特效更改天气教程的这样的话题，希望能得到大家的喜欢。

前言

在百度上搜索“天气”，你会发现搜索结果焕然一新。

与以往的扁平化效果不同，新版卡片更加注重“氛围”，强调视觉深度。在图标设计和显示效率方面也进行了全面升级。下面将从视觉角度分析本次改版的设计思路。

用户反馈分析

对比旧的线上设计，脑海中浮现出“提高效率、降低噪音”、“增强感知”等想法。但这是否代表了整个改造？案是不。对于用户来说，天气结果卡不仅仅是一个工具，它是与用户生活密切相关的功能，更能创造用户对生活的热爱和美好愿景的表达。

在这个想法的支撑下，我们重新审视了天气卡不仅加深了交互体验，我们还希望通过巧妙的设计方法打造一款能够帮助用户快速观察天气的产品。

用户调查收集了一些用户的反馈如何一眼就能看出今天天气好不好？你现在出去的时候下雨了吗？信息太多不知道去哪里找？

那么，如何增强天气感知呢？以及如何提高信息获取效率？作为要解决的首要痛点，我们提炼出了改版的关键词“打造微观天气现场体验”和“提高天气信息获取效率”。

对于天气感知的塑造，不仅是提供更精细的视觉效果和增强的关键信息，更是整合功能和信息获取效率，让用户从前端头部结果中得到快速、最终的满足。

打造微观天气的现场体验

为什么要增强存在感？

在古代，人们通过云的变化和星辰的变化来推测天气；信息时代，人们用数据看太阳有多暖和，风有多暖和；如今进入后疫情时代，我们无数次尝试“看看外面的世界”，却被迫放弃。并结束了。

正因为如此，设计师希望传达出更加真实的天空意境，来抚慰每一位需要自然风光的旅人。

如何构建更具沉浸感的氛围框架？我们尝试了多种解决方案扁平化设计、光准物体设计、漫反射渐变等当前流行的设计手法。

然而，这种同质化的设计方式无法直观地让用户有存在感，因此我们集思广益，找到了新的突破口将微观世界安装在手机中。

纵观历史，可以看到，14世纪写实绘画兴起后，随着镜头技术的发现，画家们利用小孔成像的原理来捕捉整个风景。

基于这样的灵感，我们尝试用镜头映射的思想，通过数字化的设计方法将气氛的变化映射到手机上，形成一个精致迷人的“微观世界”。

构建天气测绘框架

构建微观世界的方法就像家里的一个生态鱼缸，反映海底的某个角落，可以在有限的空间内给人对海底世界之美的无限遐想。

基于以上推导，我们首先剔除漫射光和平面插画的设计思路，专注于设计沉浸式的天气氛围。同时，还要避免在信息过载的情况下，因详细的天气特效而造成的冗余。

重构现有信息焦点，最大化传递天气感知，对整个页面的信息进行梳理并剔除干扰视觉流动的信息，将天气氛围的主视觉置于视觉中心，并处理头部效果通过顶部构建一个更好的具有存在感的微观天气框架。

修改天空的颜色

框架搭建完成后，为了在不影响整体用户信息获取的情况下，还原真实的微场景效果，尝试更加系统化地构建天空的色系统，通过色的细微变化营造出沉浸式的天空景观，连接线上线下统一认知。

在全天的不同时间可以观察到，天空大多采用中饱和度、高亮度的色调作为基本颜色，很少使用高饱和度的颜色。不同的观看距离也会呈现出由深色到浅色的渐变关系。

然而，在区分不同天气条件下自然形态的差异时却遇到了困难如何正确表达晴、阴、阴、雨、霾？

气象行业标准中，“晴”、“阴”、“阴”是根据天空中云面积的百分比来确定的云量为0-10为晴天；云量为0-10为晴天；少云时为10-30；晴天30-70。多云的；大于70，为阴天；晴朗表示天空无云或云量小于10。

以天蓝色为最基本的晴天标准，通过日光斑、云的大小、云的厚度、云的类型等元素来区分阴天和晴天的关系

阴天，水汽指数直线上升，表现为明度和饱和度较低的蓝灰色。云层上选择了高层云，云层位置降低，进一步强调阴天的压抑感。

雾霾与阴天在视觉上很难区分两者的特点都是能见度低且光线暗。但雾霾下的空气相对浑浊，因此在视觉上采用没有色调的灰度变化来体现雾霾中不干净的颗粒感。

我们从很多景观天气图中找到与当前天气相匹配的主色调，并基于主色调建立多个天气场景中的色系统，从不同维度表达对天气氛围的感知。

逐步调整适合每种天气场景的主色和派生色之间的关系，用不同的色调来唤醒人们对天气场景的固有印记。

映射玻璃纹理

如何在手机上表达“微观世界”的概念？我们认为，通过手机屏幕玻璃创造出天气变化是设计的重点。

因此，在设计雨天时，我们并没有直接使用AE粒子来产生较差的下雨效果。相反，我们选择使用湍流位移特效来模拟水滴挂在玻璃上流下来的感觉。

造雪时，为了营造隔着玻璃看到雪的感觉，我先对雪景画面进行了模糊处理，同时为远景做了动态的模糊雪花，然后用具体的雪花形状渲染了场景中的气氛。中间的场景，最后添加了一些旋转的雪花。作为前景点缀，模拟隔着玻璃看雪景时的前、中、后三层景深关系。

此外，其他场景也有精心的设计考虑比如繁星点点的夜空；打雷时微弱发光的乌云；还有沙尘暴时的热风沙尘，都在手机上呈现出栩栩如生的微观世界。

玻璃纹理图标风格抛光

在集思广益图标设计方案时，我们发现一味追求美观很容易忽视天气图标的识别题，因此我们提取了新图标设计的三个核心点

透射以“微观世界”为关键词，营造镜头折射的效果，突出主题。

形状基于iOS和Android系统的天气图标，避免用户识别差异。

光影利用光影搭配百度品牌色和柔和的色，营造立体感。

提高气象信息获取效率

天气结果卡的核心本质是专业、高效的工具属性。通过改版前的用户调查和反馈数据可以发现，用户整体提到“信息冗余”、“查找困难”的频率很高。因此，为了让用户能够快速、准确地获取当天的天气相关指标，我们做了以下修改

解开天空的秘密

根据用户行为和数据对复杂信息进行重新排序，对内容进行优先排序温度、紧急信息通知、当天相关情况优先，其次是其他天气信息、日出日落、穿衣、出行、洗车等生活信息索引等

由此提取气温、紫外线、风、降水四大要素作为专业指标，并根据天气情况干预显示策略。例如，当天下雨时优先考虑降水量指标，刮风时优先考虑风力等级。

短期预报模块为临时预警内容，仅在天气恶劣时临时显示在顶部，可以更及时地传达当前时段的极端环境状况。

更人性化的信息安排

在竞品调研中，我们发现一些轻量级的天气产品以列表的形式垂直排列多日信息，而一些专业的天气则以趋势的形式展示未来的天气趋势。

根据改版前的用户习惯，保留了趋势图的专业展示效果，同时考虑到部分用户以“Z”字型浏览顺序浏览内容，增加了列表模式。

多维度的产品体验

此外，本次改版还涵盖了PC天气卡的重新设计，保证多终端使用场景下的统一体验。

结论

天气修正版上线后，最新的用户调查显示，新版本比旧版本体验更好，天气感知明显。信息阅读节奏和操作流程也得到了提升。同时，在数据指标方面，整张卡片的点击交互性得到了很大的提升。

这进一步证明我们可以利用数字化手段来提高用户对内容的情感感知。作为设计师，我们也可以利用这种方法来激发和缓解用户的积极和消极情绪，以达到相应的设计目的。

在复杂的互联网产品中，人们对好的设计的需求是丰富的、全面的、多元的、立体的，而不再是功能上的“满足”。在设计中创造惊喜蛋，进一步激发用户内心的共鸣，提供情感上的安慰。

最后，后疫情时期的大环境比较低迷。制作沉浸式天气卡的初衷是希望通过这种方式呈现微观世界的美好，为每一位使用百度查看天气的用户“解闷”、“排队天气”。“忧”鼓励人们憧憬未来，有一天能够真正探索世界的每一个角落。

关于【学UI设计】看百度天气的UI改版，氛围感拉满了！和ae特效更改天气教程的话题，大家还有哪里不了解的？希望对诸位有帮助!