乐学 如何学习电商网站设计
网站的开发建设是比较耗时耗力的，不但需要域名和服务器的搭建，网站内部，用户进入网站所浏览的内容更是为重要，关乎用户体验，但是针对于企业站来说，功能目的相似，但是需要不断的重新编写新的程序，时非常耗时耗力的，论坛也是如此，这时候大多站长都会选择二次开发。
不同类型的网站二次开发有哪些不同
1企业网站二次开发
网站的二次开发，故名思议，就是对原有的网站进行第二次开发，在互联网当中，企业站的功能都是相似的，大多的企业站只是需要多个页面，和板块，有对企业的宣传介绍，这时候假如网络公司需要建设一个企业站，而且不止一个，有多个站点，如果每个网站都重新编写，那么就非常麻烦，耗时耗力，这时候，就可以在一个写好的网站，作为一个模板，一般模板是也行业区分的，方便调用。当用个同行业的企业需要建站，就可以调用原理做好的网站，根据客户的需求等，修改网站的版面和内容，这时网站的整体框架是不需要动的，美工设计好版面样式，程序与再替换，修改网站内部内容，就可以成为一个全新的站的，网络公司使用这种方法，既方便快捷，也为用户节约成本。
2论坛网站二次开发
论坛的开发更为简单，因为网站都有免费的论坛模板，可以下载免费使用，比较知名的有discuz，phpwind之类的，都是可以免费下载使用，后台 *** 作也简单便捷。
3商城网站二次开发
电子商务的二次开发模板是需要购买的，因为程序比较复杂，而且自己也需要有程序员的长时间维护，功能复杂，数据量大，都需要专人维护修改。
这些不同类型的网站二次开发需要大家有一个比较全面的了解，因为这能够帮助我们更有针对性地做好网站开发的各项工作。如果您觉得有必要每个单项去了解的话，也可以尝试在网站上找找有没有相关项目的详细的教程。电商网站建设需要注意到的几点细节
1电子商务网站在外观设计时要注意整体的颜色搭配，切忌为了吸引浏览者而设计的眼花缭乱。往往简约清爽的风格适合更多的电商网站，因为更多的浏览者访问网站是为了购买产品，而非纯欣赏网站。一旦网站设计的过于胡里花哨会使得消费者摸不到头脑，觉得太凌乱，不能很快找到自己想要的信息。
2尽量使用白底黑字的呈现方式。现在很多电商网站喜欢使用背景色或者背景图，而使得网站浏览起来非常的不适，尤其是看文字的时候。如果是为了烘托逢年过节的气氛而设计的尽量是头尾或者两边留白处，中间依旧是以白底黑子为主，又或者是淡淡的底色。这样会让浏览器的眼睛感觉更加的舒服。
3广告特效避免太多。为什么电商网站的首页总是各种广告的聚集地？无论是两边广告、漂浮广告、上下浮动广告等等。一进去就会让浏览者觉得很烦，因为乱七八糟的东西太多了，影响到了浏览者的情绪。估计不少人也跟我一样有关广告的习惯，但是很多广告关了还是会 *** 出，这个就会越发的遭到浏览者的反感。所以避免在首页使用过多的广告特效是很明智的做法，依旧建议广告位设置更好。
4在线咨询的 *** 出影响用户体检效果。时不时的 *** 出一个在线客服是多么恼人的一件事，或许你在浏览某个产品的介绍时突然 *** 出，然后关掉了还会继续 *** 出。这严重影响到了很多浏览器者的购物欲，会使得很多人觉得这个网站怎么做成这样，更有甚者会干脆关闭了浏览器等。
从头开始学习创建一个电子商务网站
本教程将引导您逐步构建一个电子商务网站，在创建过程中，将使用Axure原型的多个核心功能：如母板、动态面板。我们将从头开始整个创建整个过程。
部件使用：、矩形、按钮形状、热区、动态面板、占位符、文本框、文本面板
交互事件：Onclick
动作：“移动面板”、“隐藏面板”、“设置面板状态为指定状态”、“将面板置于顶层”、“将面板置于底层”、“等待时间（毫秒）”
01
创建页首母板
1
创建新母板
第一步，创建一个有LOGO和导航的页首。在多个页面中都会使用到这个页首，所以将使用母板来制作页首。
在母板窗口，点击“添加母板”按钮。轻点新建的母板名称并修改名称为“Header”。
双击Header母板打开编辑窗口，在线框图窗口的顶部标签页，可以查看正在编辑的页面和母板。
如果标签页显示，正在编辑的页面为“Header”,那么Header母板己经被打开。
2
添加Logo
第二步从部件窗口拖部件到线框图中，双击部件导入压缩包中的“Logopng”。
导入提示是否自动调整对象大小，如果需要自动调整就选择“确定”。会保持原大小被导入，而不按部件的大小导入。
3
添加导航按钮
接下来，在Logo下，添加3个按钮形状部件。
向下拖动部件窗口下拉条，找出按钮形状部件（不是按钮部件）。拖3个按钮形状部件到线框图。双击每个按钮部件修改部件文本，并修改部件标签内容分别为：Men’s, Women’s, 和Sale
全选3个按钮形状，使用工具栏中的“线条颜色”设置按钮边线为白色（鼠标点击并在按钮上拖出一个选择区，即可全选3个按钮）。
4
添加水平线
添加一个水平线，将页首和下面的内容分开。
拖动"水平线"部件到线框图中，拖拽水平线左右两端的修改尺寸的控制柄，可以调整水平线的长度。用工具栏中的“线条样式”、“线条颜色”编辑样式为点虚线、颜色为蓝色。
5
在Home页面添加页首
从母板窗口拖页首母板到Home页面。定位在X:200;Y50
母板默认有粉色的遮罩，如果要关闭遮罩，可以在主菜单栏选择“线框图->显示母板遮罩”。
02
创建产品缩略图和“快速查看”按钮
1
添加产品缩略图
Home页面，拖入部件并交部件放在页首母板的下面。
双击部件导入 “Jeans1-1png”文件，添加第二个部件，导入“Jeans2-1png”文件。
按住shift键并拖拽一角，调整比例为宽150；高225。
2
添加“快速查看”按钮
拖一个按钮形状到第一张产品上，双击按钮形状修改文本为“快速查看”
“快速查看”按钮只有在鼠标经过时才会显示。所以要将转换为动态面板才可以动态的显示或隐藏按钮。右键按钮形状，快捷菜单选择“转换->按换为动态面板”，将放入动态面板中。
3
编辑名称并隐藏快速视图按钮
在动态面板管理窗口，修改动态面板名称为：QuickViewButton。修改名称可以让面板在设置交互时更易辨认。
右键动态面板，快捷菜单选择“编辑动态面板->设为隐藏”，将按钮设置为默认隐藏。这时动态面板会变成。
4
动态显示按钮
使用“鼠标移入时”事件，设置当鼠标经过产品时显示“快速查看”按钮。
点击产品，在部性属性面板窗口的交互标签，双击“鼠标移入时”事件添加用例，打开用例编辑器。
5
添加“显示快速查看按钮”动作
左边栏中，选择“显示面板”。然后在右边栏中选中QuickViewButton复选框，配置显示的面板，点击确认。
使用鼠标移出时事件隐藏“快速查看”按钮，交互会出现错误。因为当鼠标经过“快速查看”按钮时，鼠标移出时事件就被启动，“快速查看”按钮将被隐藏。
可以在产品四边环绕图像映射区，再在图像映射区域上使用“鼠标移入时”事件，就可以隐藏“快速查看”按钮了。
映射区是可以设置交互和注释的透明区域。
6
创建“热区”
在产品上拖入一个热区，热区的四个边要比产品的四个边留多10px。
右键快捷菜单，选择“顺序->置于底层”，将热区放到产品和动态面板的下面。
7
使用热区隐藏动态面板
选中热区，双击部件属性窗口交互标签中的“当鼠标移入时”事件。
用例编辑器中，左边栏选择“隐藏面板”动作，右边栏中点选QuickViewButtont复选框，选择确定。
03
详细产品 *** 出面板和播放器
1
创建详细产品 *** 出面板
添加矩形部件到线框图，修改矩形大小为：600450，将矩形放在线框图页面的中间。
2
转换为动态面板并设置为隐
当“快速查看”按钮被点击时，详细产品 *** 出面板要动态的显示，所以将详细产品 *** 出面板转换为动态面板。
右键矩形，快捷菜单选择“转换->转换为动态面板”，并将转换的动态面板命名为“ProductPopup”。
在“快速查看”按钮被点击前，详细产品 *** 出面板要被隐藏，所以右键动态面板，快捷菜单选择“编辑动态面板->设为隐藏”。
3
快速查看按钮添加显示面板
现在给快速查看按钮添加交互，当快速按钮被点击时，显示详细产品 *** 出层
动态面板管理窗口，双击QuickStartButton面板下的State1(状态1)，打开快速查看按钮编辑页，选择“快速查看”按钮，在Onclick事件中添加用例，设置用例动作“显示面板”，并将显示面板配置到显示ProductPopup。
4
关闭按钮添加隐藏面板动作
下一步，在“详细产品 *** 出面板”添加关闭 *** 出面板按钮
动态面板管理窗口，双击ProductPopup面板下的State1(状态1)打开状态编辑页，添加占位符在右上角。调整尺寸为：4040。提示：在工具栏可以编辑部件尺寸。
placeholder面板OnClick事件用例，用例设置“隐藏ProductPopup”动作。
5
添加产品大图
在这步中，添加当点击缩略图时，产品播放的动画视图。
编辑详细产品 *** 出面板，拖入部件到线框图，双击导入“Jeans1-1png”。将放到左上角。
6
添加产品缩略图
拖入3个部件到的下方，导入Jeans1-1, Jeans1-2, 和Jeans1-3，做为缩略图。拖拽边框调整尺寸时，按住shift键，保存按比例缩放。
7
建立播放动画窗口
我们下面将使用到一个叫“开窗”的技术，即我们将一个动态面板放置到另一个动态面板内。利用外部面板的尺寸，控制只显示里面动态面板的一部分。
右键产品大图，快捷菜单选择“转换->转换为动态面板”，将产品大图转换为动态面板。在动态面板编辑器中，重命名面板名称为““SlideshowWindow”。注意：部件属性窗口的标签栏也自随着面板重命名自动修改了名称。
8
将多产品转换为动态面板
动态面板编辑器中，打开SlideshowWindow面板的State1(状态1)，在Jeans1-1的右边添加Jean1-2和Jeans1-3。
要使用这三张在窗口中动态的切换，我们将三张转换为动态面板。
全选三张（按住shift键点击每张，或者点击拖动鼠标圈选所有）右键，快捷菜单选择“转换->转换为动态面板”，将三张转换为动态面板。在动态面板管理窗口重新命名动态面板为“SlideshowContent”。
9
添加OnClick事件移动动态面板
下一步，添加交互让SlideshowContent面板从左边移动到右边。
返回ProductPopup面板，点击第一个缩略图添加OnClick事件用例。在用例编辑器中，选择"移动面板"动作，设置移动面板SlideshowContent到坐标：X0；Y0。注意：要设置为移动到（绝对定位），而不是移动在（相对定位）。然后设置动画“摆动”，时间500ms。
10
重复设置另外两个缩略图
在另外两个缩略图上重复设置Click事件。因为的宽度是240px,所以第二个缩略图的事件动作设置为“移动SlideshowContent到 -240x,0y”。第三个缩略图动作设置为“移动SlideshowContent到-480x, 0y”。
如果想查看交互效果，可以生成原型，播放动画己经可以显示了。
04
“加入购物车”
1
创建“加入购物车”按钮
拖入按钮形状部件到 *** 出面板的右下角。在工具栏将按钮颜色设置为蓝色，字体颜色设置为白色。按钮形状文本修改为“Add to Cart”。
2
创建购物信息 *** 出面板
下一步，创建点击“Add to Cart”按钮时显示的“处理中”和“己添加”提示信息。
拖一个矩形部件到 *** 出面板的中间。设置背景色为淡灰色；字体颜色为黑色。编辑矩形文本为“Processing（处理中）”。
右键矩形部件，快捷菜单中选择“转换->转换为动态面板”。右键动态面板，快捷菜单选择“编辑动态面板->设为隐藏”
3
添加“Added to Cart”状态
命名动态面板为“MessagesPopup”，并设置状态1名称为“Processing（处理中）”。
右键“Processing”状态，快捷菜单选择“添加状态”，添加状态2，重新命名状态2为“AddedToCart”。
4
创建“added to cart”信息
打开 “Processing”状态，右键点击矩形，快捷菜单选择“复制”。下一步
打开“AddedToCart”状态，右键空线框图，快捷菜单选择“粘贴”。
编辑按钮属性 - 设置当确认选项己经被添加到购物车时，按钮填充色为绿色。双击编辑按钮文本为“Successfully added to Cart（己成功加入购物车）”。
5
设置加入购物车交互
下一步，设置交互：点击“add to cart（加入购物车）”按钮，显示“Processing（处理中）”1秒钟，再显示“Added to Cart（己成功加入购物车）”1秒钟，然后隐藏 *** 出面板。
返回ProductPopup面板，选中““Add to Cart（加入购物车）”按钮。双击OnClick事件添加用例，打开用例编辑器。在这个用例中要添加5个动作。
6
添加显示/隐藏购物信息 *** 出面板动作
1设置“MessagesPopup”面板到 ”Processing”状态。在右下角，在进行动画的下拉选单选择“淡入淡出”。注意：“设置面板到指定状态”动作将自动显示面板,所以不需要再添加“显示面板”动作。
2等待1000毫秒，这个动作设置第一个面板在第二个运作发生前，持续显示1秒。1000毫秒=1秒。
7
切换购物信息 *** 出面板状态
3设置面板状态到“AddedtoCart”。设置“MessagesPopup”面板从“Processing”状态切换到“AddedtoCart”状态。勾选“MessagesPopup”复选框，在复选框下方的“选择状态”下拉选单中，选择“AddedtoCart”状态。
4再次等待1000毫秒。
8
添加隐藏购物信息 *** 出面板动作
5隐藏面板。勾选MessagesPopup复选框，动画选择“淡入淡出”。
点击“确定”。生成原型并测试，新手电子商务网站制作教程部分介绍完毕。
分类是把商品按照固有属性、适用人群、使用场景等座位区分标准，把符合统一标准的商品归类，提高查找商品效率的一种手段。
按照分类查找商品是人类最常用到的一种思维方式和习惯，这种习惯主要来源于人们在线下购物的方式。线下商场的商品都是实体的，需要占用三维的物理空间，无法像在网上一样可以通过搜索把商品相关信息展现在用户的眼前，商品是不会动的，用户需要改变自己的地理位置去走到商品所在位置，才能拿到商品，为了能够让用户快速找到自己的商品，商场就会按照一定的标准给商品分类，符合同类标准的商品会放在同一片区域，百货商场里面1楼是化妆品、2楼是女装、3楼男装、4楼箱包、5楼文体用品……在电商刚兴起的时候，PC端的网站就是很大程度上借鉴了线下楼层的这种概念。
由于线下购物习惯的存在，分类导航始终是用户查找商品的一个重要入口，如何更高效的利用分类导航带来更多的成交，这是在电商app设计中不可忽略的一个课题。 经过一些用户调研发现，用户在明确自己要买的商品大类但不知道具体商品型号的时候，90%的用户会通过类目去查找商品。
设想一个使用场景，用户想买一些零食吃，但不知道具体买哪一种。 我们来看下天猫怎么做的？如果通过类目导航查找，在零食的类目下会有多种零食的种类帮助用户做出选择，经过三级类目的引导，用户可以轻易选择买哪个品类的零食；假如用户通过搜索路径，在“零食”的搜索结果页，天猫也在顶部增加了一个分类展示，企图通过分类引导的方式帮助用户快速完成任务。我们再看一样京东，京东在分类的上部分放了一个活动banner，这样的话用户又多了一种选择：反正也不知道具体买什么零食，刚好去优惠活动去看看。
在分类页面的设计样式上，基本上都采用了标签＋盒子的形式，只不过标签的样式采用了横式和竖式。一级类目数量不是很多的情况下，可以优先考虑横式标签样式，这样能够把更多的空间留给二级类目；在一级类目数量比较多的情况下，建议采用竖式标签的样式，这样方便用户快捷的进行一级类目的查找。看下面的例子，左边的例子采用横式的，右边的例子采用竖式的，在类目数量非常大的情况下，显然右边的样式会更高效一点。
在一些商品数量还不是很庞大的购物app上，大部分的会在首页的顶部栏额外增加一个标签式的分类导航，提升分类导航的层级，更好的引导用户利用分类导航去找到自己想要的商品，由于每个二级分类的商品数量不是很多，可以把多个二级类目的商品全部排列在一级类目的标签页下面（仅通过滑动就可以切换到下一个类目，如下图中右图），降低了用户的二级类目切换成本，提升用户逛的沉浸感，增加商品成交量。
随着消费水平的提高，品牌因素对用户选购商品会占有越来越大的比重，按照品牌来分类也越来越多的出现在购物类的app中，如图中左边的例子，可以直接品牌列表来查找自己的要找的品牌；右边的例子在一级类目下面集成了品牌推荐，这也是对用户思路的一种引导方式。
在分类导航的逻辑中，按照商品属性分类式最基本的分类方式，但并不是唯一的方式，我们可以尝试以商品属性分类为基础＋其他纬度分类结合的方式，以求能够覆盖更多的用户使用场景，响应更多的用户需求；分类导航页还渐渐的成为运营活动的展示窗口，针对类目的运营活动在这里放置一个入口再合适不过了。例如下图左边的案例，增加了以商品使用场景（送礼）为纬度的分类，和以商品属性为纬度的分类并列成为一级类目；下图右边的案例就针对该类目放置了专题活动（值得买好物）的入口。
经过上面的案例可以看出来：
1、类目导航最高效的适用场景是：用户有购物欲望，但无法确定所要购买具体商品型号；
2、按照商品属性分类仅仅是类目导航的一个基本的维度，我们还可以尝试从使用场景、使用人群、品牌、个性推荐等维度进行更多的分类尝试，以便覆盖更多的用户场景；
3、在类目导航页增加类目运营活动是提高转化率的一个有效手段，值得尝试。
4、要考虑好上下文的关系，点击二级类目进入到商品列表以后，较为合理的筛选与排序 *** 作就是必不可少的动作了。
作为设计师的我们，在思考设计实现方案的时候一定记得从业务逻辑出发，多跟运营以及产品沟通，挖掘到更多的需求，这样才能更有效的用设计工具解决问题。
电商海报设计教程
1前言：
节日促销海报设计需要根据节日色彩定位
2设计灵感:
没事的时候多点看人家的大师的作品，逛淘宝去看大店的设计，收集一些,激发你的创作
3搜集素材:
找到符合感觉的，做筛选
什么是符合感觉的？
画面的颜色，构图，展现的素材、材质等，灵感的提示。
4制作:
①ps新建文档1920x600px72dpi。
②搭建场景,天空和云彩拼合。
5场景大致搭建好，色彩感觉有点深暗，调色有很多方法，这里我采用快捷点的，新建图层填充282背景，进行叠加
局部建筑物的色彩不够，再用套索工具勾取，ctrlM曲线调整。
6好好运用灵感来源上面的，也是素材之一的哦，当然这有关乎像素的问题，这个适合电商海报上制作，一些好看的素材，平时要注意收集的,待作图的时候有需要的可以拿出来
把气球、福包、蝴蝶造型剪纸扣下来，需注意哦，像气球的线，这个不需要抠出来的，后面自己用钢笔画出来的
再调整一下放到画面上的展示位置，不够的地方需要自己截取部分补上，再加一下动感模糊，高斯模糊。
7文字排版选择好看常用的字体，注意文字之间的间隙，行距间的间距，色彩搭配这些等等。这个这里不再详解。
0条评论