现在30%的在线购物都发生在手机上，在线购物中用户的体验要求会更苛刻，他们要求即时，快速，无缝的交互体验。所以交互设计师们就要帮这些用户花最少的力气和时间买到心仪的产品。

在这个过程中商品详情页无疑是最重要的，因为用户通过详情页得到足够多商品信息之后才会发生购买行为。这篇将要讨论如何设计商品详情页面，着重分析几个重要的页面元素：产品图片，商品描述和“加入购物车”按钮。

什么是商品详情页？

商品详情页是用户决定是否购买的页面，包含“加入购物车”，“加入愿望清单”，“立即购买”，“联系客服”等。有效的详情页用图片和文字来展示产品信息，库存，价格和清晰的购买路线。

产品图片

大部分情况下图片是否诱人决定了用户最终是否购买。一张图片胜过千言万语。不管你的产品是什么，图片都是详情页上最重要的一个元素。图片吸引用户眼球，突出产品特性，它既可以是情感驱动的，也可以是功能驱动。

1.用大图并放在页首

一个好的大图帮你解决很多问题。展示图片一定要放在页面顶端，不要让用户通过滑动才能看到你的商品图片。

2.提供图片库

图片可以传递商品的感觉，这是文字做不到的。所以，商品如片越多越好。尽可能多的展示产品的各方面特性。用户经常通过图片来判断产品的性能，你应该提供产品的细节和功能展示图。

3.横向滑动展示图片

让用户通过横向滑动去查看图片而不是上下滑屏去查看。

4.用高清图片

图片和视频必须高质量。保证图片在各个平台都能有最好的展示效果。在Android平台上，图片需要XHDPI或者XXHDPI，iOS上建议iPhone 6 Plus用@3x，@2x用在其他iOS设备上。

5.图片可以轻松放大

让用户可以放大图片看更多产品细节，通过双击或者点击一个缩放按钮。这点对服装产品特别重要，因为用户对细节的关注程度更高。放大的图片也要保证清晰度。

放大的部位和放大程度都由用户来控制

商品描述

商品描述要包含产品的功能，工作方式，如何帮用户改善生活等。应该可以浏览（总体概述）和仔细查看（特定信息）。

1.格式清晰

产品描述格式要清晰，例如一个列表或者圆点，可以快速阅读。关键信息要突出，鼓励用户购买。

2.文本易读

字体的大小和排版可以很大程度影响手机的阅读体验。字体越小，字间距越小阅读速度越慢。结果用户可能会略过大部分信息。

字体大小：为了便于阅读，字体的大小要大于11pt，字体在同一个App中要保持一致。一个好的手机阅读体验是一行30-40个字。

对比：保证文字和背景的对比度，特别是在阳光底下使用的时候。根据WC3的设计指南，一个颜色和它的背景的对比度根据光照条件的不同在1-21之间。

间隔：在小屏幕上，空间间隔非常关键。一个好的文字间隔可以增强可读性。不要让文字有重叠。可以通过增加行高或者文字间隔来提高可读性。

动作按钮

永远不要让用户去找按钮，“加入购物车”和“购买”按钮应该是最重要的两个按钮，用户的视线应该自然地被这两个按钮吸引。第二重要的按钮“分享”“加入愿望清单”应该放在“购买”和“加入购物车”按钮附近。

1.重要按钮的眯眼测试

通过眯眼测试来看重要的按钮是否足够突出。只要对界面进行模糊处理，眯眼看。如果发现它们相比于周围的环境不够突出，那么可以考虑改变按钮的颜色，让它不同于界面上的其他元素，或者把它变大，或者加粗文字。

2.重要按钮保持可见

重要按钮在页面滑动的时候也要保持可见。把它们固定在页面的底部。这可以让用户在任何时候都可以点击这些按钮。

3.点击区域足够大

页面上所有可点击的区域要足够大，方便用户点击。之前的文章介绍过点击区域的交互设计，不再赘述。感兴趣的可以翻翻以前的文章。

4.提供视觉反馈

当用户把一个商品加入购物车之后，缺少反馈可能导致它们不知道操作是否成功，甚至无法进行进一步操作。

视觉反馈帮助用户确认操作是否成功。App可以提供微动画或者其他形式的视觉反馈来帮助用户解决这个问题。

总结

详情页上的任何元素都应该帮助用户做决定。用户在评估一个商品是否值得购买的时候，不仅从功能（理性）层面去判断，还会从情感层面去决定。好的详情页既是理性的，也是感性的，它们可以激发用户的购买欲。

转自： SS工作室

作者： stella

IAMUE网站iamue.com是一个 专注分享交互设计的干货网站

交互设计师图书导航：http://books.iamue.com/

交互设计必备导航 ：http://hao.iamue.com

微博：

在微信里搜索：

喜闻

乐见

的

广告

时间

《交互设计入门必读图书》

原文链接限量签名版还有货！

预售购买的同学们的书

已经陆续到手了...

现在

点一下

左下角的原文链接

去天猫书店瞅一瞅去嘛~

复制链接分享给朋友：

http://share.laiwang.com/s/Shy7s?tm=9d74c2