网页设计

网站设计涵盖了网站生产和维护中的许多不同技能和学科。网页设计的不同领域包括网页图形设计、界面设计 ;、创作，包括标准化代码和专有软件、用户体验设计和搜索引擎优化。通常，许多人会组成团队来涵盖设计过程的不同方面，尽管有些设计师会涵盖所有方面。

“网页设计”通常用于描述与网站的前端（客户端）设计有关的设计过程，包括写作标记。网页设计部分重叠Web 开发范围更广的Web工程。Web设计人员应该对可用性有所了解，如果他们的角色涉及创建标记，那么他们也应该与Web辅助功能指南保持最新。

Web设计人员根据所涉及的生产过程的不同部分使用各种不同的工具。这些工具会随着时间的推移通过较新的标准和软件进行更新，但其背后的原理仍然相同。Web设计人员同时使用矢量和栅格图形编辑器来创建Web格式的图像或设计原型。用于创建网站的技术包括HTML和CSS等W3C标准，这些标准可以由所见即所得编辑软件进行手工编码或生成。Web设计人员可能使用的其他工具包括标记验证器和其他可用性和可访问性的测试工具，以确保其网站符合Web可访问性准则。

网站上的营销和传播设计可能会确定哪些产品适用于其目标市场。这可以是年龄段或特定文化背景；因此，设计师可以了解其受众的趋势。设计师还可以理解他们正在设计的网站的类型，例如，B2B 企业对企业网站的设计考虑因素可能与以消费者为目标的网站（例如零售或娱乐网站）有很大差异。可能需要仔细考虑以确保网站的美观或整体设计不会与内容的清晰度和准确性或网络导航的便捷性相冲突，特别是在B2B网站上。设计师还可以考虑网站所代表的所有者或企业的声誉，以确保它们受到良好的刻画。

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

高级交互功能可能需要插件如果不是高级的编码语言技能。在用户体验设计中，选择是否使用需要插件的交互性是至关重要的决定。如果大多数浏览器未预装该插件，则可能会导致用户既不知道如何安装插件也不只是为了访问内容而耐心。如果该功能需要高级编码语言技能，则与该功能将增加用户体验的增强功能相比，编码的时间或金钱可能太昂贵。还存在高级交互性可能与旧版浏览器或硬件配置不兼容的风险。对于用户体验而言，发布无法可靠运行的功能比不进行尝试可能更糟。这取决于目标受众

用户界面设计的一部分受页面布局质量的影响。例如，设计者可以在设计布局时考虑站点的页面布局在不同页面上是否应保持一致。页面像素宽度也可能被认为对于在布局设计中对齐对象至关重要。最受欢迎的固定宽度网站通常具有相同的设置宽度，以与当前最受欢迎的浏览器窗口相匹配，并且具有当前最受欢迎的屏幕分辨率和当前最受欢迎的显示器尺寸。对于大屏幕上的美观问题，大多数页面也居中对齐。

在页面布局设计原理和编码技术方面，流体布局在2000年左右逐渐流行为基于HTML表格的布局和基于网格的设计的替代方法，但采用起来非常缓慢。^[注释1]这是由于考虑了屏幕读取设备和设计人员无法控制的可变窗口大小。因此，设计可以分解为多个单元（侧边栏，内容块，嵌入式广告区域，导航区域）发送给浏览器，并且浏览器将尽其所能将其安装在显示窗口中。由于浏览器确实能够识别阅读器屏幕的详细信息（窗口大小，相对于窗口的字体大小等），因此浏览器可以针对流体布局而不是固定宽度布局进行用户特定的布局调整。尽管这样的显示可能经常会更改主要内容单元的相对位置，但侧栏可能会移动到正文下方，而不是正文的旁边。与不适合设备窗口的基于硬编码网格的布局相比，这是一种更加灵活的显示。特别地，内容块的相对位置可以改变，同时使块内的内容不受影响。这也使用户水平滚动页面的需求降至最低。

响应式网页设计是一种基于CSS3的更新方法，通过增强使用CSS @media规则，页面样式表中的每个设备规范都有更深的层次。2018年3月，谷歌宣布将推出移动优先索引。使用响应式设计的网站位置优越，可确保它们符合这种新方法。

Web设计人员可以选择将网站字体的种类限制为仅几种相似样式的字体，而不是使用多种字体或字体样式。大多数浏览器可以识别特定数量的安全字体，设计人员主要使用这些字体以避免复杂情况。

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

大多数网站布局都包含负空格，以将文本分成多个段落，并避免居中对齐文本。

页面布局和用户界面也可能会受到使用动态图形的影响。是否使用动态图形的选择可能取决于网站的目标市场。运动图形可能是面向娱乐的网站，或者至少可以更好地接收。但是，如果网站仅出于娱乐或装饰目的，则对目标人群具有更严重或正式的兴趣（例如企业，社区或政府）可能会发现不必要的动画和分散注意力。这并不意味着不能通过与内容相关的动画或视频演示来增强更严肃的内容。在任何一种情况下，动态图形设计都可能在更有效的视觉效果或分散注意力的视觉效果之间产生差异。

站点访问者未启动的动态图形可能会导致可访问性问题。万维网联盟的可访问性标准要求站点访问者能够禁用动画。

网站设计人员可能认为符合标准是一种好的做法。通常通过指定元素正在执行的描述来完成此操作。不符合标准可能不会导致网站无法使用或容易出错，但是标准可能与页面的正确布局有关，以提高可读性，并确保适当地关闭了编码元素。这包括代码错误，代码的组织结构更合理以及确保正确标识了ID和类。编码不良的页面有时俗称“ 标签汤”。通过W3C进行验证仅当做出正确的DOCTYPE声明（用于突出显示代码中的错误）时才能执行此操作。系统识别出不符合网页设计标准的错误和区域。然后，用户可以纠正此信息。

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

静态网站为静态网站的每个页面存储xxx文件。每次请求该页面时，都会返回相同的内容。在网站设计期间，仅创建一次此内容。它通常是手动创作的，尽管某些网站使用类似于动态网站的自动创建过程，其结果作为完整的页面长期存储。这些自动创建的静态网站在2015年左右变得越来越流行，其生成器包括Jekyll和Adobe Muse。

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

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

动态网站是动态生成的，并使用服务器端技术来生成网页。他们通常从一个或多个后端数据库中提取内容：一些是跨关系数据库的数据库查询，用于查询目录或汇总数字信息，其他则可能使用文档数据库（例如MongoDB或NoSQL）来存储较大的内容单元，例如博客文章或Wiki文章。

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

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

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

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

包括Jakob Nielsen和Kyle Soucy 在内的可用性专家经常强调主页设计对网站成功的影响，并断言主页是网站上最重要的页面。然而，进入2000年代的从业者开始发现，越来越多的网站流量绕过了首页，而是通过搜索引擎，电子通讯和RSS feed直接进入内部内容页面。导致许多从业者争辩说主页比大多数人认为的重要。贾里德·斯普尔（Jared Spool）在2007年辩称，网站首页实际上是网站上最不重要的页面。

在2012年和2013年，轮播（也称为“滑块”和“旋转横幅”）已成为首页上非常流行的设计元素，通常用于在狭窄的空间内展示特色或近期内容。许多从业者认为，轮播是无效的设计元素，会损害网站的搜索引擎优化和可用性。

创建网站涉及两个主要工作：Web设计人员和Web开发人员，他们通常在网站上紧密合作。网页设计师负责视觉方面，包括网页的布局，着色和版式。Web设计人员也将具有诸如HTML和CSS之类的标记语言的实用知识，尽管他们的知识程度因Web设计人员而异。特别是在较小的组织中，一个人将需要设计和编程整个网页所需的技能，而在较大的组织中，可能只有一名Web设计师负责视觉方面。

网站创建可能涉及的其他工作包括：

• 平面设计师为网站创建视觉效果，例如徽标，布局和按钮
• Internet营销专家通过使用Internet上的营销和促销技术，通过针对目标观众到站点的战略解决方案来帮助维持网站的存在
• SEO作家研究并推荐将正确的词合并到特定网站中，并使该网站更易于访问并在众多搜索引擎中找到
• Internet撰稿人创建页面的书面内容，以吸引网站的目标观众
• 用户体验（UX）设计器结合了以用户为中心的设计注意事项，这些方面包括信息体系结构，以用户为中心的设计，用户测试，交互设计以及偶尔的视觉设计。