vivo海外浏览器如何实现视觉焕新.docxVIP

vivo海外浏览器如何实现视觉焕新 今天给大家分享海外浏览器视觉风格升级的案例，希望可以把整个产品改版过程中的沉淀以及总结经验分享给大家。 整个项目从19年6月开始，从设计提案到完整方案落地上线持续了5个月。前3个月从【方案探索】到【方案定稿】进行了多维度的尝试，后续2个月从【开发落地】到【数据验证】，针对不同变量的数据结论，进行设计微调整，以达成【正式上线】标准。 接下来，先从背景部分给大家介绍下整个项目背景。 一、背景部分 外销浏览器整体视觉样式过于陈旧、以及体验方面存在很多问题、品牌属性较弱、缺乏一定的品牌认知、用户在使用体验上存在痛点等。 因此需要进行全面的体验优化升级，改善当前存在问题，以及提升品牌属性，增强品牌一致性。给用户提供良好的使用体验，能更好的使用我们的产品。 1. 主视觉样式同海外主流产品对比 以下是海外浏览器线上效果，以及对比海外市场的Google系、Chrome产品视觉效果，海外主流产品的视觉风格更轻量化，简洁，把视觉聚焦点放在产品内容上，因此我们的产品在视觉上有很大的优化空间（关于海外用户对APP风格倾向的用研结论显示，海外用户更倾向于Chrome及谷歌系产品风格）。 2. 可用性问题梳理 本次体验优化，在重新定义视觉风格的基础上，可同步解决目前存在的体验问题。因此和产品运营同学同步优化建议，以及提取可用性测试问题。 经过讨论并达成一致，整理待解决问题图下： 3. 交互及UI整理待改进问题 在梳理完成可用性问题后，设计侧进行了体验问题走查工作，梳理体验上存在的待改进问题点，对问题进行筛选及整理，梳理出目前待解决的体验问题如下，后续视觉风格定义过程中，会同步解决对应问题。 二、竞品风格梳理 1. Google 整体视觉风格清爽，干净，没有过多的装饰，善于运用轻量化卡片，整合信息，少量使用微渐变区分不同信息。 整体品牌色使用较谨慎，避免过度使用品牌色，保持整体性及简约印象。 icon风格保留棱角，有质感，整体感更强。 2. Chrome 内容版式布局上较舒适，没有拥挤感，层级清晰，阅读体验好。 3. YouTube YouTube采用沉浸式，内容呈现清晰，视频封面/icon元素/模块间空间，整体比例较大，区别于国内APP，单屏可展示内容相对会减少，但足够清晰，保留了呼吸感。 综上，目前海外主流竞品均采用简洁留白，保持视觉清晰，慎重使用品牌色，避免主色过度使用，将视觉重心聚焦在内容上，icon风格为棱角切面。整体视觉风格和产品提议及用户期望的风格方向一致，也便于我们后续确定视觉风格方向。 三、风格提炼 基于调研用户期望的风格方向，以及产品提议的视觉风格定位均倾向于谷歌系等海外产品风格。因此视觉设计前期进行了相关的竞品风格梳理整理，提炼主流竞品风格如下：保持简洁清爽，轻量化，品牌化，层级清晰，保留呼吸空间。 icon风格棱角切面处理： 品牌主色辅色定义： 1. 线上品牌色使用效果 整体视觉感受，主色饱和度过高，在白色区域及模块，视觉对比过高亮，会有刺眼的感受，阅读使用体验效果不佳。 2. 海外产商竞品品牌色 小米，oppo，三星整体品牌色彩倾向蓝色及同色系。三星，oppo品牌色使用整体性更好，在产品设计中品牌主色使用相对克制。 3. 产品设计中品牌主色使用定位 传递信息：界面清晰，明确的层级关系，高效舒适的阅读体验 引导操作：清晰合理的操作引导 品牌价值：品牌一致性，品牌归属 4. 主色定义 基于项目组决策产品定位延续不变的背景下，本次主色定义过程中延续使用旧版本中产品定位，即提供稳定，安全，快速的信息获取服务。 从这三种主要情感要素进行色彩探索及提炼。 色彩不只是一种视觉语言，它更是传播情感的途径。根据对产品定位的细分拆解，结合产品的感知路径，从品牌及体验纬度提炼产品可传递的情感基因。 结合产品定位相关的核心关键词，联想接近定位的品牌主色，同时可覆盖到产品定位的颜色为蓝色，能够表达稳定，安全，快速，同时有科技色彩。 品牌色优化方向往简洁，干练，富有科技感的方向贴近，因此选择方案3为主色方向。同时定义中性色色彩层级，便于指导后续产品设计。 5. 品牌延展覆盖场景 6. 同色系辅色延展定义 同色系是指在色环上相距不超过45度的两种颜色，在主色的同色系范围内，我们可以选择主色的同色系范围内的颜色来丰富产品配色，可以选出同色系颜色作为延展色使用。 四、设计单元 1. 设计语言概述 结合产品风格定位，视觉语言使用柔和圆角为基础。 圆角风格更接近目前主流视觉风格，圆角的包容性更强，复用场景丰富，更容易达成统一性。同时延续外销“地球”的视觉符号，综上，整体搜索、名站、卡片、以及btn、均采用圆角为基础进行统一设计。 2. 信息认知简化 我们希望用户更专注于内容，因此对承载内容的容器、卡片信息的构成及样式进行了简化设计。