天下美工出我辈，

一入电商岁月催。

前面两篇，分别聊了——

电商美工（一）活动页设计

电商美工（二）海报图设计

这一篇，我们来聊一聊详情页设计。

作为美工，详情页也是日常工作中（如下图）最常见的项目之一。

考虑到行文比较长，

此处罗列文章大纲——

前言（如是）

Part 1：基本思路

基本原则-设计规范-产品分析-思考流程

Part 2：相关模块

文案-商品陈列-参数-优惠券（导购）

Part 3：详情页面

构图/素材-光影/场景-问题/优品-销售模型

Part 4：延伸拓展

视觉层次-选片/修图-版式基础-观点/示例

附录（拙作）

 Part 1：基本思路 

设计详情页之前需要了解的

1.1：基本原则

1.1.1：基础要点~

相较于天马行空的创意，以及极富美感的细节，

作为甲方（客户）更看重的基本点是——

调性：页面整体感觉

气氛：譬如节日氛围

行业属性：是否符合行业属性

产品特质：是否表达产品气质

关键信息：重点表达，有的放矢

记忆点~

概念

符号化

风格表现

创意型

…

1.1.2：版面原则~

之前在《版式设计》有聊过，下文“版式基础”也可参考。

这里简单说一下版式的基本原则：

对齐（Alignment）

重复（Repetition）

对比（Contrast）

亲密性（Proximity）

亲密性的另一表述是：接近性

源起于《格式塔原理》的研究——

格式塔理论和研究述及了这样一个观念，即人们的审美观对整体与和谐具有一种基本的要求。简单地说，视觉形象首先是作为统一的整体被认知的，而后才以部分的形式被认知，也就是说，我们先“看见”一个构图的整体，然后才“看见”组成这一构图整体的各个部分。《格式塔原理》mayday

1.2：设计规范

1.2.1：展示类别~

详情页面通常展示的类别有——

商品展示类：平拍、色彩、细节、卖点 

实力展示类：品牌故事、荣誉资质、车间仓储

吸引购买类：情感打动 、达人推荐

交易说明类：尺码规格、快递物流、退换货等 

促销说明类：活动商品、优惠方式 

…

1.2.2：排版流程~

详情页面常见的排版流程是——

广告图：海报头图，结合品牌

产品概况：正反侧面+关键参数

情景展示：植入场景，激发共鸣

产品展示：单款展示+组合形式

细节展示：材料、工艺、特写

质保：包装、物流、承诺、售后

品牌：线下店面、生产线、仓储间

…

1.3：产品分析

1.3.1：分析框架~

产品分析并无一定之规，不同类别甚至差异迥然。

这里结合自己的工作经验，分析框架如下图——

目标：

加大单量

提高利润

用户/价值：时空+情绪

场景：

如实展现场景

挖掘拓展场景

功能/交互：简单+便利

转化率：

塑造高价值感

提升搜寻效率

…

1.3.2：具体表现~

上述只是产品梳理的理论框架，着眼于整体设计；

下面来看看如何具体表现产品，并着手参考案例——

产品局部放大：整体适当缩小

立体块形式：虚实相结合

代入场景：引发联想

案例（如图）

1.4：思考流程

1.4.1：思考环节~

较之于新手美工一上来就开工，或者边想边做；

设计老鸟都会事先规划步骤，想清楚了再动手。

总结如下思考环节（供参考）——

了解需求：

事先通过沟通来了解详细的项目需求

挖掘诉求点：

从需求中挖掘设计所要聚焦的诉求点

核心概念：

根据诉求点推导出可被表现的核心概念

创意表现：

围绕核心概念构思具体的创意表现

1.4.2：创意方法~

创意可以抽象诠释：创意就是创造意识或创新意识；

也可以通俗表达为：创意本质就是旧元素的新组合。

如下试举几种创意表现方式——

夸张：夸大/贬小

比喻：表形/写意

拟人：拟人化、拟物化

对比：或主体、或场景

独特视角：譬如微缩景观

故事化：戏剧性

渲染氛围：激发情绪

其它：未表

…

 Part 2：相关模块 

文案以及详情页通用模块

2.1：文案~

2.1.1：文案七剑~

如何写出具备互联网思维的文案呢？

可以试试以下几点——

分解产品属性：

“小米4，奥体304不锈钢，8次CNC冲压成型”。

从对方利益出发：

不是向对方描述产品，而是告诉对方其好处。

定位到使用情景：

“凡客诚品抗皱系列，不怕挤地铁的衬衣”。

提供线索（导火索）

让伸手党想都不用想，就知道应该怎么做。

建立联系（附着力）

如媒体称新球星“智力C罗桑切斯”；

同理，也有中国科技圈的“雷布斯”。

找到正确的竞争对手：

如对标饮料的凉茶“好喝，还能防上火”。

初期对标播放器的iphone“还能打电话”。

视觉感（画面感）

如同为mp3广告，以下两例高下立判：

“纤细灵动，有容乃大。”

“把1000首歌装到口袋里！”

…

2.1.2：文案6+1

怎样才能写出打动人心的文案呢？

不妨试试6+1模式——

描述背景（Background）

引起注意（Attention）

抓住兴趣（Interest）

勾起欲望（Desire）

提供解决方案

呼吁采取行动

树立诚信（信誉）

…

2.2：商品陈列

2.2.1：明确目的~

首先，需要明确商品的作用性——

明确页面主题，卖什么或者什么有优惠

丰富页面，增强促销气氛

增强用户的购买欲望

…

其次，需要知道商品陈列关系到——

一个页面好看不好看

有没有购买欲望

气氛强不强

…

2.2.2：陈列方式~

在促销活动页面（尤其是平台活动）或banner中商品的摆放方式是很重要的部分。

笔者（婷姐）结合自己多年的设计经验，总结出了一些常用的商品摆放模式——

运动轨迹：

商品遵循运动轨迹，列如正方形、圆形等。

三角摆放：

（倒）三角摆放是最常见也是最稳定的一种方式。

漂浮上空：

商品仿佛漂浮空中，或与图文前后错落。

放置容器：

一切都可以想象成容器，从而把商品摆放在里面。

平视角度：

就是当我们的视线与物体水平时所看到的视角。

无规则（不赘述）

2.3：参数~

产品参数，顾名思义就是产品的详细信息，比如：尺寸、材质、颜色等等。在详情页设计中，很多设计师过分注重首屏（前三屏）的设计，而忽略了产品参数部分，从而导致作品虎头蛇尾，缺乏整体与连贯性。

“我相信很多人并不是做不好参数模块，只是没有在意过，甚至在看优秀案例时，也很少会重点看一下别人这个模块是如何衔接和表现的。”《互联网文案写作》李叫兽

所谓细节决定成败，尤其是详情页这种偏整体性的设计作品，更要注重视觉、细节的连贯性。所以今天就着重说一下详情页中最容易被忽略的产品参数模块，如何做才能更出彩?

结合产品图~

数据与产品相结合的形式，可以更直观地将常用数据（如产品长、宽、高等）体现出来。 

简笔画处理~

就是把产品做成简笔画的形式，或者是产品图与简笔画相结合的方式。

或者场景图~

就是将产品场景图与参数信息相互结合，使得整个模块更有代入感，视觉画面感更丰富。

纯文字形式~

纯文字的产品参数,只要做好主次关系、对齐和留白，就会感觉舒适。

+光影效果

如果在文字基础上加点光影效果，会使得参数模块视觉感受更加丰富。

+展示媒介

再加点类似卷纸、书本、或者夹板的展示效果，就会有眼前一亮的感觉。

+质感纹理

加点肌理，或者抽象化的线条，使得整体视觉感受上更有层次感。

+毛玻璃等

还可以将产品进行特殊化的处理，比如高斯模糊（仿毛玻璃效果）。

2.4：优惠券（导购）

优惠券作为一种营销手段在现代生活中几乎无处不在，尤其是在电商购物、外卖快递、交通旅行等领域的交易过程中，优惠券作为一种有效的营销手段，在促销、拉新、复购、提高客单价等方面扮演着重要的角色。

“我和我喜欢的商品之间，就差一个优惠券了。”

从设计师的角度来看，我们是工具的设计者，既要满足商家的营销需求，也要尽可能的在多种场景下为消费者提供便捷的交互操作，使其顺利完成购物下单的流程。

流程复盘~

从业务到需求，从需求到实现，优惠券设计全流程复盘。

链接：www.uisdc.com/discount-coupon

方法总结~

想要提高转化率？

优惠券设计方法总结——

收集需求

需求分析

交互/视觉设计

可用性测试

——前端/后端——

设计评审

开发实现

上线走查（试运行）

数据观察

…

 Part 3：详情页面 

随文附带两个经典的销售模型

3.1：构图/素材

3.1.1：构图形式~

详情页的构图形式与传统的 PC 端海报有所不同，因为详情页设计更注重手机端浏览体验。

如下图，是几种在详情页设计中比较实用的构图形式——

这些构图形式看似简单，实则兼顾了手机端的诸多要点，比如：

（视觉）流畅度

（画面）整洁度

（主体）辨识度

（用户）接受度

…

另外还有一些从这三类衍生的构图形式，也比较常用——

以上构图示例中标识的装饰元素，可以但不限于是：

线条（点状）

英文（品牌）

图标（图形）

数字（符号）

…

3.1.2：设计素材~

各类素材在详情页设计中出现的频率也是很高的，如果运用得当会将详情页的出彩度提升一个档次，

而且对于视觉表达，也会更加生动、形象、而富有说服力。

常见的素材有——

手势（脸颊）

美女（小孩）

植物（花卉）

气球（彩带）

材质（肌理）

方块（圆球）

抽象化/具象化

未分类

……

3.2：光影/场景

3.2.1：光影表现~

无论是设计，还是现实生活中，随处可见光影，两者密不可分。

“有光就有影，有明就有暗。”

营造光影效果、丰富明暗关系，就足以让设计作品变得丰富、有层次感。 

具体到详情页设计，表现光影的常用方法有——

窗户格

透视窗户格

光照效果

单束

多束

斑驳

素材影子

绿植

树叶

插花

…

3.2.2：场景搭建~

搭建场景在详情页设计中也是非常实用的。

场景简约就好，无需特别复杂，但简约不意味着简单，

还是要有层次感、需要把控好整体的光影效果与明暗变化。

那该如何搭建（小）场景呢？常用的方法有——

产品场景化（产品即场景）

搭建小场景（折纸或剪纸）

三维渲染（虚实结合）

后期合成（元素聚合）

实拍（还原）

创意（表现）

…

3.3：问题/优品

3.3.1：常见问题~

在详情页设计过程中，设计师们所犯的错误是类似的，

此处略作整理，主要包含以下几个方面——

没有创意和想法，只会到处模仿或套模版；

不知道去哪找参考或找的参考本身就不好；

即便找到了合适的参考，却模仿不出来；

设计好详情页头图，衔接不好产品展示部分；

不擅长写文案，也不擅长挖掘产品卖点；

阴影不会处理，合成不擅长，修图不会；

非科班出身，对色彩和排版比较欠缺；

某个类目会做了，换一个类目做却不会了；

设计的详情页总感觉缺了点什么，细节不耐看；

不知道如何表现介绍产品结构、原理的内部解剖图；

不知道如何设计出耐看的，有质感的，或者有趣的详情页；

不知道如何把握品牌调性，把控好促销感和大牌感之间的平衡；

…

3.3.2：优品共性~

整体详情页的设计调性要符合产品本身的特点，要把产品的卖点和优势清晰地展示出来。

构建视觉动线引导用户一直看下去，大致需要做好以下几点——

了解目标消费者的喜好；

对产品特性有足够了解；

详情页头图部分要能抓住用户的吸引力；

文字排版的节奏符合手机端的阅读习惯；

整体配色的舒适度和节奏感；

配图的把控（整体局部对比，注意留白）

产品修图很重要（合成技法）

细节的质感把控（大小/间距/对齐等）

整体视觉的连贯与统一

风格一致

色彩协调

板式统一

可模板化

…

3.4：销售模型

3.4.1：FABE销售模型~

“FABE销售法”是具体、有高度、实操性强的利益推销法。它通过四个关键的环节（如下图），极为巧妙地处理好顾客关心的问题，从而顺利地实现产品销售。

（FABE）笑兽模型——

F-Features：代表功能（产品）

关于产品的功能、特质、特性等最基本的功能。

A-Advantages：代表优点（竞品）

即“F”这一步所列出的商品特性究竟发挥了哪些作用？

B-Benefits：代表利益（消费者）

即“A”这一步所列举出的优点能给客户带来哪些好处！

E-Evidence：代表证据（商家）

销售人员应该拿出充分的证据来印证前面提到的功能、优点、利益的真实性。

作者（下文）对此加以改进，整理出了一套可以适用于电商详情页面的销售法则——

《IDCMA逻辑法则》www.uisdc.com/idcma

3.4.2：AIDA爱达公式~

“爱达公式”的具体涵义是指一个成功的推销员必须把顾客的注意力转移到产品上，使顾客对该产品产生兴趣，随之产生购买欲望，而后再促使顾客采取购买行为，最终达成交易。

（AIDA）挨打公式——

A-Attention（注意力）

集中客户注意力。

I-Interest（兴趣）

引起顾客的兴趣和认同。

D-Desire（渴望）

激发顾客的购买欲望。

A-Action（行动）

促使顾客采取购买行动。

也有笔者（网友）基于此进一步提出并完善了适用于电商设计的销售模式——

《AITDAS销售模式》www.uisdc.com/aitdas-design

 Part 4：延伸拓展 

从拍摄到修图，从观点到示例。

4.1：视觉层次~

视觉缺少层次感怎么解决？来看高手的方法！

www.uisdc.com/visual-hierarchy

平面背景如何做出层次感？推荐一个好思路！

www.uisdc.com/make-the-administrative-levels

6个小技巧，让你的视觉层次“蹭蹭蹭”提升！

www.uisdc.com/6-tips-to-improve-your-visual-level

这9个方法，帮你搭建更加高效的视觉层次

www.uisdc.com/9-effective-tips-visual-hierarchy

4.2：选图/修片

让人看了就想买的设计，是怎样用对图片的？

www.uisdc.com/how-to-use-pictures

从这四个方面挑选图片素材，可以提高电商设计的出图质量

www.uisdc.com/find-best-e-commerce-image

有哪些需要快速入门的产品修图基础？来看看这份总结！

www.uisdc.com/product-repair-plan

看似高大上的图片精修，其实学会调整这7个方面就可以！

www.uisdc.com/7-skill-to-photo-finishing

4.3：版式基础~

用一篇超全面的文章，帮你掌握对齐原则

www.uisdc.com/alignment-principle-2

画面太平？帮你学会经典的对比原则！

www.uisdc.com/contrast-principle

用一篇超全面的干货，帮你完全掌握「接近原则」

www.uisdc.com/layout-design-approach-principle

掌握重复原则，帮你轻松塑造画面统一性

www.uisdc.com/redundancy-principle

4.4：观点/示例

想提高电商界面设计的转化率？总监提炼这10个关键要点

www.uisdc.com/clothing-interface-10-tips

想让用户下单？给你一份专家的商品详情页设计指南！

www.uisdc.com/product-detail-page-design

潮流酷站！一组走心又走肾的优质电商网站设计实例(上)

www.uisdc.com/the-best-ecommerce-website-1

潮流酷站！一组走心又走肾的优质电商网站设计实例(下)

www.uisdc.com/the-best-ecommerce-website-2

设计要素——

《字体设计》

    字体设计无死角解析

《颜色设计》

    色彩设计（略谈）

《图标设计》

    图标设计全方位解读

《版式设计》

    版式设计（简析）

《设计风格》

    平面设计风格（合集）

《设计趋势》

    …

知名机构——

汤臣杰逊（广州）

https://toonsoon.zcool.com.cn/

松鼠传媒（深圳）

https://www.zcool.com.cn/u/2818217

点奥文化团队（杭州）

https://sign2014.zcool.com.cn/

你好大海品牌设计（郑州）

https://nhdh232.zcool.com.cn/

…

参考文章——

详情页设计不够出彩，该如何提升？

电商详情页不会做？这些实用技巧你都会吗？

为什么你设计的详情页不耐看，也没有购买欲？

设计可以没创意，做好这6点也能过稿！

年度最佳教程！7招教你写出互联网顶尖文案！

电商好文！超多实战案例帮你解锁5种商品摆放姿势

详情页中最容易被忽略的产品参数模块，该如何设计？

想提高转化率？来看这份超全的优惠券设计方法总结

干货推荐！电商网站详情页面设计规范

以电商为例，帮你掌握超全面的产品分析流程

手机详情页如何卖爆货？先掌握经典的版式四原则！

万字干货！电商高手设计前的4个思考环节：

www.uisdc.com/e-business-design-thinking-process

说明：文中图片源自各大电商网站，本文仅作示例，不做商业用途，此致谢意。