电商网站设计之商详页改版设计_电商网站商品详情页设计技巧

本文会从以下四个方面分别阐述: Part1:项目背景 Part2:项目目标 Part3:目前现状&解决方案 Part4:遇到的坑 | Part1:项目背景 商详页改版设计项目是运营同学发起的,发起原因大致有以下三点,分述如下: 商详页整体设计感差,样式排版混乱 商详页蹦失率太高,转化低 目前只有“加入购物车”流程,希望增加“立即购买”流程,给用户更多选择 | Part2:项目目标 运营同学希望通过本次改版优化,达到以下两个目标: 全面修改商详页设计风格,提升整体设计感,提升视觉层面的用户体验 借此优化商详页页面加载性能,降低蹦失率,提高转化 | Part3:目前现状 & 解决方案 经过笔者分析,目前商详页存在的问题诸多,主要表现在以下几个方面,并针对每个问题提出了自己的解决方案,分述如下: 1)顶部banner和轮播指示器 商详页决定着用户是否愿意将商品加入购物车,以及在多长时间内做出加车购买决策。 由于受限于手机屏幕尺寸,一屏内能呈现的内容极其有限,顶部banner的展示占据了较大问题。banner的展示我相信运营有自己的考虑,更多是希望在商详页向其他页面(如活动页、专题页)引流。 可是有没有想过,商详页最重要的任务在于让用户尽快加车,提高“商详页的转化”,把用户引流到其他页面去,我实在无法理解这是为什么。 另外,就是轮播指示器目前是放在图片之上的,这个也是要占空间的。 如图。 点开小图看大图 #解决方案: 1.建议直接去掉banner;或者对商品类型进行分类管理,针对不同类型的商品进行差异化运营——比如热卖sku不加banner,销量平平的sku可以加banner(不一定对,我只是随便举个栗子); 2.将轮播指示器放到图片上去,节省空间。 #优化草图:   点开小图看大图 2)销售属性(主要指尺寸和颜色两种属性) 目前尺寸和颜色两种属性的选择都采用的是「下拉列表式」的设计方式,我能想到的弊端在于: 展示不直观,用户选择属性需要操作两步:点击下拉列表——选中属性,当需要切换属性时,又要重复操作两个步骤,反复如此,操作成本实在太大; 不符合移动端的用户操作习惯,用户在移动端操作更喜欢「标签式」or「点选式」的设计。 如图。 点开小图看大图 #解决方案: 针对这个问题,我采用了直观清晰的平铺的「点选式」设计方案,即将尺寸和颜色属性设计成按钮,全部一 一平铺展示出来,清晰可见,点击即选中,一方面更符合用户操作习惯,改善了用户体验,同时也符合「所见即所得」的设计原则。 #优化草图:   点开小图看大图 3)标签位置 目前由于各种促销活动、商品本身属性和类型等各种原因,会将商品在商详页打上各种标签,以示说明。 对于库存标、热销标和促销时间标等更是起到一个反馈商品热销情况,引导用户快快下单的效果。 但是由于未形成比较规范的标准,这些标很可能放置位置不是固定的,而且我们是跨境电商,有很多币种,遇到某个币种导致价格太长,就不得不折行显示了。所以常常导致“今天放在这个位置,明天就放到那个位置了”的位置。整体是混乱的。 如图。 点开小图看大图 因此,我做了如下优化。 #解决方案: 1.对于促销标,只能放到价格这一行(位于价格后面); 2.对于促销时间标,放到价格下方,并与“免邮标”放到同一行。 #优化草图:   点开小图看大图 4)商品增减控件 商品增减控件存在两个问题: 一个是样式丑,控件样式大,占空间; 一个是当商品数量为1时,「-」控件没有做类似置灰这样的处理,导致用户常常点击却没反应。这是明显违反「实时反馈交互效果」原则的。 如图。 点开小图看大图 因此,针对这个问题,我做了如下优化。 #解决方案: 1.优化控件大小和样式,看起来更协调 2.因为商品数量最小极限值是1,不允许选择0。所以当数量为1时,必须做相应处理,提示用户不可以点击「-」删减商品。 我采用的是置灰「-」控件的方案。据笔者观察,大部分电商平台都是这样处理的,不过笔者也曾见过直接隐藏「-」的做法。 #优化草图:   点开小图看大图 5)立即购买按钮 目前只有“加入购物车”按钮,没有“立即购买”按钮。尤其体验烂的地方在于,商品加入购物车没有任何提示与反馈,用户根本不知道自己是否成功加入了商品。 因此,针对这个问题,我做了如下优化。 #解决方案: 1.增加“立即购买”按钮,给用户提供双重选择。对于购买意向特别强,买完即走的用户,可能更倾向于直接点击“立即购买”,快速跳转购物车页面完成下单行为; 而对于购买意向不是很强烈,或买了还想买的用户而言,他们其实并不希望加入一个商品就立即跳转到购物车页面,这样如果他们还要浏览购买其他商品的话,必须得返回原页面或其他页面,增加操作成本,体验并不好。 2.就“加入购物车”这一步骤,我增加了实时反馈的交互效果——即加入购物车的同时,页面快速拉到顶部,mini购物车下拉展示刚才加入的商品流卡片信息,停留 5 秒后自动   收起。 同时该卡片上突出强调展示“查看购物车”按钮,这一设计细节也是为了引导一部 分用户进入购物车,以最短时间完成下单,却又不想“立即购买”流程一样显得强硬和突兀,更加如何用户心理预期。 #功能草图: 点开小图看大图 6)立即购买按钮、加车按钮、收藏按钮、活动按钮的权重设计 首先咱们先说加车按钮、收藏按钮和活动按钮,因为这是目前已经有的三个按钮。 从我对业务的理解来看,加车按钮的优先级应该是最高的,其次是收藏按钮,最后才是活动按钮。 可是从目前的处理方式来看,表现为“活动按钮>加车按钮>收藏按钮”的优先级顺序。原因如下: 活动按钮虽然用的是边框按钮,面积却最大,站了整个屏幕宽度; 加车按钮与收藏按钮放在同一行,但加车按钮是放在左边的。根据用户操作习惯,加车按钮应该放在右边吧。当然,这个我没有确切依据,不知道老外是不是跟我们一样的使用习惯。 除此之外,新增的“立即购买”按钮优先级应该最高。 如图。 点开小图看大图 因此,针对以上问题,我做了如下优化。 #解决方案: 1.立即购买按钮权重最大,优先级最高,所以放在第一位,用网站主色调玫红色,重点突出; 2.加入购物车优先级略低于立即购买,但是也很高,所以放在紧靠着立即购买按钮的下方,用边框+玫红色; 3.收藏按钮与活动按钮优先级差不多,并低于上两个按钮,所以用了小按钮,并将按钮和字体颜色均弱化。 #优化草图:   点开小图看大图 7)第三方社会化分享平台icon 网站的按钮和 icon 样式基本都是圆角的,这些第三方平台的 icon 却用的是正方形,我是真觉得丑——没有修改依据,真的是单纯的觉得丑,又显得突兀。 如图。 点开小图看大图 因此,针对这个问题,我做了如下优化。 #解决方案: 让前端修改了样式,改成了圆形icon——第三方平台的 icon 样式都可以改,但是没法按照我们的想法随意调整 icon 之间的间距。 #优化草图:     点开小图看大图 8)商品描述、尺码表和模特信息等内容的展示方式 目前这三部分内容采用的是类似 Tab 式的切换方式,跟 web 端的方式一模一样。个人也是觉得不符合用户习惯的。有两个理由: 当用户浏览商品描述时,看完这部分内容如果还要看尺码表或模特信息,他还需要往上拉动页面; 可扩展性差。模特信息不是固定的,也就是说有的商品有模特信息,有的商品是没有的。当没有模特信息时,那么这一块就是缺失的,大大降低了页面视觉体验;当需要增加内容时,这块是完全没法扩展的,不可能做成左右滑动展示的标签。所以你可以看到同属于一个层级的“评论”只能设计成列表式的了。 如图。 点开小图看大图 因此,针对以上问题,我做了如下优化。 #解决方案: 全部用类似 App 端的列表式方式,与“评论”统一起来。预期目的是为了优化展示方式,使之更符合用户操作习惯;可扩展性强。 #优化草图:   点开小图看大图 9)推荐商品模块 这一块没啥好说的,主要有一个问题是,关联推荐跟上面的内容不是同一个层级的,它是一个单独的模块,但是却在设计上没有做任何区分。 如图。 点开小图看大图 因此,针对这个问题,我做了如下优化。 #解决方案: 将关联推荐单独作为一个模块展示,与上面的内容进行明确区分。 #优化草图:   点开小图看大图 | Part4:遇到的坑 坑1: 首先在这里要感谢一下运营同学,提供的一些切切实实存在的问题以及建议,在这里表示感谢。这也是以上解决方案的一大重要思路源泉。 但是,由于我司的运营同学权力实在太大了,对产品设计细节干涉太多,而我劝说无果,最终惨败。 比如颜色属性这块内容。 本来我的设计方案是这样的。 点开小图看大图 但是运营同学非要照着公司其他网站来,将颜色属性设计成缩略图的形式。 于是,我调整了一下,变成了运营想要的。 点开小图看大图 然后呢,运营同学又跟我说,伟哥啊,手机屏幕太小了,一屏展示的内容不够,要拉到第2屏才能看到加车按钮这些,由于咱们有的 sku 属性比较多,要不你一行再多放一个颜色吧。 我问为什么? 她说能多放一个是一个嘛。 我说要是属性太多,可以优先默认展示几个属性,多余的折叠起来,点击更多再展开就好了。 她说不行,要全部展示出来。 嗯,好。你说了算。你开心就好。 于是,最后变成了这个鬼样子。 点开小图看大图 坑2: 因为公司基本上不做数据埋点,也没几个人有埋点的意识。我曾经很多次推动要做数据埋点,然而人微言轻,相关合作方根本不把我的话放在眼里,觉得这个一点都不重要。 当然,或许只是因为能力有限,真的不会做吧。 很显然,这个改版项目必然也是没做埋点的。因此,改版效果到底好不好,我也不知道(摊手无奈.TPG) | 说在最后 说了这么多,其实这些优化的方案没有一点是有足够的数据,或者用户反馈,或者根据用户调研的结论来支撑我的观点的。 大部分都是凭着自己对电商的一点了解,对用户的一点浅显理解yy出来的需求和方案,认为这可能就是用户所需要的,认为我这样做就能提升用户体验。 我想要去做更多有理有据的事情,可是目前的情况无法支撑我做这些。所以我只能随意yy。 一方面老板最大,必须要听老板的,不然没饭吃。 另一方面,运营同学权力太大,也要听她们的,不然自己不开心。 那既然这样,都听你们的咯。 当然,这一切的一切也有自己专业度不够,对业务理解不够深的原因。——可是,相关需求方就真的比我更了解业务吗,恐怕也未必。可能我这样想就又宽心了一点。 我想,这也是很多产品经理朋友在工作中经常遇到的问题,甚至可能是常态。 但是,但是,不管怎么说,让自己强大牛逼起来,用经验和专业说服需求方接受自己的方案,这个在任何时候都是非常重要的。恩。 项目完成一个月了,这次把项目经历分享出来,谈不上经验,就当是交流学习吧。当然,最后这段话当是和大家吐槽与共勉。 最后的最后,分享一下笔者做的这个项目的需求文档。没有那么多条条框框。也不是说有多好,当是分享学习吧。   点开小图看大图 以上。

友情提示:点赞熊源码网http://www.dianzanxiong.com点赞熊源码网 » 电商网站设计之商详页改版设计_电商网站商品详情页设计技巧
分享到:
赞(0)
广告位820*80