什么是vivo官网APP？vivo官网APP（以下简称官网）作为vivo手机的内置应用，是提供vivo产品/服务/权益/资讯/社区的在线官方阵地，也是陪伴vivo的重要角色用户处于“购买”到“更换”的周期。因此，官网的产品体验和设计质量在很大程度上决定了用户对vivo品牌的认知，而保证官网的设计质量是保证vivo品牌正面认知的关键一环。vivo官网APP首页为何改版？随着业务的发展和迭代，官网开始出现设计不一致、质量下降等问题，尤其是首页。因此，设计师发起了官网的设计升级，从首页入手，提高首页界面的统一性和质量。基于用户和业务的角度，首页容器的“品质”优化是关键。官网首页定位为“精选”，聚合产品、权益、服务、社区等内容，满足用户需求。从用户的角度来看，首页有两种场景：1、头部搜索和金刚区是“目的明确的场景”；2.头部下方的内容区域为“无目的场景”。前者提供功能入口，满足用户明确需求；后者显示内容以满足用户的漫游需求。清晰固定的“功能入口”，经过长期的认知训练，转化趋于稳定，优化空间较小；而频繁更新的“内容”的呈现，影响着用户对vivo品牌的印象和浏览欲望。决定主页保留和转换。因此，优化“容器”，更好地将内容呈现给用户，是本次设计升级的核心。从业务角度来看，今年官网首页的内容运营将围绕“人-货-场”的概念展开。通过分析用户（人）的特征，将信息（商品）推送给相应的用户。“场”是信息最终呈现的地方，“容器”。业务方希望用更精简的容器规则来满足不同的“人-货”需求，实现“少样式”和“多场景”，构建内容展示标准，用更精简易懂的样式让用户专注于信息本身。乱、多、不全是首页容器的核心问题浏览首页，发现以下三个问题：1、容器样式首页容器样式多、乱，无章可循。需要结合产品定位和功能需求，梳理容器设计，定义标准。2.信息冗余无效信息大量存在，比如“独立显示芯片”这种毫无意义的信息，还有密密麻麻的社区帖子信息，这些都造成了信息过载。3、信息展示不全首页往往信息不全，对质量影响很大，用户无法获取有效信息。一线品牌官方商城的设计无不提倡“简约”的美学。了解自身问题后，分析各行业顶级品牌的官方商城，了解行业设计趋势。1.简洁的直观印象。看他们的主页，最直观的印象就是“简单”。2、简约从何而来深入分析其设计，我们可以发现简约背后的3个核心共性：有限容器：限制基本容器样式的数量，不超过3种有限信息：限制信息的数量和容量当内容显示在主页上时。清晰优先：图片是界面的视觉焦点，辅以标题/价格/标签等简洁的文字信息，大多数品牌去除了冗长的卖点。3、简约背后的意义“简约”是美好的，但信息简洁、色彩淡雅等特点往往被刻画为“氛围淡”、“吸引力低”，尤其是在销售领域。那为什么这些品牌会在商场的界面设计中引入“简约”的设计美学呢？这背后是消费者的认知心理。在追求功能性和性价比的消费领域，产品满足消费者的物质需求，购买动机基于功能、卖点、价格等利益。因此，在传统快消品的界面设计中，更注重利益和界面氛围对消费欲望的刺激。在追求高品牌溢价的消费领域，产品满足身份认同、价值认同等精神需求，购买动机围绕产品的设计品质以及是否符合自身的社会属性。过分强调利益和界面氛围反而会影响品牌。调性削弱了品牌优势。此类品牌产品的展示更侧重于产品本身，“简约”的设计美学与品牌目标相得益彰。用“极简”概念重塑vivo官网首页，用户认知规律、业务需求、行业趋势分析结果均指向关键词“极简”，带来逻辑严密的有效概念，规则明确，标准统一。顺序体验隐藏在简单的外观中，让用户更加身临其境地体验内容。这种追求简洁表现和有序体验的理念就是我们所说的“极简”，它将指导官网首页的改版。1、容器风格梳理基于“极简主义”的理念。经过梳理和尝试方案，首页基础容器优化为三类：广告容器为传统banner。本次改版统一了首页所有banner的规格和元素构成，文案布局，包括头条banner/新品banner/穿插banner。产品容器是展示产品的容器。新版产品容器统一了信息架构的逻辑，文案限定在三个层次。它提供了“组合”和“横向”两种形式，对应不同的场景。组合容器提供两种规格，信息量相同，可根据业务需要自由组合。卧式容器提供1种规格，根据业务需要选择“卧式”或“卧式滑动”。内容容器是展示品牌和社区内容的容器。容器统一使用上下信息架构，可以根据场景进行不同形式的扩展。2、信息展示优化梳理集装箱类型后，进一步优化信息展示，解决“信息冗余”、“信息展示不全”等问题。产品信息，以热销产品楼为例：信息布局不合理导致手机型号展示不全；可配置的字幕，但更多的文案；通过颜色强调价格，但价格没有优势。新版资讯优化如下：优化资讯排版，为手机型号腾出更多空间，确保完整展示；提炼字幕的核心卖点，使用字数有限的标签来强调；不强调价格，引导用户关注产品和卖点。社区及品牌信息以社区楼为例：首页社区楼采用精选内容引导官网社区，定位为“入口”，也造成了首页信息冗余的问题。因此，新版本首页进行了大幅简化，只展示最核心的“标题/来源/互动”信息，在有限的界面中展示更多的社区帖子。3.视觉规则优化基于容器优化策略，进一步开发了详细的视觉规则。官网首页由大小不一的容器组成。为了更科学地定义容器规格，引入了网格。字体使用OriginOS的自定义字体—汉仪FlagBlack，保证可读性和统一性。在设计界面时，在准确反映信息层次的前提下，避免使用字体大小。比如容器的文案展示，只用了2种字号，保持了极致的统一和简洁。图形语言也值得关注。官网内容信息优先级较高，图文为配角。因此，平面设计更注重语义是否清晰，元素是否统一，形式是否简洁，并不过分追求差异化。基于vivo品牌和产品所体现的圆润、亲切的属性，官网对卡片圆角、图标、标签、按钮等元素进行了统一设置，确保整体协调。颜色系统也是从0到1构建的，在之前的迭代中，颜色的使用只是执行设计师的个人感受，并没有标准化。对此，在vivo品牌蓝的基础上，为官网重新定义了标准色卡，包括常规色标、材质色标和灰阶，系统指导色彩的使用。基于新的容器规则和整体视觉规则，刷新首页后的效果如下图。是结论，但不是vivo官网APP首页改版的结束。从预研、推广、实施到验证历时近半年，付出了相当“复杂”的努力。而我们的“复杂”，就是为用户提供“简单”的设计品质和产品体验。但这还没有结束。首页改版后，全局界面将基于新的设计语言焕然一新，官网设计品质将得到全面提升。赋能vivo品牌，我们在路上。
