如何学习电商网站设计

网站的开发建设是比较耗时耗力的，不但需要域名和服务器的搭建，网站内部，用户进入网站所浏览的内容更是为重要，关乎用户体验，但是针对于企业站来说，功能目的相似，但是需要不断的重新编写新的程序，时非常耗时耗力的，论坛也是如此，这时候大多站长都会选择二次开发。

不同类型的网站二次开发有哪些不同

1企业网站二次开发

网站的二次开发，故名思议，就是对原有的网站进行第二次开发，在互联网当中，企业站的功能都是相似的，大多的企业站只是需要多个页面，和板块，有对企业的宣传介绍，这时候假如网络公司需要建设一个企业站，而且不止一个，有多个站点，如果每个网站都重新编写，那么就非常麻烦，耗时耗力，这时候，就可以在一个写好的网站，作为一个模板，一般模板是也行业区分的，方便调用。当用个同行业的企业需要建站，就可以调用原理做好的网站，根据客户的需求等，修改网站的版面和内容，这时网站的整体框架是不需要动的，美工设计好版面样式，程序与再替换，修改网站内部内容，就可以成为一个全新的站的，网络公司使用这种方法，既方便快捷，也为用户节约成本。

2论坛网站二次开发

论坛的开发更为简单，因为网站都有免费的论坛模板，可以下载免费使用，比较知名的有discuz，phpwind之类的，都是可以免费下载使用，后台 *** 作也简单便捷。

3商城网站二次开发

电子商务的二次开发模板是需要购买的，因为程序比较复杂，而且自己也需要有程序员的长时间维护，功能复杂，数据量大，都需要专人维护修改。

这些不同类型的网站二次开发需要大家有一个比较全面的了解，因为这能够帮助我们更有针对性地做好网站开发的各项工作。如果您觉得有必要每个单项去了解的话，也可以尝试在网站上找找有没有相关项目的详细的教程。电商网站建设需要注意到的几点细节

1电子商务网站在外观设计时要注意整体的颜色搭配，切忌为了吸引浏览者而设计的眼花缭乱。往往简约清爽的风格适合更多的电商网站，因为更多的浏览者访问网站是为了购买产品，而非纯欣赏网站。一旦网站设计的过于胡里花哨会使得消费者摸不到头脑，觉得太凌乱，不能很快找到自己想要的信息。

2尽量使用白底黑字的呈现方式。现在很多电商网站喜欢使用背景色或者背景图，而使得网站浏览起来非常的不适，尤其是看文字的时候。如果是为了烘托逢年过节的气氛而设计的尽量是头尾或者两边留白处，中间依旧是以白底黑子为主，又或者是淡淡的底色。这样会让浏览器的眼睛感觉更加的舒服。

3广告特效避免太多。为什么电商网站的首页总是各种广告的聚集地？无论是两边广告、漂浮广告、上下浮动广告等等。一进去就会让浏览者觉得很烦，因为乱七八糟的东西太多了，影响到了浏览者的情绪。估计不少人也跟我一样有关广告的习惯，但是很多广告关了还是会 *** 出，这个就会越发的遭到浏览者的反感。所以避免在首页使用过多的广告特效是很明智的做法，依旧建议广告位设置更好。

4在线咨询的 *** 出影响用户体检效果。时不时的 *** 出一个在线客服是多么恼人的一件事，或许你在浏览某个产品的介绍时突然 *** 出，然后关掉了还会继续 *** 出。这严重影响到了很多浏览器者的购物欲，会使得很多人觉得这个网站怎么做成这样，更有甚者会干脆关闭了浏览器等。

电商设计师，俗称美工，们的工作内容大而全，什么都要会。一开始与大多数淘宝美工一样满足于基本的后期修图，把摄影公司拿出来的图磨皮调色然后做直通车图。

可以实际具体了解一下：网页链接

图像合成技术。

做海报、店铺装修、各类站内站外推广图都需要用到图像合成技术。图像合成水准也有高低之分。这考察到对软件功能的理解和应用。不是学会了PS就可以做美工了(虽然一开始就是这么个观点但实际上做了老长一段时间的“PS美工”)一开始走了弯路，学图像合成的时候总是去找美工合成教程，后来领悟到了，开始去找专业的图像合成大师的教程。学一个东西，有了软件基础之后7a686964616fe4b893e5b19e31333431336161，就从根本上去学，学高级的、专业的东西。如果只将自己的学习范畴限定在美工这个职业之内，很难有长足的进步。

需要具备会设计LOGO技能

字体设计与Logo设计技术电商美工必备的基本技能电商美工必备的基本技能。

难免会做一些营销字体，或帮忙做一下品牌Logo。不要满足于现有字体，也不要满足于拾人牙慧从素材网站上找现场的东西。主观上讲，一个有了进步的设计师总要有自己的东西、脱离了简单的模仿阶段进入到自主创意阶段;客观上讲，一幅图有它特定的、具体的设计需求，或许现成的东西都不能很精准的表达你的创意，也或许去找现成的东西的时间都能够用来发挥原始创意了需要具备色彩搭配与视觉统筹的技能

色彩搭配与视觉统筹

有不少美工的技术层面是不错的，但做出来的版面缺乏“品牌感”。有品牌感的页面里的商品，买家看了就比较信任，想买。所谓“品牌感”通常是公司老板或者运营人员的话语，用们自己的话说，就是色彩搭配和视觉统筹。色彩搭配能力是基础，不仅仅是“审美”这种个人化和感性的东西，还是“逻辑”这种严格的、有明确层次的东西，这是的理解。对于非科班出身的们，培养色彩搭配的方法最好是买几本大学美术专业的课程，或者听听大学里教授们是怎么讲色彩的电商美工必备的基本技能文章电商美工必备的基本技能由此延伸，美术里的三大基础，平面、色彩、立体，都可以学一学。将自己的工作经验与这些基础理论契合，是件很有意思的事情。

要熟练掌握后台代码、、文字如何上传

1网页布局与排版。

网店版面在进行了适当的色彩搭配和视觉统筹之后，就要进行布局和排版了。布局和排版，与色彩和视觉统筹是一体的，相辅相成的。除此之外，布局和排版还要考虑到买家的想法，买家点击某个东西方不方便，点进去之后是不是她想看到的东西，会不会有心理落差。以数据魔方等数据工具去考察布局和排版的质量，凭感觉是行不通的。

2网页代码应用基础。

主要涉及到一些简单的网页特效。网店对店铺设计人员特效能力的要求并不高，大多数东西都是后台现成的，但们在装修过程从有了某个关于特效的构思的时候，还是要会做出来。认为，一个高端的页面，是简洁的、明了的，特效很少或很平缓，美工要做的就是作出这些不那么夸张的特效电商美工必备的基本技能即使们使用一些美工工具替代了诸如DW之类的软件，也要会修改工具生成的代码，为自己所用。

3需要具备摄影基础

手里有台单反，周末去拍拍片。们每天修图，要知道自己修的这些图的光影来源。快门，光圈，曝光，焦距，都要理解。实际 *** 作一台相机，有助于加深们对的理解;学习摄影基础，有助于们修出更好的电商设计主要学一些设计类的软件，设计美工、网页制作、店铺管理都会涉及到。

如果是为了就业着想，可以联系一下实训型的培训机构，多积累一些项目经验，对工作帮助更大。

其实淘宝美工也属于网页设计的一个小类，他主要是针对电商网页进行视觉设计，也就是平时我们常说的网店装修。淘宝美工通过拍摄、修图等突显产品的特色，让店铺的装修风格符合所卖产品的风格，吸引顾客增加销量。

来源：阿多比设计学院学生作品

想要做淘宝美工，我们先来看看淘宝美工的招聘要求，再去分析如何自学成为美工。在招聘网站中查看美工的招聘信息，总结起来目前市场对于美工的要求大致有以下几点：

1、精通Photoshop等设计软件（招聘信息中所要求的的软件很多，但是每个招聘信息下都会写精通Photoshop）；

2、店铺整体视觉形象设计，处理；

3、店铺装修，主图、详情、首页页面设计，店铺营销广告设计等。

来源：智联招聘

那我们先来了解一下设计软件的学习，在这里我们就只选取Photoshop去分享工具的学习过程。

1、Photoshop初级

如果是初次接触PS，那我们需要了解PS的基础用法，所以下面我们会从界面介绍，基本设置，新建文件，视图 *** 作、保存，导出，移动工具去带大家一步步了解PS。让大家能够熟悉PS工具在平面设计中的常用功能及具体用法，能够使用PS进行基本的处理。

1、PS界面

初次接触PS，应该先简单了解这款工具的由来、作用以及功能。打开PS工具，简单了解界面的组成部分以及工具的作用。

2、常用功能及具体用法

1）图层关系及应用。图层就像是含有文字或图形等元素的胶片,一张张按顺序叠放在一起,组合起来形成页面的最终效果。

2）填色、魔棒抠图。抠图的方法很多，我们以魔棒为例去简单了解一下PS中的抠图。

3）选区和复制。选区的复制是我们经常需要使用到的功能之一，比如PS中绘制了一个图形,可以通过选区和复制多生成几个同样的图形。

4）锁套和羽化。套索工具内含三个工具，分别是套索工具、多边形锁套工具、磁性锁套工具，套索工具是最基本的选区工具，在处理图像中起着很重要的作用。羽化原理是令选区内外衔接部分虚化，起到渐变的作用从而达到自然衔接的效果，有助于所选区域和周围像素混合。

5）去污点工具、修补工具。这个工具精修中会经常用到，污点工具修饰人像面部瑕疵、图形中的污点等。修补工具可以拿画面中的某一块画面的效果，去修补另外一个地方的效果。

6）液化效果 、实战。用液化效果对人像进行处理，例如：瘦脸、瘦腿、放大眼睛等一系列的常规 *** 作，让效果更完美。

7）文字（字符和段落）。

8）形状裁剪、变形。

2、PhotoShop中级

当了解PS基础功能后，需要进一步了解图层关系、抠图、钢笔工具，橡皮工具，吸管工具，画笔工具等常用工具、蒙版、滤镜，从而熟悉图层样式，具备版式排版应用、海报合成设计的能力。

1）色阶、对比度、曲线。PS对比度调整包括使用PS自动对比度、色阶、曲线命令调整，色阶和曲线在PS的调色中起着非常重要的作用。

2）色相饱和度、色相平衡。每张都会有色相，饱和度，明度这三个属性，使用这些功能让的调色更加完美。

3）调色融合案例。通过案例去看看调色工具具体的作用有哪些，进一步熟悉工具的使用。

4）剪切蒙版。PS中一个非常特别、非常有趣的蒙版，用它常常可以制作出一些特殊的效果。

5）混合模式。可以用不同的方法将对象颜色与底层对象的颜色混合。

6）图层样式 1 、图层样式2。图层样式的功能强大，可以简单快捷地制作出各种立体投影、各种质感、光景效果的图像特效。

7）滤镜效果。主要是用来实现图像的各种特殊效果。

3、Photoshop高级

当熟悉了PS之后，我们可能会有更多的需求，比如制作海报、精修等。所以我们在一起通过实际案例去深入学习PS功能，从而达到利用PS制作的目的。

1）海报。海报设计是视觉传达的表现形式之一，设计者将突破、文字、色彩等元素结合去展示所要宣传的信息，通过版面的构成在第一时间吸引人们的目光。那海报的设计可以通过字体海报、**海报、手机海报、家具海报、饮料海报、光效海报、运动海报这些实际的案例去学习，从而强化 *** 作能力。

2）字体。字体都是由人工设计，它们是由各个字体设计师设计而成。所以如果找不到合适的免费字体，可以尝试一下自己设计字体。通过 Demon字体、 星辰字、立体字、字体变形去了解字体的制作方式。

3）排版配色。极致的让人看得赏心悦目，无论是它的排版、配色、内容还是创意的设计，都是关键性的元素。

4）精修图。精修可能是很多PS业余爱好者比较关注的内容，我们通过人物精修、婚纱修图的分享带大家学习如何修图。

学会了工具，再从各种修图技巧到专题页设计，全面了解淘宝电商设计的方法和技巧，完成淘宝店铺装修和设计。

1、修图

每个店铺所卖的产品都不一样，那修图的对象也就不一样，我们这边选取电器修图、首饰修图、化妆品修图、服装修图来简单了解一下，这类的电商修图步骤。

2、专题页

专题页是一个内容聚合页，将有效信息整合，让人留下深刻的影响，那淘宝电商通过专题页可以突显活动主题以及产品特点，从而促进店铺的销售。通过女王节专题页和618专题页去感受一下专题页的制作方法吧。

来源：阿多比设计学院学生作品

3、详情页

商品的详情页可以展示产品的信息信息，展示产品的细节，但是详情页并不只是产品详细的堆积，产品展示的顺序、内容都有方式方法可寻。

来源：阿多比设计学院学生作品

店铺装修也是淘宝美工的必备技能之一，在这里分享一个店铺装修的整个过程。

1、 免费开店、装修准备工作

想要开店，第一步应该是先申请卖家账号，熟悉卖家后台的 *** 作，做好店铺装修的知识储备。

2、 店铺版本介绍及板块尺寸

淘宝店铺页面是分版块进行装修的，那我们要先了解这些板块在店铺中显示在哪个位置，板块的尺寸是多少，才能设计出符合规范的板块内容。

3、素材上传、切图导出

4、 DW链接 *** 作

为了增加商品的点击量，促进销量，我们在装修淘宝店铺时，无论是首页、店招、详情页都需要添加各种链接，使用DW（Adobe Dreamweaver） 可以让我们比较顺利的完成这项工作。

5、 导航条设置

店铺设置有导航栏，导航栏中有宝贝、活动、新品等，其实就是为了方便买家进入店铺可以根据自己的需求快速的惊喜筛选，这样便捷的 *** 作更容易留住顾客。

6、 动图页头装修

动图页头可以让页面更加生动，也让浏览店铺的买家有更好的 *** 作体验。

7、 首页视频

店铺首页带给买家的第一印象的可以决定买家是否愿意继续浏览店铺，而很多店铺现在都会在首页放上产品的相关短视频，让顾客更直观的感受商品。

8、 页头满屏设计和 页头热点链接

页头满屏设计会给买家带来更直接的视觉冲击，页头中添加热点链接，可以增强店铺明星产品的曝光和销量。

9、 产品展示特效

产品展示的特效多种多样，比如视频、放大展示、鼠标移动特效等，选择合适产品展示特效可以突出宝贝的特点和亮点。

10、全屏轮播海报

准备好商品的，设置轮播触点样式,比如圆点、长方形、数字等，海报的轮播可以让停留在当前页面的买家了解更多产品。

来源：阿多比设计学院学生作品

11、页尾设计装修

很多淘宝店家只注重店铺页面头部的装修，而忽视页尾，其实不管是页头还是也为，在店铺装修的过程中都应该重视起来，提升页面的整体才可以提高网点的销量。而且店铺页尾都会添加很多有用的店铺信息，提高店铺的转换率。

以上大致按照淘宝美工的要求去分享了一个简单的淘宝美工的学习流程，想要做一个优秀的美工其实还需要了解一些设计基础与理论，这样才能让设计有道可寻，希望以上内容对你深入了解美工以及学习有所帮助。