《网店视觉营销设计》 课件 模块2任务3 视觉构图和页面布局.pdf

•（一）任务工单

•任务目的：利用图形图像处理软件，了解视觉构图和页面布局；以独特的视觉冲击，让顾客

留下深刻印象，提高推广转化率。

•任务描述：在杂乱的画面中，根据对画面和商品信息的分析，提炼出合理构图布局，利用

Photoshop2020软件中移动、字体、选框等相关工具完成图片的构图及内容排版。

•知识目标：了解视觉构图和页面布局的种类、对商品特点和排版的关系有初步了解。

•能力目标：能使用图形图像处理软件；能综合各种视觉元素进行设计；能优化构图和排版。

•思政元素：店铺的“满减”活动，要符合社会主义核心价值观中“诚信”原则。

•（二）任务情境

“爱尚乳饮”网店为了提高“双十一”销售额，决定优化店内详情页图片的视觉构图和页

面布局。通过重新构图，吸引流量，提高网店的销售额。

•（三）任务解析

根据提供的商品详情页的片段PSD文件，调整各个图层的构图，优化商品的排版。如图2.3.1所

示，通过卖点文案，突出店铺本次活动的优惠券和活动期限等信息。优化后的详情页如图2.3.2所示。

店铺赠送优惠券，开展“满减”

活动，主要目的是促销，吸引顾

客下单。

促销活动要符合社会主义核心价

值观中“诚信”原则，不搞虚假

宣传，促进社会文明、和谐发展。

图2.3.1图2.3.2

详情页片段原图优化后的详情页片段

•（四）知识准备

知识准备一视觉构图

画面的构图是视觉艺术作品中最直接、最基本的表现形式之一。衡量画面中条线、形状的

长度、宽度和角度，以及画面元素之间的比例、间隔与关系等，是构图的核心。构图的过程需

要综合运用多种艺术技法：

1.中心构图法：是将主体放置在画面中心进行构图。这种构图方式的最大优点就在于主体突

出、明确，而且画面容易取得左右平衡的效果。

•（四）知识准备

知识准备一视觉构图

2.水平线构图法：是最基本的构图法，以水平线条为主。水平、舒展的线条能够表现出宽

阔、稳定、和谐的感觉，通常运用在湖面、水面、草原等等。

3.垂直线构图法：画面中以垂直线条为主。运用垂直线构图时，物品自身就符合垂直线特

征，例如树木。垂直线在人们的心里是符号化象征，能充分展示景物的高大和深度。

4.三分构图法：也称作井字构图法，在这种方法中，需要将场景用两条竖线和两条横线分

割，这样可以得到4个交叉点，将画面重点放置在4个交叉点中的一个即可。

•（四）知识准备

知识准备一视觉构图

5.对称构图法：按照一定的对称轴或对称中心，使画面中景物形成轴对称或者中心对称。

6.引导线构图法：即利用线条引导观者的目光，使之汇聚到画面的焦点。引导线不一定是具

体的线，凡有方向的、连续的物品，都可以作为引导线。

7.框架构图法：将画面重点利用框架框起来的构图方法，会引导观者注意框内景象，产生跨

过门框即进入画面的感受。

8.重复构图法：当主体是同样的物品，将这一群主体同时重复呈现的构图方法。单调地重复

同一物体，占据整个画面并且没有明显杂乱的其它物体出现，起到突出主体的效果。

•（四）知识准备

知识准备二页面布局

1.卡片式2.分屏式3.大标题式4.个性化推荐

5.网格式6.导航标签7.内容轮播

•（四）知识准备

知识准备二页面布局

1.卡片式页面布局：卡片就是交互信息的承载体，通常以一个浓缩的形式提供相关页面内容。卡片式

页面布局非常适合在页面上放置大量内容，同时又使每个内容保持鲜明。

2.分屏式页面布局：这种布局既指