当前位置: 首页 >> APP设计教程_APPUI设计教程_UI设计教程_网页设计师加油站 >> 阅读正文

从一个web前端开发者的角度来看扁平化设计的5大优点

为什么扁平设计看起来真棒或可怕的?你知道为什么吗?

扁平化设计就是我个人的理解就是把原来复杂的动机简单的处理,放弃一些阴影,透视,纹理,渐变等等能做出3D效果的元素统统废弃,所有的设计效果都做到干净完美,没有任何羽化,渐变,或者阴影。

自从iOS7的发布,扁平化设计也随着遭到各界人士的吐槽。

今天25学堂跟大家强调下,这篇文章是站在web前端开发师的角度来看的简约设计风格的一些特别好的优点。

 第一个优点:给web前端开发者容易阅读PSD文件和说明文档

由于扁平设计通常包括像阴影,渐变和其他过滤器大幅减少的影响,根本就少,你不得不采取直接从Photoshop中绘制或任何其他图形设计软件转换成HTML / CSS布局改造设计时的照顾。就个人而言,当我设计的东西在一个最小的风格,我也少用“救命层” – 图层真的没有一个语义感,但须达到特殊的效果,因为它们在某些覆盖或掩蔽其他层方法。

拥有一个良好的组织设计文件没有各种各样的图层蒙版,图层样式和颜色过滤器是纯金的。它大大加快了出口的资产和转化图层样式到CSS的工作流程。

 

 第二个优点:减少了一些开发成本

由于扁平设计的重点内容,在​​很大程度上取决于最棒的印刷式样往往使用一种更广泛的调色板,以增加不同的领域和互动元素之间的反差,我们必须以形象资产,如背景纹理成交较少。几乎什么都可以复制或使用简单的CSS样式就可以解决。

 

 第三个优点:简化了SVG的资产和图标字体

由于简单和最小的插图,我们可以做出的可伸缩矢量图形,而不是JPG或PNG格式的图像画面和图标字体大量使用。这将导致真正的独立的解决方案,消除了在不同的分辨率需要多个图像精灵(通常是正常的分辨率和视网膜显示屏分辨率翻倍)。

iconExample

此外,SVGs以及图标的字体可以通过简单的CSS或JS,这使我们能够创造一些真正伟大的前瞻性动画(无需额外的资产的需要,除了一些代码行)和再利用同一资产在不同环境中简单地进行操作通过修饰它。

 第四个优点:接口更容易主题化,方便扩展

比方说,您的Web应用程序或网站需要支持不同的主题,用户可以从中选择。如果你曾经创建不同主题的skeumorphic设计,你就已经知道,这可能是一个非常耗时的任务 – 导出了一套全新的图形和创建新的CSS文件应用替代或新的效果需要一个严肃的金额额外的工作。有一台设计中的这些问题几乎完全消失了 – 在大多数情况下,你只需要改变一些颜色值(当你使用一个CSS预处理器一样都不能少,上海社会科学院或手写笔,支持CSS的变量,变得更容易)。太神奇了!

 

 第五个优点:浏览器之间的兼容性会更好

它可能不值得一提,但在某些情况下,我们可能仍然需要支持旧的浏览器无法处理的东西,如CSS渐变和箱阴影。由于这种视觉效果在最小的设计似乎很多时候,我们并没有增加那么多的修正,以使我们的网站很好看旧的浏览器。不管怎么说,老问题可能会消失,但你可一定要找到新的,比如可伸缩矢量图形不条条框框在Internet Explorer 8中的工作和更低的。

 

总的来说,25学堂认为扁平化设计才能真正加快开发流程,让生活更轻松。尽管如此,一个简约的设计有时可能不是最好的选择,还有其他的选择,当涉及到设计和开发现代web-site/app考虑。

扩展阅读扁平化设计的优缺点:

扁平化设计的优点:

简单,简洁,把事物更直接更本分的展现出来,减少一些设计效果的映衬,所带来的模糊看不清的情况。随着网站和应用程序在许多平台涵盖了越来越多不同的屏幕尺寸,创建多个屏幕尺寸和分辨率的skeuomorphic设计既繁琐又费时。设计正朝着更加扁平化的设计,你可以一次保证在所有的屏幕尺寸上它会很好看。扁平化设计更简约,条理清晰,最重要的一点是,更好的适应性。

扁平化设计缺点之一:

比如需要一定的学习成本,传达的感情不丰富,甚至过于冰冷。不具备形象化的体验。

 

分享一下,与TA一见钟情~~

本文标题:从一个web前端开发者的角度来看扁平化设计的5大优点

本文地址:http://www.25xt.com/allcode/4698.html

除非注明,本站文章均为原创或编译,转载请注明出处和原文链接,转载同时请务必保留原网站网址。