南通平面UI设计告诉你电商详情页设计的细节

淘宝电商美工设计必修课

关于详情页优化那些不得不说的细节！

写在前面

不管在什么电商购物网站网站，详情页的设计在整个设计环节中都是至关重要的一项，因为详情页在购买环节中能起到一定的转化、促进交易作用，所以一款符合产品定位且视觉效果很好的详情页是很多电商商家所渴求的。

很多电商设计新手学员们，把基本的设计技能掌握了，开始尝试做详情页作品，但制作过程中却走进了许多误区，导致作品不尽如人意。该怎么解决呢？详情页设计应该注意什么呢？从哪里思考开始入手呢？.....今天小迅姐姐就请科迅设计专业老师为大家讲讲详情页设计需要注意的细节！

详情页设计中常见的误区具体有以下两点：

误区一：用PC的设计思维做详情页设计，这种现象是极其常见的，意思是只兼顾PC端，而忽略手机端，要知道现在电商流量95%来自于移动端，PC端设计思维在电商详情页制作中是不通用的！

误区二：只追求效果而忽略了最基础的信息传达，详情页目的在于向用户诠释产品的特性、亮点、功能，是向用户传达要表达的产品信息，使得用户能够充分了解产品特征、优点、亮点，从而促进买成交易，而不是一味的只追求视觉效果而忽略信息传递！

在详情页设计中，很多设计手法、形式是实用且有效的，总结常用的设计形式也有助于提升工作效率，提供设计思路，那么常用设计形式可以简单分为以下几种：

形式一：采用竖屏的设计思维，分屏制作，更利于信息传递以及视觉效果的体现，这也是做电商详情页最常用的形式之一，这样做的目的更多的兼顾移动端，以移动端为主，提升视觉流畅度以及信息传达率，比如：

传统的电商详情页设计是基于PC的，无法兼顾手机端，从视觉流畅度和信息传达方面都有很大的缺陷，而采用分屏制作的形式就能很好的兼顾手机端，大大提升视觉流畅度和用户捕捉信息的速度！

形式二：善用图标元素，当画面出现数字时可以做特殊处理或者放大，因为大字号和数字能起到很好的装饰性且也能起到突出的作用，增加画面的设计感，比如：

大字号的数字或者英文能起到很好的装饰性，目的是打破原本比较相似的构图形式，使得整体画面在统一的前提下又不显单调，同时也起到了很好的突出强调关键词的作用！

形式三：善用配图。很多人对于详情页配图不太精通，原因是拿到文案不知道如何去选图才能更好地切合产品和主题，常见的配图形式分为两种，即：以产品为中心配图和关键词配图两种形式，这两种形式也可以结合着用，虽然详情页是以商品为主，但是如果每一屏都出现产品图，会给人一种重复感很强甚至太刻意的感觉，那么我们可以以文案的关键词作为配图参考，这样同样能保证切合主题：

这里的配图形式就是以文案关键词作为切入点，将文案“更静一步舒适环境”中的静和舒适作为画面整体的配图参考，也改变了每一屏都要有产品的单一形式！

首屏设计在整个详情页中是至关重要的，首屏的好坏在一定程度上也能影响用户是否继续阅读，同时也是为整体定基调的一屏，那么常见的详情页首屏设计手法有哪些？接下来我们继续分析（前提是结合文案）：

手法一：将首屏设计画面做出光感，也就是不管画面有没有光源，要做出一种有光来的感觉，比如：

看似简单的画面，做出有光来的感觉后一样可以很出彩，光感是增加画面立体感、场景感最常用的形式之一！

手法二：设计风格的多变。并不是所有产品都适合简约的设计风格，也有一些偏炫酷、游戏风格的产品首屏就不适合这样做了，但是做出光感是共通的，只不过

是在效果、材质的改变，但是作图思路还是如此，即：场景感、光感的体现。

我们不难发现，不管是什么风格类型，这里所强调的光感和场景感都是至关重要的！

无论是什么样的设计手法，前提都是要符合文案和产品，建议大家去找一些比较不错的详情页分析一下，分别用到了哪些手法和形式。只有通过不断的分析、总结、练习，才能将文字理论转化成设计效果；而且一直强调的是不要把理论学死了，要学会灵活运用，举一反三，理论只是提供思路的一种手段，善于总结才是王道！