2023年12月17日发(作者：以莹琇)
关于vivo官网的设计分析与改进意见
1.网站概述
VIVO官网是企业整个商务网站中的一部分，它是企业的第一个系统，但决不应该是最后的一个。因此，所以他应当具有开放性、符合相关技术标准的系统，使其能与原有系统（如果有的话）协调工作，并与将来新增网站内容相互兼容。官网的产品体验和设计品质，很大程度上决定了用户对VIVO品牌的认知，保证官网设计品质，是保证品牌正向认知的关键一环
2.设计分析
VIVO网站的系统的整体优化和可扩展性高，重复建设度低。VIVO网站首页展示最新高端系列手机 VIVO FOLD+折叠屏手机，内容醒目，有冲击力，设计易于使用，不只是信息的简单的信息堆砌。有良好的导航功能；由于网站的网页数目比较多，提供站内搜索引擎服务，便于客户可以方便，快捷地在站内查找所需的信息。其次，网页具有可读性，长篇的网页分成多幅，提供网页之内的书签链接。
VIVO作为一个手机电子商务网站，其建设目标非常明确，销售手机及相关电子产品的目的已经达到要求。网站提供了VIVO下的所有手机品类的详细说明以及各种智能硬件，网站 导航，包括VIVO各种手机系列，IQQO子品牌，智能硬件，商城服务，社区，体验店等，导航栏设计合理。
通过三次点击可以到达一个内容页面，可以通过任何一个页面到达另一个页面。导航栏可以作为一个清晰的网站地图。栏目内容合理。提供了详细的产品信息，以及购买方式。可以提供线上的交易服务，方便快捷。内容更新及时，过期信息及时清理。
网站首页展示最新设备，反应手机业务核心内容，不同子网页随内容运用不同标题，网页标每页内容写5到8个字的描述性标题介绍手机，说明该页面最重要的内容，网页标题将出现在搜索结果页面的链接上，因此可稍带煽动性，以吸引搜索者点击该链接。
同时在首页内容中写上公司名和最重要的关键词。提供了产品销售信息，售后服务以及服务承诺。公司介绍详尽，具有合法的证明文件。
3.设计特点
3.1简洁
纵览他们的首页，扑面而来的是「简洁」，这是最直观的印象。简洁从何而来？深入分析其设计，可发现简洁背后 3 个核心共性：有限的容器：限制了基础容器样式的数量，最多不超过 3 种。有限的信息：限制内容在首页展示时的信息数量和信息容量。明确的优先级：图片是界面视觉焦点，辅以简洁的标题 / 价格 / 标签等文字信息，多数品牌去掉冗长的卖点。「简洁」是美的，但信息精简、色彩素雅等特点也常被定性为「气氛弱」、「吸引力低」，尤其在销售领域。那为何vivo品牌会将「简洁」的设计美学引入商城界面设计呢？这背后隐含消费者的认知心理。
3.2直观
在追求功能性及性价比的消费领域，商品满足消费者物质层面需求，购买动机是功能、卖点、价格等利益点，因而在传统快消电商界面的设计中，更注重利益点、界面气氛对消费欲望的刺激。而在追求高品牌溢价的消费领域，商品满足精神层面需求，如身份价值认同，购买动机围绕商品的设计品质、是否符合自己的社会属性等方面，过分强调利益点及界面气氛反而会影响品牌调性，使品牌优势被减弱。这类品牌商品的展示更聚焦在商品本身。
3.3 排版
（1）广告
即传统意义上的 Banner，本次改版统一了首页所有 Banner 的规格、元素组成、文案排版，包括头部 Banner / 新品 Banner / 穿插 Banner。
（2）产品
即展示产品的容器，新版的产品容器统一了信息架构的逻辑，文案限制在 3 阶之内，提供了「组合型」和「横排型」两种形式，对应不同的场景。热销产品楼层为例：信息布局不合理导致手机型号展示不完整；可配置副标题但文案较多；通过颜色强调价格但价格并无优势。
（3）信息
信息做了如下优化：优化信息布局为手机型号腾出更多空间，保证展示完整；精炼副标题的核心卖点，转用限制字数的标签进行强调；不强调价格，引导用户关注产品及卖点。
七、是结语，但不是结束
（4）图像
图形语言同样值得考究。官网的内容信息优先级更高，图形是辅助角色。因此图形设计更关注语义是否明确、元素是否统一、形式是否简洁，而不过分追求差异化。基于 vivo
品牌及产品体现出来的圆润亲近属性，对官网的卡片圆角、图标、标签、按钮等元素做了统一的设定，保证整体的协调一致。
（5）色彩
色彩体系也从 0 到 1 构建起来。过往迭代中，颜色使用仅凭执行设计师的个人感受，没有标准化。对此，基于vivo品牌蓝为官网重新定义标准色卡，包括常规色阶、材质色阶及灰色阶，系统指导颜色使用。
4 流量分析
4.1站长之家分析
网站综合排名3879
百度权重6
移动权重7
总收录量304万
网站访问量趋势平稳
3.4.2 百度指数
(1)搜索指数
(2)需求图谱
5 优化建议
（1）让吸引人的话语清晰明了
行动要求文本(CTA)必须醒目而有力，并在页面中引人注目。事实上，只有47%的网站有CTA，访问者可以在不到三秒钟的时间内找到它。VIVO网站72%的内部页面没有呼叫文本，这是一个主要的设计缺陷。转换的设计应该出现在网站的每一页。
(2)简化网站导航
访问者在网站上找到所需产品的内容并不难。他们浏览网站是有原因的。也许他们想买某个手机，获取更多信息或查看手机配件的信息。不管是什么原因，如果他们不能迅速解决，他们就会离开。所以用户没有理由容忍复杂的网站导航。不要试图通过复杂的导航设计来突出网站的独特性。所以应当把手机放到一个导航栏目里，以空出导航栏位置给其他模块，使得读者能够快速到达所需要的页面。
（3）避免大红色调，保持风格一致
网页的主色调要一致，字体的风格要一致（包括字体的类型、大小、颜色等）。网页中的有代表性的东西要一致，如网站的名称、网站的徽标、有代表性的图形和动画等均要一致。如果想要突出内容，可以使用加粗，特殊排版等，尽量避免使用大红色，这与整个网站简约高级的格调并不相符，会让人感觉到杂乱无章，同时会丧失高级感，使得对产品产生不好的低端印象和廉价感。为一个网站是由很多个网页组成的，如果每个网页的风格
都不一样的话，一定会使整个网站显得凌乱、不协调，甚至很容易使浏览者感到迷惑，不知自己是否还在同一个网站内浏览，所以一定要使网站的风格保持一致。
2023年12月17日发(作者：以莹琇)
关于vivo官网的设计分析与改进意见
1.网站概述
VIVO官网是企业整个商务网站中的一部分，它是企业的第一个系统，但决不应该是最后的一个。因此，所以他应当具有开放性、符合相关技术标准的系统，使其能与原有系统（如果有的话）协调工作，并与将来新增网站内容相互兼容。官网的产品体验和设计品质，很大程度上决定了用户对VIVO品牌的认知，保证官网设计品质，是保证品牌正向认知的关键一环
2.设计分析
VIVO网站的系统的整体优化和可扩展性高，重复建设度低。VIVO网站首页展示最新高端系列手机 VIVO FOLD+折叠屏手机，内容醒目，有冲击力，设计易于使用，不只是信息的简单的信息堆砌。有良好的导航功能；由于网站的网页数目比较多，提供站内搜索引擎服务，便于客户可以方便，快捷地在站内查找所需的信息。其次，网页具有可读性，长篇的网页分成多幅，提供网页之内的书签链接。
VIVO作为一个手机电子商务网站，其建设目标非常明确，销售手机及相关电子产品的目的已经达到要求。网站提供了VIVO下的所有手机品类的详细说明以及各种智能硬件，网站 导航，包括VIVO各种手机系列，IQQO子品牌，智能硬件，商城服务，社区，体验店等，导航栏设计合理。
通过三次点击可以到达一个内容页面，可以通过任何一个页面到达另一个页面。导航栏可以作为一个清晰的网站地图。栏目内容合理。提供了详细的产品信息，以及购买方式。可以提供线上的交易服务，方便快捷。内容更新及时，过期信息及时清理。
网站首页展示最新设备，反应手机业务核心内容，不同子网页随内容运用不同标题，网页标每页内容写5到8个字的描述性标题介绍手机，说明该页面最重要的内容，网页标题将出现在搜索结果页面的链接上，因此可稍带煽动性，以吸引搜索者点击该链接。
同时在首页内容中写上公司名和最重要的关键词。提供了产品销售信息，售后服务以及服务承诺。公司介绍详尽，具有合法的证明文件。
3.设计特点
3.1简洁
纵览他们的首页，扑面而来的是「简洁」，这是最直观的印象。简洁从何而来？深入分析其设计，可发现简洁背后 3 个核心共性：有限的容器：限制了基础容器样式的数量，最多不超过 3 种。有限的信息：限制内容在首页展示时的信息数量和信息容量。明确的优先级：图片是界面视觉焦点，辅以简洁的标题 / 价格 / 标签等文字信息，多数品牌去掉冗长的卖点。「简洁」是美的，但信息精简、色彩素雅等特点也常被定性为「气氛弱」、「吸引力低」，尤其在销售领域。那为何vivo品牌会将「简洁」的设计美学引入商城界面设计呢？这背后隐含消费者的认知心理。
3.2直观
在追求功能性及性价比的消费领域，商品满足消费者物质层面需求，购买动机是功能、卖点、价格等利益点，因而在传统快消电商界面的设计中，更注重利益点、界面气氛对消费欲望的刺激。而在追求高品牌溢价的消费领域，商品满足精神层面需求，如身份价值认同，购买动机围绕商品的设计品质、是否符合自己的社会属性等方面，过分强调利益点及界面气氛反而会影响品牌调性，使品牌优势被减弱。这类品牌商品的展示更聚焦在商品本身。
3.3 排版
（1）广告
即传统意义上的 Banner，本次改版统一了首页所有 Banner 的规格、元素组成、文案排版，包括头部 Banner / 新品 Banner / 穿插 Banner。
（2）产品
即展示产品的容器，新版的产品容器统一了信息架构的逻辑，文案限制在 3 阶之内，提供了「组合型」和「横排型」两种形式，对应不同的场景。热销产品楼层为例：信息布局不合理导致手机型号展示不完整；可配置副标题但文案较多；通过颜色强调价格但价格并无优势。
（3）信息
信息做了如下优化：优化信息布局为手机型号腾出更多空间，保证展示完整；精炼副标题的核心卖点，转用限制字数的标签进行强调；不强调价格，引导用户关注产品及卖点。
七、是结语，但不是结束
（4）图像
图形语言同样值得考究。官网的内容信息优先级更高，图形是辅助角色。因此图形设计更关注语义是否明确、元素是否统一、形式是否简洁，而不过分追求差异化。基于 vivo
品牌及产品体现出来的圆润亲近属性，对官网的卡片圆角、图标、标签、按钮等元素做了统一的设定，保证整体的协调一致。
（5）色彩
色彩体系也从 0 到 1 构建起来。过往迭代中，颜色使用仅凭执行设计师的个人感受，没有标准化。对此，基于vivo品牌蓝为官网重新定义标准色卡，包括常规色阶、材质色阶及灰色阶，系统指导颜色使用。
4 流量分析
4.1站长之家分析
网站综合排名3879
百度权重6
移动权重7
总收录量304万
网站访问量趋势平稳
3.4.2 百度指数
(1)搜索指数
(2)需求图谱
5 优化建议
（1）让吸引人的话语清晰明了
行动要求文本(CTA)必须醒目而有力，并在页面中引人注目。事实上，只有47%的网站有CTA，访问者可以在不到三秒钟的时间内找到它。VIVO网站72%的内部页面没有呼叫文本，这是一个主要的设计缺陷。转换的设计应该出现在网站的每一页。
(2)简化网站导航
访问者在网站上找到所需产品的内容并不难。他们浏览网站是有原因的。也许他们想买某个手机，获取更多信息或查看手机配件的信息。不管是什么原因，如果他们不能迅速解决，他们就会离开。所以用户没有理由容忍复杂的网站导航。不要试图通过复杂的导航设计来突出网站的独特性。所以应当把手机放到一个导航栏目里，以空出导航栏位置给其他模块，使得读者能够快速到达所需要的页面。
（3）避免大红色调，保持风格一致
网页的主色调要一致，字体的风格要一致（包括字体的类型、大小、颜色等）。网页中的有代表性的东西要一致，如网站的名称、网站的徽标、有代表性的图形和动画等均要一致。如果想要突出内容，可以使用加粗，特殊排版等，尽量避免使用大红色，这与整个网站简约高级的格调并不相符，会让人感觉到杂乱无章，同时会丧失高级感，使得对产品产生不好的低端印象和廉价感。为一个网站是由很多个网页组成的，如果每个网页的风格
都不一样的话，一定会使整个网站显得凌乱、不协调，甚至很容易使浏览者感到迷惑，不知自己是否还在同一个网站内浏览，所以一定要使网站的风格保持一致。