2019年最流行的10个前端框架

From: http://blog.sina.com.cn/s/blog_18337e9c40102yt1x.html

 2019年最流行的10个前端框架

从去年下半年开始,互联网行业慢慢进入寒冬,一些设计师也不得不重新找工作。关于求职这个事情,UI黑客之前写过一篇文章《面试了50多位UI设计师,我总结了这些求职技巧!》,大家可以参考下。打铁还需自身硬,找工作最重要的还是靠自身的能力。

那么究竟需要具备什么样的能力能得到公司的青睐呢?

就拿市面上众多的 UI 培训班来说吧,作为盈利性机构,培训班的课程结构肯定是和当下公司实际需求挂钩的。毕业的学生被公司录用越多,口碑效应就会出现,那么报班的生源也会越多,培训机构自然赚的越多。

越来越多的培训机构开设了前端课程,这就说明公司实际需求大概也是这样的。现在求职,不说自己会点前端都不好意思面试,UI设计师学前端也是时下的趋势。

实际上,在公司项目中,设计师了解前端,会极大提升和程序员的协作效率,减少技术信息不对称的现象。如果在一个网站项目中,程序员还在跟设计师讲解最基本的 html、css、盒子模型知识,那开发效率就可想而知了。

很多公司的项目,都采用了前端框架来开发,如果设计师了解这些框架,能在框架的结构基础上进行 UI 设计,那无疑会提高项目整体的开发效率。下面就一起了解下常见的前端框架,说不定面试的时候能帮大忙。

Ant Design

网站链接:https://ant.design/index-cn

Ant Design

蚂蚁金服出品,非常著名的框架。就算你不了解前端,也会在公司的项目中多少听到程序员说起过。目前很多公司都在用,已经很成熟。而且提供了对设计师友好的 Sketch 规范文件,可以直接拿来用。

Ant Design 是基于 React 开发的,并不是传统的 html。React 起源于 Facebook 的内部项目,现在已经成了一个很流行的开发工具。

理想的项目开发流程是,设计师和程序员一起熟悉 Ant Design 的各种样式,设计师不再随意设计,而是基于框架的基础样式进行设计创新。这样程序员在进行 UI设计稿还原的时候,能极大提高开发效率。

现在很多项目都使用了 Ant Design,一些公司在招聘 UI设计师的时候甚至会写上:了解 Ant Design 规范的优先考虑。所以这个框架建议设计师都好好看一下。

Bootstrap

网站链接:http://www.bootcss.com/

Bootstrap

Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包,是一个 CSS/HTML 框架,目前世界上的很多网站开发都使用了这个。其中的栅格理论、响应式解决方案都变成了业界的参考规范。

很多设计师在学前端的时候,都会接触到这个框架,甚至培训机构有专门的课程,所以重要性可见一斑。

Taro UI

网站链接:https://taro-ui.aotu.io/

Taro UI

Taro UI,一套基于 Taro 框架开发的多端UI组件库,可以在微信小程序/H5/ReactNative 等多端适配运行。京东用户体验设计部的凹凸实验室出品。

现在一个产品要求在 iOS、安卓、小程序、h5 等多端运行,针对不同的客户端开发不同的代码会产生巨大的成本,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。

使用 Taro,就可以只写一套代码,再通过 Taro 的编译工具,将源代码分别编译出可以在不同端(微信小程序、H5、RN等)运行的代码,节约成本。

iView

网站链接:https://www.iviewui.com/

iView

一套基于 Vue.js 的高质量 UI组件库。Vue.js 是一个 JavaScriptMVVM 库,是一套构建用户界面的渐进式框架。

在网站中可以看到数量众多的 UI组件和对应代码,本质上和我们制作 UI规范是一样的。

LuLu UI

网站链接:https://l-ui.com/

LU LU UI

LuLu UI,是一个基于 jQuery,针对 PC 网站,兼容 ie8、ie7 的前端 UI 框架,包含很多静态或动态 UI 组件。对设计师非常友好,只需要简单的 html、css 知识就能快速上手使用。

区别于 Ant design 面向中后台开发,LuLu UI 非常适合面向外部用户的网站开发。会简单的 HTML 和 jQuery 就可以上手了,不像一些流行框架,需要较多的学习成本。

QMUI

网站链接:https://qmuiteam.com/

QMUI 

QMUI,腾讯出品,分为 Web、iOS、安卓三个端,都有相应的 dome 下载安装,设计师可以下载安卓和 iOS 应用,经常看看里面的组件,熟悉后,和技术的协作会更有效率。

Element

网站链接:http://element-cn.eleme.io/#/zh-CN

Element

饿了么出品,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,很适合开发后台产品。有意思的是里面的默认图文数据很多都是食物……

Fusion Design

网站链接:https://fusion.design/

Fusion Design

阿里推出的一个适合设计、技术共同使用的设计规范框架。基本目的也是为了让设计师在一个标准框架内设计界面,同时也提供了 Sketch 插件,让设计的组件直接转化为代码,技术直接调用。

WeUI

网站链接:https://weui.io/

WeUI

WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。

这个小巧的框架提供了微信页面常用的组件,我们在设计微信风格的项目时,可以参考使用。

Framework 7

网站链接:http://www.framework7.cn/

Framework 7

一个简单、免费的 HTML 框架,主要用来构建移动端 web 应用,分为 iOS 和安卓两种风格。

其本身的结构非常简单,使用了最基础的 html、css 和 js 构建,很容易上手使用。也可以用来作为原型开发工具,迅速创建一个应用的原型。

总结

此外还有很多其他的前端框架,以上10个框架其实不需要设计师非常深入去了解,最基本的要求是设计师对其内容、样式、组件有个大致的认知即可。在和技术协作的过程中,知道哪些组件不需要额外设计,哪些组件可以进行样式扩展。

就比如设计师去学习前端,并不是去代替前端的工作,而是对 UI 界面有个更深层次的认知,设计的同时会考虑到界面的交互性、扩展性、可用性。犹如庖丁解牛,透过表象看到结构本质,提高自己的界面把控能力。

转载自:https://www.uisdc.com/2019-10-front-frame

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/402485.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Linux学习笔记】用nc实现两台主机间的文件传输(不需要输密码)

通常,可以用scp完成两台主机间的文件传输任务,但在主机间未建立信任关系的情况下,scp每次都需要输入密码,用起来感觉不是很方便,之前这篇笔记介绍过不用输入密码执行脚本或传输文件的方法,但对于一些临时性…

Linux C 中断言assert()使用简介

assert()是一个调试程序时经常使用的宏,在程序运行时它计算括号内的表达式,如果表达式为FALSE (0), 程序将报告错误,并终止执行。如果表达式不为0,则继续执行后面的语句,它的作用是终止程序以免导致严重后果&#xff0…

SQL中group by的用法

group by即按照给定字段对结果集进行分组,从字面意义上理解就是根据“by”指定的规则对数据进行分组,所谓的分组就是将一个“数据集”划分成若干个“小区域”,然后针对若干个“小区域”进行数据处理。 group by的写法: 1.select 字…

【Mac】tar 打包指定目录并排除某些目录或文件

如题,bash脚本如下: #!/bin/bashDIR$1 # 要打包的目标目录# 排除的目录列表 if [ "$1" "retail" ]; thenarray(logs lib target .idea .mvn) elif [ "$1" "manager" ]; thenarray(.idea update data/log d…

C#写文本文件如何写入回车换行符?

public void WriteLogFile(String input){//指定日志文件的目录string fname "C:\\Inetpub\\wwwroot\\CommonFunction\\upFile " "\\logfile.txt ";//定义文件信息对象FileInfo finfo new FileInfo(fname);//判断文件是否存在以及是否大于2Kif (finfo.E…

Linux C 数据结构---链表(单向链表)

上一篇我们讲到了线性表,线性表就是数据元素都一一对应,除只有唯一的前驱,唯一的后继。 线性表存储结构分为顺序存储、链式存储。 顺序存储的优点: 顺序存储的缺点: 链表就是典型的链式存储,将线性表L &am…

前端学PHP之文件操作(认真读读)

前面的话 在程序运行时,程序本身和数据一般都存在内存中,当程序运行结束后,存放在内存中的数据被释放。如果需要长期保存程序运行所需的原始数据,或程序运行产生的结果,就需要把数据存储在文件或数据库。一般地&#x…

java 定时任务(三):cron表达式

From: https://www.cnblogs.com/sawyerlsy/p/7208321.html 一、完整的cron表达式由7位以空格分隔的时间元素组成,从左到右分别为:秒、分、时、日期、月份、星期几、年份。其中需要注意的有以下几点: 1. spring 4.x 的spring task中只支持前6种…

1.对程序的看法 2013.8.1

一、一个程序或者是一个项目,其实就是 数据库 与 程序 与 界面的集合。做程序主要就是处理它们三个 之间的关系 处理它们的经典模式就是MVC M model 数据库v view 显示 html css javascriptc con 控制器 编程语言 二、一个项目 就是类库与函数的集合 三、类库 ①构…

做值钱的事比赚钱更有意义

艾伦图灵是英国著名的数学家,二战时期,他在军方邀请下进行德国Enigma密码破译工作。Enigma是当时德国使用的一种加密系统,直到今天还被视为史上最可靠的加密系统之一。它由一个装满了复杂而精致元件的盒子构成,包括26个字母键盘、…

我为什么要立刻放弃 React 而使用 Vue?

From: https://baijiahao.baidu.com/s?id1607323518011007619&wfrspider&forpc CSDN 发布时间:18-07-29 19:28 现在,Vue.js 在 Github 上得到的星星数已经超过了 React。这个框架的流行度在不断增长,由于它并没有像 Facebok&#…

本地同时修改2个版本

为什么80%的码农都做不了架构师?>>> 昨天讨论后我又想了想,你主要的需求是想在本地同时修改2个版本,用分支也可以做到,方法如下 上图是库的目录结构,比如Codes上做了个分支b1,想同时在本地编辑…

Linux C 内存管理

提到C语言,我们知道C语言和其他高级语言的最大的区别就是C语言是要操作内存的! 我们需要知道——变量,其实是内存地址的一个抽像名字罢了。在静态编译的程序中,所有的变量名都会在编译时被转成内存地址。机器是不知道我们取的名字…

20145315 《信息安全系统设计基础》第14周学习总结

20145315 《信息安全系统设计基础》第14周学习总结 课程内容总结 物理地址和虚拟地址 物理地址:计算机系统的主存被组织成一个由M个连续的字节大小的单元组成的数组。每个字节都有唯一的物理地址。虚拟寻址:使用虚拟寻址时,CPU通过生成一个虚…

Moment.js常见用法总结

From: https://www.jianshu.com/p/9c10543420de Moment.js常见用法总结 Moment.js是一个轻量级的JavaScript时间库,它方便了日常开发中对时间的操作,提高了开发效率。 ​ 日常开发中,通常会对时间进行下面这几个操作:比如获取时间…

CSDN并购博客园遐想

我要打“假想”,打成了“遐想”,不过确实这篇文章属于我个人YY出来的。主要晚上写博客,用live writer发布好多次都不成功,然后用浏览器访问博客园首页,出现了下面画面。估计很多人都很熟悉这个界面,因为阿里…

Linux C 深入分析结构体指针的定义与引用

关于结构体的基础知识&#xff0c;网上书上都一大堆&#xff0c;这里就不赘述了&#xff0c;下面我们要学习的是结构体指针。 介绍结构体指针之前&#xff0c;先给大家看一个小程序&#xff1a; [cpp] view plaincopy #include <stdio.h> #include <string.h> …

20155313 预备作业二

你有什么技能比大多人&#xff08;超过90%以上&#xff09;更好&#xff1f;针对这个技能的获取你有什么成功的经验&#xff1f;与老师博客中的学习经验有什么共通之处&#xff1f; 说到一个比90%的人要强的技能&#xff0c;我一下子很惆怅&#xff0c;说起来&#xff0c;从小家…

react 父子组件之间相互传值

From: https://blog.csdn.net/luzhaopan/article/details/85003362 1、定义父组件 import React, { PureComponent } from react; export default class Father extends PureComponent { render(){ return( <div> …

android 多线程概述

android多线程&#xff0c;一直是一个麻烦的事情&#xff0c;要掌握它的本质&#xff0c;我们需要搞清楚一个问题&#xff0c;linux多线程的本质。 我们这篇文章&#xff0c;来讨论以下的议程&#xff1a; 了解linux的历程&#xff0c;了解android的异步任务机制&#xff0c;了…