商城网页设计

网页设计是什么？

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

工作流程

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

原型图阶段

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

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

视觉稿阶段

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

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

设计规范

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

视觉规范（工具：Photoshop）

切图

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

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

前端代码

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

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

项目走查

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

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

网站种类

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

门户网站

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

韩国门户网站Naver

企业网站

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

美国通用公司官网

产品网站

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

苹果公司产品介绍页

电商网站

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

淘宝网首页

游戏网站

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

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

专题页面

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

极有家淘宝专题页面

视频网站

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

腾讯视频播放页面

移动端H5

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

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

移动端H5尺寸

设计移动端H5项目的时候，我们一般以用户量较高的iPhone6/7/8的尺寸：750x1334px 为准，然后我们要在顶部预留出微信或者浏览器导航区域。主要内容区域就可以自由设计了。一般H5的操作是上下滑动。字体方面使用苹方字体，并且字号设置为24PX以上，渲染方式设置成锐利。英文则需要使用SF-UI代替。当然H5可以调用背景音乐、视频、链接等多媒体，让体验更佳。除了让前端小哥哥们开发之外，其实还有一种方式可以无需代码生成简易版...

　　商城网站开发公司紫鲸互联指出:微商城基于微信平台运营，微信的庞大用户群体吸引了大量商家开发微商城的想法，那么开发一个商城网站的具体流程是怎样的呢?

　　一、微商城需求分析、确认

　　很多客户想要开发微商城只是看到了别人利用微商城盈利了，但是并不明白自身对于微商城的真正需求。因此企业商家在决定开发微商城的时候，首先要了解分析自身对于微商城以及产品的需求，了解微商城可以帮助产品实现的价值和利益。

　　二、微商城功能点设计

　　开发一个微商城还需要了解客户对于微商城功能方面的需求，了解用户想要的功能，根据用户产品的特点来有针对性地进行微商城的开发。

　　三、微商城业务流程设计

　　微商城的每个产品都有它自己的业务逻辑，清楚了用户对于微商城的功能点后，再对整个产品的业务流程进行设计，形成一个闭环。

　　四、画微商城原型图

　　设计好业务流程后，还要进行原型图的设计，也就是微商城产品初步的一个展示，通过原型图进行制图，也可以通过画原型图进行讨论。

　　五、做微商城效果图

　　有了微商城的原型图还远远不够，商城里的尺寸、字体大小、间隔、颜色等都需要进行规范，需要专业的设计人员进行效果图设计。

　　六、架构设计、数据库设计

　　根据微商城的效果图还要进行微商城架构、数据库的设计，产品的性能才能更好地展示。

　　七、前端开发

　　每出一个效果图，就可以开发一个静态页面，这个页面只是一个网页的静态展示，可以进行页面跳转，但是业务流程间的挑战还是无法实现。

　　八、后端业务逻辑开发

　　根据业务流程，进行业务逻辑的开发，使微商城页面上的每个按钮都能根据设计的业务流程进行跳转。

　　九、测试、发布

　　开发好微商城之后还需要对微商城的功能进行测试，测试好之后要注意商城的发布。

如今商城网站越来越多，那么企业就必须通过其他方式来进行商城网站建设，特别是需要一个独立的商城平台。

郑州启凡软件有限公司拥有电子商务应用与开发的成功经验和技术积累，以优质的服务向更多的商家及个人提供先进、稳定的网上商城平台开发服务。商城网站建设跟其他的个人网站企业网站有着一定的差别，因为这类网站涉及到网上商品直接交易，并且网站的如何建设能否带动用户消费至关重要

以下是郑州启凡软件有限公司开发独立商城网站所考虑的几个方面：

1、清晰的商城网站建设目标

2、明确电子商城网站的功能

3、电子商城网站的安全建设

4、网站建设后的安全稳定问题

下面是启凡软件公司设计的案例：

平面设计平面设计，是以“视觉”作为沟通和表现的方式，透过多种方式来创造和结合符号、图片和文字，借此作出用来传达想法或讯息的视觉表现。平面设计可谓是三种设计里最“古老”的专业，是一切设计的鼻祖，学任何设计都绕不开他，所有的设计理论，如配色、排版、字体等都是平面的基础，也是设计的基础。平面设计是纸媒时代的产物，主要以平面媒体或载物进行设计，报纸、杂志、画册、海报、宣传页、书籍装帧等都是平面设计的工作。随着互联网及移动互联网的发展，浏览逐渐趋向移动端发展，平面设计的发展也受到一定的阻碍。网页设计网页设计，根据企业希望向浏览者传递的信息（包括产品、服务、理念、文化），进行网站功能策划，然后进行的页面设计美化工作。网页设计分为两个工种，一种是常规的网页设计师，设计企业的官网，或者是一些具备功能性的网站，另一种是电商设计师，主要是店铺及商城的设计。好的网页设计师工资是非常可观的。网页设计主要针对的PC端运用的设计，后来移动互联网的流行，网页开始在手机上流行起来，为保证能够多端正常显示，在HTML5和CSS3的帮助下，“响应式设计流行”，使得网页能够在任何平台都能正常显示。UI设计UI设计，指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品位，还要让软件的操作变得舒适简单、自由，充分体现软件的定位和特点。UI设计是近几年非常流行的名词，随着移动互联网的普及，让UI设计提升到了一个人尽皆知的地位。国内互联网企业也开始对UI重视，纷纷成立了相关部门，并且引起的人才争夺，加之从业人员少，UI设计师极度供不应求，工资自然高出你的想象。手机系统界面、软件界面、网站界面、游戏操作界面、智能电视界面、汽车导航界面、VR虚拟现实等都需要UI设计师，而且随着用户体验越来越重要，UI设计师既要设计美观的视觉，又要设计好交互设计，以便我们使用的更加舒适和方便。

互联网发展快速，网页的设计方式必须不断更新，网页设计中有许多设计元素会影响使用者操作，其中选单是引导消费者到达产品页面很重要的媒介，今天要先从选单设计谈起，现今选单的设计趋势，并透过几个知名品牌网站与大家分享，这些品牌他们是怎么让消费者更容易找到想要的产品，一起来看看吧！

商城手机网站建设

为什么网页设计方式必须一直求新？

由于互联网发展快速，网页设计与开发又与这些息息相关，我们就需要依照趋势与需求，去学习与改变我们的设计方式，例如2007-2010年时期智能手机的普及，衍生了手机版网页与平版网页的设计需求，也改变了制作软件发展，进而产生响应式设计的方式，在2015年手机屏幕尺寸趋向大屏幕的改变，也再次重新调整了手机版网页的配置，网页设计师要不断因应科技趋势与市场需求，学习新的设计方式。

现今消费者的使用趋势

商城手机网站建设

2016年与2017年相较，民众使用行动装置购物从五成提高至八成，手机与平版的消费人数上升3倍，而电脑版人数却减少了22%，我们合理推测有几个原因：

一、装置的改变 大屏幕手机销售量占比将达 46%，超越中型手机两成行动装置之冠！小屏幕要呈现购物流程等复杂的介面，据有相当大的难度，屏幕尺寸与解析度的提升，扩大了可视范围，对于使用者浏览更为容易。

二、消费者使用习惯改变，消费者经常接触手机，习惯使用手机上网与操作，对于手机信赖度提高。

三、网页设计更为容易操作，手机版购物网页越来越容易操作，甚至简化过后介面会来的比电脑版简单许多。方便性与使用习惯改变，让消费者愿意选择使用手机来上网购物。

透过以上的介绍我们可以了解到手机版购物网页设计的趋势与重要性，网页设计有很多需要注意的地方，今天我们就先来谈谈手机版购物网站的选单设计。

手机版网页选单需着重导航设计

选单是引导使用者进入产品页面的媒介，不论是电脑版或行动版网页，都要着重导航设计，特别在于手机的画面有限情况下，应以导航为主，将选单舍弃多余的美编图片、效果及非必要功能。过去在手机版网页中，对于手机的小屏幕，我们会采用一栏式设计并加大字级等，但现今手机屏幕尺寸以及解析度的提升，在产品目录页中普遍改采用两栏式呈现，接下来透过几个案例让大家看看他们是怎么设计选单的。

案例分析

商城手机网站建设

案例一：Lativ 来源网址：m.lativ.tw

Lativ在选单设计上没有主选单的图，直接列出产品的大分类，将其他的会员、购物车放在下方，减少了展开选单的步骤，并营造简洁风格。

商城手机网站建设

案例二：Uniqlo 来源网址：uniqlo/tw

Uniqlo选单透过不同颜色来区分产品大分类，点击选单图后直接列出第二层选单，直得关注的是，可能由于服饰业中女性网购族群相较于男性来的高，不论是首页的选单排序，或是点击主选单后所展开的画面，都以女装为优先，这是一个了解自己客群后，所做出的良好设计方式。在第三层的选单中使用产品类别的图、文呈现，并使用两栏排列，类别示意图能够帮助使用者快速分辩产品类别，也增加选单活泼性。

商城手机网站建设

A Common Space不同于他在电脑版的设计，将最底层分类直接作为手机版选单，由两层选单变成一层，让使用者在选择产品类别时更为轻松，也将不会一直使用到的功能，如社群、币别等，收合在选单中，尽可能的保持画面干净。

本文有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以上，渲染方式设置成锐利。�...

不管做哪一行，工资都不可能很平均，就算是同样的网页设计师，所在的岗位不一样，待遇也有所差别。就像京东商城的网页设计师，薪资待遇总比其他网站高。为什么京东商城的网页设计师能月入过万？那是因为这三大原因！

一、在细节和创意上下功夫

京东商城的网页设计师的要求会高很多，虽然做的工作一样，但是细致程度和设计创意肯定有很大的区别。

京东商城的网页设计师除了写代码，做好基础的网页设计，还要针对用户体验，在视觉设计方面我们就要做更多的考虑。例如：现在是内容为王的年代，更多的焦点应该是转移到商品内容上面，而不是放在所谓的修饰元素上面。所以京东新版首页的布局排版与设计上都做了很大的调整，版块的划分和内容归类更加地清晰明确，以凸显商品内容为主，尽可能地减少其它色块元素的干扰。

除此之外，京东商城的网页设计师还需要做细节上的规范：譬如首页商品的广告图片设计都有统一的设计规范（统一的背景和排版）。

二、资历与阅历两者缺一不可

1.看资历。你是名校毕业？国内985还是国外知名大学？有知名导师带过么？

2.看阅历。你是在行业内知名大公司做过？有独立项目操作经验？有带过多少人团队？你的团队可有拿得出手的作品？

三、注重口碑与个人思维发展

京东商城很注重网页设计师的口碑。京东不仅会考察在你任职的公司中对公司发展做出的贡献，而且会考察你是否能得到客户领导的赏识称赞。

除此之外，京东还非常注重网页设计师的个人思维模式以及做事效率，如果你只能够按部就班地完成公司下达的任务，没有自己的审美或者行业判断，这或许稍微欠缺了。

所以，在京东做网页设计师，高薪的背后，相应的要求也很高，符合这个条件的你，不妨快去应聘这份月入过万的高薪职位吧！

你在面试时还发现了哪些职场小tips呢？

欢迎在评论区留言，分享你在求职过程中遇到的问题与经历吧！

互联网发展快速，网页的设计方式必须不断更新，网页设计中有许多设计元素会影响使用者操作，其中选单是引导消费者到达产品页面很重要的媒介，今天要先从选单设计谈起，现今选单的设计趋势，并透过几个知名品牌网站与大家分享，这些品牌他们是怎么让消费者更容易找到想要的产品，一起来看看吧！

商城手机网站建设

为什么网页设计方式必须一直求新？

由于互联网发展快速，网页设计与开发又与这些息息相关，我们就需要依照趋势与需求，去学习与改变我们的设计方式，例如2007-2010年时期智能手机的普及，衍生了手机版网页与平版网页的设计需求，也改变了制作软件发展，进而产生响应式设计的方式，在2015年手机屏幕尺寸趋向大屏幕的改变，也再次重新调整了手机版网页的配置，网页设计师要不断因应科技趋势与市场需求，学习新的设计方式。

现今消费者的使用趋势

商城手机网站建设

2016年与2017年相较，民众使用行动装置购物从五成提高至八成，手机与平版的消费人数上升3倍，而电脑版人数却减少了22%，我们合理推测有几个原因：

一、装置的改变 大屏幕手机销售量占比将达 46%，超越中型手机两成行动装置之冠！小屏幕要呈现购物流程等复杂的介面，据有相当大的难度，屏幕尺寸与解析度的提升，扩大了可视范围，对于使用者浏览更为容易。

二、消费者使用习惯改变，消费者经常接触手机，习惯使用手机上网与操作，对于手机信赖度提高。

三、网页设计更为容易操作，手机版购物网页越来越容易操作，甚至简化过后介面会来的比电脑版简单许多。方便性与使用习惯改变，让消费者愿意选择使用手机来上网购物。

透过以上的介绍我们可以了解到手机版购物网页设计的趋势与重要性，网页设计有很多需要注意的地方，今天我们就先来谈谈手机版购物网站的选单设计。

手机版网页选单需着重导航设计

选单是引导使用者进入产品页面的媒介，不论是电脑版或行动版网页，都要着重导航设计，特别在于手机的画面有限情况下，应以导航为主，将选单舍弃多余的美编图片、效果及非必要功能。过去在手机版网页中，对于手机的小屏幕，我们会采用一栏式设计并加大字级等，但现今手机屏幕尺寸以及解析度的提升，在产品目录页中普遍改采用两栏式呈现，接下来透过几个案例让大家看看他们是怎么设计选单的。

案例分析

商城手机网站建设

案例一：Lativ 来源网址：m.lativ.tw

Lativ在选单设计上没有主选单的图，直接列出产品的大分类，将其他的会员、购物车放在下方，减少了展开选单的步骤，并营造简洁风格。

商城手机网站建设

案例二：Uniqlo 来源网址：uniqlo/tw

Uniqlo选单透过不同颜色来区分产品大分类，点击选单图后直接列出第二层选单，直得关注的是，可能由于服饰业中女性网购族群相较于男性来的高，不论是首页的选单排序，或是点击主选单后所展开的画面，都以女装为优先，这是一个了解自己客群后，所做出的良好设计方式。在第三层的选单中使用产品类别的图、文呈现，并使用两栏排列，类别示意图能够帮助使用者快速分辩产品类别，也增加选单活泼性。

商城手机网站建设

A Common Space不同于他在电脑版的设计，将最底层分类直接作为手机版选单，由两层选单变成一层，让使用者在选择产品类别时更为轻松，也将不会一直使用到的功能，如社群、币别等，收合在选单中，尽可能的保持画面干净。