初识网页设计（PC端界面设计）

主要是以PC端界面设计为主，了解网站制作流程、设计规范、网站的风格把控、行业的色彩使用、排版以及交互交互理念的设计手法，再加上 HTML 5 代码的布局实现，相应式的排版，还能独立制作网站的能力。

一、网页设计的概念和目的

1.什么是网页

网页就是能够被浏览器打开显示在屏幕上的视觉画面。

2.什么是网页设计

网页设计是根据企业希望向浏览者传递信息（包括产品、服务、理念、文化），进行网站功能策划，然后进行页面设计美化的工作。

百度新闻网页

3、网页设计的手段

通过使用更合理的颜色、字体、图片、样式进行页面设计的美化，在功能限定的情况下，尽可能给予用户完美的视觉体验 。高级的网页设计甚至还会考虑到通过声光、交互、动画等实现更好的视听感受。（理论主导实践、实践检验理论的唯一方法）

例如这个页面，结合了动画、声音、音乐、排版等方面烘托出了整个页面的氛围感。这个页面的排版风格也是跟古典、复古有一定的联系，点进去看还有小按键那些花纹边设计的也是很有创意

吉祥斋

二、网页设计的发展史

1.世界上最早的网页诞生（1991年8月6日）

世界上最早的网页来自于万维网的发明者，互联网之父蒂姆·伯纳斯·李，是一个类似维基百科的超文本在线编辑数据库。但是整体的排版比较简单，基于文本以及包含几个链接网站。

世界上最早的网页——万维网英译中

2.国外网页设计发展路线

下面以雅虎网页为例。

雅虎（英文名称：Yahoo，NASDAQ：YHOO）是全球第一家提供因特网导航服务的网站。是美国著名的互联网门户网站，20 世纪末互联网奇迹的创造者之一。其服务包括搜索引擎、电邮、新闻等，业务遍及 24 个国家和地区，为全球超过5亿的独立用户提供多元化的网络服务。同时也是是一家全球性的因特网通讯、商贸及媒体公司。

1994 年，雅虎将自己定位于一个目录网站，可跳转页面非常简洁，连图标都没有，可以说是跟万维网这个网站类型几乎差不多。

1994 年雅虎首页

1995年，雅虎开始有了头部设计，也有了搜索功能、Logo设计、以及8个功能按钮。

1995 年雅虎首页

1997年，雅虎出现了沿用至今的 “yahoo!”经典logo，下面还加上了相关的列表 。

1997 年雅虎首页

2000年，可以肯定的是，其中的文案边多了，与之前的相比，整体的页面不是很杂乱，也比较有条理性，排版也比较整齐。其中运用了一个排版法则：栅格化布局（比较像报纸上的一种排版风格）

2000 年雅虎网页

早在网页设计时代，栅格化布局已经开始风靡。检验一个前端的基本功就是考察他写的布局是否规范。由于网页设计主要基于比较宽的电脑显示器屏幕，因此设计师为了能让设计的分栏更加优雅和严谨，便将宽度进行了更有意义的划分，当时的网页宽度以950px，960px，1000px，1190px，1200px居多，并且网页设计过程中大多数内容是要分栏的，可是分多少合适呢？有些设计师会说，我随意划分宽度就好，只要视觉接受都是可以的。也有些更严谨型的设计师说，不行！我们要提供一些宽度比例，让这些分栏更接近于黄金比例的数字，这样会更优雅。于是，他们将网页区域画出n多个小块，然后让这些内容占据不同单位的块，因此就形成了下图的样子：

最常见的布局就是24块分三栏的方式，左边n=4，中间分栏n=11，右边分栏n=9个单位。如下图的Yahoo！网页设计。

这样做的好处显而易见，设计师更方便的计量页面宽度，各个分栏直接的间距，并且它们具有更高的一致性。在当时960Grid System更为流行，我们看到下图，就可以有更直观的感受。

2002年，网页体积继续增加，色彩更是加多，不过还有框架设计，也会引用一些图片元素加以说明。

2002 年雅虎首页

2004年页面变得比较富丽，但是字体变小了，整体的页面采用两种色调，还有大幅的广告出现。

2002 年雅虎首页

2006年，雅虎首页发生了一些比较细微的变化，比如logo下面的按钮没有了，搜索条的样式也变长了，但是大体上是一致的，主要是以新闻为主体的门户网页设计，比以前的版本相对来说简约了不少，趋向于色调的统一性。

2006 年雅虎首页

2009年，logo的颜色采用了紫色，雅虎的本命色，整个网页色调同意，且比较显得清新淡雅。页面的内容有比较精简，还有用户的个性化设计，以“我的应用程序”来管理用户、第三方邮箱、社交网站、资讯，让雅虎有了自己的服务体系，同时也让雅虎主页成为了更多互联网用户的起始页。

2009 年雅虎首页

......

2021年雅虎首页设计风格简约，这也符合现在的潮流，调整了整体配色，主logo颜色调整，还有logo形式改变得更有趣味性，非常能抓住现在用户想要的视觉感受。

2021 年的雅虎首页这个画面用到了一个排版概念叫做：扁平化

前期的页面上的图标、按钮呈现得比较立体，在信息量越来越多的情况下，投影、立体感等其实是会形成一种视觉干扰，会影响个人关注其他信息上的阅读。这里所呈现出来的扁平化视觉效果，其实就是摒弃了一切大家感到比较复杂、麻烦的排版。

还有一个排版概念：冷淡风格（国际品牌沿用的一种排版风格）

整体的外观、配色表现出一种高冷的风格特点。没有过多的渲染以及鲜艳的色彩展现。是以一种冷酷的形象存在。凸显出一种没有情绪、无欲无求、冷冰冰、一动不动的一种独特风格。

如图：

但是冷淡的对立面就显得比较火热、开放、活泼四射的视觉感受。色彩配色比较丰富、大胆、夸张。

如图：

3.国内网页设计发展路线

下面以淘宝网页为例。

淘宝：淘宝网是亚太地区较大的网络零售、商圈，由阿里巴巴集团在2003年5月创立。淘宝网是中国深受欢迎的网购零售平台，拥有近5亿的注册用户数，每天有超过6000万的固定访客，同时每天的在线商品数已经超过了8亿件，平均每分钟售出4.8万件商品。随着淘宝网不断地改进和创新，网站界面设计画面更加简洁。

虽然中国互联网起步较晚，但是跟世界上的发展历程也是差不多的，2005年前后在淘宝网其整个的按钮比较立体化，但是其页面的按钮、排版的厚度、高光、阴影的排版是比较冗杂，比较扁平化，容易让用户看不到重点，无法让用户一下子找到自己心仪的商品信息。且搜索栏功能不被重视，感受不到实际的用处，让用户无法直接看到重点。

2005 年前后

但是看2013年前后来的淘宝网的页面设计，其购物分类都罗列的比较清晰卖商品的功能更加的完善，同样其搜索栏也有这非常明显的变化，方便用户搜索。

2013年前后

2022年前后，商品的展示效果非常的清晰，比较符合大众审美。

2022年前后

在产品分析的过程中，还有很多的地方需要注意——用户习惯，每个行业都有每个行业的用户习惯。举个例子：

电商平台：淘宝、京东、天猫、苏宁

为了用户习惯性操作需要，客户心理的变化需求，其电商平台的页面布局的主体颜色一般为暖色调，且顶部搜索栏比较大，左边选项卡为商品分类，中间设置广告栏。

淘宝京东天猫苏宁品牌官方网页：纪梵希、迪奥、香奈儿

一般的品牌logo居中，下面布局为商品导航，产品详情大概位置布局设置都比较相同。

三、网页设计发展前景

网络公司：专门做网站的，一般以量为主，加班较多，但有提成，里面的设计师最高职位也就是设计部门经理，然后慢慢升管理层。当然，这是对有职位空缺的企业来说的，也有做一辈子网页设计的，和销售一样，是中国最好赚钱的企业，每个网站佣金5，设计师可以月收入万。

私企：为公司网站和维护，包括一些购物网络、网站重复布局，这不利于设计本身的发展，工作相对轻松，没有压力，而且对员工要求更全面，设计、切割图甚至代码都要理解，做两年或三年，就变得全面了，但不能提高设计水平，如果是小企业的话，对未来发展没有好处。

广告公司：专门设计高端的网站，特别要求会flash技术。加班很频繁，工资也很高，对平面设计也有要求，发展前景不错，但能力不够的话，压力会很大。

1.薪资水平

网页设计是一个比较独立的岗位，需求量比较大，一线、二线城市城市的平均薪资水平在8-1W左右，三线、四线城市也能有6-8K，具体可以在BOSS直聘、前程无忧、智联招聘、拉勾网等招聘网站看看这些岗位需求。对薪资要求更甚者，可以往UI方向深造。

2.职业发展

网页设计师：制作客户需求网页效果图、网站、多个终端。

项目负责人：3-5年随着网页制作技术经验积累，可以统筹整个部门运作。

行业顶尖：专研一门拿手技能，成为领域佼佼者。

四、静态页面和动态页面

如何区分静态与动态页面呢？

静态页面没有数据的交互，制作速度快，成本低，但不宜修改，更新费事；如：星巴克官方网页

动态页面有数据的交互，如贴吧、QQ空间、微博、NGA论坛、网易新闻等网站平台。

五、网页设计需要具备的能力

1.常用工具：

Photoshop的界面设计、像素大厨的页面标注、Axure RP 8.0的交互原型图、Hbui lder X 的代码（div+css）

2.审美能力：

多看：在整体的排版设计上简约整洁，在学习的过程中，可以多去找一些比较优秀的网页设计师，观摩学习他们的作品。

多懂：在观察设计的过程中，要了解这个设计师在设计过程中所使用的方法，譬如色彩的搭配，为什么要这样搭配，这样搭配的优势是什么？

多练：可以根据不同的风格进行设计、排版多做两版，然后进行对比，找出每一个设计中的优劣，然后在进行修正。

标签：

相关文章： 2020新纪元  渠道岗位是什么意思  淘宝寄件支持众邮快递吗？  品牌战略与策略：塑造企业竞争力的关键  百度技术培训中心，双倍赋能，你准备好了吗？,网站上线需要seo吗  竞技游戏展示工作室网站模板  龙岩SEO服务：关键词优化，如何提升网站排名？,网站霸屏推广怎么选择  企业网络营销新引擎，站群系统领航未来。  网站排名加速器：SEO优化利器  微信红包能发200以上吗？  波音公司在多重风险困扰中宣布将裁员10%  十大网站建设公司  抖音搜索排名如何提升？  “百度网盘极速下载神器”  如何在小红书上编辑图片？  京东e卡如何使用？  加入广告联盟营销有什么好处？联盟营销有哪些优势？  优化关键词，提升网站流量，快速登顶热搜！  一键加速，Win10焕新升级  系统优化大师绿色版，深度清理，你做到了吗？,罗平咨询网站建设内容  大冶SEO，高效优化专家  阿里巴巴店铺怎么运营（运营策略和方法）  关键词霸屏，SEO神器，流量翻倍，赢在起跑线！  企石SEO优化，网站建设升级  tj房间酒店指什么  襄阳抖音外包审核公司有哪些要求？  抖音引流到微信怎么做？分享6个方法！  年假的请假事由怎么写  响应式电子商务公司网站模板  全网推广，助力品牌腾飞！  江门新站SEO秘籍：快速提升排名  网富推广，双倍收益，你准备好了吗？,河池seo公司参考火星  国企内部招聘是什么意思  轻松创作，AI助你一“键”成章！  人工智能将如何重新定义内容创作的未来？  淘宝网店转让价格怎么定？关键参考因素有哪些？  sku和spu在电商中的含义  教育部召开2024年教师队伍建设工作部署会河南一女子躲后备箱为闺蜜准备生日惊喜，打开后闺蜜被吓得逃跑  百度李彦宏发全员邮件 宣布新一轮干部轮岗  商丘SEO公司价格如何？哪家性价比高？  威海抖音SEO推广公司哪家好？收费情况如何？  站群软件选哪家？技巧助流量翻倍！  高效推广，精准触达，百度助力品牌腾飞  双CMS，内容管理系统哪家强？,医疗行业广告推广营销  SEO排名关键因素盘点  “创新网站建设，一站式解决方案平台”  “大小写通吃，搜索加速神器”  小红书卖虚拟资料，非常简单的一本万利学霸笔记项目，轻松就能收益  网络世界的推手  百度关键词推广费用一览