关于一个商品详情页的设计
做产品要既要有大局观也要察微知著。
文章主要涉及：
1.分析商品详情页包含的信息元素
2.分析商品详情页包含的功能操作
3.分析用户使用场景
4.分析页面包含信息原理
5.组合设计，又该如何去设计
1.商品详情页包含的信息元素
首先，去有关的电商网站上，进入商品详情，查看商品详情包含什么内容，用户可以进行哪些功能操作？
1.首先，去常用的官网看一下电商的详情页包含什么元素？不同商业模式的详情页包含的信息元素是否一样？
查看完毕之后分析包含的信息元素并列举有关商品的全部页面信息元素，不包含操作功能，如下：
|
信息元素
|
描述
|
优先级
|
|
1.网站导航
|
网站的整体导航，可从当前页退出，去往其他的页面
| |
|
2.店铺信息 logo、广告、名称
|
店铺基本信息说明，提高用户的认知和信任度
| |
|
3.店铺导航
|
店铺的商品导航，任意选择可进入查看相关商品
| |
|
4.商品展示图
|
主要售卖商品，给人视觉直观感受
| |
|
5.商品的基本信息：名称、价格、规格
|
商品基本信息，名称、价格、颜色、物流配送地等。
| |
|
6.推荐商品
|
推荐与此商品价格、规则类似的商品，用于比较购买。
| |
|
7.店铺客服
|
当存在疑惑时去咨询有关人员，了解详情。
| |
|
8.物流信息
|
商品的所在地，配送时间的预估。
| |
|
9.商品分类
|
店铺商品详细的分类，点击可查看相关商品。
| |
|
10.商品详情
|
商品的详细介绍
| |
|
11.商品评价
|
用户对商品的详细评价
| |
|
12.购买导航
|
加入购物车后显示当前购物车的数量等、客服、订单查看等。
| |
|
13.购买组合
|
推荐商品购买的组合。
| |
|
14.浏览推荐
|
浏览过的商品推荐
| |
|
15.售后服务
|
商品售后服务介绍
| |
列举在此页面用户能够进行的操作，如下：
|
信息元素
|
用户场景
|
优先级
|
|
a.商品展示图查看
|
用户点击图片，图片可放大
| |
|
b.加入购物车
|
将商品加入购物车，暂时不支付
| |
|
c.立即购买
|
立即购买商品
| |
|
d.分享
|
将商品分享到有关媒介或者朋友
| |
|
e.关注
|
关注商品，降价或者有关消息将被通知
| |
|
f.属性选择
|
购买或查看、比较自己喜欢的样式
| |
|
g.返回上一级
|
返回到上一层浏览的页面
| |
|
h.评论
|
如果已经购买过商品，添加商品评论
| |
|
i.回复
|
对评论的回复
| |
|
j.点赞
|
对其他的品论点赞
| |
|
k.进入购物车
|
去往购物车，查看全部购物车中的商品
| |
思考每个信息元素和功能操作的设计原理，及用户使用场景。
用户画像：
小红，25岁，是一名IT白领，上班基本很忙，中午吃饭的时候偶尔逛逛购物网站，买点日常所需。
已入深秋，突然想起急需要要买一件羽绒服，于是中午休息的时候,准备买一件。中午一个小时的休息时间，吃完饭还有20分钟的休息时间，在这20分钟内，小红期望浏览到中意的衣服，并下单。
用户场景一：
小红急急忙忙的打开某网站，直接去搜索羽绒服，出来一整页衣服，按照各种条件搜索后，小红进入商品详情，看看是否有适合自己的衣服。首先进入眼帘的是商品的图片，看着还不错。然后去看看价位，是否符合心理的预期，看完还算能够接受，再去看看商品的颜色、是否有库存，浏览完之后，发现没有自己喜欢的颜色，于是想要离开。再次的找到一个看着还不错的衣服，进入详情查看，看到商品的颜色有自己喜欢的，就去了解一下商品质量如何，先去看看用户的评价，基本上都是中评，偶尔几个差评都是吐槽物流，想想还是去跟店家确认一下，确认完之后，还是略有不满意。详情页的旁边正好有推荐的商品，随手点击进入查看，经过反复的比较之后，终于选择了一款比较满意的衣服，想想不急着穿，于是先加入购物车，心理想等等看看是否会降价。
用户期望：打开网页后，商品符合自己的心理预期，愿意接受并下单。
用户查看商品详情有多种场景，在此不一一列举。从用户的使用场景中，可以分析用户会在哪些地方有困惑，哪些地方决定购买。前提是能够吸引用户进入到商品详情页。
因此详情页的作用是：1.引发用户的兴趣；2.引发潜在购买的欲望；3.赢得用户的信任；4.引发下单的决定 ；5.无购买欲望时，返回到上一级；6.进入到购买页面；7.和其他产品做比较，下单。
4.分析页面包含信息原理
接下来分析该展示哪些信息元素？
- 进入后首先吸引用户留下，需要一张比较好看的封面图；
- 商品的价格比较优吸引力，比如：给予的折扣比较多；
- 商品的介绍，比如：是不是新品，基本特点介绍；
- 商品物流信息，从哪发货，到达哪，是否有货？什么时候发货，什么时候到？
- 商品规则，sku的设计，是否符合用户心理；
- 商品详情，是否有资格认证，是否详情说明；
- 商品评价，是否有差评，差评点在哪，是否愿意接受；
- 商品的售后，能否退货，售后处理效率等；
- 商品的物流：支持发送什么物流？支持发货到哪？是否收取邮费？是，则如何收费？收费是否有运费险？
- 用户是否已经购买过此商品？如果是，则如何提示，如何设置更便于用户操作
- 最后，考虑商业模式，考虑产品1.0版本的时候商品的数目，然后将信息元素和功能操作组合起来，按照优先级排列，目标：实现版本1.0.0，保证用户能够看到，能够使用，能够支付。
5.组合设计，又该如何去思考
排列好页面元素和功能的时候，考虑页面的版式设计。当然在进行原型之前可以先绘制草图。在设计的时候还要考虑是否能够提高用户的询单率、是否增加用户的停留时间、是否能够提高转化率，是否会进一步的访问页面其他信息等目标。然后就根据这些目标考虑页面改如何排版，如何展示，又该如何交互，是否符合用户的使用习惯，在功能操作时出现的问题又该用户又该如何去应对等，跟上一层页面、下一步操作之间的页面任务流之间是否连贯等。
汇总做项目以来的原型设计原则：
- 排版整齐、干净原则：排版整齐、干净肉眼看到后会在大脑中折射一种实际的效果图，“哦，原来详情页长这样”。页面排版不整齐正如我们穿的衣服脏了以后，浑身散发出脏兮兮的样子，会让人产生嫌弃。自身工作如果做到精致，才有资格去指导别人。
- 主次原则：信息元素分析包含几个层级，哪些是重点突出，哪些要放大。比如：标题、副标题、说明文字放置在一块儿时要考虑什么是主要的、什么是次要的。
- 层次原则：主要考虑页面哪些信息需要有效分层，比如：页面导航和页面、图片的展示和介绍的展示。
- 少做原则：从用户体验和用户实际操作场景出发，尽量减少用户的操作频率，凸出核心信息，有效展示辅助信息，并让用户能够很快的发现。
- 统一原则：原型设计时也要保持整个产品、整个页面的交互、展示一致。
- 创新原则：对于有想法的产品，对比别人家的产品看看自己的设计是否创新，如果有创新，技术实现是否有难度、用户是否愿意接受等其他风险。
- 清晰原则：原型设计完及要标注说明，元素是什么，数据来源是什么，前置条件是什么等等要求。（此处扯一个话题，原型中标注清楚，其实感觉没必要写需求文档了。）
总结：从整体考虑产品时往往考虑着大局观，而把每个页面独立拆开来设计，要考虑许多细节，可谓刚柔并济。关于页面设计也是可以遵从《用户体验要素》中提及的产品设计5个层次。战略层（实现目标）、范围层（包含的内容、功能）、结构层（交互设计、信息架构）、框架层（信息设计）、表现层（视觉设计）。而每一层都需要认真的思考，每一种用户场景存在的可能性，是否有应对的策略。这就其中考察着产品独立思考的能力和很好的逻辑思维。
个人公众号：产品技术大作战，欢迎关注
文\ @妖萧懒
关键字：设计, 设计文章
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
