首页 > 其他分享 >Web前端和UI前端之间有哪些区别

Web前端和UI前端之间有哪些区别

时间:2022-08-15 18:35:10浏览次数:54  
标签:界面设计 Web 前端 UI HTML5 设计

许多人无法区分用户界面前端和网络前端的区别,认为他们做同样的工作。因此,今天的爱创课堂将详细讨论两者的区别:

Web前端开发

对网站而言,前端即是网站的前端,它包括表现层和结构层。

表现层就是前端设计,说白了,是视觉设计,

结构层就是涉及前端开发的部分,即网站的前端代码实现,包括基本的 HTML和 CSS、 JavaScript/ajax、HTML5、CSS3的最新高级版本,还有 SVG等等。

所以,前端包括视觉设计和前端代码开发。一般情况下,当你打开一个网站,往往会首先被那些炫酷的动态网页设计所吸引。但是,没有网络前端工程师,图片就不能移动。

一个动态网页是怎么实现的呢?

首先要求UI设计师按照市场部的要求制作每张图片,然后Web前端工程师通过技术手段实现滚动效果。

通俗地说,Web前端工程师利用HTML5、CSS3、Java、jQuery、Ajax等技术,将UI设计的页面效果做成一个网页,结合Bootstrap、AngularJS等最新的JS框架与后台开发工程师连接,最终实现电子商务平台上那些大家都能看到的漂亮动人的页面。

UI设计

UserInterface用户界面的简称,即从事人机交互、操作逻辑、界面美观设计工作的人员。界面设计是指人机交互、操作逻辑清晰、界面美观的软件整体设计。一般包括:图形设计、网页设计和手机界面设计。

在这些技术中,网页设计和手机设计这个职位的方向,需要学习网页界面设计, PC客户端软件界面设计,HTML5语言, CSS样式表,布局技巧与浏览器兼容等技术。

因此, web前端开发和 UI设计是相互联系的。用户界面设计涉及到商业平面设计,高级网页设计,移动应用界面设计和部分包装设计,用户界面设计师还涉及到代码入门。

前端开发人员,不仅要精通前端语言,还要涉足后端编程;UI设计师,不仅要精通设计、理解代码,还要精通程序员的设计思路。

相信同学看了上面这么多肯定会想问哪个更好学。其实我想说,只要你静下心来好好学习,就很容易。相反,如果你是业余爱好者,可能很难学。

UI设计都需要学习什么?

1、平面设计

此阶段主要是为零基础学员而设计,学习内容主要包括企业 VI设计,企业画册设计,平面设计,后期印刷等知识。PS, AI, coreldraw等学习工具,完成这部分的学习可以做大部分的图形设计工作。

2、网页设计

在这个阶段,我们将学习Web界面设计、PC客户端软件界面设计、XHTML/HTML5语言、CSS样式表、布局技巧和浏览器兼容性。

3、移动界面设计

这一步是 UI设计的核心部分。课程内容包括主流风格的图标设计,交互设计,移动界面设计,以及进一步扩展到 Axure, ai, pixelchef, manager等等的学习工具。在进行 UI设计之前有没有考虑过?

Web前端需要学习什么?

1、HTML5基础

主要学习的是HTML5、CSS3、JavaScript基础;

2、JavaScript核心

主要学习JavaScript核心,DOM编程,完成各种页面动态效果和动态交互;

3、web前端核心

学习的内容有:jQuery、HTML5+CSS3,完成页面各种功能及效果,能够实现服务器端的通信分析,实现订单页的功能分析。

 

标签:界面设计,Web,前端,UI,HTML5,设计
From: https://www.cnblogs.com/icketang/p/16589254.html

相关文章

  • Kruise Rollout:灵活可插拔的渐进式发布框架
    简介: KruiseRollout是OpenKruise社区开源的渐进式交付框架。KruiseRollout支持配合流量和实例灰度的金丝雀发布、蓝绿发布、A/BTesting发布,以及发布过程能够基于......
  • 日常开发记录-当新手前端遇到新手后端,分页没有页码
     后端提供的接口获取到数据list,但是后台管理系统的分页没有【页码数】和【前往“”页】,可能是后端没有把pageSize和pageIndex以及total返回给前端。......
  • 1 分钟在 Serverless 上部署现代化 Deno Web 应用
    简介: 利用Serverless的水平扩展与按量付费优势,结合自定义运行时,实现Web应用的快速迁移。作者|连喆人(掌上乾坤公司)本文选自“Serverless函数计算征......
  • web和vue-cli
    1、什么是WebpackWebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包......
  • -webkit-line-clamp实现双行省略
    -webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:单行文本溢出省略-webkit-line-clamp:1/2display......
  • 前端好用API之MutationObserver
    前情一直以来都没有好的方式可以监听元素变化,Mutationevents虽然可以监听DOM树结构变化,但是因性能问题和差的兼容问题(Webkit内核不支持)并不推荐使用。MutationObserver......
  • JS学习-Web Workers API接口
    WebWorkersAPI接口通过使用WebWorkers,Web应用程序可以在独立于主线程的后台线程中,运行一个脚本操作。这样做的好处是可以在独立线程中执行费时的处理任务,从而允许主线......
  • SAP 电商云 Spartacus UI 去除 Checkout 页面 header 和 footer 区域的几种方法介绍
    1distraction-freecheckout如何移除checkout页面的footer和header方法1-把checkoutCMSpage的header和footerslot删除即可可以直接在Backoffice或者......
  • Web开发者福音!创建第一个Vite支持的Web应用(1/2)
    在这篇文章中,我们将解决前端Web开发人员的需求,并向您展示如何使用Vite库来显着提高Javascript客户端应用程序的启动/更新速度。Vite是一个基于开发服务器的构建工......
  • .net Web 项目的文件/文件夹上传下载
    ​需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制。 第一步:......