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

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

1. BootStrap Flat UI

  • 01

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

  • 02

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

  • 03

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

  • 04

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

  • 05

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

2. Flat UI

  • 01

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

  • 02

    Flat UI提供了常用的UI组件，如：按钮（Button）, 菜单（Menu），开关（Switcher）, 输入组件（Input）等。

  • 03

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

  • 04

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

  • 05

    样式事例

    3. BootMetro

    • 01

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

    赞 (0)

    相关推荐

    • 别让扁平化设计平淡无奇

      早在2013年iOS7发布以来,扁平化设计就轰动了互联网世界.从那以后,它就持续发扬光大,并且发展出数量惊人的变种. 随着带有扁平化色彩的Google Material design规范的推出.卡片式 ...

    • 产品设计中的游戏化设计策略

      游戏行业是有巨大商业价值的,腾讯在2018年第一季度的财报就公布日赚2.66亿元,年收入破1000亿.一款好的游戏可以让用户持续数小时,数天,甚至数周一遍又一遍地玩同样的游戏.我并不经常玩游戏,但是, ...

    • 网易设计师经验：品牌化设计怎么做？

      什么是品牌 眼下快到春节了,有些同学可能会想要买点白酒送亲友,那么买哪个牌子呢?这时我们可能不假思索地想到茅台. 你看,这就是品牌的力量,你还没有消费,但钱已经给它准备好了.不仅消费者为品牌买单,投资 ...

    • PPT扁平化设计的8个实用小技巧

      PPT扁平化设计的8个实用小技巧 扁平化是目前的主流设计风格,本文总结了扁平化设计的8个小技巧,字体.图标.排版.配色等都有提及,教程深入浅出,非常适合新手,学会可以直接拿来作海报和PPT设计. 最近 ...

    • 扁平化设计的8个实用小技巧

      「材料设计」方兴未艾,扁平化仍是主流设计风格.今天@正越升同学总结了扁平化设计的8个小技巧,字体.图标.排版.配色等都有提及,教程深入浅出,非常适合新手,学会可以直接拿来作海报和PPT设计. 最近帮一 ...

    • 扁平化设计在PPT中的应用

      随着IOS7的发布，扁平化被推向了设计的巅峰，扁平化设计风格最早由微软提出，当时微软公布了新图标设计，Metro风格界面设计,也就是目前流行的扁平化设计。它的设计初衷是还原信息的本质，去掉所有与信息不 ...

    • PPT进行扁平化设计的注意事项

      PPT进行扁平化设计的注意事项

      现在的PPT为了在宽屏,大屏上等到更加好的展示效果,我们通常会进行扁平化设计,但是在我们进行扁平化设计的同时要注意一些问题才能够让我们的设计更加出色.具体如下:1.第一点:我们尽量使用阶梯式,或者更加 ...

    • 让扁平化设计也爆发视觉冲击力(5招）

      扁平化设计无疑是当前讨论最多,最火的设计形式,自ios7面世以来更是将扁平化设计的讨论推向风口浪尖. 在这里我不想分析拟物设计和扁平化设计的优劣,更不想说谁更好!在形式服从内容的今天,我只能说哪种设计 ...

    • 20个优秀手机界面扁平化设计，让你一秒看懂扁平化

      古语常说:去粗取精,去伪存真.自小念念不忘的句子,不仅是教会我们为人处世的道理,更是准确的揭示了事物的本质和规律.自13年兴起的Flat设计趋势,也恰恰好符合了这一规律.去除冗余.厚重和繁杂的装饰效果 ...