一、基本资料

1.由来

扁平化设计这个概念,是由Google(谷歌)在2008年提出的;
它的首个实践者是microsoft(微软),microsoft在2012年发行了win8系统,这个系统的外观主题就是扁平化设计。

2.核心

去除冗余、厚重和繁杂的装饰效果。
而具体表现在去掉了多余的透视、纹理、渐变以及能做出3D效果的元素,这样可以让“信息”本身重新作为核心被凸显出来。
同时在设计元素上,则强调了抽象、极简和符号化。

3.、优劣

优:
降低硬件需求,延长待机时间。
信息的展示更为简洁,减少了认知障碍。
扁平化设计具有较好的适应性,在不同的屏幕尺寸上表现更佳。

劣:
在非移动设备上,难以展现自身的优势。
没有立体感,样式过于单调。

二、什么是扁平化设计

如果用一句话来描述它,我觉得应该是:一种追求极简主义,抛弃了以往的一切特效(浮雕、阴影、渐变、描边等)的设计风格。

(浮雕)                                                (阴影)                                                (渐变)                                              (描边)

三、Win7和Win8

原来一直很受欢迎的skeuomorphism(模仿实物纹理)设计,逐渐被扁平化设计取代(并非所有领域)。

对于仿真化和扁平化,我觉得最具有代表性的便是win7和win8,如下图(左win7,右win8)。

(图片来自百度)

四、颜色

在扁平化设计中,对于颜色有一定的要求,其原则是不使用刺激性过强的颜色,关于颜色这点,在下一章中会详细写到,这里就不多做描述了。

(旧)子数涵数·UI设计——扁平化设计的更多相关文章

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

    jquery mobile扁平化设计样式--Jquery mobile Flat UI介绍 这几天开发的web app使用了jquery mobile,jquery mobile自带的样式比较适合做企 ...

  2. 【UI设计】扁平化设计之流行色值

    收集了一些颜色值 顏色表示方法: 以命名方式定义经常使用的顏色,如color="green".可是自由度较低,何况单词量...... 以RGB值表示.如#FF0000表示red(红 ...

  3. 11款扁平化设计的 Twitter Bootstrap 主题和模板

    扁平化设计和 Bootstrap 框架是2013年网页设计领域的两大设计潮流.把这两者集合起来不是件容易的事情,使用下面这些主题和模板将节省我们的开发时间,因为我们可以修改已有的基础代码,而不是从零开 ...

  4. 扁平化设计五大原则(转自CSDN翻译)

    Cousins表示他虽然对扁平化设计的感觉非常强烈,但并没有特别热爱或者特别讨厌扁平化设计.他认为好的设计不应当局限于某种设计风格,而需要更注重可用性.有用性.如果因为时尚的缘故,那就顺其自然吧.但该 ...

  5. 16个时髦的扁平化设计的 HTML5 & CSS3 网站模板

    创建网站最好办法之一是使用现成的网站模板或使用开源 CMS 应用程序.所以,今天这篇文章给大家带来的是16款基于 HTML5 & CSS3 的精美的扁平风格网站模板,大家可以借助这些优秀的网站 ...

  6. 扁平化设计的最新趋势 – 长阴影(Long Shadow)

    随着互联网的发展,网页设计变得越来越复杂,如今设计的外观和感觉实现网站功能说使用的开发技术一样重要.互联网的功能远远不只是基本的信息共享,现在人们对网站的期望是远远大于几年前的. 如今,HTML5 & ...

  7. 腾讯CDC谈扁平化设计

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

  8. PPT扁平化设计总结

    注:以下内容基本都来自知乎,由于已经不记得网址了,所以未能附上所有相关链接,抱歉. PPT扁平化设计原则一.亲密:意思相近的内容放在一起二.对齐:页面上的某两个元素之间总是围绕一条直线对齐三.对比:有 ...

  9. C# winform 界面美化技巧(扁平化设计)

    关于C#界面美化的一些小技巧 在不使用第三方控件如 IrisSkin 的前提下,依然可以对winform做出让人眼前一亮的美化 首先,我们先来实现主界面的扁平化 此处分为两个步骤,第一步是更改winf ...

随机推荐

  1. X509证书中RSA公钥的提取与载入

    原文链接: http://blog.chinaunix.net/uid-16515626-id-2741894.html   由于项目需要,我计划利用openssl开发一个基本的CA,实现证书的发放等 ...

  2. 调用 webapi的put和delete 报"Method Not Allowed" 405 错误。

    修改引用到webapi的Dll文件对应的项目的web.config 选择生成读写方法webapi会生成四个读写的方法(CRUD),两个获取数据的.一个更新.一个删除,默认情况下更新和删除是不对外开外的 ...

  3. fedora Server 21 安装 Opera 29.0.1795.47

    最新文章:Virson's Blog 安装源: yum localinstall --nogpgcheck http://mirror.yandex.ru/fedora/russianfedora/r ...

  4. notepad++插件

    html插件 https://github.com/downloads/davegb3/NppTidy2/Tidy2_0.2.zip

  5. Can't get WebApplicationContext object from ContextRegistry.GetContext(): Resource handler for the 'web' protocol is not defined

    I'm stucked in configuring my web.config file under a web forms project in order to get an instance ...

  6. 对C#对象的Shallow、Deep Cloning认识【转】

    好像园内比较多博客对 Shallow.Deep Cloning的翻译是深拷贝.浅拷贝,当时我懵了,这个叫法怎么怪怪的. 就好像看军情观察室,台湾评论员,导弹叫飞弹. 至于它们的区别,一张图就可以解释. ...

  7. 纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦

    http://css-tricks.com/examples/ShapesOfCSS/

  8. apache+tomcat整合后的编码问题

    apache+tomcat整合提供webserver服务的方式是为了实现两个目的:一是方便利用apache http server将客户请求均衡的分给tomcat1,tomcat2....去处理,即负 ...

  9. 【JAVA】"骗人"的“replaceAll”

    Java String类中有个方法叫:replaceAll,从表面上看,他的意思是把所有的regex替换成replacement. public String replaceAll(String re ...

  10. 将main方法打成jar包,并引用第三方的maven jar包

    一.准备工作.执行命令 学习插件: 学习apache的打包插件maven-assembly-plugin:http://maven.apache.org/plugins/maven-assembly- ...