网店美工教程——页面构图技巧

***学校《网店美工》教案第 1 页有兴趣的设计师们可以利用业余时间多进行了解。

如果能够成为集设计与文案才能于一身的高级人才，可想而知，你将备受青睐。

商品详情页设计是直接决定交易能否成功的其中一个重要因素，如何去构思使之更具有吸引力，更能抓住消费者的心理是关键。

我们需要收集和了解买家需要看什么，不需要看什么：图6-1 详情页所需内容板块示意接着，在再构思宝贝页面需要放置什么内容：图6-2 详情内容要点示意任务23 商品功能性介绍区域设计在做商品详情页规划前，清楚商品详情页每个区域的功能性，对后期布局设计起到相当重要的作用。

一般来说，商品详情页分三大区域：商品营销区、产品展示区、品牌包装区。

而三大区域则又细分成以下6个展现区，并形成商品描述的布局图：突出卖点：提炼商品的主要功能利益进行重点表现，吸引买家关注并进行浏览由整体到细节：先进行商品的整体展现，再进行商品的细节描述，这也是买家在购买商品时的浏览顺序情感联想：针对商品提炼情感利益，激发买家的感性购买需求导购服务：针对买家关注的商品问题进行导购式解答，逐步打消买家的购买疑虑售前售后：对买家进行购买后的一系列服务，从包装、物流到售后服务进行描述实力呈现：商品的质量认证、企业的实力展示、品牌介绍、荣誉等体现店铺实力的内容关联销售：关联销售区域，以便买家跳出前有更多商品选择图6-3 详情页个区域内容细分示意另外，除了基础功能区域版块，为了提高买家逛店体验度以及店铺成交转化率，我们建议增加一些额外的版块，来为商品详情页的功能加分：1.增加买家购买欲望—促销活动区：在商品描述中加进给力的促销信息，让买家了解商品的同时清楚可以享受的促销优惠，让促销优惠来刺激买家的购买欲望。

2.增加客单价—商品推荐：商品推荐有两种，分为同类商品推荐，设计必须要突出同类商品中不同商品的优势。

告诉买家可以如何进行商品选择，如可以的话还可以体现出购买咨询和导购信息。

另一类则是搭配商品推荐：设计中要突出不同商品搭配的艺术，或功能或效果或视理念或促销导购写到这里来，但是文案不宣过长。

“新商科”电子商务系列规划教材Copyright@童海君编书团队ContentsPage 目录页任务1 店招图设计任务2 店内海报图设计任务3 直通车图设计任务4钻展推广图设计任务5 活动图设计ContentsPage 目录页任务1 店招图设计4.1.1 店招设计目的4.1.2 店招设计类型4.1.3 店招设计结构任务2 店内海报图设计4.2.1 店内海报图的分类和作用4.2.2 丝巾海报设计案例4.2.3 丝巾海报作业思考任务3 直通车图设计4.3.1 直通车特点解析4.3.2 直通车图在搜索页的位置4.3.3 直通车图在设计的注意要点4.3.4 直通车图案例分析4.3.5老年服直通车图设计案例ContentsPage 目录页任务4钻展图设计4.4.1 钻展特点解析4.4.2 钻展图设计技巧4.4.3 审核流程4.4.4 钻展图位置4.4.5 头戴式耳机钻展推广图设计案例任务5 活动图设计4.5.1 活动图设计规范4.5.2 活动图示例说明4.5.3活动图示例说明【项目重难点】图片设计中，文字字体的选择、整体颜色的选择及应用；直通车推广图设计时，图文的排版样式、比例分布以及文案应用的精准表达。

【项目导图】【引例】35岁的张强是2004年毕业的大学生，老家住在城郊的工业园附近，本身学习的是电子商务专业。

张强毕业后并没有像其他同学那样去找工作，而是自己在淘宝网上开了一个服装网店，平时除了进货发货，晚上也会抽空将图片上传摆好放在自己的店铺上。

经过一年多的发展，张强的生意一天天好起来，忙的不亦乐乎。

但随着时间的推移，张强在网上的店铺人流量却直线下滑到现在的冷清，曾有朋友建议过将店铺的风格和展现形式重新做一下，更符合现代电商的形势。

但张强有自己的理论，他觉得网上图片摆放一下就行，顾客在乎的就是价格，主要是想方设法将价格再降低一些。

大家想一下，张强的网店图片通过摆图片和文字的方式，适应现在电商的发展吗，图片的视觉营销方向在广告及其相关的图片中起到怎样的重要作用。

电商美工自学教程电商美工自学教程随着互联网的发展，电子商务已经成为人们购物的主要方式之一。

而电商美工作为电商平台的重要组成部分，对于提高用户体验和促进销售具有至关重要的作用。

因此，学习电商美工成为越来越多人的需求。

本文将为大家介绍一些电商美工自学教程。

一、Photoshop基础教程Photoshop是电商美工必备的工具之一，掌握Photoshop的基础操作和技巧是学习电商美工的第一步。

在网上可以找到各种Photoshop基础教程，包括入门教程、视频教程、练习题等。

此外，还可以通过购买Photoshop教程书籍来进行学习，例如《Photoshop CC基础训练班》等。

二、UI设计教程UI设计是电商美工的核心之一，包括网页UI设计、APP UI设计等。

在网上可以找到很多UI设计教程，例如UI中国网站上的UI设计课程，包括原型设计、界面设计、交互设计等。

此外，还可以通过参加UI设计培训班来进行学习，例如腾讯课堂上的《UI设计师》课程。

三、网页设计教程网页设计是电商美工的主要工作之一，包括网页布局设计、色彩搭配、字体设计等。

学习网页设计需要掌握HTML、CSS等基础知识，可以通过网上的网页设计教程进行学习。

例如W3School上的HTML/CSS教程，可从基础到进阶进行学习。

四、摄影技巧教程电商美工需要具备拍摄商品照片的能力，因此掌握一定的摄影技巧也是必要的。

在网上可以找到很多摄影技巧教程，例如摄影师网站上的摄影技巧教程，包括构图、光影等方面的技巧。

此外，还可以通过参加摄影培训班进行学习，例如北京摄影学院等。

五、学习设计思路学习电商美工需要掌握一定的设计思路，包括用户体验、品牌形象等方面的设计。

在网上可以找到很多设计思路教程，例如设计师网站上的设计思路教程，包括用户研究、用户画像等方面的思路。

此外，还可以通过参加设计思路培训班进行学习，例如慕课网上的《用户体验设计必修课》等。

总之，学习电商美工需要掌握多方面的技能和知识，需要不断地进行学习和实践。

【导读】：一个成功的专题页面，大部分会具有以下几个出彩的要素：色彩丶构图丶风格创意，细节等。

一个页面从无到有，设计师需要对整个页面有全盘的设计和把控，良好的画面分割能够让用户第一眼看到这个页面就能被视觉吸引，甚至不用浏览具体内容就能了解这个页面的很多信息。

同样的素材，同样的配色，不同的构图能够让页面出来的效果有天壤之别。

如果你还抱着一个专题就是一个出色的头图，下面的内容按部就班的填进去，那你就OUT了。

好的页面构图能够让你页面更出彩，也能让你做设计更事半功倍。

下面，我们就来看看一些好的专题都是怎么构图的。

1.几何切割在现实生活与自然界中，我们随处可见几何图形的存在，简单的三角形丶正方形丶长方形和圆形甚至几根线条就可以组成很多有趣的图形，也很符合现代审美需求，适当的画面切割能够给页面带来动感与节奏感。

加入几根线条，几个块面就能令页面起到意想不到的效果。

实现的时候需要注意的是素材不适合太过复杂和花哨，一般会是纯色大块搭配渐变，主要突出形状和区块。

A.简单切割用一个形状或者素材切分整个页面，画面瞬时变得有趣生动起来，内容区域也能得到有效划分。

这类构图方式对内容没有过多要求，可随意安排。

具体排版可根据内容来处理，也是现在专题页面用得最多，最普遍的一种构图方式B.对称切割这种构图方式的前提一般是内容分主要两部分，并且这两部分是对立关系的情况下，比如说：对战，男女，冷热等等。

页面一分为二，内容划分明确也更加具有视觉冲击力。

C.组合切割集中而规律的排列，从整体上抓住人们的视觉。

这种构图方式适合那种每个区块中的内容属于平级关系的专题，例如示例中的几个功能点和分类，都是属于同一级的内容，所占的比例也相同，用这种组合的排列能够保持各内容的关系，也能让布局更有创意D.多重切割不规则的构图，稳定而锐利，干净的排版，易于识别，不规则的构图方式，避免了画面生硬，不易产生审美疲劳。

不同的形状和排列，呈现出来的视觉效果也不一样。

产品图片美工一、在线美工图片美工（网店秀）1：点击图片空间-百宝箱-编辑工具-网店秀2、界面说明上部是功能按钮，功能按钮下面是图片列表下部左边是功能面版本区，右边是图片编辑区其中图片编辑区上部是快捷菜单，有一些常用功能。

3、如何进入编辑器可以从下面两个入口进入网店秀图片编辑器图片管理下面的编辑链接图片空间菜单中的百宝箱4、如何打开图片如果是从上面点图片编辑进来的会自动打开那张图片。

如果是从百宝箱进入的会弹出下面这个框如果想添加图片可以点图中的“打开”或“＋”号。

我们打开图片共有4种方式：图片空间，宝贝主图，本地上传和网络图片。

5、图片空间可以选择图片空间的图片，左边是分类右边是图片，点击选择中（图中已经标示）再次点击取消选择，如果分页很长可以点击下面的“??”和“??”按钮可以滑动分页条。

下面的批处理尺寸方便您提前处理图片大小。

选择好图片点击打开就可以了。

6、宝贝主图窗口和打开图片空间的图片类似，可以选择宝贝主图并且可以替换宝贝主图7、本地上传点击本地上传的时候会弹出一个本地系统对话框提示您选择图片，您选择好图片之后就会弹出上面这个窗口，里面有您已经选择好的图片，鼠标移入会出现图片标示的按钮，您可以左右旋转也可以删除。

8、网络图片您提供网络地址我们帮您下载图片。

注意网络地址必须以"http://"开头。

9、保存图片如果已经完成编辑可以点击界面右上方的保存按钮保存图片，保存窗口如下图所示：右边可以选择保存的空间分类和图片质量（仅对JPE有效果），如果您原图是PNG的则保存为PNG如果您原图是非PNG则统一保存为JPG格式。

左边的保存到本地按钮可以方便的把所有图片打包保存到本地（ZIP格式）。

10、替换和备份右边的要保存的图片列表，上方有个替换按钮，方便批量选择替换（只对可替换的图片有效）如果图片可以替换，会显示如图所示的替换按钮（主图显示“替换主图”其他图显示“替换原图”）和备份按钮，选择备份的话会把您的原图备份到您的图片空间（图片空间“图片编辑器备份”分类下面，如果您空间有限请按需使用）11、保存到本地每张图片都可以保存到本地，现在还可以批量保存到本地，点保存到本地的时候会有一个生成文件的对话框（如下图），等生成完成您点保存会打开一个系统文件夹选择的对话框，您保存就可以下载到本地了。

如何做好电商美工构图如何做好电商美工构图一个好的电商美工设计师，需要的具备怎样的能力？当然了，过硬的技术和强烈的美感很重要。

通常来说，一个好的设计图由产品、背景、颜色、排版、感情几个因素组成。

要如何把这几个因素巧妙地融合到一起，这既是技术问题，也是思维方式的问题。

那么，对于初入电商设计行业的新手来说，要如何做好电商美工构图？很多时候，新手刚上路，都是走模仿路线，从别人的设计中吸收精髓，再慢慢提升自己的操作水平。

这几乎是每一位成功者前期都会经历的事。

上图给你是否有一种触动的感觉，就像是看到了一个黑长直的`美女一样，叫你忍不住的想多看一眼！到底设计师是如何做到这一点的，里面需要哪几个元素的配合。

1）产品。

产品是整个设计的主心骨，需要你围绕着它为主题来设计东西。

2）背景。

背景，一个看似不起眼的元素，但却是最为重要的元素。

是为了衬托出产品的价值，以为整个设计的氛围元素。

3）颜色。

在电商设计中，颜色是重中之重，它是体现一个设计水平的重要条件。

由于颜色是带有感情的，能影响人的情绪，所以如何用色，如何布局颜色也是一个重要的课程。

4）排版。

一个好的排版，能给人舒缓，不易疲劳的感觉。

5）感情。

对于这一概念确实有点抽象，但刚才我们也说了颜色是可以影响我们的情感，所以，要想你的设计图能给人产生情感，颜色的运用也很关键。

新手做好电商美工构图，从模仿开始。

要注意了，模仿的意思并不是叫你照抄，而是让你理解，思考别人的用色关系和布局。

还是借用上图的例子来述说下吧：背景首先整个图的设计，是一件夏天穿的圆点连衣裙，主题是波尔卡圆，轻松感，那么我们可以很快地发现到作者需要突出的一个氛围就是轻松感。

由于现在是夏季，所以蓝天白云打造的氛围是最好不过的一个轻松氛围了，于是刚好黄色与蓝色成对比色，这样黄色就容易突出了，产品的视觉点也就有了，于是背景用蓝色，但若大面积地使用蓝色的话，肯定会造成一个视觉疲劳。

所以，为了体现轻松的感觉，当我们想到蓝天时，白云是不可缺少的一个元素之一，用白色来辅助或许会达到更好的效果，而且还能营造出静谧轻松的感觉来。