快学！4 招学会详情页产品参数设计！

时间：2024-09-12　来源：朝夕友人　点击：

时间真快，距离上次的详情页图标教程已经过去了一个月，所以，我又厚着脸皮来了，不来不行啊，这次教程就写点做详情页经常被遗忘或者说被忽视的地方-详情页产品参数设计。喜欢记得关注：UI范，让设计更有范！有人会说，这有啥好设计，其实，产品参数是最能真实反映产品概况的信息区域，是体现一个品牌的价值态度和专业程度，是保持整个详情页风格协调和统一的地方。所以详情页的产品参数设计和卖点图标设计一样重要，很多详情页对这个都没有好好的进行设计，为了这个，我看了大量的详情页参数设计，为大家总结了 4 招详情页参数设计的方法，希望大家喜欢，不喜欢也没办法，你过来啊！

在做产品参数设计的时候，通常有如下 4 种方法：①图标或者纯文字； ②图形图像+文字；③产品+文字；④产品场景+文字。大家在做的时候，可以根据品牌调性或者详情风格来选择适合自己的产品参数设计。先看看本次教程的四款产品参数案例吧~

这种产品参数设计是目前用的最多也是最常见的，也是最简单的产品参数设计表现形式，此类设计通常采用色块铺底，或者对色块进行分割，又或者根据产品调性运用相应的图标，加上相应的文字，最后可以添加一些光影或者装饰元素丰富版面就行了。

光说不练假把式，看完参考，是不是很简单，来，我们从基础做起，纯文字的不能显示我水平，萌萌说，做一个图标的吧。首先咱们来分析一下这个产品的属性，产品是一个儿童探险类的玩具，所以在图标设计上尽量会选择圆润些的图标，主色上我想表达一个快乐和有希望的色彩，黄色当仁不让了，辅助色，我选择灰色，追下今年的流行色彩，极致辉（灰）煌（黄）啊！案例一演示第一步：底部图形新建一个 750x1300-1500px 的尺寸，用矩形工具填充黑到灰的一个填充渐变（#535353-#313233），然后新建 700x1000px 矩形，圆角 50，颜色填充渐变（#f7da7d-#fbc13e），具体何种图形形式根据自己需要，也可以 ai 绘制好拷贝 ps,本案例图形采用 tab 栏形式。

第二步：图标图形建立新建 300x100px 的矩形，圆角 60px，颜色填充#f2f2f2，添加描边、内阴影、投影图层样式（见图具体的图标教程请参考上一期，这里不再多做介绍），为了让图标有更多细节感而不至于单调，所以，在左边加了一个圆形，模拟图标镂空多状态，图层样式颜色渐变填充和内阴影。如图：

第三步：添加产品信息根据产品信息，复制刚才建立好的图标，添加上相应的产品资料信息，产品参数主体部分完工，是不是 so easy！

第四步：添加辅助元素或文字做到这一步基本就差不多了，为了让版面更丰富，我们还需要进行最后一步的完善，为版面添加一些装饰元素或者文字，让枯燥产品参数版面看起来逼格更高，更好玩。看看最终添加完辅助元素后的效果：

看看，就是这么简单，萌萌波波都伸出了肯定的手指！

此类的产品参数设计多采用与产品相关的图形图像来展开设计，比如采用同详情风格相似的图形图像或者边框，或者用产品外观轮廓，又或者产品相关或无关的类似纸张卷轴或调性风格等等表现形式，最后加上相应的文字，添加一些光影和元素细节就可以了。我们先来看看此类型的参考。

说实话，我对上次 68 买的吹风机情有独钟，长的又好看，发出的声音又好听，样样都体现出物美价廉，所以，我必须得为它做点什么，才能表达出对它的喜爱之情，这次的案例就为它量身定制了。案例二演示第一步：背景纹理第一步，老规矩了，新建一个 750x1300-1500px 的尺寸，用矩形工具拉个矩形，然后填充渐变（#075255-#0c4648）（这次的案例偏国风，所以颜色也尽量偏国风），然后找一个带有纹理肌理的图片，正片叠底，适当降低透明度。

第二步：主体图形边框新建 650x1000px 的圆角矩形，圆角 40px，或者用 ai 都可以，为了方便操作，我用 ai 画好路径然后拷贝进 ps 再添加图层样式，①2个圆角矩形相加；②用路径查找器，联集工具将 2 个圆角矩形合并；③对象-路径偏移路径，然后给里面的路径填充颜色，主体图形边框做好了。

第三步：为主体图形添加样式肌理将在 ai 中建立的图形分别拷贝到 ps，为外围描边添加金属边框，什么，不会做金属边框，请看上一期国风图标里的金属边框详细过程（点击文字即可查看文章），这里就不再多说了。里面的图形找一张纸张肌理图片，叠加，适当降低透明度。当效果做好后，发现，光边框显得过于简单了，还得增加细节，使其更精致点，所以，在转角的位置再加了 2 个半圆金属边框。如图：

第四步：添加产品文字信息主图图形边框做好后，就开始添加产品的文字信息了，编排产品信息的时候，注意信息的条理、整齐就好，不需要花哨和过多其他编排。参数展示地方的信息注意整体的视觉平衡，空的话可以适当的添加辅助装饰元素。

第五步：添加辅助光影烘托气氛是不是以为到这里就完了，不，不，还缺一点最后装 b 的效果，现在来看，下面那么空怎么回事，也没啥气氛对不对。别急，客官，来，光影安排上，为了烘托国风感觉，光影用了一个古风窗棂的影子，模拟窗户外射进来的光线，底部空，我加点白云，边框图形里面也加点，是不是有点镜面的效果。这里加什么纯属个人爱好，你可以加云啊，也可以加云纹啊，花朵树叶啥的，如果这些跟你想法刚好一样，纯属巧合，那还是换个思路吧！哈哈哈哈！到这里，参数设计就完成了，也没什么难的，对吧！

产品+文字的设计在详情页参数设计中，在整个详情页参数设计中，使用频率也是非常高的，通常直接使用产品，又或者把产品转成线框图形式和产品信息进行结合，同时，还可以对产品尺寸进行一个标注。此种方法可以在第一种方法的基础上进行，将图形、产品信息和产品结合，然后通过投影或者材质来增加视觉表现力。

案例三演示第一步：背景纹理还是老规矩了，先建参数页面背景了，新建一个 750x1300-1500px 的画板，用矩形工具拉个矩形，然后颜色填充 #075255，为了突出产品参数背景，底色我选择比较深的墨绿，然后再次用矩形工具新建 2 个矩形，圆角 60px，2 个矩形错开叠加，颜色一深一浅，2 层都添加上一些纸张肌理效果，然后正片叠底，适当降低透明度，如图：

第二步：毛玻璃制作文字信息区域的地方做好了，但产品往哪里放呢，怎么放才能显得产品特别而有逼格呢！再次新建一个矩形，圆角 90px，圆角可以跟底下图形保持一致或者大点都可以，看自己喜欢吧。这块，我准备做一个毛玻璃效果（毛玻璃具体步骤见“详情页卖点图标2”（点击文字即可查看文章）），然后产品就放在毛玻璃上，如图：

第三步：添加产品和参数信息到这一步，参数信息的主体就完成了，真的不要太简单了，现在来添加产品和参数信息。

还是一如既往的简单，对不，什么，没氛围？没氛围的话你还可以继续一些光影，继续完善都是可以的。

最后一个案例，这个稍微有点难度，通过搭建一个场景，把产品置入场景中，这样能很好的展现产品的气质调性，我们通过这种形式，把参数信息置入到场景中，根据场景来进行文字信息的编排处理。这种表现形式就是本节要说的场景+文字案例了。

案例四演示第一步：背景纹理新建一个黑色背景的画板，尺寸：750x1300-1500px，这次的场景，我改变常规的用圆柱体或者立方体来搭建场景，为了让场景跟品牌关联度更高，我用品牌商标「JNF」（不用查，我虚拟的）通过渐变扭曲变形来塑造一个场景，第 1 步，先用钢笔工具勾出「JNF」字体路径，如图：

第二步：给路径添加渐变然后相应的给每个字形路径添加渐变，加渐变时，要注意笔画转折处的明暗过度自然。

第三步：置入产品，添加阴影细节把产品置入场景，摆好位置，根据产品受光方相，调节下产品明暗，另外，建场景的时候要注意产品的受光方向，场景的光源方向要跟产品保持一致。添加一些从左上方射下来的光，然后添加产品的投影。

第四步：产品参数边框①产品的场景差不多了，现在可以做产品信息的外框了，新建一大一小个矩形，命名「边框」「面板」，圆角 5px，「边框」用内阴影图层样式添加一个绿色的边框，光源方向也要同场景的光源方向统一。

②边框层的做好了，光现在这样还不行，现在来做面板层，面板层比边框层稍小一点，就感觉边框抱着面板的感觉，所以面板层还需做一点点立体效果。细节，要注意细节。最后别忘了给整个面板层做个投影。

第五步：添加产品参数信息最后我们给产品添加上参数信息，完善页面细节，duang duang！场景+文字的参数设计就完成了。

案例回顾

------------------------------------------------

被吹爆的2022年度流行色，到底有多好？

点击 “在看” 升职加薪↓↓

上一篇：《做设计的面条》第17期设计练习之详情页设计点评下一篇：服装类电商详情页设计！

13122402111