产品页面设计的UX实践

精心设计的产品页面对于电商网站至关主要，由于大多数购买决策都在这里进行。
我们总结了有关产品页面设计的盛行做法，并供应许多示例。

在电商网站中，成功的标准不是网站访问者或点击次数，而是终极购买的数量。
从这个角度来看，产品页面至关主要，由于它常日是“购买或不购买”的大多数决策发生的地方。
因此，在设计或改进电商网站或运用程序时，UX设计职员必须仔细考虑并对其进行详细测试。

那便是我们本日的文章所要谈论的：让我们谈论什么是产品页面以及如何有效地设计它。
包含大量来自已知电子商务网站和针对市场或特定业务目标的创意设计观点的示例。

一、什么是产品页面

产品页面可为客户供应有关特定项目的所有必需信息，可以选择各种选项，并使客户能够根据须要快速进行购买过程。

与真实的发卖不同，电商网站不供应商品的实际联系或店员的帮助。
产品页面成为吸引力，印象，信息和说服力的紧张来源。
因此，其设计，可导航性和可用性在发卖增长中起着至关主要的浸染。

设计不良的产品页面可能会摧残浪费蹂躏买方的精力。
因此，除了吸引人的产品先容外，还要关注功能性、清晰度、可读性和直不雅观导航。

二、产品页面的范例元素

基本上，一个产品页面：

显示产品图片；供应有关产品的所有必要信息；许可用户选择不同的颜色/型号（如果有）；使访问者可以查看早期购买者的评论，评分；许可将产品添加到购物车；显示其他干系选项。

基于此，这是产品页面布局的基本元素的清单：

项目名称/标题图片价格项目可用性添加到购物车/添加到购物袋/添加到购物篮/购买按钮添加到收藏夹按钮商品描述社会证明：评分，评论，以前的购买者数量等。
颜色选择型号选择选择要购买的物品数量尺码指南或推举（用于衣服和鞋类）扩展的细节（材料、技能规格、尺寸、重量、分外功能等）

上面的列表并不虞味着所有产品页面都必须具备所有要点，选择将取决于剖析多种成分，理解目标受众并确定优先级，以查看针对此特定类型的商品或客户种别，要包括哪些要点以及哪些要从列表中删除。

三、产品页面的设计实践1. 视觉示范

电商网站是证明图片代价的最佳地点，无法亲自打仗商品，访客将依赖产品的视觉效果对商品产生第一印象。
更主要的是，图片比笔墨更随意马虎被把稳到，它们将是吸引访问者把稳力的第一个元素，他们呈现的内容既丰富又具有情绪吸引力。

这便是为什么许多电商网站：

利用一组图像从不同的角度呈现一个项目；运用缩放功能，使访问者可以更近地看照片的某些部分，查看纹理和小细节；将项目的照片与模型或适当环境下的照片结合利用，以更好地理解其外不雅观和尺寸。

除了图像外，还可以利用其他更繁芜或更具交互性的媒体。
个中，您现在可以找到：

产品视频，详细的视频评论息争释；物品的360度视角；增强现实技能可帮助人们在自己的环境中不雅观察物品或在虚拟环境中进行考试测验。

显然，这些类型的媒体常日比照片更繁芜，耗时且昂贵。
因此，是否值得决定常日取决于所供应物品的类型和价格。

例如，出售一件5美元的T恤，照片就足够了，但是要购买价格昂贵的冰箱，智好手机，打算机乃至汽车，客户就须要更具说服力的决策办法。
在这种情形下，花在更繁芜但更令人印象深刻，有说服力和信息量丰富的视觉和媒体上的用度可能是值得的投资。

2. 内容丰富但大略的描述

当客户决定费钱时，他们会阅读须要理解的关于要购买的产品的信息。
不过，由于关注范围非常有限，以是这不是超载描述的缘故原由。

解释笔墨应简洁，真实，大略，并以听众的措辞讲话。
它该当回答以下基本问题：产品是什么，外不雅观如何，功能如何以及如何实行。
最好从第一行开始阅读，由于第一行阅读的可能性最大，而不是用标准的营销套路。

不仅要详细描述袋子的外不雅观，还要显示照片。
不要只说这条围巾和那件夹克有多俊秀-请显示照片。
将笔墨的力量与适当的图像结合起来，可以使体验更加有效。

3. 超级明显的号召性用语

号召性用语（CTA）该当立即引起把稳。
在电商界面中，CTA元素是与产品有效互动的核心成分，它们在可用性和导航性起着至关主要的浸染。

如果为用户清楚地构建了交互和过渡路径，但CTA元素不明显，放错位置或设计不当，则风险会增加，用户会感到困惑。
因此，不良的转换率和不良的用户体验的风险增加了。

四、专注于项目

考虑到产品页面的布局和内容，利益干系者和设计职员都感到有将所有可能的东西都填满的冲动，乃至更多，以使页面超级有用。
但是，请谨慎操作，由于这种策略可能会带来负面的影响：在信息泛滥的情形下，焦点变得模糊，访问者可能会太分心甚至无法做出决定。

一方面，建议不要在页面上堆满大量信息，这些信息会使客户不知所措，并使他们的把稳力从紧张目标（购买）上转移开来；另一方面，访问者不准备从一页跳到另一页以获取有关他们感兴趣的项目的不同信息。
因此，设计者必须花韶光对问题进行深入研究，仔细确定优先级，然后查找产品页面上须要供应的数据。

利用原则倒金字塔并逐渐创造信息，从最主要，最先显示的信息，到越来越多的详细细节，进一步揭开面纱。
在内容演示中要开放，直接和整洁，而不是引起外界的兴趣。
考试测验将所有核心信息以易于阅读的形式放在页面的折叠部分。

然后进行测试，剖析页面上的韶光，热图和点击次数，讯问并进行剖析，以理解购买者真正须要什么以及什么使他们购物方便。

五、直不雅观的导航

每个按钮，链接的设计都可以显著改变转换率。

始终牢记至关主要：在我们如今在电商网站中不雅观察到的激烈竞争，购买者不准备等待或摧残浪费蹂躏韶光进行不必要的操作。
与实际商店比较，他们从电商网站中得到的需求是一种更快，更轻松，更便捷的体验。

因此，在添加明显的CTA时，请确保用户可以绝不费力地实行常见步骤，例如：

找搜索功能用导航快速理解网站确当前位置完备确定页面上的哪些元素是可点击的查看商品是否已经在购物车中查看购物车或购物袋中的商品数量在网站页脚中找到联系信息和导航链接

1. 同等性

同等性表示产品以相同或相似的办法与用户进行互换，无论互换的点或渠道如何。
就用户体验而言，这意味着相似的元素在外不雅观和功能上都相似，从而减轻了认知包袱，并使交互更加流畅和直不雅观。

在电商界面中，它涉及到以下两个方面：

内部同等性是指界面或品牌的不同部分，它们的外不雅观和行为就像一个清晰的系统。
例如，当您在产品的不同页面或屏幕上以相同的办法对所有CTA按钮进行着色和设计时，访问者可以快速学习，并能够在用户利用过程的任何步骤中迅速区分它们。

外部同等性是指界面的某些部分，这些部分的外不雅观和行为类似于大多数此类产品的范例模式。
举例来说，当您在发卖非有形产品的网站上利用购物车时，或在文本链接下划线时，都会向用户供应可点击的提示。

2. 可扫性和可读性

众所周知，进入网站或运用程序后，用户常日不会阅读和不雅观察页面或屏幕上的所有内容。

相反，他们从快速开始扫描理解个中是否包含他们须要或想要的东西。
理解了眼动追踪模型，格式塔事理，以及视觉层次，设计师和信息架构师可以将核心数据和交互式元素放在自然可见度高的区域。
使产品页面可扫描的其他成分是可读的排版和足够的空缺空间。

影响决策的成分很多，和谐是个中之一。
令人眼花的色彩组合，不可读或无法组合的字体，激进的背景，令人讨厌的弹出式窗口或动画，令人讨厌的声音或页面加载韶光长–这些东西的任何一点都可能迅速毁坏体验，分散用户把稳力并转移他们。
细节很主要，请仔细考虑并精心组织。

3. 社会证明

这个术语是由Robert Cialdini在1984年的著作《影响》中引入的，这个观点也称为信息社会影响力。

在电商网站中，前一个购买者的体验会极大地影响下一个购买者的行为，这便是为什么须要评分，评论的缘故原由，尤其是在大众市场平台上。
它们可以帮助客户与一群类似的买家联络在一起，这在其他购物者中的实际商店中很随意马虎觉得到，但是当您独清闲打算机或移动屏幕前购物时，在线购物体验中乃至须要更多。

更主要的是，评论可以回答客户的问题，从而为购买的积极决定供应支持-或防止购买缺点的商品并得到负面的体验。

4. 互动性

交互性模拟了从不同角度看待物品并进行操作，试穿衣服或鞋类，测试脸上的扮装选项，将家具或装饰物险些放到房间中的互动性，所有这些以及其他各种创新都是由于创造力，客户体验和新技能，变得越来越随意马虎得到。

如今，电商网站中交互性的另一个主要方面是个性化和自定义，人们可以自定义购买商品，而不仅仅是从目录中选择购买的商品。
选择一束鲜花的自定义组合，利用最喜好的食材定制汉堡或比萨饼，网络个人服装或家庭装扮，而不仅仅是购买现成的商品-能够在报价中添加自己的个性。

5. 移动适应

不用说，如今人们每天用智好手机做什么事，而购物已成为最主要的选择之一。

此外，移动适应是搜索引擎优化的核心网络要素之一。
如果您希望成功搜索一个电商网站并让访问者从任何设备上得到无缝的购物体验，请使产品页面适宜移动设备并重新考虑布局，以使界面便于移动设备浏览。

无论如何，无论本机运用程序是否存在，产品页面以及网站的别的页面都该当具有相应性并且对移动设备友好。

6. 404缺点

由于大量利用产品页面并常常对其进行更新，因此在不同情形下都会涌现缺点。
人们可能会欠妥心在URL或他们之前保存的页面中键入字母，由于该产品已经缺货，因此可能不存在。

确保不要让客户碰到一个空的缺点页面然后走开。
将它们连接到其他页面，供应干系选项或种别，并尽统统努力利用涉及客户的缺点页面来检讨其他内容。

六、总结

当然，要为特定的电商项目选择设计实践的决定是经由寻思熟虑的问题，关于利用什么和剩下什么的办理方案将基于产品和市场类型的许多主不雅观成分。
根据公司预算，店主的技能，个人品味和目标受众的特定需求进行细分。

无论如何，如果您供应的产品很好并且客户已经在网站上，则让产品页面以最佳的办法显示商品，让购物者觉得亲切、方便、清晰和友好。

作者：对啊设计君，微信"大众年夜众号：对啊设计君

原文链接：https://www.zcool.com.cn/article/ZMTI0NDk0OA==.html

本文由 @对啊设计君 原创发布于大家都是产品经理，未经容许，禁止转载

题图来自 Pexels，基于 CC0 协议