WEB前端和UI设计哪个好?

Posted 2023-05-16

对于大多数人来说，前端和UI设计两个职业都算是转行互联网行业相对可行性较高的方向。那究竟是选择前端，还是选择UI设计呢？今天就来跟大家简单分析一下，希望从以下内容中你可以更加了解这两个职业，从而根据自己意愿挑选适合自己的发展方向。

一、UI和前端简介

UI设计：全写User Interface，简称用户界面，是指对软件的人机交互、操作逻辑、界面美观的整体设计。

前端：是创建Web页面或app等前端界面呈现给用户的过程。通过html，CSS及javascript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。通俗一点来讲，前端就是客服，主要跟顾客（用户）交流。

从以上可以看出，其实UI设计和前端的工作相辅相成的，按照项目流程，一般是UI设计师设计好产品界面，前端工程师通过编码实现界面。通俗来说，UI设计师好比服装设计师，而开发工程师好比裁缝，两者都是在一个完整的互联网项目中不可缺失的岗位。

前端主要是需要掌握前端语言、框架等，都是编码的工作。而UI设计是属于视觉设计，需要具备设计基础、设计思维、设计技能，两者不是一个类别。可以说前端比较偏向于软件工程、计算机科学等专业，而UI设计比较偏向于视觉设计、平面设计等。

二、UI和前端的前景

随着互联网行业的发展的同时也在带动行业内岗位的发展，所以UI设计和前端开发都有很不错的前景。那我们来看看UI设计和前端的市场需求曲线图，直观地感受两个岗位的需求变化。

说明：曲线越向上代表市场需求量越大，就业情况越好。反之，代表该类职位需求量较少。该数据由各地招聘网站统计而来，可能因抓取系统稳定性等因素而致使数据偏离客观实情，仅供参考。

从图片可以看出UI设计和前端的需求在前几年是基本持平的，近几年变化浮动较大，近两年前端需求高于UI，最近半年UI的需求高于前端设计。所以两次的需求量量都大，只是时段不同，需求量也在不停变化。

我们通过平均工资去对比一下UI和前端的薪资待遇有何区别。

图片可以得出，前端的平均薪资高于UI设计，其实主要原因有以下几点：

1、学历要求不同

从职友集数据可以看出，对于UI设计本科学历占49%，大专占48%。但是对于前端开发本科学历占71%，而大专学历仅占28%。虽然学历不能代表一切，但是不得不说学历对薪资待遇也有一定的影响。

2、工作经验要求不同

从职友集数据可以看出，对于UI设计有49%的公司要求有1-3年工作经验，而对于前端有41%的公司都要求必须有1-3年的工作经验。对于3年以上的工作经验的要求前端开发远远大于UI设计。工作年限前端的需求一定程度上也说明了工作经验以及技能熟练度，所以工作年限的不同对薪资待遇肯定也不同。

三、两者需具备的技能

了解了UI设计和前端的简要信息，如果想要转行，那我们还需要要知道转行的条件。也就是需要学习哪些技能才能达到入行的标准。

1、前端

前端开发零基础好入门，上手快可以立马看到学习效果，可以大大提高学习兴趣。但是并不是说前端没有技术含量，我们不仅需要学习前端基础，还需要学习vue.js、react.js、react-native和Flutter等主流框架，并扩展three.js、typescript等等技术，深挖、剖析框架原理。甚至了解后端的知识，在工作中才能减少沟通成本。

2、UI设计

现在的UI不仅要懂交互知识、平面设计，甚至还要会代码、AE制作动效、以及插画、手绘等等，UI设计也因此有了一个新名“全链路UI”。

从上面的分析我们可以得出，前端的工作比UI设计略高，但是企业的对于前端的学历要求、工作经验的要求也比UI设计严格。我们不能一味的因为薪资待遇而去选择方向，而是一个依据自己实际情况以及兴趣去选择。

前端属于技术岗位，技术随着时间的改变也在不断的进步、更新，而UI设计也需要根据市场的流行趋势、设计要求的变化去学习最新的设计知识。

其实不管选择什么方向，都要持续的对这个方向保持热爱，保持持续的学习，才能有顺应市场需求有更好的发展。

参考技术A 不能一概而论，毕竟WEB前端和UI设计是两个不同的工作方向。WEB前端偏技术、UI设计偏美工。如果是学理工科，有计算机和编程技术，学前端更合适一些；如果是学文科，有设计和美工基础，学UI更容易上手。但是也并非绝对，如果在WEB前端和UI设计两个课程中徘徊的学生，可以到睿峰参加这两个课程的免费体验课，这样就更有针对性的了解自己适合学哪一门课程。 参考技术B 不能一概而论，毕竟WEB前端和UI设计是两个不同的工作方向。WEB前端偏技术、UI设计偏美工。如果是学理工科，有计算机和编程技术，学前端更合适一些；如果是学文科，有设计和美工基础，学UI更容易上手。但是也并非绝对，如果在WEB前端和UI设计两个课程中徘徊的学生，可以到睿峰参加这两个课程的免费体验课，这样就更有针对性的了解自己适合学哪一门课程。本回答被提问者采纳 参考技术C 两者之间没有什么可对比的，选择哪一个要看你对两者的兴趣所在，那才是支撑你在行业里能走多远的源头。

我们这里有很多学员也曾经问过类似的问题，我们的建议就是，参加免费体验课，自己去选择一个自己喜爱的方向，然后再去学习提高。别人只能给你一些建议，最终走上那条路的是你自己。

移动webapp前端ui用哪个框架好

WeUI
WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、 progress, toast、article、icon等各式元素。
Frozen UI
Frozen UI是腾讯社交用户体验设计 － 增值UI开发团队一个开源的简单易用，轻量快捷的移动端UI框架。基于手Q样式规范，选取最常用的组件，
做成手Q公用离线包减少请求，升级方式友好，文档完善，目前全面应用在腾讯手Q增值业务中。
FrozenUI提供的CSS组件是目前QQ会员前端开发组所用的通用样式库。遵循手Q样式规范，基本样式使用离线包的方式减少请求，并提供快速接入的方案。
FrozenUI提供的一系列JavaScript插件，更优雅地在移动端上呈现更灵动的动画效果。
FrozenJS 是针对移动端开发的 js 组件库，其依赖 zepto.js 和 FronzenUI。
FrozenJS 的所有组件均以 zepto 的插件的形式存在。
阿里开源的SUI Mobile
SUI Mobile
SUI Mobile 是一套基于 Framework7 开发的UI库。并参考 Ratchet、Fastclick 开源库。它非常轻量、精美，只需要引入我们的CDN文件就可以使用，并且能兼容到 iOS 6.0+ 和 Android 4.0+，非常适合开发跨平台Web App。
轻量的UI库 SUI Mobile 非常轻量，核心库压缩Gzip后的JS、CSS网络传输体积总共只有52K，却提供了20+个常用的组件。
对于只有HTML&CSS的组件，你只需要复制HTML代码既可以使用。他的大部分JS组件都是独立的 Zepto 插件，并且提供了Zepto/jQuery 风格的API，你将会非常熟悉这种方式。
开发团队：阿里巴巴共享业务事业部UED团队
百度系
GMU
GMU是基于zepto的mobile UI组件库，提供webapp、pad端简单易用的UI组件!
Jingle
Jingle是一个SPA(Single Page Application)开发框架，用来开发移动端的html5应用，在体验上尽量去靠近native应用，希望有一天html5能够做到与native一样的操作体验。
丰富的UI组件提供了按钮、列表、表单、弹出框、轮换、上拉/下拉、日历等各种移动端常用的组件，简单适用，
前后端分离支持前端模板渲染，模板按需自动加载，完善的事件机制。
轻量级基于Zepto开发，依赖了iscrol
purecss
purecss采用其Grid的部分即可，需要定制的部分，建议自行配置，或者是直接采用grid.css，grid960.css这样的栅格来处理。Purecss小的没有节操，全部模块gzip压缩后才 4.4KB* 。 考虑到移动端，保持文件尽量小对我们来说非常重要，每一行CSS都经过深思。如果你只用部分模块，简直小的忽略。
Pure基石,Pure基于Normalize.css添加了HTML元素的布局和样式，以及常用的UI组件。全是精华，木有糟粕。
移动端是初衷,Pure是响应式的盒子模型，适应所有尺寸的屏幕。通过皮肤生成器可以自定义样式。
写出你自己的样式,Pure提供最基础的样式，鼓励你基于此写出自己的样式。它被设计为容易覆写，且不影响你自己的样式。
ionic
基于angular2，丰富的UI组件，大大改进的编程模型，非常适合快速开发。
jquery mobile
jQuery Mobile 是创建移动 web 应用程序的框架。
jQuery Mobile 适用于所有流行的智能手机和平板电脑。
jQuery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局。
Bootstrap
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

wex5
国产的ui，支持打包。
前端UI：完全恪守html5+css3+js，干净纯洁设备api：采用业界主流Phonegap/Cordova
向导、模板：简单定义，即可轻松制作向导和模板
主题、样式：海量bootstrap资源引入和定制
UI组件：纯H5+CSS3，轻松引入第三方UI组件
插件：轻松对接即时通讯、推送、支付等各类插件
后端：轻松调用后端组件和api，并实现可视化 参考技术A 看具体做什么，如果对性能要求苛刻，比如地图App这种，应该考虑React Native或者NativeScript这样的技术，因为可以编译成原生App。推荐 Ionic 2 Documentation 这是ionic的最新版本，基于angular2，丰富的UI组件，大大改进的编程模型，非常适合快速开发。 参考技术B

现在是UI趋势的走向，不管什么都会涉及到UI设计。而且现在手机平板发展的这么迅速，APP手机端口的设计思路更是要领先一些。UI设计可以说是未来发展的大趋势，而且就现在扁平化设计思路和 界面的交互性质、用户体验都是UI设计的一个大方向。

---

每个框架都要全面

我认为这两个前框是不够的，PC、移动framework7，对于快速轨道项目可以实现他们的轻量级框架；此外，许多人认为，移动端框架具有framework7模仿的痕迹，如穗的SUI已经描述了基于UI库framework7发展。

UI与设计师可以更好融入

与设计师前端的协作应该是相对简单的，最重要的是为您提供前端产品的设计规范，一般来说，我们需要提供设计师设计草图的大小和标签的各种元素的地图文件，与布局的开始。考虑到视网膜显示器和许多移动设备的分辨率是不同的，设计者应该提供多套设计吗？从网易和淘宝的做法，应该用不到的，我们可以根据设计稿制作一套布局。

web适用于开发

如果要开发的 WebApp 对用户体验细节有高要求，又是一个单页应用。那么尝试一下这个框架：AndroidUIX - 跨平台AndroidUI框架
在体验上应该是超过目前主流WebApp的

总结

在移动端的表现来看，单页应用可以用WEBAPP来实现

UI组件可以应用在其他大厂推荐的frozenui，还有一些移动终端列表按钮轮播方案。或用wechat通用样式