大厂实战！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协议
OPPO三星华为手机被偷了 怎么找回？
手机丢失，对于大多数人来说是件头疼的事，特别是大过年的，手机放在电脑旁、餐桌旁很容易被偷走或者弄丢，外加过年大家肯定会喝点酒，喝醉了就什么都不记得了。总而言之，手机丢失不仅给我们的生活带来了很多不便，对我们的私人隐私和财产也存在着很大的安全隐患。
假如说，手机真的丢了，怎么样找回呢？各大品牌的手机操作略有不同，一起来看下吧。
01OPPO手机丢了怎么办
先来说说OPPO手机丢了怎么办，首先在丢之前，一定要开启查找手机的服务，开启方式为打开手机设置，找到云服务，然后，点击查找手机，打开该选项即可。
如果你的手机丢失了，就可以使用查找手机的这个功能，首先输入网址：cloud.oppo.com
输入你的OPPO云服务账号及密码，点击登录。
点击查找手机。
好了，你拥有的OPPO的所在位置已经在地图上显示了，并且你还可以通过点击播放声音，让你的手机发出最大音量的响声。
除了地图之外，还有卫星和三维以及全景，让你全方位的辨识方向。你可以根据手机所在的位置进行追踪查找，也就是去寻找这个地址，当你距离手机很近的时候，你可以开启播放声音，这个时候，你的手机就会响起不一样声音，就可以知道手机在谁的身上了。
02三星手机丢了怎么办
如果三星手机丢失的话，可以到相关部门报案并登记。三星部分机型支持远程控制功能，可尝试使用该功能定位手机大致位置。远程控制功能使用方式：
1.此功能需要在手机丢失之前，通过手机将远程控制功能开启，绑定三星账户且开启移动数据。
2.通过电脑或其他手机登陆远程控制网站：http://www.samsungdive.cn
3.输入三星账户和密码，进入远程控制网站界面。点击查找我的手机，如手机联网，使用该功能手机将会自动打开GPS功能并进行定位。
注：如果手机没有连接网络或者远程控制功能未开启，或者对方将手机重置，远程控制功能无法实现。
03华为手机丢了怎么办
首先确认丢失设备是否有登录华为账号并且开启“查找我的手机”功能，如果登录了华为帐号并开启了“查找我的手机”，在丢失的设备开机联网的情况下，则可以使用查找我的手机功能进行定位、远程锁定、播放铃声、擦除数据等操作。
以下步骤也许能帮您定位它并保护您的信息：
1．在电脑或其他设备浏览器上登录 cloud.huawei.com ，或在另一部华为手机上登录“查找我的手机”应用。
2．定位设备。打开“查找我的手机”定位成功后，然后在设备列表中选择需定位的设备。成功定位后：
1）发送警告信息。您可以通过“查找我的手机＞远程锁定”发送警告信息，尽量使用友好的沟通词语，并留下您能使用的手机号以便对方能与您联系。（例如：您好，这个手机对我非常重要，请您在捡到我的手机后尽快与我联系，万分感谢！手机号是：“****”）
查找我的手机
定位成功
发送警告信息
2）设置手机响铃：可以查看设备的位置信息，您可以根据位置信息前往，并在到达附近位置后可以设置手机响铃，以便您能通过铃声更快找寻您的手机大概位置（尽量避免未到达时开启铃声，防止拿到手机的人强制关机，导致无法进行定位）
播放铃声
3）可以进行擦除数据操作，以保护您的信息安全。
如果定位失败，会显示”离线”或是“设备不在线”, 表明您的设备可能已经关机或是不满足定位条件，但仍然可以进行远程锁定、擦除数据，待设备成功定位后指令会立即生效，以保障您的信息安全。
点击擦除数据后，可以继续使用查找手机定位功能，但是无法再点击远程锁定及播放铃声按钮，请用户谨慎点击使用擦除数据。
4）若开启了查找手机“发送最后位置”开关，开启后在设备电池快耗尽时（电量5%~10%），设备会自动向服务器发送最后位置信息，若未开启此开关，设备不会自动触发定位。
04vivo手机丢了怎么办？
开启了查找手机功能的，可以通过VIVO云服务定位手机，具体方法如下：
一、首先登录到VIVO云服务官网：http://webcloud.vivo.com.cn/welcome，在官网首页页面上找到“立即登录”一项并点击进入，如图所示。
二、进入以后，按系统要求输入VIVO帐号和密码登录。
三、登录以后，在服务列表里打开“查找手机”进入，如下图所示。
四、进入以后选择“定位”选项，这样就可以在地图上定位手机的位置了。
05小米手机丢了怎么办
小米手机丢失后定位的方法：
设置-小米帐户-查找手机-小米云-激活-定位
如图所示：
首先在平时使用小米手机的时候打开小米的基本追踪功能，打开手机进入手机的“设置”页面：
在页面的下面我们可以看见“小米账户”的选项，这个账户是自己申请的注册的账户，这里需要自己登录的：
登录小米账户后，点击“小米帐号”进入小米账户页面，这里可以设置自己需要和网络端同步的资料，可以是短信、联系人、相册等：
在“小米账户”里面我们在最下面可以看见“查找手机”的功能，这里我们打开这个功能，这样在丢失的时候就可以通过这个功能来查找手机：
在网页地址栏输入“https://i.xiaomi.com/ ”进入小米找回手机操作页面：
点击登录后，进入自己的小米手机云服务页面，这里是小米手机的备份文件地址：
点击最右边的“查找手机”功能进入如下页面，这里现实的地理位置是系统默认的地理位置，这个时候还没有对自己手机进行定位。
点击定位功能，会出现小米手机的状态提示，在手机联网的状态下才是在线状态。如果手机不在线系统会提示你短息激活自己的手机，当然，如果对方把手机关机就没有办法了：
点击确定后，激活手机并且实现定位，最后就能看见自己手机的位置了。当然要找到的话还是需要时间：
这个时候就需要本人亲自到手机定位的位置，并且要实时定位，去定位地点点击发生手机就会发出声音，这个时候如果手机在你身边出现就可以失而复得了。
其他的擦除数据功能可以把手机内的秘密擦除，这样就不会出现XX门了
点击锁定手机后，可以对手机进行锁定，这个时候就需要密码了，对方无法使用，只有刷机才能成功了。
06苹果手机丢了怎么办
第一步：百度搜索“iCloud”，点击第一个
第二步：登录你的AppleID
第三步：iCoud会让你进行双重认证，不要管，点击下面的“查找我的iPhone”
第四步：它会让你再输入一遍密码，随后等待简单的定位读取，地图上绿色的点是你的手机，点击旁边的感叹号。
第五步：点击“播放声音”后，你的iPhone就会响了。
07手机防盗锦囊
1、公共场合及公交车等人多的地方尽量避免戴耳机听歌，现如今有一类小偷比较喜欢“盯”戴耳机的人下手，毕竟听音乐会降低我们的警惕性。
公共场合不要听音乐
2、请不要将手机放在上衣或者裤子后边的兜里，这都会给予小偷可乘之机，更不要过分相信自己的感觉，毕竟大冬天的除了海南的朋友，都穿的比较厚实。
前兜错误的放置方式
前兜正确的放置方式
3、特别是女生，很喜欢背挎包，然后将手机钱包等贵重物品放在包里，并且很少拉拉链，给小偷留下机会。
小偷作案现场
请不要把拉锁朝外放
正确方式
手机和拉链的位置
4、有的小偷会手持刀片，拉开你的包，所以有内包尽量利用内包，将贵重物品放在内包中，这样即便被划开首先丢失的也不会是内包的东西。
尽量使用内包
当然了，我为所有看过这篇文章的朋友们祈祷一辈子都不会丢手机，如果有用，那么我也不用做编辑，早就中奖发财了。
因此还是要小心谨慎为妙，记住以上四点，最好能够分享给身边的亲戚朋友，防止手机丢失后脑子一片空白，不知道干什么。
(7360308)
相关问答
vivo 官方网站?VIVO官方网站http://passport.vivo.com.cn/如果你已经注册了VIVO账号,你可以输入手机号,获取验证码,就可以登录VIVO官网了。公司介绍vivo是一家全球性的移.....
vivo 个人 官网 入口?1、打开手机浏览器,在搜索框输入【vivo官网】,点击搜索;2、在弹出新页面,选择【进入官网】;3、点击左上角【≡】图标打开;4、在打开菜单中选择【服务】...
vivo 登录平台?进入vivo账户的个人中心的操作步骤:1、打开手机桌面,点击设置。2、页面下拉,找到帐号与同步并点击。3、然后进入以后,点击vivo帐号这个选项,进入。4、进...
vivo 官方登录网站?VIVO官方网站登录地址是http://passport.vivo.com.cn/#/login如果你已经注册了VIVO账号,你可以输入手机号,获取验证码,就可以登录VIVO官网了。公司介绍vi...
查找手机 vivo 官方网站?1、查找vivo手机的官网是yun.vivo.com.cn2、使用浏览器进入页面后点击账号密码登录,然后输入vivo账号和密码,登录后点击查找设备就可以定位到vivo手机位置了...
vivo 账户登录 官网 ?进入手机设置--帐户与同步--vivo帐户中,输入vivo账号名和密码即可登录。若没有vivo账号,点击“注册”再登录即可进入手机设置--帐户与同步--vivo帐户中,输入v...
怎么找 vivo官网 ?VIVO手机真伪查询在官方网站就可以查询,网址为https://www.vivo.com.cn/?cid=w-2-sougou_so-011、打开vivo手机官网2、翻到最底部,有一个真伪查询3、打...
vivo 官网 登录?想要登录vivo官网,可以按照以下步骤进行:打开浏览器,在地址栏输入vivo的官网地址(www.vivo.com)。点击键盘上的回车键打开新的页面。点击页面右上角的“登录...
vivo 真正的 官网 ?浏览器打开vivo官网www.vivo.comvivo是专注于智能手机领域的国际化品牌,vivo追求乐趣、充满活力、专业音质、极致影像、愉悦体验的智能产品,并将敢于追求极致...
vivo 客户服务中心 官网 ?https://www.vivo.com/servicevivo是专注于智能手机领域的国际化品牌,vivo追求乐趣、充满活力、专业音质、极致影像、愉悦体验的智能产品,并将敢于追求极致、...