跳转到内容

英文维基 | 中文维基 | 日文维基 | 草榴社区

网页设计

本页使用了标题或全文手工转换
维基百科，自由的百科全书

网页设计（英語：Web design）涵盖了制作和维护网站的许多不同的技能和学科。它包含了网页图形设计、界面设计、编写标准化的代码和专有软件、用户体验设计，以及搜尋引擎最佳化。通常许多人以團隊協作的方式來工作，各自參與设计过程的不同方面；但有些设计师会参与到任一方面。[1] 网页设计这个术语通常用来描述与网站前端（客户端）设计相关的设计过程，包括编写标记语言。在更广泛的Web开发领域，网页设计与網絡工程（英语：web engineering）存在交集。网页设计师应该对網絡可用性（英语：Web usability）有一定的认识。如果他们的工作涉及到编写标记语言，那么他们也应该遵循網頁親和力的最新指引。

歷史

[编辑]
商店中的網頁設計書籍

1988–2001年

[编辑]

虽然网页设计约在30年前才面世，但它与许多领域都有聯繫，例如平面设计。从技术角度上来看，网页设计已经成为人们日常生活的重要组成部分。

网络和网页设计的开始

[编辑]

1989年，蒂姆·伯纳斯-李在歐洲核子研究組織工作期间提议创建一个全球超文本项目，后来被称为万维网。在1991年至1993年期间，万维网诞生了。可以使用简单的行模式浏览器查看纯文本页面[2]。 1993年，马克·安德森和埃里克·比納创建了Mosaic浏览器。当时有众多的浏览器，但它们大多数都是基于Unix并且侧重于纯文本，对图形或声音等图形设计元素没有集成的方法。而Mosaic浏览器打破了藩篱[3]。

万维网联盟成立于1994年10月，通过开发通用的协议促进互联网发展并确保其互操作性，来使万维网发挥它最大的潜力[4]。这阻碍了任何一家公司垄断一种浏览器或网页编程语言，对互联网后来的发展产生了深远的影响。W3C继续制定标准，现在JavaScript和其他语言都可以看到这些标准。

1994年，安德森成立了通信公司（Communications Corp.），后来被称为網景（Netscape Communications），并推出了Netscape 0.9浏览器。Netscape不采用传统的标准，创建了自己的HTML标签。例如，Netscape 1.1包含了更改背景颜色和网页上的表格格式化文本的标签。1996年至1999年期间，随着微软和網景争夺浏览器的统治地位，浏览器战争开始了。在此期间，该领域有许多新技术产生，特别是层叠样式表、JavaScript和動態HTML。总的来说，浏览器竞争确实带来了许多积极的创意，并帮助网页设计快速发展[5]。

演变

[编辑]

1996年，微软发布了第一款具有竞争力的浏览器，该浏览器有自己的功能和标签。它也是第一个支持样式表的浏览器，这在当时被认为是一种晦涩难懂的创作技术。[5] table的HTML标记最初是用来显示表格数据的。然而，设计人员很快意识到使用HTML table创建复杂的多栏布局的潜力，否则这些布局是不可能的。在这个时候，好的设计和美学似乎优先于好的标记结构，很少注意语义和網頁親和力。HTML网站的设计选项有限，对于早期版本的HTML更是如此。为了创建复杂的设计，许多网页设计师不得不使用复杂的表格结构，甚至使用空白的spacer .GIF图像来阻止空表格单元collapse。[6] CSS于1996年12月由W3C引入，以支持演示和布局。这使得HTML代码具有语义性，而不是语义和表示性，并改进了网页亲和力，请参阅無表格網頁設計。

1996年，Flash（最初被称为FutureSplash）问世。当时，Flash内容开发工具相对于现在来说相对简单，它使用了基本的布局和绘图工具、ActionScript的一个有限的前身和时间线，但它使网页设计师能够超越HTML、GIF动画和JavaScript。然而，由于Flash需要插件，许多Web开发人员因为担心缺乏兼容性会限制他们的市场份额而避免使用它。取而代之的是，设计师们转而使用GIF动画（如果他们没有完全放弃使用动态图形的话）和JavaScript来处理widget。但是Flash的优点使它在特定的目标市场中足够流行，最终大多数浏览器都能使用它，并且强大到可以用来开发整个网站。[6]

第一次浏览器大战的结束

[编辑]
主条目：瀏覽器大戰

1998年，Netscape在開源授權下发布了Netscape Communicator代码，使数千名开发人员能够参与改进软件。然而，他们决定从头开始，这指导了开源浏览器的开发，并很快扩展到一个完整的应用程序平台。[5] 網頁標準計劃成立，并通过创建Acid1、Acid2和Acid3测试，促进了浏览器对HTML和CSS标准的遵从。2000年对微软来说是重要的一年。Internet Explorer发布了Mac版本；这是第一个完全支持HTML 4.01和CSS 1的浏览器，提高了浏览器标准的门槛。它也是第一个完全支持PNG图像格式的浏览器。[5] 在此期间，网景被出售给了AOL，这被视为网景在浏览器大战中输给了微软的一个标志。[5]

2001–2012年

[编辑]

21世纪初以来，网络越来越融入人们的生活。因此互联网技术也在不断发展。人们使用和访问网站的方式也发生了重大变化，这也改变了网站的设计方式。

浏览器大战结束以来，涌现了许多新的浏览器。其中许多都是开源的，这意味着它们往往具有更快的开发速度，并且更支持新标准。许多人认为新的选择比微软的Internet Explorer更好。

W3C已经发布了HTML（HTML5）和CSS（CSS3）的新标准，以及新的JavaScript API，每一个都是新的但又各自独立的标准。虽然HTML5这个术语只是用来指代HTML的新版本和一些JavaScript API的新版本，但是用来指代整套新标准（HTML5、CSS3和JavaScript）的做法已经变得很常见了。

工具和技术

[编辑]

网页设计者根据他们参与工序的不同，选择各种各样不同的工具。虽然这些工具往往会随着新标准、新软件的出现而不断更新，但它们背后的原则是不变的。网页设计者使用矢量图形编辑器和点阵图形编辑器来绘制“网页格式图”，也叫做“设计原型”。 创建网站的技术包含了一些W3C标准，比如HTML和CSS。HTML和CSS既可以手动编写，也可以使用可视化编辑器来编辑。譬如，在使用WordPress内容管理系统搭建网站、制作网页时，可以运用页面编辑器插件来快速制作页面，从而实现无编码制作网页；知名的WordPress网页编辑器有Elementor、Beaver Builder等。 网页设计者还可能使用其他工具来保证他们的网站符合亲和力指引[7]，这些工具包括标记验证器[8]以及其他用于测试可用性和亲和力的工具。建立網站的技術包含了一些W3C標準，比如 HTML和 CSS。HTML和 CSS既可以手動編寫，也可以使用視覺化編輯器來編輯。譬如，在使用 WordPress 內容管理系統搭建網站、製作網頁時，可以運用頁面編輯器外掛程式來快速製作頁面，從而實現無編碼製作網頁；知名的 WordPress 網頁編輯器有Elementor、Beaver Builder等；可以運用 CSS 產生器外掛來協助視覺化的產出 CSS程式碼，知名的 CSS產生器外掛有 CSS Hero 與 YellowPencil 等。[9][10]

技能和方法

[编辑]

营销和沟通设计

[编辑]

一个网站的市场营销和沟通设计可以确定什么样的产品适合目标市场。目标市场可能是某一年龄段的人群或特定的文化链；因此设计师要理解其受众的趋势。设计者也要理解他们正在设计的网站的类型，这意味着，例如，B2B网站的设计考虑因素可能与针对消费者的网站（如零售或娱乐网站）有很大的不同。可能需要仔细考虑，以确保网站的美观或整体设计不会与内容的清晰度和准确性或网站导航的便捷性相冲突，[11] 特别是在B2B网站上。设计师也可能会考虑网站所有者或商业代表的声誉，以确保他们被描绘得有利。

用户体验设计与交互设计

[编辑]

用户对网站内容的理解往往取决于用户对网站工作原理的理解。这是用户体验设计的一部分。用户体验与网站的布局、明确的说明和标签有关。用户对如何在网站上进行交互的理解程度也取决于网站的互動設計。如果用户意识到网站的有用性，他们更有可能继续使用它。尽管熟练且精通网站使用的用户可能会觉得，一个与众不同但不太直观或用户友好的网站界面比较有用。但是，经验较少的用户不太可能看到一个不太直观的网站界面的优势或有用性。这推动了更加普遍的用户体验和易于访问的趋势，无论用户技能如何，都能够容纳尽可能多的用户。[12] 许多用户体验设计和交互式设计在用户界面设计中得到了考虑。

如果没有高级编程语言技能，高级交互功能可能需要插件。选择是否使用需要插件的交互性是用户体验设计中的一个关键决策。如果插件没有在大多数浏览器中预先安装，用户可能既不知道如何安装，也没有耐心安装插件来访问内容。如果该功能需要高级编程语言技能，那么与功能将提升用户体验的增强量相比，写代码在时间或金钱上可能成本太高。发布不可靠的功能对于用户体验而言可能比不尝试更糟糕。这取决于目标受众是否需要或值得冒险。

页面布局

[编辑]

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

流体布局（fluid layout）在2000年左右开始流行起来，作为HTML表格布局和网格布局的替代品，在页面布局设计原则和编码技术方面都是如此，但是采用起来非常缓慢。[note 1] 这是由于设计师无法控制屏幕阅读设备和不同的窗口大小。因此，一个设计可能会被分解成单元（侧边栏、内容块、嵌入式广告区域、导航区域），然后发送到浏览器，最好的方式是通过浏览器适配到显示窗口中。由于浏览器能够识别读取器屏幕的详细信息（窗口大小，相对于窗口的字体大小等），因此浏览器可以对流体布局进行用户特定的布局调整，但固定宽度布局就不行。虽然这样的显示可能经常改变主要内容单元的相对位置，但是侧栏可以在主体文本下方而不是在其侧面上移位。这种显示方式比起不能适配设备窗口的写死的基于网格的布局要更加灵活。特别是，内容块的相对位置可能会发生变化，同时不影响块内的内容。这也减少了用户水平滚动页面的需要。

响应式网页设计是一种基于CSS3的新方法，通过增强使用CSS @media规则，在页面样式表中提供更深层次的针对每种设备的规范。2018年3月，谷歌宣布将推出移动优先索引。[13] 使用响应性设计的站点能够很好地确保它们满足这种新方法。

字体设计

[编辑]

网页设计师可以选择将网站字体的种类限制为仅有少数具有相似风格的网站字体，而不是使用各种字体或字体样式。大多数浏览器都识别特定数量的安全字体，设计者主要使用这些字体来避免复杂性。

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

大多数网站布局都包含负空间以将文本分解为段落，并且还避免使用居中对齐的文本。[14]

动态图形

[编辑]

使用动态图形也可能影响到页面布局和用户界面。是否选择使用动态图形可能取决于网站的目标市场。娱乐导向的网站预期或至少更容易接受动态图形。然而，一个更严肃或正式的网站（如商业、社区、政府网站），可能就会觉得出于娱乐或装饰目的的动画没有必要，还会分散人们的注意力。这不是说比较严肃的内容不能用与内容相关的动画或视频演示来提升。无论哪种情况，动态图形设计都可以使更有效的视觉效果或分散注意力的视觉效果有所不同。

不由站点访问者发起的动态图形可能产生可访问性问题。万维网联盟的无障碍标准要求网站访问者能够禁用动画。[15]

代码质量

[编辑]

网站设计者可能认为符合标准是良好做法。这通常通过描述说明元素在做什么来完成。不符合标准可能不会使网站无法使用或容易出错，但标准可能与页面的正确布局有关，以便于阅读，并确保编码元素适当关闭。这包括代码中的错误，更有条理的代码布局，以及确保正确识别ID和类。编码不佳的页面有时俗称tag soup。只有在做出正确的DOCTYPE声明时才能通过W3C进行验证[8]，该声明用于突出显示代码中的错误。该系统能识别错误和不符合网页设计标准的地方。这些信息可以帮助用户改正错误。[16]

生成内容

[编辑]

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

静态网页

[编辑]

静态网页多数为单一的超文本标记语言文件，每次请求该页面时，都会返回相同的内容。在网站设计期间内容只需创建一次。它通常是手动编写的，尽管有些站点使用类似于动态网站的自动创建工具,其结果将长期存储为完成的页面。这些自动创建的静态网站在2015年左右变得更受欢迎，其中包括Jekyll和Adobe Muse等生成工具。[17]

静态网站的好处在于它们更容易托管，因为它们的服务器只需要提供静态内容，无需执行服务器端脚本。这可以降低网站维护的工作量，并且由于静态网站不需要数据库，所以可以极大的避免暴露系统安全漏洞。[18]他们还可以在低成本的服务器硬件上更快地加载页面。随着便宜的网络托管扩展到提供动态功能，这些优势变得不那么重要了，虚拟服务器可以以低成本提供短时间的高性能的服务。

几乎所有网站都有一些静态内容，因为主要的辅助性资源（如图像和样式表）通常是静态的，即使在页面HTML代码几乎全是动态生成的网站上，也不例外。现今不少网站也皆倾向把动态网页静态化，从而进行SEO优化。

动态网页

[编辑]
主条目：动态网页

动态网页是服务器通过应用程序服务器处理服务器端脚本生成的网页。它们通常从一个或多个后端数据库中提取内容:一些通过跨关系数据库的数据库查询，用于查询目录或汇总数字信息；另一些使用MongoDB或NoSQL等面向文档的数据库来存储更大的内容单元，例如博客文章或维基文章。

在设计过程中，动态页面通常使用静态页面进行模拟或线框化。开发动态网页所需的技能比设计静态网页来得更多，因为其同时涉及服务端设计、数据库设计和客户端设计。即使是中等规模的动态网站项目，也因此通常需要团队协作才能完成。

首次开发动态网页时通常直接用Perl、PHP或ASP等语言。其中一些，特别是PHP和ASP，使用“模板”方法，其中服务器端页面类似于完成的客户端页面的结构，数据被插入到由“标签”定义的位置。这是一种相比Perl这样的纯过程语言更快捷的开发方式。

对于很多网站来说，“标签”方法、“模板”方法这两种实现大多数已经被例如内容管理系统等高阶的、面向应用的工具所替代。这些工具建构在一些通用的代码之上，并假设网站提供的内容遵循几种既有的模型，例如按时间顺序排序的網誌、一个专题杂志或新闻网站、一个共笔网站或是一个用户论坛。这些工具让网站的搭建变得更加容易，仅仅需要纯粹的设计和内容组织，不再需要任何编程。

编辑网页内容本身（包括模版页面）既可以通过站点本身，也可以使用第三方软件完成。编辑所有页面的功能仅提供给特定类别的用户（例如，管理员或注册用户）。在某些情况下，允许匿名用户编辑某些Web内容，这种情况较少（例如，在论坛上添加消息）。维基百科是一个可以匿名修改网页内容的网站的例子。

首页设计

[编辑]

包括Jakob Nielsen和Kyle Soucy在内的可用性专家经常强调主页设计以确保网站成功，并声称首页是网站上最重要的页面。[19][20][21][22] 不过，2000年代的从业者开始发现，越来越多的网站流量绕过主页，通过搜索引擎、电子新闻稿和RSS源直接进入内部内容页面。[23] 使得许多从业者认为首页没有大多数人认为的那么重要。[24][25][26][27] Jared Spool在2007年提出，网站的首页实际上是网站最不重要的页面。[28]

在2012年和2013年，轮播（Carousel）已经成为极受欢迎的设计元素，经常用于在有限的空间展示特色或最近的内容。[29][30] 许多从业人员认为轮播是一种无效的设计元素，会损害网站的搜索引擎优化和可用性。[30][31][32]

工作

[编辑]

建设网站涉及两个主要工作：网页设计师和網頁開發者，他们经常在建站时紧密合作。[33] 网页设计师负责视觉方面，包括网页的布局、着色和排版。尽管所需的具体知识因具体的网页和不同设计师的要求而异，网页设计人员都需要具备HTML和CSS等标记语言的应用知识。特别是在较小的组织中，一个人需要同时掌握开发网站和必要的设计网页技能，而较大的组织则可能会专门指派一个负责视觉方面的网页设计师。[34]

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

  • 图形设计师（英语：Graphic designers）为网站创建视觉效果，例如Logo，布局和按钮。
  • 互联网营销专家通过在互联网上使用营销和促销技术、针对网站的受众定位的战略解决方案来帮助维护网站。
  • 搜索引擎优化专家研究和推荐一定的关键词，纳入特定的网站，使网站更容易访问，并在众多搜索引擎上找到。
  • 互联网文案人员撰写网站中的文章，以吸引网站的目标受众[1]。
  • 用户体验设计（UX设计）以用户为中心考虑多种设计因素，包括信息架构、用户测试、交互设计等以用户为中心的设计，有时也会参与视觉设计。

另见

[编辑]

另见

[编辑]

有关行业

[编辑]

注释

[编辑]
  1. ^ <table>-based markup and spacer .GIF images
  1. ^ 1.0 1.1 Lester, Georgina. Different jobs and responsibilities of various people involved in creating a website. Arts Wales UK. [2012-03-17]. （原始内容存档于2013-05-31）. 
  2. ^ Longer Biography. [2012-03-16]. （原始内容存档于2018-03-03）. 
  3. ^ Mosaic Browser (PDF). [2012-03-16]. （原始内容 (PDF)存档于2013-09-02）. 
  4. ^ Zwicky, E.D, Cooper, S and Chapman, D.B. Building Internet Firewalls. United States: O’Reily & Associates. 2000: 804. ISBN 1-56592-871-7. 
  5. ^ 5.0 5.1 5.2 5.3 5.4 Niederst, Jennifer. Web Design In a Nutshell. United States of America: O'Reilly Media. 2006: 12–14. ISBN 0-596-00987-9. 
  6. ^ 6.0 6.1 Chapman, Cameron, The Evolution of Web Design, Six Revisions, [2018-12-02], （原始内容存档于2013-10-30） 
  7. ^ W3C. Web Accessibility Initiative (WAI). [2018-12-02]. （原始内容存档于2008-09-04）. 
  8. ^ 8.0 8.1 W3C Markup Validation Service. [2018-12-02]. （原始内容存档于2011-02-22）. 
  9. ^ 不懂程式也能寫 CSS？. 2019-07-09 [2022-01-25]. （原始内容存档于2022-01-25） （中文（繁體））. 
  10. ^ YellowPencil：WordPress主題的自訂不會用，幫你寫CSS改樣式！. 2021-06-25 [2022-01-25]. （原始内容存档于2022-01-25） （中文（繁體））. 
  11. ^ THORLACIUS, LISBETH. The Role of Aesthetics in Web Design. Nordicom Review. 2007, (28): 63–76 [2014-07-18]. （原始内容存档于2021-02-24）. 
  12. ^ Castañeda, J.A Francisco; Muñoz-Leiva, Teodoro Luque. Web Acceptance Model (WAM): Moderating effects of user experience. Information & Management. 2007, 44: 384–396. doi:10.1016/j.im.2007.02.003. 
  13. ^ Rolling out mobile-first indexing. Official Google Webmaster Central Blog. [2018-06-09]. （原始内容存档于2021-04-29） （美国英语）. 
  14. ^ Stone, John. 20 Do’s and Don’ts of Effective Web Typography. 2009-11-16 [2012-03-19]. （原始内容存档于2015-06-23）. 
  15. ^ World Wide Web Consortium: Understanding Web Content Accessibility Guidelines 2.2.2: Pause, Stop, Hide. [2018-12-02]. （原始内容存档于2017-12-15）. 
  16. ^ W3C QA. My Web site is standard! And yours?. [2012-03-21]. （原始内容存档于2017-12-31）. 
  17. ^ Christensen, Mathias Biilmann. Static Website Generators Reviewed: Jekyll, Middleman, Roots, Hugo. Smashing Magazine. 2015-11-16 [2016-10-26]. （原始内容存档于2020-12-05）. 
  18. ^ 静态网站是一种新的动态. 王会的博客. [2020-08-23]. （原始内容存档于2021-01-19）. 
  19. ^ Soucy, Kyle, Is Your Homepage Doing What It Should?, Usable Interface, [2018-12-02], （原始内容存档于2012-06-08） 
  20. ^ Nielsen & Tahir 2001.
  21. ^ Nielsen, Jakob, The Ten Most Violated Homepage Design Guidelines, Nielsen Norman Group, 10 November 2003 [2018-12-02], （原始内容存档于2013-10-05） 
  22. ^ Knight, Kayla, Essential Tips for Designing an Effective Homepage, Six Revisions, 20 August 2009 [2018-12-02], （原始内容存档于2013-08-21） 
  23. ^ Spool, Jared, Is Home Page Design Relevant Anymore?, User Interface Engineering, 29 September 2005 [2018-12-02], （原始内容存档于2013-09-16） 
  24. ^ Chapman, Cameron, 10 Usability Tips Based on Research Studies, Six Revisions, 15 September 2010 [2018-12-02], （原始内容存档于2013-09-02） 
  25. ^ Gócza, Zoltán, Myth #17: The homepage is your most important page, [2018-12-02], （原始内容存档于2013-06-02） 
  26. ^ McGovern, Gerry, The decline of the homepage, 18 April 2010 [2018-12-02], （原始内容存档于2013-05-24） 
  27. ^ Porter, Joshua, Prioritizing Design Time: A Long Tail Approach, User Interface Engineering, 24 April 2006 [2018-12-02], （原始内容存档于2013-05-14） 
  28. ^ Spool, Jared, Usability Tools Podcast: Home Page Design, 6 August 2007 [2018-12-02], （原始内容存档于2013-04-29） 
  29. ^ Bates, Chris, Best practices in carousel design for effective web marketing, Smart Insights, 9 October 2012 [2018-12-02], （原始内容存档于2013-04-03） 
  30. ^ 30.0 30.1 Messner, Katie, Image Carousels: Getting Control of the Merry-Go-Round, Usability.gov, 22 April 2013 [2018-12-02], （原始内容存档于2013-10-10） 
  31. ^ Jones, Harrison, Homepage Sliders: Bad For SEO, Bad For Usability, 19 June 2013 [2018-12-02], （原始内容存档于2013-11-22） 
  32. ^ Laja, Peep, Don’t Use Automatic Image Sliders or Carousels, Ignore the Fad, ConversionXL, 27 September 2012 [2018-12-02], （原始内容存档于2013-11-25） 
  33. ^ Oleksy, Walter. Careers in Web Design. New York: The Rosen Publishing Group, Inc. 2001: 9–11 [2018-12-02]. ISBN 9780823931910. （原始内容存档于2020-09-24）. 
  34. ^ Web Designer. [2012-03-19]. （原始内容存档于2020-09-25）. 

参考文献与延伸阅读

[编辑]
  • Nielsen, Jakob; Tahir, Marie, Homepage Usability: 50 Websites Deconstructed, New Riders Publishing, October 2001, ISBN 978-0735711020 

外部链接

[编辑]

维基学院中的相關學習文章：Web前端

检索自“https://zh-two.iwiki.icu/w/index.php?title=网页设计&oldid=80036955”