设计沉思录｜58心宠详情页改版设计总结

58UXD 2023-07-27 09:29:41

01 写在前面

随着突飞猛进的经济社会发展，人们的物质生活得到不断改善，但快节奏、高强度的工作生活方式也相应带来了人们心灵上的压力和空虚。为了缓解紧张压力情绪、排遣孤独无聊，更为了生活中增添一缕色彩，养一只萌宠成为许多人的第一选择。

当下的宠物不仅是作为看家护院的存在，更多人将宠物当作家中不可缺少的一部分，宠物的图片和视频也经常占据着他们朋友圈中的大片篇幅。同时大量网红猫、网红狗的涌现，使不少人萌生了养宠物的念头，养宠也渐渐变成了一种时尚，人们对宠物的需求量大大提升。

但宠物行业部分方面不规范，存在缺少监督和管理的问题，再加上宠物交易的特殊性，养宠人士很容易吃亏受骗，宠物的品相、宠物的健康都难以得到保证。如何使宠物市场更健康、更规范，如何让每一位养宠人士都能放心购宠、放心养宠，这是宠物行业一直不断探索想要解决的问题。

58心宠是什么

58心宠是专注于宠物活体交易与服务运营的专业平台。通过与优质的商户合作为购宠用户提供有利的保障，我们通过自己的努力规范环境混乱的宠物交易市场，做到“幼宠实拍+种犬/猫备案+防疫管控+售后质保”四重保障。是链接B端商户与C端用户的一道桥梁。

58心宠于2015年9月正式独立运营。今年2月，58心宠正式回归58同城，将继续专注于推动国内宠物交易市场的健康发展，打造优质宠物交易信息平台，构建全流程购宠服务保障。

02 改版背景

心宠回归58后首先要与集团业务进行融合，除了B端业务的打通，在C端视觉风格上也要与集团业务保持一致，旧版页面因为长时间未做改版，样式陈旧，设计规范性差，功能体验不足等问题也日趋明显。

且详情页作为用户使用产品时的必经页面，承载着用户决策的重要信息。原有页面信息层级混乱，核心信息优先级较低，现有结构已经不能满足用户的需求。为提升心宠的流量，保证设计的一致性对心宠详情页进行改版。

1. 发现问题

本次改版主要解决以下两个问题：

在改版前我们分析了原有页面存在的一些问题：

03 解决问题

针对于上述的问题，我们分别在视觉层和框架层分别入手进行改版优化：

1. 视觉层

大黄页下类目繁多，心宠做为黄页类目的一部分，既要保持其品类独有的差异性。也要保证整个黄页风格的统一。

提升页面一致性：在视觉上根据以下几点做了统一

头图：改版后详情页由H5页面改为native页面，所以产品头图可以与黄页详情保持统一。
字号：心宠原有版本整体字号偏小，改版后与黄页规范字号大小保持统一。
色值：将页面内心宠主色#FF2737改为平台主色#FF552E，统一色值。
卡片：信息卡片由直角改为大圆角
tab:统一tab切换方式，底部tab使用平台通用组件，保证设计的一致性。

下图是改版前和改版后以及和黄页宠物详情的对比，整体页面风格都有了一个大的变化。

差异化设计：在保证设计统一性的同时，与黄页原有宠物品类也要做相应的差异化处理，让用户了解自己进入到的是心宠的还是黄页的宠物详情页，所以改版后在店铺的位置增加了心宠的logo，增加心宠品牌的露出，强调心宠品牌。这样不仅可以加深用户对品牌的认知，还能明显区分心宠宠物详情和黄页宠物详情，使用户不会产生混淆。同时在保障图标上也做了相应的颜色区分。