网页扁平化设计的五个要素

网页扁平化设计的五个要素

　　对于网站设计而言，扁平化设计实用且好用。扁平化设计 2.0 中平衡了实用性与美观性，其背后的设计哲学使其拥有长久的生命力。以下是百分网小编搜索整理的关于网页扁平化设计的五个要素，供参考借鉴，希望对大家有所帮助!想了解更多相关信息请持续关注我们应届毕业生考试网!

　　扁平化设计最早可追溯到瑞士极简设计风格(也叫国际主义平面设计风格)，扁平化设计在保留了旧有范式的同时又创造出了新的东西。把扁平化设计的五个元素剥离出来，从这五方面我们可以看出扁平化的真正奥义。

　　1. 长阴影

　　在按键等大多数 UI 设计元素中，长阴影常常伴随亮色调的控件出现。

　　阴影常常比较宽，且以 45 度角倾斜，锋利的边角使其一眼可辨。对阴影恰到好处的应用可以起强调作用并使扁平的图标更具立体感。

　　然而，这种长阴影有逐渐被淡雅的阴影取代的趋势。拭目以待更短的阴影效果在未来的表现。

　　2. 亮色调

　　有趣的是，扁平化设计的出现使得大胆靓丽的色彩运用得以重生。设计师们比以前更多地运用了有趣又充满活力的颜色。

　　事实上，一些设计师们甚至建立了专门的网站用以展示他们独特的配色方案。

　　3. 简化排版

　　说到排版，扁平化的排版不仅仅是把字体替换成无衬线的 Helvetica 或黑体。

　　当然，扁平化的排版应采用简单易读的字体，这意味着无衬线和等宽字体称为必然选择。最好的字体应该让人将注意力集中到内容本身。

　　尽管字体设计也是艺术的一种，设计师们应该把可读性放在第一位。扁平化设计使设计师们更加注重字体的选择。甚至衬线字体也被简化。

　　4. 虚拟按键

　　透明且可点击的虚拟按键，在提供了可视化的交互方块的同时又不会遮挡住 UI 设计。

　　虚拟按键由于透明，简洁的特性，并不会吸引太多注意力。起初，虚拟按键以拟物设计革命者的姿态出现，其后在形状与细节等方面有了长足的进步。虚拟按键与扁平化设计相辅相成，构成了极简与抽象的设计风格。

　　5. 极简与抽象

　　扁平化设计天生就是极简的。当设计的灵感并非来源于现实生活，拟物化的设计质感就理所应当被抛弃。

　　那么，剩下的就是用颜色，渐变，阴影，形状，和其他视觉细微之处的框架内容。扁平设计在本质上，迫使设计师更具创造性 —— 设计服务于内容呈现，而不是真实感的呈现。

　　极简主义的概念并不新鲜，但它因其洁净美观和网站的性能优势(如降低网页加载时间)最近又开始流行。这随着扁平化设计重生，并使用了鲜艳的背景，简单的设计，并演变成大量留白的更简单的设计。

　　展望

　　扁平化设计最初的概念是用一个个没有特征且清晰可辨的方块呈现设计框架。但在与其他流行的设计语言融合之后，扁平化设计本身已经发生了巨大改变。

　　扁平化设计一夜之间成为业界潮流，但它的发展成熟无疑还需要一些时日。扁平化设计的早期形式非常激进的想要做出与拟物化渭泾分明的极简设计，但现在的扁平化设计逐渐加上了修饰与质感。

　　让我们看看出自设计师Ryan Allen的近乎扁平化设计(Almost Flat)或称扁平化设计2.0。

　　大多数精美的近乎扁平化设计设计运用在网页领域，运用“视差滚动”可以在一个屏幕中显示丰富的内容。

　　Canal TP 公司运用如字体与色调等简单的特色，与动画加上视差滚动相结合，使两种范式伟大结合。这种搭配有助于消除过分简单的扁平化带来的副作用，使其更实用且适用于内容复杂的站点。

　　扁平化设计不会过快消失，只是会增加动画与交互设计，以适应更加复杂的网站。众所周知，“设计追随内容”，扁平化则是呈现内容的最佳设计范式。

　　网页设计以实用为第一追求，每一个按键，点击与滑动都应该有明确功能与视觉反馈。最重要的是，UI 控件需要有统一的风格，让用户忽略页面与设备的差异。这些基础控件将被提取出各自特点构成扁平化的图标。

　　看看「汉堡包式菜单按钮」的出现——无论你是否同意这种做法，无疑，现在其已经成为司空见惯的导航符号。

　　扁平化设计也在渐渐加入其他细节。

　　许多扁平化设计或近乎扁平化设计的网站包含大量图片，这在传统网站上是很少见的。扁平化的配色及排版与图片完美结合，这不需要对图片有太多修饰就可以获得现代化的风格。

　　比如，有些网站运用近乎扁平化设计设计风格，在网页中采用深色背景图片，扁平化的按钮，导航及字体，令网站非常直观简洁，现代且易用。

　　正如设计师Wells Riley所建议的，经常审视你设计的实用性与易用性。美感只是设计的另一个维度，真正目的是解决用户需求。

　　后记

　　扁平化设计实际上并没有公认的量化标准。它作为设计元素的一种可以运用在各种更高层次的设计体系之中。将扁平化的设计元素嵌入各种设计之中常常有意想不到的惊喜，例如一个有过多内容的网站，可以适当运用扁平化设计元素以适应传统的平面设计方案。

【网页扁平化设计的五个要素】相关文章：