大厂实战！vivo官网APP首页改版设计过程复盘
编辑导语：众所周知首页是产品最重要的部分之一，首页呈现出来的效果往往与流量有着密切的关系。本文以vivo官网APP为案例，复盘了vivo官网首页改版设计过程并给予分析，感兴趣的朋友一起来看一下。
一、vivo 官网 APP是什么？
vivo 官网 APP（下简称官网）作为 vivo 手机内置的应用，是提供 vivo 产品 / 服务 / 权益 / 资讯 / 社区的线上官方阵地，也是陪伴 vivo 用户「购机」至「换机」周期的重要角色。
因此，官网的产品体验和设计品质，很大程度上决定了用户对 vivo 品牌的认知，保证官网设计品质，是保证品牌正向认知的关键一环。
二、vivo 官网 APP 首页为什么改版？
随着业务的发展迭代，官网开始出现设计不统一、品质下降等问题，在首页表现得尤其明显，因此设计师发起了官网的设计升级，先从首页入手，提升首页界面的统一性和品质。
三、基于用户业务视角看「品质」优化首页容器是关键
官网首页定位「精选」，聚合产品、权益、服务、社区等内容，满足用户需求。
从用户视角看，首页存在 2 种场景：
头部搜索、金刚区为「明确目的场景」；头部以下内容区为「无目的场景」。前者提供功能入口，满足用户明确的需求；后者展示内容，满足用户闲逛的需求。
明确且固定的「功能入口」，经过长期认知培养，转化趋于稳定，优化空间较少；而时常更新的「内容」在呈现上的好坏，影响用户对 vivo 品牌的印象及浏览欲望，决定首页留存和转化。因此优化「容器」，使内容更好地呈现给用户，是本次设计升级的核心。
从业务视角看，今年官网首页的内容运营将围绕「人-货-场」概念，通过分析用户（人）特征，将信息（货）推送给相应的用户，「场」是最后呈现信息的地方，即「容器」。业务方希望用更精简的容器规则去满足不同的「人-货」需求，做到「少样式」对「多场景」，构建内容展示标准，用更精简、易理解的样式，让用户聚焦到信息本身。
四、乱，多，不全是首页容器的核心问题
走查首页，发现如下 3 个问题：
1. 容器样式乱
首页容器样式多且乱，无章可循。需结合产品定位及功能诉求，梳理容器设计，定义标准。
2. 信息冗余
无效信息多，如「独立显示芯片」这种言之无物的信息，又如社区帖子密集的信息，都造成了信息过载。
3. 信息展示不全
首页经常出现信息不全的状态，对品质影响极大，用户无法获取有效信息。
五、头部品牌的官方商城设计都崇尚「简洁」美学
了解自身问题后，我们对各行业头部品牌的官方商城进行分析，以此了解行业设计趋势。
1. 简洁的直观印象
纵览他们的首页，扑面而来的是「简洁」，这是最直观的印象。
2. 简洁从何而来
深入分析其设计，可发现简洁背后 3 个核心共性：
有限的容器：限制了基础容器样式的数量，最多不超过 3 种。
有限的信息：限制内容在首页展示时的信息数量和信息容量。
明确的优先级：图片是界面视觉焦点，辅以简洁的标题 / 价格 / 标签等文字信息，多数品牌去掉冗长的卖点。
3. 简洁背后的意义
「简洁」是美的，但信息精简、色彩素雅等特点也常被定性为「气氛弱」、「吸引力低」，尤其在销售领域。那为何这些品牌会将「简洁」的设计美学引入商城界面设计呢？这背后隐含消费者的认知心理。
在追求功能性及性价比的消费领域，商品满足消费者物质层面需求，购买动机是功能、卖点、价格等利益点，因而在传统快消电商界面的设计中，更注重利益点、界面气氛对消费欲望的刺激。
而在追求高品牌溢价的消费领域，商品满足精神层面需求，如身份价值认同，购买动机围绕商品的设计品质、是否符合自己的社会属性等方面，过分强调利益点及界面气氛反而会影响品牌调性，使品牌优势被减弱。这类品牌商品的展示更聚焦在商品本身，「简洁」的设计美学就与品牌目标相得益彰。
六、用「至简」的理念重塑vivo 官网 APP 首页
用户认知规律、业务诉求及行业趋势的分析结果，都直指关键词「简洁」，它带来了逻辑严谨、规则明确、标准统一的有序体验，隐于简洁的表象之中，让用户更沉浸地体验内容。这种追求简洁表现、有序体验的理念，我们称之为「至简」，它将指导官网首页改版。
1. 容器样式梳理
基于「至简」理念，经过梳理和方案尝试，首页的基础容器被优化为 3 类：
（1）广告容器
即传统意义上的 Banner，本次改版统一了首页所有 Banner 的规格、元素组成、文案排版，包括头部 Banner / 新品 Banner / 穿插 Banner。
（2）产品容器
即展示产品的容器，新版的产品容器统一了信息架构的逻辑，文案限制在 3 阶之内，提供了「组合型」和「横排型」两种形式，对应不同的场景。
组合型容器提供 2 种规格，拥有同样的信息量，根据业务需求自由组合。
横排型容器提供 1 种规格，根据业务需求选择「横排」或「横滑」。
（3）内容容器
即展示品牌、社区内容的容器。该容器统一使用上图下文的信息架构，可随场景进行不同形式的拓展。
2. 信息展示优化
梳理完容器类型后，对信息展示做进一步优化，解决「信息冗余」和「信息展示不全」的问题。
（1）产品信息
以热销产品楼层为例：信息布局不合理导致手机型号展示不完整；可配置副标题但文案较多；通过颜色强调价格但价格并无优势。
新版的信息做了如下优化：优化信息布局为手机型号腾出更多空间，保证展示完整；精炼副标题的核心卖点，转用限制字数的标签进行强调；不强调价格，引导用户关注产品及卖点。
（2）社区、品牌信息
以社区楼层为例：首页社区楼层通过精选内容为官网社区引流，其定位是「入口」，旧版首页将社区内容直接平铺，露出了过多的信息，不符合定位的同时，也在首页造成信息冗余的问题。
因此新版首页做了大幅度精简，只露出最核心的「标题/来源/互动情况」 信息，在有限的界面里露出更多的社区帖子。
3. 视觉规则优化
基于容器的优化策略，进一步制定了详细的视觉规则。
官网首页由不同大小的容器组成，为了更科学地定义容器规格，引入了栅格。
字体上，使用 OriginOS 的定制字体 — 汉仪旗黑，保证可读性及统一性。
在设计界面时，在准确体现信息层级的前提下克制使用字号。如容器的文案展示，仅使用了 2 种字号，保持极致的统一和简洁。
图形语言同样值得考究。官网的内容信息优先级更高，图形是辅助角色。因此图形设计更关注语义是否明确、元素是否统一、形式是否简洁，而不过分追求差异化。基于 vivo 品牌及产品体现出来的圆润亲近属性，对官网的卡片圆角、图标、标签、按钮等元素做了统一的设定，保证整体的协调一致。
色彩体系也从 0 到 1 构建起来。过往迭代中，颜色使用仅凭执行设计师的个人感受，没有标准化。对此，基于vivo品牌蓝为官网重新定义标准色卡，包括常规色阶、材质色阶及灰色阶，系统指导颜色使用。
基于新的容器规则及整体视觉规则，首页刷新后效果如下图。
七、是结语，但不是结束
本次 vivo官网APP的首页改版，从预研、推动、落地到验证花费近半年时间，付出了相当「复杂」的努力。而我们的「复杂」，是为了给用户提供「至简」的设计品质和产品体验。
但这并不是结束，首页改版后，将基于全新的设计语言，对全局界面进行翻新，全面提升官网设计品质。赋能 vivo 品牌，我们在路上。
作者：刘晓峰；公众号：VMIC UED
本文由 @VMIC UED 原创发布于人人都是产品经理，未经许可，禁止转载
题图来自 Unsplash，基于CC0协议
手机要是弄丢了，这些事情一定要做
最近王思聪的大众点评账号被换绑了，虽然有点滑稽，但就这事发生在我们平常老百姓身上的概率其实一点也不低。
比如我们的手机不小心弄丢了，而且你的SIM卡还没上锁，那么捡到你手机的人就能直接把你的SIM卡插到别的设备接收验证码，如此做对方想登录你的账号并改绑简直易如反掌！
而且现在很多人的手机都聚集了自己大量的资产和隐私，学会如何保护自己还是非常重要的。
如果我们手机真的丢了，那么切记也不要被迫切的心情冲昏了头脑。
比如很多人收到诸如这种钓鱼信息，或是更高端的骗术，由于满脑子想找回手机，争分夺秒，一着急就把账号密码给泄露了，等反应过来，手机都没了。
而本文就给大家提供几个保护手机的解决方案。
Ⅰ.PIN码
如果设置了PIN码，每次重启手机或者更换手机，都需要输入PIN码才能使用，别有用心的人就没法操作了。
而没设置的话，可能你还没来得及挂失，捡到你手机的人，就已经登录上你的一些账号了，而且很多平台，有手机验证码就可以轻易的换绑，就像王思聪那样。
而设置PIN码也不难，iOS中点击【设置】里的【蜂窝网络】，然后就可以看到对应运营商下的【SIM卡PIN码】设置选项。
然后就可以开启PIN码了，一般初始PIN码都是1234或0000，也可以进入对应运营商的官网或者掌上营业厅查询。
安卓这边设置方式也大致相同，只是所在的位置不同，以MIUI为例。
我们打开【设置】-【密码与安全】-【系统安全】，最后点击【SIM卡锁定方式下】的运营商名称，即可进入PIN码设置页面。
这基本是成本最低的手机弄丢时的止损方案 ，整个设置过程不超过30秒，大家赶紧行动起来吧！
当然，即便是设置了PIN码，这里也推荐大家在丢失手机后第一时间挂失卡号 ，以及带身份证 去营业厅补卡。
Ⅱ.账号
在网络时代，一定不能将自己重要的账号置身于危险之地。
比如微信、支付宝、QQ等账号的密码，能想到的都应该第一时间修改密码或者冻结处理，里面除了金钱就是隐私！
除了微信和支付宝的资产，我们还有一个很重要的入口就是——网银，最快的方法是打电话给银行客服进行口头挂失，或者直接在自动取款机或者手机银行上故意打错3次密码，银行卡就被自动冻结了。
Ⅲ.定位系统
在保证自己的账号和资金安全之后，就可以尝试进行定位追踪了。
这里先说明一下，定位跟踪只是起辅助作用，要评判一个找回方案靠不靠谱，那得看小偷把手机占为己有的收益能否超过破解手机的成本。
比如无法刷机或者加密所有硬件，使其作为拆机板也无法使用，最后让小偷判定这部手机最划算的方式就是还给失主换一些小费，不过严格的加密会给手机维修方面带来困扰，但这就是另一个话题了。
目前为止基本没有手机厂商做到了这一点，不过我们依然可以使用一些方法来提高小偷的成本，不管是金钱还是心理上，好让一部分想跃跃欲试的人知难而退，拾金不昧。
而能给小偷最大压力的莫过于对手机的远程操控了。
首先就是登录手机品牌的云服务网站开启丢失模式 将设备远程锁定和发送锁屏留言 ，同时进行定位追踪、播放声音 等操作，并在必要时抹除数据 ，抹除数据后，你依然可以对手机行定位。
这些基础找回功能在每个品牌上可能名字不一样，但都大同小异，除了开启方式外，这里主要说一下国内主要品牌的额外功能，如果有遗漏，欢迎大家在评论区补充。
苹果
开启方式：设置-姓名-查找-查找我的iPhone，开启【查找我的iPhone】、【查找网络】和【发送最后的位置】三个功能。
苹果云服务官网：iCloud.com，或是使用另一台iPhone、iPad、Mac、iPod的【查找】APP。
众所周知，定位和远程操控这功能，只要小偷关机或者拔掉SIM卡，你就那他们没办法了，但是iPhone可以做到离线及关机查找，但是仅限于iOS15 ，推荐大家踊跃升级。
因为iOS15带来了三个王炸般的功能。
1.加入了类似防丢神器 AirTag 的功能，当iPhone丢失并被关机、断网时，靠近的其他苹果设备就会自动给失主发送位置信息。
2.抹掉数据后依然可以定位 iPhone，在iOS15之前的版本中，是没有这个功能的。
3.设备被遗落时提醒。
华为
开启方式：设置-姓名-安全-查找设备，开启【查找我的手机】和【发送最后的位置】功能。
华为云服务官网：cloud.huawei.com
由于安卓目前没有iOS15的断网定位功能，所以一旦被断网或者关机，就只能留下关机前的位置记录了，而华为目前也只有定位、播放铃声、丢失模式和擦除数据等基础功能。
小米
开启方式：设置-姓名-云服务-查找手机，开始【查找我的手机】、【电量耗尽前定位】、【关机前定位】。
小米云服务网站：i.mi.com
小米也跟华为一样，只有几样基础功能，但是小米在断网未关机的状态下是可以进行远程控制发声的 ，不过延迟可能长达几分钟。
vivo
开启方式：设置-名字-查找手机，开启【查找手机】和【使用短信查找】
vivo云服务官网：cloud.vivo.com
相比华为和小米，vivo的查找功能就丰富一些，额外提供了远程拍照和数据备份功能。
当锁屏状态下连续解锁失败两次 ，手机就会自动用前置摄像头拍摄照片，并且上传至云端，而备份数据方面则可以备份联系人 、短信 、日程 和便签 这些比较小的数据，图片和视频无法备份 。
OPPO
开启方式：设置-云服务-查找手机，开启【查找手机】和【手机无网络时用短信查找】
OPPO云服务官网：cloud.oppo.com
OPPO的查找服务也额外带来了一个历史定位的功能，这个功能会在手机定位系统工作的时候记录下手机的位置，方便用户跟踪手机的踪迹。
好了以上内容就是手机丢失后的一些方案了，大家可以转发给需要的人，大家有什么找回手机的方法也欢迎在评论区下方留言高速大家。
相关问答
vivo 手机 官网 登录中心?vivo官网的全称是vivo智能手机官方网站。http://www.vivo.com.cn/这个是vivo官网的网站链接vivo是专注于智能手机领域的国际化品牌,vivo追求乐趣、充满活力...
查找手机 vivo官方网站 ?1、查找vivo手机的官网是yun.vivo.com.cn2、使用浏览器进入页面后点击账号密码登录,然后输入vivo账号和密码,登录后点击查找设备就可以定位到vivo手机位置了...
vivo官网 商城官网入口?入口就是http://www.vivo.com.cn/这个是vivo官网的网站链接。vivo是专注于智能手机领域的国际化品牌,vivo追求乐趣、充满活力、专业音质、极致影像、愉悦体验...
vivo官网 ?Vivo官网存在。因为Vivo作为一家电子产品公司,它需要宣传自己的产品并提供购买渠道,而官网是最直接的方式。在Vivo官网上,用户可以浏览最新商品信息、查看产品...
vivo官网 账号登录入口?“vivo官网”3点击页面右下角的“我的”;4进入“账号中心”,点击头像使用本机手机号登录;5vivo账号已登录vivo官网,可使用vivo官...打开vivo手机中的自带...
vivo官网 地址是多少?点击vivo的官方网站网址,https://www.vivo.com/。打开手机浏览器,在搜索框输入【vivo官网】,点击搜索;2、在弹出新页面,选择【进入官网】;3、点击左上角...
vivo 售后 官网 ?https://www.vivo.com/servicevivo是专注于智能手机领域的国际化品牌,vivo追求乐趣、充满活力、专业音质、极致影像、愉悦体验的智能产品,并将敢于追求极致、...
vivo 定位 官网 ?1、使用电脑或手机浏览器访问vivo云服务网站https://yun.vivo.com.cn,登录vivo云服务账号。1.点击定位服务在手机设置页面点击定位服务的选项。2.点击定位服...
vivo 商店入口?如果你的是vivo手机,可以直接在手机桌面上点击vivo商城app,就可以进去vivo官网商场并购物了。如果你没有vivo手机,可以打开浏览器,直接搜索vivo官网,或者直...
vivo 云服务 官方 网?vivo的云服务官网登录入口:http://webcloud.vivo.com.cn/welcome云服务是基于互联网的相关服务的增加、使用和交互模式,通常涉及通过互联网来提供动态易扩展...