UX 设计之——商品详情页

现如今,30%的在线购物行为发生在手机端上。 对于在线购物一事,所有用户都期望能够得到快速、流畅的体验。因此,在购物过程的每一个阶段,即使付之最小的努力都有可能利于用户的整个体验过程(我们也应该以利于用户为目标)。

在一个应用程序中,没有任何其他地方能够像产品详情页一样对提升购买率如此关键,因为用户在购买之前往往需要充足的商品信息来了解商品。在这片文章中,我将谈论商品详情页的设计并重点强调该页面的几个重要元素——商品图片、商品描述和“加入购物车”按钮。

什么是商品详情页面?

商品详情页是用户用来做决定的地方,比如添加进购物车,收藏、预定、打电话、完成表单等操作。有效的商品详情页结合文本与图片来展示商品基本信息、透露其实用性、价格并有购买商品的清晰路径。

一、商品图片

常言道,一图胜千言。不管你的商品是什么,是耳机还是玩具,图片都是产品详情页中最重要的元素。不论是用来吸引用户注意或是区分产品特性,图片都是一个极其有效的方法。

1、使用主图并将其与描述区域区分开来

一张好的主图能够为你省很多言语上的事情。商品主图应该用于推销商品的主要特性,切忌让用户滚动后才能看到商品主图。

2、提供一个图片库

图片可以向用户传达商品描述永远无法传达的感觉。因此,在商品详情页中,图片越多会有更好的效果:

(1)多图能够全方位的展示商品特性;

(2)用户通常通过商品图片来评估其特性,因此,你应该提供展示商品特性和细节的图片。例如,如果你在卖音频接收器,你应该在其图片中标示出输入和输出端口,好让用户理解其特性。

(3)为了发挥图片库的最大作用,你应该使用跟商品描述中所强调的商品细节特性相对应关联的图片。

3、可横向滑动切换商品图片

用户应该能通过水平滚动来快速的切换商品图片,而不必非得上下滚动才能查看更多图片。

4、使用高质量元素

你应该只提供高质量的商品图片、视频或其他元素来抓住用户的眼球。确保你的图片使用恰当的尺寸并可跨平台使用。

(1)Android平台,图片应使用XHDPI (或者 XXHDPI)分辨率;

(2)IOS平台,iPhone6 Plus使用@3x尺寸,所有其他高分辨率设备使用@2x尺寸;

5、图片易于缩放大小

不管是双击或者操作一个缩放按钮,用户应该能轻易地放大商品图片来查看更多细节。这对服装类商品尤为重要,因为购买服装的用户通常更关注其细节部分。需要注意的是可缩放的图片仍然需要保持高质量。

二、商品描述

商品描述部分需要阐明该商品是什么,让用户会有何感觉,对用户的究竟有何用。这部分内容应该即易于概览又能够信息查看。

1、使用清晰的格式

商品描述应该有一个清晰的格式,如按列表或提要句格式,保证信息很容易阅读。商品的关键特性应该突出,从而吸引用户将其加入购物车。

2、文本描述易于阅读

文本的大小和布局对用户的阅读体验有巨大的影响。更小的文本,更小的行距和内边距会消耗用户更长的时间,其结果就是用户跳过了大量信息(没有耐心阅读)。因此,无论你使用哪种布局,请考虑以下几点:

(1)字体大小。为了保证文本清晰易读,你应该让字体大小至少保持在11pt以上(即使用户选择了小字体),而且贯穿整个程序的字体应该是一致的。另外,一个好的经验是每行使用30-40个字符。

(2)对比度。确保文本和背景间有明显的对比度,尤其在日光照耀下。WC3’s Web Content Accessibility Guideline设定了对比度的最小值,要求即便是视觉不佳(环境不佳)的用户也要能阅读你的内容,按照WC3的标准,一个颜色和其背景色的对比度按照其亮度被分为1-21等级。

(3)间距。对于小屏幕,间距是一个关键因素。好的间距提升易读性。请不要让文本重叠,应该通过增加行高或字符间距等做法,来提高文本的易读性。

三、触发动作的按钮

用户永远都不应该还要花时间去找那些操作按钮——屏幕中最主要的按钮(如“加入购物车”、“立即预订”)应该设计的最为突出,使得用户能够自然而然的注意到,紧随其后的那些按钮(如“分享”、“收藏”)按钮则在设计上也要接近于前者的视觉效果。

1、眯眼测试

使用眯眼测试来检测按钮有多突显。页面内容模糊处理后眯眼查看,按钮是否比其他任何元素更突出呢?如果答案是否定的,那么给它一个未在页面中其他地方使用的颜色或者让它更大、字体更粗来让其变得突出。

2、按钮要常显

你应该使主要按钮一直显示,即使你滚动屏幕内容,也要使它留在屏幕底部。这使得用户可以在任何时候采触发按钮。

3、按钮要足够大

应该使所有的控件元素足够大好让用户容易做点按操作;

(1)Android要求诸如按钮、图标、图标标签等所有控件元素的可触摸尺寸大小为48dp;

(2)iOS则要求所有控件元素的可触摸尺寸大小为44 x 44 pt;

4、提供视觉反馈

当用户添加一个商品到购物车里,反馈的缺失会让用户疑惑该操作是否生效。

那些通过精巧的动画效果或者其他视觉效果向用户传达反馈结果的程序则轻易的打消了用户的这种疑虑。

四、结论

商品页面的每一个元素都应该设计的有益于用户。请记住,在做出一个购买决定时,用户受感性和理性因素影响,成功的商品页面则能够向用户传达出这两方面的信息——他们在情绪上刺激用户兴奋,在理性上则让用户能放心的购买。

原文发布于微信公众号 - 交互设计前端开发与后端程序设计(interaction_Designer)

原文发表时间:2016-11-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏无原型不设计

网页设计排版中哪些元素最重要?

有一些网页设计新手会认为,在设计网页的时候最重要的应该是如何添加一些具有吸引力的内容,所以他们只把大量的精力放在内容的设计上。在我看来,内容质量的好坏确实是能...

3424
来自专栏知晓程序

如何转行小程序开发?不同品种的程序员该这样做

1412
来自专栏姬小光

普通程序员如何培养设计感?

你好,我是姬小光。如果你订阅这个号比较早,可能会看过我的《像素眼是怎样炼成的》。那篇文章主要是教你如何“找茬”,即如何发现设计稿或者网页上的不足之处。那么何为不...

1631
来自专栏知晓程序

为什么小程序能适配不同机型?因为微信做了这个

2034
来自专栏HTML5学堂

HTML5的“鸡肋”知识

鸡肋,食之无味弃之可惜 出自《三国志·魏书·武帝纪》裴松之注引《九州春秋》曰:“夫鸡肋,弃之如可惜,食之无所得,以比汉中,知王欲还也。”什么意思呢?其比喻做没什...

3978
来自专栏it知识分享

web前端程序员需要会那些技能?

  黑马程序员为大家分享web前端学习6大技术知识点,希望可以在今后的学习中帮到找到重点,以及学习的主次之分。

1595
来自专栏网站设计制作、数字营销

企业网站如何制作才能适应SEO

中小企业网站多数以展示企业产品及服务为主,网站功能已展示为主,网站的内容也是围绕着企业的产品或服务做介绍。对于中小企业网站做推广的方式中,搜索引擎营销是目前中小...

840
来自专栏爱原型爱设计

干货!不得不知的UI界面中“行为召唤按钮”设计秘诀

以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具。

3759
来自专栏BestSDK

如何为App图标挑选合适的颜色

image.png 在之前我已经研究过了从app描述、截图、名称到国家/地区的所有东西。最能勾起我兴趣的是app的图标,但苦于不知如何去对此进行有效的研究。 ...

2759
来自专栏梁源的专栏

源氏实验室 - JavaScript权威指南 - 思维导图

1604

扫码关注云+社区

领取腾讯云代金券