新时代web前端页面设计的实践研究

马新文 侯璇

摘 要：新形势下，随着科学技术的进一步延伸，网页制作技术获得了突飞猛进的发展。web前端的研发与技术工具也以多元化的姿态呈现到了大家的视野当中。用户与页面的交互过程是一个细节的过程，在实施web前端页面设计的时候，需要以客户的前端体验为基础，合理的统筹规划，加大基础建设，展现实用性的价值。因此，本文首先立足实际，提出了需要探究的主要内容与问题，紧接着，针对现状，合理的提出对应的实践路径。

关键词：新时代;web;前端页面设计

一、问题的提出

随着互联网技术的进一步发展，传统的互联网应用格局也开始出现重大的转变。例如：智能手机、笔记本等一跃呈现到了大家的视野当中，互联网页页面设计，基本上都是在PC 端设计的基础上实施建设的，页面内容丰富华丽。后来，延伸到移动端设备Web 技术发展。Web 页面开发的自适应技术一直都是大家关注的对象。UC、Opera 等公司的页面精简技术都处于比较精简的状态，不仅独立成熟，并且还可以实现强大的交互功能。web前端页面设计在很大的程度上，需要具备较强的兼容性和交互性。Web界面的可视化设计和交互计算机技术相互融合的历程中，需要以全新的视野，结合用户的体验，真实的呈现到大家的视野当中，以连续发射辐射并形成可扩展有机网络，不可忽略交互式Web界面在信息和用户交互过程中的重要价值。改善亲密感，舒适度和成功度，满足时代的发展需求。但是，在实践的过程中，如果不能实现畅通性的建设，那么就很难满足客户的需求，那么web前端的价值也就无法达到有效的体验。鉴于此，如何做好设计和技术的完美结合？如何合理的使用这些工具，并且提升设计的效率？就成为了当前发展趋势下，众多学者需要探究的主要内容和问题。

二、新时代web前端页面设计的实践路径

（一）web前端

新时代下，随着科学技术的进一步延伸，计算机获得了有效的发展和建设，不仅页面美化性较强，并且实用性的价值也呈现到了大家的视野当中。在现代化的社会下，大众对于网页设计的需要不断增强，之前的文字形式，以不一样的图形样式得到了进一步的优化与住那边。在当前的发展路径中，Web 界面也以独到的技术因素，应用到了现代化社会的各个角落当中。对于网络设计的人员来说，也需要顺应时代的发展趋势，结合Web2.0 时代所带来的优势性，加大对于“信息爆炸”，“信息阻塞”等问题的进一步优化。也就是说，需要结合现实的需求，立足实际，在高效、舒适的信息交互基础上，加大问题的解决，保持直观的发展路径。也就是说，不仅需要减少Web 界面的设计，还需要在大众的帮助下，减低系统的维护成本，达到交互界面的设计，并且获得极高的价值成本检核。以此客户的体验为基础，节约时间，并且达到满足的建设效果。

（二）web前端页面设计

web前端页面设计的历程中，需要具备的知识储备较多。任何一个科目和一门技术的发展，都不是单一的知识存在，web前端页面设计就需要具备丰富的设计知识贮备。不仅需要具备平面构成的相关知识，还需要具备色彩构成和字体设计、标志设计、版面设计等相关的知识。对于人来说，都是一个视觉，往往一个人对一个网页关注的时间，基本上都会停留在3到10秒的时间当中，一些比较优秀的网页设计，可以在较短的时间内快速的将视觉和内容载入到浏览者的视野当中，并且获得教改的点击率。也就是说，两个构成+3个设计一设计思想，达到“按块就搬，美化外观，实现交互”的主要境界。 web 设计页面的时候，也会受到国家和当地的影响，是在人和自然、社会的基础上，实施有效建立的。交互式 Web 界面设计并经常启动“本地化”的建设措施。从传统的视角上，常常会看到一些盲目复制西方思想的设计人员的出现。但是，真正的优秀设计师是可以在西方设计的基础上，有效额取其精华去其糟粕。不仅需要承担起国家的责任感，还需要将中国的气质体现出来。“现代化”并不等同于“西方化”，“国籍”也不是设计的“限制”。在 Web2.0的时代中，也需要顺应当前的网页环境，继承传统文化，消除语言障碍，获得有效的交流和交互。

在实施 web前端页面设计的时候，需要保持亲密性的原则，也就是说，需要相关类目放在一个视觉单元内，不可以给受众者带来一种混乱的思想。还需要保持对齐性的原则，在页面内的视觉联系下，保持一个直观的外观印象，传达一种清新自然的视觉感受。还需要保持重复性的原则，视觉要素需要重复，不管是颜色还是形状、材质等都需要保持一定的条理和风格，保持统一的趋势。最后，需要加大对比的风格建设。不仅可以具备元素的相似性，还需要强调内容的重点性，保持页面的吸引力。

（三）web 前端网页设计的应用

从本质上看，web 前端网页设计的应用比较的广泛，为了加大传播的力度，需要通过载体来实现。在直观地基础上，当大家看到一本书或者是一个杂志的时候，都需要阅读大量的信息，封面，目录，标题，大小、厚度等内容都是受众者需要基本进行了解的。对于网页设计来说，也需要在全新的视野下，消除限制，追求内容的丰富性。在页面设计上，页面内容更长，浏览主页的过程中不仅需要分为几个不一样的区域，还可以添加对应的广告，传达不一样的区域视野。在创建网页的时候，需要最大限度的保持产品的介绍性，表达出不一样的功能建设，不管是文本，图像，动态面部等都需要保持一个有机的整体，长久下去，就会导致标准化的存在和建设，页面设计在寻找信息效率的时候，很多实际上的意义也就不存在了。此时，就需要在美观的格式下，提高效率，加大网页设计的内容建设，并且从美学与功能学的视角，合理的布局，扩大吸引力。 web 进行网页设计的时候，还需要在受众者检索的基础上，保持页面的层次上，将图片、文字、

动态图等合理的分布起来，满足大众的信息需求，增加信息的层次性，展示合适的导航链接设计。在信息技术合理的分类中，最快的知道合适的速度，提高效率，满足当前的发展路径。设计流程中，需要先了解受众者的需求，形成设计草图，之后形成设计图，植入框架，保持统一的外观。体现很强的交互性，完成兼容性，加大SEO的優化。例如：一个美食分享欢迎页面，在实现的历程中，是在用 JavaScript的基础上，实施建立的。根据访客年龄段展示不同背景色页面的功能性，不仅提高了页面交互的体验，还在很大的程度上提高了对应的趣味性的价值。在使用者访问该页面的时候，就会自动的出现弹框欢迎提示。用户输入信息的时候，名字可以在任何的字符段下，但是不可以是空格，需要输入正确的提示语。如果输入的信息是错误的，那么正面还会提示使用者继续实施交互行为。在使用者输入年龄的时候，需要展示不一样的色彩。小于18岁的男性和大于18岁的男性，小于18岁的女性和大于18岁的女性，分别使用的是浅蓝色，深蓝色，粉红色，玫红色。页面功能实现上，主要是页面颜色的获取，页面中body 对象只有一个属性就是背景色，需要在用 x [0]的基础上快速的找到其他颜色所设置的位置。此外，判断用户输入内容并进行反馈。也就是说，在使用者进入一个页面的时候，就需要输入完整的信息，加大if 语句的判断功能设计，并且获得对应的弹窗提示。

最后，在用户登录体验细节的改善中，需要不断的优化，并且减少体验的困扰，合理的调整，分析不完整的地方，结合条件判断的方法加大综合判断，电机提交按钮后，主要是出现任何一个错误，都会无法展现。

三、总结

随着社会的进步，web 前端网页设计看起来比较的简单，但是，在实际实践的历程中，需要以客户的诉求为基础，合理的使用世界思想和设计方式。保持严谨的态度，不断的顺应时代的需求，不断的学习，达到有效的设计目标。交互过程中需要满足细节化的发展需要，不断优化程序，最大限度的优化用户的前端体验。

参考文献：

[1]王翠.高职实施"1+X证书"制度的探索与实践——以潍坊工程职业学院"Web前端开发"证书为例[J].潍坊工程职业学院学报，2020，140（06）：94-97.

[2]林丽红. 基于《web前端页面设计》在线开放课程自主学习探讨[J]. 计算机产品与流通， 2020（05）：171-172.

[3]琴代.新工科下 SC 教学模式应用探索与实践——以前端系列课程之平面设计为例[J]. 教学方法创新与实践， 2021， 4（3）：44.

[4]林丽红. 高职院校web前端课程进行在线开放课程建设的探讨[J]. 电脑知识与技术， 2020， v.16（14）：210-211.

[5]罗才华， 黎欣. 基于知识共享的Web前端开发技术课程小组项目式作业教学改革与实践[J]. 职业时空， 2020， 004（001）：30-34.

[6]陈芳. 针对网站设计与制作的Web前端开发技术及技术优化[J]. 电子世界， 2020， No.605（23）：198-199.