什么是 UI 框架？
本文首发自「慕课网」，想了解更多IT干货内容，步骤员圈内热闻，接待眷注！
作者| 慕课网精英讲师 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 计划师叫成美工！
接待眷注「慕课网」，发觉更多IT圈优质内容，分享干货知识，协助你成为更好的步骤员！
