详情页除了让消费者了解产品，更重要的是帮助商家提升销量。打造一款优秀的详情页，要用60%的时间去调查构思，确定方向，40%的时间去设计。

确定页面风格

页面风格主要是根据产品本身来定的，如产品的属性、产品功能等。如果产品没有特定的风格属性，可以根据目标销售人群、季节、节日或主题活动来定。

产品和素材搜集

前期实拍素材，进行整理和分类。我们也要在设计的过程中要学会整理搜集自己的素材库，做好备份。

构架布局框架

根据文案内容，结合实际产品，进行有效的布局建立,可以从下面八个方面入手操作：

产品海报 -- 引起注意。

产品属性功能 -- 提升兴趣，了解产品。

产品全景 -- 提升兴趣。

产品细节展示 -- 提升兴趣，了解产品。

痛点挖掘 -- 拉近客户。

检测报告 -- 建立信任。

卖点优势 -- 体现产品价值。

好评分享展示 -- 进一步加强购买欲望。

确定配色方案

已有店铺视觉规范的可以直接延续使用。如果没有，可以从产品本身提取，或者从Logo中提取或从产品联想属性提取。在配色过程中，无论用几种颜色来组合，首先要考虑用什么颜色作为主色调。

在选择配色时应根据企业自身文化特点、产品特色、店铺的风格等选择一个色系的某一种颜色作为主色调，然后通过调整颜色的透明度或饱和度来获得其他搭配颜色，并将其作为辅助色，这样得到的整个页面看起来色彩统一、有层次感。选用颜色时切记使用的颜色数不宜过多，应限制在三种之内。

选择合适字体类型

字体相当于一个桥梁，相当重要。主要用来对产品进行解释说明，方便顾客阅读，同时，也是起重要信息的引导作用，可通过大小字体搭配进行重点显示某项内容。字体使用时一般不超过3种字体并选择符合产品定位的字体；在重点部分内容进行加粗突出显示，以加深买家对该信息的印象程度。

整个详情页排版

怎么对图片和文案内容进行排版设置，要考验我们平时积累下来的设计的水平。越是简约大气的页面，元素务必不要太多，清爽舒适的页面多留白，参考优秀案例，多多借鉴和学习。学习是没有止境的，同样，详情页的设计排版也是。多学习，多总结，扩展想法，拓展思维，建立自己的设计风格。

修改定稿

把制作好的首稿输出为JPG或PNG格式，同时保留源文件格式，给团队成员进行阅稿审核，如不符合要求，进行局部修改。也可以参考不同的意见进行优化处理，直至定稿保存为止。

切片和优化页面存储

设计制作后的商品详情页往往是一张大图，高度可能达上万像素，而我们在网上浏览的图是经过Photoshop切片功能进行切割图片后呈现出来的。如果一张数几十MB的图像直接上传网店店铺，网络加载速度会很慢，用户体验差，所以要对图片进行切割优化。

一个店铺的转化率高底，客户体验是否良好，都可以直接从详情页的好坏体现出来。除了运用静态图片来表达产品详细信息外，我们也可以适当加入详情页视频来介绍产品，充分运用图、文、音频、视频来吸引用户进行购买。

01

Photoshop急速入门课

请关注公众号，后台回复关键词“ps”

本视频课程体现了“教、学、做”一体化思路。它从一个图像处理初学者的角度出发，旨在向计算机初学者介绍Photoshop版本软件在计算机图像处理中的应用，使读者能够熟练掌握Photoshop软件的使用方法，随课程赠送相关的案例源文件及课件，方便大家学习掌握Photoshop软件。

02

ColreDraw急速入门课

请关注公众号，后台回复关键词“cdr”

本视频课程涵盖CorelDRAW几乎所有实例和重要知识点，如同老师在身边手把手教您，可以让学习更轻松、更高效！主要讲述了CorelDRAW入门必备知识，以及CorelDRAW广告设计、VI设计、标志设计、书籍画册设计、包装设计、网页美工设计、插图绘制、印刷制版等必备的CorelDRAW知识。

03

Animate、Flash急速入门课

请关注公众号，后台回复关键词“Flash”

本视频课程旨在使学员快速掌握Animate/Flash动画设计技术。以通俗易懂的语言、精挑细选的实用技巧、翔实生动的操作案例，全面介绍了Animate/Flash基础知识以及应用案例。

04

H5急速入门课

请关注公众号，后台回复关键词“H5”

本视频课程系统地介绍H5的基础理论和实际应用技术，并结合实例讲解使用DIV CSS 布局制作网页的方法和技巧。在介绍使用CSS 样式进行设计的同时，还结合实际网页制作中可能遇到的问题，提供了解决问题的思路、方法和技巧。

05

设计师求职宝典（200道面试题+54个职场短视频）

请关注公众号，后台回复关键词“面试题”

达内数字艺术学院针具设计师在面试过程中出现的问题，通过过对面试学员的跟踪反馈，整理出了200道企业面试题，涵盖人事、网页设计、UI设计、交互设计四个方面。帮助学员在面试前做好充分的准备，能够提升就业成功率，及就业薪资水平。

06

商业字体下载

请关注公众号，后台回复关键词“字库”

上千种中英文商业字体下载，包括各种免费可商用字体。

07

可商用高清位图素材下载（300G，上万张素材）

请关注公众号，后台回复关键词“素材”

刘老师收集整理的超过300G高清位图素材下载，让你的设计不再无图可用。