多语言展示
当前在线:429今日阅读:126今日分享:42

扁平化设计及常用的扁平化框架(Flat UI)介绍

扁平化设计(Flat Design), 奉行的是极简设计理念,抛弃任何三维特效(如阴影、渐变、文理等), 回归最简单的应用元素和排版。扁平化设计理念起源于Google,但兴起于Apple,最负盛名的代表就是iOS系统了。本文整理了一些扁平化设计UI,方便Web设计。
1. BootStrap Flat UI
1

BootStrap是Twiter推出的一个前端开源工具包, 囊括了基本组件、布局、样式及交互js实现等组件,一经推出便大受推捧, 其BootStrap Flat UI便是基于BootStrap 之上开发的,主要变更在于色调。网址:'http://maxlibin.com/demo/twitter-boostrap-flat-ui/index.html'关于BootStrap更具体的介绍可参见我后续的经验。

2

BootStrap提供基本的css包含:版体(Typography), 代码(Code),表格(Table),表单(Form),按钮(Buttom),图片(Image),图标(Icon)

3

BootStrap提供的组件(Component):包含下拉列表(Dropdown), 按钮组(Button groups), 下拉按钮(Button dripdown), 导航(Nav),导航条(Navbar),面包屑(Breadcrumbs),分页(Pagination),表单(Labels),等等。

5

BootStrap提供的JavaScript功能:包含了常见的动态交互功能,如模态窗口(Modal), 滚动切换(Scrollspy), 标签切换(Tab), 提示工具(Tooltip), 转动切换(Carousel)等

6

BootStrap的定制(Customize):BootStrap最闪亮的功能当属此项了,你可以根据自身需求定义并下载组件, 还可以定制自己风格的色调、字体等等END

2. Flat UI
1

Flat UI 是一套基于 Twitter Bootstrap 实现的精美的扁平风格 UI 组件包,该组件包中既包含了UI常用组件库,还包含一些自实现的复杂的 UI 部件,例如:开关按钮、滑块等等。网址:'http://flat-ui.com/'

2

Flat UI提供了常用的UI组件,如:按钮(Button), 菜单(Menu),开关(Switcher), 输入组件(Input)等。

3

Flat UI主色调10种,按深浅色差分共20种,方便开发者快速构建时尚、鲜艳的网站风格。

4

Flat UI提供一些常用操作图标,很容易集成并应用与项目。

5

样式事例END

3. BootMetro

是微软Metro风格的一款,相比稍逊,就不多介绍了。

推荐信息