目前被认可的一种详情页设计形式是分屏式，就是按照手机端设计思维以一屏为单位制作，最后整合成一个完整的详情页，这种形式有助于提升视觉流畅度及内容识别度，所以我们可以将每一屏都当作一张海报来制作。而说到海报，就离不开设计构图。
详情页的构图与传统的PC端海报有所不同，因为详情页设计更注重手机端，所以一屏的内容又可以看做是手机端竖向的海报。而一副出彩的海报，必然需要优质的骨架。那么常见竖向海报构图形式有哪些？下面为大家总结了几种在详情页设计中比较实用的构图形式：
如图所示，这三种构图形式看似简单，实则兼顾了手机端的很多必要点，比如：视觉的流畅度、整洁度、辨识度、用户的接受度等等，详情页设计在构图及板式方面并不需要很复杂，反而干净整齐的画面更易于视觉表达，也更利于手机端展示。
这三种构图形式在详情页中使用频率是非常高的，下面我们看几组案例：
看似简单的构图，反而在详情页设计中非常实用，仅靠这三种构图，完全可以做出很优秀的详情页。另外还有一些从这三类衍生的构图形式，也比较常用：
文案在配图下半部分的这类构图相比而言用的少一些、也难把控一些，当然用的好了在版式上会有打破、眼前一亮的视觉感受，只是这类构图不宜多用，完整的详情页中出现1-2次即可。而左右式配图+文案的形式是比较常用的，下面看组案例：
详情页的构图不易太复杂，这六种构图形式完全够日常工作，只需选取其中1-3中构图形式交替使用即可。以上构图示例中标识的装饰元素可以是线条、英文、图标、数字、实物素材等等，也可以选择不使用，具体情况根据配图的留白以及重心灵活使用即可。
所以，详情页中每一屏的构图并不难，完全可以把这六种构图形式当做公式，需要哪种直接套用其结构就可以（结构类似即可，并非要求1:1）。另外：配图形式可以分为三种：全屏、半屏、透明图，具体的构图形式需要结合画面整体的重心、留白、美观度决定。更通俗一些的话，构图就可以理解为填空，内容就往空的地方填，注意好适量的留白。
补充：当透明图作为配图时，不管哪种构图形式都有可能出现空的现象，这时我们可以用一些具有装饰性的数字、英文、线条、形状、文字等等进行填充，举例说明：
案例中的文字、数字与产品相互结合，既解决了空的问题、提升了整体的饱满度，又在形式上做到的新颖、有创意。构图形式与前面所说的皆能吻合。
说到设计素材，浮在脑海中的可能会很多种，而这次要说的主要是三类，即：手势、植物、肌理（在花瓣搜索关键词“手势”“植物”“材质”“肌理”就能找到对应素材），这三类素材在详情页设计中出现的频率也是很高的，如果运用得当会将详情页的出彩度进一步提升一个档次，而且对于视觉表达也会更加生动、形象、富有说服力，下面我们逐一来说：
手势素材
顾名思义，就是各种各样关于手方面的动作，比如：拿、托、指等等，下面举个例子来看：
为什么要用这些手势，只是单纯的好看吗？
单看标题可能很多人不太明白，什么叫做抽象名词具体化？其实简单理解就是：将一些比较抽象的名词通过设计手法表现出来，比如：风、声音、温度、轻重、锋利等等。这样做的目的不仅可以提升用户体验、加快用户理解，而且在视觉上能生动形象的将抽象化名词表现出来，对于视觉出彩度的提升也很大。给人留下的印象也更加深刻，间接的提升了视觉传达的时效性，下面看个例子：
通过案例我们不难发现：将抽象化的名词通过视觉手法表现出来，对于用户理解的难易程度以及视觉出彩度而言都有提升。如果一款产品详情页中能出现1-2次这样的处理手法，会使得详情页在视觉上更加生动、形象。
补充：在详情页设计中，若文案中出现一些LOGO、数字、英文，注意不要放过它，因为它具有装饰性的特点，对于详情页板式的活跃以及设计感提升都有很大的帮助！形式多为：水印、与产品穿插、作为主体信息使用等等！一款详情页这种用法可以出现2-3次！
详情页设计不可忽视的两点：视觉的流畅度以及文案辨识度。文章所提到的一些构图方式、元素使用、视觉表现形式都是为大家提供一个可供参考的方向，落实到工作中要灵活运用、举一反三。一般情况下，一款详情页大概有屏比较出彩的即可，能形成一定的对比，不至于视觉疲劳、千篇一律！
不妨找一些不错的详情页，按照文章中所写的自己尝试分析分析，看是否与之吻合。
切记详情页设计构图及文字排版不易太过复杂，切记、切记、切记，重要的事情说三遍！
美工美邦（公众号）
评论0