今天给家分享海外浏览器视觉风格升级的案例。希望可以把整产品改版过程中的沉淀以及总结验分享给家。整项目从196月始，从设提案到完整方案落线持续了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. 信息认知简化
我们希望用户专注于内，因此对承载内的器、卡片信息的构及样式行了简化设。采用卡片的形式，卡片可以较好的聚合信息，使信息流内信息展示清晰。卡片结构，本次采用清晰的图样式，阅读清晰可见，文字信息部分，允许展示多文案，以解决用户看不全标题文案的痛点
3. 体视觉感知全优化（卡片信息与背景关系）
部分元素处在明确边界区域内，则用户感知这些元素是个体，聚合在起。为使体视觉风格轻量化，背景底色不宜过，到卡片聚合目，卡片进统0.5px浅描边，到明确边界时，不过度表现，与背景生过强分割感，使个卡片与背景有即晰又相统视觉效
4. 天模块全新icon
天模块延续简化处理。和旧版本，性，多色icon相比，更晰，安静。不过度抢掉头部模块视觉吸引，可以满足用户天信息使用功能
5. 化搜索核心功能
搜索框采用大圆角的风格，和旧版相比提高了搜索框的高度，式更饱。当用户进入主页，能够提升对核心的搜索功能的聚焦。为了更好的和整体视觉风格相融，以及凸显搜索域，采用弱阴进行辅助，使整体视觉风格趋于统一
6. 搜索落地页
搜索落地页采用和主页一致的背。icon风延续采用6px描边，棱角切面的风样式。信息排方面，留够的间距，提升品质以及清晰的阅读验。
7. 信息流置顶
信息流置顶，聚焦搜索模，弱色及，载刷示信息样式进行格优，与整体视觉语言达成一致
8. icon风格重新义
icon风格行了降噪处理，依据我们面明确的icon风格，延续棱角切面，线条明朗，概括，结合整体视觉风格，具质感
9. 名站icon优化
名站icon采用25px小圆，成与两边垂相切状态，阵列排布时，体性更强
10. 品牌一致性（菜页）
菜内第一层icon使用品牌辅助色，避免像市上竞品使用品牌色无相关的五彩色。使用辅色可以增品牌的一致性以及有的品牌认知，别竞品的彩色化。使整个产品的用色更有依据，逐渐给用户记忆点
11. 情感化设计（信息流loading）
在loading区域，以在持风一致的前提下，进行个化设计。结合印度网络境不稳定的背，将tab下频道符号化处理，联系来进行连播式设计。传达产品的内容及特。在情感化方面，当网络情况不的场下，能给用户小惊喜
下拉刷新最先展示品牌符号（地球素），在播过程中，依次展示视频，资讯，图片，游戏娱等类目符号。采用路径追踪的形式有效的衔起来五个符号
12. 跟进行业主流趋势（ Dark Mode, 2019年11月已上）
用户使用暗黑模式的场很，一种是在暗光境下减少视疲劳，另外在白天很用户也长期打开深模式。意味着在暗黑模式下首先要考虑产品的读，需要满WCAG 2.0 (Web内容访问指) 中规定的AA级标准，即最低4.5:1的对比度
Material Design 中推暗黑模式默认最底层颜色为#121212，而在这之上的层则使用不同透度的色透层遮罩获得层。层越高，对应的不透度越大，本次Dark Mode计，概括定义7个层，便于后续景拓展计
以下是核心页面视觉效果：
13. 更高效的及时反馈（ 无痕模式）
对无痕模式展示位置进行优化，当用户启动无痕模式时，底tab内icon为清晰的高亮展示，给用户一个明确的状态（决旧版中无痕模式状态开启，用户对状态的感弱的问题）。在窗口落地页内进行开启以及关闭操
14. 桌面挂件（ 无痕模式）
添桌面挂件功，为本次改版增功。添桌面挂件，户快捷启浏览器并迅速定位到搜索，升跃，及搜索渗透率。视觉格上，延续页搜索组件的样式，视觉上会有通透感。从功角看，差异竞的样式
数据验证阶段，行了多不同变的测试版本，针对启动页，站，搜索区域置，以及信息流卡片高度，文字字小，以及部分交互方式，行微调整设。整数据验证的过程中，需根据实际问题，行微调整设，逐变行排除原因，寻找合理的方案。具体的数据表格就不贴出啦，以下罗列的对应数据结论：
- 印度日活提升了2.6%，印尼日活、日活率均有明显提升
- 因信息流/首页交互方式及视觉风格优化，多用户入浏览器后浏览了信息流内，印度印尼的信息流渗透率比版本分别升了18.5%9.36%，且整体看信息流的人均使用时分别升了2.12%6.69%，两的数据升明显
- 因信息流到首页的交互方式改变，名的人均曝光次数（名曝光人数/日）升21.5%
- 上一周内，设置页添加挂件按钮和浮add now 按钮占比分别为15.75%、0.9%，
其余部分推测自桌面挂件直接添加 - 大盘中搜索组件的点击次数和点击人数分别上升7.39%和8.36%，搜索量中来源为挂件的数值升了8.58%，该功对搜索量有正向升
在本改版设计到落地过程相利，也存在些问题。由于涉及体改版落地，分期进开发，在项目前期缺少齐个项目落地范围，在开发过程，有场景缺失，以及Dark Mode 适配范围不明确问题等，这些都需要在过程进补充设计。此在涉及大改版项目，主视觉风格确定后，需要和项目组各色学明确齐开发范围及落地场景，是否分期落地？核心页改版，定涉及很多深层级页逻辑，是否需要适配新风格，适配到哪个度？这些在前期都要齐，才能在案进过程会更利，也降低项目各成员沟成本，团队配合更默契。
欢迎关注作者微信公众：「VMIC UED」
浙公网安备33011002017549号