作者 | 慕课网精英讲师 Rosen
UI 是什么？
先来说下 UI，这俩字母是 User Interface 的缩写，个别翻译成“用户界面”。UI 最次要的性能就是建设用户和零碎后盾之间的分割，零碎后盾通过 UI 把数据转换成可视化的内容展现给用户，同时用户也要通过 UI 把操作指令（包含数据）传给零碎后盾。
对 UI 不太熟悉的同学一听到这个概念，可能会感觉它的作用就是怎么把一个产品做的丑陋，所以 UI 设计师常常被人叫成美工。而事实上 UI 应该是负责“交互”和“视觉”这两方面的工作，这两局部内容形成了产品的用户体验。
用户体验里最重要的应该是这个产品好不好用，也就是“交互”这部分，这其中包含产品性能是否欠缺，产品流程是否设计的正当，应用是否不便，操作是否晦涩等。在一些大公司里，为了保障产品好用，还会专门设置交互设计师这个职位，专门做交互局部的设计工作。
“视觉”在用户体验中也很重要，但它肯定要建设在好用的根底上。如果一个用户在应用产品的性能上呈现问题，这个用户很可能就散失了。但如果产品用起来没问题，只是界面不那么丑陋，个别也就是被吐槽一下，不会造成性能缺失所导致的那么重大的结果。在我看来，一个零碎的交互舒服水平要比好看更重要。
UI 的贡献者
在一个我的项目的开发周期中，UI 的造成须要多个角色进行配合。产品经理、UI 设计师、前端开发人员都是用户界面重要的贡献者，甚至后端开发人员在做数据处理时也都须要思考到 UI 的影响。上面大略说下这几个贡献者的各自分工：
产品经理，我的项目的主导者。次要思考的是零碎里功能性的局部。产品经理须要理解一个零碎面向的用户群体，以及这个群体的特点和应用习惯，而后设计出满足用户需要的产品。在这个阶段产品经理会产出产品的原型，包含功能设计和大抵的性能散布。产品的设计决定了产品的实用性。
UI 设计师，用户体验的设计者。当产品经理确定产品性能后，UI 设计师就该进场了。设计师会和产品沟通，按照产品模型再做交互和视觉上的优化，最初按照设计后果产出 UI 设计图。UI 设计图是 UI 设计师的最终产出后果，但这个工作更重要的是在设计上，不仅仅是画设计图。所以，千万别再把人家叫美工了，因为叫错被打了也就忍着吧。
前端开发人员，从 UI 设计图到理论产品的实现者。前端开发人员最次要的工作是把产品和 UI 确定的最终设计稿变成能够运行的程序。前端开发人员是一个施工方的角色，但能够从代码的角度对产品经理和 UI 设计师提出有价值的意见。并且在施工中，好的前端开发人员也会留神到用户体验，比方优化加载速度，按钮点击范畴，列表滚动的顺滑水平等。
后端开发人员，幕后英雄。咱们个别感觉后端开发人员只管解决数据就能够了，和 UI 没什么关系。但当咱们确定好一个页面要显示什么内容的时候，还是要找后端开发的同学来帮着咱们把这个页面须要的数据整合到一起，这就须要后端人员在做数据结构设计的时候就把这些因素思考进去。
UI 框架
后面介绍了 UI 的状况，从当初开始，就要进入咱们这个课程的主题–UI 框架。咱们这个课程次要讲页面切图局部内容，也就是 HTML 和 CSS 的局部。
当咱们在做切图时，最常见的是把设计图用 HTML 和 CSS 一一还原进去。这个过程中咱们会发现写了很多冗余的代码。比方 Button，每个页面用到的中央都要写上一堆 Button 的款式，缓缓的为了放慢开发，就开始大量复制粘贴，最初就导致整个代码里有几十个很相似的 Button 款式。
页面中其实有很多像 Button 这种会用到很屡次的组件，这时候咱们会想到把这些具备共性的货色抽离进去，变成通用的组件。这样再写页面的时候，只有引入这些通用的组件，就不必在页面里反复写这些内容了。通过一直的提炼，就造成了 UI 库或 UI 框架。
应用框架的益处也是不言而喻的：
标准化。UI 设计师应该有对立的设计标准的，当咱们制作出一套前端框架的时候，就能够把设计标准转化成开发规范。如果设计师那边出的设计图并没有什么规范，比方同样性能同样地位的按钮，有的用 50px 高度，有的用 55px 高度，这时候前端同学就有任务去和 UI 设计师沟通下，把设计标准确定下来，保障同类组件有对立的尺寸和款式。
进步开发效率。应用了 UI 框架当前，所有通用的组件的开发量就省下来了，开发人员只须要做每个页面里那些没有共性局部的开发。
不便扩大。在应用了通用的框架后，咱们具备共性的内容都集中在了一起。所以当咱们要对产品做款式革新或扩大的时候，只须要对框架进行降级就能够了。不会像原始的那种开发方式中，哪怕改个按钮色彩，也要去每个页面里都改一遍。
进步页面加载速度。这个长处其实是被动的，当抽离出 UI 组件后，就会少了很多冗余代码，这样总体文件体积会变小。同时抽离进去的通用组件通过做缓存，加载速度还会进一步提高。但说这个长处是被动的，是因为这并不是咱们做 UI 框架的初衷，通常不会为了进步加载速度而做一个 UI 框架。
现有挪动端 UI 框架
当初市场上曾经有很多的 UI 框架，也有很多是收费的，咱们能够间接拿来用。上面介绍几个挪动端常见的 UI 框架：
Bootstrap，弱小的 UI 框架。它同时反对 PC 端和挪动端，还能够做到自适应；组件十分全面；稳定性好，不容易出问题；还提供了基于 jQuery 的 JS 组件库（据说 5.x 版本后会剔除对 jQuery 的依赖）。它的毛病就是体积太过宏大，太过大而全。
WeUI，微信官网出品的。这个框架设计比拟简洁好看，提供了挪动端一些根底的组件，体积很小，没有提供 JS 组件。我比拟喜爱这个设计，这个课程里一些款式也是参考了这个框架。
VUX-UI，基于 VUE 的 UI 库。它理论是在 WeUI 的根底上做了一些革新，并应用 VUE 实现了一些 JS 组件库。
Ant Design Mobile，基于 React 的挪动端 UI 框架。它和 VUX-UI 的定位是一样的，只不过是基于 React。另外这个 UI 框架的设计是独自开发的，没有基于 WeUI。
Frozen UI（腾讯）、Mint UI（饿了么）、Cube UI（滴滴）。这些都是各个大公司外部的 UI 框架，做的成熟了，就做了开源提供给内部的开发者应用。
后面介绍的是一些比拟罕用的，理论还有很多其余设计的不错的 UI 框架，这里就不粗疏介绍了。在筛选 UI 框架的时候肯定要先看文档，看是否合乎本人的需要。再就是尽量用一些公众的框架，能够缩小踩坑的机率。
小结
这篇文章带大家理解了 UI 的概念，制作 UI 的参与者，UI 框架的作用以及一些罕用的 UI 框架。心愿大家看完能对 UI 和 UI 框架相干的内容有个比拟具体的印象。最初强调下，不要把 UI 设计师叫成美工！