Alice

首页通常是一个在线产品最重要的页面之一,然而想要设计得让用户真心喜爱真的好难。最近看到酷家乐的一个首页改版案例,是一个以内容去肿、体验导向、视觉升级为优化方向的成功案例,分享给大家。

 

你自己想想自己平时用得最多的 APP,除去内容咨询类或者太简单的产品,就看淘宝、大众点评、美团外卖、支付宝……这种综合类的,你平时真的会去刷首页吗?

尤其是百度网盘这种明明不需要,还每次开启都帮忙自动定位到的首页,我之前已经发文吐槽过了:

图片

上图来源:百度网盘改版,让我很失望

 

至少包括我自己在内,很多人是很少刷首页的,因为很多首页里塞了太多自己不需要也不感兴趣的东西。

首页作为一个流量分发口,就跟 CBD 商业中心一样寸土寸金,成为了公司各业务线的兵家必争之地

为了避免流量分配不均而导致的无休止的开会讨论(撕X),首页经常最后不得不沦为一个七拼八凑的出来的缝合怪。

到了那一步,用户体验什么的都无所谓了,保证部门利益分配的合理性才是核心。

这就是为什么,很多产品本身挺好的,但就是首页让人用不起来。

不过这个问题也不是无解,而且也要看公司分情况。

最近看到酷家乐的一个首页改版案例,居然神奇地把这个问题给处理妥当了!

图片

图片

虽然未必 100% 解决了问题,推进时估计还是免不了各种阻碍,但至少提升很大

因为他们以前的首页,明显就是那种一堆入口,让人不想翻阅臃肿情况,数据上也表明只有 20% 的用户会翻到第二屏

图片

但是改版之后明显好多了,虽然没看到具体的翻页的数据,但是下方两大模块点击率都分别提升了百分之十几。

原文在这里:酷家乐主站3.0,让一切更简单‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

 

为了让大家看得更轻松,我将重点信息用更加容易理解的语言整理出来了,希望你能够帮大家了解到,如何设计出一个用户更愿意翻阅的首页

这是大纲:

  • 💊 解决问题
  • ❤️ 满足需求
  • ⚙️ 迎合习惯
  • ☔ 避免错误
  • 🌈 审美升级

接下来我们就来详细说说:

 

💊 解决问题

老版首页最大的问题,简单来说就是信息臃肿用户不愿意翻看

再详细点,可以拆分成三个问题:

问题 1:滚屏衰减严重 —— 只有 20% 的用户翻完了第二屏

问题 2:内容露出率低 —— 首屏全是 Banner,看不到任何有用的模块。

问题 3:操作高度集中 —— 用户的操作聚焦在工具和优秀设计这俩模块,然而它们只占据首页约 1/3 面积而已。

图片

以下是针对这些问题的解决方案:

 

问题 1 :滚屏衰减严重

先是去掉底下那些访问少,团队自己又很少维护的模块;同时加长那些访问多的模块。

图片

 

问题 2 | 内容露出率低

为了保证模块加长后的内容吸引力,设计团队联动运营去优化了内容分发机制,采用了推荐算法+人工审核的机制,来更严格地确保首页 UGC 内容质量。

图片

 

问题 3 | 操作高度集中

为了避免首屏全是 Banner 看不到有用的内容,首先可以把导航栏缩短一些,节省点空间给内容。

图片

当然这还远远不够,最直接的方法就是减小 Banner 尺寸,往原来的位置上多塞几个模块。

图片

这么几番操作下来,主要问题得到解决,整个首页也轻盈多了。

 

❤️ 满足需求

做设计不能光解决用户的痛点,也要戳到爽点才能双管齐下,让人满意。

这就要看看用户真正的需求是啥,最科学的方式当然就是看数据了。

分析发现, 大部分用户(68%)进入页面的第一件事就是去找工具,而这点刚好也与酷家乐的核心定位相符——快速出图的云设计工具。

于是首页增加了一个设计模块,方便用户直接选择模板并一键生成方案。

图片

这个模块里还提供了几个 tab 来细分场景,为不同的人群提供便捷,这点也受到了用户的大量好评

 

⚙️ 迎合习惯

研究用户的使用习惯,为主要场景提供便利,也能增强用户的好感和粘性。

用户进入首页后的主要动线是“找参考→做方案”,其中最容易花费时间在浏览网页上的部分,是前面的场景——“找参考”。

但是原来的首页只是提供了一大堆入口,完全没有为“找参考”这个主要场景提供符合习惯的设计。

考虑到“找参考”这个行为有点类似逛街刷内容的感觉,而市面上其它出现类场景的产品(淘宝、小红书……),很多是用瀑布流的布局版式。

图片

既然瀑布流已经被市场验证过,这次改版也可以利用这种版式来展示优秀设计模块

图片

 

☔ 避免错误

回到最初的问题,用户不愿意翻看首页,不一定完全是方案设计的问题。

也有可能是因为页面出现展示错误,导致翻看不便

后台统计发现用户的屏宽相差悬殊,在 1280-2560px 之间,很难用一套布局来适应所有情况。

于是制定了一套适合首页的卡片化响应布局方案,设置了几个断点,只要屏幕超过或小于这些断点,就会改变布局的动态数值——包括字号、间距、卡片数量和尺寸。

图片

确保每个断点区间内,界面都能被确无地展示出来,确保用户完整、舒适的浏览体验

 

🌈 审美升级

虽然视觉很难直接影响用户的行为,但是会让用户对产品的感官体验产生催化剂般的加成影响

由于网站定位是“家装→全空间”,从本源出发,团队脑暴后找到了一下以下 3 个关键词

图片

讨论来讨论去,感觉第一个词“温度”有点局限在“家居”里,而“科技”又太过于冰冷有点脱离了定位。

综合考虑后,感觉“光影”才能够将题主要情绪体现出来——对空间的表达和对美好的折射。

图片

定下主题后,以此从色彩质感图标 LOGO 上,提炼出视觉语言

 

色彩

沿用品牌蓝的同时,对功能色进行了规范:

图片

 

质感

参考了新拟态视觉趋势,通过对圆角和阴影的运用,实现了一套轻盈且富有层次的组件主题。

图片

 

图标

运用了近期很火的亚克力材质几何图形,为网站带来了自然而灵动的生命力。

图片

 

LOGO

将五年未变的 LOGO 进行升级,结合现在大行其道的 3D 风格进行重新设计。

随着业务的发展,公司多出了几个子品牌,新的 LOGO 套装也一并安排上了。

图片

 

总结

这个首页改版的案例整体看来是相当完整了,跟很多换皮的改版不同,而是根据现实的问题提出了可选的解决方案

推荐大家仔细阅读学习并借鉴~

我们最后再来看看最终的效果图对比,是不是比之前好多了呢?

图片

Before

 

图片

After

 

原文地址:体验进阶(公众号)

原作者:不戳

信息整理:ZoeYZ

鸣谢:阿鹏、思尔、皮特、沙拉

转载请注明:学UI网 » 设计一个忍不住想往下翻的首页有多难?

登录收藏
 
你可能喜欢的:
为什么你始终做不好版式设计?为什么你始终做不好版式设计?
如何更好的设计图标?优先注意这些容易被忽略的细节如何更好的设计图标?优先注意这些容易被忽略的细节
金刚区图标设计的 10 大风格金刚区图标设计的 10 大风格
UI/UX设计作品集UI/UX设计作品集
【WOW Design】控制你的卡路里:扫一扫,扫走你的卡路里【WOW Design】控制你的卡路里:扫一扫,扫走你的卡路里
文化艺术公益基金会影响力评估体系构建文化艺术公益基金会影响力评估体系构建
工作经验|如何编写「设计规范」?这套思路一学就会!工作经验|如何编写「设计规范」?这套思路一学就会!
UX文案3篇保姆级教程-实战篇UX文案3篇保姆级教程-实战篇
来了!解读2022年10种UI/UX设计趋势来了!解读2022年10种UI/UX设计趋势
【WOW Deisgn】智颜美妆镜:告别无效化妆!告别容貌焦虑!【WOW Deisgn】智颜美妆镜:告别无效化妆!告别容貌焦虑!