电商详情页设计：竖屏思维下的产品排版设计与简约构图法

面向从事电商领域的设计师而言, 详情页设计属于我们日常工作中不可或缺的一个环节, 它也是决定我们产品转化率的关键因素中的一项。一个优质的详情页能够给消费者带去更为舒适更为流畅的浏览感受, 能更加直观地让消费者瞧见产品的卖点以及信息呈现。

为此便存在诸多商家乐意耗费更多的Design费用去塑造自身爆款商品的详情页面, 据此能够看出详情页面的重要程度。所以在这期向大家介绍若干详情页面的构图样式, 借由这般的构图, 能够促使我们的详情页面视觉成效与用户感受达成极大的成果, 使你的设计格调持续提升！

鉴于流量有所倾斜, 我们明晰当下电商是以手机端作为主要载体的, 而手机端的详情页设计采用的是竖屏思维设计, 也就是那种自上而下的设计形式, 如此这般更有益于达成良好的浏览体验以及顺畅度, 毕竟咱们的手机均为竖屏的。

一当我们把详情页每一屏看作是一个海报的时候, 二这里就会涉及到一个相当重要的概念, 三那就是海报排版构图。

这样的话, 平常手机端的海报排版构图形式究竟都有哪一些呢? 接着我们开始予以讲解, 要是大家能够将这几种排版构图形式运用到你的详情页设计里, 肯定能够极大地增添你画面的设计形式感。

以上三种, 是详情页常使用的排版构图形式, 且属于最为基础与简单的构图, 自左至右, 于以竖屏为根基的状况下, 版式存在左对齐、居中对齐、右对齐这三种方式, 如此能够促使文案跟图片实现更为良好的区分, 致使消费者于看到此屏信息之际, 可以迅速领会当前画面所要表述的重点内容。

左对齐：

居中对齐：

右对齐：

像上面提及的这三种详情页常常会用到的排版构图形式, 看上去好像挺简单的, 然而却能够极其充分地展现出产品以及卖点方面的信息, 甚至于可以讲仅仅依靠以上所说的这三种构图, 便能够完成一个相当不错的详情页设计。

好多人看到这儿定会讲, 只用这三种形式, 难道不会引发审美疲劳吗? 要是一版详情页全是这三种排版构图, 是不是会太过死板? 进而致使千篇一律毫无新意?

当然, 要是你期望增添详情页里的节奏感, 那么下面给大家再度推荐另外3种详情页构图形式, 这些形式能够助力你搞定太过死板的详情页框架。

我们能够借助上下的调节, 使得图片居于上方, 文字处于下方, 还能够采用左右的方式, 让图片位于左边或者右边, 文字在左边或者右边来予以调节, 在我这里仅展示一种形式就行, 另一种通过对称转化便可, 在此要着重指出一点, 要是图片与文字呈左右排列之时, 实际上是违背了我们的竖屏思维的, 然而为何这里还要提及这种构图形式呢? 在运用左右构图之际, 务必要注意一点, 图片展示是以局部或者放大细节作为主要内容的, 不然就不建议采用。我们能够结合下面的案例去进行理解。

和前面三种形式相比, 这三种形式有了一些变化, 不过, 要是仔细去观察, 也不会有特别大差异, 详情页构图设计缘由是不宜采用太过复杂版式与构图, 因为消费者没太多时间停留来细看炫酷设计, 这样会大幅降低信息传达, 3秒内表达清楚就行。

以下这六种构图形式, 大伙能够于详情页制作之际按照情形予以运用, 完全能够满足绝大部分的详情页制作需求, 当然了, 以上所展示的文案部分, 像图标、线条等均可依据情形加以运用, 并非非得使用才行, 大家务必要灵活把控所学知识, 切莫死板地进行作图。

关于详情页每屏之间衔接的把控, 我在电商设计系统课程里的详情页这一章已讲解得极为详尽, 需留意节奏的改变与衔接情况, 尚未了解的同学去查看那一章的课程就行, 我在此处就不过度介绍了, 依旧是以构图展示作为主要讲解内容。

把详情页的构图按以上6种形式拆解后, 对于主体这件事而言, 你会发觉并非很艰难, 当你用到任一构图形式这事的时候, 径直去套用就行, 在构图方面它能为你省下极大一部分时间, 与此同时还能够呈现出不错的视觉效果。

从构图形式这一现象出发, 我们深入剖析其背后的本质意义。当我们实施构图变化时, 目的在于使画面里的图片与文字能更迅速呈现, 让消费者无需过度费脑, 一眼便能明晰你所表达的文字卖点以及产品究竟是什么。无论我们怎样变换构图形式, 皆是为了达成信息的有效传递, 且借助视觉上的变化提升耐看性。

详情页的构图形式, 是我们提升视觉流畅度的有效方法之一, 也是提高文字信息识别的有效方法之一,以上所给大家的6种构图形式, 是为了给出一个设计思路, 是为了给出一个设计方向, 在具体落实到你的详情页设计时, 一定要针对具体问题进行具体分析, 要能够做到举一反三, 才表明你真正理解了构图的含义。

紧接着, 再向大家提供一条建议: 关于详情页构图, 要尽可能地做到简洁且明晰, 切勿仅因追求视觉效果, 而去增添其复杂度, 否则会在无形中致使信息传递遭受到降低。

继续浏览有关 电商详情页设计竖屏思维下的产品排版设计 的文章