淘宝详情页怎么排版

关注：78 发布时间：2022-05-30 09:24:01

近些年来，淘宝详情页都在向简洁干净让用户体验达到比较佳的方向发展，因此淘宝详情页排版都在以极简设计打造美观舒适的感觉。下面先看一下极简设计的案例：

这是锤子t1的页面设计，虽然好多人都不喜欢老罗，但是我觉得他有对设计特有的一种完美主义的偏执，我觉得作为设计师还应该多向他学习一下。

淘宝详情页怎么排版

下面是几个淘宝详情页排版技巧：

一、对齐——比较基础但也比较重要

上面图a、b、c是对页面重新排版，图d是原有的设计。

图a的构图有些头重脚轻，让人感觉中心偏下;图b的手机主体物有种对文案的挤压感，让人觉得压抑;图c的手机和文案成为90°的夹角，让人觉得有种阻碍感，不顺滑;图d的设计很好的协调了主体图与文案的关系，并且给人一种从远及近的中距离纵深感。整个画面中间对齐更能比较大限度的突出主体——手机。

从锤子的网页设计中我们可以观察到，这种排版方式是中间对齐。

再看一个中间对齐的例子：

小米2015年的新品发布会海报也采用了中间对齐的形式，让关看者很容易的就视线聚焦到中间“新年礼物”的重要信息上。

二、对比——无对比不设计

作为简洁乃至极简的设计来说，对比非常重要，对比可以让人非常快速的阅读到重要信息，让信息主次层级富有条理性。也可以让版面的设计有节奏感，让画面看起来不乏味。

上面的设计是小牛n1和一加3的设计，这两个设计是典型的左右排版。右侧放商品图片，左侧排列简单而有用的基本文案信息。而左右两边的图片和文案信息的大小对比要要根据商品的属性来决定的。例如，一加手机主要体现手机的外型和质感，所以放置2个占比面积较大的手机，搭配比较基本的文案信息(只有手机名字、价格和购买按钮)。

上图是文案与商品的面积对比。

这个设计则与一加和小牛相反，文案面积很大，但是我们的视觉中心依然是手表，因为手表的产品图对比于白色文案在画面中更突出更加吸引目光。文案里也有对比，标题选用大而粗的字体，其他信息则放的很小，大能又快有准的看清标题的内容，另外因为字体大小和粗细的变化让人感觉有节奏感。

三、有“气质”的留白

极简设计里的留白非常重要，比较典型的是无印良品的设计，它是把留白应用到现在设计里比较好的典范，但是我觉得我们中国人才是留白的“老祖宗”，国画就是非常典型的例子。

下面我们来做个对比，我们把图上的一些不必要的复杂背景和文案给去除。主要是让产品主体和主要信息展示的更加清晰和明确。

再做更进一步的精简，增加留白的面积，使产品和产品信息更加清晰的传达出来。

比较后本补充一些：

所谓的突出不突出是相对的，有对比才有突出一说，假如画面中只有一个字，你说消费者眼睛会往哪儿看?即使字再小也会去看那个字，因为画面根本没有其他信息干扰。所以一定要砍掉没价值的信息。对比突出要看画面周边的元素，好比2个高个子站一起看不出什么，一高一矮站一块，就会高的显高，矮得显矮了。

淘宝详情页排版技巧小编就讲到这里了，大家可以去多参考同行店铺是怎么做的，然后做出有自己风格的宝贝详情页。更多关于淘宝店铺装修的内容可以在装修宅学习！

淘宝详情页怎么排版