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

奈斯@小王子于2021-12-01发布在灵感

时间真快，距离上次的详情页图标教程已经过去了一个月，所以，我又厚着脸皮来了，不来不行啊，这次教程就写点做详情页经常被遗忘或者说被忽视的地方-详情页产品参数设计。

有人会说，这有啥好设计，其实，产品参数是最能真实反映产品概况的信息区域，是体现一个品牌的价值态度和专业程度，是保持整个详情页风格协调和统一的地方。所以详情页的产品参数设计和卖点图标设计一样重要，很多详情页对这个都没有好好的进行设计，为了这个，我看了大量的详情页参数设计，为大家总结了 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 层都添加上一些纸张肌理效果，然后正片叠底，适当降低透明度，如图：