2019年网页设计趋势:材料设计精简年

发布时间:2019-08-29 18:28:27 阅读:49

毫无疑问,材料设计的触动是当年必不可少的美学。

谷歌基于Android的设计方案可能已经开始作为移动设备界面,但无论使用何种设备或平台,它的受欢迎程度和使用率都在不断增长。

这是过去几年设计中最大趋势的自然延续:平面设计。然而,Material做了一件永远无法做到的事情,它增加了足够的点缀以增强可用性。材料设计的根本不是剥离所有东西以支持视觉吸引力,而是可用性。

什么是Material Design Lite?

Material Design LiteAndroid网页设计

照片来源:Android

Material Design Lite或MDL是Material Design的下一个阶段。它需要所有设备的想法和优化它们。MDL经过精心设计,包括指南,组件以及带有模板和工具的整体框架,这些模板和工具可帮助几乎所有设计人员预先创建MDL网站,并且具有最少的先验知识。

MDL本质上使得每个人都可以快速轻松地访问该概念。

虽然MDL可能是“经典”材料设计的变体,但它绝不是一个较小的版本。大多数采用MDL设计的网站都非常坚固,易于使用且视觉上令人愉悦。

MDL的概念可以追溯到整个Material Design使命:“开发一个单一的底层系统,允许跨平台和设备大小的统一体验。移动规则是基础,但触摸,语音,鼠标和键盘都是一流的输入方法。“

如果这还不够,MDL的每个部分都是开源的。MDL网站或GitHub上提供了规则,模板,最佳实践和代码段

物理学原理


网页设计中的物理原理

照片来源:Rumchata

这种风格美学的基础来自物理学。设计师应该致力于创造一些外观和功能,就像在物理世界中(或可能)一样。

这个简单的概念支持Material的固有可用性。考虑所有依赖于这种想法的设计工具 - 分层,卡片,动作,颜色。

MDF网页设计

照片来源:MDF

最佳网页设计示例

照片来源:Serio验证

要了解如何以看起来真正物质的方式创建这些元素,让我们回想一下物理课。

  • 建议改变x和y尺寸,但所有元素应具有均匀的厚度。
  • 阴影应该自然地落在z轴上,似乎来自自然光源。
  • 内容可以出现在任何平面上,任何颜色或形状。
  • 材料组件是实心的,没有透明胶片。
  • 每个空间仅限于一个组件; 他们不能重叠。分层仅适用于背景和照片元素,而不是单个元素。
  • 组件可以收缩和扩展,但不能弯曲或折断。它们的动作流畅。
  • 组件可以拆分或组合。
  • 运动可以在任何轴上发生,并且应该由用户交互决定。

混合和匹配组件

网页设计中的混合组件

照片来源:wrk。

Google开发人员设计简单

照片来源:Google Developers

MDL包含用户友好的工具,可帮助您开始设计过程。虽然视觉设计主要是您所看到的,但是Material Design Lite的不同之处在于骨干。

MDL不是基于JavaScript的; 它旨在适用于所有设备,在旧版浏览器中降级,并提供跨平台的可访问性。你不一定需要知道它是如何工作的,但是你应该记住一个重要的要点:MDL几乎可以在任何地方工作。这是设计的。

开始使用MDL的最简单方法是选择一个模板每个模板(有六个可供选择)都带有您设计所需的一切,包括组件和调色板。但MDL的美妙之处在于您可以根据自己的喜好自定义。模板仅仅是一个起点。

除了模板之外,MDL还有一个庞大的组件库,可以让您混合和匹配各个部分来创建独一无二的东西。(您只需抓取您喜欢的组件的代码段,以保持网站的轻量级。)

虽然这些部件是更轻,更易于管理的材料版本,但所有基本元素都是相同的,包括字体(Roboto),图层样式和元素以及调色板。几乎任何元素都可以添加到设计中或删除。如果要进行实验,您甚至可以在不完全是材质的网站中包含MDL元素。

材质调色板

MDL最直观的一个方面是相关的调色板。材料项目通常是明亮和大胆的颜色。色调深度饱和,颜色组合可能有点出乎意料。

材质调色板

照片来源:获取MDL自定义CSS主题生成器

材质颜色通常基于由主色和一个重音组成的调色板。(你要明智地选择。)

Dropbox Business网页设计

照片来源:Dropbox Business

Dropbox Business是一个早期采用设计概念但保持品牌标识的网站的典型示例。幸运的是,他们的品牌蓝色非常适合材料。在这里,该网站使用单一的调色板与黑色和白色进行通信。(这在MDL中很常见,因为品牌在使用样式时会努力保持身份。)

MDL中的调色板

照片来源:Pumperl gsund

Pumperl gsund的网站采用相反的方法,并采用两种鲜艳的颜色全押。再次注意如何使用颜色来对抗最小的背景,其他所有颜色都使用黑色和白色。

在网页设计中使用大胆的颜色

照片来源:Fila

虽然MDL项目可以在整个过程中具有大而大胆的颜色(例如上面的Fila),但这可能很难实现细腻。您需要恰当的内容才能使其正常运行。在这种情况下,由于丰富多彩的运动服装系列,Fila拥有完美的元素组合,可以大大提升颜色。

结论

Material Design Lite是一个更实用,更灵活的Material Design版本,可以为几乎任何网站设计实现全部或部分实现。它提供整体功能,专注于可用性,以及简洁的线条和组织而闻名的设计。


我们在微信上24小时期待你的声音
解答:网站优化,网站建设,搜索引擎优化,APP 开发,小程序开发

非常感谢您有耐心的读完这篇文章:"2019年网页设计趋势:材料设计精简年",此文章仅为提供更多信息供用户参考使用或为学习交流的方便。如果对您有帮助,请收藏我们的网址:https://www.91webs.cn


18617670560