详情页设计必修课：让你的详情页脱颖而出

从事电子商务的设计师可以说是详细页面设计的必修课。好的细节页面会给用户带来更流畅的视觉体验、更直观的产品信息、亮点等，也有助于提高交易达成率。这就是为什么很多商家不遗余力地要求设计师为其打造爆款产品的详细页面，这说明了详细页面在电商设计中的重要性。本期和大家一起分析总结:如何让细节页足够出彩，细节页做不好需要从哪些方面进行改进？目前，一种认可的详细信息页面设计形式是分屏式，即根据移动终端的设计思维，以一个屏幕为单位，最后整合成一个完整的详细信息页面。这种形式有助于提高视觉流畅性和内容识别，因此我们可以将每个屏幕作为海报制作。说到海报，离不开设计构图。细节页面的构图不同于传统的PC端海报，因为细节页面的设计更注重手机端，所以一个屏幕的内容可以看作是手机端的垂直海报。一张精彩的海报必须需要高质量的骨架。那么常见的垂直海报构图形式是什么呢？以下是详细页面设计中几种实用的构图形式的总结：如图所示，这三种构图形式看似简单，实际上考虑到手机的许多必要点，如：视觉流畅、清洁、识别、用户接受等，详细页面设计的构图和布局不需要非常复杂，但干净整洁的图片更容易视觉表达，也更有利于手机展示。这三种构图形式在详细页面中使用频率非常高。让我们来看看几组案例：看似简单的构图在详细页面设计中非常实用。只有通过这三种构图，我们才能制作出优秀的详细页面。此外，还有一些从这三类衍生出来的构图形式，也比较常用:文案在配图下半部分使用较少，难以控制。当然，如果使用得好，会有打破布局、眼前一亮的视觉感受，但这种构图不应该多用，完整的细节页面可以出现1-2次。左右图 文案的形式比较常用，下面看组案例：详细页面的构图不应该太复杂，这六种构图形式完全足以日常工作，只需选择1-3种构图形式交替使用。上述构图示例中标记的装饰元素可以是线条、英文、图标、数字、物理材料等，也可以根据图片的空白和重心灵活使用。因此，详细信息页面中每个屏幕的构图并不难。这六种构图形式可以作为公式使用，需要直接应用其结构（结构相似，不需要1:1）。此外，图形可分为全屏、半屏、透明图三种。具体的构图形式需要结合画面的整体重心、空白度和美观度来决定。更流行的话，构图可以理解为填空，内容填空，注意适量的空白。当透明图片作为图片时，无论哪种构图形式都可能是空的，然后我们可以填充一些装饰性的数字、英语、线条、形状、文本等。例如：案例中的文本、数字和产品的结合不仅解决了空问题，提高了整体饱满度，而且在形式上也是新颖和创造性的。构图形式可以与前面提到的一致。说到设计材料，可能会有很多种浮在脑海里，这次主要有三种类型，即手势、植物和纹理（在花瓣上搜索关键词）「手势」「植物」「材质」「肌理」您可以找到相应的材料)，这三种材料在详细页面设计中的频率也很高，如果使用得当会将详细页面的彩色度提高到一个更高的水平，而且视觉表达会更加生动、生动、有说服力。顾名思义，1.手势素材就是关于手的各种动作，比如拿、托、指等等。1.顾名思义，手势材料是关于手的各种动作，如：拿、托、手指等。这些手势会出现在许多详细信息页面上。接下来，我们不妨考虑一个问题：为什么使用这些手势只是简单的好看？事实上，在视觉上，这些手势使画面更加生动、立体、层次分明，使作品更加饱满、精彩。对于用户来说，他们更深刻地意识到产品是温度的、可操作的、更真实的、更容易理解的，因此他们更有说服力地实现交易，加深用户对产品的理解。影响细节页面转化率的因素有很多，视觉表达能否真正把握用户心理也是关键。2.我相信每个人都熟悉植物材料。它们经常出现在许多页面和细节页面上，具有很强的装饰性和广泛的含义，如自然、清新、贴合现实、充满活力等。如图所示，这里的植物可以与画面主体形成良好的屏蔽关系，在视觉层面上更有层次感，画面更饱满。而且，植物的使用不是随意使用的，而是与海报的氛围和文案密切相关，形成了良好的呼应和装饰效果。我们常用的植物元素可以清晰或模糊，只要符合画面的整体气质，就可以根据实际情况灵活使用。3.纹理材料在前面的许多文章中都提到了材料和纹理的奇妙使用。在这里，简单地说，纹理材料对提高作品的细节感、层次感、色彩感和饱满度有很大的帮助。如果作品遇到上述问题，不妨尝试使用纹理材料。很多人可能不明白抽象名词的具体化。什么是抽象名词的具体化？其实简单的理解就是通过设计手法表现出一些抽象的名词，比如风、声、温、重、锋利等等。这样做的目的不仅可以提高用户体验，加快用户理解，还可以在视觉上生动地展示抽象术语，大大提高视觉色彩。也给人留下了更深刻的印象，间接提高了视觉传达的及时性。通过案例不难发现，抽象名词通过视觉手法表现出来，提高了用户理解的难度和视觉色彩。如果这种处理方法可以在产品详情页面上出现1-2次，会使详情页面在视觉上更加生动生动。在详细页面设计中，如果文案中出现一些LOGO、注意不要放过数字和英语，因为它具有装饰性的特点，这对活跃的详细页面布局和提高设计感有很大的帮助。形式多为：水印、与产品穿插、作为主要信息使用等，一个详情页这种用法可出现2-3次。总结详细页面设计中不可忽视的两点：视觉流畅性和文案识别。文章中提到的一些构图方法、元素使用和视觉表达形式都是为您提供参考的方向。在工作中，我们应该灵活运用它们，从一个例子中得出推论。一般情况下，一个细节页面大概有2-4个屏幕，可以形成一定的对比，避免视觉疲劳和相同。找一些好的细节页面，试着根据文章中写的自己来分析，看看是否与之一致。请记住，详细页面的设计构图和文字排版不应过于复杂。