全尺寸键盘

大胆的配色、出色的材质应用，结合抽象创意化的图形、形状，虽然没有太复杂的设计技法，但在风格上给人眼前一亮的感受，质感十足。

鸡肉沙拉酱三明治

一款生动有趣的详情页，结合卡通形象，故事和创意都很强，唯一不好的就是稍微有点短，没看够

HYUNDAI暖饮机

将暖饮机做出了潮牌的感觉，构图形式比较特殊，几处小横幅的使用让整体在详情页设计中显得很有新意，打破了常规电器类详情页的风格表现。

贵宾成犬专用粮

夸张的视觉表现力，使得整体生动有趣，张力十足，结合人物形象，也让整体更有亲和力，很有创意。

本期搜集的四款详情页，从视觉表现角度来说都比较新颖，眼前一亮。打破了我们的对详情页的常规认知。

在设计工作中，一直以来风格差异化也是创意形式的一种，在满足正常需求的前提下，区别于同类竞品，也许就能脱颖而出。

做设计最重要的就是大胆的发散思维，别人都这么做，为什么我不可以尝试一下其他风格呢？

原文地址：美工美邦（公众号）

作者：美工美邦

我们绝大多数的人都会在首屏下足功夫

因为它有着吸引用户阅读

提升转化的重要作用

所以理所应当要花心思在上面

一张完整的详情页，按照现在分屏式的设计，大概也都会在10屏左右，从第一屏到最后一屏，对于详情页整体呈现效果来说都非常重要。

但是在现实工作中，很多设计师喜欢过分强调首焦图（第一屏），而忽略了其他部分，尤其是产品参数。

因为大部分这个模块是详情页的结尾部分了，越是到最后越是容易忽略细节，做的粗糙，使得详情页前后视觉感受差异过大，虎头蛇尾。

所谓细节决定成败，尤其是这种偏整体性的设计作品，更要注重视觉、细节的连贯性。

所以今天就着重说一下详情页中最容易被忽略的产品参数模块，如何做更出彩？

产品参数，顾名思义就是产品的详细信息，比如：尺寸、材质、颜色等等，多以文字信息为主，下面我们以展示形式的不同进行分类。

1. 纯文字形式 

这也是最常见的一种表现形式，把产品的具体参数直接以文字的形式展示，但即便是简单的文字信息，也并不是说所有人都能做的很好：

这是一位读者让我看的详情页中产品参数的模块，尽管都是文字信息，但显然这个模块做的差强人意，有些粗糙了。

虽然主次信息做的还不错，但是导致视觉乱的最直接原因：标题与说明性文字是居中对齐的形式，但说明性文字内部又是左对齐的形式，所以整体留白和对齐都很不规则，导致视觉感受是乱的。

下面是我为大家找的纯文字形式的产品参数案例，一起来看看：

其实纯文字的产品参数，只要做好主次关系、对齐和留白，就不会感觉差，如上面案例的表现形式，在平时工作中用的也很多。

还可以继续优化和提升，但是做好纯文字形式的产品参数是继续优化的前提，如果在上图基础之上加点光影效果，会使得这个模块视觉感受更加丰富：

在我之前关于详情页制作相关的文章中就说过，这种有光来的效果很早在详情页设计中很实用，即便是简单的文字排版，加上光影效果之后也会给人眼前一亮的感觉。

做设计最重要的是发散思维，多思考，先大胆的想，再考虑细节。

在纯文字的基础上我再加点类似卷纸、书本、或者夹板的展示效果会不会也会很出彩？下面看几个案例：

即使都是文字信息，视觉呈现效果也是天差地别，优秀的设计师不会放过任何一个模块的细节。

2. 结合产品图 
 

制作产品详情页的目的是有两个：让用户更深入的了解产品和促进买成，所以很多时候为了让产品参数信息更直观，往往会将文字与产品相互结合，在一定程度上也能增加关联性。
 

这种数据与产品相互结合的形式，为了更直观将一些常用数据，比如：产品的长、宽、高等，通过线条标注的形式体现在产品图上。
 

下面看看几个类似的案例：

如上图案例所示，产品与参数相互结合，使得冷冰冰的文字信息变得有温度、真实。

也可以在上图基础之上，整个模块加点纹理、光影效果或者是一些抽象化的线条，使得整体视觉感受上更有层次感，看两个案例：

还可以在将产品进行特殊化的处理，比如部分高斯模糊，也是很有层次感的一种表现形式：

还有另外一种，就是把产品做成简笔画的形式，或者是产品图与简笔画相互结合的形式，在一定程度上能够提升模块整体的设计感，比如：

同时也可以在此基础之上做一些展示效果，让整体视觉效果更加丰富，比如：

所以说，做设计一定要把思维打开，不要故步自封。
 

3. 场景图表现法 

这种在工作中用的也很多，简单的理解就是将产品场景图与参数信息相互结合，使得整个模块更有代入感，下面看几个例子：

同样的，场景也可以做类似部分磨砂玻璃的效果，比如：

这类产品参数表现形式，画面感很丰富，也很有代入感。

那么该有人问了，前面三类表现形式在工作中如何选择使用呢？

如果产品参数模块前两屏都是复杂的场景或者海报时，尽量使用纯文字或者产品结合文字的表现形式，因为参数本身信息量就很大，连续3-5屏都是很复杂的场景会给人感觉很有压迫感，有简有繁的整体感觉才更舒服，也更有层次感！

4. 最后总结 

在详情页设计中，很多设计师会认为产品参数就是文字信息，没什么好做的，从而导致作品整体虎头蛇尾。这就跟你追了很久的电视剧一样，前面都很好，但是结局草草了事，顾头不顾尾，你是不是会有打编剧的冲动。

我相信很多人并不是做不好参数模块，只是没有在意过，甚至在看优秀案例时，也很少会重点看一下别人这个模块是如何衔接整体和表现的。

所以，在做这种整体性很强的作品时，尽量要做到面面俱到，往往细节才是决定一个作品高度的重要标尺，容易被忽略的并不代表不重要！

注意：参数最重要的还是信息，一切设计手法都要建立在能有效传达信息的基础之上，根据作品实际情况，选择合适的表现形式。

作者：老张

来源：美工美邦

在电商设计工作中，详情页的设计一直都是衡量电商设计师能力的重要指标，正是因为它的重要程度，所以也就成了困扰很多设计师的难题。

目前详情页基本上都采用了分屏式的设计，目的为了提升视觉流畅度以及减少阅读障碍。这种方式就将详情页设计转变为具有组合效应的单屏海报设计。所以做好每一屏海报就成了最终需要解决的问题。那么有哪些实用的详情页设计技巧，可助我们一臂之力？

在写这篇文章之前，我翻阅了很多比较不错的详情页首焦设计，发现这么多不同产品和类目的详情页，在设计手法上竟有很多相似之处！

不信你来看！

上面是我在翻阅的过程中随机筛选的12张详情页首焦，从视觉角度来看，每张首焦都给人一种干净舒服的感受，元素虽然不多，但却一点也不单调、层次感很强。
从实现难度来看，没有很复杂的设计手法让你望而却步，整体来看实现起来都不算难，明白原理之后，只需多加练习就可以。

那么该有同学问了：

为什么我看完之后还是不会？

这时候，再回过头看上面的12张首焦，着重观察每张图的明暗关系，光影变化！

哇！很丰富

所以说，简单的场景一样可以做出很有层次感的首焦海报，场景的复杂与否和最终的视觉效果没有直接关系。通过设计手法表现出场景元素间的明暗变化在详情页设计中用到的非常多。

简而言之就是：营造明暗变化。

什么是光就不解释了，生活中随处可见：灯光、日光、月光……并且物理老师也告诉我们：同种均匀介质中，光是沿直线传播的！

无论是在设计，还是现实生活中，我们通常会把光与影放在一起说，即光影，两者密不可分，有光就要有影，有明就要有暗。

只是体现光影、明暗关系，就足以让设计作品变得丰富、有层次感，比如现实生活中的汽车：

在详情页设计中，光影并不是越复杂越好，反而越实用的越简单。

注意：在详情页设计中，一般情况下不会用到直观的光源，大多都是拟定光源位置，一但光源位置确定，画面中的所有元素（包括背景）都要遵循：靠近光源的位置亮，远离光源的位置暗。

那么如果光源位置确定，应该在背景上如何体现？

上图所示就是拟定光源位置后，背景明暗关系对照图，其实做起来很简单，就是通过渐变叠加实现的，相比纯色底，这种渐变的背景是不是更实用？

在详情页设计中，一些有模特的场景图，大部分都使用渐变的背景，下面看两个案例：

渐变的背景增加了整体的层次感，模拟了一个设计上的环境感，而且模特的形象因此也更加立体，作品整体也不显单调。

产品特写或者局部放大时，渐变背景用到的也很多！

一、产品即是场景

详情页设计，核心还是产品，很多时候产品素材本身通过修图，明暗变化就很强，这时就可以完全依靠产品素材，做好背景处理及文字排版就可以了，下面看几个案例：

看似案例很简单，实则很考验设计功底，渐变的背景用的恰到好处，模拟了一种有光源的视觉变化，从而提升了画面整体的视觉层次感。简洁大气的作品也更易于大众接受。

下面我们看个实操案例：

最终成品

如上图案例所示，依靠产品自身丰富的明暗变化，利用简单的构图形式，一张详情页首焦轻松完成。

但这种形式受产品自身影响，有一定局限性，并不是所有的产品都适用。接下来我们继续！
 

二、搭建小场景

搭建小场景在详情页设计中也是非常实用的，为什么要说小场景呢？小不是代表体积小，而是场景要简约，无需特别复杂，简约并不意味着简单，重点是要有层次感、把控好整体的明暗变化和光影。

还是不太懂？

下面看一个最基础的小场景搭建：

上图案例是不是给你的感觉很简单，除掉产品和文案，几乎没有任何多余的元素装饰，那么有个问题：

为什么一点也不单调呢？

剖析一下：

看似简单的场景，对设计功底的考验一点也不少，小场景设计中，如何体现光影是非常重要的。

说完基础的小场景，我们继续往下延伸。很多产品的详情页设计都用到了更真实的使用或者摆放场景，目的是让用户更加直观的了解产品，视觉上更有代入感。

在偏真实的小场景设计中，对于光的表现还可以再丰富，比如现实生活中的窗户格、植物、阳光等等，都是对光的一种加强体现，下面我为大家总结一些实用的表现形式：

类似上图中的光的表现形式有很多种，在详情页中都非常实用，它能起到加强光感、赋予整体环境感的作用，并且对提升作品层次感有很大帮助。下面我们看下在设计中的使用。

窗户格形式

光照效果

素材影子

不管是哪种表现形式，其目的都是在营造一种光影的环境感，提升作品整体视觉变化强度，避免单调！也让产品更贴合现实，易于解读和表达。
下面再看个实操案例：

最终成品

在实操案例中，对于场景的搭建并不难，如何体现光的感觉才是最重要的一笔，光赋予了作品环境感，视觉上的明暗的变化使得作品给人的感觉丰富有层次。

对于详情页中的小场景搭建，前后遮挡用到的很多，根据实际情况选择合适的遮挡物即可。

在详情页设计中，对于光的表现形式远不至于文中所说到的，这里只是为大家提供一些实用的设计思路。不妨找一些不错的详情设计，对应着本文内容，自己再验证、总结一下，这样印象会更深刻。

最后，看下本文关键词：

模拟光源、明暗变化、渐变背景、小场景、光感表现

原文地址： 美工美邦（公众号）

作者： 张家彬