jquery mobile扁平化设计样式--Jquery mobile Flat UI介绍

jquery mobile扁平化设计样式--Jquery mobile Flat UI介绍

这几天开发的web app使用了jquery mobile，jquery mobile自带的样式比较适合做企业应用，

但是要是移动互联网应用的话，就显得通用一些，没有更鲜明的互联网元素。

现在扁平化设计炒的很热，FB等外国公司、苹果应用图标，都是很好很成功的例子。

互联网中使用的设计，大致分为拟物化和扁平化。层级明确、元素简单、颜色丰富、精简文字是Flat UI的设计原则。

拟物化设计模仿颜色、纹理、形状甚至实际生活中特定的实际形状，因此能对不喜欢新技术和更喜欢仿现实环境的人非常有帮助。

然而，对视障用户能有多少用户呢？坚持这种设计方法对他们会有价值吗？好吧，和拟物化设计相对应的，扁平化设计，

有很多优势可以帮助到这些特殊需求。因为扁平化设计使用基本的形状，比如，正规/不正规的多边形，它们更容易识别。

在上图中，左边的，扁平化设计展示了方形/矩形元素和高对比色的按钮。

而右侧的拟物化计算器，使用了低对比色和大量的立体和阴影元素。

扁平化和拟物化的两个计算器对比展示了两种技术之间的不同。

扁平化设计给予按钮本身较小的重要性同时增强了内容(本例中的数字和数学符号)。

另一方面，拟物化设计通过给予按钮更大的重要性而使得它们很突出，而内容却因为低对比度而不太醒目了。

上面的例子展示了扁平化设计如何提升和给予内容更大的重要性，从而能证明对视障用户是有帮助的。

Flat UI是一款扁平风格 UI 工具包，而且是开源免费的，非常精美。基于 Twitter Bootstrap 实现。这套界面工具包含许多基本的和复杂的 UI 部件，例如按钮，输入框，组合按钮，复选框，单选按钮，标签，菜单，进度条和滑块，导航元素等等。

图示如下：

看起来非常舒服。大家可以在这里下载学习：https://github.com/designmodo/Flat-UI/archive/master.zip

基于Flat UI，有一套适合Jquery mobile的css使用该有多好啊？！真的有。

jquery-mobile-flat-ui-theme就是基于Flat ui的一个开源主题，基于MIT License。

此扁平化的主题自适应各个移动终端，非常不错的移动主题。

项目地址：https://github.com/ququplay/jquery-mobile-flat-ui-theme

要求：至少 jQuery Mobile version 1.3.0

下载后，替换jquery mobile自带的css即可。本身带了a b c  d  e  f 6个主题样式。

使用：

 <link rel="stylesheet" type="text/css" href="jquery.mobile.flatui.css" />

是不是和Flat ui很接近啊？我比较喜欢主题F。是不是很清新？让我想起了我的初恋.....哈哈

大家也可以根据自己项目的特点进行修改主题。

修改的方式参考：[jQuery Mobile入门教程——主题的使用和定制]

转发请注明来自：IT分享http://suchso.com