当前位置:首页 > 新闻中心> 行业资讯

网页设计制作

作者:衡水网络公司 来源:http://www.hsbaidu.net/

  网站设计涵盖了网站生产和维护中的许多不同技能和学科。 网页设计的不同领域包括网页图形设计; 界面设计 ; 创作,包括标准化代码和专有软件 ; 用户体验设计 ; 和搜索引擎优化 。 通常,许多人会组成团队来涵盖设计过程的不同方面,尽管有些设计师会涵盖所有方面。 [1]术语“网页设计”通常用于描述与网站的前端(客户端)设计有关的设计过程,包括写作标记 。 在更广泛的Web开发范围内,Web设计与Web工程部分重叠。 Web设计人员应该对可用性有所了解,如果他们的角色涉及创建标记,那么他们也应该与Web访问性准则保持最新。


  历史


  商店中的Web设计书籍1988–2001年尽管网页设计具有相当近的历史。 它可以链接到其他领域,例如图形设计,用户体验和多媒体艺术,但从技术角度来看更合适。 它已成为人们日常生活的重要组成部分。 很难想象没有动画图形,不同样式的字体,背景和音乐的互联网。


  网站和网站设计的开始1989年, Tim Berners-Lee在欧洲核子研究组织(CERN)工作时提出了创建一个全球超文本项目的计划,该项目后来被称为万维网 。 在1991年至1993年期间,万维网诞生了。 可以使用简单的行模式浏览器查看纯文本页面。 [2] 1993年, Marc Andreessen和Eric Bina创建了Mosaic浏览器 。 当时有多个浏览器,但是大多数浏览器是基于Unix的,并且自然会带有大量文本。 对于图像或声音之类的图形设计元素还没有集成的方法。 马赛克浏览器打破了这个模子。 [3] W3C创建于1994年10月,旨在“通过开发促进其发展并确保其互操作性的通用协议,将万维网带入全部潜能。” [4]这不鼓励任何一家公司垄断专有的浏览器和编程语言,而这可能会改变整个互联网的影响。 W3C继续制定标准,如今可以在JavaScript和其他语言中看到这些标准。 1994年,安德森(Andreessen)成立了Mosaic Communications Corp.,该公司后来称为Netscape Communications ,即Netscape 0.9浏览器。 Netscape在不考虑传统标准流程的情况下创建了自己的HTML标签。 例如,Netscape 1.1包含用于更改背景颜色和使用网页上的表格设置文本格式的标签。 从1996年到1999年,随着Microsoft和Netscape争夺浏览器的最终统治地位, 浏览器之战开始了。 在这段时间里,该领域有许多新技术,尤其是层叠样式表 , JavaScript和Dynamic HTML 。 总体而言,浏览器竞赛确实带来了许多积极的成果,并帮助网页设计快速发展。 [5]


  网页设计的演变1996年,Microsoft发布了首个具有竞争力的浏览器,该浏览器具有自己的功能和HTML标签。 它也是第一个支持样式表的浏览器,该样式表在当时被认为是一种晦涩的创作技术,如今已成为Web设计的重要方面。 [5] 表的HTML标记最初旨在显示表格数据。 但是,设计人员很快意识到使用HTML表创建复杂的多列布局的潜力,而这在其他情况下是不可能的。 这时,由于设计和良好的美观性似乎优先于良好的标记结构,因此对语义和网络可访问性的关注很少。 HTML网站的设计选项受到限制,早期版本的HTML甚至更多。 为了创建复杂的设计,许多Web设计师不得不使用复杂的表格结构,甚至使用空白的.GIF图像来阻止空白表格单元崩溃。 [6] CSS由W3C于1996年12月引入,以支持表示和布局。 这允许HTML代码具有语义性,而不是语义性和表示性,并且改进了Web可访问性,请参阅无表Web设计 。


  1996年,开发了Flash (最初称为FutureSplash)。 当时,Flash内容开发工具与现在相比相对简单,使用了基本的布局和绘图工具, ActionScript的有限前身以及时间轴,但它使Web设计人员能够超越HTML, 动画GIF和JavaScript的范畴。 。 但是,由于Flash需要使用插件 ,因此许多Web开发人员避免使用它,因为担心由于缺乏兼容性而限制了其市场份额。 取而代之的是,设计师将gif动画(如果他们没有完全放弃使用动态图形的话 )恢复为gif动画,而将JavaScript恢复为小部件 。 但是Flash的优势使它在特定的目标市场中足够流行,最终可以在绝大多数浏览器中使用,并且功能强大到可以用来开发整个网站。 [6]


  第一次浏览器大战结束1998年,Netscape在开放源代码许可下发布了Netscape Communicator代码,使成千上万的开发人员可以参与改进软件。 但是,他们决定从头开始,这指导了开源浏览器的开发,并很快扩展到了完整的应用程序平台。 [5] Web Standards Project的形成是通过创建Acid1 , Acid2和Acid3测试来促进浏览器与HTML和CSS标准的兼容性 。 2000年对微软来说是重要的一年。 Internet Explorer已针对Mac发布; 这是非常重要的,因为它是第一个完全支持HTML 4.01和CSS 1的浏览器,提高了对标准合规性的要求。 它也是第一个完全支持PNG图像格式的浏览器。 [5]在此期间,Netscape被出售给AOL ,这被视为Netscape在浏览器大战中对Microsoft的官方损失。 [5]


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


  自浏览器大战结束以来[ 什么时候? ]新的浏览器已经发布。 其中许多都是开源的,这意味着它们倾向于更快地开发并且更支持新标准。 许多[ 黄鼠狼的话 ]认为新的选择比微软的Internet Explorer更好。


  W3C已发布了HTML( HTML5 )和CSS( CSS3 )的新标准,以及新的JavaScript API ,它们都是一个新的但单独的标准。 [ 什么时候? ]虽然术语HTML5仅用于指代HTML的新版本和某些 JavaScript API,但使用它来指代整套新标准(HTML5,CSS3和JavaScript)已变得很普遍。


  工具和技术


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


  技能与技巧


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


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


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


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


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


  响应式网页设计是一种基于CSS3的更新方法,通过增强使用CSS @media规则,页面样式表中的每个设备规范的水平更高。 Google在2018年3月宣布将推出移动优先索引。 [11]使用响应式设计的网站位置优越,可确保它们符合这种新方法。


  版式主要文章: 印刷术


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


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


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


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


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


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


  产生的内容网站的生成方式有两种:静态或动态。


  静态网站主条目: 静态网页


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


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


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


  动态网站主条目: 动态网页


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


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


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


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


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


  网页设计


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


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


  职业


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


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


  平面设计师为网站创建视觉效果,例如徽标,布局和按钮


  互联网营销专家通过使用互联网上的营销和促销技术,通过针对受众的战略解决方案来帮助维持网站的存在


  SEO作家研究并推荐将正确的词合并到特定网站中,并使该网站更易于访问并在众多搜索引擎中找到[32]


  Internet撰稿人创建页面的书面内容,以吸引网站的目标观众[1]


  用户体验(UX)设计器结合了以用户为中心的设计注意事项,这些方面包括信息体系结构,以用户为中心的设计,用户测试,交互设计以及偶尔的视觉设计。


导航栏目

联系我们

联系人:鲁经理

手机:15127828039

邮箱:15127828039@qq.com

网址:http://www.hsbaidu.net

地址: 衡水市桃城区中心大街128号中元大厦