网站wap端商详页改版设计总结：问题与解决方案大公开

时间：2026-02-17作者：admin分类：排版与出版物设计浏览：5评论：0

前段时间，笔者主导了网站wap端的商详页改版设计，这次终于抽出时间，来好好地进行分析总结。虽说从这个项目当中，能够获取的经验距离笔者的预期相差甚远，不过这个小项目或多或少融入了笔者诸多思考，当然存在着不少不足，在此一并分享给大家，彼此相互学习。

本文会从以下四个方面分别阐述：

Part1：项目背景

商详页改版设计这个项目。它乃是由运营的那几位同学给发起的，发起的缘由约摸有下面这么三点，分别作如下阐述，标点。

Part2：项目目标

运营同学希望通过本次改版优化，达到以下两个目标：

Part3：目前现状&解决方案

经由笔者剖析可知，当下商详页所存在的问题数量众多，这般问题主要展现于以下若干方面，紧接着针对每一个问题笔者提出了自身的解决办法，具体分述情况如下：

1、顶部banner和轮播指示器

商品详情页面，它在决定着用户，愿不愿意呢将此商品添加到购物车一栏，并且还决定着又需花费多长时间，才能做出把商品添加进购物车然后去购买的那种关于决策，就这样。

因为受到手机屏幕尺寸的限制，一屏之中能够呈现出来的内容非常有限，顶部banner的展示占据了比较大的问题，banner的展示我相信运营有着自身独立的考虑，更多的是期望在商详页朝着其他页面（像是活动页、专题页）进行流量引导。

然而，有没有思考过，商详页最为关键的使命在于促使用户迅速添加到购物车，从而提升“商详页的转化率”，进而将用户引导至其他页面，对此我着实难以弄明白为何会如此。

另外，存在这样一种情况，即轮播指示器当前处于放置在图片之上的状态，而这与此同时，它也是属于那种会占据空间的情况的。

如图：

因此，针对以上问题，我做了如下优化。

解决方案：

建议直接把banner去掉；或者针对商品类型来开展分类管理操作，对于不同类型的商品实施差异化运营——比如说热卖的sku不加banner，而销量较为一般的sku能够加banner（未必准确，我只是随意地来举个例子〕就可以了；把轮播指示器放置到图片那儿去，以此节省空间。

优化草图：

2、销售属性（主要指尺寸和颜色两种属性）

当前，尺寸以及颜色这两种属性的选取，均采用的是「下拉列表式」这样的设计形式，我所能想到的不足之处在于。

呈现并非直观，用户挑选属性得开展两步操作，先是点击下拉列表，接着选中属性，而当要切换属性时，还需要再度重复那两个步骤，频繁这般做，操作成本着实太大，它不符合移动端用户的操作习惯，用户于移动端操作时更青睐「标签式」或者「点选式」的设计。

如图：

因此，针对这个问题，我做了如下优化。

解决方案：

针对该问题，我运用了直观明晰的平铺式「点选式」设计方案，把尺寸以及颜色属性创设为按钮，将它们全部逐个平铺予以呈现，既能清晰看见，点击就能选中，一方面更契合用户操作习惯，提升了用户体验，同时还符「所见即所得」的设计原则。

优化草图：

3、标签位置

当前，鉴于各类促销活动，鉴于商品自身的属性与类型等诸多缘由，会把商品于商详页之上打上各式各样的标签来予以说明。对于库存标，对于热销标，对于促销时间标等而言，更是起到一种反馈商品热销状况，引领用户迅速下单的成效。

然而，鉴于尚未构建形成颇为规范的标准，这些标极有可能放置的位置并非是固定不变的，并且，我们身为跨境电商，存在着诸多币种，一旦碰到某个币种致使价格过长，那就不得不进行折行显示了。所以，时常会致使出现“今天放置在这个位置，明天就放置到那个位置了”这般的情况。整体呈现一个显得纷繁杂乱无法有序的状态。

如图：

因此，针对这个问题，我做了如下优化。

解决方案：

就促销标而言，它仅仅能够放置在价格那一行，且是处于价格的后面位置；对于促销时间标来说，要放置在价格的下方，并且要和“免邮标”放置在同一行当中。

优化草图：

4、商品增减控件

商品增减控件存在着两个方面的问题，一方面是其样式十分难看，商品增减控件的样式很大，占据了较多的空间；另一方面是当商品数量处于为1这个状态时，「-」控件并没有做出类似于置灰这般的处理，致使在这种情况下用户常常进行点击操作却没有任何反应。而这显然是明显地违反了「实时反馈交互效果」这一原则的。

如图：

因此，针对这个问题，我做了如下优化。

解决方案：

将控件的大小以及样式予以优化，看起来会更为协调，鉴于商品数量的最小极限值为此1，不被允许做出选择0的操作。因而当数量处于为1的状态时，势必要进行相应的处理，提示使用者不可以去点击「-」来删减商品。我所采用的是将「-」控件设置为灰色的方案。依据笔者观察而言，大部分的电商平台均是如此进行处理的，不过笔者也曾见识过直接把「-」隐藏起来的做法。

优化草图：

5、立即购买按钮

此时此刻，仅存在着“加入购物车”这样的按钮，而“立即购买”按钮并不存在。特别值得一提的是，体验糟糕至极的地方在于，当商品被加入购物车的时候，没有任何的提示以及反馈，用户根本就不清楚自己是不是成功地添加了商品。

因此，针对这个问题，我做了如下优化。

解决方案：

增添一个“立即购买”按钮，为用户拿来双重选择，对于那购买意向尤为强烈， purchases 完便离开的的用户来说，也许更加倾向于直接点击“立即购买”，飞速跳转至购物车页面达成下单举措；而对于那购买意向并非很强烈，又或者买了还想再买的用户来讲，他们实际上并不乐意加入一件商品就立刻跳转到购物车页面，如此一来要是他们还要去浏览选购其他商品的话，就非得返回原页面或者其他页面，增添操作成本，体验可不太好。针对“加入购物车”这一步骤，我增添了实时反馈性的交互效果，当加入购物车时，页面迅速被拉伸至于顶部；届时，mini购物车向下展开，展示刚刚加入商品的流卡片信息，停留时长精确设定为5秒整，而后随即自动折起且收起；与此同时，在该卡片呈现突出强调性的展示“查看购物车”按钮，此项设计细节的目的在于引导一部分目标用户进入购物车，从而在最短时间之内完成下单行为，却又不至于像“立即购买”流程那般显得强硬和突兀，进而更为契合用户心理预期。

功能草图：

6、立即购买按钮、加车按钮、收藏按钮、活动按钮的权重设计

先说加车按钮，再说收藏按钮，然后说活动按钮，这三个按钮是目前已有的。就我对业务的理解而言，加车按钮的优先级应该是最高的，收藏按钮其次，活动按钮的优先级是最后。

但是呢，就当前这处理的方式而言，呈现出的是这样一种优先级的顺序，即“活动按钮大于加车按钮，加车按钮大于收藏按钮”。理由是下面这些：

用于活动的按钮，采用的是边框按钮形式，其面积却是最大的，占据了整个屏幕的宽度；加车按钮与收藏按钮放置于同一行，然而加车按钮却是放置在左边位置的。按照用户的操作习惯，加车按钮理应放置在右边才对。当然，对于这点我并没有确切的依据，不清楚老外是否和我们有着一样的使用习惯。

除此之外，新增的“立即购买”按钮优先级应该最高。

如图：

因此，针对以上问题，我做了如下优化。

解决方案：

网站排版设计_wap端商详页改版设计_商详页优化方案

因立即购买按钮权重是最大的，其优先级是最高的，故而设置放在第一位，采用网站主色调玫红色来呈现，重点突出加入购物车，其优先级略低于立即购买，不过也是很高的，于是放置在紧靠着此立即购买按钮的下方位置，使用边框形式并搭配玫红色，收藏按钮与活动按钮优先级差不多，且低于上面两个按钮，所以采用了小按钮，同时将按钮以及字体颜色均做弱化处理。

优化草图：

7、第三方社会化分享平台icon

网站的按钮样式基本都是呈现为圆角形状的，网站的icon样式原本也大多是圆角。然而，这些存在于第三方平台里的icon呀，竟然选用的是正方形样式！实实在在是我个人无比觉着样子丑恶——实在全然是单纯依据个人感受就觉得它丑，而且处于整个网站的环境里这还显得特别突兀！

如图：

因此，针对这个问题，我做了如下优化。

解决方案：

前头的作了样式的修改，使之成了圆形的图标，第三方平台的图标样式都能够进行更改了，然而却没办法依照我们所设想的那样随心所欲地变动图标相互之间的间距。

优化草图：

8、商品描述、尺码表和模特信息等内容的展示方式

当下，这三部分内容所采用的是类似于 Tab 式的切换形式，此形式与 web 端的方式毫无二致、完全相同。个人同样认为这种情况并不契合用户们的习惯。存在着两个缘由：

当用户在浏览商品描述之际，于翻阅完这部分内容后万一还想要查看尺码表亦或是模特信息，那情况下他还得向上方拉动页面才行；其具备的可扩展性欠佳。模特信息并非是固定不变的状态，这意味着存在一些商品是有模特信息的，然而也有一些商品是不存在模特信息的。当不存在模特信息之时，那么这相应的一块便属于缺失状态，这极大程度地降低了页面的视觉体验效果；当有需要增加内容的情形时，这块完全没有办法进行扩展，根本不可能将其设计制作成能够往左右方向滑动展示的标签样式。所以由此你能够发现同处于一个层级框架之内的“评论”，最终只能被设计成列表形式的了。

如图：

因此，针对以上问题，我做了如下优化。

解决方案：

都运用跟 App 端类似的列表式形式，跟“评论”达成统一。预期的目的在于去优化展示的方式，让它更契合用户的操作习惯，具备强的可扩展性。

优化草图：

9、推荐商品模块

针对这一部分来讲，也就没什么需要阐述的了，只不过存在着这样一个问题哟，关联推荐所涉及的并非是与上面内容处于相同的层次划分，它实际属于一个独立的部分，然而却在设计方面未曾进行任何区分操作呢。

如图：

因此，针对这个问题，我做了如下优化。

解决方案：

将关联推荐单独作为一个模块展示，与上面的内容进行明确区分。

优化草图：