【卖设不卖图】详情页的FLOW就是这么定

文章导读：当我们拿一个产品要做详情页的时候，首先是了解产品是适合什么样的风格，然后就要去找一些参考，像花瓣等参考网站，从中找到一些适合设计的参考，寻找同类的设计能大概知道这个类目的设计是怎样的，然后可以再找其他类目相似的风格作为参考的，再到详情页的版块是安排：首页海报-设计解说-产品卖点-产品属性-工艺说明-产品展示-产品细节等，然后是每个版块的构图设计，文案解说等，使详情页的思路明确统一。

正文：

现在我们以一个比较文艺的包包作为例子，如图

可看出，包包是倾向于复古轻文艺的，复古轻文艺的风格也是符合包包的详情页设计的。但是我们要着手详情页的设计的时候，这方面的内容也是要了解一下的，现在的包包设计风格是有很多的，有潮流时尚，有功能性的，有商务类型的等等，他们都有自己的定位风格。潮流时尚的设计主要还是呈现出潮流时尚简约风格，有功能性的包包主要的卖点是功能的部分，商务类型的是要符合男士多一点的设计风格。

那么对照着包包和包包拍摄场景的图片，所以是确定是比较适合复古轻文艺风，轻文艺风和一些。

多使用中国元素的详情页设计又有一些不一样的地方，我们所表现的设计是带轻一点的复古文艺设计。

详情页的风格定了，接下来就是的元素要和风格相符合的，例如字体，元素，文案等这些内容。

一．找参考

通常找参考的时候，第一时间就想到去花瓣找参考，在花瓣上搜索包包详情页选择画板，在画板中选适应的文档去寻找适合自己想要的参考设计，如果找的参考不是很多，可以到其他的网站，例如：黄蜂网，国外设计欣赏网站，或者到淘宝上看其他店铺的设计，看得多收集得多对于自己接下来的详情页设计是很有帮助的，思路能更加的清晰，内容也能丰富起来。

二、详情页设计风格

详情页整体呈现的风格是复古轻文艺风，然而在可以有简约的设计风格，能显大气时尚。 

三、字体选择

首先，详情页的字体选用的是思源宋体和思源黑体，宋体的选择是因为适合文艺的风格，然后可以在字体上是加了设计元素就是使用画笔在字体上使用蒙板点擦字体，使字体呈现的效果是和墙面的颗粒感是差不多的，更能融入到产品图片中；

我们都知道页面里面呈现的字体使用不能超过三种，这样可以保证页面的整体协调统一，然而在字体大小的使用也有一定的规律，标题和二级标题的字体大小最好是定下来，这样能使页面的整体性比较统一。

三、图片处理

然后我们能看到上面的两张图片是一样的，第一张是原来的图片，第二张是处理之后的图片，把包包以外的背景，物品都调成统一的色调，使包包的颜色能突显出来，也能使设计独特，所以第二张处理后的图片能突出产品，能吸引到消费者的目光，也能使与其他店铺的复古文艺风的包包店铺设计不一样。

（调色前）

（调色后）

四、设计元素选择

详情页元素的使用，在详情页的底面是使用了墙的素材，这样是为了能衬托详情页整体性的性调和风格，使页面的展现是更统一的。还有的就是在展示包包的时候，使用正方形的框框或者是其他的形状来展现的时候，能看得出正方形的正正方方的边缘太实了，和整体性是有一点不合适的，所以在图形上的边缘上做了一些的虚化，不整齐，自然的效果 。

这样的话，能与详情页的底面的墙面素材更能很好的融合在一起。适当的使用一些元素使详情页风格统一和丰富起来，看起来并不乏味的。

五、文案抒情

现在呢就是要说到这个详情页的一个亮点的地方，就是文案的情感表达，在首图海报的文案介绍是：“遇见如此让我心动的你”所以能贯穿整个详情页的一个思路的方法，大家也知道的套路：遇见-相识-相知-相爱…

当中的二级标题的内容可以到百度搜索遇见的句子，从中找比较适合的文案来衬托标题的意思！有趣，有内涵的文案能使详情页的内容丰富，耐人寻味~

总结:

总体的思路就是这样的，我的FLOW这就是这样定下来的，做每一样的设计，首页先定好产品的设计风格，然后再结合其他的设计元素来搭配整个设计的风格，使整个设计的整体性统一，协调性好一点，把这些都弄好了，你的详情页设计自然不会比人家的差，而且杠杠的！