初识网页设计（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.审美能力：

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

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

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

标签：

相关文章： 精准定位，高效触达，转化提升  如何挑选靠谱的泰州SEO公司？哪家值得信赖？,关键词排名活动策划  “畅聊未来，智享免费AI”  新声西班牙女神，魅力绽放  营销的方式都有哪些  百应应用市场  这个自动写文章AI，能开启写作新纪元吗？  房地产七夕节策划方案  手机网站SEO关键词优化技巧  周有贵SEO：数字营销领航者  hr问为什么从上一家离职怎么回答  SEO优化，网络推广，双管齐下，流量翻倍！  微博推广是什么？  AI写作工具改写利器，文字新生！  网站SEO优化方案编写方法  泉城全网闪耀，一网打尽商机  抖音搜索关键词怎么高效使用？  关键词快速下滑排名  SEO优化常见问题及解决方案：问题速解，策略高效  品牌飞跃，一“站”之力  如何快速通过paypal认证？注意事项有哪些？  东莞SEO关键词优化精炼版  快手直播如何实现盈利分成？  行业数据分析去哪个网站  珠海SEO公司，助力企业网站流量翻倍，排名飙升！  合肥一男子点击了网页“小广告”之后，被骗10万元王菲有多嫌弃李亚鹏，采访时杨澜都看不下去了  “新百度账号，轻松注册！”  创新医院营销，精准触达患者需求  小程序商城如何选择第三方平台  咸宁抖音外包审核公司有哪些要求？  微信小程序在使用的时候要注意用哪一版  站外推广：拓展网络影响力  轻松制新链接，一键推广无忧！  沈阳SEO公司咨询，火星如何操作？,中山高品质seo  荣耀公司取得壁纸显示方法及相关装置专利，简化了开发流程，节省了人力成本，一定程度上降低了风险11年前被父亲逼迫，赤身在大雪中奔跑的4岁男孩，如今有何成就？  站群SEO秘籍：高效优化策略全解析  智能实时检测，秒辨异常！  网站盈利之道  深圳产品，全网热推新势力  2025AI行业前瞻报告：Al行业关键时刻，瓶颈与机遇并存  淘宝健康中心记录如何删除？健康度在哪里看？  高效营销方案速成法  晋中SEO关键词优化公司有哪些？  重庆赛力斯申请网页加载技术专利，提高网页加载效率88后女子被4岁小孩喊奶奶，心碎称不是第1次认错，网友：很像奶奶  山门双峰，张岩石书画，谁解其中意？,安顺营销网络推广方案  高效倒序采集，轻松打造精品网站  SEO优化与SEM推广有何关联？,如何找素材选品网站推广  火车头采集器破解版，内核关键词何在？,宜春低价网站建设  用2.0的方式拯救客户关系管理  域名快送站