墨迹天气8.0版本尝试

项目背景

作为一款历经近十年，在全球拥有5亿用户的天气类APP，在天气APP系统化的情况下，面临着商业变现、用户安装量、功能使用率、用户年轻化等挑战，用户除了想看到更加准确的天气之外，与天气相关的功能诉求也越来越多，拓展功能也是更能挑战系统级天气APP增加用户使用率的方法之一。

所以本次升级不止视觉层面的优化，同时也在用户体验、信息分层、功能拓展方面进行了升级。

(但是由于升级过大导致时间成本过高未能上线，变成了你们线上所看到的样子...)

产品梳理

· 信息集中

问题：7.0版本页面，气温/湿度/空气质量和下方天气信息同属于基础天气概况但是却不在同一区域显示，造成了视觉中心仅存于气温/湿度/空气质量，而下方天气的附属详细信息被疏漏，用户在查看页面时视觉动线也会非常长。首屏展示希望只是显示今日天气状况。

解决：

气温/湿度/空气质量信息下移，使之与下方基础信息内容在同一视觉中心，规整信息并减短视觉动线。底部今/明日天气信息调整为本日分时天气状态，而明日天气归入下一模块15天天气状况。

· 信息清晰

问题：

页面采用深灰色和毛玻璃样式，在半透明背景下很多元素及文字会显示不清晰。半透明模块背景下采用间隔式页面布局也会造成多模块区分不清的情况。

解决：

采用纯色底色使页面中的元素不受背景干扰以保证信息清晰不被干扰；或提亮底色采用白底黑字的方式使信息清晰和颜色饱和度/纯度更高。

· 短时降雨

问题：

短时降雨功能作为天气APP的一个重要功能，需要做到不降雨时不打扰用户，但是又可突出功能；而降雨时能快速查看降水曲线和雷达图。而目前版本降雨入口层级较低不容易发现，且降雨时需跳转页面造成用户体验不好。

解决：

降雨是基于雷达图的功能，直接展示雷达图可提升用户认知使其快速视觉定位降雨功能。

· 个性功能

问题：

现实中很多场景都会与天气条件挂钩，可拓展性较强。目前天气类拓展功能，如：洗车、钓鱼、出行等强相关功能均位于页面下方，且功能堆积不方便查找。同时造成使用率较低很多用户不知道的情况。

解决：

首屏露出主推天气相关功能或用户常用功能，甚至之后功能增加后可用户自定义常用功能以方便在查看天气后完成相关需求操作。

· 设计方案尝试

多种方案的尝试，综合视觉效果与交互体验。

设计方案

· 页面结构分层

首页分为：地图层，功能层，信息层。

· 地图层

产品中空气质量、降雨、台风、樱花、油菜花、枫叶、积雪、滑雪等功能都是基于地图上展示的信息。除了空气质量和降雨外，其他功能都是根据季节上线的业务，所以这么功能展示在地图上既可以降低信息层级方便查看，也不会功能同时出现造成信息过载的情况。

· 功能层

前期主推四个功能默认展示，可根据看天气为主/功能为主的需求收起/展开。后期增加功能后设置可移动使用户可根据自己的需求在首页展示自己常用的功能。

背景色根据天气的不同改变，使页面整体颜色融洽。

· 信息层

天气背景采用感受型大场景，比起之前小场景情感化更能感受到天气变化。信息集中处理更便于用户一眼看到所有基础信息。

设计对比

· 主页面设计

默认展开个性功能，用户可以自行收起，避免打扰用户。模块内容采用卡片式，方便信息扩展的同时也保证了多内容/细碎内容模块的整体性。

· 天气页面设计

增大地图面积，使地图成为页面主体，可承载更多的天气/气候变化，扩展性更强。

· 天气详情设计

采用与首页相同的“与天气背景色相同”的设计，增加用户感知。增强选择日期后全局改变的视觉效果。强化详细信息，使用户更快获知今日天气所有信息。

· AQI设计

背景颜色根据空气质量变换，主要信息与辅助图形左右展示，既突出了主要信息增加用户的颜色感知又降低了顶部区域的面积使得辅助信息更多的展示。

· 图标设计

统一APP内图标，保证图标视觉重量感相同。并用两种圆度规范图标圆角，保证图标风格统一。

总结展示

在墨迹天气8.0前，一直是小的版本迭代，都是微调位置和样式来进行升级，随着广告的越来越多，在当前版式下能调整的内容越来越少。刚接到8.0改版的时候只有“突出短时（降雨），个性化功能”两个需求说明，其他都需要设计这边来尝试。开始总陷入在视觉样式优化，虽然个性化功能可直接加在页面顶部，但却找不到短时功能可优化的位置，导致用户感知也很弱，后来觉得大场景的气候展示更能强化用户感知，就尝试强化用户感知的方案，每次调整完一个版本就使用“Principle”做出可操作页面进行尝试，对于不友好的交互再进行优化，改善用户体验得到了这个个人比较满意的版本。