网页设计

网页设计包括网站生产和维护中的许多不同技能和学科。 Web设计的不同领域包括Web图形设计；用户界面设计（UI设计）;创作，包括标准化代码和专有软件；用户体验设计（UX设计）；和搜索引擎优化。尽管有些设计师会涵盖所有人，但许多人通常会在涵盖设计过程的各个方面的团队中工作。 “ Web Design”一词通常用于描述与网站的前端（客户端）设计有关的设计过程，包括编写标记。 Web设计在更广泛的Web开发范围内部分重叠了Web工程。预计网页设计人员将对可用性有意识，并了解Web可访问性指南。

历史

1988–2001

尽管Web Design具有相当近期的历史，但它可以链接到其他领域，例如图形设计，用户体验和多媒体艺术，但从技术的角度来看更恰当地看到。它已成为人们日常生活的很大一部分。很难想像没有动画图形，不同风格的版式，背景，视频和音乐的互联网。网络于1991年8月6日宣布； 1992年11月， CERN是第一个在万维网上直播的网站。在此期间，网站是通过使用网站上创建数字的<table>标签构建的。最终，Web设计师能够围绕它找到自己的方式，以创建更多的结构和格式。在早期历史上，网站的结构脆弱且难以包含，因此很难使用它们。 1993年11月， AliWeb是有史以来第一个创建的搜索引擎（像网络的索引一样）。

网络设计的开始

1989年，蒂姆·伯纳斯·李（Tim Berners-Lee）在CERN工作时提议创建一个全球超文本项目，后来被称为万维网。从1991年到1993年，万维网诞生了。可以使用简单的线模式Web浏览器查看仅文本 HTML页面。 1993年，马克·安德森（Marc Andreessen）和埃里克·比娜（Eric Bina）创建了马赛克浏览器。当时有多个浏览器，但是其中大多数是基于Unix的且自然而然的文本。没有集成的图形设计元素（例如图像或声音）的整合方法。马赛克浏览器打破了这种模具。 W3C成立于1994年10月，以“通过开发促进其演变并确保其互操作性的共同协议来带领万维网发挥其全部潜力”。这使任何一家公司都不愿垄断专有的浏览器和编程语言，这可能会改变整个万维网的效果。 W3C继续设定标准，如今可以通过JavaScript和其他语言看到。 1994年，Andreessen成立了Mosaic Communications Corp.，后来被称为Netscape Communications ， Netscape 0.9浏览器。 Netscape创建了自己的HTML标签，而无需考虑传统标准过程。例如，Netscape 1.1包含用于更改背景颜色的标签，并在网页上使用表格格式化文本。从1996年到1999年，随着微软和Netscape争取最终的浏览器优势，浏览器战争开始了。在此期间，该领域有许多新技术，尤其是级联样式表， JavaScript和Dynamic HTML 。总体而言，浏览器竞赛确实导致了许多积极的创造，并帮助网络设计快速发展。

网页设计的发展

1996年，微软发布了其第一个竞争性浏览器，该浏览器具有自己的功能和HTML标签。这也是第一个支持样式表的浏览器，当时该浏览器被视为一种晦涩的创作技术，如今已成为Web Design的重要方面。表格的HTML标记最初旨在显示表格数据。但是，设计师很快意识到使用HTML表来创建复杂的多列布局的潜力，否则这些布局是不可能的。目前，由于设计和良好的美学似乎优先于良好的标记结构，因此很少关注语义和网络访问性。 HTML站点的设计选项受到限制，而较早版本的HTML也是如此。为了创建复杂的设计，许多网页设计师必须使用复杂的表结构，甚至使用空白的垫片.gif映像来阻止空表单元格塌陷。 W3C于1996年12月推出了CSS ，以支持演示和布局。这允许HTML代码是语义的，而不是语义和表达式和改进的Web访问性，请参见无录音Web Design 。

1996年，开发了Flash （最初称为FuturesPlash）。当时，与现在相比，闪存内容开发工具相比相对简单，使用基本布局和绘图工具，有限的ActionScript先驱和时间表，但是它使Web设计人员能够超越HTML的点，而动画GIF和JavaScript 。但是，由于Flash需要插件，因此许多Web开发人员避免使用它，因为担心由于缺乏兼容性而限制其市场份额。取而代之的是，设计师恢复为GIF动画（如果他们完全不使用运动图形放弃）和javaScript作为小部件。但是Flash的好处使其在特定目标市场中足够受欢迎，最终使其成为绝大多数浏览器的方式，并且足够强大，可以用于开发整个网站。

第一次浏览器战争的结尾

1998年，Netscape根据开源许可发布了Netscape Communicator代码，使成千上万的开发人员能够参与改进软件。但是，这些开发人员决定从头开始启动Web的标准，这指导了开源浏览器的开发，并很快扩展到完整的应用程序平台。 Web标准项目是由HTML和CSS标准组成的，并促进了浏览器的遵守情况。为了测试浏览器以符合Web标准，创建了诸如酸1 ，酸2和酸3之类的程序。 2000年，Internet Explorer发布了Mac，这是第一个完全支持HTML 4.01和CSS 1的浏览器1.它也是第一个完全支持PNG图像格式的浏览器。到2001年，在Microsoft为Internet Explorer推广的活动之后，Internet Explorer已达到Web浏览器使用量的96％，这表明Internet Explorer没有真正的竞争，这表明了第一场浏览器战争的结束。

2001–2012

自21世纪初以来，网络已越来越融入人们的生活中。随着这种情况的发生，网络的技术也在继续发展。人们使用和访问网络的方式也发生了重大变化，这改变了网站的设计方式。

自浏览器战争结束以来，新浏览器已发布。其中许多是开源的，这意味着它们倾向于更快地发展，并且更支持新标准。许多人认为新选项比微软的Internet Explorer更好。

W3C已发布了HTML（ HTML5 ）和CSS（ CSS3 ）的新标准，以及新的JavaScript API ，每个API都是一个新的但个人标准。虽然术语HTML5仅用于参考新版本的HTML和一些JavaScript API，但使用它来参考整个新标准套件（HTML5，CSS3和JavaScript）已变得常见。

2012年及以后

随着3G和LTE互联网覆盖的改善，网站流量的很大一部分变得移动生成。这影响了网络设计行业，将其推向了简约，减轻和简单的风格。特别是出现了“移动第一”方法，这意味着首先使用面向移动设备的布局来创建网站设计，然后将其调整为更高的屏幕尺寸。

工具和技术

Web设计人员根据所涉及的生产过程的哪一部分使用各种不同的工具。这些工具随着时间的推移按更新的标准和软件进行更新，但其背后的原理仍然相同。 Web设计人员使用矢量和栅格图形编辑器来创建Web形式的图像或设计原型。可以使用Wysiwyg 网站构建器软件或内容管理系统创建网站，也可以以与创建第一个网页相同的方式手工编码单个网页。 Web设计人员可能会使用其他工具，包括标记验证器和其他测试工具，以确保其网站符合Web可访问性指南。

UX设计

Web设计中的一种流行工具是UX Design，它是一种设计产品以执行准确用户背景的艺术类型。 UX设计非常深。 UX不仅仅是网络，它非常独立，其基本原理可以应用于许多其他浏览器或应用程序。网页设计主要基于基于Web的事物。 UX可以重叠网页设计和设计。 UX Design主要集中于较少基于Web的产品。

技能和技术

营销和沟通设计

网站上的营销和通信设计可能会确定哪些对目标市场有效。这可以是一个年龄段或特定的文化群。因此，设计师可能会了解其受众的趋势。设计师还可能了解他们正在设计的网站类型，例如，（B2B）企业对企业网站的设计注意事项可能与针对消费者的网站（例如零售或娱乐网站）有很大差异。可以仔细考虑以确保网站的美学或整体设计不会与内容的清晰度和准确性或Web导航的易于相同，尤其是在B2B网站上。设计师还可以考虑该网站所代表的所有者或业务的声誉，以确保对其有利。网页设计人员通常监督所有有关其工作方式或在事物上运作的网站。他们不断地在幕后网站上更新和更改所有内容。他们所做的所有元素都是Web的文本，照片，图形和布局。在开始在网站上工作之前，网页设计师通常与客户约会，讨论布局，颜色，图形和设计。网页设计师将大部分时间都花在设计网站上，并确保速度正确。网页设计人员通常会从事测试和工作，营销，并与其他设计师进行有关布置网站并找到适合网站的元素的沟通。

用户体验设计和交互式设计

用户对网站内容的理解通常取决于用户对网站工作原理的理解。这是用户体验设计的一部分。用户体验与网站上的布局，清晰的说明和标签有关。用户了解他们如何在网站上进行交互的程度也可能取决于网站的交互式设计。如果用户感知到网站的有用性，则他们更有可能继续使用它。熟练且精通网站使用的用户可能会发现更独特但直观或不太用户友好的网站界面仍然有用。但是，经验较少的用户不太可能看到较不直观的网站界面的优势或有用性。这推动了更普遍的用户体验的趋势，并易于访问以适应尽可能多的用户。用户界面设计中考虑了许多用户体验设计和交互式设计。

如果不是高级编码语言技能，则高级交互式功能可能需要插件。选择是否使用需要插件的交互性是用户体验设计中的一个关键决定。如果插件没有预装大多数浏览器，那么用户既没有知识又不耐心地安装插件以访问内容的风险。如果该功能需要高级编码语言技能，那么与该功能增加的增强量相比，代码的时间或金钱可能太成本高昂，可以增加用户体验。还有一个风险，即先进的交互性可能与较旧的浏览器或硬件配置不相容。对于用户体验而言，发布不可靠工作的函数可能比没有尝试更糟糕。它取决于目标受众是否可能需要或值得任何风险。

渐进式增强

渐进式增强是Web设计中的一种策略，它将重点放在Web内容上，使每个人都可以访问网页的基本内容和功能，而具有额外浏览器功能或更快的Internet访问的用户则可以接收增强版本。

在实践中，这意味着通过HTML提供内容，并在技术上可能通过CSS应用样式和动画，然后通过JavaScript应用进一步的增强功能。页面的文本立即通过HTML源代码加载，而不必等待JavaScript启动和加载内容随后启动和加载内容，该内容允许内容在最小加载时间和带宽以及基于文本的浏览器中可读取，并最大程度地提高向后兼容性。

例如，基于MediaWiki的网站在内，包括Wikipedia使用渐进式增强，因为它们仍然可用，而JavaScript甚至CSS也被停用了，因为页面的内容包含在页面的HTML源代码中，而Everippame则依靠JavaSprame依靠JavaSpripe来加载JavaSpripe，以加载Javascript。 '随后的内容；出现一个空白页，javaScript停用了。

页面布局

用户界面设计的一部分受页面布局质量的影响。例如，设计师可以考虑在设计布局时在不同页面上是否应保持一致的页面布局。页面像素宽度也可能被认为对于在布局设计中对齐对象至关重要。最受欢迎的固定宽度网站通常具有相同的集合宽度，可在当前最受欢迎的显示器大小上匹配当前最受欢迎的屏幕分辨率。大多数页面也与较大屏幕上的美学有关的关注点也与中心对齐。

流体布局在2000年左右越来越受欢迎，以允许浏览器根据读取器屏幕的详细信息（窗口尺寸，相对于窗口的字体大小等），对流体布局进行特定于用户的布局调整。它们在页面布局设计原理和编码技术中的基于HTML-table的布局和基于网格的设计的替代方案的替代方案，但采用非常慢。这是由于屏幕读取设备和窗户尺寸的不同考虑，设计师无法控制。因此，可以将设计分解为发送到浏览器的单元（侧栏，内容块，嵌入式广告区域，导航区域），并尽其所能将其安装到显示窗口中。尽管这样的显示通常可能会改变主要内容单元的相对位置，但侧边栏可能位于正文文本下方，而不是其侧面。与不适合设备窗口的硬编码基于网格的布局相比，这是一个更灵活的显示。特别是，内容块的相对位置可能会发生变化，而将内容留在不受影响的块中。这也可以最大程度地减少用户水平滚动页面的需求。

响应式Web设计是一种基于CSS3的较新方法，并且通过增强CSS的使用，在页面样式表中更深层次的每个设备规范级别@media规则。 2018年3月，Google宣布将推出移动优先索引。使用响应设计的站点可以很好地确保它们符合这种新方法。

排版

网页设计人员可能会选择将各种网站字体限制为类似样式的少数几种，而不是使用多种字体或类型样式。大多数浏览器都会识别出特定数量的安全字体，设计人员主要用于避免并发症。

字体下载后来包含在CSS3字体模块中，此后已在Safari 3.1，Opera 10和Mozilla Firefox 3.5中实施。随后，这增加了对网络版式的兴趣，以及字体下载的使用。

大多数站点布局都包含负空间，将文本分解为段落，还避免了中心对准文本。

动态图形

页面布局和用户界面也可能会受到运动图形的使用。是否使用运动图形的选择可能取决于网站的目标市场。可以预期运动图形，或者至少在以娱乐为导向的网站上获得运动图形。但是，如果仅出于娱乐或装饰目的，则具有更严重或正式的兴趣的网站受众（例如商业，社区或政府）可能会发现动画并分散注意力。这并不意味着与内容相关的动画或视频演示文稿无法增强更严重的内容。无论哪种情况，运动图形设计都可以使更有效的视觉效果或分散视觉效果之间的区别。

网站访问者未启动的运动图形可以产生可访问性问题。万维网联盟可访问性标准要求该网站访问者能够禁用动画。

代码质量

网站设计人员可能认为符合标准是一个好习惯。这通常是通过指定元素在做什么的描述完成的。不符合标准可能不会使网站无法使用或容易出错，但是标准可能与正确的页面布局有关，以确保可读性以及确保编码元素已适当关闭。这包括代码中的错误，一个更有条理的代码布局，并确保正确识别ID和类。编码不佳的页面有时被通话称为标签汤。只有在做正确的Doctype声明时才能通过W3C验证，该声明用于突出代码中的错误。该系统标识不符合Web设计标准的错误和区域。然后可以由用户纠正此信息。

生成的内容

网站的生成有两种方式：静态或动态上。

静态网站

静态网站为静态网站的每个页面存储一个唯一的文件。每次请求该页面时，都会返回相同的内容。在网站设计期间，创建了一次此内容。它通常是手动撰写的，尽管某些网站使用自动创建过程，类似于动态网站，该网站的结果长期存储为已完成的页面。这些自动创建的静态站点在2015年左右变得更加流行，例如Jekyll和Adobe Muse等发电机。

静态网站的好处是它们更容易托管，因为他们的服务器只需要提供静态内容而不是执行服务器端脚本。这需要较少的服务器管理，并且暴露安全孔的机会更少。他们还可以在低成本服务器硬件上更快地提供页面。随着廉价的网络托管扩展到还提供动态功能，这一优势变得不那么重要，虚拟服务器以低成本提供了高性能的高性能。

几乎所有网站都有一些静态内容，因为即使在具有高度动态页面的网站上，图像和样式表等支持资产通常都是静态的。

动态网站

动态网站是随机生成的，并使用服务器端技术生成网页。他们通常从一个或多个后端数据库中提取内容：有些是关系数据库中的数据库查询以查询目录或总结数字信息，而其他数据库可以使用文档数据库，例如MongoDB或NOSQL来存储较大的内容单位。，例如博客文章或Wiki文章。

在设计过程中，通常使用静态页面对动态页面进行模拟或线框架。开发动态网页所需的技能集比静态页面要广泛得多，涉及服务器端和数据库编码以及客户端接口设计。因此，即使是中型动态项目也几乎总是团队合作。

当动态网页首次开发时，通常将它们直接用Perl ， PHP或ASP等语言进行编码。其中一些（尤其是PHP和ASP）使用了“模板”方法，其中服务器端页面类似于完成的客户端页面的结构，并且将数据插入了由“标签”定义的位置。这比用纯粹的程序编码语言（例如Perl）编码更快。

现在，这两种方法已被许多以应用程序管理系统等高级以应用程序为中心的工具（例如内容管理系统）取代。这些建立在通用编码平台之上，并假设存在一个网站以根据几种经过良好认可的模型之一提供内容，例如时间序列博客，主题杂志或新闻网站，Wiki或用户论坛。这些工具使该网站的实现非常容易，并且纯粹是基于组织和设计的任务，而无需任何编码。

可以通过网站本身以及使用第三方软件来编辑内容本身（以及模板页面）。编辑所有页面的能力仅提供给特定类别的用户（例如，管理员或注册用户）。在某些情况下，允许匿名用户编辑某些Web内容（例如，在论坛上 - 添加消息）。 Wikipedia是具有匿名更改的站点的一个示例。

网页设计中的技术沟通

在有关技术传播方面的良好实践的研究中，作者探讨了良好的技术沟通的各个方面。他们概述了他们的测量方法称为通信系数，这是代表复杂技术思想交流有效性的数字。他们特别陈述了他们认为导致良好技术交流的三种哲学：

哲学1：我们交流的方式会影响他人对我们的工作的看法。当我们对其进行良好的交流时，当我们交流较差时，他们认为我们的工作更加有效和有用。
哲学2：个人根据许多个人因素来判断沟通质量，包括他们的经验，偏好，技术背景，语言背景和专业团体的会员资格。
哲学3：在所有人际关系互动期间，沟通在不同程度上都很重要。

作者没有明确指示特定的应用，但是它们为有效的技术交流提供了清晰简洁的框架。

在有关隐私政策的其他研究中，作者提出了隐私协议的替代方法。他们提出了一种更具视觉，基于用户的方法，而不是经典的长期措辞隐私协议。这种方法涉及与类别有关的“隐私评级”，并且显然是层次代表的。这样的表示形式清楚地表明了哪些信息正在共享以及网站以更友好的方式的安全性。他们的结果表明，他们的样本组总体上有积极的反应，并概述了这种结构在网站设计中的实用性。

首页设计

包括Jakob Nielsen和Kyle Soucy在内的可用性专家经常强调主页设计，以获得网站成功，并断言主页是网站上最重要的页面。尼尔森，雅各布； Tahir，Marie（2001年10月），首页可用性：50个网站解构，新车手出版， ISBN 978-0-7357-1102-0但是，到2000年代的从业人员开始发现，越来越多的网站流量绕开了主页，直接通过搜索引擎，电子通讯和RSS提要直接进入内部内容页面。导致许多从业者认为主页不如大多数人想像的重要。 Jared Spool在2007年辩称，网站的主页实际上是网站上最不重要的页面。

在2012年和2013年，旋转木马（也称为“滑块”和“旋转横幅”）已成为主页上非常受欢迎的设计元素，通常用于展示限制空间中的特色或最新内容。许多从业者认为，轮播是一种无效的设计元素，并损害了网站的搜索引擎优化和可用性。

职业

创建网站有两个主要工作：网页设计师和网络开发人员，他们经常在网站上紧密合作。网页设计人员负责视觉方面，其中包括网页的布局，着色和版式。 Web设计师还将拥有HTML和CSS等标记语言的工作知识，尽管他们的知识程度因一个网页设计师而异。尤其是在较小的组织中，一个人将需要必要的技能来设计和编程完整的网页，而较大的组织可能仅对视觉方面负责网页设计师。

可能参与网站创建的其他工作包括：

图形设计人员为网站创建视觉效果，例如徽标，布局和按钮
互联网营销专家，可以通过在互联网上使用营销和促销技术来通过将观众定位到网站的战略解决方案来维持网络的影响力
SEO作家研究并建议将正确的单词纳入特定网站，并使网站更容易访问并在众多搜索引擎上找到
互联网撰稿人创建页面的书面内容，以吸引网站的目标观众
用户体验（UX）设计师合并了以用户为中心的设计注意事项的各个方面，其中包括信息体系结构，以用户为中心的设计，用户测试，交互设计以及偶尔视觉设计。