电子商务网站的基本功能

在互联网的发展中，单凭现在移动端占据绝大市场的使用数据，以及微信社交平台的流量来看，微营销也将成为未来的发展趋势，那依靠微信平台开发的微商城必然也将成为主流，毕竟现在的电商平台已经基本被踏平，小企业根本就分不到一杯羹，那开拓新渠道也就成为企业想要快速发展的出路，但是相信还是有很多人在面对新的发展渠道时，还是有很多的顾虑，那就来详细的分析一下，微商城的开发应该包含什么功能：

微商城用户互动功能

微商城开发时，要把微商城作为企业的思想，只需要通过二维码扫描就可以成为微商城的粉丝，做到用户积累，企业可以通过微商城与用户进行互动，例如定期举 行活动，发放优 惠券，用户问答等，通过这一系列的互动加强用户对企业的了解度，认知度，信任度。

微商城的信息推送功能

信息推送功能是微商城开发的功能一直，通过推送功能，可将企业新闻动态，产品信息，优 惠活动信息及时发送给用户，通过微信公众号定制开发，以图文形式推送给企业粉丝，达到宣传曝光，网络营销的目的。

微商城智能客服系统

企业开发定制智能客服系统后，通过系统，用户可根据自身需求进行咨询，同事企业可以减少人力成本，智能客服的上线，可以弥补企业无法24小时在线的弊端。

微商城移动官网

移动官网基本成为企业微商城的流量入口，用户通过二维码一键扫描就可以进入企业官方网站平台。

移动电子商务时代是时代发展的主流，而传统企业选择使用商城系统来打造专属的微商城，那么需要注意的一点就是在先通过微信公众号定制开发在根据需求针对微信小程序开发，要结合当下的热点来引流。比如现在正流行的就是微信商城分销系统，这样的微信商城系统功能主要是企业通过将客户发展成为线下的分销商，将企业内的商品分享到各类移动社交平台进行分销，协助企业获得更多的利益。

我们是深蓝网络：我们承接网站建设、网络推广、app、小程序开发、小程序游戏、商城定制开发、微信代运营、智慧校园、智慧餐厅、智慧停车场、智慧小区。

本文有6个章节，从工作流程、网站种类、网站组成部分、技术原理、设计规范等全面总结了网页设计的基础知识，接近两万字的干货，新手看完就可以入门了。

一、网页设计是什么？

网页设计也被称为 Web Design、网站设计、Website design、WUI 等。它的本质就是网站的图形界面设计。虽然现在我们常使用移动端上的 APP 来获取资讯，但是显然基于个人电脑平台的网站上网方式陪伴我们的历史要比手机久很多：从1987年钱天白教授向德国发出第一封电子邮件到2000年搜狐、新浪、网易在美国纳斯达克挂牌上市，再到现在网站遍地；中国的网站高速发展了近三十年。我是在小学开始去网吧「上网冲浪」的，那时的电脑屏幕非常小，分辨率只有800×600像素（对比一下，iPhone8的分辨率是750x1334px），网速也很慢，经常掉线或者加载失败。那时的网站性能和体验都不好，而现在网站设计和过去已经有了巨大的变化：注重用户体验、注重页面动效、富媒体等设计让如今的网站体验并不比软件和手机 APP 差。加上个人电脑的普及，网站仍然是人机交互中非常重要的平台之一。那么作为 UI设计师我们就必须掌握网站设计的规范和理解网站运行的原理，才能更好地驾驭这个平台。今天就向您好好说道一下网站必须懂得的那些事儿。

二、工作流程

首先让我们来看一下网站设计的工作流程吧，除了之前介绍过的用户研究、撰写产品需求文档、市场文档、做竞品调研等工作之外，与设计师密切相关的网站项目流程可以分为原型图阶段、视觉稿阶段、设计规范阶段、切图阶段、前端代码阶段、项目走查阶段六个阶段。每个阶段都需要设计师参与和了解，千万不要只在意视觉稿这个阶段，有很多前期与后期工作同样需要得到我们的重视。好，让我们一个一个来了解它们吧。

1. 原型图阶段

原型图阶段中设计师需要和产品经理沟通需求，这时要注意，并不是产品经理向设计师下发需求，而是需要相互就自己擅长的方面进行沟通。视觉方面具体呈现也许设计师会有更好的方式，这时需要在设计之前与产品经理达成一致。

△ 构建网站原型图（工具：Axure RP）

2. 视觉稿阶段

视觉稿阶段就是我们要根据原型图确定的内容和大体版式完成网站的界面设计了，在设计网站的时候，我们需要一些图像和灵感的素材。比如做世界杯专题时，我们除了收集很多素材之外，也可以设计一个「情绪板」（Mood Board）。简单说情绪板就是将一些与主题相关的资料和素材拼贴在一起，这样可以更好地指引我们整个需求的设计主题和大体感觉。另外，很多网站的头部通常需要主视觉来抓人眼球，这时可能会使用到需求方提供的明星照片、主题素材、LOGO、主视觉PSD等，那么用素材和这些需求方提供的资料进行混合并拼出让人觉得震撼的头部视觉就是我们的目标了。主视觉下面的信息排布更强调合理性，这时也需要和产品经理沟通从后台调取的图片尺寸、标题字段长度等，然后根据这些要求完成页面信息部分的设计。总之，设计过程中需要我们不断思考和沟通才可以完成一个比较棒的视觉稿。

△ 视觉稿设计阶段（工具：Photoshop）

3. 设计规范

当视觉稿通过后，很多设计师可能不会主动去做设计规范。其实每一个可迭代的产品都需要设计师来总结设计规范，设计规范就是所有页面中共性的东西，比如说字体不同的大小、图片的尺寸、按钮的样式等，这些共性也是用户访问网站时会理解成固定概念的凭证。比如同样的分享功能如果采用两种截然不同的样式就会让用户困惑。那么设计规范主要也是在约束设计师我们自己，在用户有限的记忆力中减少思考的成本。同时，设计规范也可以保证同一个项目的不同设计师都能输出一样风格的设计来。最后，设计规范对于设计师个人来说也是对项目影响的一个佐证，可以证明你的思考和你在项目中的地位。所以我认为设计师应该主动去做设计规范和项目总结。设计规范如何去做？其实设计规范就是把主要页面的元素固定成统一元素即可。具体来说一个产品的设计规范应该有：字体规范、主体色规范、图表规范、图片规范等不同分类。

△ 视觉规范（工具：Photoshop）

4. 切图

网页设计师通常不需要为前端工程师切图。因为前端工程师通常需要掌握 PS 软件技能。如果遇到特殊情况需要我们切图时，我们可以使用诸如 Cutterman、Zeplin 等切图插件中的 Web 选项为前端切出网站所使用的图片。

△ 从PSD中提取出来的切图（插件：cutterman）

5. 前端代码

前端工程师会用代码重构我们设计的页面，把图纸变为静态页面。然后和后端工程师对接调取数据接口，一个网站就活了起来。工程师们为了方便了解网站是不是达到了我们要求的数据，也会进行埋点。埋点就是在页面代码里插入一些统计代码，方便我们之后确定哪些页面访问量高，哪些没有达到预期。在此后其实还会有测试工程师介入来发现编译完的网站是否存在一些漏洞等。

△ 前端工程师代码编译（工具：Notepad +）

6. 项目走查

网页设计完成后还需要设计师进行项目走查，来确定网页还原度是否有问题。如果发现有和设计稿出入很大的，就需要要求前端工程师进行调整。这个步骤非常重要，因为网站的成品才是我们最终的输出，不要认为设计稿很漂亮而实现后的页面就不需要我们负责了。

△ 将实现后的截图和设计稿进行比对（工具：Photoshop）

三、网站种类

网站的分类按对象来划分可以分为 To C端和 To B端两种。To C端就是面向用户和消费者，例如门户网站、企业网站、产品网站、电商网站、游戏网站、专题页面、视频网站、移动端H5 等，均是面向用户和消费者的产品。由于是面向用户和消费者，所以设计上一定要可以吸引人，并且以用户为中心考虑体验设计。而 To B端作为一个需求量很大的类别，其实往往被设计师所忽视。什么是 To B端项目呢？比如电商网站供货商的后台、Dashboard、企业级OA、网站统计后台等这些面向商家和专业人士的网站就是 To B 类网站项目了。这些项目的要求和 To C端网站的要求大相径庭：To B 类项目最重要的是效率而不是体验，因为说白了我们在设计使用者工作的工具，我们在设计时必须首先要保证操作者可以高效地完成他们所需要完成的工作。那么让我们来了解一下网站的不同门类吧。

1. 门户网站

门户网站国内比较知名的有新浪、腾讯、网易、搜狐；国外比较知名的如 Naver、Llinternaute 等。我们可以看得出，门户网站都是大而全包罗生活万象的。比如腾讯网就有新闻、财经、视频、体育、娱乐、时尚、汽车、房产、科技、游戏等不同频道。门户网站的门槛很高，必须要有雄厚的实力才可以建立起一个门户网站，而门户网站需要的设计师数量也惊人。首先门户网站需要产品方向的界面设计师以迭代的方式维护迭代网站首页、二级页面、底层页等网站基石。然后需要各个频道的设计师来处理日常需求：比如巴黎时装周需要负责时尚频道的设计师来设计对应的专题、世界杯小组出线需要负责体育频道的设计师来设计对应的专题等。地球上的每一天都有大事发生，那么门户网站中的设计工作就不会少。另外，具体对接频道的设计师也需要有一定擅长之处：比如对接体育频道的设计师起码应该熟悉足球篮球等体育项目、时尚频道的设计师要懂得各个大牌的设计风格、佛学频道的设计师需要懂得基本的佛学知识和忌讳、文化频道的设计师需要对传统文化有所涉猎。所以基本上门户网站的设计师可以分为产品组和频道组两种。

△ 韩国门户网站Naver

2. 企业网站

每个企业都需要有一个网站来对外展示自己的能力、介绍自己的产品等。现在接触一个陌生的企业时，很多老百姓都会上网搜索一下其官方网站验证真伪。网站已经是中小企业的标配了。企业网站设计时通常会有网站首页、公司介绍、产品中心、公司团队、在线商城、联系我们等这几个模块，企业网站会展示很多诸如公司环境、团队成员、企业文化等实际的照片，配合一些资料进行设计。企业网站通常也追求所谓「高端」、「大气」、「上档次」的风格，也就是为了达到让消费者认同品牌这个要求。所以如果我们接到了企业网站的设计需求，不妨多去浏览参考一些更加大牌的企业网站作为竞品来参考。

△ 美国通用公司官网

3. 产品网站

从苹果公司的 iPhone 介绍页到小米手机8的介绍页，我们会发现一种新鲜的产品营销模式，就是产品网站。设计这类网站的内容主要是该产品的工艺、技术、设计、特点、构造、使用场景等。这样的产品页希望可以让用户有沉浸感，所以一般来说都是使用全屏布局，然后配合一些如视差滚动等方式让我们感觉到这个产品的极致精细。由于中国互联网和产品设计发展很快，所以产品类网站设计需求一定会越来越多。

△ 苹果公司产品介绍页

4. 电商网站

电商设计师也属于网页设计师吗？是的。如果按照平台细分，无疑电商设计师所在的平台大部分属于网站。以淘宝、天猫为代表的电子商务发展得太快了，以至于从内蒙的牧民到海南岛的渔民，甚至台湾、日本、东南亚的商人都开始在中国电商平台上开店铺了。店铺其实本身属于平台本身的页面。但是为了增强每个店的个性，平台为商店开通了一些页面自定义的装饰功能，比如宝贝详情、店铺排版、banner头图设计等。这样商铺有一定权限在平台规定的范围内使用图片和一部分css样式代码来装饰自己的店铺，电商设计应运而生。虽然带着镣铐跳舞，但是有很多店铺因为设计精良而能带动销售。那么电商设计师当然就变得非常重要了。

△ 淘宝网首页

5. 游戏网站

游戏是一个巨大的产业，很多公司的收入大半壁江山都来自游戏产业。那么除了游戏需要制作精良之外，游戏的官网也必须设计精美。不要忘记，每一个玩家都需要访问你的游戏官网才能完成下载、充值、社交等重要操作。国外游戏网站比如暴雪娱乐公司（https://blizzard）的官网设计得极其精美，每个游戏的官网都是一个精品。比如魔兽世界、星际争霸2等游戏官网，头部都是视觉冲击非常强烈的动画。然后网站界面的元素都带有游戏的风格，仿佛登录这个网站你就在游戏之中了。

△ 暴雪公司星际争霸2游戏官网

6. 专题页面

当然不管是电商还是门户网站，在节日都会需要设计师来设计一些专题页面增加曝光。比如儿童节、情人节、母亲节、圣诞节等节日往往会有促销、专题报道等各式活动。专题设计生命周期很短，上线后基本过了流量的那个点就基本没用了。所以我们找不到前几年的618或者双11专题页面，因为过了特定的时期专题页面就无人问津了。所以在那么短的生命周期怎么抓住人的眼球？当然不能使用现代主义设计那种性冷淡风格，而应该在头部尽量刺激用户，用刺激对比强的色彩、复杂立体的造型、冲击感强的文字吸引用户来看。毕竟每个人可能只会看一次，不能放过这个机会。所以专题设计和产品设计正相反，专题设计必须刺激。

△ 极有家淘宝专题页面

7. 视频网站

视频网站的访问量惊人，并且用户的黏着度更高。很多视频网站除了购买版权之外还有很多 UGC 内容。多说几句，UGC（User Generated Content）是指用户产生的原创内容，很早之前 web1.0时代用户主要是单向浏览网站，web2.0提出的 UGC 概念就是说用户不仅在浏览也会上传内容。那么视频网站为什么会火呢？首先要感谢宽带的发展。在今年我们国内点击视频就立马可以播放了，而在几年前需要等待几分钟才可以加载够缓存。视频网站的设计主要是要考虑应用场景：视频是用户主要观看的区域，所以视频区域首先要足够大，另外颜色应该以暗色为主，因为亮色会干扰到用户观看视频。然后其他的区域图片比例应都为16:9的视频尺寸，方便后期编辑在后台添加。视频网站的设计师同样也可以分为产品组和运营组两个种类来处理产品方向和运营方向的不同需求。

△ 腾讯视频播放页面

8. 移动端H5

你一定在朋友圈被《穿越未来来看你》、《淘宝造物节》等 H5 刷过屏吧？平时我们经常被这种好玩儿的 H5 刷屏。其实 H5 全称是 HTML5，并不是仅仅指移动端，而是网页前端的开发语言，由于约定俗成的概念，我们现在常常把手机中的集合视频、动效、互动的这种营销形式称为 H5。其实它的本质是运用网页技术运行在手机浏览器或内置浏览器内的网页。随着技术日新月异的发展，H5 显得越来越有传播价值和份量。微信、浏览器等平台级产品在手机端中火爆促进了依靠入口而传播的 H5 的发展。如果设计出色，你的项目可能会在朋友圈产生病毒传播的效果。

△ 使用前端语言编译的适合手机浏览的H5界面

移动端H5尺寸

设计移动端 H5 项目的时候，我们一般以用户量较高的 iPhone6/7/8的尺寸：750x1334px为准，然后我们要在顶部预留出微信或者浏览器导航区域。主要内容区域就可以自由设计了。一般H5的操作是上下滑动。字体方面使用苹方字体，并且字号设置为24PX以上，渲染方式设置成锐利。�...

很多人对于专业的报考还是很迷茫的，下面小编就这个内容整理了关于专业方向的分析，快来阅读了解吧，希望对你有帮助。

二十一世纪是信息化的时代，在全球信息化大势所驱的影响下，信息服务业已成为21世纪的主导产业，正引领着我国的电子商务不断的完善和发展，我国的电子商务市场将成为各个国家和各大公司争夺的焦点。

2006年，是我国电子商务继续快速发展年，电子商务已成为我国经济增长助推器，他的广泛应用降低了企业经营、管理和商务活动的成本，促进了资金技术、产品、服务和人员在全球范围的流动，推动了我国经济全球化的发展。如

2006年世界电子商务交易额达12.8万亿美元，占全球商品交易的18%。目前，电子商务的应用已经成为决定企业国际竞争力的重要因素，总量规模也不断化，并影响着未来商业发展模式。面对世界电子商务的发展和变化，电子商务人才的紧缺使电子商务将面临着严峻挑战。

虽然我国电子商务发展起步较晚，但势头较强，政府也在积极推进电子商务的发展，政府级电子商务总体框架基本确立，调查显示，目前中国1000万中小企业中，已有1/4的企业开始尝试并熟练运用电子商务工具;有关人士预测，随着国内新一代人的成长，到2006年中国将会超过美国成为拥有最多互联网用户的市场，这也表明进行电子商务的企业大概会在明年迎来一个快速发展的高峰到2007年，中国电子商务市场总体规模将会达到1.7万亿元，而B2B电子商务市场规模将会达到1.69万亿元。到2009年，中小企业信息化投资将突破2300亿元。据专家预测，中国电子商务这几年的发展速度在40%，未来几年可能会超过50%。

从以上数据显示，我国的电子商务正如火如荼的发展，一些成功的事例表明，中国的电子商务大有希望，海尔电子商务的成功就是其中的一例。然而，行业电子商务将成为下一代电子商务发展主流，特别是在加入了WTO后，中国市场将更加开放，企业导入电子商务的比例将持续增加，中国将成为电子商务在全球发展最快，潜力最大的地区之一。

电子商务专业岗位群细分

现在读的电子商务专业大部分学生提出，不知道自己将来可以从事哪些工作，对于自己的就业前景一片迷惘，找不到在电子商务行业自己喜欢的方向，没有明确的岗位群，但是，在电子商务行业对岗位还没有进行过认真的细分，只是对人才进行了区分，一般来说，电子商务人才分为技术型人才、商务型人才和综合管理型人才，根据调查、综合结果，我们在以上三类人才基础上对就业岗位进行进一步细分，并对不同岗位做了简要介绍：

(一)技术类人才岗位方向细分：

1、电子商务平台设计(代表性岗位：网站策划/编辑人员)：主要从事电子商务平台规划、网络编程、电子商务平台安全设计等工作。

2、电子商务网站设计(代表性岗位：网站设计/开发人员)：主要从事电子商务网页设计、数据库建设、程序设计、站点管理与技术维护等工作;

3、电子商务平台美术设计(代表性岗位：网站美工人员)：主要从事平台颜色处理、文字处理、图像处理、视频处理等工作。

(二)商务类人才岗位方向细分：

1、企业网络营销业务(代表性岗位：网络营销人员)：主要是利用网站为企业开拓网上业务、网络品牌管理、客户服务等工作。

2、网上国际贸易(代表性岗位：外贸电子商务人员)：利用网络平台开发国际市场，进行国际贸易。

3、新型网络服务商的内容服务(代表性岗位：网站运营人员/主管)：频道规划、信息管理、频道推广、客户管理等。

4、电子商务支持系统的推广(代表性岗位：网站推广人员)：负责销售电子商务系统和提供电子商务支持服务、客户管理等。

5、电子商务创业：借助电子商务这个平台，利用虚拟市场提供产品和服务又可以直接为虚拟市场提供服务。

(三)综合管理人才岗位方向细分：

1、电子商务平台综合管理(代表性岗位：电子商务项目经理)：这类人才要求既对计算机、网络和社会经济都有深刻的认识，而且又具备项目管理能力。

2、企业电子商务综合管理(代表性岗位：电子商务部门经理)：主要从事企业电子商务整体规划、建设、运营和管理等工作。

通过以上显示，电子商务行业对人才的综合性提出了很高的要求。比如说技术型人才，它包含了程序设计、网络技术、网站设计、美术设计、安全、系统规划等知识，又要求了解商务流程，顾客心理和客户服务等。技术型人才要求有扎实的计算机根底，但考虑到最终设计的系统是为解决企业的管理和业务服务，又需要分析企业的客户需求，所以该类人才还应该对企业的流程，管理需求以及消费者心理有一定了解，而这将成为电子商务人才的特色所在。商务型人才在传统商业活动中都有雏形，不同之处在于他们是网络虚拟市场的使用者和服务者，一方面要求他们是管理和营销的高手，同时也熟悉网络虚拟市场下新的经济规律;另一方面也要求他们必须掌握网络和电子商务平台的基本操作。综合管理人才则难以直接从学校培养，而是市场磨练的主物。

就业岗位对电子商务专业学生的能力要求

根据社会所需人才来确定电子商务专业学生所具备的能力，对本专业的学生来说，是就好业的一切前提，那么就必须知道电子商务专业到底须具备哪些能力和知识，在电子商务人才类型及岗位分析的基础上，我们可以从以下四个层次来分析电子商务岗位所必须具备的能力要求：

第一层，电子商务建立在网络硬件层的基础上。在这一层次需要了解一般计算机、服务器、交换器、路由器及其它网络设备的功能，知道有关企业网络产品的性能，如思科;懂得路由协议，TCP/IP协议等，熟悉局域网知识，网络设计、安装、维护和管理的能力。这一层次，思科的CCNA、CCNP、CCIE认证在业内具有权威性。一般来讲，电子商务课程体系涉及这一层次的东西较少。

第二层，电子商务实施的软件平台。在这一层次涉及服务器端操作系统，数据库、安全、电子商务系统的选择，安装、调试和维护。比如微软的Windows操作平台上，服务器操作系统目前有server2003;数据库有SQL server;电子商务应用有commerce server、content management Server;安全保证有ISAserver等等。在这一层次，微软的诸多认证如MCSE、MCAD、MCSD、MCSA、

MCDBA等无疑对知识的掌握有帮助。但也不是电子商务专业学习的重点，和电子商务实施平台联系较大的岗位有网站开发等。

第三层，电子商务应用层。在这一层次，涉及商业逻辑，网站产品的设计、开发，比如界面设计，可能就需要涉及html、css、xml、脚本语言方面的知识，以及Dreamweaver，Photoshop等网页设计和图象处理方面的技能;或网络应用程序的开发。在这一层，在某些学校，部分对技术有兴趣的同学有可能达到。网页设计和图像处理方面的技能，或网络应用程序的开发。这个层次主要负责网站WEB页面的开发与后台的技术支持;能够满足运作层对技术层的要求;精通ASP/PHP/CGI 3种开发工具的一种，能够独立开发后台;精通SQL SERVER、ACCESS能够独立完成数据库的开发。有1年开发经验;能够读懂

常用于JSP的代码，并且能够编写基本的JSP程序;精通HTML语言，完全能手写HTML代码。在这一层，在某些学校，部分对技术有兴趣的同学有可能达到。像网站策划、网站编辑、网站开发等岗位都和这个层次有很大关联。

第四层，电子商务运营，管理层，在这一层次，涉及各类商务支持人员，如客户服务，市场、贸易、物流和销售等诸多方面。熟悉网络营销常用方法，具有电子商务全程运营管理的经验;能够制定网站短中长期发展计划执行与监督;

能够整体网站及频道的运营、市场推广、广告与增值产品的经营与销售;熟悉网络，网络营销和办公软件;负责公司产品在网络上的推广;对网络营销感兴趣，并能很好的掌握电子商务及网络发展的各种理念。这个层次适合的岗位有网站运营经理/主管、网站推广、外贸电子商务、网络推销员等。

从上面电子商务实施的层次性，对我们电子商务专业到底具备哪些能力，应该有所了解，学生不仅要求学校及培训机构开设这方面的课程，在确定好自己就业方向后，更应该通过自身努力去学习和实践以上知识与技能。另外， 电子商务的人才培养工作的师资组成应是一个综合体，师资引进来自于一线电子商务企业的操作人员或是具备电子商务师等资格的电子商务从业人员，这些老师其中一部分必须懂得工业、商业、流通、外贸、消费领域等的商业贸易的模式，能够在精确的成本效益分析基础上评价电子贸易时机，知道如何签订支持电子商务的贸易合同;了解如何建立支持电子商务的财务会计构建;做到同时精通企业管理和通晓技术。另一部分要熟悉、掌握计算机技术，了解构建销售和服务的电子商务系统，懂得如何评价各种电子商务工具。只有这样一个综合体，才能与时俱进，确保电子商务教育与电子商务的实际发展同步，把握电子商务的最新发展动态，有利于造就大批适应未来电子商务应用的人才。

通过分析表明：在电子商务当前形势大好，人才急剧缺乏的情况下，电子商务专业学生只要认真做好与社会的对接、找准今后就业方向、明确自己的学习目标，从现在开始，通过自身的努力去学习和实践工作岗位上的知识与技能，就会大大提高自己的就业能力与就业竞争力，实现更好更快的就业。

随着电子商务的发展，越来越多的企业搭建商城网站，商城网站不像企业网站只是展示功能，商城网站需要更多的功能开发，下面中联科技就来说说商城网站需要哪些基本功能？

1、商品价格选项，可以促销单件或多个商品。

2、灵活的商品数量和单位，可以限制每个客户一件。

3、可以对每件商品设置优惠。

4、可以添加商品属性，属性选项可以是单选、多选、下拉菜单、文本框、上传文件、下载文件等各种形式。也可以按属性加价，商品价格也可以完全由属性决定。属性可以设置为"只读" ，用于列出商品特性。

5、可以给商品添加多个图像，有小/中/大格式。如果要看大尺寸图像，可以使用弹出窗口。

6、客户可以对商品发表评论(可以设置为需要管理员批准)。

7、运输选项，支持多种运输方式。

8、自动检测搜索引擎spiders，为搜索引擎智能生成标签内容。

9、网站集成了paypal支付模块，可以进行更多支付模块的二次开发。

本文有6个章节，从工作流程、网站种类、网站组成部分、技术原理、设计规范等全面总结了网页设计的基础知识，接近两万字的干货，新手看完就可以入门了。

一、网页设计是什么？

网页设计也被称为 Web Design、网站设计、Website design、WUI 等。它的本质就是网站的图形界面设计。虽然现在我们常使用移动端上的 APP 来获取资讯，但是显然基于个人电脑平台的网站上网方式陪伴我们的历史要比手机久很多：从1987年钱天白教授向德国发出第一封电子邮件到2000年搜狐、新浪、网易在美国纳斯达克挂牌上市，再到现在网站遍地；中国的网站高速发展了近三十年。我是在小学开始去网吧「上网冲浪」的，那时的电脑屏幕非常小，分辨率只有800×600像素（对比一下，iPhone8的分辨率是750x1334px），网速也很慢，经常掉线或者加载失败。那时的网站性能和体验都不好，而现在网站设计和过去已经有了巨大的变化：注重用户体验、注重页面动效、富媒体等设计让如今的网站体验并不比软件和手机 APP 差。加上个人电脑的普及，网站仍然是人机交互中非常重要的平台之一。那么作为 UI设计师我们就必须掌握网站设计的规范和理解网站运行的原理，才能更好地驾驭这个平台。今天就向您好好说道一下网站必须懂得的那些事儿。

二、工作流程

首先让我们来看一下网站设计的工作流程吧，除了之前介绍过的用户研究、撰写产品需求文档、市场文档、做竞品调研等工作之外，与设计师密切相关的网站项目流程可以分为原型图阶段、视觉稿阶段、设计规范阶段、切图阶段、前端代码阶段、项目走查阶段六个阶段。每个阶段都需要设计师参与和了解，千万不要只在意视觉稿这个阶段，有很多前期与后期工作同样需要得到我们的重视。好，让我们一个一个来了解它们吧。

1. 原型图阶段

原型图阶段中设计师需要和产品经理沟通需求，这时要注意，并不是产品经理向设计师下发需求，而是需要相互就自己擅长的方面进行沟通。视觉方面具体呈现也许设计师会有更好的方式，这时需要在设计之前与产品经理达成一致。

△ 构建网站原型图（工具：Axure RP）

2. 视觉稿阶段

视觉稿阶段就是我们要根据原型图确定的内容和大体版式完成网站的界面设计了，在设计网站的时候，我们需要一些图像和灵感的素材。比如做世界杯专题时，我们除了收集很多素材之外，也可以设计一个「情绪板」（Mood Board）。简单说情绪板就是将一些与主题相关的资料和素材拼贴在一起，这样可以更好地指引我们整个需求的设计主题和大体感觉。另外，很多网站的头部通常需要主视觉来抓人眼球，这时可能会使用到需求方提供的明星照片、主题素材、LOGO、主视觉PSD等，那么用素材和这些需求方提供的资料进行混合并拼出让人觉得震撼的头部视觉就是我们的目标了。主视觉下面的信息排布更强调合理性，这时也需要和产品经理沟通从后台调取的图片尺寸、标题字段长度等，然后根据这些要求完成页面信息部分的设计。总之，设计过程中需要我们不断思考和沟通才可以完成一个比较棒的视觉稿。

△ 视觉稿设计阶段（工具：Photoshop）

3. 设计规范

当视觉稿通过后，很多设计师可能不会主动去做设计规范。其实每一个可迭代的产品都需要设计师来总结设计规范，设计规范就是所有页面中共性的东西，比如说字体不同的大小、图片的尺寸、按钮的样式等，这些共性也是用户访问网站时会理解成固定概念的凭证。比如同样的分享功能如果采用两种截然不同的样式就会让用户困惑。那么设计规范主要也是在约束设计师我们自己，在用户有限的记忆力中减少思考的成本。同时，设计规范也可以保证同一个项目的不同设计师都能输出一样风格的设计来。最后，设计规范对于设计师个人来说也是对项目影响的一个佐证，可以证明你的思考和你在项目中的地位。所以我认为设计师应该主动去做设计规范和项目总结。设计规范如何去做？其实设计规范就是把主要页面的元素固定成统一元素即可。具体来说一个产品的设计规范应该有：字体规范、主体色规范、图表规范、图片规范等不同分类。

△ 视觉规范（工具：Photoshop）

4. 切图

网页设计师通常不需要为前端工程师切图。因为前端工程师通常需要掌握 PS 软件技能。如果遇到特殊情况需要我们切图时，我们可以使用诸如 Cutterman、Zeplin 等切图插件中的 Web 选项为前端切出网站所使用的图片。

△ 从PSD中提取出来的切图（插件：cutterman）

5. 前端代码

前端工程师会用代码重构我们设计的页面，把图纸变为静态页面。然后和后端工程师对接调取数据接口，一个网站就活了起来。工程师们为了方便了解网站是不是达到了我们要求的数据，也会进行埋点。埋点就是在页面代码里插入一些统计代码，方便我们之后确定哪些页面访问量高，哪些没有达到预期。在此后其实还会有测试工程师介入来发现编译完的网站是否存在一些漏洞等。

△ 前端工程师代码编译（工具：Notepad +）

6. 项目走查

网页设计完成后还需要设计师进行项目走查，来确定网页还原度是否有问题。如果发现有和设计稿出入很大的，就需要要求前端工程师进行调整。这个步骤非常重要，因为网站的成品才是我们最终的输出，不要认为设计稿很漂亮而实现后的页面就不需要我们负责了。

△ 将实现后的截图和设计稿进行比对（工具：Photoshop）

三、网站种类

网站的分类按对象来划分可以分为 To C端和 To B端两种。To C端就是面向用户和消费者，例如门户网站、企业网站、产品网站、电商网站、游戏网站、专题页面、视频网站、移动端H5 等，均是面向用户和消费者的产品。由于是面向用户和消费者，所以设计上一定要可以吸引人，并且以用户为中心考虑体验设计。而 To B端作为一个需求量很大的类别，其实往往被设计师所忽视。什么是 To B端项目呢？比如电商网站供货商的后台、Dashboard、企业级OA、网站统计后台等这些面向商家和专业人士的网站就是 To B 类网站项目了。这些项目的要求和 To C端网站的要求大相径庭：To B 类项目最重要的是效率而不是体验，因为说白了我们在设计使用者工作的工具，我们在设计时必须首先要保证操作者可以高效地完成他们所需要完成的工作。那么让我们来了解一下网站的不同门类吧。

1. 门户网站

门户网站国内比较知名的有新浪、腾讯、网易、搜狐；国外比较知名的如 Naver、Llinternaute 等。我们可以看得出，门户网站都是大而全包罗生活万象的。比如腾讯网就有新闻、财经、视频、体育、娱乐、时尚、汽车、房产、科技、游戏等不同频道。门户网站的门槛很高，必须要有雄厚的实力才可以建立起一个门户网站，而门户网站需要的设计师数量也惊人。首先门户网站需要产品方向的界面设计师以迭代的方式维护迭代网站首页、二级页面、底层页等网站基石。然后需要各个频道的设计师来处理日常需求：比如巴黎时装周需要负责时尚频道的设计师来设计对应的专题、世界杯小组出线需要负责体育频道的设计师来设计对应的专题等。地球上的每一天都有大事发生，那么门户网站中的设计工作就不会少。另外，具体对接频道的设计师也需要有一定擅长之处：比如对接体育频道的设计师起码应该熟悉足球篮球等体育项目、时尚频道的设计师要懂得各个大牌的设计风格、佛学频道的设计师需要懂得基本的佛学知识和忌讳、文化频道的设计师需要对传统文化有所涉猎。所以基本上门户网站的设计师可以分为产品组和频道组两种。

△ 韩国门户网站Naver

2. 企业网站

每个企业都需要有一个网站来对外展示自己的能力、介绍自己的产品等。现在接触一个陌生的企业时，很多老百姓都会上网搜索一下其官方网站验证真伪。网站已经是中小企业的标配了。企业网站设计时通常会有网站首页、公司介绍、产品中心、公司团队、在线商城、联系我们等这几个模块，企业网站会展示很多诸如公司环境、团队成员、企业文化等实际的照片，配合一些资料进行设计。企业网站通常也追求所谓「高端」、「大气」、「上档次」的风格，也就是为了达到让消费者认同品牌这个要求。所以如果我们接到了企业网站的设计需求，不妨多去浏览参考一些更加大牌的企业网站作为竞品来参考。

△ 美国通用公司官网

3. 产品网站

从苹果公司的 iPhone 介绍页到小米手机8的介绍页，我们会发现一种新鲜的产品营销模式，就是产品网站。设计这类网站的内容主要是该产品的工艺、技术、设计、特点、构造、使用场景等。这样的产品页希望可以让用户有沉浸感，所以一般来说都是使用全屏布局，然后配合一些如视差滚动等方式让我们感觉到这个产品的极致精细。由于中国互联网和产品设计发展很快，所以产品类网站设计需求一定会越来越多。

△ 苹果公司产品介绍页

4. 电商网站

电商设计师也属于网页设计师吗？是的。如果按照平台细分，无疑电商设计师所在的平台大部分属于网站。以淘宝、天猫为代表的电子商务发展得太快了，以至于从内蒙的牧民到海南岛的渔民，甚至台湾、日本、东南亚的商人都开始在中国电商平台上开店铺了。店铺其实本身属于平台本身的页面。但是为了增强每个店的个性，平台为商店开通了一些页面自定义的装饰功能，比如宝贝详情、店铺排版、banner头图设计等。这样商铺有一定权限在平台规定的范围内使用图片和一部分css样式代码来装饰自己的店铺，电商设计应运而生。虽然带着镣铐跳舞，但是有很多店铺因为设计精良而能带动销售。那么电商设计师当然就变得非常重要了。

△ 淘宝网首页

5. 游戏网站

游戏是一个巨大的产业，很多公司的收入大半壁江山都来自游戏产业。那么除了游戏需要制作精良之外，游戏的官网也必须设计精美。不要忘记，每一个玩家都需要访问你的游戏官网才能完成下载、充值、社交等重要操作。国外游戏网站比如暴雪娱乐公司（https://blizzard）的官网设计得极其精美，每个游戏的官网都是一个精品。比如魔兽世界、星际争霸2等游戏官网，头部都是视觉冲击非常强烈的动画。然后网站界面的元素都带有游戏的风格，仿佛登录这个网站你就在游戏之中了。

△ 暴雪公司星际争霸2游戏官网

6. 专题页面

当然不管是电商还是门户网站，在节日都会需要设计师来设计一些专题页面增加曝光。比如儿童节、情人节、母亲节、圣诞节等节日往往会有促销、专题报道等各式活动。专题设计生命周期很短，上线后基本过了流量的那个点就基本没用了。所以我们找不到前几年的618或者双11专题页面，因为过了特定的时期专题页面就无人问津了。所以在那么短的生命周期怎么抓住人的眼球？当然不能使用现代主义设计那种性冷淡风格，而应该在头部尽量刺激用户，用刺激对比强的色彩、复杂立体的造型、冲击感强的文字吸引用户来看。毕竟每个人可能只会看一次，不能放过这个机会。所以专题设计和产品设计正相反，专题设计必须刺激。

△ 极有家淘宝专题页面

7. 视频网站

视频网站的访问量惊人，并且用户的黏着度更高。很多视频网站除了购买版权之外还有很多 UGC 内容。多说几句，UGC（User Generated Content）是指用户产生的原创内容，很早之前 web1.0时代用户主要是单向浏览网站，web2.0提出的 UGC 概念就是说用户不仅在浏览也会上传内容。那么视频网站为什么会火呢？首先要感谢宽带的发展。在今年我们国内点击视频就立马可以播放了，而在几年前需要等待几分钟才可以加载够缓存。视频网站的设计主要是要考虑应用场景：视频是用户主要观看的区域，所以视频区域首先要足够大，另外颜色应该以暗色为主，因为亮色会干扰到用户观看视频。然后其他的区域图片比例应都为16:9的视频尺寸，方便后期编辑在后台添加。视频网站的设计师同样也可以分为产品组和运营组两个种类来处理产品方向和运营方向的不同需求。

△ 腾讯视频播放页面

8. 移动端H5

你一定在朋友圈被《穿越未来来看你》、《淘宝造物节》等 H5 刷过屏吧？平时我们经常被这种好玩儿的 H5 刷屏。其实 H5 全称是 HTML5，并不是仅仅指移动端，而是网页前端的开发语言，由于约定俗成的概念，我们现在常常把手机中的集合视频、动效、互动的这种营销形式称为 H5。其实它的本质是运用网页技术运行在手机浏览器或内置浏览器内的网页。随着技术日新月异的发展，H5 显得越来越有传播价值和份量。微信、浏览器等平台级产品在手机端中火爆促进了依靠入口而传播的 H5 的发展。如果设计出色，你的项目可能会在朋友圈产生病毒传播的效果。

△ 使用前端语言编译的适合手机浏览的H5界面

移动端H5尺寸

设计移动端 H5 项目的时候，我们一般以用户量较高的 iPhone6/7/8的尺寸：750x1334px为准，然后我们要在顶部预留出微信或者浏览器导航区域。主要内容区域就可以自由设计了。一般H5的操作是上下滑动。字体方面使用苹方字体，并且字号设置为24PX以上，渲染方式设置成锐利。�...

很多人对于专业的报考还是很迷茫的，下面小编就这个内容整理了关于专业方向的分析，快来阅读了解吧，希望对你有帮助。

二十一世纪是信息化的时代，在全球信息化大势所驱的影响下，信息服务业已成为21世纪的主导产业，正引领着我国的电子商务不断的完善和发展，我国的电子商务市场将成为各个国家和各大公司争夺的焦点。

2006年，是我国电子商务继续快速发展年，电子商务已成为我国经济增长助推器，他的广泛应用降低了企业经营、管理和商务活动的成本，促进了资金技术、产品、服务和人员在全球范围的流动，推动了我国经济全球化的发展。如

2006年世界电子商务交易额达12.8万亿美元，占全球商品交易的18%。目前，电子商务的应用已经成为决定企业国际竞争力的重要因素，总量规模也不断化，并影响着未来商业发展模式。面对世界电子商务的发展和变化，电子商务人才的紧缺使电子商务将面临着严峻挑战。

虽然我国电子商务发展起步较晚，但势头较强，政府也在积极推进电子商务的发展，政府级电子商务总体框架基本确立，调查显示，目前中国1000万中小企业中，已有1/4的企业开始尝试并熟练运用电子商务工具;有关人士预测，随着国内新一代人的成长，到2006年中国将会超过美国成为拥有最多互联网用户的市场，这也表明进行电子商务的企业大概会在明年迎来一个快速发展的高峰到2007年，中国电子商务市场总体规模将会达到1.7万亿元，而B2B电子商务市场规模将会达到1.69万亿元。到2009年，中小企业信息化投资将突破2300亿元。据专家预测，中国电子商务这几年的发展速度在40%，未来几年可能会超过50%。

从以上数据显示，我国的电子商务正如火如荼的发展，一些成功的事例表明，中国的电子商务大有希望，海尔电子商务的成功就是其中的一例。然而，行业电子商务将成为下一代电子商务发展主流，特别是在加入了WTO后，中国市场将更加开放，企业导入电子商务的比例将持续增加，中国将成为电子商务在全球发展最快，潜力最大的地区之一。

电子商务专业岗位群细分

现在读的电子商务专业大部分学生提出，不知道自己将来可以从事哪些工作，对于自己的就业前景一片迷惘，找不到在电子商务行业自己喜欢的方向，没有明确的岗位群，但是，在电子商务行业对岗位还没有进行过认真的细分，只是对人才进行了区分，一般来说，电子商务人才分为技术型人才、商务型人才和综合管理型人才，根据调查、综合结果，我们在以上三类人才基础上对就业岗位进行进一步细分，并对不同岗位做了简要介绍：

(一)技术类人才岗位方向细分：

1、电子商务平台设计(代表性岗位：网站策划/编辑人员)：主要从事电子商务平台规划、网络编程、电子商务平台安全设计等工作。

2、电子商务网站设计(代表性岗位：网站设计/开发人员)：主要从事电子商务网页设计、数据库建设、程序设计、站点管理与技术维护等工作;

3、电子商务平台美术设计(代表性岗位：网站美工人员)：主要从事平台颜色处理、文字处理、图像处理、视频处理等工作。

(二)商务类人才岗位方向细分：

1、企业网络营销业务(代表性岗位：网络营销人员)：主要是利用网站为企业开拓网上业务、网络品牌管理、客户服务等工作。

2、网上国际贸易(代表性岗位：外贸电子商务人员)：利用网络平台开发国际市场，进行国际贸易。

3、新型网络服务商的内容服务(代表性岗位：网站运营人员/主管)：频道规划、信息管理、频道推广、客户管理等。

4、电子商务支持系统的推广(代表性岗位：网站推广人员)：负责销售电子商务系统和提供电子商务支持服务、客户管理等。

5、电子商务创业：借助电子商务这个平台，利用虚拟市场提供产品和服务又可以直接为虚拟市场提供服务。

(三)综合管理人才岗位方向细分：

1、电子商务平台综合管理(代表性岗位：电子商务项目经理)：这类人才要求既对计算机、网络和社会经济都有深刻的认识，而且又具备项目管理能力。

2、企业电子商务综合管理(代表性岗位：电子商务部门经理)：主要从事企业电子商务整体规划、建设、运营和管理等工作。

通过以上显示，电子商务行业对人才的综合性提出了很高的要求。比如说技术型人才，它包含了程序设计、网络技术、网站设计、美术设计、安全、系统规划等知识，又要求了解商务流程，顾客心理和客户服务等。技术型人才要求有扎实的计算机根底，但考虑到最终设计的系统是为解决企业的管理和业务服务，又需要分析企业的客户需求，所以该类人才还应该对企业的流程，管理需求以及消费者心理有一定了解，而这将成为电子商务人才的特色所在。商务型人才在传统商业活动中都有雏形，不同之处在于他们是网络虚拟市场的使用者和服务者，一方面要求他们是管理和营销的高手，同时也熟悉网络虚拟市场下新的经济规律;另一方面也要求他们必须掌握网络和电子商务平台的基本操作。综合管理人才则难以直接从学校培养，而是市场磨练的主物。

就业岗位对电子商务专业学生的能力要求

根据社会所需人才来确定电子商务专业学生所具备的能力，对本专业的学生来说，是就好业的一切前提，那么就必须知道电子商务专业到底须具备哪些能力和知识，在电子商务人才类型及岗位分析的基础上，我们可以从以下四个层次来分析电子商务岗位所必须具备的能力要求：

第一层，电子商务建立在网络硬件层的基础上。在这一层次需要了解一般计算机、服务器、交换器、路由器及其它网络设备的功能，知道有关企业网络产品的性能，如思科;懂得路由协议，TCP/IP协议等，熟悉局域网知识，网络设计、安装、维护和管理的能力。这一层次，思科的CCNA、CCNP、CCIE认证在业内具有权威性。一般来讲，电子商务课程体系涉及这一层次的东西较少。

第二层，电子商务实施的软件平台。在这一层次涉及服务器端操作系统，数据库、安全、电子商务系统的选择，安装、调试和维护。比如微软的Windows操作平台上，服务器操作系统目前有server2003;数据库有SQL server;电子商务应用有commerce server、content management Server;安全保证有ISAserver等等。在这一层次，微软的诸多认证如MCSE、MCAD、MCSD、MCSA、

MCDBA等无疑对知识的掌握有帮助。但也不是电子商务专业学习的重点，和电子商务实施平台联系较大的岗位有网站开发等。

第三层，电子商务应用层。在这一层次，涉及商业逻辑，网站产品的设计、开发，比如界面设计，可能就需要涉及html、css、xml、脚本语言方面的知识，以及Dreamweaver，Photoshop等网页设计和图象处理方面的技能;或网络应用程序的开发。在这一层，在某些学校，部分对技术有兴趣的同学有可能达到。网页设计和图像处理方面的技能，或网络应用程序的开发。这个层次主要负责网站WEB页面的开发与后台的技术支持;能够满足运作层对技术层的要求;精通ASP/PHP/CGI 3种开发工具的一种，能够独立开发后台;精通SQL SERVER、ACCESS能够独立完成数据库的开发。有1年开发经验;能够读懂

常用于JSP的代码，并且能够编写基本的JSP程序;精通HTML语言，完全能手写HTML代码。在这一层，在某些学校，部分对技术有兴趣的同学有可能达到。像网站策划、网站编辑、网站开发等岗位都和这个层次有很大关联。

第四层，电子商务运营，管理层，在这一层次，涉及各类商务支持人员，如客户服务，市场、贸易、物流和销售等诸多方面。熟悉网络营销常用方法，具有电子商务全程运营管理的经验;能够制定网站短中长期发展计划执行与监督;

能够整体网站及频道的运营、市场推广、广告与增值产品的经营与销售;熟悉网络，网络营销和办公软件;负责公司产品在网络上的推广;对网络营销感兴趣，并能很好的掌握电子商务及网络发展的各种理念。这个层次适合的岗位有网站运营经理/主管、网站推广、外贸电子商务、网络推销员等。

从上面电子商务实施的层次性，对我们电子商务专业到底具备哪些能力，应该有所了解，学生不仅要求学校及培训机构开设这方面的课程，在确定好自己就业方向后，更应该通过自身努力去学习和实践以上知识与技能。另外， 电子商务的人才培养工作的师资组成应是一个综合体，师资引进来自于一线电子商务企业的操作人员或是具备电子商务师等资格的电子商务从业人员，这些老师其中一部分必须懂得工业、商业、流通、外贸、消费领域等的商业贸易的模式，能够在精确的成本效益分析基础上评价电子贸易时机，知道如何签订支持电子商务的贸易合同;了解如何建立支持电子商务的财务会计构建;做到同时精通企业管理和通晓技术。另一部分要熟悉、掌握计算机技术，了解构建销售和服务的电子商务系统，懂得如何评价各种电子商务工具。只有这样一个综合体，才能与时俱进，确保电子商务教育与电子商务的实际发展同步，把握电子商务的最新发展动态，有利于造就大批适应未来电子商务应用的人才。

通过分析表明：在电子商务当前形势大好，人才急剧缺乏的情况下，电子商务专业学生只要认真做好与社会的对接、找准今后就业方向、明确自己的学习目标，从现在开始，通过自身的努力去学习和实践工作岗位上的知识与技能，就会大大提高自己的就业能力与就业竞争力，实现更好更快的就业。