我们经常看到别人做的详情页很好，而自己做出来的总感觉有些粗糙，但又不知道怎么去优化，今天我们就拿出一款详情页来细细的讲解里面的各种问题，帮助你怎样改善和优化。

接下来有请问题详情原图：

这是一款充电宝的详情页，乍一看感觉还可以，但是我们仔细来观察，他的整体视觉效果显得并不是很好，知道问题了，那我们就着手改善问题吧。

视觉效果

详情页在整体视觉上要注意3个方面：

1、详情页要统一规范，比如：间距问题、留白问题、标题的大小等都需要统一化，原图大部分还都统一，可是开头的2屏用的排版方式变了。

2、视觉的变化，主要是整个画面的视觉效果，原图做的就有点不出彩了。

3、卖点和画面的统一性，我们要视觉化的来展示自己的卖点。

修改问题：

版式上有欠缺，左侧的文案设计和添加的白色块导致整体不太协调。

其次画面虽然做了空间感效果，但还做的太轻了，空间感完全不够，也没有体现光线的明暗对比。

我把背景图替换掉，直接用色阶把他的明暗对比度拉开，再加两束光线来继续增强明暗关系。

文案版式重新规划调整，再把产品往右移动，留出更多的空间，这样就很好排版了。

对比图：

整个产品的设计，原图是用了黑蓝的色调，虽然也有商务感，但是用黑金色的搭配我觉得更符合这款产品。

我们产品要保证亮面和背景拉开，因为本身产品就是黑色的，我们背景设计要么用黑色，或者浅色之类的，不要用原图的这种灰色，看上去缺乏光感。

最后我是把三个充电口都放在一起，直接用一个白色块来统一化，这样会显得整体些。

背景变化

原详情页在背景上的问题都差不多，场景缺少明暗和光感的变化，会显得有些呆板。

背景没加任何明暗度的效果

这个是小米手机的背景，我们会看到左下角亮度高，右上角亮度低。

墙面为暗色，地面直接用浅色强调明度。

上述例子全都是体现明暗对比度变化的方法，我们在逛商场也是经常能看到，用地板等深浅不一的颜色来做视觉和明暗度的变化。

统一风格

我们要保持整体风格的一致性，但是局部要有各种细节变化。

比如一些景点的建筑，在视觉风格上都会保持一致，颜色的统一，屋顶风格的统一，虽然房屋大小各不相同，但都是一种思维。

这些统一的地方，我们把他放到详情页上表示就相当于各种图文的间距、字体大小和颜色等。

而不统一的地方，就是详情页中每一屏局部或的变化，虽细微不同，又不破坏整体。