初识网页设计（PC端界面设计）
时间：2023-10-15 18:06:01 | 来源：网站运营
时间：2023-10-15 18:06:01 来源：网站运营
初识网页设计（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.审美能力：
多看：在整体的排版设计上简约整洁，在学习的过程中，可以多去找一些比较优秀的网页设计师，观摩学习他们的作品。
多懂：在观察设计的过程中，要了解这个设计师在设计过程中所使用的方法，譬如色彩的搭配，为什么要这样搭配，这样搭配的优势是什么？
多练：可以根据不同的风格进行设计、排版多做两版，然后进行对比，找出每一个设计中的优劣，然后在进行修正。
在线咨询
