详情页中最容易被忽略的产品参数模块,该如何设计?

在电商详情页设计中
我们绝大多数的人都会在首屏下足功夫
因为它有着吸引用户阅读
提升转化的重要作用
所以理所应当要花心思在上面
一张完整的详情页,按照现在分屏式的设计,大概也都会在10屏左右,从第一屏到最后一屏,对于详情页整体呈现效果来说都非常重要。
但是在现实工作中,很多设计师喜欢过分强调首焦图(第一屏),而忽略了其他部分,尤其是产品参数。
因为大部分这个模块是详情页的结尾部分了,越是到最后越是容易忽略细节,做的粗糙,使得详情页前后视觉感受差异过大,虎头蛇尾。
所谓细节决定成败,尤其是这种偏整体性的设计作品,更要注重视觉、细节的连贯性。
所以今天就着重说一下详情页中最容易被忽略的产品参数模块,如何做更出彩?
产品参数,顾名思义就是产品的详细信息,比如:尺寸、材质、颜色等等,多以文字信息为主,下面我们以展示形式的不同进行分类。
1. 纯文字形式 
这也是最常见的一种表现形式,把产品的具体参数直接以文字的形式展示,但即便是简单的文字信息,也并不是说所有人都能做的很好:
这是一位读者让我看的详情页中产品参数的模块,尽管都是文字信息,但显然这个模块做的差强人意,有些粗糙了。
虽然主次信息做的还不错,但是导致视觉乱的最直接原因:标题与说明性文字是居中对齐的形式,但说明性文字内部又是左对齐的形式,所以整体留白和对齐都很不规则,导致视觉感受是乱的。
下面是我为大家找的纯文字形式的产品参数案例,一起来看看:
其实纯文字的产品参数,只要做好主次关系、对齐和留白,就不会感觉差,如上面案例的表现形式,在平时工作中用的也很多。
还可以继续优化和提升,但是做好纯文字形式的产品参数是继续优化的前提,如果在上图基础之上加点光影效果,会使得这个模块视觉感受更加丰富:
在我之前关于详情页制作相关的文章中就说过,这种有光来的效果很早在详情页设计中很实用,即便是简单的文字排版,加上光影效果之后也会给人眼前一亮的感觉。
做设计最重要的是发散思维,多思考,先大胆的想,再考虑细节。
在纯文字的基础上我再加点类似卷纸、书本、或者夹板的展示效果会不会也会很出彩?下面看几个案例:
即使都是文字信息,视觉呈现效果也是天差地别,优秀的设计师不会放过任何一个模块的细节。
2. 结合产品图 
制作产品详情页的目的是有两个:让用户更深入的了解产品和促进买成,所以很多时候为了让产品参数信息更直观,往往会将文字与产品相互结合,在一定程度上也能增加关联性。
这种数据与产品相互结合的形式,为了更直观将一些常用数据,比如:产品的长、宽、高等,通过线条标注的形式体现在产品图上。
下面看看几个类似的案例:
如上图案例所示,产品与参数相互结合,使得冷冰冰的文字信息变得有温度、真实。
也可以在上图基础之上,整个模块加点纹理、光影效果或者是一些抽象化的线条,使得整体视觉感受上更有层次感,看两个案例:
还可以在将产品进行特殊化的处理,比如部分高斯模糊,也是很有层次感的一种表现形式:
还有另外一种,就是把产品做成简笔画的形式,或者是产品图与简笔画相互结合的形式,在一定程度上能够提升模块整体的设计感,比如:
同时也可以在此基础之上做一些展示效果,让整体视觉效果更加丰富,比如:
所以说,做设计一定要把思维打开,不要故步自封。
3. 场景图表现法 
这种在工作中用的也很多,简单的理解就是将产品场景图与参数信息相互结合,使得整个模块更有代入感,下面看几个例子:
同样的,场景也可以做类似部分磨砂玻璃的效果,比如:
这类产品参数表现形式,画面感很丰富,也很有代入感。
那么该有人问了,前面三类表现形式在工作中如何选择使用呢
如果产品参数模块前两屏都是复杂的场景或者海报时,尽量使用纯文字或者产品结合文字的表现形式,因为参数本身信息量就很大,连续3-5屏都是很复杂的场景会给人感觉很有压迫感,有简有繁的整体感觉才更舒服,也更有层次感!
一位月薪过万、有车有房的设计师跟我说:PSD真香
我简单的撸了两张带光影效果的模板图,看看效果如何:
模板一
模板二
下载后替换产品参数就可以直接用了,并且第二个模板中有五种不同的光影形式,文末提供PSD源文件

,应急将就用一下还是可以的。

4. 最后总结 
在详情页设计中,很多设计师会认为产品参数就是文字信息,没什么好做的,从而导致作品整体虎头蛇尾。这就跟你追了很久的电视剧一样,前面都很好,但是结局草草了事,顾头不顾尾,你是不是会有打编剧的冲动。
我相信很多人并不是做不好参数模块,只是没有在意过,甚至在看优秀案例时,也很少会重点看一下别人这个模块是如何衔接整体和表现的。
所以,在做这种整体性很强的作品时,尽量要做到面面俱到,往往细节才是决定一个作品高度的重要标尺,容易被忽略的并不代表不重要!
注意:参数最重要的还是信息,一切设计手法都要建立在能有效传达信息的基础之上,根据作品实际情况,选择合适的表现形式。
(0)

相关推荐

  • 详情页

    详情页-买家心理学 思维不变原地转,思维一变天地宽 一,了解买家心里 1,买家需要的,是容易下决策的产品 (1)用买家看的懂的语言 (2)想他所想,营造两大气氛:用了之后带来的快乐,用了之后解决的痛苦 ...

  • 教你如何做好详情头图设计

    电商设计工作中,详情页的设计是我们不得不面对的一大难题,和普通专题页不一样,详情页设计更多的是对文案.卖点进行视觉提炼.视觉表达的过程.如何把一个产品的卖点.特色通过视觉流畅地表达给用户,减少用户阅读 ...

  • (14条消息) 小程序云开发库详情页跳转(云数据库中调取数据)

    最近在尝试小程序的云开发,弄了很久查了很多博客才总算把详情页的跳转弄出来了.因为是从云数据库中调取数据,所以真的尝试了很多方法,希望能够分享给那些也同样遇到问题的朋友. 首先,肯定是有准备两个页面的, ...

  • 菜谱详情页

    菜谱大全 家庭版烤鱼 274001浏览 · 2758做过 用料 罗非鱼 750克 葱 5克 姜 5克 蒜 5克 香菇 100克 金针菇 100克 西洋菜 300克 莴笋 300克 豆腐 50克 油 适 ...

  • 商品详情页

    店铺 客服 收藏 加入购物车 立即购买 1/5  详情

  • 口腔溃疡的“天敌”,这个广泛使用的中药都被我们忽略了

    很多人长口腔溃疡,会出现在口腔的任何位置,有的长了口腔溃疡连水都不敢喝,会觉得特别地疼,有时候连嘴都是麻的,摸着这个嘴就跟不好张开似的. 这种口腔溃疡会过个十天半个月就会好,过了一段时间又会复发.很多 ...

  • 实战高手教你如何设计裂变海报和详情页

    第一个海报的设计原则第一点是九秒理论,什么是九秒理论?也就是说,你这张海报,假设用户现在在朋友圈已经点开了,他能给你的时间就只有九秒钟,那么从你的海报标题开始看,看到下面这九秒里面,如果你没有让用户了 ...

  • 如何在不同的页中打印每个学生的成绩?

    Q:如下图1所示的工作表,我已经按照学生姓名排序,现在想要在不同的页中打印每个学生的成绩数据? 图1 A:在<问与答9:如何实现批量打印?>中,我们介绍使用VBA来隐藏并逐条显示记录,从而 ...

  • 【淘宝美工教程】15个小技巧,教你如何设计好详情页设计细节!

    作者:FFF丨三 前言:这是一篇扫盲式的手机详情页的设计细节文章,主要写给0基础的小白设计师的,大佬们笑一笑就好了,当然有错误的地方也恳求指正,不仅能让我学习到知识,还能避免把人带弯. 目的:做详情之 ...

  • 漫步淘宝的老外摄影师,背地里竟收藏了这么多详情页?

    打开聊天界面,鲁小本收到老马发来的图片--五位穿着脸基尼的模特,站在阳光明媚的海滩上,整齐地叉腰迈腿,摆出时尚造型.鲁小本不甘示弱,接连甩出好几张近日发掘的好图--毛色染成紫色的泰迪.逼真的白菜毯子- ...

  • 小鹅草私密茶详情页

    小鹅草私密茶详情页