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

WeUI

Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、 progress, toast、article、icon等各式元素。

Frozen UI

一个开源的简单易用，轻量快捷的移动端UI框架。基于手Q样式规范，选取最常用的组件。

SUI Mobile

是一套基于 Framework7 开发的UI库。并参考 Ratchet、Fastclick 开源库。它非常轻量、精美，只需要引入我们的CDN文件就可以使用，并且能兼容到 iOS 6.0+ 和 Android 4.0+，非常适合开发跨平台Web App。

前端框架百花齐放、争奇斗艳，令人眼花缭乱。大神们一言不合就整一个框架出来，另小白们无所适从。下面罗列了一些比较优秀的UI框架，Star多的大都是老牌劲旅，Star少的许多是后起之秀。

（1）Element 饿了么 vue 2.0后台UI框架 (Sta 优秀的 github demo 推荐 https://github.com/bailicangdu

Vue-ydui 是 YDUI Touch 的一个基于 Vue2.x 的移动端&微信UI实现版本，专为移动端打造，在追求完美视觉体验的同时也保证了其性能高效。

推荐使用 npm 来安装，享受生态圈和工具带来的便利，更好地和 webpack 配合使用：

UI 设计(或称界面设计)是指对软件的人机交互、操作逻辑、界面美观的整体设计，也叫界面设计。UI 设计分为实体 UI 和虚拟UI，互联网说的 UI 设计是虚拟 UI, UI 即User Interface(用户界面)的简称。UI 设计师的职能大体包括三方面:一是图形设计，软件产品的产品“外形”设计。二是交互设计，主要在于设计软件的操作流程、树状结构、操作规范等。三是用户测试/研究，这里所谓的“测试”，其目标恰在于测试交互设计的合理性及图形设计的美观性，主要通过以目标用户问卷的形式衡量 UI 设计的合理性。UI设计目前的前景还是很不错的，很多企业都缺少 UI设计师。而且可以看到的是，现在社会的发展，更多的智能机和智能机器人研发出现，这些都离不开UI 设计师。所以说 UI 设计的是很有前途的，是不会失业的。而且 UI 设计门槛不高，要入门也不难的。从工作内容来说，UI 设计在当前的互联网领域、科技领域可以说无处不在，好的 UI 设计能够明显提升用户的使用体验,从而给产品带来更多的附加值,所以UI 设计对于互联网产品是非常重要的。目前 UT 设计通常分为两个大的工作方向，一个是交互设计,另一个是视觉设计。总的来说，UI 设计相比较于编程而言，还是非常适合大众学的并且就业前景很广阔。学完 UI 设计，能获得一份稳定而又不失乐趣的工作，同时有利于追求更高品质的生活，在艺术领域可以获得更多的启迪。

minit－ui和element－ui，前者是移动端，后者是PC端，结合Vue功能不错，就是UI组件不是很强大，可以满足一般的需求。

所以element－ui不适合移动端。

element－ui的需求：丰富的feature：丰富的组件，自定义主题，国际化。文档 & demo：提供友好的文档和 demo，维护成本小，支持多语言。安装 & 引入：支持 npm 方式和 cdn 方式，并支持按需引入。工程化：开发，测试，构建，部署，持续集成。

作为一个基础组件库，还有一个很重要的方面就是组件种类丰富。element－ui官方目前有55个组件，分成了6大类，分别是基础组件、表单类组件、数据类组件、提示类组件、导航类组件和其它类型组件。这些丰富的基础组件能很好地满足大部分PC端toB业务开发需求。

element－ui的组件源码在packages目录里维护，而并不在src目录中，这么做的目的猜测是为了让每个组件可以单独打包，支持按需引入。

但实际上想达到这个目的也并不一定需要这么去组织维护代码，更推荐把组件库中的组件代码放在src／components目录中维护，然后通过修改webpack配置脚本也可以做到每个组件单独打包以及支持按需引入，源码放在src目录总是更合理的。

扩展资料：

element－ui组件的样式、公共样式都在packages／theme－chalk文件中，并且它是可以独立发布的。element－ui组件样式中的颜色、字体、线条等等样式都是通过变量的方式引入的。

在packages／theme－chalk／src／common／var．scss中我们可以看到这些变量的定义，这样就给做多主题提供了方便，因为我只要修改这些变量，就可以实现组件的主题改变。

updateVarible是一个POST请求，他会把你修改的的主题配置提交到后端server，提交的数据你可以自己去查看它的RequestPayload，这个POST请求会返回一段CSS文本，然后会动态插入到head标签的底部，来覆盖默认样式。

可以通过审查元素看到head底部会动态插入一个id为chalk－style的标签。

参考资料：百度百科-UI设计

文档地址： 配套有基于Webpack的构建工具，可快速创建已内置本组件库的Vue工程

在开始这个话题之前，UI设计师先来回想一下自己的工作流程，当我们开始做一个界面时，不外乎两种情况，一种是新产品，一种是现有产品迭代界面重绘。对于前者，是不是先扒拉扒拉参考一下竞品的界面设计，然后套一套自己产品的功能，然后就可以开工了，这里需要放个导航条，嗯，这里用选项卡，再加个搜索框，搜索图标放里面好还是放外面好呢，就放外面吧，热门搜索要不要做成标签呢，不行，这事决定不了，去问问项目经理去，这里还需要一个文本输入框，限制200字，那就给它个高度300像素吧。而第二种情况，更简单，重新配配色，布布局，画画图标，就酱。不出意外的话，绝大多数UI不会脱离这个套路。（“大神级”UI自然也不会在看这篇文章，这一部分人就暂时忽略了） 如果作为UI设计师的你现在仍然停留在这个阶段的话，那从现在开始，你需要重新规划一下自己的设计思路了，并且，最最重要的是，你需要了解两个东东，“框架”和“库”。这两个概念我自己也比较模糊，从UI设计师的角度出发，我们需要知道的一点是和你们合作的前端极少极少不使用框架，而UI库是一些封装好的组件的样式，你发给攻城狮的设计稿，他们拿到后的第一反应就是赶快看看（咳咳，当我没说）有没有现成的可使用的组件样式，最好越接近你的设计越好，然后简单改改，攻城狮们的工作思路和我们是一样一样的，最好不改交互方式，只改样式。（什么控件、组件、插件的，我也不能严格区分，所以即使有错误的地方，也请勿纠正，哈哈）

说到这里，UI设计师又开始各种烦躁了，设计师到底为毛要掌握这些莫名其妙的知识？？举个例子先，我们都知道给响应不是那么快的页面设计一个加载动画，那作为设计师的你知不知道加载状态是和服务器存在数据交互时使用，如果是本地行为，则不需要加载状态。只有了解这个，你才会知道你的加载动画应该在哪些页面出现，进行什么操作时出现，以什么形式出现合适。（咦，这个例子似乎举得没有代表性，那么来看下面这个例子） 就说个最简单的tab选项卡吧，SUI组件库里的tab选项卡样式是下面这样子的：

样式似乎没有什么参考性，但你从中要得到的一个重要信息就是，作为选项卡而言，内容要和选中标签页看上去成为一个整体，也就是说你可以重新设计成下面这个样式

但如果你设计成了这种样式

那么请来告诉我，这神秘的横线我该如何理解呢？即使下面这种，仍然不是最佳方式，因为我们的选项卡需要“第一眼看上去就知道哪个tab页处于选中状态”。

目前广泛应用的UI组件库，包括easyUI、amazeUI、Bootstrap等等，我们可以从这些来入手，在设计时进行一下参考，如果它的按钮有四个状态，OK，你也来对应设计四个状态，如果它的input输入框有禁用状态，获得焦点状态，那同样你也要在自己的设计文档中予以体现。（当然，并非绝对，也要考虑项目的实际情况，灵活变通） 现在重新理一下工作流程，你要先咨询一下前端开发人员他们常用什么，或者项目中已经使用了什么，咱们来举例说明，如果前端攻城狮们已经使用了EasyUI，而碰巧你的项目中需要一个日期选择的功能，那正确的思路应该是怎样的呢？ 首先，你需要先看一下EasyUI库里日期控件的样子。就是下面这样

然后试一下功能，再进行设计时，心里就有底了，比如可以改成下面这样

但这样就完了么？作为UI还需要考虑对于这个控件而言都提供了几种状态？默认加载的当前日期、选中其他日期后的当前日期、鼠标经过、周六/周日的日期颜色、非本月的日期的颜色，这些都需要一一体现在你的标注文档里，事无巨细，一旦疏忽了其中任何一个小细节，好点的情况是负责的前端开发人员会过来和你沟通，而有时可能攻城狮们一疏忽，那只有寄希望于视觉走查和测试了。这么简单的一个日期控件都需要考虑全面，所以，一个合格的UI还是需要多沉浸的。 如果你不没有看过UI库里日期组件的样式，而自作主张的设计成了下面的样子

还拿出很多理论来支持自己的设计，你看，年和月的选择都很方便快捷嘛，嗯，好想看你被开发人员暴打的样子……当然了，这里不是说不让你发挥你的创意，不过除非你有非常说服力的理由和让别人心服口服的设计理论支持，否则，不要做这种出力不讨好的事情，因为作为成熟的组件库，经过多年的发展，已经被很多人所认可和使用，也能更大程度上和其他用户经常使用的产品保持一致的交互。

对于移动端，Android SDK提供的界面UI基本没有看的必要，而绝大多数开源UI库源码在github，给设计师们直观的查看设置了门槛，比如GreenDroid等等，Android的UI框架和web的有个比较大的区别就是按组件分类，像Side-Menu分类侧滑菜单，Pull-to-Refresh下拉刷新，给UI设计师推荐一个awesome-a

WeUIWeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、 progress, toast、article、icon等各式元素。Frozen UIFrozen UI是腾讯社交用户体验设计 － 增值UI开发团队一个开源的简单易用，轻量快捷的移动端UI框架。基于手Q样式规范，选取最常用的组件，做成手Q公用离线包减少请求，升级方式友好，文档完善，目前全面应用在腾讯手Q增值业务中。FrozenUI提供的CSS组件是目前QQ会员前端开发组所用的通用样式库。遵循手Q样式规范，基本样式使用离线包的方式减少请求，并提供快速接入的方案。FrozenUI提供的一系列JavaScript插件，更优雅地在移动端上呈现更灵动的动画效果。FrozenJS 是针对移动端开发的 js 组件库，其依赖 zepto.js 和 FronzenUI。FrozenJS 的所有组件均以 zepto 的插件的形式存在。阿里开源的SUI MobileSUI MobileSUI 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团队百度系GMUGMU是基于zepto的mobile UI组件库，提供webapp、pad端简单易用的UI组件!JingleJingle是一个SPA(Single Page Application)开发框架，用来开发移动端的html5应用，在体验上尽量去靠近native应用，希望有一天html5能够做到与native一样的操作体验。丰富的UI组件提供了按钮、列表、表单、弹出框、轮换、上拉/下拉、日历等各种移动端常用的组件，简单适用，前后端分离支持前端模板渲染，模板按需自动加载，完善的事件机制。轻量级基于Zepto开发，依赖了iscrolpurecsspurecss采用其Grid的部分即可，需要定制的部分，建议自行配置，或者是直接采用grid.css，grid960.css这样的栅格来处理。Purecss小的没有节操，全部模块gzip压缩后才 4.4KB* 。 考虑到移动端，保持文件尽量小对我们来说非常重要，每一行CSS都经过深思。如果你只用部分模块，简直小的忽略。Pure基石,Pure基于Normalize.css添加了HTML元素的布局和样式，以及常用的UI组件。全是精华，木有糟粕。移动端是初衷,Pure是响应式的盒子模型，适应所有尺寸的屏幕。通过皮肤生成器可以自定义样式。写出你自己的样式,Pure提供最基础的样式，鼓励你基于此写出自己的样式。它被设计为容易覆写，且不影响你自己的样式。ionic基于angular2，丰富的UI组件，大大改进的编程模型，非常适合快速开发。jquery mobilejQuery Mobile 是创建移动 web 应用程序的框架。jQuery Mobile 适用于所有流行的智能手机和平板电脑。jQuery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局。BootstrapBootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。wex5国产的ui，支持打包。前端UI：完全恪守html5+css3+js，干净纯洁设备api：采用业界主流Phonegap/Cordova向导、模板：简单定义，即可轻松制作向导和模板主题、样式：海量bootstrap资源引入和定制UI组件：纯H5+CSS3，轻松引入第三方UI组件插件：轻松对接即时通讯、推送、支付等各类插件后端：轻松调用后端组件和api，并实现可视化