上一章 商品列表页面设计

电商详情页面设计

UX百科编辑部2023-12-19 发布
1052人在学·2条笔记
收藏

商品详情页是用于展示商品具体信息和进行购买的页面,大家都很熟悉无需多做介绍。虽然常见,但商品详情页是个相对复杂的页面,因为页面中包含的组件模块和字段信息很多,且页面长度会很长。

所以设计前要花比较多的时间,确定页面中包含哪些模块,顺序,以及对应的字段信息。

最常用的模块包含顶部展示图、商品信息、规格选择、商品评价、详情介绍、相关推荐、底部操作栏。不同项目包含的模块不同,顺序也不一样,所以要自己做好分析。

然后使用和首页设计相同的方法,完成整体的框架定义和参数设置:

在该页面的设计中,主要难点集中在上方的商品信息和规格选择上。首先是商品信息,一般会包含当前价格、原价、标题、副标题、各类标签、销量信息等,要对它们进行合理的布局和分配。

如果按正常的逻辑理解的话,应该先解释商品信息再看价格,但点击进入商品详情页多数情况下已经知道这是什么商品,进入该页后除了图例外用户最关心的就是价格,所以主流的做法都将价格放到商品信息之上。同时商品标题通常都会堆积大量关键字,所以往往字数很多,要支持多行的显示。

而规格选择,是用于选择该商品下的具体规格类型,理论上一个规格应该独立选择一次,比如手机有颜色和内容容量各选一次。但今天的做法普遍将它们合并成一个选项,通过点击后在展开的规格选择面板内完成所有规格的选择。

同时,规格的选择往往也会将促销相关的选项结合进去,比如领取优惠券、活动列表、满减类型等等,为了让用户理解选项和引导他们点击,通常会将选项内容露出一部分。

之后占据页面最大篇幅的商品介绍,是有一张设计好的详情长图组成,通常不需要 UI 设计师负责,只要预留好图形的区域即可。

至于其它组件,就无需多做介绍,这个页面的设计同样因为商品本身的图片多色彩丰富,所以也只有最重要的 UI 元素需要填充主色和辅助色,下面是最终输出的效果。

课后作业

本次的练习依旧是根据已经掌握的内容,根据自己的理解完成下图两个界面的重新设计,相关图片素材可以直接从不同的电商网站上复制。

1052人在学·2条笔记
收藏
已学会
19人已学会
下一篇影音详情页设计
影音详情页是电影、剧集介绍的详情页面,是个类型的统称,也包含音乐、书籍等内容的详情页。 详情页内包含的内容也比较复杂,包括基本信息、评分、简介、作者/演员、评论、相关推荐、底部操作栏等等。同样需要在前期分析页面中包含对组件内容排序和对应字段的整理。 在该页面类型中,最难设计的就是顶部的基本信息模块,...
本章笔记
仅看自己
logo
凯尔队长发布于 2024-03-05
「点击进入商品详情页多数情况下已经知道这是什么商品,进入该页后除了图例外用户最关心的就是价格,所以主流的做法都将价格放到商品信息之上。」通过调换 商品信息 和 商品价格 的位置,突出商品价格让用户第一眼就注意到,这也是用户体验的一个方面~~~
如果按正常的逻辑理解的话,应该先解释商品信息再看价格,但点击进入商品详情页多数情况下已经知道这是什么商品,进入该页后除了图例外用户最关心的就是价格,所以主流的做法都将价格放到商品信息之上。同时商品标题通常都会堆积大量关键字,所以往往字数很多,要支持多行的显示。
回复