现在位置首页 / 产品设计 /正文

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

作者: IT小兵 | 2013年8月6日| 热度:℃ | 评论: |参与:

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

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

jquery mobile 扁平化设计

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

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

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

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

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

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

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

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

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

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

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

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

图示如下:

free Flat UI down

看起来非常舒服。大家可以在这里下载学习: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 Flat UI theme

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

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


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

    点击阅读本文所属分类的更多文章: 产品设计 。和高手一起交流:346717337
    友荐云推荐

    未注明转发、原文均为本站原创。分享本文请注明 原文链接

    给您更多信息和帮助

    在这里您可以找到更多:

    技术交流群:346717337 Jquery插件交流

    投稿:suchso@vip.qq.com

    承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

    echarts教程系列
    本月最热文章

    微信扫一扫,徜徉悠嘻网,您的休闲乐园

    微信公众号:快乐每一天

    随机文章
    标签

    技术交流群:346717337

    投稿:suchso@vip.qq.com

    专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询