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