1.本节课我们进行讲解一个详情页的修改案例，首先我们看一下产品图跟我们的文案。

2.客户要求是黑白灰科技感，简约版式高端感觉，看一下我做得第一稿黑白灰的详情效果，产品本身带有颜色，黑白灰

色调，不是很符合婴儿色调。

3.首先我们看一下第一点产品的摆放，构图为三角构图，比较稳定，文字部分为矩形的，下方的部分为左右构图。

4.继续向下还是使用了三角构图跟对称构图，对于婴儿的手不要发生遮挡，整个版面重心压住了，比较舒适。

5.向下还是举行构图，总体来说是比较稳定的，版式不会出现头重脚轻的问题。

6.然后我们又重新做了一个版本，更加符合婴儿的气息，配色特点是【暖色调】【高饱和度】【亮色/高明度】，我们到

淘宝搜索母婴产品进行观察学习，使用的大部分是暖色调。

7.然后我们要根据文案做产品的创意，对于我们的第一屏都是渲染出来的，第一个我们做的是静态图，更多的做卖点的

信息。

8.然后第二屏我们用的都是很多适合文案的配图，第三屏我们就开始涉及到创意类型，只能从静态图片做创意，第一视

觉在中间的位置，其他部分尽量展示更多的产品信息，然后到了上方的文案部分。

9.我们的颜色饱和度要低体现高端的感觉，对于下方的创意我们根据文案信息来使用了跷跷板的素材，自动调节而且带

有婴儿的关联性。

10.对于下方的音乐安抚我们就提取了音乐来做了音符的主要元素，安抚用了圆形的安静的图形元素，配色用了同色系的

配色，对于饱和度进行了调整。

11.我们看一下同色系的颜色换一个对比色会很明显，就是我们用了中间产品是蓝色的对比效果。

12.然后我们看一下下面的低噪音的效果表现，将婴儿减弱想，图形化噪音的图表添加让人更加容易理解。

13.接下来是医用级硅胶表达了材质，通过医用联想到十字形状。

14.再往下为增压仓防逆流，我们添加的水向外扩散的效果。

15.最后一个就是我们的对比色配色，将组件区分，然后放在水中做一个效果表达。

16.然后我们看一下我们的整个详情页绘制形状将排版层次表达出来。

17.然后更加直接的看到我们的构图方式，对称构图，矩形构图等。

18.对于我们的颜色的重量信息就会需要学习配色的知识，我们用一个颜色来看做不同的饱和度，区分轻重的颜色效果。

19.我们回到详情页继续看一下构图方式，对于下方的水珠都是无彩色，也就是用黑白灰来表现的。

20.在制作的过程当中我们有很多的参考线，我们新建个文件然后我们建立网格参考线，拖入一个素材图，然后我们输入

文案根据参考线来进行摆放文字。

21.对于字体的字号选择我们以30为基数，1.5倍依次向上计算选择，这就是字体的规则的规整。

22.然后我们将文字的间隔做得规整，接下来就会感觉整个排版都很规整。

23.我们将下方的特点文案矩形拖入，距离用间隔两倍数值为60。

24.那么我们这一个排版就完成了，这就是一个正规的排版方式。

25.我们来看第一版，没用使用这种方式排版是比较混乱的，文字的间距是没有规律的，网页设计一定要注意排版设计，

不要只做效果。

26.还有一种是这种的，我们将产品拖入，我们依旧根据网格的一半来选择位置。

27.然后主要是左侧的文案信息排版，左侧参考线的一半，下面的寻找通过30的倍数，来选择上方的尺寸是否能整除30，

我们选择从上往下到600的位置。

28.对于我们的里面的字体来进行规范字号的大小，还是根据1.5倍来设置层次关系。

29.这就是我们的整个排版方式。

30.本节课结束。