前端ui框架有哪些_美容护肤

前端ui框架有哪些？前端ui框架有：适合移动端的UI框架（Mint UI、SUI Mobile、Weui等），适合PC 端的UI框架（iView、Element UI、SUI、H-ui等），适合混合开发的UI框架（ionic、Framework7等），以下是具体的内容介绍。

适合移动端的UI框架

Mint UI（饿了么团队）

中文官网：http://mint-uigithubio/#!/zh-cn

描述：基于vue的移动端UI框架

基于vue

组件库：

GitHub地址：https://githubcom/ElemeFE/mint-ui/

预览地址：

http://elemefegithubio/mint-ui/#/

基础引入：

CDN:

官网：http://msuitaobaoorg/

描述：一套基于 Framework7 开发的UI库。基于IOS风格。它非常轻量、精美，只需要引入我们的CDN文件就可以使用，

并且能兼容到 iOS 60+ 和 Android 40+，非常适合开发跨平台Web App。

基于zepto，IOS风格

预览：

http://msuitaobaoorg/demos/

组件库：

GitHub地址：https://githubcom/sdc-alibaba/SUI-Mobile

基础引入：

CDN:

描述：WeUI 为微信 Web 服务量身设计,是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。

包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。

GitHub地址：https://githubcom/weui/weui

预览：

UI组件：https://weuiio

JS组件：https://githubcom/weui/weui

基础引入：

CDN：

官网：http://wwwyduiorg/

描述：一只注重审美，且性能高效的移动端&微信UI。基于jQuery

兼容性：兼容绝大多数移动端设备（兼容Android40+、IOS60+）；

采用 flexbox 布局，因低版本安卓及部分特殊浏览器不兼容flex-basis、flex-wrap、inline-flex属性，YDUI 将采取其他解决方案；

基础引入：（需要下载）

引入YDUI样式：yduicss

引入YDUI自适应解决方案类库：yduiflexiblejs

引入jQuery20+

引入YDUI脚本：yduijs

组件库：

预览：

http://myduiorg

GitHub地址：https://githubcom/ydcss/ydui

个人观点：自定义keyBoard插件为亮点

GMU（百度GMU小组开发）

描述：基于zepto的轻量级mobile UI组件库，符合jquery ui使用规范，提供webapp、pad端简单易用的UI组件。

兼容iOS3+ / android21+，支持国内主流移动端浏览器，如safari, chrome, UC, qq等。

GitHub地址：https://githubcom/fex-team/GMU

star:1106,fork:461

latest commit 2017418 2pm

8 contributors

基础引入：

引入resetcss：https://githubcom/fex-team/GMU/blob/master/dist/resetcss

引入gmucss：https://githubcom/fex-team/GMU/blob/master/dist/gmucss

引入zeptojs：https://githubcom/fex-team/GMU/blob/master/dist/zeptojs

引入gmujs：https://githubcom/fex-team/GMU/blob/master/dist/gmujs

FrozenUI（QQVIP FD团队 Alloyteam团队）

官方地址：http://frozenuigithubio/

描述：简单易用，轻量快捷，为移动端服务的前端框架。基于手Q样式规范。应用在腾讯手Q增值业务。兼容android 23 +，ios 40 + 。

GitHub地址：https://githubcom/frozenui/frozenui

个人观点：JS组件库相对简洁，移动优先

Foundation

中文官网：http://wwwfoundcsscom/

描述：Foundation是国外最流行的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

GitHub地址：https://githubcom/zurb/foundation-sites

基础引入：

CDN:

Amaze UI

官方地址：http://amazeuiorg/

描述：中国首个开源 HTML5 跨屏前端框架。Amaze UI 关注中文排版，根据用户代理调整字体，实现更好的中文排版效果。基于jQuery

GitHub：https://githubcom/amazeui/amazeui

组件库：

基础引入：

CDN:

http://cdnamazeuiorg/amazeui/272/css/amazeuicss

http://cdnamazeuiorg/amazeui/272/css/amazeuimincss

http://cdnamazeuiorg/amazeui/272/js/amazeuijs

http://cdnamazeuiorg/amazeui/272/js/amazeuiminjs

http://cdnamazeuiorg/amazeui/272/js/amazeuiie8polyfilljs

http://cdnamazeuiorg/amazeui/272/js/amazeuiie8polyfillminjs

http://cdnamazeuiorg/amazeui/272/js/amazeuiwidgetshelperjs

http://cdnamazeuiorg/amazeui/272/js/amazeuiwidgetshelperminjs观点：适合PC端更多(例如分页的实现)

Pure

中文官网：https://wwwpurecsscn/

描述：纯CSS，美国雅虎公司出品的一组轻量级、响应式纯css模块，适用于任何Web项目。

GitHub：https://githubcom/yahoo/pure/

基础引入：

CDN:

iView

官网地址：https://wwwiviewuicom/

描述：一套基于 Vuejs 的高质量 UI 组件库。iView 是一套基于 Vuejs 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。

GitHub地址：https://githubcom/iview/iview

组件库：

基础引入：

CDN：

官方地址：http://element-cnelemeio/#/zh-CN

描述：基于 Vue 20 的桌面端组件库

GitHub：https://githubcom/ElemeFE/element

组件库：

基础引入：

CDN:

官网地址：http://suitaobaoorg/

描述：一套基于bootstrap开发的前端组件库，同时她也是一套设计规范。基于jquery

组件库：

GitHub：https://githubcom/sdc-alibaba/sui

基础引入：

CDN:

H-ui

官方地址：http://wwwh-uinet/

描述：轻量级前端框架，简单免费，兼容性好，服务中国网站。

基于jQuery

GitHub地址：https://githubcom/jackying/h-ui

组件库：

观点：无亮点,借鉴第三方插件完成

layui

官方地址：http://wwwlayuicom/

描述：经典模块化前端框架，更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

layui 兼容人类正在使用的全部浏览器（IE6/7除外），可作为 PC 端后台系统与前台界面的速成开发方案。

组件库：

GitHub：https://githubcom/sentsin/layui/

基础引入：

layuicss、layuijs

uiKit（YOOtheme 团队）

官网地址：http://wwwgetuikitnet/

描述：一款轻量级、模块化的前端框架，可快速构建强大的web前端界面。依赖jQuery

UIkit 兼容 IE9 以上现代浏览器。在 IE8 及其以下版本中，所有JavaScript 都会失效。

组件库：

GitHub地址：https://githubcom/uikit/uikit

基础引入：

CDN:

中文官网：http://wwwbootcsscom/

描述：简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。

组件库：

GitHub地址：https://githubcom/twbs/bootstrap

基础引入：

CDN：

Ace Admin后台管理系统模板：基于bootstrap3；http://acejekaby/

Metronic后台管理模板：http://wwwmetroniccom/

H+:http://wwwzi-hannet/theme/hplus/

jQuery UI+Bootstrap：https://githubcom/jquery-ui-bootstrap/jquery-ui-bootstrap/

更多：http://wwwcssmobancom/cssthemes/houtaimoban/

jQuery UI

官方网址：http://jqueryuicom/

组件库：

其他基于jQuery衍生出来的模板：

BUI：基于jQuery+KISSY UI:http://wwwbuilivecom/

EasyUI：http://wwwjeasyuinet/

描述：使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。

DWZ JUI：http://juiorg/

适合混合开发的UI框架

ionic

中文官网网址：http://wwwionic-chinacom/

描述：ionic是一个强大的 HTML5应用程序开发框架(HTML5 Hybrid Mobile App Framework)。基于angular

ionic 主要关注外观和体验，以及和你的应用程序的 UI 交互，特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。

ionic是一个轻量的手机UI库，具有速度快，界面现代化、美观等特点。

Framework7

官网地址：http://framework7cn/

描述：Framework7 是一个开源免费的框架可以用来开发混合移动应用（原生和HTML混合）或者开发 iOS & Android 风格的WEB APP。

也可以用来作为原型开发工具，可以迅速创建一个应用的原型。

它只专注于为 iOS 和 Google Material 设计提供最好的体验。

GitHub：https://githubcom/framework7io/framework7

OnsenUI

官网地址：https://onsenio/

描述：用来构建混合移动端APP的 HTML5 UI 框架

GitHub地址：https://githubcom/OnsenUI/OnsenUI

总结：

总结起来UI设计师的职能大体包括三方面：

一、图形设计

如果很倾向于图形界面设计，这儿是你最喜欢的部分。但一定要结合循环讨论过的分析结果做设计，否则你的作品很难被人信服。色调、风格、界面、窗口、图标、皮肤的表现是本环节的关键。

二、交互设计

就是将页面模块、元素进行粗放式的排版和布局，深入一些，还会加入一些交互性的元素，使其更加具体、形象和生动。

为此你要经常浏览大量的网站，亲身体验，积累经典的，很具亲和力的、友好的系统流程，你要考虑到整个系统的任何一个最终环节。这才是UI设计师工作量最大，难度最高的部分。

三、用户测试/研究

多部门共同参与的，包括可用性的循环研究、用户体验回馈、测试回馈。同时，UI人员也应该把一些可行性建议进行完善。很多设计师做了东西不喜欢改，这是一个大忌。

所以建议UI设计师在项目初始,就应该加入其中包括了解项目的市场定位,盈利模式,竞争对手等等,而通过分析竞争对手用户界面,可以给UI设计师一个初步的图形概念,而通过参与用户调研,用户分析能够获取到用户特征,年龄,需求,喜好等方面的信息,这些方面的信息,在风格定位,把握上起到至关重要的作用通过了解产品架构,知道什么功能应该做,什么功能应该突出,在参与了以上工作的制定后,相信许多UI设计师对自己所要设计的产品,已经是信心十足了吧后期在通过分析使用者报告,用户反馈等方面信息,做出界面上的调整,这样一来,一个完善的产品就可以面市了,而这个产品,再也不是一个全凭UI设计师个人喜好所设计出来的产品了。

UI设计师 • 职位要求

1、负责软件界面的美术设计、创意工作和制作工作，软件工程师背景和相应的编程能力，以及社会学心理学等人文学科储备。

2、根据各种相关软件的用户群，提出构思新颖、有高度吸引力的创意设计。

3 充分理解产品策划思路及理念，配合产品经理和研发人员实现产品各种界面的视觉设计;

4 建立和完善产品界面视觉设计规范;

5根据交互设计及产品规划，完成产品(iPhone、Android 、Web平台App及网站)相关的用户界面视觉设计；

6配合产品开发中的图形界面(GUI)设计；

7、对通用类软件或互联网应用产品的人机交互方面有自己的理解和认识。

8、具有敏锐的用户体验观察力，富有创新精神。

UI设计学好可从事的岗位还是很多的，就业前景广阔！

互联网的蓬勃发展，使得许多设计门类延伸出基于互联网的发展方向与工作岗位，UI设计行业当属其中延伸最为迅速的一个领域。

我国UI设计行业发展迅速，归功于各类企业的网站建设、产品迭代、品牌推广等需求的发展，使得UI设计不仅是互联网行业所需，也被诸多传统行业大量需求。在现在，以及可预见的将来，UI设计都是比较吃香的。UI是一门交叉学科，很多大学没有为大数据单独设置专业，主要有自学和报班学习两种途径。

UI设计可从事的岗位

很多人都知道UI设计师是高薪职业，在互联网公司上班，工作环境非常好。最主要是工资收入高，工作稳定。

但是很多人都不知道，UI设计师不仅可以从事UI设计方面的工作，还能胜任非常多的高薪岗位，不同职位薪资也不同，工作内容不同，以及未来发展，下面详细跟大家说一下。

01 / 网页设计方向

▶简介：

网页设计师是为网站页面进行设计并上线，需掌握各类型网页设计能力、页面交互与网站前端开发能力。

▶工作内容：

企业官网设计、首页设计、专题页设计、登录/注册界面设计、404页面设计、电商活动页面设计、后台页面设计等。

▶所需技能：

Photoshop、Illustrator（AI）、CorelDraw、Dreamweaver、CSS/HTML等。

▶岗位晋升与薪资：

1~2年经验：网页设计师，月薪5K~8K

3~5年经验：资深网页设计师，月薪8K~15K

5年以上经验：设计经理/设计总监，月薪15K~25K

02 / UI视觉设计方向

▶简介：

UI视觉设计是为现代商业服务的艺术，指从事为软件创建可识别图像的艺术的外观的，并结合人机交互逻辑，达到界面视觉一致性布局美观的整体设计工作的人。

▶工作内容：

软件界面的美术设计、IOCN设计、APP页面设计、H5页面设计、界面动效设计等。

▶所需技能：

Photoshop、Illustrator（AI）、After Effects（AE）、C4D、Axure RP、Sktech等。

▶岗位晋升与薪资：

1~2年经验：视觉设计师，月薪6K~8K

3~5年经验：资深视觉设计师，月薪9K~15K

5年以上经验：设计经理/设计总监，月薪15K~30K

03 / 交互设计方向

▶简介：

交互设计师是指参与完成对产品与它的使用者之间的互动机制进行分析、预测、定义、规划、描述和探索的过程的设计师。

▶工作内容：

产品行为设计、产品界面设计、启动页设计、加载页设计、APP页面设计、H5页面设计、界面动效设计等。

▶所需技能：

Photoshop、Illustrator（AI）、After Effects（AE）、Dreamweaver、HTML/CSS/JAVA等。

▶岗位晋升与薪资：

1~2年经验：交互设计师，月薪7K+提成+绩效

3~5年经验：资深交互设计师，月薪10K+提成+绩效

5年以上经验：设计经理/设计总监，月薪15K+绩效+分红

04 / 产品经理方向

▶简介：

产品经理是负责产品管理的工作，需要根据产品、市场及用户的诉求，明确开发产品的种类、模式等诸多方向的定位，并在后期推动相应产品的开发与推广等一系列与产品相关的管理活动。

▶工作内容：

市场分析、产品策划、产品设计、产品开发、产品营销、产品运营等。

▶所需技能：

Photoshop、Axure RP、Fireworks、Windows Office等。

▶岗位晋升与薪资：

1~2年经验：产品经理，月薪8K~10K+提成+绩效

3~5年经验：资深产品经理，月薪15K+提成+绩效

5年以上经验：产品总监，月薪20K+绩效+分红

个人工作室与手绘/插画方向薪资收入与个人设计水平和个人业务量而定。

UI设计公司种类及岗位设置

类型1：

广告/平面设计公司

▶简介：

专门经营广告/平面设计业务活动的企业。

▶工作内容：

①平面设计公司主要从事平面视觉表现类的设计业务，如字体设计、版式设计、企业VI设计等；

②广告公司所涉及的业务范围更广，涵盖企业产品与业务推广的整体流程：咨询、策划、制作、发布、反馈信息、评估效果等方面，设计方面的工作有网站建设、VI设计、广告/宣传片制作、海报设计、产品包装设计、APP设计、H5策划与制作等等。

▶岗位设置：

平面设计师、视觉设计师、交互设计师、产品经理、影视动画制作师等。

类型2：

互联网公司

▶简介：

广义的互联网企业是指以计算机网络技术为基础，利用网络平台提供服务并因此获得收入的企业，如Google、阿里巴巴、百度、网易、腾讯、京东、美团等等。

▶工作内容：

网站建设（官网、专题网站、企业后台）、产品开发（APP开发等）、品牌宣传（企业VI、海报、宣传片等）、业务推广（产品广告、活动海报、DM宣传页等）。

▶岗位设置：

平面设计师、网页设计师、UI视觉设计师、交互设计师、产品经理等

类型3：

企业设计部/企划部

▶简介：

各企业在品牌建设、产品开发和业务推广上都有不同程度的需求，会设立独立的设计部门和企划部门，设计部门的工作会线上与线下两方面的内容，企划部门偏重线下活动的策划与开展。

▶工作内容：

▶岗位设置：

UI视觉设计师、网页设计师、交互设计师、产品经理等。

PS：PS软件在UI设计工作中主要来用做UI设计界面设计、图标设计、处理的

AI：AI软件在UI设计工作中主要用来做UI界面设计、图标设计、字体设计、插画设计的

AE：AE软件在UI设计工作中主要用来做动效设计的

XD：XD或者sketch软件，sketch(只能在苹果电脑上安装)XD软件可以在双系统上安装

sketch和XD这两款软件功能是差不多的，XD的话是一款非常适合做UI设计工作，XD做图会非常快，因为XD的工具特别少，里面的工具是专门为做UI设计工作开发的一款软件，而且XD软件特别小，不会卡。

ARP：ARP或者默刀软件，ARP和默刀软件功能差不多二选一学习就可以了，这两款软件都是做原型设计的

UI设计是由很多很多界面组成的，这些界面每一步之间去交接的这个界面，如果说我们只做一个界面，UI设计师是可以做出来的，但是要做几十个上面个界面，如果我们一个个做是肯定会出问题的，所以需要先制作原型，我们根据原型再制作界面，这就是我们的前后联系，原型是不用做这个颜色，图标，细节的，只需搭建一个基础的版式就行，这个就是我们用ARP或者默刀软件做的。

C4D：C4D软件在UI设计工作中主要用来做建模的

蓝湖：蓝湖软件在UI设计工作中主要用来做标注设计的

Uo：输出电压

Ui：输入电压

Io：输出电流

Ii：输入电流

Po：输出功率

Pi：输入功率

Co：外部电容

Cc：分布电容

Ci：内部电容

Lo：外部电感

Lc：分布电感

Li：内部电感

现在原型设计工具有很多，那我今天就罗列一些UI设计师和产品经理经常用到的工具，以此提高工作效率，又好又快的完成工作。

第一款：Axure

Axure RP是美国Axure Software Solution公司旗舰产品，是一个专业的快速原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具，它能快速、高效的创建原型，同时支持多人协作设计和版本控制管理

第二款： Adobe XD

Adobe XD是一站式UX/UI设计平台，在这款产品上面用户可以进行移动应用和网页设计与原型制作。同时它也是唯一一款结合设计与建立原型功能，并同时提供工业级性能的跨平台设计产品。使用Adobe XD可以更高效准确的完成静态编译或者框架图到交互原型的转变。Adobe XD 面向网站设计、移动 APP 设计等设计工作。

第三款：Mockplus（摹客）

Mockplus，一款简洁快速的原型图设计工具。适合软件团队、个人在软件开发的设计阶段使用。其低保真、无需学习、快速上手、功能够用。并能够很好地表达自己的设计。从设计上，采取了隐藏、堆叠、组合等方式，把原本复杂的功能，精心安排。上手很容易，但随着你的使用，功能层层递进，你会发现更多适合自己的有用的功能。新手不会迷惑，熟手可以够用。值得一提的是这是一款国产工具，我认为是国内目前最好的工具。因为目前Mockplus的在线原型设计协作平台已然走在国内甚至国际（很多老外也购买摹客英文版）的前列，不论是原型设计、流程协作还是设计规范，都能够在摹客完成，非常方便。并且支持Figma、Sketch、PS、Axure、XD几乎所有主流工具的插件，界面和语言对国内设计师也非常友好。有兴趣可以去摹客官网注册试试。网页链接

- 可分工协作，多人编辑同一个项目；

- 通过评论和标注原型，完成对项目的审阅；

- 提升开发团队的生产力；

- 大大降低沟通交流成本。

第四款： Justinmind

JustinMind是由西班牙JustinMind公司出品的原型制作工具，可以输出Html页面。与目前主流的交互设计工具axure，Balsamiq Mockups等相比，Justinmind Prototyper更为专属于设计移动终端上app应用。justinmind的可视化工作环境可以让你轻松快捷的以鼠标的方式创建带有注释的高保真原型。不用进行编程，就可以在原型上定义简单连接和高级交互。

第五款：Balsamiq Mockups

Balsamiq Mockups是一款共享软件，每个lisence授权是79美刀，对个人用户来说，价格不菲。它推出之后如此受欢迎的原因是在软件产品原型图设计领域，特别是web原型图设计领域，还没有哪款产品有如此丰富的表现形式。使用Balsamiq Mockups画出的原型图都是手绘风格的图像，看上去非常美观、清爽（当然，跟使用者的设计水平也有关系）。它支持几乎所有的HTML控件原型图，比如按钮（基本按钮、单选按钮等）、文本框、下拉菜单、树形菜单、进度条、多选项卡、日历控件、颜色控件、表格、Windows窗体等。除此以外，它还支持目前如火如荼的iPhone手机元素原型图，这为开发iPhone应用程序的软件工程师提供了非常好的设计图。

第六款： Protoio

Protoio是一个专门用于移动应用的产品原型工具——可以构建和部署全交互式的移动应用的原型，并且可以模拟出相似的成品。基于Web的在线环境，它可以让你制作流行的 iPhone，iPad，Android 手机以及任何带有屏幕界面的产品原型。

UI 设计(或称界面设计)是指对软件的人机交互、操作逻辑、界面美观的整体设计，也叫界面设计。UI 设计分为实体 UI 和虚拟UI，互联网说的 UI 设计是虚拟 UI, UI 即User Interface(用户界面)的简称。

UI 设计师的职能大体包括三方面:一是图形设计，软件产品的产品“外形”设计。二是交互设计，主要在于设计软件的操作流程、树状结构、操作规范等。三是用户测试/研究，这里所谓的“测试”，其目标恰在于测试交互设计的合理性及图形设计的美观性，主要通过以目标用户问卷的形式衡量 UI 设计的合理性。

UI设计目前的前景还是很不错的，很多企业都缺少 UI设计师。而且可以看到的是，现在社会的发展，更多的智能机和智能机器人研发出现，这些都离不开UI 设计师。所以说 UI 设计的是很有前途的，是不会失业的。而且 UI 设计门槛不高，要入门也不难的。

从工作内容来说，UI 设计在当前的互联网领域、科技领域可以说无处不在，

好的 UI 设计能够明显提升用户的使用体验,从而给产品带来更多的附加值,所以UI 设计对于互联网产品是非常重要的。目前 UT 设计通常分为两个大的工作方向，一个是交互设计,另一个是视觉设计。

总的来说，UI 设计相比较于编程而言，还是非常适合大众学的并且就业前景很广阔。学完 UI 设计，能获得一份稳定而又不失乐趣的工作，同时有利于追求更高品质的生活，在艺术领域可以获得更多的启迪。

欢迎分享，转载请注明来源：品搜搜测评网

原文地址:https://pinsoso.cn/meirong/2178166.html